@fusion.dev/helix 0.201.1 → 0.203.0

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 (13) hide show
  1. package/api.json +1 -1
  2. package/custom-elements.json +34 -14
  3. package/dist/aura/root/aura-root.d.ts +8 -6
  4. package/dist/aura/shader.d.ts +3 -3
  5. package/dist/aura/shader.js +55 -1
  6. package/dist/spatial-bar-chart/root/spatial-bar-chart-root.css.js +1 -1
  7. package/dist/spatial-treemap/root/spatial-treemap-root.css.js +1 -1
  8. package/examples.json +1 -1
  9. package/lint.json +1 -1
  10. package/package.json +6 -6
  11. package/skills/helix/SKILL.md +2 -2
  12. package/types/jsx.d.ts +32 -20
  13. package/types/vue.d.ts +7 -5
package/dist/aura/shader.js CHANGED
@@ -10,6 +10,7 @@ export const SHAPES = [
10
10
  'caustics',
11
11
  'lattice',
12
12
  'fracture',
13
+ 'constellation',
13
14
  ];
14
15
  export const INTERACTIONS = ['native', 'light', 'shadow', 'ripple', 'none'];
15
16
  export const VERTEX = `#version 300 es
@@ -321,6 +322,57 @@ export const FRAGMENT = `#version 300 es
321
322
  return lit * falloff(dot(q, q), 0.4);
322
323
  }
323
324
 
325
+ ${''}
326
+ vec2 star(vec2 c, float t, vec2 qp, float reach) {
327
+ float a = hash(c);
328
+ float b = hash(c + 17.3);
329
+ float v = clamp(uVariance, 0.0, 1.0);
330
+ vec2 at = (c + 0.5 + (vec2(a, b) - 0.5) * 0.8) / 2.2;
331
+ at += vec2(
332
+ sin(t * mix(0.7, 0.35 + a * 0.7, v) + b * 6.28),
333
+ cos(t * mix(0.7, 0.3 + b * 0.7, v) + a * 6.28)
334
+ ) * 0.06;
335
+ vec2 toward = qp - at;
336
+ float pull = falloff(dot(toward, toward), 1.6) * reach;
337
+ return at + toward * pull * 0.3;
338
+ }
339
+
340
+ ${''}
341
+ float link(vec2 q, vec2 a, vec2 b) {
342
+ vec2 ab = b - a;
343
+ float len2 = dot(ab, ab);
344
+ float reachable = smoothstep(0.62, 0.38, sqrt(len2));
345
+ if (reachable <= 0.0) {
346
+ return 0.0;
347
+ }
348
+ float h = clamp(dot(q - a, ab) / max(len2, 0.0001), 0.0, 1.0);
349
+ vec2 off = q - (a + ab * h);
350
+ return falloff(dot(off, off), 180.0) * reachable;
351
+ }
352
+
353
+ float constellation(vec2 q, float t, vec2 qp, float reach) {
354
+ float lit = 0.0;
355
+ float v = clamp(uVariance, 0.0, 1.0);
356
+ vec2 cell = floor(q * 2.2);
357
+ for (int j = -1; j <= 1; j++) {
358
+ for (int i = -1; i <= 1; i++) {
359
+ vec2 c = cell + vec2(float(i), float(j));
360
+ vec2 at = star(c, t, qp, reach);
361
+ vec2 off = q - at;
362
+ ${''}
363
+ float grade = mix(70.0, 70.0 * (0.7 + hash(c + 5.7) * 0.8), v);
364
+ lit += falloff(dot(off, off), grade) * mix(0.9, 0.5 + hash(c) * 0.8, v);
365
+ lit += falloff(dot(off, off), grade * 0.16) * 0.06;
366
+ ${''}
367
+ lit += link(q, at, star(c + vec2(1.0, 0.0), t, qp, reach)) * 0.35;
368
+ lit += link(q, at, star(c + vec2(0.0, 1.0), t, qp, reach)) * 0.35;
369
+ lit += link(q, at, star(c + vec2(1.0, 1.0), t, qp, reach)) * 0.35;
370
+ lit += link(q, at, star(c + vec2(-1.0, 1.0), t, qp, reach)) * 0.35;
371
+ }
372
+ }
373
+ return lit * falloff(dot(q, q), 0.4);
374
+ }
375
+
324
376
  ${''}
325
377
  float flowWake(vec2 at, mat2 turn, vec2 shift, out vec2 push) {
326
378
  push = vec2(0.0);
@@ -537,8 +589,10 @@ export const FRAGMENT = `#version 300 es
537
589
  d = caustics(q, t, qp, own);
538
590
  } else if (uShape == 9) {
539
591
  d = lattice(q, t, qp, own);
540
- } else {
592
+ } else if (uShape == 10) {
541
593
  d = fracture(q, t, qp, own);
594
+ } else {
595
+ d = constellation(q, t, qp, own);
542
596
  }
543
597
 
544
598
  ${''}
package/dist/spatial-bar-chart/root/spatial-bar-chart-root.css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { createSheet } from '@fusion.dev/helix-core';
2
- export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
2
+ export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
package/dist/spatial-treemap/root/spatial-treemap-root.css.js CHANGED
@@ -1,2 +1,2 @@
1
1
  import { createSheet } from '@fusion.dev/helix-core';
2
- export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-treemap-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="block"] {--_spatial-treemap-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-treemap-face: oklch(from var(--_spatial-treemap-color) calc(l - var(--spatial-treemap-shade, 0) * 0.5) c h);--_spatial-treemap-edge: oklch(from var(--_spatial-treemap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-treemap-fill, var(--_spatial-treemap-face));fill-opacity: calc(var(--_spatial-treemap-area, 1) * var(--_spatial-treemap-through, 1));stroke: var(--_spatial-treemap-line, var(--_spatial-treemap-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-treemap-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-treemap-fill: color-mix(in oklab, var(--_spatial-treemap-face) 60%, var(--helix-color-background));--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-treemap-area: 0.2;--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([material="glass"]) {--_spatial-treemap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-treemap-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
2
+ export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-treemap-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="block"] {--_spatial-treemap-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-treemap-face: oklch(from var(--_spatial-treemap-color) calc(l - var(--spatial-treemap-shade, 0) * 0.5) c h);--_spatial-treemap-edge: oklch(from var(--_spatial-treemap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-treemap-fill, var(--_spatial-treemap-face));fill-opacity: calc(var(--_spatial-treemap-area, 1) * var(--_spatial-treemap-through, 1));stroke: var(--_spatial-treemap-line, var(--_spatial-treemap-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-treemap-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-treemap-fill: color-mix(in oklab, var(--_spatial-treemap-face) 60%, var(--helix-color-background));--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-treemap-area: 0.2;--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([material="glass"]) {--_spatial-treemap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-treemap-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);