anentrypoint-design 0.0.121 → 0.0.124

package/dist/colors_and_type.css

@@ -1,197 +0,0 @@
-/* ============================================================
-   247420 design system — colors + type
-   Calm, readable, scope-prefixed at build time.
-   Source-of-truth tokens. Component sheet lives in app-shell.css.
-   ============================================================ */
-
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
-
-:root {
-  /* Paper / Ink — cool stone scale; lets lore palette pop. */
-  --paper:       #F6F5F1;
-  --paper-2:     #ECEBE6;
-  --paper-3:     #DFDED9;
-  --ink:         #131318;
-  --ink-2:       #25252C;
-  --ink-3:       #6A6A70;
-
-  /* Lore palette */
-  --green:       #247420;
-  --green-2:     #3A9A34;
-  --green-deep:  #133F10;
-  --green-tint:  #D9E5C8;
-  --purple:      #420247;
-  --purple-2:    #7F18A4;
-  --purple-deep: #28002B;
-  --purple-tint: #E4D3E5;
-  --mascot:      #E84B8A;
-  --mascot-2:    #FF3CA7;
-  --mascot-tint: #F5D2DF;
-
-  /* Signals */
-  --sun:         #F5C344;
-  --flame:       #FF5A1F;
-  --sky:         #3A6EFF;
-  --warn:        #E0241A;
-  --live:        var(--green);
-
-  /* Semantic surfaces */
-  --bg:          var(--paper);
-  --bg-2:        var(--paper-2);
-  --bg-3:        var(--paper-3);
-  --fg:          var(--ink);
-  --fg-2:        var(--ink-2);
-  --fg-3:        var(--ink-3);
-
-  --accent:      var(--green);
-  --accent-fg:   var(--paper);
-  --accent-tint: color-mix(in oklab, var(--accent) 18%, var(--bg));
-
-  --panel-bg:     var(--bg);
-  --panel-bg-2:   var(--bg-2);
-  --panel-accent: var(--accent);
-  --panel-1:      var(--bg-2);
-  --panel-2:      var(--bg-3);
-  --panel-3:      color-mix(in oklab, var(--fg) 12%, transparent);
-  --panel-text:   var(--fg);
-  --panel-text-2: var(--fg-2);
-  --panel-text-3: var(--fg-3);
-  --panel-accent-2: var(--accent-bright, var(--accent));
-  --panel-shadow: 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent), 0 4px 14px color-mix(in oklab, var(--fg) 8%, transparent);
-
-  /* Type — one family, used purposefully. Space Grotesk for everything
-     non-mono. The display/narrow aliases stay so consumers that reference
-     them keep working; they just resolve to the body font now. */
-  --ff-display:  'Space Grotesk', system-ui, sans-serif;
-  --ff-narrow:   'Space Grotesk', system-ui, sans-serif;
-  --ff-body:     'Space Grotesk', system-ui, sans-serif;
-  --ff-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
-
-  --fs-micro:    11px;
-  --fs-tiny:     12px;
-  --fs-xs:       13px;
-  --fs-sm:       14px;
-  --fs-body:     16px;
-  --fs-lg:       18px;
-  --fs-xl:       21px;
-  --fs-h4:       clamp(19px, 1.8cqi, 24px);
-  --fs-h3:       clamp(22px, 2.4cqi, 30px);
-  --fs-h2:       clamp(28px, 3.6cqi, 44px);
-  --fs-h1:       clamp(34px, 5cqi, 64px);
-  --fs-hero:     clamp(42px, 7cqi, 96px);
-  --fs-mega:     clamp(56px, 11cqi, 168px);
-
-  --lh-tight:    1.05;
-  --lh-snug:     1.2;
-  --lh-base:     1.55;
-  --lh-long:     1.7;
-
-  --tr-caps:     0.06em;
-  --tr-label:    0.10em;
-  --tr-tight:    -0.02em;
-  --tr-tighter:  -0.03em;
-
-  /* Spacing (8pt) */
-  --space-0:     0;
-  --space-1:     4px;
-  --space-2:     8px;
-  --space-3:     16px;
-  --space-4:     24px;
-  --space-5:     32px;
-  --space-6:     48px;
-  --space-7:     64px;
-  --space-8:     96px;
-  --space-9:     128px;
-
-  --density:     1;
-  --pad-y:       calc(var(--space-5) * var(--density));
-  --pad-x:       calc(var(--space-5) * var(--density));
-  --gutter:      calc(var(--space-4) * var(--density));
-
-  /* Borders — chunky or none */
-  --bw-hair:     1px;
-  --bw-rule:     2px;
-  --bw-chunk:    4px;
-  --bw-slab:     8px;
-
-  --rule:        color-mix(in oklab, currentColor 14%, transparent);
-  --rule-strong: color-mix(in oklab, currentColor 28%, transparent);
-
-  --r-1:         10px;
-  --r-2:         14px;
-  --r-3:         22px;
-  --r-4:         32px;
-  --r-pill:      999px;
-
-  --dur-snap:    80ms;
-  --dur-base:    160ms;
-  --dur-slow:    280ms;
-  --ease:        cubic-bezier(0.2, 0, 0, 1);
-
-  --z-header:    100;
-  --z-overlay:   1000;
-
-  --measure:     68ch;
-}
-
-[data-theme="ink"] {
-  --bg:        var(--ink);
-  --bg-2:      var(--ink-2);
-  --bg-3:      #34343C;
-  --fg:        var(--paper);
-  --fg-2:      var(--paper-2);
-  --fg-3:      #9A9AA2;
-  --panel-bg:  var(--bg);
-  --panel-bg-2: var(--bg-2);
-  --accent:    var(--accent-bright, var(--green-2));
-  --accent-fg: var(--ink);
-}
-
-@media (prefers-color-scheme: dark) {
-  [data-theme="auto"] {
-    --bg:        var(--ink);
-    --bg-2:      var(--ink-2);
-    --bg-3:      #34343C;
-    --fg:        var(--paper);
-    --fg-2:      var(--paper-2);
-    --fg-3:      #9A9AA2;
-    --panel-bg:  var(--bg);
-    --panel-bg-2: var(--bg-2);
-    --accent:    var(--accent-bright, var(--green-2));
-    --accent-fg: var(--ink);
-  }
-}
-
-/* Nested-scope safety: if .ds-247420 appears under another .ds-247420 (e.g.
-   mount() added the class to an inner element while the ancestor html
-   already had it), the inner element would otherwise re-trigger the root
-   light defaults and detach from the ancestor's data-theme override. Force
-   the inner element to inherit the ancestor's resolved tokens. */
-.ds-247420 .ds-247420 {
-  --bg:        inherit;
-  --bg-2:      inherit;
-  --bg-3:      inherit;
-  --fg:        inherit;
-  --fg-2:      inherit;
-  --fg-3:      inherit;
-  --panel-bg:  inherit;
-  --panel-bg-2: inherit;
-  --accent:    inherit;
-  --accent-fg: inherit;
-  --panel-1:   inherit;
-  --panel-2:   inherit;
-  --panel-3:   inherit;
-  --panel-text: inherit;
-  --panel-text-2: inherit;
-  --panel-text-3: inherit;
-  --panel-accent-2: inherit;
-  --panel-shadow: inherit;
-}
-
-[data-density="compact"]     { --density: 0.75; }
-[data-density="comfortable"] { --density: 1; }
-[data-density="spacious"]    { --density: 1.35; }
-
-[data-accent="green"]  { --accent: var(--green);  --accent-bright: var(--green-2);  --accent-fg: var(--paper); --panel-accent: var(--green);  }
-[data-accent="purple"] { --accent: var(--purple); --accent-bright: #C277FF;         --accent-fg: var(--paper); --panel-accent: var(--purple); }
-[data-accent="mascot"] { --accent: var(--mascot); --accent-bright: var(--mascot-2); --accent-fg: var(--ink);   --panel-accent: var(--mascot); }

package/dist/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="6" fill="#247420"/><text x="16" y="22" font-family="'JetBrains Mono',ui-monospace,monospace" font-size="14" font-weight="700" fill="#EFE9DD" text-anchor="middle">24</text></svg>

package/dist/index.html

@@ -1,308 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="ds-247420" data-theme="auto">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>design — 247420 design system</title>
-  <meta name="description" content="the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface." />
-  <meta name="keywords" content="design-system, tokens, 247420, anentrypoint" />
-  <meta name="author" content="247420 / AnEntrypoint" />
-  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
-  <meta name="referrer" content="strict-origin-when-cross-origin" />
-  <meta name="generator" content="anentrypoint-design" />
-  <meta name="theme-color" content="#247420" media="(prefers-color-scheme: light)" />
-  <meta name="theme-color" content="#3A9A34" media="(prefers-color-scheme: dark)" />
-  <meta name="color-scheme" content="light dark" />
-  <meta name="application-name" content="design" />
-  <meta name="apple-mobile-web-app-title" content="design" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="msapplication-TileColor" content="#247420" />
-  <meta http-equiv="content-language" content="en" />
-  <link rel="canonical" href="https://anentrypoint.github.io/design" />
-  <link rel="alternate" hreflang="en" href="https://anentrypoint.github.io/design" />
-  <link rel="alternate" hreflang="x-default" href="https://anentrypoint.github.io/design" />
-  <meta property="og:type" content="website" />
-  <meta property="og:title" content="design" />
-  <meta property="og:description" content="the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface." />
-  <meta property="og:url" content="https://anentrypoint.github.io/design" />
-  <meta property="og:site_name" content="design" />
-  <meta property="og:locale" content="en_US" />
-  <meta property="og:image" content="https://anentrypoint.github.io/design/og-card.png" />
-  <meta property="og:image:secure_url" content="https://anentrypoint.github.io/design/og-card.png" />
-  <meta property="og:image:type" content="image/png" />
-  <meta property="og:image:width" content="1200" />
-  <meta property="og:image:height" content="630" />
-  <meta property="og:image:alt" content="design" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="design" />
-  <meta name="twitter:description" content="the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface." />
-  <meta name="twitter:site" content="@AnEntrypoint" />
-  <meta name="twitter:creator" content="@AnEntrypoint" />
-  <meta name="twitter:image" content="https://anentrypoint.github.io/design/og-card.png" />
-  <meta name="twitter:image:alt" content="design" />
-  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%E2%97%B0%3C/text%3E%3C/svg%3E" />
-  <link rel="apple-touch-icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ctext y='26' font-size='26'%3E%E2%97%B0%3C/text%3E%3C/svg%3E" />
-  <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"design","url":"https://anentrypoint.github.io/design","description":"the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.","inLanguage":"en","publisher":{"@type":"Organization","name":"247420 / AnEntrypoint","url":"https://247420.xyz"}}</script>
-  <script type="importmap">{"imports":{"anentrypoint-design":"https://unpkg.com/anentrypoint-design@latest/dist/247420.js"}}</script>
-  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
-  <link rel="preconnect" href="https://unpkg.com" crossorigin>
-  <link rel="dns-prefetch" href="https://unpkg.com">
-  <style>html,body{margin:0;padding:0}body{background:var(--app-bg,#FBF6EB);color:var(--ink,#1F1B16);font-family:var(--ff-ui,'Nunito',system-ui,sans-serif)}html:not(.ds-ready) body{visibility:hidden}html.ds-ready body{visibility:visible;animation:ds-fade-in .18s ease-out both}@keyframes ds-fade-in{from{opacity:0}to{opacity:1}}</style>
-  <noscript><style>html body{visibility:visible !important}</style></noscript>
-</head>
-<body>
-  <div id="app"></div>
-  <script type="application/json" id="__site__">{"site":{"title":"design","tagline":"247420 design system","description":"the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.","repo":"https://github.com/AnEntrypoint/design","url":"https://anentrypoint.github.io/design","year":2026,"keywords":["design-system","tokens","247420","anentrypoint"],"accent_from":"#56d364","accent_to":"#79c0ff","glyph":"◰","code":"072","category":"web"},"nav":{"links":[{"label":247420,"href":"https://247420.xyz"},{"label":"GitHub","href":"https://github.com/AnEntrypoint"}]},"home":{"id":"home","title":"Home","hero":{"heading":"design","subheading":"247420 design system","body":"the visual paradigm. layered surfaces, monospace labels, loud content inside quiet chrome. consumed by every 247420 surface.","badges":[{"label":"design-system"},{"label":"tokens"},{"label":"web"}],"ctas":[{"label":"GitHub","href":"https://github.com/AnEntrypoint/design","primary":true},{"label":"247420","href":"https://247420.xyz"}]},"sidebar":{"fab":{"label":"open","glyph":"✦","href":"./ui_kits/homepage/"},"bins":[{"glyph":"▣","label":"everything","href":"#all","count":23,"active":true},{"glyph":"★","label":"starred","href":"#starred","count":5},{"glyph":"◐","label":"shipped","href":"#shipped","count":12},{"glyph":"◌","label":"drafts","href":"#drafts","count":6}],"labels_group":"labels","labels":[{"glyph":"●","label":"ui kits","href":"#kits","count":4,"color":"var(--panel-accent)"},{"glyph":"●","label":"decks","href":"#decks","count":1,"color":"var(--mascot,#e0a200)"},{"glyph":"●","label":"previews","href":"#previews","count":20,"color":"var(--purple,#8856b3)"},{"glyph":"●","label":"docs","href":"#docs","count":3,"color":"var(--panel-text-3)"}],"more_group":"more","more":[{"glyph":"§","label":"readme","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"glyph":"§","label":"skill","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"glyph":"⌘","label":"tokens","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"},{"glyph":"↗","label":"source","href":"https://github.com/AnEntrypoint/design"}]},"tabs":[{"glyph":"▣","label":"everything","href":"#all","active":true},{"glyph":"◎","label":"kits","href":"#kits"},{"glyph":"▰","label":"decks","href":"#decks"},{"glyph":"§","label":"previews","href":"#previews"}],"kits":{"heading":"ui kits","count":"14 surfaces","items":[{"code":"01","title":"homepage","sub":"marquee + works grid","desc":"editorial banner over a quiet shell","href":"./ui_kits/homepage/"},{"code":"02","title":"project page","sub":"hero · receipt · install · changelog","desc":"shippable case-study template","href":"./ui_kits/project_page/"},{"code":"03","title":"docs","sub":"long-form prose chrome","desc":"sidebar nav, mono headings, code blocks","href":"./ui_kits/docs/"},{"code":"04","title":"blog","sub":"dated index + reading view","desc":"typographic, no clutter","href":"./ui_kits/blog/"},{"code":"05","title":"chat","sub":"message thread + composer","desc":"pill bubbles, monospace timestamps, room sidebar","href":"./ui_kits/chat/"},{"code":"06","title":"aicat","sub":"ai assistant with cat persona","desc":"ascii portrait, thinking dots, mood-swapping face","href":"./ui_kits/aicat/"},{"code":"07","title":"file browser","sub":"rails by file type · drop · preview","desc":"static demo wired to fsbrowse — every file-row primitive in one surface","href":"./ui_kits/file_browser/"},{"code":"08","title":"dashboard","sub":"kpis · tables · receipts · changelog","desc":"every content primitive in one operations surface","href":"./ui_kits/dashboard/"},{"code":"09","title":"terminal","sub":"cli prompt · command lines · log view","desc":"five line kinds — cmt cmd out ok warn — over a tonal panel","href":"./ui_kits/terminal/"},{"code":"10","title":"settings","sub":"sectioned forms · toggles · save bar","desc":"every input primitive — fields, segmented buttons, danger panel","href":"./ui_kits/settings/"},{"code":"11","title":"signin","sub":"auth · providers · magic link","desc":"narrow shell + tone-on-tone form, no shadows, no spinners","href":"./ui_kits/signin/"},{"code":"12","title":"search","sub":"topbar query · faceted filters · rows","desc":"ranked results reuse the same RowLink primitive every list does","href":"./ui_kits/search/"},{"code":"13","title":"404","sub":"empty-state hero · suggested routes","desc":"narrow shell, oversized mono code, three CTAs","href":"./ui_kits/error_404/"},{"code":"14","title":"gallery","sub":"visual grid · tonal cards · lightbox","desc":"tiles share the panel tokens; lightbox reuses the same surface","href":"./ui_kits/gallery/"}]},"decks":{"heading":"decks","items":[{"code":"01","title":"deck template","sub":"16:9 stage with auto-fit","desc":"title, lede, code, comparison, manifesto","href":"./slides/"}]},"docs":{"heading":"docs","items":[{"code":"md","title":"readme","sub":"overview, manifesto, conventions","desc":"start here","href":"https://github.com/AnEntrypoint/design/blob/main/README.md"},{"code":"md","title":"skill","sub":"authoring rules for the agent","desc":"editorial · zine · surface modes","href":"https://github.com/AnEntrypoint/design/blob/main/SKILL.md"},{"code":"css","title":"tokens","sub":"colors, type, panel surface tokens","desc":"canonical source of truth","href":"https://github.com/AnEntrypoint/design/blob/main/colors_and_type.css"}]},"previews":{"heading":"previews","base":"./preview/","items":["buttons","colors-core","colors-lore","colors-semantic","dateline","dropzone","file-grid","file-row","file-toolbar","file-viewer","header","icons-unicode","index-row","inputs","manifesto","rules","spacing","stamps","stamps-lore","theme-ink","type-display","type-mono","type-prose","type-scale","wordmarks"]},"file_browser":{"heading":"file browser","count":"primitives","items":[{"code":"fb","title":"file_browser kit","sub":"drop, list, preview, dialogs","desc":"the full surface, working with mock data","href":"./ui_kits/file_browser/","cta":"open kit ↗"},{"code":"fb","title":"FileRow","sub":"rail · icon · name · meta","desc":"data-file-type drives the rail color — never apply rail-* manually","href":"./preview/file-row.html","cta":"preview ↗"},{"code":"fb","title":"FileGrid","sub":"stack of rows in a panel","desc":"directories sort first; selected row gets the mint .active tone","href":"./preview/file-grid.html","cta":"preview ↗"},{"code":"fb","title":"DropZone","sub":"tonal upload target","desc":"swap to --panel-select on dragover; preventDefault on document, not just zone","href":"./preview/dropzone.html","cta":"preview ↗"},{"code":"fb","title":"FileViewer","sub":"modal preview · keyed head","desc":"head + body both carry data-file-type so rails propagate inside the modal","href":"./preview/file-viewer.html","cta":"preview ↗"},{"code":"fb","title":"FileToolbar","sub":"actions · breadcrumb · upload","desc":"left-aligned actions, right-aligned count; UploadProgress sits underneath","href":"./preview/file-toolbar.html","cta":"preview ↗"},{"code":"fb","title":"fsbrowse","sub":"Express + busboy backend","desc":"canonical real-world wiring — same SDK, real filesystem operations","href":"https://github.com/AnEntrypoint/fsbrowse","cta":"source ↗"}]},"quickstart":{"heading":"quick start","lines":[{"kind":"cmt","text":"# install via importmap (no bundler)"},{"kind":"cmd","text":"\u003cscript type='importmap'\u003e{\"imports\":{\"anentrypoint-design\":\"https://unpkg.com/anentrypoint-design@latest/dist/247420.js\"}}\u003c/script\u003e"},{"kind":"cmt","text":"# or clone the source"},{"kind":"cmd","text":"git clone https://github.com/AnEntrypoint/design.git"}]},"desktop_os":{"heading":"desktop os shell","count":"in-page wm","items":[{"code":"os","title":"createDesktopShell","sub":"menubar · apps launcher · taskbar · window manager","desc":"in-page desktop OS chrome — mount any app registry into a draggable wm","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/shell.js","cta":"shell.js ↗"},{"code":"os","title":"icons set","sub":"svg glyphs for menubar + taskbar","desc":"home, apps, search, settings — used by the shell and exposed for apps","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/icons.js","cta":"icons.js ↗"},{"code":"os","title":"theme.css","sub":"os chrome tokens · menubar · launcher · wm","desc":"scoped css module loaded by the shell — keeps desktop visuals isolated","href":"https://github.com/AnEntrypoint/design/blob/main/src/desktop/theme.css","cta":"theme.css ↗"},{"code":"os","title":"import path","sub":"anentrypoint-design/desktop","desc":"subpath export; no bundler needed — pulls icons + createDesktopShell","href":"https://github.com/AnEntrypoint/design/blob/main/package.json","cta":"exports ↗"}]},"web_components":{"heading":"web components","count":"1 element","items":[{"code":"wc","title":"\u003cds-chat\u003e","sub":"auto-registers when the sdk loads in a browser","desc":"set el.messages = [...] or pass json via attribute; listen for 'send' event","href":"https://github.com/AnEntrypoint/design/blob/main/src/web-components/ds-chat.js","cta":"ds-chat.js ↗"},{"code":"wc","title":"registerChatElement","sub":"manual register helper","desc":"exported from the sdk root for ssr / late-mount when customElements is gated","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js","cta":"source ↗"}]},"api_exports":{"heading":"public api","count":"sdk surface","items":[{"code":"api","title":"h / applyDiff","sub":"webjsx createElement + diff","desc":"build vnodes with h(), render with applyDiff(root, [vnode]) — no jsx pragma needed","href":"https://github.com/AnEntrypoint/design/blob/main/src/index.js","cta":"index.js ↗"},{"code":"api","title":"installStyles / scope","sub":"ds-247420 css scope + bootstrap","desc":"installStyles() injects the prefixed css; scope = '.ds-247420' for selector composition","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js","cta":"styles.js ↗"},{"code":"api","title":"loadCss","sub":"fetch the bundled css string","desc":"useful for shadow roots or custom style injection paths","href":"https://github.com/AnEntrypoint/design/blob/main/src/styles.js","cta":"styles.js ↗"},{"code":"api","title":"mount / mountKit","sub":"ds shell + ui_kit bootstrap","desc":"mount(root, viewFn) wires applyDiff + motion; mountKit({root,view,screen}) wires a kit","href":"https://github.com/AnEntrypoint/design/blob/main/src/bootstrap.js","cta":"bootstrap.js ↗"},{"code":"api","title":"registerDeckStage / getDeckStage","sub":"16:9 deck stage api","desc":"register custom deck stages and fetch the active stage for slide transitions","href":"https://github.com/AnEntrypoint/design/blob/main/src/deck-stage.js","cta":"deck-stage.js ↗"},{"code":"api","title":"renderMarkdown","sub":"marked v15 + dompurify lazy stack","desc":"lazy-loads marked + dompurify from jsdelivr; only xss gate for chat html","href":"https://github.com/AnEntrypoint/design/blob/main/src/markdown.js","cta":"markdown.js ↗"},{"code":"api","title":"ensurePrism / highlightAllUnder","sub":"prism core + per-language","desc":"injects prism on first use; CodeNode ref-callback highlights inside any subtree","href":"https://github.com/AnEntrypoint/design/blob/main/src/highlight.js","cta":"highlight.js ↗"},{"code":"api","title":"renderPageHtml","sub":"static page html template","desc":"shared head/body wrapper for kit pages — meta, importmap, ds-247420 scope","href":"https://github.com/AnEntrypoint/design/blob/main/src/page-html.js","cta":"page-html.js ↗"},{"code":"api","title":"components / motion / debug","sub":"namespaces from the default export","desc":"components.* are the C.* primitives; motion.animateTree, debug.window.__debug registry","href":"https://github.com/AnEntrypoint/design/blob/main/src/components.js","cta":"components.js ↗"}]},"features":{"heading":"why design","items":[{"name":"layered surfaces","desc":"panel-on-panel rhythm; loud content sits inside quiet chrome."},{"name":"monospace labels","desc":"mono only for codes/labels/CLI; sans for everything legible."},{"name":"indicator rails","desc":"color-coded inset rails for category separation, never borders."},{"name":"tokens-only","desc":"every surface, type ramp, accent driven by --panel-* / --fs-* tokens."}]},"examples":{"heading":"live examples","items":[{"name":"index shell","desc":"full navigation shell with tabs, filters, and row interactions.","href":"./index.html","cta":"open index"},{"name":"homepage kit","desc":"hero + works layout and updated readable type scale.","href":"./ui_kits/homepage/","cta":"open kit"},{"name":"project page kit","desc":"overview, install, receipt, and changelog template.","href":"./ui_kits/project_page/","cta":"open kit"},{"name":"docs kit","desc":"technical documentation layout with sidebar and prose.","href":"./ui_kits/docs/","cta":"open docs"},{"name":"blog kit","desc":"long-form writing layout tuned for readability.","href":"./ui_kits/blog/","cta":"open writing"},{"name":"chat kit","desc":"message thread + composer with pill bubbles and room sidebar.","href":"./ui_kits/chat/","cta":"open chat"},{"name":"aicat kit","desc":"ai assistant with cat persona — ascii portrait + mood face.","href":"./ui_kits/aicat/","cta":"open aicat"},{"name":"slide deck","desc":"16:9 deck stage with improved presenter controls text.","href":"./slides/","cta":"open slides"},{"name":"dashboard kit","desc":"kpis, tables, receipts, changelog — operations surface.","href":"./ui_kits/dashboard/","cta":"open dashboard"},{"name":"terminal kit","desc":"cli prompt, command lines, log viewer.","href":"./ui_kits/terminal/","cta":"open terminal"},{"name":"settings kit","desc":"sectioned forms, toggles, segmented buttons, save bar.","href":"./ui_kits/settings/","cta":"open settings"},{"name":"signin kit","desc":"auth panel, providers, magic link.","href":"./ui_kits/signin/","cta":"open signin"},{"name":"search kit","desc":"query bar, faceted filters, ranked results.","href":"./ui_kits/search/","cta":"open search"},{"name":"404 kit","desc":"empty-state hero with suggested routes.","href":"./ui_kits/error_404/","cta":"open 404"},{"name":"gallery kit","desc":"visual grid + lightbox over tonal cards.","href":"./ui_kits/gallery/","cta":"open gallery"},{"name":"preview samples","desc":"design previews and component samples.","href":"./preview/buttons.html","cta":"open previews"}]},"status_left":["main","• utf-8","• lf"],"status_right":["247420 / mmxxvi","• probably emerging"]}}</script>
-  <script type="module">
-import { h, applyDiff, installStyles, components as C, initTheme } from 'anentrypoint-design';
-installStyles();
-document.documentElement.classList.add('ds-247420');
-// initTheme picks up data-theme on <html>, reapplies stored override from
-// localStorage if present, and binds matchMedia so OS-level dark-mode flips
-// re-emit to listeners. Safe no-op if data-theme is already 'auto'.
-try { initTheme && initTheme(); } catch {}
-
-const __reveal = () => document.documentElement.classList.add('ds-ready');
-const __fallback = setTimeout(__reveal, 1500);
-
-const data = JSON.parse(document.getElementById('__site__').textContent);
-const { site, nav, home } = data;
-
-function Hero() {
-  if (!home || !home.hero) return null;
-  const hero = home.hero;
-  return C.Panel({
-    style: 'margin:8px',
-    children: h('div', { style: 'padding:24px 22px' },
-      C.Heading({ level: 1, style: 'margin:0 0 8px 0', children: hero.heading || site.title }),
-      hero.subheading ? C.Lede({ children: hero.subheading }) : null,
-      hero.body ? h('p', { style: 'margin:8px 0 16px 0;color:var(--panel-text-2);max-width:64ch' }, hero.body) : null,
-      (hero.badges && hero.badges.length) ? h('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px 0' },
-        ...hero.badges.map((b, i) => C.Chip({ key: 'b' + i, children: b.label }))
-      ) : null,
-      (hero.ctas && hero.ctas.length) ? h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap' },
-        ...hero.ctas.map((c, i) => C.Btn({ key: 'c' + i, href: c.href, primary: c.primary, children: c.label }))
-      ) : null
-    )
-  });
-}
-
-function rowsFromItems(items, prefix) {
-  return items.map((it, i) => C.RowLink({
-    key: prefix + i,
-    code: it.code || String(i + 1).padStart(2, '0'),
-    title: it.title || it.name,
-    sub: it.sub || it.desc || '',
-    meta: it.cta || it.meta || 'open ↗',
-    href: it.href || '#'
-  }));
-}
-
-function Kits() {
-  if (!home.kits || !home.kits.items || !home.kits.items.length) return null;
-  return C.Panel({
-    title: home.kits.heading || 'ui kits',
-    count: home.kits.count || home.kits.items.length,
-    style: 'margin:8px',
-    children: rowsFromItems(home.kits.items, 'k')
-  });
-}
-
-function Decks() {
-  if (!home.decks || !home.decks.items || !home.decks.items.length) return null;
-  return C.Panel({
-    title: home.decks.heading || 'decks',
-    style: 'margin:8px',
-    children: rowsFromItems(home.decks.items, 'd')
-  });
-}
-
-function FileBrowser() {
-  if (!home.file_browser || !home.file_browser.items || !home.file_browser.items.length) return null;
-  return C.Panel({
-    title: home.file_browser.heading || 'file browser',
-    count: home.file_browser.count || home.file_browser.items.length,
-    style: 'margin:8px',
-    children: rowsFromItems(home.file_browser.items, 'fb')
-  });
-}
-
-function Docs() {
-  if (!home.docs || !home.docs.items || !home.docs.items.length) return null;
-  return C.Panel({
-    title: home.docs.heading || 'docs',
-    style: 'margin:8px',
-    children: rowsFromItems(home.docs.items, 'doc')
-  });
-}
-
-function Previews() {
-  if (!home.previews || !home.previews.items || !home.previews.items.length) return null;
-  const base = home.previews.base || './preview/';
-  const rows = home.previews.items.map((name, i) => C.RowLink({
-    key: 'p' + i,
-    code: String(i + 1).padStart(2, '0'),
-    title: String(name).replace(/-/g, ' '),
-    sub: 'preview · ' + name + '.html',
-    meta: 'open ↗',
-    href: base + name + '.html'
-  }));
-  return C.Panel({
-    title: home.previews.heading || 'previews',
-    count: rows.length,
-    style: 'margin:8px',
-    children: rows
-  });
-}
-
-function Features() {
-  if (!home.features || !home.features.items || !home.features.items.length) return null;
-  const rows = home.features.items.map((it, i) => C.RowLink({
-    key: 'f' + i,
-    code: String(i + 1).padStart(2, '0'),
-    title: it.name,
-    sub: it.desc || '',
-    meta: it.meta || '',
-    href: it.href || '#'
-  }));
-  return C.Panel({
-    title: home.features.heading || 'why design',
-    style: 'margin:8px',
-    children: rows
-  });
-}
-
-function Quickstart() {
-  if (!home.quickstart || !home.quickstart.lines || !home.quickstart.lines.length) return null;
-  const lineNodes = home.quickstart.lines.map((l, i) => h('div', { key: 'q' + i, class: 'cli' },
-    h('span', { class: 'prompt' }, l.kind === 'cmt' ? '#' : '$'),
-    h('span', { class: 'cmd' }, l.text)
-  ));
-  return C.Panel({
-    title: home.quickstart.heading || 'quick start',
-    style: 'margin:8px',
-    children: h('div', { style: 'padding:16px 22px;display:flex;flex-direction:column;gap:6px' }, ...lineNodes)
-  });
-}
-
-function DesktopOS() {
-  if (!home.desktop_os || !home.desktop_os.items || !home.desktop_os.items.length) return null;
-  return C.Panel({
-    title: home.desktop_os.heading || 'desktop os shell',
-    count: home.desktop_os.count || home.desktop_os.items.length,
-    style: 'margin:8px',
-    children: rowsFromItems(home.desktop_os.items, 'os')
-  });
-}
-
-function WebComponents() {
-  if (!home.web_components || !home.web_components.items || !home.web_components.items.length) return null;
-  return C.Panel({
-    title: home.web_components.heading || 'web components',
-    count: home.web_components.count || home.web_components.items.length,
-    style: 'margin:8px',
-    children: rowsFromItems(home.web_components.items, 'wc')
-  });
-}
-
-function ApiExports() {
-  if (!home.api_exports || !home.api_exports.items || !home.api_exports.items.length) return null;
-  return C.Panel({
-    title: home.api_exports.heading || 'public api',
-    count: home.api_exports.count || home.api_exports.items.length,
-    style: 'margin:8px',
-    children: rowsFromItems(home.api_exports.items, 'api')
-  });
-}
-
-function Examples() {
-  if (!home.examples || !home.examples.items || !home.examples.items.length) return null;
-  return C.Panel({
-    title: home.examples.heading || 'live examples',
-    count: home.examples.items.length,
-    style: 'margin:8px',
-    children: rowsFromItems(home.examples.items, 'e')
-  });
-}
-
-function buildSide() {
-  const sb = home.sidebar || {};
-  const sections = [];
-  if (sb.fab) {
-    sections.push({
-      group: 'open',
-      items: [{ glyph: sb.fab.glyph || '✦', label: sb.fab.label || 'open', href: sb.fab.href || '#' }]
-    });
-  }
-  if (sb.bins && sb.bins.length) {
-    sections.push({ group: 'bins', items: sb.bins });
-  }
-  if (sb.labels && sb.labels.length) {
-    sections.push({ group: sb.labels_group || 'labels', items: sb.labels });
-  }
-  if (sb.more && sb.more.length) {
-    sections.push({ group: sb.more_group || 'more', items: sb.more });
-  }
-  return C.Side({ sections });
-}
-
-function Tabs() {
-  if (!home.tabs || !home.tabs.length) return null;
-  return h('div', { class: 'tabs', role: 'tablist', style: 'margin:8px' },
-    ...home.tabs.map((t, i) => h('a', {
-      key: 't' + i,
-      href: t.href || '#',
-      class: t.active ? 'active' : '',
-      role: 'tab'
-    },
-      t.glyph ? h('span', { class: 'glyph' }, t.glyph) : null,
-      h('span', {}, t.label)
-    ))
-  );
-}
-
-const navItems = (nav && nav.links ? nav.links : []).map(l => [String(l.label || ''), l.href]);
-
-const statusLeft = home.status_left || ['main', '• utf-8', '• lf'];
-const statusRight = home.status_right || ['247420 / mmxxvi', '• probably emerging'];
-
-const App = C.AppShell({
-  topbar: C.Topbar({
-    brand: '247420',
-    leaf: site.title || 'design',
-    items: navItems
-  }),
-  crumb: C.Crumb({ trail: ['247420'], leaf: site.title || 'design' }),
-  side: buildSide(),
-  main: h('div', {},
-    Hero(),
-    Tabs(),
-    Kits(),
-    FileBrowser(),
-    DesktopOS(),
-    WebComponents(),
-    ApiExports(),
-    Decks(),
-    Docs(),
-    Previews(),
-    Features(),
-    Quickstart(),
-    Examples()
-  ),
-  status: C.Status({ left: statusLeft, right: statusRight })
-});
-
-applyDiff(document.getElementById('app'), [App]);
-
-const __fontsReady = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve();
-Promise.race([__fontsReady, new Promise(r => setTimeout(r, 1200))]).then(() => {
-  requestAnimationFrame(() => requestAnimationFrame(() => {
-    clearTimeout(__fallback);
-    __reveal();
-  }));
-});
-</script>
-</body>
-</html>

