diff --git a/docs/chord/_ds/basic-nvidia-design-system-f939d4e7-d0bb-4994-9e26-a471f04510c4/_adherence.oxlintrc.json b/docs/chord/_ds/basic-nvidia-design-system-f939d4e7-d0bb-4994-9e26-a471f04510c4/_adherence.oxlintrc.json new file mode 100644 index 00000000..25668f48 --- /dev/null +++ b/docs/chord/_ds/basic-nvidia-design-system-f939d4e7-d0bb-4994-9e26-a471f04510c4/_adherence.oxlintrc.json @@ -0,0 +1,494 @@ +{ + "plugins": [ + "react", + "import" + ], + "rules": { + "react/forbid-elements": [ + "warn", + { + "forbid": [] + } + ], + "no-restricted-imports": [ + "warn", + { + "patterns": [ + { + "group": [ + "components/brand/**", + "components/buttons/**", + "components/data-display/**", + "components/feedback/**", + "components/forms/**", + "components/icons/**", + "components/navigation/**", + "components/overlay/**", + "decks/edm-stack/**", + "decks/pdmt-boards-systems/**", + "slides/**", + "ui_kits/web/**" + ], + "message": "Import design-system components from 'index.js', not component internals." + } + ] + } + ], + "no-restricted-syntax": [ + "warn", + { + "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]", + "message": "Raw hex color — use a design-system color token via var()." + }, + { + "selector": "Literal[value=/\\b\\d+px\\b/]", + "message": "Raw px value — use a design-system spacing token via var()." + }, + { + "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:Hanken Grotesk|Roboto Mono|Open Sans|Roboto|JetBrains Mono))/i]", + "message": "Font not provided by the design system. Available: Hanken Grotesk, Roboto Mono, Open Sans, Roboto, JetBrains Mono." + }, + { + "selector": "JSXOpeningElement[name.name='Avatar'] > JSXAttribute > JSXIdentifier[name!=/^(?:src|name|size|online|style|key|ref|className|style|children)$/]", + "message": " doesn't accept that prop. Declared props: src, name, size, online, style." + }, + { + "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|tone|style|key|ref|className|style|children)$/]", + "message": " doesn't accept that prop. Declared props: children, variant, tone, style." + }, + { + "selector": "JSXOpeningElement[name.name='Banner'] > JSXAttribute > JSXIdentifier[name!=/^(?:status|title|children|action|onClose|style|key|ref|className|style|children)$/]", + "message": " doesn't accept that prop. Declared props: status, title, children, action, onClose, style." + }, + { + "selector": "JSXOpeningElement[name.name='Banner'] > JSXAttribute[name.name='status'] > Literal[value!=/^(?:info|success|warning|error)$/]", + "message": " status must be one of 'info' | 'success' | 'warning' | 'error'." + }, + { + "selector": "JSXOpeningElement[name.name='BreadcrumbItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|href|key|ref|className|style|children)$/]", + "message": " doesn't accept that prop. Declared props: label, href." + }, + { + "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|disabled|iconLeft|iconRight|fullWidth|type|onClick|style|key|ref|className|style|children)$/]", + "message": " - - - - - -

- Dexterous Manipulation Benchmark with Human References -

-

- The benchmark spans large-scale, long-horizon, contact-rich tasks paired with human demonstrations, - covering rigid, articulated, and multi-object manipulation. + +

+
+

Turning demonstrated contacts into rewards

+

+ CHORD converts demonstrated contacts and contact wrenches into rewards for learning dexterous robot-hand policies. Hover a numbered region to explore each stage.

-
- Dexterous manipulation benchmark with human reference wrench distribution highlights -
+
+ CHORD reward formulation from reference contact to contact wrench reward + + + + + + +
+ 1 · Extract Human Contacts + From a demonstration, CHORD extracts contact events and estimates local friction constraints, shown as friction cones. +
+
+ 2 · Human Contact Wrench + Per frame and hand, CHORD computes a human contact wrench. A wider manifold means richer force-and-torque authority over the object. +
+
+ 4 · Policy Contact Wrench + Blue manifolds are produced by the learned policy — closely matching the demonstration across frames. +
+
+ 3 · Imitation + Contact Wrench + CHORD combines imitation and contact-wrench rewards to train the dexterous robot-hand policy. +
+
+ - - - - - - -
-
-
-
-

Results

- -
-

- CHORD uses a unified contact-wrench representation to transfer human manipulation skills across - long-horizon tasks, diverse objects, whole-body behaviors, and real-world hardware. -

+
+ + +
+
+
+

Dexterous Manipulation Benchmark with Human Demonstrations

+

+ Large-scale, long-horizon, contact-rich tasks paired with human demonstrations spanning rigid, articulated, and multi-object manipulation. +

+
+ +
+
+ 4,739 + Simulation-ready tasks
+
-
-

Benchmark Scale and Performance

-

- Evaluation on the Dexterous Manipulation Benchmark with Human References. -

-
+
+ + +
+
+
+

Capabilities

+

+ A unified contact-wrench representation carries human manipulation skills across diverse manipulation behaviors, + long-horizon tasks, whole-body embodiments, and real-world hardware. +

+
-
-

Diverse Object Interactions

-

- Contact-wrench guidance transfers across grasping, reorientation, handovers, tool use, and rigid, - articulated, or multi-object manipulation. -

-
-
- -
Two-Hand Grasp
-
-
- -
Eraser Pick-and-Rotate
-
-
- -
Spatula Handover
-
-
- -
Spatula Rotation
-
-
- -
Milk Handover
-
-
-
-
-

Real-World Deployment

-

- Learned policies transfer from simulation to real dexterous hands while preserving contact-driven object - motion. -

-
-
- - 3X -
Box
-
-
- - 3X -
Waffle Iron
-
-
- - 3X -
Mixer
-
-
-
-
-

Quantitative Evaluation

-

- CHORD maintains high success rates at scale and under whole-body transfer, while matching or outperforming - prior methods on their original metrics. Unlike methods limited to subsets of rigid, articulated, or - multi-object manipulation, CHORD succeeds across all three categories. -

-
- Large-scale and whole-body manipulation success rates across rigid, articulated, and multi-object tasks -
- CHORD success rates on left: 1,831 manipulation tasks across four - datasets, spanning single-object and multi-object tasks with rigid and articulated objects, and - right: 17 of these subtasks fully grounded on a humanoid robot equipped with articulated hands. -
-
-

Comparison with Prior Methods

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Task SuiteMetricRef. MethodRef. ScoreOur Score
DMAUCDexMachina0.232 ± 0.2140.687 ± 0.358
MTMT-SRManipTrans0.4280.639
SPSP-SRSpider0.333 ± 0.4880.359 ± 0.482
Ours-1AUCDexMachina0.211 ± 0.1380.895 ± 0.052
Ours-1SP-SRSpider0.133 ± 0.3270.999 ± 0.000
Ours-2SP-SRSpider0.533 ± 0.5030.982 ± 0.022
+ +
+
+

Large-Scale Evaluation

+ +
+

+ We open-source 4,739 simulation-ready dexterous manipulation tasks paired with human demonstrations. Across + 1,831 diverse evaluations, CHORD reaches an average success rate of 82.12%. +

+
+
+ 1,831 + Benchmark evaluations +
+
+ 82.12% + Average success rate
-

- Scores are comparable within each row because baselines use different task suites and evaluation protocols. -

- -
-

Contact-Wrench Reward Predicts Success

-

- The contact-wrench-support reward provides a reliable proxy for downstream task completion. -

-
- Correlation between contact wrench reward and task success rate -
- Across 1,831 benchmark runs, normalized contact-wrench-support reward strongly correlates with task - completion (overall Pearson r = 0.798; dataset-wise r = 0.76-0.89), supporting it as both a training - signal and a proxy metric. -
-
+

+ Hover a clip to preview +

+
+ + +
+
-
-

Long-Horizon Tracking Accuracy

-

- CHORD sustains accurate object tracking over extended manipulation sequences. -

-
- Tracking accuracy across manipulation horizons for CHORD and baselines -
- Under the DexMachina ADD-AUC metric, CHORD maintains high object-tracking accuracy across sequences up - to roughly 48 seconds, while prior methods degrade as interaction horizons increase. -
-
+ +
+
+

Whole-Body Loco-Manipulation

+
-
-
-
-
- - - - - - - +
+
+

Real-World Deployment

+ +
+

+ Learned policies transfer from simulation to real dexterous hands. +

+
+ +
+ + 3× +
{{ v.cap }}
+
+ +
+ + + +
+
+
+

Quantitative Evaluation

+

+ CHORD sustains high success at scale and outperforms prior methods, succeeding across rigid, articulated, and multi-object manipulation. +

+
-
- 
@inproceedings{chord2026,
-  title     = {Chord: [Paper Title]},
-  author    = {Author One and Author Two and Author Three},
-  year      = {2026},
-  booktitle = {[Venue]},
-}
-

- If you have any questions, please contact [contact author]. -

-
-
---> - - - - - +
+

Comparison With Prior Methods

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Task SuiteMetricRef. MethodRef. ScoreOur Score
DMAUCDexMachina0.232 ± 0.2140.687 ± 0.358
MTMT-SRManipTrans0.4280.639
SPSP-SRSpider0.333 ± 0.4880.359 ± 0.482
Ours-1AUCDexMachina0.211 ± 0.1380.895 ± 0.052
Ours-1SP-SRSpider0.133 ± 0.3270.999 ± 0.000
Ours-2SP-SRSpider0.533 ± 0.5030.982 ± 0.022
+

+ Scores are comparable within each row; baselines use different task suites and evaluation protocols. +

+
-
-

[Second question?]

-

[Answer.]

-
+ +

Large-Scale and Whole-Body Evaluation Results

+
+ Per-dataset success rates across benchmark tasks +
+ + +
+
+
Reward Correlation
+ Correlation between contact wrench reward and task success +
+ Across 1,831 runs, normalized contact-wrench-support reward strongly correlates with task completion + (Pearson r = 0.798; dataset-wise r = 0.76–0.89) — a reliable training signal and proxy metric for manipulation. +
+
+
+
Tracking Horizon
+ Tracking accuracy across manipulation horizons +
+ Under the DexMachina ADD-AUC metric, CHORD maintains high object-tracking accuracy across sequences up to + roughly 48 seconds, while prior methods degrade as horizons grow. +
+
- - ---> - - - - - +
+
+
+ Paper + arXiv soon + Code soon
- -
---> - - + const onResize = () => { + const wrap = document.getElementById('chord-navlinks'); + if (wrap) wrap.style.display = window.innerWidth < 1060 ? 'none' : 'flex'; + }; + // reveal-on-scroll (set hidden via JS so no-JS stays visible) + const revs = Array.from(document.querySelectorAll('[data-reveal]')); + revs.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)'; + }); + const io = new IntersectionObserver((ents) => { + ents.forEach(e => { + if (e.isIntersecting) { + e.target.style.opacity = '1'; + e.target.style.transform = 'none'; + io.unobserve(e.target); + } + }); + }, { threshold: 0.1, rootMargin: '0px 0px -6% 0px' }); + revs.forEach(el => io.observe(el)); + + // interactive method comparison — swap the full-size detail panel on hover + (() => { + const details = {}; + document.querySelectorAll('#method-detail-wrap [data-detail]').forEach(d => { details[d.getAttribute('data-detail')] = d; }); + const selThumbs = Array.from(document.querySelectorAll('#method-thumbs [data-select]')); + const setDetail = (key) => { + Object.keys(details).forEach(k => { details[k].style.display = (k === key) ? 'grid' : 'none'; }); + selThumbs.forEach(t => { + const on = t.getAttribute('data-select') === key; + t.style.boxShadow = on ? '0 14px 32px rgba(0,0,0,.16)' : '0 1px 3px rgba(0,0,0,.08)'; + t.style.transform = on ? 'translateY(-3px)' : 'none'; + }); + }; + selThumbs.forEach(t => { + const key = t.getAttribute('data-select'); + t.addEventListener('mouseenter', () => setDetail(key)); + t.addEventListener('focusin', () => setDetail(key)); + }); + if (selThumbs.length) setDetail('wrench'); + })(); + + // interactive reward-figure hotspots + document.querySelectorAll('#reward-figure [data-hotspot]').forEach(btn => { + const idx = btn.getAttribute('data-hotspot'); + const card = document.querySelector('#reward-figure [data-hcard="' + idx + '"]'); + const show = () => { if (card) { card.style.opacity = '1'; card.style.pointerEvents = 'auto'; } btn.style.background = 'rgba(118,185,0,.08)'; }; + const hide = () => { if (card) { card.style.opacity = '0'; card.style.pointerEvents = 'none'; } btn.style.background = 'transparent'; }; + btn.addEventListener('mouseenter', show); + btn.addEventListener('mouseleave', hide); + btn.addEventListener('focus', show); + btn.addEventListener('blur', hide); + }); + + // ensure autoplay/looping videos actually loop (React drops valueless boolean attrs) + document.querySelectorAll('video:not([data-controls]):not([data-hover-play])').forEach(v => { + v.loop = true; v.muted = true; v.playsInline = true; + const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); }; + tryPlay(); + v.addEventListener('ended', () => { try { v.currentTime = 0; } catch (e) {} tryPlay(); }); + }); + + // hover-only playback: these videos stay paused until hovered (keeps the grid light) + document.querySelectorAll('video[data-hover-play]').forEach(v => { + v.loop = true; v.muted = true; v.playsInline = true; + try { v.pause(); } catch (e) {} + // seek slightly past 0 so the first frame paints as a static thumbnail at rest + const showThumb = () => { try { v.currentTime = 0.001; } catch (e) {} }; + if (v.readyState >= 1) showThumb(); else v.addEventListener('loadedmetadata', showThumb, { once: true }); + v.addEventListener('mouseenter', () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); }); + v.addEventListener('mouseleave', () => { try { v.pause(); v.currentTime = 0.001; } catch (e) {} }); + }); + + // re-apply controls on videos flagged with data-controls (React drops valueless boolean attrs); default to unmuted + document.querySelectorAll('video[data-controls]').forEach(v => { v.controls = true; v.muted = false; }); + + this._onScroll = onScroll; + this._onResize = onResize; + window.addEventListener('scroll', onScroll, { passive: true }); + window.addEventListener('resize', onResize); + onResize(); + onScroll(); + } + + componentWillUnmount() { + if (this._onScroll) window.removeEventListener('scroll', this._onScroll); + if (this._onResize) window.removeEventListener('resize', this._onResize); + } + + renderVals() { + const base = 'assets/videos/'; + const pics = 'assets/pics/'; + return { + longVids: [ + { src: base + 'sim/long/capsulemachine_one_finger-web.mp4', cap: 'Capsule Machine' }, + { src: base + 'sim/long/notebook.mp4', cap: 'Notebook' }, + { src: base + 'sim/long/s02_mixer_use_04-web.mp4', cap: 'Mixer' }, + { src: base + 'sim/long/s04_box_use_02-web.mp4', cap: 'Box' }, + ], + diverseVids: [ + { src: base + 'sim/diverse/pick_rotate_use_eraser-web.mp4', cap: 'In-Hand Reorientation' }, + { src: base + 'sim/diverse/milk_handover-web.mp4', cap: 'Handover' }, + { src: base + 'sim/diverse/hand_over_spatula-web.mp4', cap: 'Tool Use' }, + { src: base + 'sim/diverse/grasping-web.mp4', cap: 'Grasp' }, + { src: base + 'sim/diverse/grasping_1%262_hand-web.mp4', cap: 'Two-Hand Grasp' }, + { src: base + 'sim/diverse/pressing.mp4', cap: 'Pressing' }, + { src: base + 'sim/diverse/opening.mp4', cap: 'Opening' }, + { src: base + 'sim/diverse/turning.mp4', cap: 'Turning' }, + ], + realVids: [ + { src: base + 'real/Box-web.mp4', cap: 'Box' }, + { src: base + 'real/Waffle%20iron-web.mp4', cap: 'Waffle Iron' }, + { src: base + 'real/Mixer-web.mp4', cap: 'Mixer' }, + { src: base + 'real/capsule%20machine-web.mp4', cap: 'Capsule Machine' }, + ], + benchGrid: Array.from({ length: 32 }, (_, i) => base + 'sim/large_scale/bench_' + String(i + 1).padStart(2, '0') + '.mp4'), + }; + } +} + diff --git a/docs/chord/static/css/index.css b/docs/chord/static/css/index.css deleted file mode 100644 index 1a63f38d..00000000 --- a/docs/chord/static/css/index.css +++ /dev/null @@ -1,1197 +0,0 @@ -body { - font-family: 'Noto Sans', sans-serif; -} - -.footer .icon-link { - font-size: 25px; - color: #000; -} - -.link-block a { - margin-top: 5px; - margin-bottom: 5px; -} - -.link-block .button { - margin-top: 5px; - margin-bottom: 5px; -} - -.publication-title { - font-family: 'Google Sans', sans-serif; -} - -.publication-authors { - font-family: 'Google Sans', sans-serif; -} - -.publication-authors a { - color: hsl(204, 86%, 53%) !important; -} - -.publication-authors a:hover { - text-decoration: underline; -} - -.paper-header-section { - padding-top: 4rem; - padding-bottom: 1.25rem; - background: #fff; -} - -.paper-title { - max-width: 1120px; - margin: 0 auto; - color: #172033 !important; - font-size: clamp(2.1rem, 4vw, 3rem) !important; - line-height: 1.14; -} - -.paper-authors { - max-width: 1040px; - margin: 1.45rem auto 0; - color: #2f3a4d; -} - -.paper-author-list { - display: flex; - flex-direction: column; - justify-content: center; - gap: 0.36rem; - font-size: clamp(1.06rem, 1.35vw, 1.22rem); - line-height: 1.45; -} - -.paper-author-line { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: baseline; - gap: 0.18rem 0.85rem; -} - -.paper-authors .author-block { - margin: 0; -} - -.paper-affiliation { - margin-top: 0.9rem; -} - -.paper-affiliation-logo { - display: block; - width: min(220px, 48vw); - height: auto; - margin: 0 auto; -} - -.paper-author-notes { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.15rem 1.2rem; - margin-top: 0.55rem; - color: #5a667a; - font-size: clamp(0.95rem, 1.05vw, 1.08rem); - font-weight: 400; - line-height: 1.5; -} - -.chord-hero { - background-color: #0b0f14; -} - -.hero-background-video { - position: absolute; - inset: 0; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center; - z-index: 0; - pointer-events: none; -} - -.chord-hero .hero-body { - padding-top: 6rem; - padding-bottom: 5rem; -} - -.chord-wordmark { - display: block; - color: #fff; - font-family: 'Merriweather', 'Times New Roman', serif; - font-size: clamp(5.5rem, 10vw, 6.4rem); - font-weight: 900; - line-height: 1.05; - letter-spacing: 0.02em; - margin: 0 auto 1.75rem; - text-shadow: - 0 3px 0 rgba(255, 255, 255, 0.16), - 0 8px 24px rgba(0, 0, 0, 0.46); -} - -.chord-hero .title, -.chord-hero .subtitle, -.chord-hero .is-italic { - text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5); -} - -.chord-hero .hero-foot .tabs a { - font-size: clamp(1.35rem, 1.55vw, 1.5rem); - font-weight: 700; -} - -.nav-disabled { - color: rgba(255, 255, 255, 0.52) !important; - cursor: not-allowed; - pointer-events: none; - user-select: none; -} - -.nav-disabled small, -.nav-disabled-button small { - font-size: 0.72em; - font-weight: 600; - opacity: 0.85; -} - -.nav-disabled-button { - border-color: rgba(255, 255, 255, 0.18) !important; - background: rgba(255, 255, 255, 0.14) !important; - color: rgba(255, 255, 255, 0.58) !important; - cursor: not-allowed; - pointer-events: none; - box-shadow: none !important; - user-select: none; -} - -.author-block { - display: inline-block; - margin: 0.5rem 1rem; -} - -.publication-video { - position: relative; - width: 100%; - height: 0; - padding-bottom: 56.25%; - overflow: hidden; - border-radius: 10px !important; -} - -.publication-video iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -section.section .title.has-text-centered { - position: relative; - font-size: clamp(2rem, 3vw, 2.35rem) !important; - line-height: 1.12; - letter-spacing: -0.02em; -} - -section.section .title.has-text-centered::after { - content: ""; - display: block; - width: 72px; - height: 2px; - margin: 0.8rem auto 0; - border-radius: 999px; - background: linear-gradient( - 90deg, - rgba(47, 143, 107, 0), - rgba(47, 143, 107, 0.95), - rgba(47, 143, 107, 0) - ); -} - -.abstract-copy { - max-width: 780px; - margin: 2rem auto 0; - color: #263248; - font-size: 1.16rem; - line-height: 1.68; - hyphens: auto; - overflow-wrap: normal; - text-align: justify; - text-align-last: left; -} - -.project-video-section { - padding-top: 2.5rem; - padding-bottom: 3.5rem; -} - -.project-video-subtitle { - max-width: 820px; - margin: 0.8rem auto 2rem; - color: #4d5a6d; - font-size: 1.06rem; - line-height: 1.45; - text-align: center; -} - -.project-video-frame { - width: min(100%, 1040px); - margin: 0 auto; - border: 1px solid rgba(31, 58, 95, 0.12); - border-radius: 8px; - background: #fff; - box-shadow: 0 16px 36px rgba(31, 58, 95, 0.1); - overflow: hidden; -} - -.project-video-frame video { - display: block; - width: 100%; - aspect-ratio: 16 / 9; - background: #000; -} - -.abstract-copy p { - margin: 0; -} - -.abstract-copy p + p { - margin-top: 1.05rem; -} - -.abstract-keywords { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 0.55rem; - max-width: 780px; - margin: 2.6rem auto 0; - padding-top: 1.15rem; - border-top: 1px solid rgba(31, 58, 95, 0.1); -} - -.abstract-keywords span { - padding: 0.32rem 0.72rem; - border: 1px solid rgba(47, 143, 107, 0.14); - border-radius: 999px; - background: rgba(47, 143, 107, 0.06); - color: #344156; - font-size: 0.9rem; - font-weight: 800; -} - -.abstract-keywords .abstract-keywords-label { - width: 100%; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - color: #6b7586; - font-size: 0.78rem; - font-weight: 900; - letter-spacing: 0.08em; - text-align: center; - text-transform: uppercase; -} - -.method-insight-heading, -.method-subsection-heading { - margin: 0; - color: #172033; - font-size: clamp(1.18rem, 1.55vw, 1.48rem); - font-weight: 800; - line-height: 1.25; - text-align: center; -} - -.method-insight-heading { - margin-top: 0.25rem; -} - -.method-insight-tagline { - max-width: 720px; - margin: 0.8rem auto 0; - color: #4d5a6d; - font-size: 1.08rem; - line-height: 1.45; - text-align: center; -} - -.method-subsection { - margin-top: 4rem; - text-align: center; -} - -.method-benchmark-heading { - margin-top: 7rem; -} - -.method-subsection-tagline { - max-width: 760px; - margin: 0.8rem auto 0; - color: #4d5a6d; - font-size: 1.05rem; - line-height: 1.45; -} - -.method-benchmark-tagline { - max-width: 880px; - margin-bottom: 2.8rem; -} - -.method-benchmark-figure { - margin: 0 auto; -} - -.method-benchmark-figure img { - display: block; - width: min(100%, 960px); - height: auto; - margin: 0 auto; -} - -.method-wide-figure { - position: relative; - width: min(100%, 1180px); - margin: 10.5rem auto 4.5rem; -} - -.method-wide-figure img { - display: block; - width: 100%; - height: auto; - margin: 0 auto; -} - -.method-hotspot { - position: absolute; - display: block; - border: 0; - border-radius: 8px; - background: transparent; - cursor: pointer; - outline: none; - padding: 0; - z-index: 2; -} - -.method-hotspot::before { - content: ""; - position: absolute; - inset: 0; - border-radius: 8px; -} - -.method-hotspot:hover, -.method-hotspot:focus { - z-index: 8; -} - -.method-hotspot-card { - position: absolute; - display: block; - width: min(300px, 28vw); - padding: 0.9rem 1rem; - border: 1px solid rgba(47, 143, 107, 0.18); - border-radius: 8px; - background: rgba(255, 255, 255, 0.98); - box-shadow: 0 18px 42px rgba(31, 58, 95, 0.2); - color: #172033; - text-align: left; - opacity: 0; - pointer-events: auto; - transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); -} - -.method-hotspot-card::after { - content: ""; - position: absolute; - width: 14px; - height: 14px; - border: 1px solid rgba(47, 143, 107, 0.18); - background: rgba(255, 255, 255, 0.98); - transform: rotate(45deg); -} - -.method-hotspot:hover .method-hotspot-card, -.method-hotspot:focus .method-hotspot-card { - opacity: 1; -} - -.method-hotspot-title, -.method-hotspot-copy { - display: block; -} - -.method-hotspot-title { - margin-bottom: 0.35rem; - font-size: 1rem; - font-weight: 800; - line-height: 1.25; -} - -.method-hotspot-copy { - font-size: 0.92rem; - font-weight: 500; - line-height: 1.45; -} - -.method-hotspot-left { - left: 2%; - top: 18%; - width: 22%; - height: 61%; -} - -.method-hotspot-left .method-hotspot-card { - right: calc(100% + 0.75rem); - top: 50%; - width: min(210px, 20vw); - border-right: 4px solid #2f8f6b; - transform: translate(0.4rem, -50%); -} - -.method-hotspot-left .method-hotspot-card::after { - right: -8px; - top: calc(50% - 7px); - border-bottom: 0; - border-left: 0; -} - -.method-hotspot-left:hover .method-hotspot-card, -.method-hotspot-left:focus .method-hotspot-card { - transform: translate(0, -50%); -} - -.method-hotspot-right { - left: 75%; - top: 13%; - width: 23%; - height: 72%; -} - -.method-hotspot-right .method-hotspot-card { - left: calc(100% + 0.75rem); - top: 50%; - width: min(210px, 20vw); - border-left: 4px solid #2f8f6b; - transform: translate(-0.4rem, -50%); -} - -.method-hotspot-right .method-hotspot-card::after { - left: -8px; - top: calc(50% - 7px); - border-top: 0; - border-right: 0; -} - -.method-hotspot-right:hover .method-hotspot-card, -.method-hotspot-right:focus .method-hotspot-card { - transform: translate(0, -50%); -} - -.method-hotspot-center-top { - left: 25%; - top: 7%; - width: 49%; - height: 42%; -} - -.method-hotspot-center-top .method-hotspot-card { - left: 50%; - bottom: calc(100% + 2.5rem); - width: min(840px, 72vw); - border-bottom: 4px solid #2f8f6b; - transform: translate(-50%, 0.4rem); -} - -.method-hotspot-center-top .method-hotspot-card::after { - bottom: -8px; - left: calc(50% - 7px); - border-top: 0; - border-left: 0; -} - -.method-hotspot-center-top:hover .method-hotspot-card, -.method-hotspot-center-top:focus .method-hotspot-card { - transform: translate(-50%, 0); -} - -.method-hotspot-center-bottom { - left: 25%; - top: 49%; - width: 49%; - height: 38%; -} - -.method-hotspot-center-bottom .method-hotspot-card { - left: 50%; - top: calc(100% + 2rem); - width: min(840px, 72vw); - border-top: 4px solid #2f8f6b; - transform: translate(-50%, -0.4rem); -} - -.method-hotspot-center-bottom .method-hotspot-card::after { - top: -8px; - left: calc(50% - 7px); - border-right: 0; - border-bottom: 0; -} - -.method-hotspot-center-bottom:hover .method-hotspot-card, -.method-hotspot-center-bottom:focus .method-hotspot-card { - transform: translate(-50%, 0); -} - -.method-triangle { - position: relative; - display: grid; - grid-template-columns: minmax(220px, 0.78fr) minmax(360px, 1.12fr) minmax(0, 0fr); - grid-template-rows: repeat(2, minmax(190px, 1fr)); - grid-template-areas: - "human marker marker-text" - "human wrench wrench-text"; - gap: 1.25rem 0; - column-gap: 1.5rem; - align-items: center; - width: min(100%, 960px); - margin: 2.6rem auto 0; - transition: - transform 620ms cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform; -} - -.method-panel { - position: relative; - margin: 0; - overflow: hidden; - border: 1px solid rgba(31, 58, 95, 0.12); - border-radius: 8px; - background: #fff; - box-shadow: 0 14px 34px rgba(31, 58, 95, 0.1); - transition: - opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), - filter 500ms cubic-bezier(0.16, 1, 0.3, 1), - transform 560ms cubic-bezier(0.16, 1, 0.3, 1), - box-shadow 500ms cubic-bezier(0.16, 1, 0.3, 1); - will-change: transform, opacity, filter; -} - -.method-panel-human { - grid-area: human; - align-self: center; - justify-self: center; - width: min(100%, 420px); - transform-origin: left center; - transition: - opacity 560ms cubic-bezier(0.16, 1, 0.3, 1), - transform 620ms cubic-bezier(0.16, 1, 0.3, 1), - filter 560ms cubic-bezier(0.16, 1, 0.3, 1); -} - -.method-panel-marker { - grid-area: marker; - align-self: end; -} - -.method-panel-wrench { - grid-area: wrench; - align-self: start; -} - -.method-panel img { - display: block; - width: 100%; - aspect-ratio: 16 / 10; - object-fit: cover; -} - -.method-panel figcaption { - position: absolute; - left: 0.75rem; - bottom: 0.75rem; - padding: 0.35rem 0.65rem; - border-radius: 6px; - background: rgba(7, 12, 20, 0.72); - color: #fff; - font-size: 0.9rem; - font-weight: 700; - letter-spacing: 0.01em; -} - -.method-callout { - position: absolute; - left: calc(100% + 1rem); - top: 50%; - display: grid; - grid-template-columns: 1fr; - gap: 0.7rem; - align-items: start; - width: min(380px, 30vw); - padding: 1rem; - border-left: 4px solid #2f8f6b; - border-radius: 8px; - background: rgba(255, 255, 255, 0.96); - box-shadow: 0 16px 38px rgba(31, 58, 95, 0.16); - color: #172033; - opacity: 0; - pointer-events: none; - transform: translate(-0.75rem, -50%); - transition: - opacity 320ms ease 140ms, - transform 560ms cubic-bezier(0.16, 1, 0.3, 1) 90ms; - z-index: 4; -} - -.method-panel-marker .method-callout { - grid-area: marker-text; - top: 0; - bottom: auto; - transform: translate(-0.5rem, 0); -} - -.method-panel-wrench .method-callout { - grid-area: wrench-text; - top: auto; - bottom: 0; - transform: translate(-0.5rem, 0); -} - -.method-callout h3 { - grid-column: 1; - margin: 0; - font-size: 1.08rem; - font-weight: 800; -} - -.method-callout-image { - grid-column: 1; - grid-row: auto; - display: block; - width: 100%; - height: auto; - max-height: none; - margin: 0; - justify-self: stretch; - border: 1px solid rgba(31, 58, 95, 0.1); - border-radius: 6px; - object-fit: contain; - background: #fff; - order: 4; -} - -.method-panel img.method-callout-image { - aspect-ratio: auto; - height: auto; - object-fit: contain; -} - -.method-callout p { - grid-column: 1; - margin: 0; - font-size: 1rem; - line-height: 1.42; -} - -.method-panel-interactive { - overflow: visible; -} - -.method-panel-interactive::before { - content: ""; - position: absolute; - top: -1.25rem; - bottom: -1.25rem; - left: 100%; - width: min(620px, 48vw); - z-index: 3; -} - -.method-triangle:has(.method-panel-interactive.is-hovered), -.method-triangle:has(.method-panel-interactive:hover), -.method-triangle:has(.method-panel-interactive:focus), -.method-triangle:has(.method-panel-interactive:focus-within) { - transform: none; -} - -.method-triangle:has(.method-panel-interactive.is-hovered) .method-panel-marker, -.method-triangle:has(.method-panel-interactive:hover) .method-panel-marker, -.method-triangle:has(.method-panel-interactive:focus) .method-panel-marker, -.method-triangle:has(.method-panel-interactive:focus-within) .method-panel-marker, -.method-triangle:has(.method-panel-interactive.is-hovered) .method-panel-wrench, -.method-triangle:has(.method-panel-interactive:hover) .method-panel-wrench, -.method-triangle:has(.method-panel-interactive:focus) .method-panel-wrench, -.method-triangle:has(.method-panel-interactive:focus-within) .method-panel-wrench { - transform: translateX(clamp(-18rem, -18vw, -13rem)); -} - -.method-triangle:has(.method-panel-interactive.is-hovered) .method-panel-human, -.method-triangle:has(.method-panel-interactive:hover) .method-panel-human, -.method-triangle:has(.method-panel-interactive:focus) .method-panel-human, -.method-triangle:has(.method-panel-interactive:focus-within) .method-panel-human { - opacity: 0.42; - transform: scale(0.32); - filter: saturate(0.7); -} - -.method-triangle:has(.method-panel-marker.is-hovered) .method-panel-wrench, -.method-triangle:has(.method-panel-marker:hover) .method-panel-wrench, -.method-triangle:has(.method-panel-marker:focus) .method-panel-wrench, -.method-triangle:has(.method-panel-marker:focus-within) .method-panel-wrench, -.method-triangle:has(.method-panel-wrench.is-hovered) .method-panel-marker, -.method-triangle:has(.method-panel-wrench:hover) .method-panel-marker, -.method-triangle:has(.method-panel-wrench:focus) .method-panel-marker, -.method-triangle:has(.method-panel-wrench:focus-within) .method-panel-marker { - opacity: 0.24; - filter: grayscale(0.2) saturate(0.75); -} - -.method-triangle:has(.method-panel-marker.is-hovered) .method-panel-marker, -.method-triangle:has(.method-panel-marker:hover) .method-panel-marker, -.method-triangle:has(.method-panel-marker:focus) .method-panel-marker, -.method-triangle:has(.method-panel-marker:focus-within) .method-panel-marker, -.method-triangle:has(.method-panel-wrench.is-hovered) .method-panel-wrench, -.method-triangle:has(.method-panel-wrench:hover) .method-panel-wrench, -.method-triangle:has(.method-panel-wrench:focus) .method-panel-wrench, -.method-triangle:has(.method-panel-wrench:focus-within) .method-panel-wrench { - z-index: 5; -} - -@supports not selector(:has(*)) { - .method-callout { - width: min(420px, 38vw); - } -} - -.method-panel-interactive.is-hovered, -.method-panel-interactive:hover, -.method-panel-interactive:focus { - box-shadow: 0 18px 42px rgba(31, 58, 95, 0.15); - outline: none; -} - -.method-panel-interactive.is-hovered .method-callout, -.method-panel-interactive:hover .method-callout, -.method-panel-interactive:focus .method-callout, -.method-panel-interactive:focus-within .method-callout { - opacity: 1; - transform: translate(0, -50%); -} - -.method-panel-marker.is-hovered .method-callout, -.method-panel-marker:hover .method-callout, -.method-panel-marker:focus .method-callout, -.method-panel-marker:focus-within .method-callout { - transform: translate(0, 0); -} - -.method-panel-wrench.is-hovered .method-callout, -.method-panel-wrench:hover .method-callout, -.method-panel-wrench:focus .method-callout, -.method-panel-wrench:focus-within .method-callout { - transform: translate(0, 0); -} - -.results-story { - max-width: 920px; - margin: 1.75rem auto 0; - color: #263248; - text-align: center; -} - -.results-story p { - margin: 0.7rem 0 0; - font-size: 1.08rem; - line-height: 1.65; -} - -.results-lede { - color: #172033; - font-size: 1.18rem !important; - font-weight: 800; - line-height: 1.45 !important; -} - -.result-benchmark-showcase { - width: min(100%, 1080px); - margin: 2.25rem auto 3.25rem; -} - -.result-benchmark-heading { - margin: 0; - color: #172033; - font-size: clamp(1.18rem, 1.55vw, 1.48rem); - font-weight: 800; - line-height: 1.25; - text-align: center; -} - -.result-benchmark-subtitle { - max-width: 760px; - margin: 0.8rem auto 1.9rem; - color: #4d5a6d; - font-size: 1.04rem; - line-height: 1.45; - text-align: center; -} - -.result-benchmark-video { - display: block; - width: 100%; - aspect-ratio: 16 / 9; - object-fit: cover; - border-radius: 8px; - background: #fff; - box-shadow: 0 16px 36px rgba(31, 58, 95, 0.1); -} - -.result-benchmark-copy { - max-width: 900px; - margin: 1.3rem auto 0; - color: #172033; - font-size: 1.1rem; - font-weight: 700; - line-height: 1.55; - text-align: center; -} - -.result-subsection { - margin-top: 3rem; -} - -.result-subsection-heading { - margin: 0; - color: #172033; - font-size: clamp(1.18rem, 1.55vw, 1.48rem); - font-weight: 800; - line-height: 1.25; - text-align: center; -} - -.result-subsection-tagline { - max-width: 820px; - margin: 0.8rem auto 2.15rem; - color: #4d5a6d; - font-size: 1.04rem; - line-height: 1.45; - text-align: center; -} - -.result-video-grid { - display: grid; - gap: 1rem; -} - -.result-video-grid-four { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.result-video-grid-six { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.result-video-card { - position: relative; - margin: 0; -} - -.result-video { - display: block; - width: 100%; - aspect-ratio: 16 / 9; - object-fit: cover; - border-radius: 8px; - background: #f8fafc; - box-shadow: 0 12px 28px rgba(31, 58, 95, 0.08); -} - -.result-video-real { - background: #111827; -} - -.result-speed-badge { - position: absolute; - top: 0.55rem; - right: 0.55rem; - padding: 0.24rem 0.5rem; - border-radius: 999px; - background: rgba(7, 12, 20, 0.72); - color: #fff; - font-size: 0.78rem; - font-weight: 800; - line-height: 1; - letter-spacing: 0.02em; - pointer-events: none; -} - -.result-video-card figcaption { - margin-top: 0.45rem; - color: #4d5a6d; - font-size: 0.9rem; - font-weight: 700; - text-align: center; -} - -.result-table-subsection { - margin-top: 4.25rem; -} - -.result-scale-figure { - width: min(100%, 1100px); - margin: 2.9rem auto 3.6rem; -} - -.result-scale-figure img { - display: block; - width: 100%; - height: auto; - margin: 0 auto; -} - -.result-scale-figure figcaption { - max-width: 900px; - margin: 1.3rem auto 0; - color: #5d6878; - font-size: 0.9rem; - line-height: 1.5; - text-align: left; -} - -.result-scale-figure figcaption strong { - color: #172033; - font-weight: 900; -} - -.result-table-heading { - margin: 0.25rem 0 0; - color: #172033; - font-size: 1.08rem; - font-weight: 800; - line-height: 1.25; - text-align: center; -} - -.result-table-wrap { - width: min(100%, 980px); - margin: 1.15rem auto 0; - overflow-x: auto; - border: 1px solid rgba(31, 58, 95, 0.12); - border-radius: 8px; - background: #fff; - box-shadow: 0 14px 34px rgba(31, 58, 95, 0.08); -} - -.result-comparison-table { - width: 100%; - min-width: 800px; - border-collapse: collapse; - color: #172033; - font-size: 1rem; - line-height: 1.35; -} - -.result-comparison-table thead { - border-bottom: 1px solid rgba(31, 58, 95, 0.14); - background: linear-gradient(180deg, #f7faf9, #f2f6f5); -} - -.result-comparison-table tbody { - background: #fff; -} - -.result-comparison-table th, -.result-comparison-table td { - padding: 0.78rem 0.95rem; - border-bottom: 1px solid rgba(31, 58, 95, 0.08); - text-align: left; - vertical-align: middle; -} - -.result-comparison-table tbody tr:last-child td { - border-bottom: 0; -} - -.result-comparison-table tbody tr:hover { - background: rgba(47, 143, 107, 0.045); -} - -.result-comparison-table th { - color: #344156; - font-size: 0.84rem; - font-weight: 800; - letter-spacing: 0.02em; - text-transform: uppercase; -} - -.result-comparison-table th:nth-child(4), -.result-comparison-table th:nth-child(5), -.result-comparison-table td:nth-child(4), -.result-comparison-table td:nth-child(5) { - text-align: right; - white-space: nowrap; -} - -.result-comparison-table code { - padding: 0.18rem 0.36rem; - border: 1px solid rgba(47, 143, 107, 0.12); - border-radius: 999px; - background: rgba(47, 143, 107, 0.07); - color: #172033; - font-family: 'Google Sans', 'Noto Sans', sans-serif; - font-size: 0.86rem; - font-weight: 800; -} - -.score-pill { - display: inline-block; - min-width: 8.9rem; - padding: 0.34rem 0.56rem; - border: 1px solid rgba(47, 143, 107, 0.16); - border-radius: 999px; - background: rgba(47, 143, 107, 0.09); - color: #1f7a5d; - font-weight: 900; - text-align: center; -} - -.result-table-divider td { - border-top: 2px solid rgba(31, 58, 95, 0.16); -} - -.result-table-note { - max-width: 920px; - margin: 0.75rem auto 0; - color: #6b7586; - font-size: 0.9rem; - line-height: 1.45; - text-align: center; -} - -.result-evidence-subsection { - margin-top: 4.6rem; -} - -.result-evidence-subsection + .result-evidence-subsection { - margin-top: 4.2rem; -} - -.result-evidence-figure { - margin: 0 auto; -} - -.result-evidence-figure-narrow { - width: min(100%, 800px); -} - -.result-evidence-figure-wide { - width: min(100%, 1040px); -} - -.result-evidence-figure img { - display: block; - width: 100%; - height: auto; - margin: 0 auto; - border-radius: 8px; - background: #fff; - box-shadow: 0 14px 34px rgba(31, 58, 95, 0.08); -} - -.result-evidence-figure figcaption { - max-width: 900px; - margin: 1rem auto 0; - color: #5d6878; - font-size: 0.92rem; - line-height: 1.5; - text-align: left; -} - -.overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: linear-gradient( - rgba(0, 0, 0, 0.45), - rgba(0, 0, 0, 0.35) 45%, - rgba(0, 0, 0, 0.55) - ); - z-index: 1; - transition: opacity 1.0s; -} - -.hero-body, -.hero-head, -.hero-foot { - z-index: 2; - transition: opacity 1.0s; -} - -@media screen and (max-width: 768px) { - .chord-hero .hero-body { - padding-top: 4rem; - padding-bottom: 3rem; - } - - section.section .title.has-text-centered { - font-size: clamp(1.65rem, 8vw, 1.85rem) !important; - } - - .chord-wordmark { - font-size: clamp(4.5rem, 20vw, 6rem); - margin-bottom: 1.25rem; - } - - .abstract-copy { - font-size: 1.04rem; - line-height: 1.68; - } - - .method-triangle { - display: block; - margin-top: 1.5rem; - } - - .method-panel { - margin-bottom: 1rem; - } - - .method-panel-human img, - .method-panel img { - aspect-ratio: 16 / 10; - } - - .method-callout { - position: static; - display: block; - width: auto; - margin: 0; - border-radius: 0 0 8px 8px; - opacity: 1; - transform: none; - box-shadow: none; - pointer-events: auto; - } - - .method-callout-image { - margin: 0.65rem 0 0.75rem; - } - - .method-hotspot-card { - width: min(260px, 72vw); - } - - .result-video-grid-four, - .result-video-grid-six { - grid-template-columns: 1fr; - } - - .method-panel-interactive:hover, - .method-panel-interactive:focus { - transform: none; - } -} diff --git a/docs/chord/support.js b/docs/chord/support.js new file mode 100644 index 00000000..21018fc8 --- /dev/null +++ b/docs/chord/support.js @@ -0,0 +1,1603 @@ +// GENERATED from dc-runtime/src/*.ts — do not edit. Rebuild with `cd dc-runtime && bun run build`. +"use strict"; +(() => { + var __defProp = Object.defineProperty; + var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; + var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); + + // src/react.ts + function getReact() { + const R = window.React; + if (!R) throw new Error("dc-runtime: window.React is not available yet"); + return R; + } + function getReactDOM() { + const RD = window.ReactDOM; + if (!RD) throw new Error("dc-runtime: window.ReactDOM is not available yet"); + return RD; + } + var h = ((...args) => getReact().createElement( + ...args + )); + + // src/parse.ts + function parseDcDocument(doc) { + const dc = doc.querySelector("x-dc"); + if (!dc) return null; + const scriptEl = doc.querySelector("script[data-dc-script]"); + const { props, preview } = parseDataProps( + scriptEl?.getAttribute("data-props") ?? null + ); + return { + template: dc.innerHTML, + js: scriptEl ? scriptEl.textContent || "" : "", + props, + preview + }; + } + function parseDcText(src) { + const openMatch = /]*)?>/.exec(src); + if (!openMatch) return null; + const close = src.lastIndexOf(""); + if (close === -1 || close < openMatch.index) return null; + const template = src.slice(openMatch.index + openMatch[0].length, close); + const doc = new DOMParser().parseFromString(src, "text/html"); + const scriptEl = doc.querySelector("script[data-dc-script]"); + const { props, preview } = parseDataProps( + scriptEl?.getAttribute("data-props") ?? null + ); + return { + template, + js: scriptEl ? scriptEl.textContent || "" : "", + props, + preview + }; + } + function parseDataProps(raw) { + if (!raw) return { props: null, preview: null }; + let parsed; + try { + parsed = JSON.parse(raw); + } catch { + return { props: null, preview: null }; + } + if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) { + return { props: null, preview: null }; + } + const obj = parsed; + const preview = obj.$preview && typeof obj.$preview === "object" ? obj.$preview : null; + const rest = {}; + for (const k of Object.keys(obj)) { + if (k[0] !== "$") rest[k] = obj[k]; + } + return { props: Object.keys(rest).length ? rest : null, preview }; + } + function dcNameFromPath(pathname) { + let p = pathname || ""; + try { + p = decodeURIComponent(p); + } catch { + } + const base = p.split("/").pop() || "Root"; + return base.replace(/\.dc\.html$/, "").replace(/\.html?$/, "") || "Root"; + } + + // src/boot.ts + var BASE_CSS = ` + .sc-placeholder{background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5); + border-radius:2px;box-sizing:border-box;overflow:hidden} + @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}} + html.sc-dc-streaming .sc-placeholder, + html.sc-dc-streaming .sc-interp.sc-missing{position:relative; + background:color-mix(in srgb,currentColor 5%,transparent); + border-color:transparent} + html.sc-dc-streaming .sc-placeholder::before, + html.sc-dc-streaming .sc-interp.sc-missing::before{content:''; + position:absolute;inset:0;pointer-events:none; + background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%); + background-size:400% 100%;animation:sc-shine 1.4s ease infinite} + html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before, + html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none; + background:color-mix(in srgb,currentColor 8%,transparent)} + .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace; + color:rgba(0,0,0,.7);word-break:break-word} + .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden; + vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5); + border-radius:2px;box-sizing:border-box;color:transparent; + user-select:none} + .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em; + color:rgba(0,0,0,.5);background:rgba(0,0,0,.05);border-radius:3px; + padding:0 3px} + .sc-host.sc-has-error{position:relative} + .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch; + padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace; + border-radius:4px;white-space:pre-wrap;pointer-events:none} + /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts \u2014 keep both + in sync until dc-runtime regains a build step. */ + @media print { + @page { margin: 0.5cm; } + figure, table { break-inside: avoid; } + #dc-root, #dc-root > .sc-host { height: auto; } + *, *::before, *::after { + print-color-adjust: exact; -webkit-print-color-adjust: exact; + backdrop-filter: none !important; -webkit-backdrop-filter: none !important; + animation-delay: -99s !important; animation-duration: .001s !important; + animation-iteration-count: 1 !important; animation-fill-mode: both !important; + animation-play-state: running !important; transition-duration: 0s !important; + } + } + `; + var FULL_PAGE_CSS = "html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}"; + function rootNameForDocument(doc, loc) { + let bootPath = loc.pathname || ""; + if (!/\.dc\.html?$/i.test(safeDecode(bootPath))) { + try { + bootPath = new URL(doc.baseURI || "/").pathname; + } catch { + } + } + return dcNameFromPath(bootPath); + } + function safeDecode(s) { + try { + return decodeURIComponent(s); + } catch { + return s; + } + } + function boot(runtime, doc = document) { + const parsed = parseDcDocument(doc); + if (!parsed) return null; + const React = getReact(); + const rootName = rootNameForDocument(doc, location); + runtime.markFetched(rootName); + runtime.setRootName(rootName); + runtime.adoptParsed(rootName, parsed); + fetch(location.href).then((res) => res.ok ? res.text() : "").then((t) => { + const raw = t ? parseDcText(t) : null; + if (raw?.template) runtime.updateHtml(rootName, raw.template); + }).catch(() => { + }); + const dc = doc.querySelector("x-dc"); + const hostEl = doc.createElement("div"); + hostEl.id = "dc-root"; + dc.replaceWith(hostEl); + if (!parsed.preview) { + const s = doc.createElement("style"); + s.textContent = FULL_PAGE_CSS; + doc.head.appendChild(s); + } + const Root = runtime.getDC(rootName); + const entry = runtime.registry.get(rootName); + function StandaloneRoot() { + const [, setTick] = React.useState(0); + React.useEffect(() => { + const sub = () => setTick((n) => n + 1); + entry.subs.add(sub); + return () => { + entry.subs.delete(sub); + }; + }, []); + const defaults = React.useMemo(() => { + const d = {}; + for (const k in entry.propsMeta || {}) { + const v = entry.propsMeta?.[k]?.default; + if (v !== void 0) d[k] = v; + } + return d; + }, [entry.propsMeta]); + return h(Root, { ...defaults, ...entry.propOverrides || {} }); + } + const ReactDOM = getReactDOM(); + if (ReactDOM.createRoot) + ReactDOM.createRoot(hostEl).render(h(StandaloneRoot)); + else ReactDOM.render(h(StandaloneRoot), hostEl); + return rootName; + } + + // src/expr.ts + var IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*/; + var NUMBER_RE = /^-?\d+(\.\d+)?$/; + function resolve(vals, src) { + const expr = String(src).trim(); + if (!expr) return void 0; + if (expr[0] === "(" && expr[expr.length - 1] === ")" && parensWrapWhole(expr)) { + return resolve(vals, expr.slice(1, -1)); + } + const eq = findTopLevelEquality(expr); + if (eq) { + const lv = resolve(vals, expr.slice(0, eq.index)); + const rv = resolve(vals, expr.slice(eq.index + eq.op.length)); + switch (eq.op) { + case "===": + return lv === rv; + case "!==": + return lv !== rv; + case "==": + return lv == rv; + default: + return lv != rv; + } + } + if (expr[0] === "!") return !resolve(vals, expr.slice(1)); + if (expr === "true") return true; + if (expr === "false") return false; + if (expr === "null") return null; + if (expr === "undefined") return void 0; + if (NUMBER_RE.test(expr)) return Number(expr); + if (expr.length >= 2 && (expr[0] === '"' || expr[0] === "'") && expr[expr.length - 1] === expr[0]) { + return expr.slice(1, -1); + } + return resolvePath(vals, expr); + } + function parensWrapWhole(expr) { + let depth = 0; + for (let i = 0; i < expr.length - 1; i++) { + if (expr[i] === "(") depth++; + else if (expr[i] === ")") { + depth--; + if (depth === 0) return false; + } + } + return true; + } + function findTopLevelEquality(expr) { + let depth = 0; + for (let i = 0; i < expr.length; i++) { + const c = expr[i]; + if (c === "[" || c === "(") depth++; + else if (c === "]" || c === ")") depth--; + else if (depth === 0 && (c === "=" || c === "!") && expr[i + 1] === "=") { + if (i > 0 && (expr[i - 1] === "=" || expr[i - 1] === "!")) continue; + if (!expr.slice(0, i).trim()) continue; + const op = expr[i + 2] === "=" ? c + "==" : c + "="; + return { index: i, op }; + } + } + return null; + } + function resolvePath(vals, expr) { + const head = expr.match(IDENT_RE); + if (!head) return void 0; + let cur = vals == null ? void 0 : vals[head[0]]; + let i = head[0].length; + while (i < expr.length) { + if (expr[i] === ".") { + const m = expr.slice(i + 1).match(IDENT_RE) || expr.slice(i + 1).match(/^\d+/); + if (!m) return void 0; + cur = cur == null ? void 0 : cur[m[0]]; + i += 1 + m[0].length; + } else if (expr[i] === "[") { + let depth = 1; + let j = i + 1; + while (j < expr.length && depth > 0) { + if (expr[j] === "[") depth++; + else if (expr[j] === "]") { + depth--; + if (depth === 0) break; + } + j++; + } + if (depth !== 0) return void 0; + const key = resolve(vals, expr.slice(i + 1, j)); + cur = cur == null ? void 0 : cur[key]; + i = j + 1; + } else { + return void 0; + } + } + return cur; + } + + // src/encode.ts + var CAMEL_ATTR = "sc-camel-"; + var RAW_WRAP = { + select: "sc-raw-select", + table: "sc-raw-table", + tbody: "sc-raw-tbody", + thead: "sc-raw-thead", + tfoot: "sc-raw-tfoot", + tr: "sc-raw-tr", + td: "sc-raw-td", + th: "sc-raw-th", + caption: "sc-raw-caption" + }; + var RAW_UNWRAP = Object.fromEntries( + Object.entries(RAW_WRAP).map(([k, v]) => [v, k]) + ); + var EVENT_MAP = { + onclick: "onClick", + onchange: "onChange", + oninput: "onInput", + onsubmit: "onSubmit", + onkeydown: "onKeyDown", + onkeyup: "onKeyUp", + onkeypress: "onKeyPress", + onmousedown: "onMouseDown", + onmouseup: "onMouseUp", + onmouseenter: "onMouseEnter", + onmouseleave: "onMouseLeave", + onfocus: "onFocus", + onblur: "onBlur", + ondoubleclick: "onDoubleClick", + oncontextmenu: "onContextMenu" + }; + var ATTRS = `(?:[^>"']|"[^"]*"|'[^']*')*`; + var IMPORT_SELF_CLOSE_RE = new RegExp( + "<(x-import|dc-import)(" + ATTRS + ")/>", + "gi" + ); + var CAMEL_ATTR_RE = /(\s)([a-z]+[A-Z][A-Za-z0-9]*)(\s*=)/g; + function encodeCase(html) { + html = html.replace( + IMPORT_SELF_CLOSE_RE, + (_, t, a) => "<" + t + a + ">" + ); + html = html.replace(/)/gi, "/gi, ""); + html = html.replace( + CAMEL_ATTR_RE, + (_, sp, name, eq) => sp + CAMEL_ATTR + name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + eq + ); + for (const [real, alias] of Object.entries(RAW_WRAP)) { + html = html.replace( + new RegExp("(])", "gi"), + "$1" + alias + ); + } + return html; + } + function kebabToCamel(s) { + return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); + } + function cssToObj(css) { + const o = {}; + for (const decl of css.split(";")) { + const i = decl.indexOf(":"); + if (i < 0) continue; + const prop = decl.slice(0, i).trim(); + o[prop.startsWith("--") ? prop : kebabToCamel(prop)] = decl.slice(i + 1).trim(); + } + return o; + } + function compileAttr(raw) { + const whole = raw.match(/^\s*\{\{([\s\S]+?)\}\}\s*$/); + if (whole) { + const path = whole[1]; + return (vals) => resolve(vals, path); + } + if (raw.includes("{{")) { + const parts = raw.split(/\{\{([\s\S]+?)\}\}/g); + return (vals) => parts.map((s, i) => i & 1 ? resolve(vals, s) ?? "" : s).join(""); + } + return () => raw; + } + + // src/compile.ts + function collectProps(node, kind, host) { + const propGetters = []; + const pseudoClasses = []; + let hintSize = null; + for (const { name, value } of [...node.attributes]) { + if (name === "sc-name" || name === "data-dc-tpl") continue; + let key = name; + if (key.startsWith(CAMEL_ATTR)) + key = kebabToCamel(key.slice(CAMEL_ATTR.length)); + if (key === "hint-size") { + hintSize = value; + continue; + } + if (key.startsWith("style-")) { + pseudoClasses.push(host.pseudoClass(key.slice(6), value)); + continue; + } + if (kind !== "dom") { + if (key.includes("-") && !(kind === "x-import" && (key.startsWith("aria-") || key.startsWith("data-")))) + key = kebabToCamel(key); + } else { + if (key === "class") key = "className"; + else if (key === "for") key = "htmlFor"; + else if (key.startsWith("on")) + key = EVENT_MAP[key] || "on" + key[2].toUpperCase() + key.slice(3); + } + propGetters.push([key, compileAttr(value)]); + } + return { propGetters, pseudoClasses, hintSize }; + } + var HOST_STYLE_PROPS = /* @__PURE__ */ new Set([ + "position", + "left", + "right", + "top", + "bottom", + "inset", + "width", + "height", + "z-index", + "transform" + ]); + function hostPositionStyle(style) { + const all = typeof style === "string" ? cssToObj(style) : style != null && typeof style === "object" ? style : null; + if (!all) return void 0; + const out = {}; + for (const [k, v] of Object.entries(all)) { + const kebab = k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()); + if (HOST_STYLE_PROPS.has(kebab)) out[k] = v; + } + return Object.keys(out).length ? out : void 0; + } + function compileTemplate(html, host) { + const tpl = document.createElement("template"); + //! nosemgrep: direct-inner-html-assignment + tpl.innerHTML = encodeCase(html); + let tplN = 0; + (function stamp(node) { + if (node.nodeType === Node.ELEMENT_NODE) { + node.setAttribute("data-dc-tpl", String(tplN++)); + } + for (const c of node.childNodes) stamp(c); + })(tpl.content); + const builders = walkChildren(tpl.content, host); + const render = ((vals, ctx) => builders.map((b, i) => b(vals || {}, ctx, i))); + render.__annotated = tpl.innerHTML; + return render; + } + function walkChildren(node, host) { + return [...node.childNodes].map((c) => walk(c, host)).filter((b) => b != null); + } + function walk(node, host) { + if (node.nodeType === Node.TEXT_NODE) return walkText(node); + if (node.nodeType !== Node.ELEMENT_NODE) return null; + const el = node; + const tag = el.tagName.toLowerCase(); + if (tag === "sc-for") return walkFor(el, host); + if (tag === "sc-if") return walkIf(el, host); + if (tag === "x-import") return walkXImport(el, host); + if (tag === "sc-helmet") return host.helmet(el); + if (tag === "dc-import") return walkComponent(el, host); + return walkElement(el, host); + } + var warnedHoles = /* @__PURE__ */ new Set(); + function warnUnresolved(ctx, what) { + const key = (ctx?.__name || "?") + "\0" + what; + if (warnedHoles.has(key)) return; + warnedHoles.add(key); + console.warn("[dc-runtime] " + (ctx?.__name || "template") + ": " + what); + } + function walkText(node) { + const txt = node.nodeValue ?? ""; + if (!txt.includes("{{")) { + if (!txt.trim() && !txt.includes(" ")) return null; + return () => txt; + } + const parts = txt.split(/\{\{([\s\S]+?)\}\}/g); + return (vals, ctx, key) => h( + getReact().Fragment, + { key }, + ...parts.map((p, i) => { + if (!(i & 1)) return p; + const v = resolve(vals, p); + if (v === void 0) { + if (!ctx?.__streamingNow) { + if (document.body?.hasAttribute("data-dc-editor-on")) { + return h( + "span", + { key: i, className: "sc-interp sc-unresolved" }, + "{{ " + p.trim() + " }}" + ); + } + warnUnresolved( + ctx, + "{{ " + p.trim() + " }} never resolved \u2014 rendered as empty" + ); + return null; + } + return h( + "span", + { key: i, className: "sc-interp sc-missing" }, + p.trim() + ); + } + if (getReact().isValidElement(v) || Array.isArray(v)) { + return h(getReact().Fragment, { key: i }, v); + } + if (v === null || typeof v === "boolean") return null; + return h("span", { key: i, className: "sc-interp" }, String(v)); + }) + ); + } + function walkFor(el, host) { + const listGet = compileAttr(el.getAttribute("list") || ""); + const asName = el.getAttribute("as") || "item"; + const hintN = parseInt(el.getAttribute("hint-placeholder-count") || "0", 10); + const kids = walkChildren(el, host); + const listSrc = el.getAttribute("list") || ""; + return (vals, ctx, key) => { + let list = listGet(vals); + if (!Array.isArray(list)) { + if (!ctx?.__streamingNow) { + if (list !== void 0 && list !== null) { + warnUnresolved( + ctx, + 'sc-for list="' + listSrc + '" is not an array (' + typeof list + ")" + ); + } + list = []; + } else { + list = hintN > 0 ? Array(hintN).fill(void 0) : []; + } + } + return h( + getReact().Fragment, + { key }, + list.map((item, i) => { + const sub = { ...vals, [asName]: item, $index: i }; + return h( + getReact().Fragment, + { key: i }, + kids.map((b, j) => b(sub, ctx, j)) + ); + }) + ); + }; + } + function walkIf(el, host) { + const valGet = compileAttr(el.getAttribute("value") || ""); + const hintRaw = el.getAttribute("hint-placeholder-val"); + const hintGet = hintRaw != null ? compileAttr(hintRaw) : null; + const kids = walkChildren(el, host); + return (vals, ctx, key) => { + let v = valGet(vals); + if (v === void 0 && hintGet && ctx?.__streamingNow) v = hintGet(vals); + return v ? h( + getReact().Fragment, + { key }, + kids.map((b, j) => b(vals, ctx, j)) + ) : null; + }; + } + function walkComponent(el, host) { + const name = el.getAttribute("name") || el.getAttribute("component") || ""; + el.removeAttribute("name"); + el.removeAttribute("component"); + const tplId = el.getAttribute("data-dc-tpl"); + const styleRaw = el.getAttribute("style"); + el.removeAttribute("style"); + const styleGet = styleRaw != null ? compileAttr(styleRaw) : null; + const { propGetters, hintSize } = collectProps(el, "dc-import", host); + const kids = walkChildren(el, host); + return (vals, ctx, key) => { + const props = { + key, + __hintSize: hintSize, + __tplId: tplId, + __hostStyle: styleGet ? hostPositionStyle(styleGet(vals)) : void 0 + }; + for (const [k, g] of propGetters) { + const v = g(vals); + if (k === "dcProps") { + if (v && typeof v === "object") Object.assign(props, v); + continue; + } + props[k] = v; + } + if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j)); + return h(host.component(name), props); + }; + } + function walkXImport(el, host) { + const globalNameGet = compileAttr( + el.getAttribute("component-from-global-scope") || "" + ); + const exportNameGet = compileAttr( + el.getAttribute("component") || el.getAttribute("name") || "" + ); + const fromRaw = el.getAttribute("from") || el.getAttribute("src") || el.getAttribute("import") || ""; + const urls = fromRaw.trim() ? fromRaw.trim().split(/\s+/) : []; + const url = urls.length ? urls[urls.length - 1] : ""; + const kindOf = (u) => /\.(jsx|tsx)(\?|#|$)/i.test(u) ? "jsx" : "js"; + const tplId = el.getAttribute("data-dc-tpl"); + const styleRaw = el.getAttribute("style"); + el.removeAttribute("style"); + const styleGet = styleRaw != null ? compileAttr(styleRaw) : null; + const wrap = tplId != null || styleGet != null; + const { propGetters, hintSize } = collectProps(el, "x-import", host); + const hasContent = el.children.length > 0 || !!(el.textContent || "").trim(); + const kids = hasContent ? walkChildren(el, host) : []; + const urlBindable = fromRaw.includes("{{"); + if (urls.length && !urlBindable) { + let prev; + for (const u of urls) prev = host.loadExternal(kindOf(u), u, prev); + } + const evalName = (g, vals) => { + const v = g(vals); + const s = v == null ? "" : String(v); + return s.includes("{{") ? "" : s; + }; + return (vals, ctx, key) => { + const globalName = evalName(globalNameGet, vals); + const name = globalName || evalName(exportNameGet, vals); + const C = !name || urlBindable ? null : globalName ? host.resolveExternalGlobal(url, globalName) : host.resolveExternal(url, name); + const hostStyle = styleGet ? hostPositionStyle(styleGet(vals)) : void 0; + const wrapper = wrap ? { + key, + className: "sc-host-x", + "data-dc-tpl": tplId, + style: hostStyle || { display: "contents" } + } : null; + if (!C) { + const error = urlBindable ? "x-import `from` cannot contain {{ \u2026 }} \u2014 module URLs are resolved at parse time; use a literal URL" : host.resolveExternalError(url, name); + const ph = host.placeholder({ + key: wrapper ? void 0 : key, + name, + hintSize, + error + }); + return wrapper ? h("div", wrapper, ph) : ph; + } + const props = wrapper ? {} : { key }; + let unresolvedHole = false; + for (const [k, g] of propGetters) { + if (k === "component" || k === "componentFromGlobalScope" || k === "from") { + continue; + } + const v = g(vals); + if (v === void 0) unresolvedHole = true; + if (k === "dcProps") { + if (v && typeof v === "object") Object.assign(props, v); + continue; + } + props[k] = v; + } + if (unresolvedHole && ctx?.__htmlStreamingNow) { + const ph = host.placeholder({ + key: wrapper ? void 0 : key, + name, + hintSize, + error: null + }); + return wrapper ? h("div", wrapper, ph) : ph; + } + if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j)); + return wrapper ? h("div", wrapper, h(C, props)) : h(C, props); + }; + } + function walkElement(el, host) { + const realTag = RAW_UNWRAP[el.localName] || el.localName; + const tplId = el.getAttribute("data-dc-tpl"); + const { propGetters, pseudoClasses } = collectProps(el, "dom", host); + const kids = walkChildren(el, host); + return (vals, ctx, key) => { + const props = { key, "data-dc-tpl": tplId }; + for (const [k, g] of propGetters) { + let v = g(vals); + if (k === "style" && typeof v === "string") v = cssToObj(v); + if ((k === "value" || k === "checked") && v === void 0) { + v = k === "checked" ? false : ""; + } + props[k] = v; + } + if (pseudoClasses.length) { + props.className = [props.className, ...pseudoClasses].filter(Boolean).join(" "); + } + return h(realTag, props, ...kids.map((b, j) => b(vals, ctx, j))); + }; + } + + // src/logic.ts + var StreamableLogic = class { + constructor(props) { + __publicField(this, "props"); + __publicField(this, "state", {}); + /** Back-pointer to the wrapper component, installed after construction. */ + __publicField(this, "__host"); + this.props = props || {}; + } + setState(update, cb) { + this.__host && this.__host.__setLogicState(update, cb); + } + forceUpdate() { + this.__host && this.__host.forceUpdate(); + } + componentDidMount() { + } + componentDidUpdate(_prevProps) { + } + componentWillUnmount() { + } + /** The flat object the template renders against (merged over props). */ + renderVals() { + return {}; + } + }; + function evalDcLogic(src) { + //! nosemgrep: eval-and-function-constructor + const fn = new Function( + "DCLogic", + "StreamableLogic", + "React", + src + '\n;return (typeof Component!=="undefined"&&Component)||undefined;' + ); + return fn(StreamableLogic, StreamableLogic, getReact()); + } + + // src/component.ts + function shallowEqual(a, b) { + if (!b) return false; + const ak = Object.keys(a).filter((k) => k !== "children"); + const bk = Object.keys(b).filter((k) => k !== "children"); + if (ak.length !== bk.length) return false; + for (const k of ak) if (a[k] !== b[k]) return false; + return true; + } + function Placeholder({ + name, + hintSize, + streaming, + error + }) { + const [w, hgt] = (hintSize || "100%,60px").split(","); + return h( + "div", + { + className: "sc-placeholder" + (streaming ? " sc-streaming" : ""), + style: { width: w.trim(), height: hgt && hgt.trim() }, + title: name + }, + error ? h( + "div", + { className: "sc-placeholder-error" }, + (name ? name + ": " : "") + error + ) : null + ); + } + function hintToMin(hint) { + if (!hint) return void 0; + const [w, hgt] = hint.split(","); + return { minWidth: w.trim(), minHeight: hgt && hgt.trim() }; + } + function createComponentFactory(registry, ensureFetched) { + const React = getReact(); + const AncestorContext = React.createContext([]); + class StreamableComponent extends React.Component { + constructor(props) { + super(props); + __publicField(this, "__name"); + __publicField(this, "__sub"); + __publicField(this, "__needsDidMount", false); + /** Snapshot of the registry's streaming flags taken at render time — + * builders read it off the RenderCtx (this) to pick placeholder vs + * render-nothing for unresolved values. */ + __publicField(this, "__streamingNow", false); + __publicField(this, "__htmlStreamingNow", false); + /** When a construct throws, remember the (class, registry.ver, props) + * triple so render-time reconcile doesn't re-attempt it on every parent + * re-render. A registry bump (new class, template, external module + * resolving via bumpAll) changes `ver` and breaks the memo so an + * env-dependent constructor can self-heal. */ + __publicField(this, "__failedLogic", null); + __publicField(this, "__failedUserProps", null); + __publicField(this, "__failedVer", -1); + /** Per-instance constructor error — kept here (not on the registry entry) + * so one instance's successful construct can't hide a sibling's failure, + * and a construct can never wipe an eval error `updateJs` recorded on + * `r.logicError`. */ + __publicField(this, "__ctorError", null); + __publicField(this, "logic"); + this.__name = props.__name; + this.state = { __v: 0, __err: null }; + this.__sub = () => { + if (this.state.__err) this.setState({ __err: null }); + this.forceUpdate(); + }; + this.__makeLogic(registry.get(this.__name).Logic, null); + ensureFetched(this.__name); + } + /** Error-boundary hook: a render crash anywhere in this DC's subtree + * (its own template, an x-import'd component, a child DC without its + * own deeper boundary) lands here instead of unmounting the page. */ + static getDerivedStateFromError(e) { + return { __err: e instanceof Error && e.message ? e.message : String(e) }; + } + componentDidCatch(e, info) { + console.error( + "[dc-runtime] render error in <" + this.__name + ">:", + e, + info?.componentStack || "" + ); + } + /** Instantiate the logic class (or the no-op base) and adopt `prevState` + * over its initial state — used both at mount and on hot-swap. */ + __makeLogic(Logic, prevState) { + const L = Logic || StreamableLogic; + try { + this.logic = new L(this.__userProps()); + this.__failedLogic = null; + this.__failedUserProps = null; + this.__ctorError = null; + } catch (e) { + console.error(e); + this.__failedLogic = Logic; + this.__failedUserProps = this.__userProps(); + this.__failedVer = registry.get(this.__name).ver; + this.__ctorError = this.__name + ": " + (e instanceof Error && e.message ? e.message : String(e)); + this.logic = new StreamableLogic( + this.__userProps() + ); + } + this.logic.__host = this; + if (prevState) + this.logic.state = { ...this.logic.state || {}, ...prevState }; + } + /** The props the author's logic + template see — internal __-prefixed + * wiring stripped. */ + __userProps() { + const { __name, __hintSize, __tplId, __hostStyle, ...rest } = this.props; + return rest; + } + __setLogicState(update, cb) { + const prev = this.logic.state; + const patch = typeof update === "function" ? update(prev) : update; + this.logic.state = { ...prev, ...patch }; + this.setState((s) => ({ __v: s.__v + 1 }), cb); + } + /** Swap the logic instance when the registry's Logic class changed + * (streaming completion, hot reload). State carries over; didMount + * re-fires after the swap commits so refs exist. */ + __reconcileLogic() { + const r = registry.get(this.__name); + const Next = r.Logic; + const Cur = this.logic.constructor; + if (Next === Cur || !Next && Cur === StreamableLogic || Next === this.__failedLogic && r.ver === this.__failedVer && shallowEqual(this.__userProps(), this.__failedUserProps)) { + return; + } + if (!this.__needsDidMount) { + try { + this.logic.componentWillUnmount(); + } catch (e) { + console.error(e); + } + } + this.__makeLogic(Next, this.logic.state); + this.__needsDidMount = true; + } + componentDidMount() { + registry.get(this.__name).subs.add(this.__sub); + try { + this.logic.componentDidMount(); + } catch (e) { + console.error(e); + } + } + componentDidUpdate(prevProps) { + this.logic.props = this.__userProps(); + if (this.__needsDidMount) { + if (this.state.__err || !registry.get(this.__name).tpl) return; + this.__needsDidMount = false; + try { + this.logic.componentDidMount(); + } catch (e) { + console.error(e); + } + } else { + try { + this.logic.componentDidUpdate(prevProps); + } catch (e) { + console.error(e); + } + } + } + componentWillUnmount() { + registry.get(this.__name).subs.delete(this.__sub); + if (!this.__needsDidMount) { + try { + this.logic.componentWillUnmount(); + } catch (e) { + console.error(e); + } + } + } + render() { + const r = registry.get(this.__name); + const cls = "sc-host" + (r.htmlStreaming ? " sc-streaming-html" : "") + (r.jsStreaming ? " sc-streaming-js" : ""); + const hintStyle = r.htmlStreaming ? hintToMin(this.props.__hintSize) : void 0; + const hostStyle = this.props.__hostStyle || hintStyle ? { ...hintStyle || {}, ...this.props.__hostStyle || {} } : void 0; + const hostBase = { + className: cls, + style: hostStyle, + "data-sc-name": this.__name, + "data-dc-tpl": this.props.__tplId + }; + const chain = Array.isArray(this.context) ? this.context : []; + if (chain.includes(this.__name)) { + const cycle = [ + ...chain.slice(chain.indexOf(this.__name)), + this.__name + ].join(" \u2192 "); + return h( + "div", + { ...hostBase, className: cls + " sc-has-error" }, + h(Placeholder, { + name: this.__name, + hintSize: this.props.__hintSize, + error: "circular import: " + cycle + }) + ); + } + if (this.state.__err) { + return h( + "div", + { ...hostBase, className: cls + " sc-has-error" }, + h( + "div", + { className: "sc-logic-error", "data-omelette-chrome": "" }, + this.__name + ": " + this.state.__err + ), + h(Placeholder, { + name: this.__name, + hintSize: this.props.__hintSize, + error: this.state.__err + }) + ); + } + this.__reconcileLogic(); + if (!r.tpl) { + return h( + "div", + hostBase, + h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize }) + ); + } + const userProps = this.__userProps(); + this.logic.props = userProps; + let vals = userProps; + let renderErr = r.logicError || this.__ctorError; + try { + vals = { ...userProps, ...this.logic.renderVals() || {} }; + } catch (e) { + console.error(e); + renderErr = this.__name + ".renderVals(): " + (e instanceof Error && e.message ? e.message : String(e)); + } + this.__streamingNow = !!(r.htmlStreaming || r.jsStreaming); + this.__htmlStreamingNow = !!r.htmlStreaming; + return h( + "div", + { ...hostBase, className: cls + (renderErr ? " sc-has-error" : "") }, + renderErr && h( + "div", + { className: "sc-logic-error", "data-omelette-chrome": "" }, + renderErr + ), + h( + AncestorContext.Provider, + { value: [...chain, this.__name] }, + r.tpl(vals, this) + ) + ); + } + } + __publicField(StreamableComponent, "contextType", AncestorContext); + const named = /* @__PURE__ */ new Map(); + function getDC(name) { + const hit = named.get(name); + if (hit) return hit; + function Dispatcher(p) { + const [, setTick] = React.useState(0); + React.useEffect(() => { + const sub = () => setTick((n) => n + 1); + registry.get(name).subs.add(sub); + return () => { + registry.get(name).subs.delete(sub); + }; + }, []); + ensureFetched(name); + return h(StreamableComponent, { ...p, __name: name }); + } + Dispatcher.displayName = name; + named.set(name, Dispatcher); + return Dispatcher; + } + return { + getDC, + StreamableComponent + }; + } + + // src/external.ts + var isCustomElementName = (n) => !n.includes(".") && n.includes("-"); + function isRenderableType(g) { + if (typeof g === "function") return !isElementClass(g); + return typeof g === "object" && g !== null && typeof g.$$typeof === "symbol"; + } + function resolveDottedPath(root, name) { + let cur = root; + for (const seg of name.split(".")) { + if (cur == null) return void 0; + cur = cur[seg]; + } + return cur; + } + var BABEL_URL = "https://unpkg.com/@babel/standalone@7.26.4/babel.min.js"; + var GLOBAL_POLL_INTERVAL_MS = 50; + var GLOBAL_POLL_TIMEOUT_MS = 3e4; + function createExternalModules(onResolved) { + const cache = /* @__PURE__ */ new Map(); + let babelLoading = null; + const reportedMissing = /* @__PURE__ */ new Map(); + const polling = /* @__PURE__ */ new Set(); + function ensureBabel() { + if (window.Babel) return Promise.resolve(); + if (babelLoading) return babelLoading; + babelLoading = new Promise((res, rej) => { + const s = document.createElement("script"); + s.src = BABEL_URL; + s.crossOrigin = "anonymous"; + s.onload = () => res(); + s.onerror = rej; + document.head.appendChild(s); + }); + return babelLoading; + } + const pending = /* @__PURE__ */ new Map(); + function load(kind, url, after) { + const existing = pending.get(url); + if (existing) return existing; + cache.set(url, null); + console.info("[dc-runtime] x-import: loading", url, "(" + kind + ")"); + const ready = Promise.all([ + kind === "jsx" ? ensureBabel() : Promise.resolve(), + after ?? Promise.resolve() + ]); + const p = ready.then(() => fetch(url)).then((r) => { + if (!r.ok) throw new Error("HTTP " + r.status); + return r.text(); + }).then((src) => { + const code = kind === "jsx" ? window.Babel.transform(src, { + filename: url, + presets: ["react", "typescript"] + }).code : src; + const module = { exports: {} }; + const before = new Set(Object.keys(window)); + //! nosemgrep: eval-and-function-constructor + new Function("React", "module", "exports", "require", code)( + getReact(), + module, + module.exports, + () => ({}) + ); + const globals = {}; + for (const k of Object.keys(window)) { + if (!before.has(k) && typeof window[k] === "function") { + globals[k] = window[k]; + } + } + cache.set(url, { mod: module.exports, globals }); + console.info( + "[dc-runtime] x-import: loaded", + url, + "\u2014 exports:", + Object.keys(module.exports), + "window globals:", + Object.keys(globals) + ); + onResolved(); + }).catch((e) => { + cache.set(url, { + mod: {}, + globals: {}, + error: "failed to load: " + (e instanceof Error && e.message ? e.message : String(e)) + }); + console.error( + "[dc-runtime] x-import: FAILED to load", + url, + "(" + kind + ")", + e + ); + onResolved(); + }); + pending.set(url, p); + return p; + } + function resolve2(url, name) { + const entry = cache.get(url); + if (!entry) return null; + const { mod, globals } = entry; + const C = mod && mod[name] || globals && globals[name] || typeof window !== "undefined" && window[name] || mod && mod.default; + if (typeof C === "function") return C; + const key = url + "\0" + name; + if (!reportedMissing.has(key)) { + reportedMissing.set( + key, + entry.error || 'no export named "' + name + '" (has: ' + Object.keys(mod).join(", ") + ")" + ); + console.error( + "[dc-runtime] x-import: module", + url, + "loaded but has no component named", + JSON.stringify(name), + "\u2014 available exports:", + Object.keys(mod), + "window globals:", + Object.keys(globals), + ". The module must `module.exports = {" + name + "}` or set `window." + name + "`." + ); + } + return null; + } + function waitForGlobal(name) { + if (polling.has(name)) return; + polling.add(name); + const started = Date.now(); + const isCE = isCustomElementName(name); + const tick = () => { + const found = isCE ? customElements.get(name) : isRenderableType(resolveDottedPath(window, name)); + if (found) { + polling.delete(name); + onResolved(); + return; + } + if (Date.now() - started >= GLOBAL_POLL_TIMEOUT_MS) { + console.warn( + "[dc-runtime] x-import: global", + JSON.stringify(name), + "never appeared on window after " + GLOBAL_POLL_TIMEOUT_MS + "ms" + ); + return; + } + setTimeout(tick, GLOBAL_POLL_INTERVAL_MS); + }; + setTimeout(tick, GLOBAL_POLL_INTERVAL_MS); + } + function resolveGlobal(url, name) { + const isCE = isCustomElementName(name); + if (!url) { + if (isCE) { + if (customElements.get(name)) return name; + waitForGlobal(name); + return null; + } + const g2 = resolveDottedPath(window, name); + if (isRenderableType(g2)) return g2; + waitForGlobal(name); + return null; + } + const entry = cache.get(url); + if (!entry) return null; + if (isCE && customElements.get(name)) return name; + const g = entry.globals[name] ?? resolveDottedPath(window, name); + if (isRenderableType(g)) return g; + if (name.includes(".")) return null; + const key = url + "\0global\0" + name; + if (!reportedMissing.has(key)) { + reportedMissing.set(key, null); + if (isCE && !customElements.get(name)) { + console.warn( + "[dc-runtime] x-import:", + url, + "loaded but no custom element", + JSON.stringify(name), + "is registered and window." + name + " is not a function \u2014 rendering <" + name + "> as an unknown element." + ); + } + } + return name; + } + function getError(url, name) { + const entry = cache.get(url); + if (entry?.error) return entry.error; + return reportedMissing.get(url + "\0" + name) || null; + } + return { load, resolve: resolve2, resolveGlobal, getError }; + } + function isElementClass(g) { + try { + return typeof g === "function" && typeof HTMLElement !== "undefined" && g.prototype instanceof HTMLElement; + } catch { + return false; + } + } + + // src/atomics.ts + var ATOMIC_CSS = ( + // layout + ".fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}" + ); + + // src/helmet.ts + var DESIGN_DOC_MODE_RE = /]*\bname\s*=\s*["']design_doc_mode["'][^>]*\b(?:content|value)\s*=\s*["'](\w+)["']/i; + var CANVAS_BG = "#f0eee9"; + function createHelmetManager(doc, isStreaming) { + const mounted = /* @__PURE__ */ new Set(); + const live = /* @__PURE__ */ new Map(); + let designDocMode = null; + let canvasStyleEl = null; + function postDesignMode(mode) { + if (window.parent === window) return; + try { + window.parent.postMessage({ type: "__dc_design_mode", mode }, "*"); + } catch { + } + } + function setDesignDocMode(mode) { + if (mode === designDocMode) return; + designDocMode = mode; + postDesignMode(mode); + if (mode === "canvas") { + doc.documentElement.setAttribute("data-dc-canvas", ""); + canvasStyleEl = doc.createElement("style"); + canvasStyleEl.setAttribute("data-dc-canvas", ""); + canvasStyleEl.textContent = `html,body{background:${CANVAS_BG}}#dc-root>.sc-host{position:relative}`; + doc.head.appendChild(canvasStyleEl); + } else { + doc.documentElement.removeAttribute("data-dc-canvas"); + canvasStyleEl?.remove(); + canvasStyleEl = null; + } + } + window.addEventListener("message", (e) => { + if (!designDocMode || (e.data && e.data.type) !== "__dc_probe") return; + postDesignMode(designDocMode); + }); + function compile(node) { + const raw = [...node.children]; + const helmetClosed = node.nextSibling != null || node.parentNode?.nextSibling != null; + if (node.hasAttribute("data-dc-atomics") && !mounted.has("__dc-atomics")) { + mounted.add("__dc-atomics"); + const el = doc.createElement("style"); + el.id = "__dc-atomics"; + el.textContent = ATOMIC_CSS; + doc.head.appendChild(el); + } + return (_vals, ctx) => { + const name = ctx && ctx.__name || ""; + const streaming = !!(name && isStreaming(name)); + for (let i = 0; i < raw.length; i++) { + const child = raw[i]; + const tag = child.tagName; + const mayBePartial = streaming && !helmetClosed && i === raw.length - 1; + if (tag === "SCRIPT") { + if (mayBePartial) continue; + const key = "SCRIPT|" + (child.getAttribute("src") || child.textContent || ""); + if (mounted.has(key)) continue; + mounted.add(key); + const el = doc.createElement("script"); + for (const { name: an, value } of [...child.attributes]) + el.setAttribute(an, value); + if (child.textContent) el.textContent = child.textContent; + doc.head.appendChild(el); + } else if (tag === "LINK" || tag === "META") { + if (mayBePartial) continue; + const key = tag + "|" + (child.getAttribute("href") || child.getAttribute("src") || child.outerHTML); + if (mounted.has(key)) continue; + mounted.add(key); + doc.head.appendChild(child.cloneNode(true)); + } else { + const key = name + "|" + i; + let el = live.get(key); + if (!el || el.tagName !== tag) { + if (el) el.remove(); + el = doc.createElement(tag.toLowerCase()); + live.set(key, el); + doc.head.appendChild(el); + } + for (const { name: an, value } of [...child.attributes]) { + if (el.getAttribute(an) !== value) el.setAttribute(an, value); + } + if (el.textContent !== child.textContent) + el.textContent = child.textContent; + } + } + return null; + }; + } + return { compile, setDesignDocMode }; + } + + // src/pseudo.ts + function createPseudoSheet(doc) { + let el = null; + const cache = /* @__PURE__ */ new Map(); + let n = 0; + return (pseudo, css) => { + const k = pseudo + "|" + css; + const hit = cache.get(k); + if (hit) return hit; + if (!el) { + el = doc.createElement("style"); + doc.head.appendChild(el); + } + const cls = "scp" + (n++).toString(36); + const sel = pseudo === "before" || pseudo === "after" ? "." + cls + "::" + pseudo : "." + cls + ":" + pseudo; + el.sheet.insertRule(sel + "{" + css + "}", el.sheet.cssRules.length); + cache.set(k, cls); + return cls; + }; + } + + // src/registry.ts + function createRegistry() { + const entries = /* @__PURE__ */ Object.create(null); + function get(name) { + return entries[name] || (entries[name] = { + html: "", + tpl: null, + Logic: null, + jsStreaming: false, + htmlStreaming: false, + ver: 0, + subs: /* @__PURE__ */ new Set(), + fetched: false + }); + } + function bump(name) { + const r = get(name); + r.ver++; + for (const fn of r.subs) fn(); + } + return { + entries, + get, + bump, + bumpAll() { + for (const n in entries) bump(n); + } + }; + } + + // src/runtime.ts + var COMPONENT_DIR = "."; + function createRuntime(doc = document) { + const registry = createRegistry(); + const pseudoClass = createPseudoSheet(doc); + const helmet = createHelmetManager( + doc, + (name) => registry.get(name).htmlStreaming + ); + const external = createExternalModules(() => registry.bumpAll()); + const factory = createComponentFactory(registry, ensureFetched); + const host = { + component: (name) => factory.getDC(name), + placeholder: (props) => h(Placeholder, props), + helmet: (node) => helmet.compile(node), + loadExternal: (kind, url, after) => external.load(kind, url, after), + resolveExternal: (url, name) => external.resolve(url, name), + resolveExternalGlobal: (url, name) => external.resolveGlobal(url, name), + resolveExternalError: (url, name) => external.getError(url, name), + pseudoClass + }; + function ensureFetched(name) { + const r = registry.get(name); + if (r.fetched) return; + r.fetched = true; + const url = COMPONENT_DIR + "/" + encodeURIComponent(name) + ".dc.html"; + fetch(url).then((res) => { + if (!res.ok) { + console.error( + "[dc-runtime] sibling fetch for <" + name + "/> failed:", + url, + "returned", + res.status, + "\u2014 the reference renders as an empty placeholder." + ); + return ""; + } + return res.text(); + }).then((t) => { + if (!t) return; + const parsed = parseDcText(t); + if (!parsed) { + console.error( + "[dc-runtime] sibling fetch for <" + name + "/>:", + url, + "has no block \u2014 not a Design Component." + ); + return; + } + if (parsed.props) r.propsMeta = parsed.props; + if (parsed.preview) r.preview = parsed.preview; + if (parsed.template && !r.html) updateHtml(name, parsed.template); + if (parsed.js && !r.Logic) updateJs(name, parsed.js); + }).catch( + (e) => console.error( + "[dc-runtime] sibling fetch for <" + name + "/> threw:", + url, + e + ) + ); + } + let rootName = null; + function updateHtml(name, html) { + const r = registry.get(name); + r.html = html; + if (name === rootName) { + const mode = DESIGN_DOC_MODE_RE.exec(html)?.[1] ?? null; + if (mode || !r.htmlStreaming) helmet.setDesignDocMode(mode); + } + try { + r.tpl = compileTemplate(html, host); + } catch (e) { + console.error("[dc-runtime] template compile FAILED for", name, e); + } + registry.bump(name); + } + function updateJs(name, src) { + const r = registry.get(name); + const seq = r.jsSeq = (r.jsSeq || 0) + 1; + try { + const Cls = evalDcLogic(src); + if (r.jsSeq !== seq) return; + if (typeof Cls !== "function") { + r.logicError = name + ".dc.html: