@autumnsgrove/groveengine 0.9.3 → 0.9.4

package/dist/components/admin/GutterManager.svelte

@@ -30,6 +30,16 @@
    * @property {string} url
    */
 
+  /**
+   * @typedef {Object} ProcessedAnchor
+   * @property {string} raw - Original anchor string
+   * @property {boolean} isHeading - Whether this is a heading anchor
+   * @property {number} headingLevel - Heading level (1-6) or 0 if not a heading
+   * @property {boolean} isAnchorTag - Whether this is a custom anchor tag
+   * @property {string} displayText - Human-readable display text
+   * @property {string} type - Anchor type for accessibility labels
+   */
+
   // Props
   let {
     gutterItems = $bindable(/** @type {GutterItem[]} */ ([])),
@@ -37,6 +47,62 @@
     availableAnchors = /** @type {string[]} */ ([]),
   } = $props();
 
+  /**
+   * Extract heading level from an anchor string (capped at 1-6)
+   * @param {string | undefined} anchor
+   * @returns {number} Heading level 1-6, or 0 if not a heading
+   */
+  function getHeadingLevel(anchor) {
+    if (!anchor) return 0;
+    // Only match valid heading levels (1-6 hash marks)
+    const match = anchor.match(/^#{1,6}/);
+    return match ? Math.min(match[0].length, 6) : 0;
+  }
+
+  /**
+   * Process a raw anchor string into structured data
+   * @param {string} anchor - The raw anchor string
+   * @returns {ProcessedAnchor}
+   */
+  function createProcessedAnchor(anchor) {
+    const isHeading = anchor.startsWith('#');
+    const headingLevel = getHeadingLevel(anchor);
+    const isAnchorTag = anchor.startsWith('anchor:');
+    const displayText = isHeading
+      ? anchor.replace(/^#+\s*/, '')
+      : anchor.replace('anchor:', '');
+    const type = isHeading
+      ? `heading level ${headingLevel}`
+      : isAnchorTag
+        ? 'anchor tag'
+        : 'paragraph';
+
+    return { raw: anchor, isHeading, headingLevel, isAnchorTag, displayText, type };
+  }
+
+  /**
+   * Preprocess anchors into structured data for better performance
+   * @type {ProcessedAnchor[]}
+   */
+  let processedAnchors = $derived(availableAnchors.map(createProcessedAnchor));
+
+  /** Default empty anchor for fallback */
+  const emptyAnchor = { raw: '', isHeading: false, headingLevel: 0, isAnchorTag: false, displayText: '', type: 'paragraph' };
+
+  /**
+   * Get processed anchor data for display (checks cache first, then computes)
+   * @param {string | undefined} anchor
+   * @returns {ProcessedAnchor}
+   */
+  function getProcessedAnchor(anchor) {
+    if (!anchor) return emptyAnchor;
+    // Try to find in preprocessed cache first
+    const cached = processedAnchors.find(pa => pa.raw === anchor);
+    if (cached) return cached;
+    // Fallback to computing for anchors not in availableAnchors
+    return createProcessedAnchor(anchor);
+  }
+
   // State
   let showAddModal = $state(false);
   /** @type {number | null} */
@@ -267,11 +333,12 @@
       <p class="hint">Add comments, images, or galleries that appear alongside your content.</p>
     </div>
   {:else}
-    <div class="vines-list">
+    <div class="vines-list" role="list" aria-label="Vine items">
       {#each gutterItems as item, index (index)}
-        <div class="vine-item">
+        {@const anchor = getProcessedAnchor(item.anchor)}
+        <div class="vine-item" role="listitem">
           <div class="item-header">
-            <span class="item-type">
+            <span class="item-type" aria-hidden="true">
               {#if item.type === "comment"}
                 <MessageSquare class="type-icon" />
               {:else if item.type === "photo"}
@@ -282,7 +349,21 @@
                 <Pin class="type-icon" />
               {/if}
             </span>
-            <span class="item-anchor" title={item.anchor}>{item.anchor || "No anchor"}</span>
+            <div class="item-anchor-display">
+              {#if item.anchor}
+                {#if anchor.isHeading}
+                  <span class="anchor-badge heading-badge" aria-hidden="true">H{anchor.headingLevel}</span>
+                {:else if anchor.isAnchorTag}
+                  <span class="anchor-badge tag-badge" aria-hidden="true">⚓</span>
+                {:else}
+                  <span class="anchor-badge para-badge" aria-hidden="true">¶</span>
+                {/if}
+                <span class="item-anchor-text" title={item.anchor}>{anchor.displayText}</span>
+                <span class="visually-hidden">Anchored to {anchor.type}: {anchor.displayText}</span>
+              {:else}
+                <span class="no-anchor-warning" role="alert">⚠ No anchor set</span>
+              {/if}
+            </div>
             <div class="item-actions">
               <button
                 class="action-btn"
@@ -364,18 +445,40 @@
     </span>
   </div>
 
-  {#if availableAnchors.length > 0}
-    <div class="available-anchors">
-      <span class="anchors-label">Available:</span>
-      {#each availableAnchors as anchor}
-        <button
-          type="button"
-          class="anchor-chip"
-          onclick={() => (itemAnchor = anchor)}
-        >
-          {anchor}
-        </button>
-      {/each}
+  {#if processedAnchors.length > 0}
+    <div class="available-anchors-section">
+      <span class="anchors-label" id="anchor-selection-label">Click to select anchor location:</span>
+      <div class="anchor-list" role="listbox" aria-labelledby="anchor-selection-label">
+        {#each processedAnchors as anchor}
+          <button
+            type="button"
+            class="anchor-option"
+            class:selected={itemAnchor === anchor.raw}
+            class:heading={anchor.isHeading}
+            class:anchor-tag={anchor.isAnchorTag}
+            role="option"
+            aria-selected={itemAnchor === anchor.raw}
+            aria-label="Select {anchor.type}: {anchor.displayText}"
+            onclick={() => (itemAnchor = anchor.raw)}
+          >
+            {#if anchor.isHeading}
+              <span class="anchor-icon heading-icon" aria-hidden="true">H{anchor.headingLevel}</span>
+            {:else if anchor.isAnchorTag}
+              <span class="anchor-icon tag-icon" aria-hidden="true">⚓</span>
+            {:else}
+              <span class="anchor-icon para-icon" aria-hidden="true">¶</span>
+            {/if}
+            <span class="anchor-text">{anchor.displayText}</span>
+            {#if itemAnchor === anchor.raw}
+              <span class="selected-check" aria-hidden="true">✓</span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {:else}
+    <div class="no-anchors-hint">
+      <p>No anchors found. Add headings to your content or use "Add Anchor" to create custom anchor points.</p>
     </div>
   {/if}
 
@@ -636,20 +739,76 @@
     height: 1rem;
   }
 
-  .item-anchor {
+  .item-anchor-display {
     flex: 1;
-    font-family: monospace;
-    font-size: 0.8rem;
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-width: 0;
+  }
+
+  .anchor-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 16px;
+    font-size: 0.6rem;
+    font-weight: 700;
+    border-radius: 3px;
+    flex-shrink: 0;
+  }
+
+  .heading-badge {
+    background: rgba(124, 77, 171, 0.15);
+    color: #7c4dab;
+  }
+
+  :global(.dark) .heading-badge {
+    background: rgba(201, 160, 232, 0.15);
+    color: #c9a0e8;
+  }
+
+  .tag-badge {
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+    font-size: 0.65rem;
+  }
+
+  :global(.dark) .tag-badge {
+    background: rgba(96, 165, 250, 0.15);
+    color: #60a5fa;
+  }
+
+  .para-badge {
+    background: rgba(107, 114, 128, 0.15);
+    color: #6b7280;
+    font-size: 0.65rem;
+  }
+
+  .item-anchor-text {
+    font-family: -apple-system, system-ui, sans-serif;
+    font-size: 0.75rem;
     color: var(--color-text-muted);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  :global(.dark) .item-anchor {
+  :global(.dark) .item-anchor-text {
     color: var(--grove-text-strong);
   }
 
+  .no-anchor-warning {
+    font-size: 0.7rem;
+    color: #e07030;
+    font-style: italic;
+  }
+
+  :global(.dark) .no-anchor-warning {
+    color: #f0c674;
+  }
+
   .item-actions {
     display: flex;
     gap: 0.125rem;
@@ -775,40 +934,147 @@
     flex: 1;
   }
 
-  .available-anchors {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.35rem;
-    align-items: center;
+  /* Improved anchor selection UI */
+  .available-anchors-section {
     margin-bottom: 1rem;
+    background: var(--grove-overlay-5);
+    border: 1px solid var(--grove-border-subtle);
+    border-radius: 10px;
+    padding: 0.75rem;
   }
 
   .anchors-label {
+    display: block;
     font-size: 0.75rem;
     color: var(--color-text-subtle);
+    margin-bottom: 0.5rem;
+    font-weight: 500;
   }
 
-  .anchor-chip {
-    padding: 0.2rem 0.5rem;
-    background: var(--grove-overlay-10);
-    border: 1px solid var(--grove-border);
-    border-radius: 12px;
+  .anchor-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+
+  .anchor-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--glass-bg-medium, rgba(255, 255, 255, 0.5));
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border: 1px solid var(--grove-border-subtle);
+    border-radius: 8px;
     color: var(--color-text-muted);
-    font-size: 0.7rem;
-    font-family: monospace;
+    font-size: 0.8rem;
     cursor: pointer;
     transition: all 0.15s ease;
+    text-align: left;
+  }
+
+  .anchor-option:hover {
+    background: var(--grove-overlay-15);
+    border-color: var(--grove-overlay-25);
+    transform: translateX(4px);
   }
 
-  .anchor-chip:hover {
-    background: var(--grove-overlay-20);
+  .anchor-option.selected {
+    background: rgba(34, 197, 94, 0.15);
+    border-color: rgba(34, 197, 94, 0.4);
     color: var(--color-primary);
   }
 
-  :global(.dark) .anchor-chip:hover {
+  :global(.dark) .anchor-option {
+    background: rgba(16, 50, 37, 0.35);
+    border-color: rgba(74, 222, 128, 0.1);
+  }
+
+  :global(.dark) .anchor-option:hover {
+    background: rgba(16, 50, 37, 0.5);
+    border-color: rgba(74, 222, 128, 0.2);
+  }
+
+  :global(.dark) .anchor-option.selected {
+    background: rgba(74, 222, 128, 0.15);
+    border-color: rgba(74, 222, 128, 0.4);
     color: #86efac;
   }
 
+  .anchor-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 20px;
+    font-size: 0.65rem;
+    font-weight: 700;
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  .heading-icon {
+    background: rgba(124, 77, 171, 0.15);
+    color: #7c4dab;
+  }
+
+  :global(.dark) .heading-icon {
+    background: rgba(201, 160, 232, 0.15);
+    color: #c9a0e8;
+  }
+
+  .tag-icon {
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+    font-size: 0.75rem;
+  }
+
+  :global(.dark) .tag-icon {
+    background: rgba(96, 165, 250, 0.15);
+    color: #60a5fa;
+  }
+
+  .para-icon {
+    background: rgba(107, 114, 128, 0.15);
+    color: #6b7280;
+    font-size: 0.75rem;
+  }
+
+  .anchor-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .selected-check {
+    color: var(--color-primary);
+    font-weight: 600;
+    flex-shrink: 0;
+  }
+
+  :global(.dark) .selected-check {
+    color: #86efac;
+  }
+
+  .no-anchors-hint {
+    padding: 1rem;
+    background: var(--grove-overlay-5);
+    border: 1px dashed var(--grove-border);
+    border-radius: 8px;
+    margin-bottom: 1rem;
+  }
+
+  .no-anchors-hint p {
+    margin: 0;
+    font-size: 0.8rem;
+    color: var(--color-text-subtle);
+    text-align: center;
+  }
+
   .image-preview {
     margin-top: 0.5rem;
     max-height: 150px;
@@ -960,4 +1226,17 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  /* Screen reader only utility */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 </style>

package/dist/components/admin/MarkdownEditor.svelte

@@ -2,10 +2,12 @@
   import { marked } from "marked";
   import { onMount, tick } from "svelte";
   import { sanitizeMarkdown } from "../../utils/sanitize";
+  import { extractHeaders } from "../../utils/markdown";
   import "../../styles/content.css";
   import { Button, Input, Logo } from '../../ui';
   import Dialog from "../../ui/components/ui/Dialog.svelte";
   import FloatingToolbar from "./FloatingToolbar.svelte";
+  import ContentWithGutter from "../custom/ContentWithGutter.svelte";
   import { Eye, EyeOff, Maximize2, PenLine, Columns2, BookOpen, Focus, Minimize2 } from "lucide-svelte";
   import { browser } from "$app/environment";
 
@@ -23,6 +25,17 @@
    * @property {number} [wordCount]
    */
 
+  /**
+   * @typedef {Object} GutterItemProp
+   * @property {string} type
+   * @property {string} [anchor]
+   * @property {string} [content]
+   * @property {string} [url]
+   * @property {string} [file]
+   * @property {string} [caption]
+   * @property {Array<{url: string, alt?: string, caption?: string}>} [images]
+   */
+
   // Props
   let {
     content = $bindable(""),
@@ -34,6 +47,7 @@
     previewTitle = "",
     previewDate = "",
     previewTags = /** @type {string[]} */ ([]),
+    gutterItems = /** @type {GutterItemProp[]} */ ([]),
   } = $props();
 
   // Core refs and state
@@ -93,6 +107,7 @@
   let charCount = $derived(content.length);
   let lineCount = $derived(content.split("\n").length);
   let previewHtml = $derived(content ? sanitizeMarkdown(/** @type {string} */ (marked.parse(content, { async: false }))) : "");
+  let previewHeaders = $derived(content ? extractHeaders(content) : []);
 
   let readingTime = $derived.by(() => {
     const minutes = Math.ceil(wordCount / 200);
@@ -743,9 +758,9 @@
 {#if showFullPreview}
   <div class="full-preview-modal" role="dialog" aria-modal="true" aria-label="Full article preview" tabindex="-1" onkeydown={(e) => e.key === 'Escape' && (showFullPreview = false)}>
     <button type="button" class="full-preview-backdrop" onclick={() => (showFullPreview = false)} aria-label="Close preview"></button>
-    <div class="full-preview-container">
+    <div class="full-preview-container" class:has-vines={gutterItems.length > 0}>
       <header class="full-preview-header">
-        <h2>:: full preview</h2>
+        <h2>:: full preview {#if gutterItems.length > 0}<span class="vine-count">({gutterItems.length} vine{gutterItems.length !== 1 ? 's' : ''})</span>{/if}</h2>
         <div class="full-preview-actions">
           <button type="button" class="full-preview-close" onclick={() => (showFullPreview = false)}>
             [<span class="key">c</span>lose]
@@ -753,45 +768,84 @@
         </div>
       </header>
       <div class="full-preview-scroll">
-        <article class="full-preview-article">
-          {#if previewTitle || previewDate || previewTags.length > 0}
-            <header class="content-header">
-              {#if previewTitle}
-                <h1>{previewTitle}</h1>
-              {/if}
-              {#if previewDate || previewTags.length > 0}
-                <div class="post-meta">
-                  {#if previewDate}
-                    <time datetime={previewDate}>
-                      {new Date(previewDate).toLocaleDateString("en-US", {
-                        year: "numeric",
-                        month: "long",
-                        day: "numeric",
-                      })}
-                    </time>
-                  {/if}
-                  {#if previewTags.length > 0}
-                    <div class="tags">
-                      {#each previewTags as tag}
-                        <span class="tag">{tag}</span>
-                      {/each}
-                    </div>
-                  {/if}
-                </div>
-              {/if}
-            </header>
-          {/if}
-
-          <div class="content-body">
-            {#if previewHtml}
-              {#key previewHtml}
-                <div>{@html previewHtml}</div>
-              {/key}
-            {:else}
-              <p class="preview-placeholder">Start writing to see your content here...</p>
+        {#if gutterItems.length > 0}
+          <!-- Use ContentWithGutter when we have vines -->
+          <ContentWithGutter
+            content={previewHtml}
+            gutterContent={gutterItems}
+            headers={previewHeaders}
+            showTableOfContents={previewHeaders.length > 0}
+          >
+            {#if previewTitle || previewDate || previewTags.length > 0}
+              <header class="content-header">
+                {#if previewTitle}
+                  <h1 class="full-preview-title">{previewTitle}</h1>
+                {/if}
+                {#if previewDate || previewTags.length > 0}
+                  <div class="post-meta">
+                    {#if previewDate}
+                      <time datetime={previewDate}>
+                        {new Date(previewDate).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })}
+                      </time>
+                    {/if}
+                    {#if previewTags.length > 0}
+                      <div class="tags">
+                        {#each previewTags as tag}
+                          <span class="tag">{tag}</span>
+                        {/each}
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+              </header>
             {/if}
-          </div>
-        </article>
+          </ContentWithGutter>
+        {:else}
+          <!-- Simple preview without vines -->
+          <article class="full-preview-article">
+            {#if previewTitle || previewDate || previewTags.length > 0}
+              <header class="content-header">
+                {#if previewTitle}
+                  <h1>{previewTitle}</h1>
+                {/if}
+                {#if previewDate || previewTags.length > 0}
+                  <div class="post-meta">
+                    {#if previewDate}
+                      <time datetime={previewDate}>
+                        {new Date(previewDate).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                        })}
+                      </time>
+                    {/if}
+                    {#if previewTags.length > 0}
+                      <div class="tags">
+                        {#each previewTags as tag}
+                          <span class="tag">{tag}</span>
+                        {/each}
+                      </div>
+                    {/if}
+                  </div>
+                {/if}
+              </header>
+            {/if}
+
+            <div class="content-body">
+              {#if previewHtml}
+                {#key previewHtml}
+                  <div>{@html previewHtml}</div>
+                {/key}
+              {:else}
+                <p class="preview-placeholder">Start writing to see your content here...</p>
+              {/if}
+            </div>
+          </article>
+        {/if}
       </div>
     </div>
   </div>
@@ -1446,6 +1500,17 @@
     flex-direction: column;
     overflow: hidden;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    transition: max-width 0.3s ease;
+  }
+  /* Wider container when vines are present */
+  .full-preview-container.has-vines {
+    max-width: 1400px;
+  }
+  .vine-count {
+    font-weight: 400;
+    color: #7a9a7a;
+    font-size: 0.75rem;
+    margin-left: 0.5rem;
   }
   :global(.dark) .full-preview-container {
     background: var(--color-bg-dark, #0d1117);

package/dist/components/admin/MarkdownEditor.svelte.d.ts

@@ -21,6 +21,7 @@ declare const MarkdownEditor: import("svelte").Component<{
     previewTitle?: string;
     previewDate?: string;
     previewTags?: any;
+    gutterItems?: any;
 }, {
     getAvailableAnchors: () => string[];
     insertAnchor: (name: string) => void;
@@ -40,4 +41,5 @@ type $$ComponentProps = {
     previewTitle?: string;
     previewDate?: string;
     previewTags?: any;
+    gutterItems?: any;
 };

package/dist/components/custom/ContentWithGutter.svelte

@@ -426,11 +426,21 @@
 	let isPurifyReady = $state(false);
 
 	// Load DOMPurify only in browser (avoids jsdom dependency for SSR)
+	// Content is already sanitized server-side, so we mark ready immediately
+	// and re-sanitize once DOMPurify loads (defensive, usually a no-op)
 	onMount(async () => {
 		if (browser) {
-			const module = await import('dompurify');
-			DOMPurify = module.default;
+			// Mark ready immediately so we don't block rendering
+			// Content was already sanitized on the server
 			isPurifyReady = true;
+
+			// Load DOMPurify in the background for additional client-side sanitization
+			try {
+				const module = await import('dompurify');
+				DOMPurify = module.default;
+			} catch (err) {
+				console.warn('DOMPurify failed to load, using server-sanitized content:', err);
+			}
 		}
 	});