package/dist/preview/buttons.html

@@ -1,28 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8">
-<link rel="stylesheet" href="../colors_and_type.css">
-<link rel="stylesheet" href="../app-shell.css">
-<style>body{padding:24px;background:var(--panel-0);color:var(--panel-text);}</style>
-<script defer src="./motion-default.js"></script>
-</head><body>
-<div style="font-family:var(--ff-mono);font-size:14px;text-transform:uppercase;letter-spacing:0.08em;color:var(--panel-text-2);margin-bottom:16px">247420 / components / buttons</div>
-
-<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px">
-  <button class="btn-primary">ship it ↗</button>
-  <button class="btn">read source</button>
-  <button class="btn-ghost">cancel</button>
-  <a href="#" class="btn">link as button</a>
-</div>
-
-<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px">
-  <button class="btn-primary" disabled style="opacity:0.5;cursor:not-allowed">disabled</button>
-  <button class="btn">
-    <span style="color:var(--panel-accent)">●</span>
-    <span>with icon</span>
-  </button>
-  <button class="btn" style="padding:5px 10px;font-size:14px">small</button>
-  <button class="btn" style="padding:10px 18px;font-size:14px">large</button>
-</div>
-
-<div style="font-family:var(--ff-mono);font-size:14px;color:var(--panel-text-2);margin-top:6px">primary · secondary · ghost — 6px radius, hover lightens, active darkens</div>
-</body></html>

