anentrypoint-design 0.0.220 → 0.0.221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.220",
+  "version": "0.0.221",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/content.js

@@ -129,15 +129,32 @@ export function Section({ title, eyebrow, children, id }) {
 }
 
 export function Hero({ eyebrow, title, body, accent, badge, badgeCount, actions }) {
+    // Eyebrow + title share the title grid-area so the named-area layout stays
+    // intact; body and actions occupy the offset lower columns.
     return h('div', { class: 'ds-hero' },
-        eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
-        h('h1', { class: 'ds-hero-title' }, title),
+        h('div', { class: 'ds-hero-head' },
+            eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
+            h('h1', { class: 'ds-hero-title' }, title)
+        ),
         body ? h('p', { class: 'ds-hero-body' },
             body,
             accent ? h('span', { class: 'ds-hero-accent' }, ' ' + accent) : null
         ) : null,
         actions ? h('div', { class: 'ds-hero-actions' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
-        badge ? Panel({ title: badge, count: badgeCount, kind: 'inline', children: [] }) : null
+        badge ? h('div', { class: 'ds-hero-badge' }, Panel({ title: badge, count: badgeCount, kind: 'inline', children: [] })) : null
+    );
+}
+
+export function Marquee({ items = [], sep = '/' }) {
+    // Two identical runs make the -50% translate loop seamless. Each text and
+    // separator is a keyed span so webjsx applyDiff never sees a primitive
+    // sibling beside a keyed VElement.
+    const run = (runKey) => items.flatMap((it, i) => [
+        h('span', { class: 'ds-marquee-item', key: `${runKey}-i${i}` }, it),
+        h('span', { class: 'ds-marquee-sep', key: `${runKey}-s${i}`, 'aria-hidden': 'true' }, sep),
+    ]);
+    return h('div', { class: 'ds-marquee', role: 'marquee' },
+        h('div', { class: 'ds-marquee-track' }, ...run('a'), ...run('b'))
     );
 }
 

package/src/components.js

@@ -12,7 +12,7 @@ export {
 
 export {
     Panel, Card, Row, RowLink,
-    Hero, Install, Receipt, Changelog,
+    Hero, Marquee, Install, Receipt, Changelog,
     WorksList, WritingList, Manifesto, Section, PageHeader,
     Kpi, Table, SearchInput, TextField, Select, EventList,
     HomeView, ProjectView, Form,

package/src/kits/os/theme.css

@@ -13,7 +13,12 @@
        and --ff-mono are already canonical (colors_and_type.css), referenced
        directly below — do not self-redefine them here (cycle). */
     --ff-ui: var(--ff-body);
-    --os-accent: var(--accent);
+    /* --os-accent is used predominantly as TEXT/icon/border in the OS chrome,
+       so it tracks the readable --accent-ink tone (the electric lead is too
+       light for text on paper). --os-accent-fill is the saturated lead for the
+       rare solid fill; --os-accent-soft is the tint. */
+    --os-accent: var(--accent-ink);
+    --os-accent-fill: var(--accent);
     --os-accent-2: var(--accent-bright, var(--accent));
     --os-accent-soft: var(--accent-tint);
     --os-bg-0: var(--bg);

package/src/motion.js

@@ -11,8 +11,10 @@ export function installMotion() {
     style.textContent = `
 @media (prefers-reduced-motion: no-preference) {
   .ds-247420 [data-anim="in"] {
-    opacity: 0; transform: translateY(8px);
-    transition: opacity 320ms cubic-bezier(.2,0,0,1), transform 320ms cubic-bezier(.2,0,0,1);
+    opacity: 0; transform: translateY(14px);
+    /* Physical signature reveal — a slight spring landing, not a flat fade. */
+    transition: opacity var(--dur-reveal, 560ms) var(--ease, cubic-bezier(.2,0,0,1)),
+                transform var(--dur-reveal, 560ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
   }
   .ds-247420 [data-anim="ready"] {
     opacity: 1; transform: translateY(0);