Editor: inset shadow + line-number gutter; home: section eyebrows

claude · claude · commit 92691aaf79f1 · 2026-05-11T23:54:49.000Z
Three independent changes per the latest impeccable review.

1. Inset shadow on .runner-editor
   Adds the "recessed surface" convention for editable text inputs:
   box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04). Very subtle —
   the editor reads as a slot the eye can rest into rather than a
   flat panel like the output. The focus-within state stacks the
   inset shadow with the existing 3px accent glow.

2. Line-number gutter
   CodeMirror gains lineNumbers() in public/editor.js. The
   .cm-gutters CSS (was display: none) now styles the gutter as a
   transparent strip with --hairline-soft right border, --muted
   tabular-nums numerals, .85em font-size, right-aligned with 2ch
   minimum width and var(--space-2) right padding. This is the
   IDE-style "code area" convention from Replit/Codecademy/Stripe
   docs — strongest single signal that the panel is editable code.

3. Section eyebrows on the home page (prototype)
   render_home() groups the 109 examples by section in the order
   each section first appears in the manifest, then emits one
   eyebrow divider per section followed by every example in that
   section. 13 eyebrows total: Basics, Data Model, Text, Control
   Flow, Iteration, Collections, Functions, Classes, Errors,
   Modules, Types, Standard Library, Async.

   The eyebrow markup uses the existing .eyebrow class plus a new
   .grid-section rule that spans grid-column: 1 / -1 to act as a
   full-width row break inside the auto-fit grid. No new chrome,
   one CSS rule.

   Cards lose their per-card section eyebrow (was redundant with
   the divider above) — each card is now just h2 (title) + meta
   (summary). The test that asserts the card markup still passes
   because it only checks the &lt;a class="card" href="..."&gt; opening
   tag.

62 tests pass; SEO/cache lint clears 110 pages; ruff clean.
diff --git a/public/editor.a4a7766e1b9b.js b/public/editor.a4a7766e1b9b.js
@@ -1,5 +1,5 @@
 import { EditorState } from 'https://esm.sh/@codemirror/state@6.5.2';
-import { EditorView } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
+import { EditorView, lineNumbers } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
 import { defaultHighlightStyle, syntaxHighlighting } from 'https://esm.sh/@codemirror/language@6.12.3?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1';
 import { python } from 'https://esm.sh/@codemirror/lang-python@6.2.1?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1,@codemirror/language@6.12.3';
 
