Skip to content

chore(catalog): publish generated catalog #6008

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
github-actions wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore(catalog): publish generated catalog #6008

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2855a53
chore(catalog): publish generated catalog
github-actions[bot] Oct 22, 2026
3bba261
chore(catalog): publish generated catalog
github-actions[bot] Oct 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/catalog/components/camera-scan-gate.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
compositionSrc="compositions/components/camera-scan-gate.html"
title="Camera Scan Gate"
description="A camera and QR recognition moment with a viewfinder sweep, bracket lock, confirmation pulse, and verified next beat."
variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
variables={[{"id":"scanColor","type":"string","role":"style","label":"Scan color","description":"Any CSS color value used by the scan line and recognition glow.","default":"var(--brand, #22c55e)"},{"id":"targetLabel","type":"string","role":"content","label":"Target label","description":"Confirmation label revealed at recognition lock. Blank hides the line.","default":"Verified"},{"id":"sweepSpeed","type":"number","role":"timing","label":"Sweep speed","description":"Speed multiplier for the scan sweep phase only.","default":1,"min":0.8,"max":1.6,"step":0.1,"unit":"x"}]}
meta={{"category":"Camera","badge":"Stable","codeLines":522}}
attribution={{"path":"registry/components/camera-scan-gate","tags":["prop","ui-props","camera","qr","scan","recognition","interaction","demonstrate"]}}
hasCode
Expand All @@ -40,7 +40,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
it for passive camera decoration or a generic loading state.

Variables (declared in data-composition-variables below):
- scanColor (string, default "var(--brand)"): any CSS color value used by
- scanColor (string, default "var(--brand, #22c55e)"): any CSS color value used by
the scan line, lock brackets, and confirmation glow.
- targetLabel (string, default "Verified"): label revealed at lock. Empty
string hides the label line entirely.
Expand Down Expand Up @@ -80,7 +80,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
<html
lang="en"
data-composition-variables='[
{ "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand)" },
{ "id": "scanColor", "type": "string", "role": "style", "label": "Scan color", "description": "Any CSS color value used by the scan line and recognition glow.", "default": "var(--brand, #22c55e)" },
{ "id": "targetLabel", "type": "string", "role": "content", "label": "Target label", "description": "Confirmation label revealed at recognition lock. Blank hides the line.", "default": "Verified" },
{ "id": "sweepSpeed", "type": "number", "role": "timing", "label": "Sweep speed", "description": "Speed multiplier for the scan sweep phase only.", "default": 1, "min": 0.8, "max": 1.6, "step": 0.1, "unit": "x" }
]'
Expand Down Expand Up @@ -394,7 +394,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
: {};
var scanColor =
vars.scanColor == null || String(vars.scanColor).trim() === ""
? "var(--brand)"
? "var(--brand, #22c55e)"
: String(vars.scanColor);
var targetLabel = vars.targetLabel == null ? "" : String(vars.targetLabel);
var rawSweepSpeed = Number(vars.sweepSpeed);
Expand Down Expand Up @@ -573,7 +573,7 @@ want to change on the element:

| Variable | Default | Accepts | What it does |
| --- | --- | --- | --- |
| `scanColor` | `var(--brand)` | string | Any CSS color value used by the scan line and recognition glow. |
| `scanColor` | `var(--brand, #22c55e)` | string | Any CSS color value used by the scan line and recognition glow. |
| `targetLabel` | `Verified` | string | Confirmation label revealed at recognition lock. Blank hides the line. |
| `sweepSpeed` | `1` | 0.8x to 1.6x, step 0.1x | Speed multiplier for the scan sweep phase only. |

