hyperframes 0.5.0-alpha.13 → 0.5.0-alpha.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +5708 -3881
- package/dist/commands/contrast-audit.browser.js +2 -0
- package/dist/docs/compositions.md +35 -7
- package/dist/hyperframe-runtime.js +37 -27
- package/dist/hyperframe.manifest.json +1 -1
- package/dist/hyperframe.runtime.iife.js +37 -27
- package/dist/skills/hyperframes/SKILL.md +83 -7
- package/dist/skills/hyperframes/scripts/contrast-report.mjs +10 -0
- package/dist/skills/hyperframes-cli/SKILL.md +34 -12
- package/dist/studio/assets/{hyperframes-player-vibA20NC.js → hyperframes-player-Cd8vYWxP.js} +2 -2
- package/dist/studio/assets/index-DFLVGWTx.js +106 -0
- package/dist/studio/assets/index-mXJ-UH9F.css +1 -0
- package/dist/studio/index.html +2 -2
- package/dist/templates/_shared/AGENTS.md +7 -7
- package/dist/templates/_shared/CLAUDE.md +8 -6
- package/package.json +4 -2
- package/dist/studio/assets/index-JhhmFie-.js +0 -105
- package/dist/studio/assets/index-KioPDrX6.css +0 -1
|
@@ -90,6 +90,7 @@ window.__contrastAudit = async function (imgBase64, time) {
|
|
|
90
90
|
if (parseFloat(cs.opacity) <= 0.01) continue;
|
|
91
91
|
var rect = el.getBoundingClientRect();
|
|
92
92
|
if (rect.width < 8 || rect.height < 8) continue;
|
|
93
|
+
if (rect.right <= 0 || rect.bottom <= 0 || rect.left >= w || rect.top >= h) continue;
|
|
93
94
|
|
|
94
95
|
var fg = parseColor(cs.color);
|
|
95
96
|
if (fg[3] <= 0.01) continue;
|
|
@@ -103,6 +104,7 @@ window.__contrastAudit = async function (imgBase64, time) {
|
|
|
103
104
|
var y0 = Math.max(0, Math.floor(rect.y) - 4);
|
|
104
105
|
var y1 = Math.min(h - 1, Math.ceil(rect.y + rect.height) + 4);
|
|
105
106
|
var sample = function (sx, sy) {
|
|
107
|
+
if (sx < 0 || sx >= w || sy < 0 || sy >= h) return;
|
|
106
108
|
var idx = (sy * w + sx) * 4;
|
|
107
109
|
rr.push(px[idx]);
|
|
108
110
|
gg.push(px[idx + 1]);
|
|
@@ -26,14 +26,42 @@ Use `npx hyperframes compositions` to see all compositions in a project.
|
|
|
26
26
|
|
|
27
27
|
## Variables
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
Two attributes with different shapes and different jobs:
|
|
30
|
+
|
|
31
|
+
- **`data-composition-variables`** on the `<html>` root — a JSON **array of declarations** (`{id, type, label, default}` per entry). Defines the schema: which variables exist, what type they are, and what defaults to use when no override is provided.
|
|
32
|
+
- **`data-variable-values`** on a sub-comp host element — a JSON **object keyed by variable id** (`{"title":"Pro","price":"$29"}`). Carries per-instance overrides for that one mount of the sub-composition.
|
|
33
|
+
|
|
34
|
+
They aren't redundant — one is "what variables does this composition have?" and the other is "what values should this particular embed use?" Inside any composition script, `window.__hyperframes.getVariables()` returns the merged result. Layering, lowest to highest precedence:
|
|
35
|
+
|
|
36
|
+
1. Declared defaults from `data-composition-variables`
|
|
37
|
+
2. Per-instance overrides from the host's `data-variable-values` (sub-comp embeds only)
|
|
38
|
+
3. CLI overrides from `npx hyperframes render --variables '{...}'` (top-level renders only)
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<!-- compositions/card.html -->
|
|
42
|
+
<html data-composition-variables='[
|
|
43
|
+
{"id":"title","type":"string","label":"Title","default":"Hello"},
|
|
44
|
+
{"id":"color","type":"color","label":"Color","default":"#111827"}
|
|
45
|
+
]'>
|
|
46
|
+
<body>
|
|
47
|
+
<div data-composition-id="card" data-width="1920" data-height="1080">
|
|
48
|
+
<h1 class="title"></h1>
|
|
49
|
+
<script>
|
|
50
|
+
const { title, color } = window.__hyperframes.getVariables();
|
|
51
|
+
document.querySelector(".title").textContent = title;
|
|
52
|
+
document.querySelector(".title").style.color = color;
|
|
53
|
+
</script>
|
|
54
|
+
</div>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
57
|
+
```
|
|
30
58
|
|
|
31
59
|
```html
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
></div>
|
|
60
|
+
<!-- index.html — embed twice with different per-instance values -->
|
|
61
|
+
<div data-composition-id="card-pro" data-composition-src="compositions/card.html"
|
|
62
|
+
data-variable-values='{"title":"Pro","color":"#ff4d4f"}'></div>
|
|
63
|
+
<div data-composition-id="card-enterprise" data-composition-src="compositions/card.html"
|
|
64
|
+
data-variable-values='{"title":"Enterprise","color":"#22c55e"}'></div>
|
|
37
65
|
```
|
|
38
66
|
|
|
39
|
-
|
|
67
|
+
The runtime layers `data-variable-values` over the sub-comp's declared defaults on a per-instance basis. The same `getVariables()` call works at the top level too — the CLI flag `--variables` provides the override, declared `default`s fall through for missing keys.
|