63:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:T2091,import type { HighlighterCore, LanguageRegistration } from "shiki/core"; import { easedCream, easedStone } from "./themes"; /** * The Shiki singleton every Eased code component shares. * * - One `HighlighterCore` per page (and per server process), created on first use. Shiki, * its JavaScript regex engine and every grammar are dynamic imports, so a page that never * shows code never downloads them, and one that shows only `bash` never loads TSX. * - The JavaScript regex engine, not Oniguruma: no WASM, so it runs in the browser, on the * server and at the edge alike. * - Output is plain data (`CodeLine[]`), not HTML: each token carries its light and dark * colour, so the renderer picks one with CSS `light-dark()` and a theme switch never * re-highlights. The data is serialisable, so a server can highlight and hand the result * to a client component (`tokens` prop) with no flash of plain text. */ /** One run of text in one colour. `light`/`dark` are hex; missing means "inherit the foreground". */ export type CodeToken = { content: string; light?: string; dark?: string; italic?: boolean; bold?: boolean }; /** One line of code as coloured runs. An empty array is a blank line. */ export type CodeLine = CodeToken[]; /** Languages with a grammar; anything else renders as plain text. */ export type CodeLang = "tsx" | "ts" | "js" | "jsx" | "json" | "css" | "bash" | "html" | "md" | "python" | "diff"; type Loader = () => Promise<{ default: LanguageRegistration[] }>; const GRAMMARS: Record = { tsx: { id: "tsx", load: () => import("shiki/langs/tsx.mjs") }, ts: { id: "typescript", load: () => import("shiki/langs/typescript.mjs") }, js: { id: "javascript", load: () => import("shiki/langs/javascript.mjs") }, jsx: { id: "jsx", load: () => import("shiki/langs/jsx.mjs") }, json: { id: "json", load: () => import("shiki/langs/json.mjs") }, css: { id: "css", load: () => import("shiki/langs/css.mjs") }, bash: { id: "bash", load: () => import("shiki/langs/bash.mjs") }, html: { id: "html", load: () => import("shiki/langs/html.mjs") }, md: { id: "markdown", load: () => import("shiki/langs/markdown.mjs") }, python: { id: "python", load: () => import("shiki/langs/python.mjs") }, diff: { id: "diff", load: () => import("shiki/langs/diff.mjs") }, }; const ALIASES: Record = { typescript: "ts", javascript: "js", mjs: "js", cjs: "js", mts: "ts", cts: "ts", sh: "bash", shell: "bash", shellscript: "bash", zsh: "bash", console: "bash", markdown: "md", mdx: "md", py: "python", patch: "diff", jsonc: "json", htm: "html", }; /** Short display names for the language pill. */ export const LANG_LABEL: Record = { tsx: "TSX", ts: "TypeScript", js: "JavaScript", jsx: "JSX", json: "JSON", css: "CSS", bash: "Shell", html: "HTML", md: "Markdown", python: "Python", diff: "Diff", }; /** Resolve a fence name or file extension ("typescript", "sh", "py") to a supported language, or null. */ export function resolveLang(lang: string | undefined | null): CodeLang | null { if (!lang) return null; const key = lang.toLowerCase().trim(); if (key in GRAMMARS) return key as CodeLang; return ALIASES[key] ?? null; } /** The language a file name implies: `button.tsx` → "tsx", `README.md` → "md". */ export function langFromFilename(name: string | undefined): CodeLang | null { const ext = name?.split(".").pop(); return ext && ext !== name ? resolveLang(ext) : null; } const THEMES = { light: easedCream.name!, dark: easedStone.name! }; let core: Promise | null = null; /** The resolved highlighter, so cached grammars tokenise synchronously. */ let ready: HighlighterCore | null = null; const loading = new Map>(); const loaded = new Set(); /** The shared highlighter, created on first call with both Eased themes and no grammars. */ export function getHighlighter(): Promise { core ??= Promise.all([import("shiki/core"), import("shiki/engine/javascript")]).then(([{ createHighlighterCore }, { createJavaScriptRegexEngine }]) => createHighlighterCore({ themes: [easedStone, easedCream], langs: [], // Forgiving: a grammar pattern the JS engine cannot compile is skipped, not fatal. engine: createJavaScriptRegexEngine({ forgiving: true }), }), ).then((h) => (ready = h)); return core; } /** Load one grammar (once; concurrent callers share the request). */ export function loadLang(lang: CodeLang): Promise { if (loaded.has(lang)) return Promise.resolve(); let p = loading.get(lang); if (!p) { p = Promise.all([getHighlighter(), GRAMMARS[lang].load()]) .then(([h, mod]) => h.loadLanguage(...mod.default)) .then(() => { loaded.add(lang); }) .catch((error) => { loading.delete(lang); throw error; }); loading.set(lang, p); } return p; } /** Plain lines, for unsupported languages and for the frame before highlighting lands. */ export function plainLines(code: string): CodeLine[] { return splitLines(code).map((text) => (text ? [{ content: text }] : [])); } /** Split on \n (and \r\n), dropping one trailing newline so a file's last line is not a blank row. */ export function splitLines(code: string): string[] { return code.replace(/\r\n?/g, "\n").replace(/\n$/, "").split("\n"); } // Results by language + code, so remounts (tab switches, collapsing) never re-tokenise. const CACHE_MAX = 200; const cache = new Map(); function remember(key: string, lines: CodeLine[]) { if (cache.size >= CACHE_MAX) cache.delete(cache.keys().next().value!); cache.set(key, lines); return lines; } /** * Synchronously return highlighted lines if this exact code has been highlighted before, or * if its grammar is already loaded (tokenising is synchronous once the grammar is in). * Returns null when highlighting needs an async load first. */ export function peekHighlight(code: string, lang: string | undefined | null): CodeLine[] | null { const resolved = resolveLang(lang); if (!resolved) return plainLines(code); const key = `${resolved}\0${code}`; const hit = cache.get(key); if (hit) return hit; if (!loaded.has(resolved) || !ready) return null; return tokenize(ready, key, code, resolved); } function tokenize(h: HighlighterCore, key: string, code: string, lang: CodeLang) { const source = code.replace(/\r\n?/g, "\n").replace(/\n$/, ""); const raw = h.codeToTokensWithThemes(source, { lang: GRAMMARS[lang].id, themes: THEMES }); return remember(key, raw.map(mergeLine)); } /** * Highlight `code` as `lang` into light/dark token lines. Unknown languages come back as * plain lines. Works on the server and in the browser. */ export async function highlight(code: string, lang: string | undefined | null): Promise { const resolved = resolveLang(lang); if (!resolved) return plainLines(code); const key = `${resolved}\0${code}`; const hit = cache.get(key); if (hit) return hit; await loadLang(resolved); return tokenize(await getHighlighter(), key, code, resolved); } // Shiki's FontStyle bit flags. const ITALIC = 1; const BOLD = 2; /** Convert Shiki's per-theme variants to Eased tokens and merge neighbours that look identical. */ function mergeLine(line: { content: string; variants: Record }[]): CodeLine { const out: CodeToken[] = []; for (const t of line) { const l = t.variants.light ?? {}; const d = t.variants.dark ?? {}; const style = (l.fontStyle ?? 0) > 0 ? l.fontStyle! : 0; const token: CodeToken = { content: t.content }; if (l.color) token.light = l.color.toLowerCase(); if (d.color) token.dark = d.color.toLowerCase(); if (style & ITALIC) token.italic = true; if (style & BOLD) token.bold = true; const prev = out[out.length - 1]; // Whitespace takes on any colour, so it joins the previous run. const blank = !t.content.trim(); if (prev && (blank || (prev.light === token.light && prev.dark === token.dark && prev.italic === token.italic && prev.bold === token.bold))) { prev.content += t.content; } else out.push(token); } return out; } 66:T1d91,import type { ThemeRegistration } from "shiki/core"; /** * Eased's two syntax themes, in the warm stone/cream palette of `eased.css`. * * Every hue is low-chroma and sits on the neutral's warm side (clay keywords, sage strings, * cream-gold functions, amber numbers, one cool slate for types so the eye can find them). * Colours are authored in OKLCH and stored as hex because Shiki needs hex. Each token clears * WCAG 4.5:1 on `surface-sunken` in its theme (comments included), so nothing is decoration. * The theme backgrounds are only a fallback: code-core paints the block with Eased tokens. */ type Palette = { bg: string; fg: string; comment: string; punctuation: string; keyword: string; string: string; fn: string; number: string; type: string; property: string; attribute: string; parameter: string; inserted: string; deleted: string; }; /** eased-stone (dark), on `surface-sunken` (oklch 17.8% 0.006 80). */ const stone: Palette = { bg: "#13110e", fg: "#e2ded5", // oklch(90% .012 85) 14.0:1 comment: "#8a857e", // oklch(62% .012 80) 5.2:1 punctuation: "#9b9891", // oklch(68% .01 80) 6.6:1 keyword: "#daa28a", // oklch(76% .075 45) 8.6:1 string: "#afc798", // oklch(80% .07 130) 10.3:1 fn: "#ebd19c", // oklch(87% .075 85) 12.7:1 number: "#e6ad7f", // oklch(79% .09 60) 9.6:1 type: "#9dc6ce", // oklch(80% .045 210) 10.3:1 property: "#d4c9b9", // oklch(84% .025 75) 11.5:1 attribute: "#d9c099", // oklch(82% .06 80) 10.8:1 parameter: "#e0cdbe", // oklch(86% .03 60) 12.3:1 inserted: "#89d298", // oklch(80% .11 150) 10.5:1 deleted: "#ed8c84", // oklch(74% .12 25) 7.8:1 }; /** eased-cream (light), on `surface-sunken` (oklch 98% 0.003 80). */ const cream: Palette = { bg: "#f9f8f6", fg: "#2a2520", // oklch(27% .012 70) 14.2:1 comment: "#726e67", // oklch(54% .012 80) 4.8:1 punctuation: "#66635d", // oklch(50% .01 80) 5.7:1 keyword: "#9a4729", // oklch(50% .12 40) 6.0:1 string: "#476d2f", // oklch(49% .10 135) 5.7:1 fn: "#7b5117", // oklch(47% .09 70) 6.6:1 number: "#9f5618", // oklch(53% .12 55) 5.2:1 type: "#246476", // oklch(47% .07 220) 6.3:1 property: "#524536", // oklch(40% .03 70) 8.7:1 attribute: "#876125", // oklch(52% .09 75) 5.3:1 parameter: "#594233", // oklch(40% .04 55) 8.8:1 inserted: "#067132", // oklch(48% .13 150) 5.8:1 deleted: "#b02a2d", // oklch(50% .17 25) 6.2:1 }; function theme(name: string, type: "light" | "dark", p: Palette): ThemeRegistration { return { name, type, colors: { "editor.background": p.bg, "editor.foreground": p.fg }, fg: p.fg, bg: p.bg, settings: [ { settings: { foreground: p.fg, background: p.bg } }, { scope: ["comment", "punctuation.definition.comment", "string.comment"], settings: { foreground: p.comment, fontStyle: "italic" } }, { scope: ["punctuation", "meta.brace", "meta.delimiter", "punctuation.separator", "punctuation.terminator", "punctuation.accessor", "meta.tag.punctuation", "punctuation.definition.tag"], settings: { foreground: p.punctuation }, }, { scope: ["keyword", "storage", "storage.type", "storage.modifier", "keyword.operator.new", "keyword.operator.expression", "keyword.control", "variable.language.this", "variable.language.super"], settings: { foreground: p.keyword }, }, { scope: ["keyword.operator", "keyword.operator.assignment"], settings: { foreground: p.punctuation } }, { scope: ["string", "string.quoted", "string.template", "punctuation.definition.string", "markup.inline.raw", "markup.fenced_code"], settings: { foreground: p.string }, }, { scope: ["constant.character.escape", "string.regexp", "punctuation.definition.template-expression"], settings: { foreground: p.number } }, { scope: ["entity.name.function", "support.function", "meta.function-call entity.name.function", "variable.function", "entity.name.method"], settings: { foreground: p.fn }, }, { scope: ["constant.numeric", "constant.language", "constant.language.boolean", "constant.other", "support.constant", "variable.other.constant", "keyword.other.unit"], settings: { foreground: p.number }, }, { scope: ["entity.name.type", "entity.name.class", "support.type", "support.class", "entity.other.inherited-class", "storage.type.class.jsdoc", "meta.type.annotation entity.name.type", "entity.name.namespace"], settings: { foreground: p.type }, }, { scope: ["variable.other.property", "variable.other.object.property", "meta.object-literal.key", "support.variable.property", "support.type.property-name", "meta.property-name", "entity.name.tag.yaml"], settings: { foreground: p.property }, }, { scope: ["support.type.property-name.json", "support.type.property-name.json punctuation"], settings: { foreground: p.keyword } }, { scope: ["variable.parameter", "meta.parameters variable"], settings: { foreground: p.parameter } }, { scope: ["entity.name.tag", "support.class.component", "entity.name.tag.css", "entity.name.tag.html"], settings: { foreground: p.keyword } }, { scope: ["entity.other.attribute-name", "entity.other.attribute-name.class.css", "entity.other.attribute-name.id.css"], settings: { foreground: p.attribute } }, { scope: ["support.type.property-name.css", "support.type.vendored.property-name.css"], settings: { foreground: p.property } }, { scope: ["support.constant.property-value.css", "keyword.other.unit.css", "constant.other.color"], settings: { foreground: p.number } }, { scope: ["variable.other.readwrite", "variable.other.object", "variable"], settings: { foreground: p.fg } }, // Shell: commands read as functions, flags as parameters. { scope: ["entity.name.command", "support.function.builtin.shell"], settings: { foreground: p.fn } }, { scope: ["variable.parameter.option", "constant.other.option"], settings: { foreground: p.attribute } }, // Plain arguments stay in the foreground, so a command reads as command + flags, not a wall of string colour. { scope: ["string.unquoted.argument", "string.unquoted.argument.shell"], settings: { foreground: p.fg } }, // Markdown. { scope: ["markup.heading", "entity.name.section", "punctuation.definition.heading"], settings: { foreground: p.fn, fontStyle: "bold" } }, { scope: ["markup.bold"], settings: { fontStyle: "bold" } }, { scope: ["markup.italic"], settings: { fontStyle: "italic" } }, { scope: ["markup.underline.link", "string.other.link"], settings: { foreground: p.type } }, { scope: ["punctuation.definition.list.begin.markdown", "beginning.punctuation.definition.list.markdown"], settings: { foreground: p.keyword } }, // Python decorators. { scope: ["entity.name.function.decorator", "meta.decorator", "punctuation.definition.decorator"], settings: { foreground: p.attribute } }, // Diff. { scope: ["markup.inserted", "punctuation.definition.inserted"], settings: { foreground: p.inserted } }, { scope: ["markup.deleted", "punctuation.definition.deleted"], settings: { foreground: p.deleted } }, { scope: ["meta.diff.range", "meta.diff.header", "meta.diff.index", "punctuation.definition.range.diff"], settings: { foreground: p.type } }, ], }; } export const easedStone = theme("eased-stone", "dark", stone); export const easedCream = theme("eased-cream", "light", cream); 67:Tbaa,/** * The line decoration model: which lines of a block are highlighted, focused, added or * removed. Every Eased code component reads it, so `highlight="3-5"` means the same thing * in Code Block, Code Tabs, Streaming Code and Diff Block. */ /** * 1-based line numbers. A string of numbers and inclusive ranges ("3-5, 9, 12-14"), a single * number, or an array of numbers and `[from, to]` pairs. */ export type LineRange = string | number | ReadonlyArray; /** What a line is marked as. A line can be both highlighted and added; `dim` is derived from `focus`. */ export type LineMark = { highlight: boolean; /** In the focused set: when any line is focused, the rest dim until the block is hovered. */ focus: boolean; /** Dimmed because other lines are focused. */ dim: boolean; diff: "add" | "remove" | null; }; export type LineDecorations = { highlight?: LineRange; focus?: LineRange; added?: LineRange; removed?: LineRange; }; /** Parse a `LineRange` into a set of 1-based line numbers, clamped to `1…total` when given. */ export function parseLineRange(range: LineRange | undefined, total = Infinity): Set { const out = new Set(); if (range === undefined || range === "") return out; const add = (from: number, to: number) => { const lo = Math.max(1, Math.min(from, to)); const hi = Math.min(total, Math.max(from, to)); for (let n = lo; n <= hi; n++) out.add(n); }; if (typeof range === "number") add(range, range); else if (typeof range === "string") { for (const part of range.split(/[\s,]+/)) { const m = /^(\d+)(?:\s*[-–]\s*(\d+))?$/.exec(part.trim()); if (m) add(Number(m[1]), Number(m[2] ?? m[1])); } } else { for (const item of range) { if (typeof item === "number") add(item, item); else add(item[0], item[1]); } } return out; } /** One `LineMark` per line, index 0 = line 1. */ export function decorateLines(total: number, { highlight, focus, added, removed }: LineDecorations): LineMark[] { const h = parseLineRange(highlight, total); const f = parseLineRange(focus, total); const a = parseLineRange(added, total); const r = parseLineRange(removed, total); const focusing = f.size > 0; return Array.from({ length: total }, (_, i) => { const n = i + 1; return { highlight: h.has(n), focus: f.has(n), dim: focusing && !f.has(n), diff: a.has(n) ? "add" : r.has(n) ? "remove" : null, }; }); } /** * The cross-lane diff contract (lane 3 → lane 2: Diff Block, Approval Card, Diff Morph). * Shaped like one hunk of jsdiff's `structuredPatch`, but with each line's kind made explicit * instead of encoded in a "+"/"-"/" " prefix. Line numbers are 1-based. */ export type DiffLine = { kind: "add" | "remove" | "context"; text: string }; export type DiffHunk = { oldStart: number; oldLines: number; newStart: number; newLines: number; lines: DiffLine[]; }; 68:T9fe,"use client"; import { useCallback, useSyncExternalStore } from "react"; /** * A page-wide, persisted choice keyed by group: pick "npm" in one Code Tabs and every block * with the same `groupId` switches with it, in this tab, in other tabs (the `storage` event) * and on the next visit (localStorage, best effort). The server and the hydrating render see * no stored value, so the first paint is always the default and nothing mismatches. */ const values = new Map(); const listeners = new Map void>>(); const PREFIX = "eased-code:"; function read(group: string): string | undefined { if (values.has(group)) return values.get(group); try { const stored = window.localStorage.getItem(PREFIX + group); if (stored !== null) values.set(group, stored); return stored ?? undefined; } catch { return undefined; } } function emit(group: string) { listeners.get(group)?.forEach((fn) => fn()); } /** Set a group's choice everywhere on the page and remember it. */ export function setChoice(group: string, value: string) { values.set(group, value); try { window.localStorage.setItem(PREFIX + group, value); } catch { // Storage blocked: the choice still syncs on this page. } emit(group); } let storageBound = false; function bindStorage() { if (storageBound || typeof window === "undefined") return; storageBound = true; window.addEventListener("storage", (e) => { if (!e.key?.startsWith(PREFIX) || e.newValue === null) return; const group = e.key.slice(PREFIX.length); values.set(group, e.newValue); emit(group); }); } /** * `[value, setValue]` for a group. Without a `group` it is plain local state. `options` * guards against a stored value this block does not offer: it falls back to `fallback`. */ export function useChoice(group: string | undefined, fallback: string, options?: readonly string[]) { const subscribe = useCallback( (fn: () => void) => { if (!group) return () => {}; bindStorage(); let set = listeners.get(group); if (!set) listeners.set(group, (set = new Set())); set.add(fn); return () => set.delete(fn); }, [group], ); const stored = useSyncExternalStore( subscribe, () => (group ? read(group) : undefined), () => undefined, ); const value = stored !== undefined && (!options || options.includes(stored)) ? stored : fallback; const setValue = useCallback((next: string) => group && setChoice(group, next), [group]); return [value, setValue] as const; } 69:T3185,"use client"; import { animate, motion, useMotionValue } from "motion/react"; import { useEffect, useId, useRef, useState, useSyncExternalStore, type ReactNode } from "react"; import { AutoHeight } from "../auto-height/auto-height"; import { TextSwap } from "../text-swap/text-swap"; import { ProgressiveBlur } from "../../progressive-blur/progressive-blur"; import { exit, exitFast, reducedFade, snappy, useSafeReducedMotion } from "../../lib/motion"; import { press } from "../../lib/press"; import { highlight, peekHighlight, plainLines, type CodeLine } from "./highlighter"; import { decorateLines, type LineDecorations } from "./lines"; const noop = () => () => {}; /** False during SSR and hydration, true afterwards: lets remounts read caches the server never saw. */ export function useHydrated() { return useSyncExternalStore(noop, () => true, () => false); } /** * Highlighted lines for `code`. Precomputed `tokens` (from `highlight()` on the server) render * at once with no flash. Otherwise the first paint is plain text in the foreground colour * (identical metrics, so nothing shifts) and the colours land when the grammar has loaded; * after hydration, code whose grammar is already in tokenises synchronously, so switching * tabs or remounting never flashes. */ export function useCodeLines(code: string, lang: string | undefined, tokens?: CodeLine[]) { const hydrated = useHydrated(); const key = `${lang ?? ""}\0${code}`; const sync = tokens ?? (hydrated ? peekHighlight(code, lang) : null); const [result, setResult] = useState<{ key: string; lines: CodeLine[] } | null>(null); const needsAsync = !sync; useEffect(() => { if (!needsAsync) return; let live = true; highlight(code, lang) .then((lines) => live && setResult({ key, lines })) .catch(() => { // A grammar failed to load: the plain text stays, which is still correct code. }); return () => { live = false; }; }, [key, code, lang, needsAsync]); const lines = sync ?? (result?.key === key ? result.lines : null); return { lines: lines ?? plainLines(code), highlighted: lines !== null }; } /** `light-dark()` picks the token colour from the inherited `color-scheme`, so a theme flip never re-renders. */ function tokenColor(light?: string, dark?: string) { if (light && dark) return light === dark ? light : `light-dark(${light}, ${dark})`; return light ?? dark; } /** * The colour scheme follows Eased's dark convention (`.dark` or `data-theme="dark"` on an * ancestor), so `light-dark()` resolves with the rest of the tokens even in hosts that never * set `color-scheme` themselves. */ export const CODE_SCHEME = "scheme-light [.dark_&]:scheme-dark [[data-theme=dark]_&]:scheme-dark"; export type CodeLinesProps = LineDecorations & { lines: CodeLine[]; /** Show a line-number gutter. */ lineNumbers?: boolean; /** Soft-wrap long lines instead of scrolling sideways. Default false. */ wrap?: boolean; /** Number shown on the first line. Default 1. */ startLine?: number; /** Accessible name for the scroll region, e.g. the file name. */ label?: string; className?: string; }; /** * Renders token lines as a `

`: one full-bleed row per line (highlights span the whole
 * scroll width), an optional gutter (`tabular-nums slashed-zero`, never selected or copied),
 * and a diff marker column when any line is added or removed. Focused lines dim the others
 * to 40% with a half-pixel blur until the pointer is over the block. The scroller is a
 * keyboard-focusable region when it overflows sideways.
 *
 * Line height is fixed at 20px (a deliberate exception to rule 41): collapse heights and
 * gutters are computed from it.
 */
export function CodeLines({ lines, lineNumbers = false, wrap = false, startLine = 1, label, highlight: hl, focus, added, removed, className = "" }: CodeLinesProps) {
  const marks = decorateLines(lines.length, { highlight: hl, focus, added, removed });
  const hasDiff = marks.some((m) => m.diff);
  const digits = String(startLine + lines.length - 1).length;
  const scroller = useRef(null);
  const [overflows, setOverflows] = useState(false);

  useEffect(() => {
    const el = scroller.current;
    if (!el || wrap) return;
    const check = () => setOverflows(el.scrollWidth > el.clientWidth + 1);
    check();
    const ro = new ResizeObserver(check);
    ro.observe(el);
    if (el.firstElementChild) ro.observe(el.firstElementChild);
    return () => ro.disconnect();
  }, [wrap, lines]);

  return (
          
        {lines.map((line, i) => {
          const m = marks[i];
          const n = startLine + i;
          return (
            
              {lineNumbers && (
                
                  {n}
                
              )}
              {hasDiff && (
                
                  {m.diff === "add" ? "+" : m.diff === "remove" ? "−" : " "}
                
              )}
              
                {line.map((t, j) => (
                  
                    {t.content}
                  
                ))}
              
              {m.diff && {m.diff === "add" ? " (added)" : " (removed)"}}
            
          );
        })}
      
    
  );
}

/** The top of the nearest scrolling ancestor's visible area (0 for the page). */
function scrollportTop(el: HTMLElement) {
  for (let p = el.parentElement; p; p = p.parentElement) {
    const { overflowY } = getComputedStyle(p);
    if ((overflowY === "auto" || overflowY === "scroll") && p.scrollHeight > p.clientHeight) return Math.max(0, p.getBoundingClientRect().top);
  }
  return 0;
}

/** Lines are 20px; the pre adds 12px of padding at the top. */
const LINE = 20;
const PAD_TOP = 12;

export type CodeCollapseProps = {
  /** Total number of lines in the block. */
  lines: number;
  /** Lines to show while collapsed. The block only collapses when at least 3 more would hide; 0 disables. */
  collapseAfter: number;
  /** Start expanded. Default false. */
  defaultExpanded?: boolean;
  /** The code (a `CodeLines`). */
  children: ReactNode;
  /** Classes for the blur's tint gradient, matching the code's background. Default the sunken surface. */
  tintClassName?: string;
};

/**
 * Collapse-after: a long block shows its first `collapseAfter` lines and the next half line
 * melts under a progressive blur, with "Show 42 more lines" floating on it. Expanding springs
 * the height open (Auto Height, no overshoot) while the blur and tint fade away; the button
 * stays at the foot of the block and its label swaps to "Show less", its chevron turning on
 * the snappy spring. Collapsing a block whose top is off-screen scrolls it back into view.
 * Reduced motion: the height snaps and the blur fades at 100ms.
 */
/** Above this many pixels of hidden code, expanding skips the height spring (see CodeCollapse). */
const MAX_SPRING_DISTANCE = 480;

export function CodeCollapse({ lines, collapseAfter, defaultExpanded = false, children, tintClassName = "from-surface-sunken via-surface-sunken/70" }: CodeCollapseProps) {
  const collapsible = collapseAfter > 0 && lines - collapseAfter >= 3;
  const [expanded, setExpanded] = useState(defaultExpanded);
  const reduced = useSafeReducedMotion();
  const strength = useMotionValue(defaultExpanded ? 0 : 1);
  const root = useRef(null);
  const id = useId();

  useEffect(() => {
    const c = animate(strength, expanded ? 0 : 1, reduced ? reducedFade : expanded ? exitFast : exit);
    return () => c.stop();
  }, [expanded, reduced, strength]);

  if (!collapsible) return <>{children};
  const hidden = lines - collapseAfter;
  // Show the cut-off line half-way so the blur has real code to melt.
  const collapsedHeight = PAD_TOP + (collapseAfter + 0.5) * LINE;

  const toggle = () => {
    const next = !expanded;
    setExpanded(next);
    if (!next) {
      const el = root.current;
      if (el && el.getBoundingClientRect().top < scrollportTop(el)) el.scrollIntoView({ block: "nearest", behavior: reduced ? "auto" : "smooth" });
    }
  };

  // Springing the height across hundreds of lines reads as the page lurching, so long files
  // open in place and only the blur fades; short ones keep the height spring.
  const springHeight = hidden * LINE <= MAX_SPRING_DISTANCE;
  const body = (
    
      {children}
      {/* Room for the button under the last line once expanded. */}
      {expanded && }
    
  );

  return (
    
      {springHeight ? {body} : body}
      
      
      
        
      
    
  );
}
6a:Ta12,"use client";

import { TextSwap } from "../text-swap/text-swap";
import { LANG_LABEL, resolveLang, type CodeLang } from "./highlighter";

/** The shell every Eased code surface shares: 16px panel, subtle edge, sunken code well. */
export const CODE_FRAME =
  "group @container relative min-w-0 overflow-hidden rounded-panel border border-line-subtle bg-surface-sunken text-ui text-text [--pad:0px] [--radius-outer:var(--eased-radius-panel)]";

/**
 * The 40px title bar (41 with its rule, the same as a row of underline tabs). Its left inset
 * matches the code's 16px so the file name sits on the code's left edge; the right inset is
 * 8px so a 32px copy button's icon lands on the code's right edge (rules 104, 105).
 */
export const CODE_HEADER = "box-content flex h-10 min-w-0 items-center gap-2 border-b border-line-subtle bg-surface pr-2 pl-4";

/** A 16px glyph for a language: a prompt for shells, a sheet for everything else. */
export function LangGlyph({ lang, className = "" }: { lang?: string | null; className?: string }) {
  const shell = resolveLang(lang) === "bash";
  return (
    
  );
}

/**
 * The language pill. The label swaps with y + blur and the pill's width springs, so switching
 * between files of different languages reads as one pill changing, not a new one. Under
 * 320px of block width it steps aside so the file name keeps the room.
 */
export function LangPill({ lang }: { lang?: string | null }) {
  const resolved = resolveLang(lang);
  const label = resolved ? LANG_LABEL[resolved as CodeLang] : lang;
  if (!label) return null;
  return (
    
      {label}
    
  );
}
62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","shiki",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/shiki","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"shiki"}]]}]}]]}],["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["https://eased.dev/r/eased-tokens.json","https://eased.dev/r/eased-motion.json","https://eased.dev/r/eased-text-swap.json","https://eased.dev/r/eased-copy.json","https://eased.dev/r/eased-auto-height.json","https://eased.dev/r/progressive-blur.json"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"src/registry/eased/_primitives/code-core/highlighter.ts","content":"$65","type":"registry:ui","target":"@components/eased/_primitives/code-core/highlighter.ts"},{"path":"src/registry/eased/_primitives/code-core/themes.ts","content":"$66","type":"registry:ui","target":"@components/eased/_primitives/code-core/themes.ts"},{"path":"src/registry/eased/_primitives/code-core/lines.ts","content":"$67","type":"registry:ui","target":"@components/eased/_primitives/code-core/lines.ts"},{"path":"src/registry/eased/_primitives/code-core/choice.ts","content":"$68","type":"registry:ui","target":"@components/eased/_primitives/code-core/choice.ts"},{"path":"src/registry/eased/_primitives/code-core/copy.tsx","content":"// The copy → check morph lives in its own primitive (eased-copy), so blocks that only copy text\n// don't pull in Shiki. Re-exported here for the code components.\nexport * from \"../copy/copy\";\n","type":"registry:ui","target":"@components/eased/_primitives/code-core/copy.tsx"},{"path":"src/registry/eased/_primitives/code-core/code-lines.tsx","content":"$69","type":"registry:ui","target":"@components/eased/_primitives/code-core/code-lines.tsx"},{"path":"src/registry/eased/_primitives/code-core/code-chrome.tsx","content":"$6a","type":"registry:ui","target":"@components/eased/_primitives/code-core/code-chrome.tsx"}],"className":"h-[70svh] min-h-80"}]]}]