ycode · liamwalder · Mar 24, 2026 · Mar 19, 2026 · Mar 19, 2026 · Mar 19, 2026
@@ -250,6 +250,10 @@
   @apply bg-input px-1.5 py-0.5 rounded-md font-mono;
 }
 
+.rich-text-editor-full.ProseMirror hr {
+  @apply border-t border-border my-4;
+}
+
 /* Custom dropdown chevron for styled select elements on published pages */
 #ybody select.appearance-none {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

@@ -1,17 +1,16 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { revalidatePath } from 'next/cache';
 import { noCache } from '@/lib/api-response';
+import { clearAllCache } from '@/lib/services/cacheService';
 
 /**
  * Vercel Cache Invalidation Endpoint
  * 
- * Handles full cache invalidation
+ * Handles full cache invalidation (data cache tags + layout path)
  */
 
 export async function POST(request: NextRequest) {
   try {
-    // Invalidate all pages
-    revalidatePath('/', 'layout');
+    await clearAllCache();
 
     return noCache({
       success: true,

@@ -105,6 +105,11 @@ const BorderControls = memo(function BorderControls({ layer, onLayerUpdate, acti
   const divideColor = getDesignProperty('borders', 'divideColor') || '';
   const hasDivider = !!(divideX || divideY || divideColor || designBorders?.divideX || designBorders?.divideY || designBorders?.divideColor);
 
+  const outlineWidth = getDesignProperty('borders', 'outlineWidth') || '';
+  const outlineColor = getDesignProperty('borders', 'outlineColor') || '';
+  const outlineOffset = getDesignProperty('borders', 'outlineOffset') || '';
+  const hasOutline = !!(outlineWidth || outlineColor || designBorders?.outlineWidth || designBorders?.outlineColor);
+
   // Local controlled inputs (prevents repopulation bug)
   const inputs = useControlledInputs({
     borderRadius,
@@ -119,6 +124,8 @@ const BorderControls = memo(function BorderControls({ layer, onLayerUpdate, acti
     borderLeftWidth,
     divideX,
     divideY,
+    outlineWidth,
+    outlineOffset,
   }, extractMeasurementValue);
 
   const [borderRadiusInput, setBorderRadiusInput] = inputs.borderRadius;
@@ -133,6 +140,8 @@ const BorderControls = memo(function BorderControls({ layer, onLayerUpdate, acti
   const [borderLeftWidthInput, setBorderLeftWidthInput] = inputs.borderLeftWidth;
   const [divideXInput, setDivideXInput] = inputs.divideX;
   const [divideYInput, setDivideYInput] = inputs.divideY;
+  const [outlineWidthInput, setOutlineWidthInput] = inputs.outlineWidth;
+  const [outlineOffsetInput, setOutlineOffsetInput] = inputs.outlineOffset;
 
   // Use mode toggle hooks for radius and width
   const radiusModeToggle = useModeToggle({
@@ -297,6 +306,43 @@ const BorderControls = memo(function BorderControls({ layer, onLayerUpdate, acti
     ]);
   };
 
+  const handleOutlineWidthChange = (value: string) => {
+    setOutlineWidthInput(value);
+    const sanitized = removeSpaces(value);
+    debouncedUpdateDesignProperty('borders', 'outlineWidth', sanitized || null);
+  };
+
+  const handleOutlineColorChange = (value: string) => {
+    const sanitized = removeSpaces(value);
+    debouncedUpdateDesignProperty('borders', 'outlineColor', sanitized || null);
+  };
+
+  const handleOutlineColorImmediate = (value: string) => {
+    const sanitized = removeSpaces(value);
+    updateDesignProperty('borders', 'outlineColor', sanitized || null);
+  };
+
+  const handleOutlineOffsetChange = (value: string) => {
+    setOutlineOffsetInput(value);
+    const sanitized = removeSpaces(value);
+    debouncedUpdateDesignProperty('borders', 'outlineOffset', sanitized || null);
+  };
+
+  const handleAddOutline = () => {
+    updateDesignProperties([
+      { category: 'borders', property: 'outlineWidth', value: '1px' },
+      { category: 'borders', property: 'outlineColor', value: '#000000' },
+    ]);
+  };
+
+  const handleRemoveOutline = () => {
+    updateDesignProperties([
+      { category: 'borders', property: 'outlineWidth', value: null },
+      { category: 'borders', property: 'outlineColor', value: null },
+      { category: 'borders', property: 'outlineOffset', value: null },
+    ]);
+  };
+
   return (
     <div className="py-5">
       <header className="py-4 -mt-4 flex items-center justify-between">
@@ -314,6 +360,12 @@ const BorderControls = memo(function BorderControls({ layer, onLayerUpdate, acti
             >
               Dividers
             </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={handleAddOutline}
+              disabled={hasOutline}
+            >
+              Outline
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       </header>
@@ -680,6 +732,85 @@ const BorderControls = memo(function BorderControls({ layer, onLayerUpdate, acti
           </div>
         )}
 
+        {hasOutline && (
+          <div className="grid grid-cols-3 items-start">
+            <Label variant="muted" className="h-8">Outline</Label>
+            <div className="col-span-2 flex items-center gap-2">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="input"
+                    size="sm"
+                    className="justify-start flex-1"
+                  >
+                    <div className="flex items-center gap-2">
+                      <div className="size-5 rounded-[6px] shrink-0 -ml-1 relative overflow-hidden outline dark:outline-white/10 outline-offset-[-1px]">
+                        <div className="absolute inset-0 z-20" style={{ background: parseBorderColorToCss(outlineColor, colorVariables) }} />
+                        <div className="absolute inset-0 opacity-15 bg-checkerboard bg-background z-10" />
+                      </div>
+                      <Label variant="muted" className="cursor-pointer">{outlineWidth || '1px'}</Label>
+                    </div>
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-64 mr-4">
+                  <div className="flex flex-col gap-2">
+                    <div className="grid grid-cols-3">
+                      <Label variant="muted">Width</Label>
+                      <div className="col-span-2">
+                        <Input
+                          stepper
+                          min="0"
+                          step="1"
+                          value={outlineWidthInput}
+                          onChange={(e) => handleOutlineWidthChange(e.target.value)}
+                          placeholder="1"
+                        />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-3">
+                      <Label variant="muted">Color</Label>
+                      <div className="col-span-2 *:w-full">
+                        <ColorPropertyField
+                          solidOnly
+                          value={outlineColor || '#000000'}
+                          onChange={handleOutlineColorChange}
+                          onImmediateChange={handleOutlineColorImmediate}
+                          layer={layer}
+                          onLayerUpdate={onLayerUpdate}
+                          designProperty="outlineColor"
+                          fieldGroups={fieldGroups}
+                          allFields={allFields}
+                          collections={collections}
+                        />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-3">
+                      <Label variant="muted">Offset</Label>
+                      <div className="col-span-2">
+                        <Input
+                          stepper
+                          step="1"
+                          value={outlineOffsetInput}
+                          onChange={(e) => handleOutlineOffsetChange(e.target.value)}
+                          placeholder="0"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <span
+                role="button"
+                tabIndex={0}
+                className="p-0.5 rounded-sm opacity-70 hover:opacity-100 transition-opacity cursor-pointer"
+                onClick={handleRemoveOutline}
+              >
+                <Icon name="x" className="size-2.5" />
+              </span>
+            </div>
+          </div>
+        )}
+
       </div>
 
     </div>

@@ -22,6 +22,7 @@ import { getCanvasIframeHtml } from '@/lib/canvas-utils';
 import { CanvasPortalProvider } from '@/lib/canvas-portal-context';
 import { cn } from '@/lib/utils';
 import { loadSwiperCss } from '@/lib/slider-utils';
+import { resolveReferenceFieldsSync } from '@/lib/collection-utils';
 import { useEditorStore } from '@/stores/useEditorStore';
 import { useFontsStore } from '@/stores/useFontsStore';
 import { useColorVariablesStore } from '@/stores/useColorVariablesStore';
@@ -298,6 +299,19 @@ export default function Canvas({
     return serializeLayers(layers, components, editingComponentVariables);
   }, [layers, components, editingComponentVariables]);
 
+  // Enrich page collection item data with reference field dotted keys
+  // so variables like "refFieldId.targetFieldId" resolve on canvas
+  const enrichedPageCollectionItemData = useMemo(() => {
+    const values = pageCollectionItem?.values;
+    if (!values || !pageCollectionFields?.length) return values || null;
+    return resolveReferenceFieldsSync(
+      values,
+      pageCollectionFields,
+      collectionItems,
+      collectionFields
+    );
+  }, [pageCollectionItem?.values, pageCollectionFields, collectionItems, collectionFields]);
+
   // Collect layer IDs that should be hidden on canvas (display: hidden with on-load)
   const editorHiddenLayerIds = useMemo(() => {
     if (disableEditorHiddenLayers) return undefined;
@@ -472,7 +486,7 @@ export default function Canvas({
         hoveredLayerId={effectiveHoveredLayerId}
         pageId={pageId}
         pageCollectionItemId={pageCollectionItem?.id}
-        pageCollectionItemData={pageCollectionItem?.values || null}
+        pageCollectionItemData={enrichedPageCollectionItemData}
         onLayerClick={handleLayerClick}
         onLayerUpdate={onLayerUpdate}
         onLayerHover={handleLayerHover}
@@ -495,7 +509,8 @@ export default function Canvas({
     editingComponentId,
     editingComponentVariables,
     pageId,
-    pageCollectionItem,
+    pageCollectionItem?.id,
+    enrichedPageCollectionItemData,
     handleLayerClick,
     onLayerUpdate,
     handleLayerHover,