@almadar/ui 6.59.0 → 6.62.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 (91) hide show
  1. package/dist/BehaviorValueFrame-3ORZHPWQ.css +1252 -0
  2. package/dist/BehaviorValueFrame-QYFJEMN5.js +18 -0
  3. package/dist/TraitValueFrame-2WMYJOA5.css +1252 -0
  4. package/dist/TraitValueFrame-X6IL3UST.js +17 -0
  5. package/dist/Typography-KBATMU2V.js +5 -0
  6. package/dist/{UISlotRenderer-YNY7V2UJ.js → UISlotRenderer-NZBV5BUI.js} +12 -10
  7. package/dist/avl/index.cjs +32263 -28103
  8. package/dist/avl/index.d.ts +36 -13
  9. package/dist/avl/index.js +298 -6130
  10. package/dist/{avl-3d-context-BpBKZIbc.d.ts → avl-3d-context-Dxun3-ri.d.ts} +2 -0
  11. package/dist/{chunk-YYYHH5BA.js → chunk-7JRWELUC.js} +4 -6
  12. package/dist/{chunk-723MJUU3.js → chunk-CXQENFO2.js} +1 -1
  13. package/dist/chunk-D4NAA2JW.js +49 -0
  14. package/dist/{chunk-I5QOYW2Z.js → chunk-DXPCAQJU.js} +205 -2
  15. package/dist/{chunk-J755QADM.js → chunk-EDPUQ2ZJ.js} +327 -18
  16. package/dist/{chunk-4ZGXIW3B.js → chunk-ERDYADVZ.js} +1 -1
  17. package/dist/{chunk-7CVXM2KS.js → chunk-EZ5FSNOE.js} +2 -2
  18. package/dist/{chunk-E6MWYQVZ.js → chunk-G6EFTACU.js} +9713 -786
  19. package/dist/{chunk-MZIDOJMD.js → chunk-GVQOTA7T.js} +2 -1
  20. package/dist/{chunk-Q47ZN2DW.js → chunk-N23SVGTH.js} +83 -1
  21. package/dist/{chunk-KJGVLXEN.js → chunk-N4IJS5DD.js} +50 -116
  22. package/dist/{chunk-LZRW6GXG.js → chunk-QOV3TUAA.js} +2 -3
  23. package/dist/chunk-WBWXBA5H.js +434 -0
  24. package/dist/{chunk-V3FGTQUE.js → chunk-ZR45FGW3.js} +7 -1
  25. package/dist/{cn-DIql5232.d.ts → cn-CDIhHCUC.d.ts} +40 -16
  26. package/dist/components/index.cjs +14779 -4354
  27. package/dist/components/index.d.ts +200 -180
  28. package/dist/components/index.js +16 -17
  29. package/dist/context/index.cjs +9 -1
  30. package/dist/context/index.js +3 -1
  31. package/dist/hooks/index.cjs +78 -9
  32. package/dist/hooks/index.d.ts +43 -2
  33. package/dist/hooks/index.js +6 -7
  34. package/dist/lib/drawable/three/index.cjs +361 -27
  35. package/dist/lib/drawable/three/index.d.ts +2 -2
  36. package/dist/lib/drawable/three/index.js +28 -7
  37. package/dist/lib/index.cjs +117 -5
  38. package/dist/lib/index.d.ts +2 -2
  39. package/dist/lib/index.js +99 -6
  40. package/dist/locales/index.cjs +6 -9
  41. package/dist/locales/index.js +2 -2
  42. package/dist/providers/index.cjs +14137 -1311
  43. package/dist/providers/index.d.ts +36 -4
  44. package/dist/providers/index.js +37 -17
  45. package/dist/runtime/index.cjs +28769 -18640
  46. package/dist/runtime/index.d.ts +70 -3
  47. package/dist/runtime/index.js +15 -381
  48. package/dist/ssr/index.cjs +508 -134
  49. package/dist/ssr/index.d.cts +56 -4
  50. package/dist/ssr/index.d.ts +56 -4
  51. package/dist/ssr/index.js +446 -72
  52. package/dist/{verificationRegistry-B3dj1Zl8.d.ts → verificationRegistry-B5aGl7WF.d.ts} +2 -1
  53. package/locales/ar.json +2 -3
  54. package/locales/en.json +2 -3
  55. package/locales/sl.json +2 -3
  56. package/package.json +8 -8
  57. package/tailwind-preset.cjs +78 -8
  58. package/themes/_base.css +27 -0
  59. package/themes/_contract.md +6 -0
  60. package/themes/_fonts.css +4 -4
  61. package/themes/_foundation.css +11 -0
  62. package/themes/_presets.css +2 -0
  63. package/themes/almadar-website.css +10 -0
  64. package/themes/almadar.css +10 -0
  65. package/themes/atelier.css +10 -0
  66. package/themes/bauhaus.css +10 -0
  67. package/themes/bloomberg-dense.css +10 -0
  68. package/themes/clay.css +10 -0
  69. package/themes/corporate.css +10 -0
  70. package/themes/gazette.css +10 -0
  71. package/themes/glass.css +10 -0
  72. package/themes/kflow.css +5 -0
  73. package/themes/kiosk.css +10 -0
  74. package/themes/linear-clean.css +10 -0
  75. package/themes/material.css +10 -0
  76. package/themes/minimalist.css +10 -0
  77. package/themes/nata.css +304 -0
  78. package/themes/neon.css +10 -0
  79. package/themes/notion-editorial.css +10 -0
  80. package/themes/orb.css +10 -0
  81. package/themes/prism.css +10 -0
  82. package/themes/rawi.css +304 -0
  83. package/themes/retro.css +10 -0
  84. package/themes/risograph.css +10 -0
  85. package/themes/scandi.css +10 -0
  86. package/themes/solarpunk.css +10 -0
  87. package/themes/terminal.css +138 -128
  88. package/dist/Typography-LZTP72Y4.js +0 -5
  89. package/dist/chunk-D2E44ODB.js +0 -350
  90. package/dist/chunk-N7JIG57B.js +0 -138
  91. package/dist/chunk-QJIAJ6EH.js +0 -2256