@@ -15,6 +15,7 @@ if (textarea && form) {
       extensions: [
         python(),
         syntaxHighlighting(defaultHighlightStyle),
+        lineNumbers(),
         EditorView.lineWrapping,
         EditorView.updateListener.of((update) => {
           if (update.docChanged) textarea.value = update.state.doc.toString();
diff --git a/public/editor.js b/public/editor.js
@@ -1,5 +1,5 @@
 import { EditorState } from 'https://esm.sh/@codemirror/state@6.5.2';
-import { EditorView } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
+import { EditorView, lineNumbers } from 'https://esm.sh/@codemirror/view@6.41.1?deps=@codemirror/state@6.5.2';
 import { defaultHighlightStyle, syntaxHighlighting } from 'https://esm.sh/@codemirror/language@6.12.3?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1';
 import { python } from 'https://esm.sh/@codemirror/lang-python@6.2.1?deps=@codemirror/state@6.5.2,@codemirror/view@6.41.1,@codemirror/language@6.12.3';
 
@@ -15,6 +15,7 @@ if (textarea && form) {
       extensions: [
         python(),
         syntaxHighlighting(defaultHighlightStyle),
+        lineNumbers(),
         EditorView.lineWrapping,
         EditorView.updateListener.of((update) => {
           if (update.docChanged) textarea.value = update.state.doc.toString();
diff --git a/public/site.css b/public/site.css
@@ -20,7 +20,8 @@
     .cm-scroller { font-family: inherit; line-height: 1.5; }
     .cm-content { padding: 0; }
     .cm-line { padding: 0; }
-    .cm-gutters { display: none; }
+    .cm-gutters { background: transparent; border-right: 1px solid var(--hairline-soft); color: var(--muted); font-variant-numeric: tabular-nums; }
+    .cm-lineNumbers .cm-gutterElement { padding: 0 var(--space-2) 0 0; min-width: 2ch; text-align: right; font-size: .85em; }
     .cm-activeLine, .cm-activeLineGutter { background: transparent; }
     .cm-selectionBackground, .cm-focused .cm-selectionBackground { background: rgba(255, 72, 1, 0.18) !important; }
     code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
@@ -56,6 +57,8 @@
       to { opacity: 1; background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
     }
     .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
+    .grid-section { grid-column: 1 / -1; margin: var(--space-4) 0 0; }
+    .grid-section:first-child { margin-top: 0; }
     .card { display: block; min-height: 10rem; border: 1px solid var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface-2); color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
     .card:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--accent); }
     .card h2 { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .18em; }
@@ -110,8 +113,8 @@
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
     .runner-panel h3 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
-    .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
-    .runner-editor:focus-within { box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }
+    .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04); transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
+    .runner-editor:focus-within { box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04), 0 0 0 3px rgba(255, 72, 1, 0.12); }
     .execution-time { min-height: 1.5rem; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
     .playground-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 1rem; }
     .tool-button { min-height: 40px; border: 1px solid var(--hairline); border-radius: 9999px; padding: .62rem .9rem; background: var(--surface-2); color: var(--text); cursor: pointer; transition-property: transform, background-color, border-style; transition-duration: 150ms; }
diff --git a/public/site.f3fd8c78f5ba.css b/public/site.f3fd8c78f5ba.css
@@ -20,7 +20,8 @@
     .cm-scroller { font-family: inherit; line-height: 1.5; }
     .cm-content { padding: 0; }
     .cm-line { padding: 0; }
-    .cm-gutters { display: none; }
+    .cm-gutters { background: transparent; border-right: 1px solid var(--hairline-soft); color: var(--muted); font-variant-numeric: tabular-nums; }
+    .cm-lineNumbers .cm-gutterElement { padding: 0 var(--space-2) 0 0; min-width: 2ch; text-align: right; font-size: .85em; }
     .cm-activeLine, .cm-activeLineGutter { background: transparent; }
     .cm-selectionBackground, .cm-focused .cm-selectionBackground { background: rgba(255, 72, 1, 0.18) !important; }
     code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
@@ -56,6 +57,8 @@
       to { opacity: 1; background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
     }
     .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
+    .grid-section { grid-column: 1 / -1; margin: var(--space-4) 0 0; }
+    .grid-section:first-child { margin-top: 0; }
     .card { display: block; min-height: 10rem; border: 1px solid var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface-2); color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
     .card:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--accent); }
     .card h2 { text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: .18em; }
@@ -110,8 +113,8 @@
     .runner-panel { min-height: 18rem; display: flex; flex-direction: column; border: 1px dashed var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface); }
     .runner-panel h3 { margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline-soft); font-size: 1.05rem; letter-spacing: -0.02em; }
     .runner-panel pre { flex: 1; min-height: 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
-    .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
-    .runner-editor:focus-within { box-shadow: 0 0 0 3px rgba(255, 72, 1, 0.12); }
+    .runner-editor { border-style: solid; background: var(--surface-2); cursor: text; box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04); transition: box-shadow 160ms cubic-bezier(0.2, 0, 0, 1); }
+    .runner-editor:focus-within { box-shadow: inset 0 1px 2px rgba(82, 16, 0, 0.04), 0 0 0 3px rgba(255, 72, 1, 0.12); }
     .execution-time { min-height: 1.5rem; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--hairline-soft); color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
     .playground-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .8rem 0 1rem; }
     .tool-button { min-height: 40px; border: 1px solid var(--hairline); border-radius: 9999px; padding: .62rem .9rem; background: var(--surface-2); color: var(--text); cursor: pointer; transition-property: transform, background-color, border-style; transition-duration: 150ms; }
diff --git a/src/app.py b/src/app.py
@@ -499,19 +499,26 @@ def _layout(title: str, content: str, description: str | None = None, path: str
 
 
 def render_home() -> str:
-    cards = []
+    # Group examples by section in the order each section first appears
+    # in the manifest, then emit one eyebrow divider per section followed
+    # by every example in that section.
+    by_section: dict[str, list[dict]] = {}
     for example in list_examples():
-        cards.append(
-            _replace(
-                '<a class="card" href="/examples/__SLUG__"><p class="eyebrow">__SECTION__</p><h2>__TITLE__</h2><p class="meta">__SUMMARY__</p></a>',
-                {
-                    "SECTION": html.escape(example["section"]),
-                    "SLUG": html.escape(example["slug"]),
-                    "TITLE": html.escape(example["title"]),
-                    "SUMMARY": html.escape(example["summary"]),
-                },
+        by_section.setdefault(example["section"], []).append(example)
+    cards = []
+    for section, examples in by_section.items():
+        cards.append(f'<p class="eyebrow grid-section">{html.escape(section)}</p>')
+        for example in examples:
+            cards.append(
+                _replace(
+                    '<a class="card" href="/examples/__SLUG__"><h2>__TITLE__</h2><p class="meta">__SUMMARY__</p></a>',
+                    {
+                        "SLUG": html.escape(example["slug"]),
+                        "TITLE": html.escape(example["title"]),
+                        "SUMMARY": html.escape(example["summary"]),
+                    },
+                )
             )
-        )
     content = _replace(
         _template("home.html"),
         {"PYTHON_VERSION": html.escape(PYTHON_VERSION), "CARDS": "".join(cards)},
diff --git a/src/asset_manifest.py b/src/asset_manifest.py
@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.9ad0aa5c4ab6.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = 'eaa23cebb468'
+ASSET_PATHS = {'SITE_CSS': '/site.f3fd8c78f5ba.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.a4a7766e1b9b.js'}
+HTML_CACHE_VERSION = '6e21b65d3855'
