Platform font and emcn chrome for pages

Pages live inside the app, and the platform — emcn, every workspace
surface — renders the system stack, not the docs' Inter webfont; Inter
made pages read as foreign next to the app around them. The face is now
the platform stack with weights on the platform scale (400/500/600), the
Inter delivery machinery (page-font.ts, the preview data-URI fetch, the
public woff2) is gone, and the section filter wears emcn ChipInput's
exact chrome (30px rounded-lg, --surface-5 fill flipping to --surface-4
in dark, --border, 14px, no focus ring). The docs' geometry — layout,
spacing, rails, tables, code frames — is unchanged.

Author: Sg312

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx

@@ -13,7 +13,6 @@ import {
   usesSimArtifactStyles,
 } from '@/lib/workspace-files/artifact-stylesheet'
 import { compileSimPage, isSimPageSource } from '@/lib/workspace-files/page-compile'
-import { SIM_PAGE_FONT_URL, simPageFontFace } from '@/lib/workspace-files/page-font'
 import { useHorizontalWheelScroll } from '@/app/workspace/[workspaceId]/files/components/file-viewer/use-horizontal-wheel-scroll'
 import { type CsvImportFileDescriptor, useCsvTruncationImport } from './csv-import'
 import { DataTable } from './data-table'
@@ -145,55 +144,6 @@ const HTML_PREVIEW_BOOTSTRAP = `<script>
 })()
 </script>`
 