@@ -1,12 +1,12 @@
1
1
  import { useTapReveal } from './chunk-XJTHMW4G.js';
2
2
  import { useEventBus } from './chunk-CHNC4UYE.js';
3
- import { updateAssetStatus } from './chunk-Q47ZN2DW.js';
3
+ import { isMotionEnabled, updateAssetStatus } from './chunk-N23SVGTH.js';
4
4
  import { cn, domPassthrough } from './chunk-64WACXM7.js';
5
5
  import { __publicField } from './chunk-QPXIAUJD.js';
6
6
  import { createLogger } from '@almadar/logger';
7
- import React, { useCallback, createContext, useContext, useState, useLayoutEffect } from 'react';
7
+ import React, { useRef, useCallback, createContext, useEffect, useContext, useState, useLayoutEffect } from 'react';
8
8
  import { useThemeScope, useTheme } from '@almadar/ui/context';
9
- import { jsx } from 'react/jsx-runtime';
9
+ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
10
10
  import { renderUiEntriesOf } from '@almadar/core/patterns';
11
11
  import { DIAGRAM_TONES, isInlineTrait, DIAGRAM_TONE_COLOR_KEYS, DIAGRAM_TEXT_SIZES } from '@almadar/core';
12
12
  import { parseListenSource } from '@almadar/runtime';
@@ -223,17 +223,20 @@ var EFFECT_OPERATOR_CATEGORY = {
223
223
  "workspace/write-schema": "system",
224
224
  "workspace/write-plan": "system",
225
225
  "workspace/archive-orbital": "system",
226
- "lolo/emit-body": "system"
226
+ "behavior/catalog": "system",
227
+ "behavior/describe": "system",
228
+ "behavior/source": "system",
229
+ "program/read": "system",
230
+ "program/print": "system",
231
+ "program/eval": "system",
232
+ "program/compose": "system"
227
233
  };