Expand All @@ -584,7 +584,7 @@ defaults, so this behaves exactly like the preview above until you change one:
<div
data-composition-id="camera-scan-gate"
data-composition-src="compositions/components/camera-scan-gate.html"
data-variable-values='{"scanColor":"var(--brand)","targetLabel":"Verified","sweepSpeed":1}'
data-variable-values='{"scanColor":"var(--brand, #22c55e)","targetLabel":"Verified","sweepSpeed":1}'
></div>
```

Expand Down
2 changes: 1 addition & 1 deletion docs/catalog/components/device-frame-stage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
hardware reveal, glare sweep, or camera-lens tour, ever.

This file is a mountable HyperFrames sub-composition (see
skills/hyperframes-core/references/sub-compositions.md): a host
skills/hyperframes/references/format.md): a host
composition embeds it via a clip carrying data-composition-src, a
matching data-composition-id, and its own data-start / data-duration /
data-track-index / data-width / data-height. Everything the render needs
Expand Down
40 changes: 20 additions & 20 deletions docs/catalog/components/focus-swap.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,9 @@ import { InstallCommand } from "/snippets/install-command.jsx";
container-type: size;
isolation: isolate;
overflow: hidden;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
background: var(--bg, #070a12);
color: var(--fg, #f8fafc);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}

.fs-clip {
Expand Down Expand Up @@ -121,15 +121,15 @@ import { InstallCommand } from "/snippets/install-command.jsx";
justify-content: space-between;
padding: 5cqh 3.2cqw;
overflow: hidden;
border: 0.16cqw solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: 0 2.2cqh 5cqh color-mix(in srgb, var(--bg) 72%, transparent);
border: 0.16cqw solid var(--border, #34405a);
border-radius: var(--radius, 22px);
background: var(--surface, #151c2c);
box-shadow: 0 2.2cqh 5cqh color-mix(in srgb, var(--bg, #070a12) 72%, transparent);
transform-origin: center;
will-change: transform, filter, opacity;
/* Both cards are the same placeholder material. Which one holds
attention is said by blur, scale, and opacity, never by hue. */
--fs-card-accent: color-mix(in srgb, var(--fg) 72%, var(--surface));
--fs-card-accent: color-mix(in srgb, var(--fg, #f8fafc) 72%, var(--surface, #151c2c));
}

.fs-card::before {
Expand All @@ -144,7 +144,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
gap: var(--space-2, 16px);
}

.fs-card-letter {
Expand All @@ -153,46 +153,46 @@ import { InstallCommand } from "/snippets/install-command.jsx";
width: 5cqw;
aspect-ratio: 1;
border-radius: 50%;
background: color-mix(in srgb, var(--fg) 13%, var(--surface));
color: var(--fg);
font-family: var(--font-mono);
background: color-mix(in srgb, var(--fg, #f8fafc) 13%, var(--surface, #151c2c));
color: var(--fg, #f8fafc);
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: 2.3cqw;
font-weight: 700;
}

.fs-status {
color: var(--muted);
font-family: var(--font-mono);
color: var(--muted, #94a3b8);
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
font-size: 1.25cqw;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.fs-copy {
display: grid;
gap: var(--space-1);
gap: var(--space-1, 8px);
}

.fs-title {
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f8fafc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: 3.4cqw;
font-weight: 680;
line-height: 1;
letter-spacing: -0.025em;
}

.fs-detail {
color: var(--muted);
color: var(--muted, #94a3b8);
font-size: 1.45cqw;
line-height: 1.35;
}

.fs-meter {
height: 1.1cqh;
overflow: hidden;
border-radius: var(--radius);
background: color-mix(in srgb, var(--border) 60%, transparent);
border-radius: var(--radius, 22px);
background: color-mix(in srgb, var(--border, #34405a) 60%, transparent);
}

.fs-meter-fill {
Expand Down
2 changes: 1 addition & 1 deletion docs/catalog/components/oversized-cursor.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
mount contract: this file is a HyperFrames sub-composition, loaded by a host via
data-composition-src, never opened standalone. The runtime clones ONLY the
<template> contents into the host slot (see
skills/hyperframes-core/references/sub-compositions.md); everything outside
skills/hyperframes/references/format.md); everything outside
<template>, including this <head>, is discarded at render. The root is #root:
elastic, no data-width/data-height declared here, it fills whatever box the host
clip gives it (position:absolute; inset:0). See demo.html for the mount usage
Expand Down
2 changes: 1 addition & 1 deletion docs/catalog/components/overwhelm-surround.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
composition. A host loads it via data-composition-src; the runtime only
clones <template> contents (everything outside <template>, including the
entire <head>, is discarded on mount), see
skills/hyperframes-core/references/sub-compositions.md. The root carries no
skills/hyperframes/references/format.md. The root carries no
data-width/data-height: it is elastic, sized off whatever box the host clip
gives it (position:absolute; inset:0; container-type:size), so the effect
reads correctly whether the host mounts it into a 960x540 slot or a full
Expand Down
2 changes: 1 addition & 1 deletion docs/catalog/components/spring-pop.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";

Compiled-from evidence: Video Primitives v1 build contract, Easing
vocabulary (--ease-overshoot = GSAP back.out(1.7), taste rules 4 and 5),
plus hyperframes-animation rules/spring-pop-entrance.md's playful
plus hyperframes/animation rules/spring-pop-entrance.md's playful
overshoot variation. This fills the gap left by spring-scale-in, whose
power3.out curve never overshoots.

Expand Down
18 changes: 9 additions & 9 deletions docs/catalog/components/stagger-cascade.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
container-type: size;
isolation: isolate;
overflow: hidden;
color: var(--fg);
font-family: var(--font-body);
color: var(--fg, #f4f7fb);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}

.sc-clip {
Expand All @@ -117,7 +117,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
place-items: center;
overflow: hidden;
background: var(--bg);
background: var(--bg, #090d16);
}

.sc-grid {
Expand All @@ -136,10 +136,10 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
place-items: center;
overflow: hidden;
border: 0.16cqw solid var(--border);
border: 0.16cqw solid var(--border, rgba(244, 247, 251, 0.14));
border-radius: min(2.4cqw, 4cqh);
background: color-mix(in srgb, var(--surface) 92%, var(--brand));
color: var(--fg);
background: color-mix(in srgb, var(--surface, #171e2d) 92%, var(--brand, #79a8ff));
color: var(--fg, #f4f7fb);
}

.sc-tile::after {
Expand All @@ -150,17 +150,17 @@ import { InstallCommand } from "/snippets/install-command.jsx";
bottom: 12%;
height: min(0.55cqw, 0.95cqh);
border-radius: 50cqw;
background: var(--brand);
background: var(--brand, #79a8ff);
opacity: 0.72;
}

.sc-tile-index {
display: block;
font-family: var(--font-display);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(5cqw, 8cqh);
font-weight: 700;
line-height: 1;
color: var(--fg);
color: var(--fg, #f4f7fb);
}
</style>

Expand Down
44 changes: 22 additions & 22 deletions docs/catalog/components/store-badge-lockup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,18 +89,18 @@ import { InstallCommand } from "/snippets/install-command.jsx";
container-type: size;
isolation: isolate;
overflow: hidden;
color: var(--fg);
font-family: var(--font-body);
color: var(--fg, #f7f9fc);
font-family: var(--font-body, Inter, system-ui, sans-serif);
}

.sbl-clip {
width: 100%;
height: 100%;
display: grid;
place-items: center;
padding: var(--space-3);
padding: var(--space-3, 4.8cqh);
overflow: hidden;
background: var(--bg);
background: var(--bg, #080b13);
}

.sbl-lockup {
Expand All @@ -113,8 +113,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
.sbl-headline {
margin: 0;
max-width: 82cqw;
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f7f9fc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(8.2cqw, 12.5cqh);
font-weight: 750;
line-height: 1;
Expand All @@ -129,7 +129,7 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
gap: var(--space-2, 2.4cqh);
}

/* EDIT ZONE: both destinations share one badge geometry and one
Expand All @@ -141,13 +141,13 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-1);
gap: var(--space-1, 1.2cqh);
padding: min(2.2cqw, 3.2cqh) min(3cqw, 4.8cqh);
border: 0.16cqh solid var(--border);
border-radius: calc(var(--radius) * 4);
background: var(--surface);
color: var(--fg);
box-shadow: 0 1.5cqh 3.8cqh color-mix(in srgb, var(--bg) 70%, transparent);
border: 0.16cqh solid var(--border, #3b4659);
border-radius: calc(var(--radius, 2.4cqh) * 4);
background: var(--surface, #151c29);
color: var(--fg, #f7f9fc);
box-shadow: 0 1.5cqh 3.8cqh color-mix(in srgb, var(--bg, #080b13) 70%, transparent);
will-change: transform, opacity;
}

Expand All @@ -157,14 +157,14 @@ import { InstallCommand } from "/snippets/install-command.jsx";
display: grid;
place-items: center;
flex: none;
border: 0.16cqh solid color-mix(in srgb, var(--fg) 28%, transparent);
border-radius: calc(var(--radius) * 0.72);
background: color-mix(in srgb, var(--brand) 20%, var(--surface));
color: var(--fg);
border: 0.16cqh solid color-mix(in srgb, var(--fg, #f7f9fc) 28%, transparent);
border-radius: calc(var(--radius, 2.4cqh) * 0.72);
background: color-mix(in srgb, var(--brand, #7c6cff) 20%, var(--surface, #151c29));
color: var(--fg, #f7f9fc);
}

.sbl-apple-mark {
font-family: var(--font-display);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(3.2cqw, 5.2cqh);
font-weight: 800;
line-height: 1;
Expand All @@ -184,8 +184,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
}

.sbl-microcopy {
color: var(--muted);
font-family: var(--font-body);
color: var(--muted, #aab4c5);
font-family: var(--font-body, Inter, system-ui, sans-serif);
font-size: min(1.65cqw, 2.65cqh);
font-weight: 600;
line-height: 1;
Expand All @@ -194,8 +194,8 @@ import { InstallCommand } from "/snippets/install-command.jsx";
}

.sbl-label {
color: var(--fg);
font-family: var(--font-display);
color: var(--fg, #f7f9fc);
font-family: var(--font-display, Inter, system-ui, sans-serif);
font-size: min(3.75cqw, 5.8cqh);
font-weight: 720;
line-height: 1;
Expand Down
Loading
Loading