-/**
- * Inter for the sandboxed preview: `font-src` allows only `data:`, so the
- * host fetches the app-served woff2 once per session and inlines it. Until
- * the fetch lands (or off-browser) the page renders on the system stack and
- * upgrades on the next build — a font swap, not a layout break.
- */
-let interFontFaceCss = ''
-let interFontFacePromise: Promise<string> | null = null
-function loadInterFontFace(): Promise<string> {
-  if (!interFontFacePromise) {
-    interFontFacePromise = fetch(SIM_PAGE_FONT_URL)
-      .then((response) => (response.ok ? response.arrayBuffer() : null))
-      .then((buffer) => {
-        if (!buffer) return ''
-        const bytes = new Uint8Array(buffer)
-        let binary = ''
-        for (let i = 0; i < bytes.length; i += 0x8000) {
-          binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000))
-        }
-        interFontFaceCss = simPageFontFace(`data:font/woff2;base64,${btoa(binary)}`)
-        return interFontFaceCss
-      })
-      .catch(() => '')
-  }
-  return interFontFacePromise
-}
-
-function useSimPageFontFace(): string {
-  const [fontFace, setFontFace] = useState(interFontFaceCss)
-  useEffect(() => {
-    if (interFontFaceCss) return
-    let cancelled = false
-    loadInterFontFace().then((value) => {
-      if (!cancelled && value) setFontFace(value)
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [])
-  return fontFace
-}
-
-/**
- * Stamps the app's resolved theme onto the document root. The frame has an
- * opaque origin and inherits nothing, so `prefers-color-scheme` inside it
- * follows the OS rather than Sim's own toggle — a page would render light
- * against a dark app. Every theme-aware page keys off `[data-theme]`, so
- * carrying it across is what makes the two agree.
- */
 function stampTheme(html: string, theme: 'dark' | 'light'): string {
   if (/<html[\s>]/i.test(html)) {
     return html.replace(/<html(\s[^>]*)?>/i, (match, attrs: string | undefined) =>
@@ -207,8 +157,7 @@ export function buildHtmlPreviewDocument(
   content: string,
   theme: 'dark' | 'light' = 'light',
   workspaceId?: string,
-  lenient?: boolean,
-  fontFaceCss: string = interFontFaceCss
+  lenient?: boolean
 ): string {
   // The pdf model: a page file STORES its source (frontmatter + markdown +
   // sim: fences) and every rendering surface compiles on demand. Partial
@@ -225,7 +174,7 @@ export function buildHtmlPreviewDocument(
     // token overrides follow the sheet so the app's live values beat its
     // fallbacks, and the shell follows both.
     usesSimArtifactStyles(content)
-      ? `<style>${fontFaceCss}${SIM_ARTIFACT_STYLESHEET}</style><style>${simTokenOverrides()}</style>${SIM_ARTIFACT_SHELL}`
+      ? `<style>${SIM_ARTIFACT_STYLESHEET}</style><style>${simTokenOverrides()}</style>${SIM_ARTIFACT_SHELL}`
       : '',
     HTML_PREVIEW_BOOTSTRAP,
   ].join('')
@@ -331,16 +280,14 @@ const HtmlPreview = memo(function HtmlPreview({
 }) {
   const { resolvedTheme } = useTheme()
   const router = useRouter()
-  const fontFaceCss = useSimPageFontFace()
   const batchedContent = useStreamBatchedValue(content, isStreaming === true, 2000)
   const builtContent = buildHtmlPreviewDocument(
     batchedContent,
     resolvedTheme === 'dark' ? 'dark' : 'light',
     workspaceId,
     // Mid-stream, a fence still being written is malformed by definition —
     // suppress the skip notices until the stream settles.
-    isStreaming === true,
-    fontFaceCss
+    isStreaming === true
   )
   // AFTER the build: workspace image srcs (/api/files/view/…) only exist in
   // the COMPILED document — the raw source says sim:file/… — so substituting

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

@@ -143,8 +143,10 @@ describe('docs fidelity', () => {
   })
 
   // Inter leads the stack; each surface injects the matching @font-face.
-  it('leads the sans stack with the docs font', () => {
-    expect(SIM_ARTIFACT_STYLESHEET).toContain('--font-sans: "Inter",')
+  // Pages live inside the app: the PLATFORM stack, not the docs' webfont.
+  it('uses the platform font stack', () => {
+    expect(SIM_ARTIFACT_STYLESHEET).toContain('--font-sans: ui-sans-serif, -apple-system')
+    expect(SIM_ARTIFACT_STYLESHEET).not.toContain('"Inter"')
   })
 
   // The docs' prose anchor: 500 weight, 1.5px underline offset 3.5px, hover

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

@@ -35,6 +35,7 @@ const ARTIFACT_TOKENS = [
   '--surface-1',
   '--surface-2',
   '--surface-3',
+  '--surface-4',
   '--surface-5',
   '--surface-hover',
   '--surface-active',
@@ -111,6 +112,7 @@ export const SIM_ARTIFACT_STYLESHEET = `
   --surface-1: #fbfbfb;
   --surface-2: #ffffff;
   --surface-3: #f7f7f7;
+  --surface-4: #f5f5f5;
   --surface-5: #f3f3f3;
   --surface-hover: #f2f2f2;
   --surface-active: #ececec;
@@ -136,7 +138,10 @@ export const SIM_ARTIFACT_STYLESHEET = `
   --code-bg: #f5f5f5;
   --code-surface: var(--surface-5);
   --selection-bg: #add6ff;
-  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  /* The PLATFORM stack, not the docs' webfont: pages live inside the app,
+     and emcn/sim render the system face — Inter here read as foreign. The
+     docs' geometry survives; the face is the platform's. */
+  --font-sans: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --text-caption: 12px;
   --text-small: 13px;
@@ -149,6 +154,7 @@ export const SIM_ARTIFACT_STYLESHEET = `
     --surface-1: #1e1e1e;
     --surface-2: #232323;
     --surface-3: #242424;
+    --surface-4: #2c2c2c;
     --surface-5: #363636;
     --surface-hover: #262626;
     --surface-active: #2c2c2c;
@@ -186,6 +192,7 @@ export const SIM_ARTIFACT_STYLESHEET = `
   --surface-1: #1e1e1e;
   --surface-2: #232323;
   --surface-3: #242424;
+  --surface-4: #2c2c2c;
   --surface-5: #363636;
   --surface-hover: #262626;
   --surface-active: #2c2c2c;
@@ -218,9 +225,9 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 h1, h2, h3, h4 { text-wrap: balance; }
-h1 { font-size: 1.5rem; font-weight: 550; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.25; margin: 0 0 0.75rem; }
+h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.25; margin: 0 0 0.75rem; }
 h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; color: var(--text-primary); margin: 2.5rem 0 0.9rem; }
-h3, h4 { font-size: var(--text-md); font-weight: 470; letter-spacing: -0.01em; color: var(--text-body); margin: 1.75rem 0 0.5rem; }
+h3, h4 { font-size: var(--text-md); font-weight: 500; letter-spacing: -0.01em; color: var(--text-body); margin: 1.75rem 0 0.5rem; }
 p, li { max-width: 70ch; }
 p { margin: 0 0 1rem; }
 /* Content links — the docs' prose anchor (fumadocs prose, compiled): 500
@@ -236,7 +243,7 @@ a {
   transition: opacity 0.2s;
 }
 a:hover { opacity: 0.8; }
-strong { color: var(--text-primary); font-weight: 550; }
+strong { color: var(--text-primary); font-weight: 600; }
 hr { border: 0; border-top: 1px solid var(--border); margin: 3em 0; }
 hr + * { margin-top: 0; }
 /* Lists — the docs' prose metrics: 1rem/1.625em indents, muted markers. */
@@ -427,16 +434,24 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
 }
 .art-bar-title { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin-right: auto; }
 .art-search {
-  width: min(260px, 45vw);
+  /* emcn ChipInput chrome verbatim (chip-chrome.ts): h-30px rounded-lg,
+     --surface-5 fill (--surface-4 dark via token), --border-1 border, 14px
+     text, px-2, no focus ring. */
   height: 30px;
-  padding: 0 0.6rem;
-  font-family: var(--font-sans);
-  font-size: var(--text-small);
-  color: var(--text-primary);
-  background: var(--surface-5);
+  padding: 0 0.5rem;
   border: 1px solid var(--border);
   border-radius: 0.5rem;
+  background: var(--chip-fill, var(--surface-5));
+  font: inherit;
+  font-size: var(--text-sm);
+  color: var(--text-body);
+  outline: none;
+  transition: background-color 0.15s, border-color 0.15s;
+  width: 200px;
 }
+/* emcn's chip fill flips to --surface-4 in dark. */
+:root[data-theme="dark"] { --chip-fill: var(--surface-4); }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chip-fill: var(--surface-4); } }
 .art-search::placeholder { color: var(--text-muted); }
 /* Top-of-page controls: Copy page + prev/next chevrons on the title row. */
 .page-actions {
@@ -525,7 +540,7 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
   align-items: center;
   gap: 6px;
   font-size: var(--text-small);
-  font-weight: 480;
+  font-weight: 500;
   color: var(--text-muted);
   margin: 0 0 0.5rem;
 }
@@ -537,7 +552,7 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
   padding-top: 6px;
   padding-bottom: 6px;
   font-size: var(--text-small);
-  font-weight: 430;
+  font-weight: 400;
   line-height: 1.4;
   color: var(--text-muted);
   text-decoration: none;
@@ -552,12 +567,12 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
 .toc-items a::after {
   content: attr(data-text);
   display: block; height: 0; visibility: hidden; overflow: hidden;
-  font-weight: 470; pointer-events: none;
+  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: 470; }
+.toc-items a.is-active { color: var(--text-primary); font-weight: 500; }
 /* 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. */

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

@@ -4,7 +4,6 @@ import {
   SIM_ARTIFACT_STYLESHEET,
 } from '@/lib/workspace-files/artifact-stylesheet'
 import { compileSimPage } from '@/lib/workspace-files/page-compile'
-import { SIM_PAGE_FONT_URL, simPageFontFace } from '@/lib/workspace-files/page-font'
 
 /**
  * Renders page source as a fully self-contained styled document for the
@@ -21,6 +20,6 @@ export function renderSimPageDocument(source: string, options?: { workspaceId?:
   const compiled = compileSimPage(source, { ...options, baseUrl: getBaseUrl() })
   return compiled.replace(
     '</head>',
-    `<style>${simPageFontFace(SIM_PAGE_FONT_URL)}${SIM_ARTIFACT_STYLESHEET}</style>${SIM_ARTIFACT_SHELL}</head>`
+    `<style>${SIM_ARTIFACT_STYLESHEET}</style>${SIM_ARTIFACT_SHELL}</head>`
   )
 }