Color-only active state in the TOC — width can never move again

Two attempts at reserving the bold width (a hidden ghost, then freezing
measured rail widths) each traded one artifact for another: the ghost
did not stop the fit-content column re-measuring, and the freeze made a
long link wrap to two lines when it gained weight. The root cause was
letting the active state change a width-affecting property at all: the
active TOC link now shifts color only (muted to primary — the clerk
thumb already carries the emphasis), the search input is a plain text
field (the native search clear button is not emcn chrome), and the
ghost/freeze machinery is gone.

Author: Sg312

apps/sim/lib/workspace-files/artifact-stylesheet.ts

@@ -561,18 +561,13 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
 }
 .toc-items a:first-of-type { padding-top: 0; }
 .toc-items a:last-of-type { padding-bottom: 0; }
-/* Hidden ghost at the ACTIVE weight: each link always occupies its bold
-   width, so the weight flip on highlight cannot jitter the fit-content
-   column side to side while scrolling. */
-.toc-items a::after {
-  content: attr(data-text);
-  display: block; height: 0; visibility: hidden; overflow: hidden;
-  font-weight: 500; pointer-events: none;
-}
 .toc-items a[data-depth="2"] { padding-left: 20px; }
 .toc-items a[data-depth="3"] { padding-left: 32px; }
 .toc-items a:hover { color: var(--text-body); }
-.toc-items a.is-active { color: var(--text-primary); font-weight: 500; }
+/* Color-only active state: a weight flip re-measures the fit-content
+   column (widen or wrap) — primary-vs-muted is the docs' real signal
+   anyway, the clerk thumb carries the emphasis. */
+.toc-items a.is-active { color: var(--text-primary); }
 /* The track: the full outline path in foreground at 10%, and the same path in
    full foreground clipped to the active range — fumadocs animates the clip
    window, which is the "black segment" that slides as you scroll. */
@@ -711,9 +706,6 @@ export const SIM_ARTIFACT_SHELL = `<script>
       a.href = '#' + h.id
       a.textContent = h.textContent
       a.dataset.depth = h.tagName === 'H2' ? '2' : '3'
-      // Reserves the active (bolder) width so the fit-content column never
-      // resizes as the highlight moves — see the ::after ghost in the sheet.
-      a.dataset.text = h.textContent || ''
       tocItems.appendChild(a)
       tocLinks.push(a)
     }
@@ -727,7 +719,7 @@ export const SIM_ARTIFACT_SHELL = `<script>
     title.textContent = document.title
     const search = document.createElement('input')
     search.className = 'art-search'
-    search.type = 'search'
+    search.type = 'text'
     search.placeholder = 'Filter sections'
     search.setAttribute('aria-label', 'Filter sections on this page')
 

apps/sim/lib/workspace-files/page-compile.ts

@@ -43,8 +43,45 @@ const frontmatterSchema = z.object({
   /** Docs-style footer pagination: a markdown link — `[Title](sim:file/<id>)`. */
   prev: z.string().optional(),
   next: z.string().optional(),
+  /**
+   * The SET's sidebar, docs-style: groups of pages under muted labels. Each
+   * page entry is a markdown link; every page of a set carries the same nav.
+   */
+  nav: z
+    .array(
+      z.object({
+        label: z.string().optional(),
+        pages: z.array(z.string()).min(1),
+      })
+    )
+    .optional(),
 })
 
+/**
+ * The set navigation as real (hidden) markup, so sim: hrefs resolve through
+ * the normal link pass and the shell can lift it into the left rail —
+ * grouped page links with the current page's sections nested beneath it.
+ */
+function setNavHtml(nav: NonNullable<z.infer<typeof frontmatterSchema>['nav']>): string {
+  const groups = nav
+    .map((group) => {
+      const links = group.pages
+        .map((entry) => {
+          const match = entry.match(MD_LINK)
+          if (!match) return ''
+          return `<a href="${escapeHtml(match[2])}">${escapeHtml(match[1])}</a>`
+        })
+        .filter(Boolean)
+        .join('')
+      if (!links) return ''
+      const label = group.label ? `<h6>${escapeHtml(group.label)}</h6>` : ''
+      return `<section>${label}${links}</section>`
+    })
+    .filter(Boolean)
+    .join('')
+  return groups ? `<nav class="set-nav" hidden aria-label="Pages">${groups}</nav>` : ''
+}
+
 const MD_LINK = /^\s*\[([^\]]+)\]\(([^)]+)\)\s*$/
 
 const CHEVRON_ATTRS =
@@ -363,6 +400,7 @@ function compileSimPageDocument(source: string, lenient = false): string {
     '</head>',
     '<body>',
     `<div class="page" data-layout="${meta.layout ?? 'docs'}">`,
+    ...(meta.nav ? [setNavHtml(meta.nav)] : []),
     `<h1>${escapeHtml(meta.title)}</h1>`,
     ...(meta.lede ? [`<p class="lede">${escapeHtml(meta.lede)}</p>`] : []),
     compileBody(rest, lenient),