package/dist/preview/colors-core.html

@@ -1,45 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
-<link rel="stylesheet" href="../app-shell.css">
-<style>
-  body{padding:24px;background:var(--panel-0);}
-  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}
-  .sw{padding:20px;min-height:140px;border-radius:var(--r-3);display:flex;flex-direction:column;justify-content:space-between;}
-  .sw .name{font-family:var(--ff-display);font-size:24px;font-weight:700;letter-spacing:-0.01em;}
-  .sw .hex{font-family:var(--ff-mono);font-size:15px;font-weight:500;}
-  .sw .tok{font-family:var(--ff-mono);font-size:13px;text-transform:uppercase;letter-spacing:0.14em;opacity:0.7;}
-</style><script defer src="./motion-default.js"></script>
-</head><body>
-<div class="dateline"><span>247420 // COLORS // CORE</span><span class="spread"></span><span>04 SWATCHES</span></div>
-<div class="grid">
-  <div class="sw" style="background:var(--panel-0);color:var(--panel-text)">
-    <div class="name">paper</div>
-    <div>
-      <div class="hex">var(--panel-0)</div>
-      <div class="tok">--paper · default bg</div>
-    </div>
-  </div>
-  <div class="sw" style="background:var(--panel-2);color:var(--panel-text)">
-    <div class="name">paper-2</div>
-    <div>
-      <div class="hex">var(--panel-2)</div>
-      <div class="tok">--cream-3 · hover / chips</div>
-    </div>
-  </div>
-  <div class="sw" style="background:var(--panel-text);color:var(--panel-0)">
-    <div class="name">ink</div>
-    <div>
-      <div class="hex">var(--panel-text)</div>
-      <div class="tok" style="opacity:0.8">--ink · warm near-black</div>
-    </div>
-  </div>
-  <div class="sw" style="background:#247420;color:var(--panel-0)">
-    <div class="name">green</div>
-    <div>
-      <div class="hex">#247420</div>
-      <div class="tok" style="opacity:0.9">--green · primary accent</div>
-    </div>
-  </div>
-</div>
-<p class="t-meta" style="margin-top:16px">paper = default surface. paper-2 (cream-3) = hover/chip bg with real contrast against paper. ink = warm, not harsh. green = 247420, the primary accent.</p>
-</body></html>

