@0xbuff/throughline 0.0.0-stage → 0.0.1

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.
Files changed (22) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/COPYRIGHT.md +15 -0
  3. package/LICENSE +201 -0
  4. package/README.md +191 -2
  5. package/dist/describe-ZC7v_r7z.js +138 -0
  6. package/dist/describe-ZC7v_r7z.js.map +1 -0
  7. package/dist/examples.d.ts +17 -0
  8. package/dist/examples.js +70 -0
  9. package/dist/examples.js.map +1 -0
  10. package/dist/index.d.ts +68 -0
  11. package/dist/index.js +1134 -0
  12. package/dist/index.js.map +1 -0
  13. package/dist/model-Dwy20ibD.d.ts +97 -0
  14. package/dist/react/index.d.ts +22 -0
  15. package/dist/react/index.js +810 -0
  16. package/dist/react/index.js.map +1 -0
  17. package/docs/architecture.md +93 -0
  18. package/docs/authoring.md +54 -0
  19. package/docs/catalog.md +96 -0
  20. package/docs/grammar.md +97 -0
  21. package/package.json +94 -3
  22. package/src/styles/throughline.css +77 -0
package/src/styles/throughline.css ADDED
@@ -0,0 +1,77 @@
1
+ /* Self-contained tokens: consumers may override --thl-* on the player. */
2
+ .thl {
3
+ box-sizing: border-box;
4
+ --thl-bg: light-dark(#fcfcfa, #141b19);
5
+ --thl-panel: light-dark(#f3f4f0, #19231f);
6
+ --thl-surface: light-dark(#ffffff, #202c26);
7
+ --thl-text: light-dark(#202b28, #ecf2eb);
8
+ --thl-muted: light-dark(#596761, #a5b5a9);
9
+ --thl-line: light-dark(#d5dcd5, #3d4e43);
10
+ --thl-focus: light-dark(#036c62, #75e5b7);
11
+ --thl-focus-bg: light-dark(#e0f4ed, #183d31);
12
+ --thl-change: light-dark(#8b4b08, #ffce83);
13
+ --thl-change-bg: light-dark(#fff0cf, #45371f);
14
+ color-scheme: light dark;
15
+ container-type: inline-size;
16
+ background: var(--thl-bg);
17
+ color: var(--thl-text);
18
+ border: 1px solid var(--thl-line);
19
+ border-radius: 16px;
20
+ font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
21
+ width: 100%;
22
+ min-width: 0;
23
+ overflow: hidden;
24
+ }
25
+ .thl[data-theme="dark"] { color-scheme: dark; }
26
+ .thl[data-theme="light"] { color-scheme: light; }
27
+ .thl *, .thl *::before, .thl *::after { box-sizing: border-box; }
28
+ .thl :where(p, dl, dd, pre) { margin: 0; }
29
+ .thl:focus-visible, .thl :focus-visible { outline: 2px solid var(--thl-focus); outline-offset: -3px; }
30
+ .thl-scene { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
31
+ .thl-group { fill: var(--thl-panel); stroke: var(--thl-line); stroke-width: 0.75; }
32
+ .thl-group-label { fill: var(--thl-muted); font: 600 12px ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.3px; }
33
+ .thl-node { fill: var(--thl-surface); stroke: var(--thl-line); }
34
+ .thl-node.thl-focused { stroke: var(--thl-focus); stroke-width: 1.5; }
35
+ .thl-node-label { fill: var(--thl-muted); font: 500 12px ui-sans-serif, system-ui, sans-serif; }
36
+ .thl-cell rect { fill: var(--thl-panel); stroke: transparent; }
37
+ .thl-cell text { fill: var(--thl-text); font-size: 13px; font-weight: 600; }
38
+ .thl-cell.thl-focused rect { fill: var(--thl-focus-bg); stroke: var(--thl-focus); }
39
+ .thl-cell.thl-changed rect { fill: var(--thl-change-bg); stroke: var(--thl-change); }
40
+ .thl-cell.thl-changed text { fill: var(--thl-change); }
41
+ .thl-cell .thl-index, .thl-window { fill: var(--thl-muted); font-size: 11px; font-weight: 400; }
42
+ .thl-edge, .thl-flow { fill: none; stroke: var(--thl-muted); stroke-width: 1.3; }
43
+ .thl-link polygon { fill: var(--thl-muted); }
44
+ .thl-edge-label { fill: var(--thl-muted); stroke: var(--thl-bg); stroke-width: 4px; paint-order: stroke; font-size: 11px; }
45
+ .thl-transferred .thl-edge { stroke: var(--thl-focus); }
46
+ .thl-transferred polygon, .thl-transferred text { fill: var(--thl-focus); }
47
+ .thl-flow { stroke: var(--thl-focus); stroke-width: 2.5; stroke-dasharray: 1; animation: thl-draw 350ms ease-out both; }
48
+ .thl-caption { display: flex; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--thl-line); }
49
+ .thl-step { color: var(--thl-focus); font: 600 12px/22px ui-monospace, monospace; }
50
+ .thl-caption p { min-width: 0; }
51
+ .thl-caption strong { display: block; font-weight: 600; }
52
+ .thl-caption p > span { display: block; color: var(--thl-muted); font-size: 13px; }
53
+ .thl-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--thl-line); }
54
+ .thl-controls button, .thl-controls select { appearance: auto; font: inherit; margin: 0; height: 44px; min-width: 40px; padding: 0 10px; color: var(--thl-text); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; }
55
+ .thl-controls button:hover:not(:disabled), .thl-controls select:hover { background: var(--thl-panel); border-color: var(--thl-line); }
56
+ .thl-controls .thl-play { background: var(--thl-focus-bg); color: var(--thl-focus); min-width: 66px; font-weight: 600; }
57
+ .thl-controls button:disabled { opacity: 0.4; cursor: default; }
58
+ .thl-timeline { flex: 1; min-width: 40px; width: 80px; height: 44px; margin: 0 6px; accent-color: var(--thl-focus); cursor: pointer; }
59
+ .thl-count { white-space: nowrap; color: var(--thl-muted); font: 12px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
60
+ .thl-inspector { border-top: 1px solid var(--thl-line); font-size: 12px; }
61
+ .thl-inspector summary { padding: 8px 16px; color: var(--thl-muted); cursor: pointer; }
62
+ .thl-inspector dl { padding: 0 16px 12px; }
63
+ .thl-inspector dl > div + div { margin-top: 10px; }
64
+ .thl-inspector dt { font-weight: 600; }
65
+ .thl-inspector dt span { color: var(--thl-muted); font-weight: 400; }
66
+ .thl-inspector pre { overflow: auto; max-height: 240px; font: 12px/1.6 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
67
+ .thl-empty { padding: 20px; fill: var(--thl-muted); color: var(--thl-muted); }
68
+ .thl-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
69
+ @container (max-width: 480px) {
70
+ .thl-timeline { order: 1; flex-basis: 100%; width: 100%; margin: 0; height: 32px; }
71
+ .thl-count { margin-left: auto; }
72
+ }
73
+ @keyframes thl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
74
+ @media (prefers-reduced-motion: reduce) { .thl-flow { animation: none; } }
75
+ .thl-caption > div { min-width: 0; }
76
+ .thl-transfers { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 0; margin: 6px 0 0; list-style: none; color: var(--thl-muted); font-size: 12px; }
77
+ .thl-transfers code { margin-left: 6px; color: var(--thl-focus); overflow-wrap: anywhere; font: inherit; font-family: ui-monospace, monospace; }