228
234
  var EFFECT_FAMILY_CATEGORY = {
229
235
  agent: "system",
230
236
  os: "system",
231
237
  browser: "system",
232
238
  llm: "system",
233
- behavior: "system",
234
- validate: "control",
235
239
  session: "system",
236
- compose: "system",
237
240
  trace: "control",
238
241
  memory: "data",
239
242
  application: "system"
@@ -295,17 +298,20 @@ var EFFECT_OPERATOR_ZONE = {
295
298
  "workspace/write-schema": "system",
296
299
  "workspace/write-plan": "system",
297
300
  "workspace/archive-orbital": "system",
298
- "lolo/emit-body": "system"
301
+ "behavior/catalog": "system",
302
+ "behavior/describe": "system",
303
+ "behavior/source": "system",
304
+ "program/read": "system",
305
+ "program/print": "system",
306
+ "program/eval": "system",
307
+ "program/compose": "system"
299
308
  };
300
309
  var EFFECT_FAMILY_ZONE = {
301
310
  agent: "system",
302
311
  os: "system",
303
312
  browser: "system",
304
313
  llm: "remote",
305
- behavior: "system",
306
- validate: "flow",
307
314
  session: "system",
308
- compose: "system",
309
315
  trace: "flow",
310
316
  memory: "store",
311
317
  application: "system"
@@ -328,7 +334,12 @@ function effectCategoryOf(head) {
328
334
  function asEffectOperator(head) {
329
335
  return isEffectOperator(head) ? head : null;
330
336
  }
337
+ var PENDING_STD_CATEGORY_COLORS = {
338
+ "std-behavior-value": avlBlend("var(--color-accent)", 40, "var(--color-success)"),
339
+ "std-program": avlBlend("var(--color-accent)", 60, "var(--color-info)")
340
+ };
331
341
  var OPERATOR_CATEGORY_COLORS = {
342
+ ...PENDING_STD_CATEGORY_COLORS,
332
343
  "arithmetic": "var(--color-primary)",
333
344
  "comparison": "var(--color-warning)",
334
345
  "logic": "var(--color-accent)",
@@ -383,6 +394,44 @@ function effectZoneOf(head) {
383
394
  return null;
384
395
  }
385
396
 
397
+ // lib/bandShapes.ts
398
+ var shape = (d) => `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='${d}'/></svg>")`;
399
+ var BAND_SHAPES = {
400
+ wave: shape("M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z"),
401
+ arc: shape("M0 100 Q720 0 1440 100 Z"),
402
+ tilt: shape("M0 100 L1440 0 V100 Z"),
403
+ step: shape("M0 100 V75 H360 V50 H720 V25 H1080 V0 H1440 V100 Z"),
404
+ scallop: shape("M0 100 V40 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 V100 Z")
405
+ };
406
+ var BAND_EDGE_HEIGHT = "clamp(24px, 6vw, 96px)";
407
+ var BAND_ACCENT_FALLBACK = "linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 12%, var(--color-background)), var(--color-background))";
408
+ var BAND_EDGE_FILL = {
409
+ background: "var(--surface-page-image, none), var(--color-background)",
410
+ muted: "var(--color-muted)",
411
+ surface: "var(--color-card)",
412
+ gradient: `var(--surface-accent-image, ${BAND_ACCENT_FALLBACK}), var(--color-muted)`,
413
+ inverse: "var(--color-foreground)"
414
+ };
415
+ function bandEdgeMask(edge) {
416
+ return edge === "curve" ? "var(--surface-edge-mask, none)" : BAND_SHAPES[edge];
417
+ }
418
+ function bandEdgeHeight(edge) {
419
+ return edge === "curve" ? `var(--surface-edge-height, ${BAND_EDGE_HEIGHT})` : BAND_EDGE_HEIGHT;
420
+ }
421
+ function bandEdgeLayerStyle(edge, side, flip, color) {
422
+ const mask = bandEdgeMask(edge);
423
+ const turn = side === "top" ? flip ? "scaleY(-1)" : "rotate(180deg)" : flip ? "scaleX(-1)" : void 0;
424
+ const style = { height: bandEdgeHeight(edge), background: BAND_EDGE_FILL[color], maskImage: mask, WebkitMaskImage: mask, transform: turn };
425
+ if (color === "background") {
426
+ style.backgroundSize = "var(--surface-page-image-size, auto), auto";
427
+ style.backgroundAttachment = "fixed";
428
+ }
429
+ return style;
430
+ }
431
+ function bandPadding(basePad, edge) {
432
+ return edge === "none" ? void 0 : `calc(${basePad} + ${bandEdgeHeight(edge)})`;
433
+ }
434
+
386
435
  // lib/pressable.ts
387
436
  function clickElement(el) {
388
437
  el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: true }));
@@ -421,7 +470,215 @@ function rowOpenControlProps(enabled) {
421
470
  var STRETCHED_CONTROL = "after:absolute after:inset-0 after:content-[''] after:rounded-[inherit] focus-visible:outline-none focus-visible:after:ring-2 focus-visible:after:ring-primary focus-visible:after:ring-inset";
422
471
  var STRETCHED_ABOVE = "relative z-[1]";
423
472
 
424
- // components/core/atoms/Box.tsx
473
+ // lib/motion-tokens.ts
474
+ function cssTimeMs(value) {
475
+ const v = value.trim();
476
+ if (v.endsWith("ms")) return Number.parseFloat(v);
477
+ if (v.endsWith("s")) return Number.parseFloat(v) * 1e3;
478
+ return Number.NaN;
479
+ }
480
+ function tokenAt(el, name) {
481
+ for (let at = el; at !== null; at = at.parentElement) {
482
+ const value = getComputedStyle(at).getPropertyValue(name).trim();
483
+ if (value !== "") return value;
484
+ }
485
+ return "";
486
+ }
487
+ function motionTiming(durationToken, easingToken, scope) {
488
+ const duration = cssTimeMs(tokenAt(scope ?? document.documentElement, durationToken));
489
+ const easing = tokenAt(scope ?? document.documentElement, easingToken);
490
+ const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
491
+ if (!isMotionEnabled() || reduced || !Number.isFinite(duration) || easing === "") return void 0;
492
+ return { duration, easing };
493
+ }
494
+ function layoutScale(el) {
495
+ const layoutWidth = el instanceof HTMLElement ? el.offsetWidth : 0;
496
+ const screenWidth = el.getBoundingClientRect().width;
497
+ return layoutWidth > 0 && screenWidth > 0 ? screenWidth / layoutWidth : 1;
498
+ }
499
+
500
+ // lib/animate-changes.ts
501
+ function ownMotion(el) {
502
+ return el.closest("[data-item-move]") !== null || /\balmadar-enter-/.test(el.getAttribute("class") ?? "");
503
+ }
504
+ function boxesOf(el) {
505
+ return getComputedStyle(el).display === "contents" ? boxedChildren(el) : [el];
506
+ }
507
+ function boxedChildren(el) {
508
+ return [...el.children].flatMap(boxesOf);
509
+ }
510
+ var GHOST_STYLE = ["font", "letterSpacing", "lineHeight", "color", "textAlign", "whiteSpace", "textTransform"];
511
+ function roll(el, oldText, timing) {
512
+ const box = el.getBoundingClientRect();
513
+ const scale = layoutScale(el);
514
+ const computed = getComputedStyle(el);
515
+ const holder = document.createElement("span");
516
+ holder.setAttribute("aria-hidden", "true");
517
+ Object.assign(holder.style, {
518
+ position: "fixed",
519
+ left: `${box.left}px`,
520
+ top: `${box.top}px`,
521
+ width: `${box.width / scale}px`,
522
+ height: `${box.height / scale}px`,
523
+ transform: scale === 1 ? "" : `scale(${scale})`,
524
+ transformOrigin: "top left",
525
+ pointerEvents: "none",
526
+ zIndex: "2147483647"
527
+ });
528
+ const ghost = document.createElement("span");
529
+ ghost.setAttribute("data-change-ghost", "");
530
+ ghost.setAttribute("aria-hidden", "true");
531
+ ghost.textContent = oldText;
532
+ for (const prop of GHOST_STYLE) ghost.style[prop] = computed[prop];
533
+ Object.assign(ghost.style, { display: "block", width: "100%", height: "100%", overflow: "visible" });
534
+ holder.appendChild(ghost);
535
+ document.body.appendChild(holder);
536
+ const out = ghost.animate(
537
+ [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-40%)", offset: 0.5 }, { opacity: 0, transform: "translateY(-40%)" }],
538
+ timing
539
+ );
540
+ if (out === void 0) holder.remove();
541
+ else {
542
+ out.addEventListener("finish", () => holder.remove());
543
+ out.addEventListener("cancel", () => holder.remove());
544
+ }
545
+ el.animate(
546
+ [{ opacity: 0, transform: "translateY(40%)" }, { opacity: 0, transform: "translateY(40%)", offset: 0.4 }, { opacity: 1, transform: "none" }],
547
+ timing
548
+ );
549
+ }
550
+ var textOnly = (el) => el instanceof HTMLElement && el.childNodes.length > 0 && [...el.childNodes].every((n) => n.nodeType === Node.TEXT_NODE);
551
+ function settle(root, added, changed) {
552
+ const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
553
+ if (timing === void 0) return;
554
+ for (const el of added) {
555
+ if (ownMotion(el) || el.parentElement !== null && [...added].some((other) => other !== el && other.contains(el))) continue;
556
+ for (const box of boxesOf(el)) {
557
+ if (ownMotion(box)) continue;
558
+ box.animate([{ opacity: 0, transform: "translateY(6px)" }, { opacity: 1, transform: "none" }], timing);
559
+ }
560
+ }
561
+ for (const [el, oldText] of changed) {
562
+ if (ownMotion(el) || [...added].some((a) => a.contains(el))) continue;
563
+ if (oldText !== void 0 && oldText !== el.textContent && textOnly(el)) roll(el, oldText, timing);
564
+ else el.animate([{ opacity: 0.25 }, { opacity: 1 }], timing);
565
+ }
566
+ }
567
+ function blocks(root) {
568
+ const seen = /* @__PURE__ */ new Set();
569
+ for (const wrapper of root.querySelectorAll("[data-pattern]")) {
570
+ for (const box of boxesOf(wrapper)) if (!ownMotion(box)) seen.add(box);
571
+ }
572
+ return [...seen];
573
+ }
574
+ function glidePushed(root, places) {
575
+ const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
576
+ const origin = root.getBoundingClientRect();
577
+ const applied = /* @__PURE__ */ new Map();
578
+ const present = /* @__PURE__ */ new Set();
579
+ for (const el of blocks(root)) {
580
+ present.add(el);
581
+ if ((el.getAnimations?.() ?? []).length > 0) {
582
+ places.delete(el);
583
+ continue;
584
+ }
585
+ const box = el.getBoundingClientRect();
586
+ const now = { x: box.left - origin.left, y: box.top - origin.top };
587
+ const was = places.get(el);
588
+ places.set(el, now);
589
+ if (was === void 0 || timing === void 0) continue;
590
+ let inherited = { x: 0, y: 0 };
591
+ for (let up = el.parentElement; up !== null && up !== root; up = up.parentElement) {
592
+ const a = applied.get(up);
593
+ if (a !== void 0) {
594
+ inherited = a;
595
+ break;
596
+ }
597
+ }
598
+ const dx = was.x - now.x - inherited.x;
599
+ const dy = was.y - now.y - inherited.y;
600
+ if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) {
601
+ if (inherited.x !== 0 || inherited.y !== 0) applied.set(el, inherited);
602
+ continue;
603
+ }
604
+ const scale = layoutScale(el);
605
+ el.animate([{ transform: `translate(${dx / scale}px, ${dy / scale}px)` }, { transform: "none" }], { ...timing, composite: "add" });
606
+ applied.set(el, { x: inherited.x + dx, y: inherited.y + dy });
607
+ }
608
+ for (const el of places.keys()) if (!present.has(el)) places.delete(el);
609
+ }
610
+ function easeHeight(root) {
611
+ if (typeof ResizeObserver === "undefined") return () => void 0;
612
+ let rest;
613
+ let glide;
614
+ const sizes = new ResizeObserver(() => {
615
+ const scale = layoutScale(root);
616
+ const shown = root.getBoundingClientRect().height / scale;
617
+ const gliding = glide !== void 0 && glide.playState === "running";
618
+ glide?.cancel();
619
+ glide = void 0;
620
+ const height = root.getBoundingClientRect().height / scale;
621
+ const from = gliding ? shown : rest;
622
+ rest = height;
623
+ const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
624
+ if (from === void 0 || timing === void 0 || Math.abs(from - height) < 1) return;
625
+ glide = root.animate(
626
+ [{ height: `${from}px`, overflow: "clip" }, { height: `${height}px`, overflow: "clip" }],
627
+ timing
628
+ ) ?? void 0;
629
+ });
630
+ let watched = [];
631
+ const watch = () => {
632
+ const next = boxedChildren(root);
633
+ if (next.length === watched.length && next.every((el, i) => el === watched[i])) return;
634
+ watched = next;
635
+ sizes.disconnect();
636
+ for (const el of next) sizes.observe(el);
637
+ };
638
+ watch();
639
+ const children = new MutationObserver(watch);
640
+ children.observe(root, { childList: true, subtree: true });
641
+ return () => {
642
+ children.disconnect();
643
+ sizes.disconnect();
644
+ };
645
+ }
646
+ function useAnimateChanges(ref, enabled) {
647
+ useEffect(() => {
648
+ const root = ref.current;
649
+ if (!enabled || root === null) return;
650
+ return easeHeight(root);
651
+ }, [ref, enabled]);
652
+ useEffect(() => {
653
+ const root = ref.current;
654
+ if (!enabled || root === null || typeof MutationObserver === "undefined") return;
655
+ const observer = new MutationObserver((records) => {
656
+ const added = /* @__PURE__ */ new Set();
657
+ const changed = /* @__PURE__ */ new Map();
658
+ for (const record of records) {
659
+ if (record.type === "childList") {
660
+ for (const node of record.addedNodes) {
661
+ if (node instanceof Element) added.add(node);
662
+ else if (node.nodeType === Node.TEXT_NODE && node.parentElement !== null && changed.get(node.parentElement) === void 0) {
663
+ const removed = [...record.removedNodes].filter((n) => n.nodeType === Node.TEXT_NODE);
664
+ changed.set(node.parentElement, removed.length > 0 ? removed.map((n) => n.textContent ?? "").join("") : void 0);
665
+ }
666
+ }
667
+ } else if (record.type === "characterData") {
668
+ const el = record.target.parentElement;
669
+ if (el === null || changed.get(el) !== void 0) continue;
670
+ changed.set(el, [...el.childNodes].map((n) => n === record.target ? record.oldValue ?? "" : n.textContent ?? "").join(""));
671
+ }
672
+ }
673
+ glidePushed(root, places);
674
+ settle(root, added, changed);
675
+ });
676
+ const places = /* @__PURE__ */ new Map();
677
+ glidePushed(root, places);
678
+ observer.observe(root, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
679
+ return () => observer.disconnect();
680
+ }, [ref, enabled]);
681
+ }
425
682
  var paddingStyles = {
426
683
  none: "p-0",
427
684
  xs: "p-1",
@@ -486,7 +743,18 @@ var bgStyles = {
486
743
  muted: "bg-muted text-foreground",
487
744
  accent: "bg-accent text-accent-foreground",
488
745
  surface: "bg-card",
489
- overlay: "bg-card/80 backdrop-blur-sm"
746
+ overlay: "bg-card/80 backdrop-blur-sm",
747
+ gradient: "band-gradient",
748
+ inverse: "band-inverse"
749
+ };
750
+ var paddingRem = {
751
+ none: "0rem",
752
+ xs: "0.25rem",
753
+ sm: "0.5rem",
754
+ md: "1rem",
755
+ lg: "1.5rem",
756
+ xl: "2rem",
757
+ "2xl": "3rem"
490
758
  };
491
759
  var roundedStyles = {
492
760
  none: "rounded-none",
@@ -549,6 +817,13 @@ var Box = React.forwardRef(
549
817
  hoverEvent,
550
818
  tapReveal = true,
551
819
  maxWidth,
820
+ edgeTop = "none",
821
+ edgeBottom = "none",
822
+ edgeColor = "background",
823
+ edgeFlip = false,
824
+ texture = false,
825
+ animateChanges = false,
826
+ backdrop,
552
827
  onClick,
553
828
  onMouseEnter,
554
829
  onMouseLeave,
@@ -556,6 +831,13 @@ var Box = React.forwardRef(
556
831
  ...rest
557
832
  }, ref) => {
558
833
  const eventBus = useEventBus();
834
+ const ownRef = useRef(null);
835
+ useAnimateChanges(ownRef, animateChanges);
836
+ const setRef = useCallback((node) => {
837
+ ownRef.current = node;
838
+ if (typeof ref === "function") ref(node);
839
+ else if (ref !== null) ref.current = node;
840
+ }, [ref]);
559
841
  const { override: themeOverride } = useThemeScope();
560
842
  const declaredTheme = rest["data-theme"];
561
843
  const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
@@ -591,12 +873,25 @@ var Box = React.forwardRef(
591
873
  if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
592
874
  onPointerDown?.(e);
593
875
  }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
876
+ const isBand = backdrop != null || texture || edgeTop !== "none" || edgeBottom !== "none";
877
+ const padKey = paddingY ?? padding;
878
+ const bandStyle = {};
879
+ const padTop = padKey ? bandPadding(paddingRem[padKey], edgeTop) : void 0;
880
+ const padBottom = padKey ? bandPadding(paddingRem[padKey], edgeBottom) : void 0;
881
+ if (padTop) bandStyle.paddingTop = padTop;
882
+ if (padBottom) bandStyle.paddingBottom = padBottom;
883
+ const bandLayers = isBand ? /* @__PURE__ */ jsxs(Fragment, { children: [
884
+ backdrop != null && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-backdrop", children: backdrop }),
885
+ texture && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-texture" }),
886
+ edgeTop !== "none" && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-top", style: bandEdgeLayerStyle(edgeTop, "top", edgeFlip, edgeColor) }),
887
+ edgeBottom !== "none" && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-bottom", style: bandEdgeLayerStyle(edgeBottom, "bottom", edgeFlip, edgeColor) })
888
+ ] }) : null;
594
889
  const isClickable = action || onClick;
595
890
  const actionControl = action && rest.role === void 0 && rest.tabIndex === void 0 ? pressableProps(handleClick) : {};
596
891
  return React.createElement(
597
892
  Component,
598
893
  {
599
- ref,
894
+ ref: setRef,
600
895
  className: cn(
601
896
  padding && paddingStyles[padding],
602
897
  paddingX && paddingXStyles[paddingX],
@@ -614,6 +909,7 @@ var Box = React.forwardRef(
614
909
  overflow && overflowStyles[overflow],
615
910
  position && positionStyles[position],
616
911
  isClickable && "cursor-pointer",
912
+ isBand && "band",
617
913
  className
618
914
  ),
619
915
  onClick: isClickable ? handleClick : void 0,
@@ -621,11 +917,15 @@ var Box = React.forwardRef(
621
917
  onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
622
918
  onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
623
919
  onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
624
- style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
920
+ style: maxWidth || isBand ? { ...maxWidth ? { maxWidth } : {}, ...bandStyle, ...rest.style } : rest.style,
625
921
  ...rest,
626
- "data-theme": dataTheme
922
+ "data-theme": dataTheme,
923
+ "data-motion": animateChanges ? "presentation" : void 0
627
924
  },
628
- children
925
+ isBand ? /* @__PURE__ */ jsxs(Fragment, { children: [
926
+ bandLayers,
927
+ children
928
+ ] }) : children
629
929
  );
630
930
  }
631
931
  );
@@ -2057,6 +2357,10 @@ function resolveCanvasTheme(scope) {
2057
2357
  const c = r.color(toneVar(tone));
2058
2358
  tones[tone] = c ? colorCss(c) : "currentColor";
2059
2359
  }
2360
+ const surface = (name) => {
2361
+ const c = r.color(name);
2362
+ return c ? colorCss(c) : "transparent";
2363
+ };
2060
2364
  const ground = r.color("--surface-diagram");
2061
2365
  const text = {};
2062
2366
  const TEXT_FALLBACK = { xs: 12, sm: 14, base: 16, lg: 18, xl: 20, "2xl": 24 };
@@ -2064,6 +2368,11 @@ function resolveCanvasTheme(scope) {
2064
2368
  const body = r.family("--font-family-body", r.family("--font-family", "system-ui, sans-serif"));
2065
2369
  return {
2066
2370
  ground: ground ? colorCss(ground) : "transparent",
2371
+ surfaces: {
2372
+ muted: surface("--color-muted"),
2373
+ card: surface("--color-card"),
2374
+ onPrimary: surface("--color-primary-foreground")
2375
+ },
2067
2376
  tones,
2068
2377
  series: SERIES_TONES.map((t) => tones[t]),
2069
2378
  strokes: {
@@ -2499,4 +2808,4 @@ function rotatePoint(p, center, radians) {
2499
2808
  return { x: center.x + dx * cos - dy * sin, y: center.y + dx * sin + dy * cos };
2500
2809
  }
2501
2810
 
2502
- export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, STRETCHED_ABOVE, STRETCHED_CONTROL, Stack, THEME_SERIES, VStack, applyLineCharacter, applyMeshAnimation, applySceneMaterials, applyShapeAnimation, arcPoints, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, drawMarker, effectCategoryOf, effectZoneOf, expandFxLayer, fillLabel, fillMark, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, labelFont, labelText, markColor, markDash, markStrokeWidth, outlineCarriesFill, outlineStroke, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveDrawableColors, resolveThemeColor, rowOpenControlProps, spriteAssetState, spriteRect, subRectFor, tracePolyline, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, useCanvasTheme, withPreviewPosition, withSeries };
2811
+ export { AVL_FONT, AVL_INK, AVL_STROKE, Box, CONFETTI_BURST_KEYFRAMES, CONNECTION_COLORS, DrawFxLayer, DrawGroup, DrawMesh, DrawShape, DrawSkinnedMesh, DrawableRegistryContext, EFFECT_CATEGORY_COLORS, HStack, OPERATOR_CATEGORY_COLORS, SPRITE_FALLBACK_FILL, SPRITE_FALLBACK_STROKE, STATE_COLORS, STRETCHED_ABOVE, STRETCHED_CONTROL, Stack, THEME_SERIES, VStack, applyLineCharacter, applyMeshAnimation, applySceneMaterials, applyShapeAnimation, arcPoints, asEffectOperator, atlasFailed, atlasUrlOf, avlBlend, avlSeries, avlTint, blit, buildHitIndex, clampSegments, collectDrawnItems, createConfettiParticles, drawMarker, effectCategoryOf, effectZoneOf, expandFxLayer, fillLabel, fillMark, fxHash01, getAtlas, getImageStatus, getOrLoadImage, getStateRole, hitTestSprites, isAnimatedGroup, isAnimatedMesh, isAnimatedShape, isAtlasAsset, isSpriteSheetAtlas, isValidScenePos, labelFont, labelText, layoutScale, markColor, markDash, markStrokeWidth, motionTiming, outlineCarriesFill, outlineStroke, paintShape, paintSkinnedMesh, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, polyhedronBounds, pressableProps, resolveAssetSource, resolveDrawableColors, resolveThemeColor, rowOpenControlProps, spriteAssetState, spriteRect, subRectFor, tracePolyline, traitEventWires, traitLevelFromTrait, traitTransitionRenderUi, useCanvasTheme, withPreviewPosition, withSeries };
@@ -1,5 +1,5 @@
1
1
  import { cn, domPassthrough } from './chunk-64WACXM7.js';
2
- import { formatValue } from './chunk-723MJUU3.js';
2
+ import { formatValue } from './chunk-CXQENFO2.js';
3
3
  import React from 'react';
4
4
  import { useFormatContext } from '@almadar/ui/hooks';
5
5
 
@@ -1,5 +1,5 @@
1
- import { avlBlend, AVL_INK, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, avlTint, Box, VStack, effectCategoryOf } from './chunk-J755QADM.js';
2
- import { Typography } from './chunk-4ZGXIW3B.js';
1
+ import { avlBlend, AVL_INK, EFFECT_CATEGORY_COLORS, OPERATOR_CATEGORY_COLORS, avlTint, Box, VStack, effectCategoryOf } from './chunk-EDPUQ2ZJ.js';
2
+ import { Typography } from './chunk-ERDYADVZ.js';
3
3
  import { Vector3, QuadraticBezierCurve3, MathUtils, Quaternion } from 'three';
4
4
  import { EntityPersistenceSchema } from '@almadar/core';
5
5
  import { getStdOperatorMeta } from '@almadar/std/registry';