package/dist/preview/colors-lore.html

@@ -1,28 +0,0 @@
-<!doctype html>
-<html lang="en" data-theme="auto" class="ds-247420"><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
-<link rel="stylesheet" href="../app-shell.css">
-<style>body{padding:20px;background:var(--panel-0);color:var(--panel-text);}</style><script defer src="./motion-default.js"></script>
-</head><body>
-<div class="dateline"><span>247420 // COLORS // LORE</span><span class="spread"></span><span>THE ACTUAL PALETTE</span></div>
-<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:16px">
-  <div style="background:#247420;color:var(--panel-0);padding:20px;min-height:140px">
-    <div class="t-label" style="color:var(--panel-0)">MARIJUANA GREEN</div>
-    <div class="t-micro" style="margin-top:6px;color:var(--panel-0)">#247420</div>
-    <div class="t-micro" style="color:var(--panel-0)">--green · primary lore accent</div>
-    <div style="margin-top:14px;font-family:var(--ff-display);font-size:36px;line-height:1">24·74·20</div>
-  </div>
-  <div style="background:#420247;color:var(--panel-0);padding:20px;min-height:140px">
-    <div class="t-label" style="color:var(--panel-0)">MARIJUANA PURPLE</div>
-    <div class="t-micro" style="margin-top:6px;color:var(--panel-0)">#420247</div>
-    <div class="t-micro" style="color:var(--panel-0)">--purple · the ONE allowed purple</div>
-    <div style="margin-top:14px;font-family:var(--ff-display);font-size:36px;line-height:1">42·02·47</div>
-  </div>
-  <div style="background:#E84B8A;color:#ffffff;padding:20px;min-height:140px">
-    <div class="t-label" style="color:#ffffff">MASCOT</div>
-    <div class="t-micro" style="margin-top:6px;color:#ffffff">#E84B8A</div>
-    <div class="t-micro" style="color:#ffffff">--mascot · magenta/mauve/pink · wild</div>
-    <div style="margin-top:14px;font-family:var(--ff-display);font-size:36px;line-height:1;color:#ffffff">hi.</div>
-  </div>
-</div>
-<div class="t-meta" style="margin-top:12px">247420 (green) + 420247 (purple) — the lore pair. mascot pink used randomly/wildly on accent elements.</div>
-</body></html>