@almadar/ui 6.59.0 → 6.62.0

package/dist/{verificationRegistry-B3dj1Zl8.d.ts → verificationRegistry-B5aGl7WF.d.ts}

@@ -80,6 +80,7 @@ declare function bindEventBus(eventBus: {
     emit: (type: string, payload?: EventPayload) => void;
     onAny?: (listener: (event: BusEvent) => void) => () => void;
 }): void;
+declare function bindConfigApplier(applyConfig: NonNullable<OrbitalVerificationAPI['applyConfig']>): () => void;
 /**
  * Bind a trait state getter so automation can query current states.
  */
@@ -114,4 +115,4 @@ declare function bindLastDrawables(getDrawables: () => DrawableNode[] | null): v
 declare function updateAssetStatus(url: string, status: AssetLoadStatus): void;
 declare function clearVerification(): void;
 
-export { type TraitSnapshotGetter as T, bindEventBus as a, bindCanvasCapture as b, bindLastDrawables as c, bindTraitStateGetter as d, clearVerification as e, getBridgeHealth as f, getAllChecks as g, getSnapshot as h, getSummary as i, getTraitSnapshots as j, getTransitions as k, getTransitionsForTrait as l, recordServerResponse as m, recordTransition as n, recordingTransport as o, registerCheck as p, registerTraitSnapshot as q, recordOrbitalResponse as r, serverEffectTraces as s, subscribeToVerification as t, updateAssetStatus as u, updateBridgeHealth as v, updateCheck as w, waitForTransition as x };
+export { type TraitSnapshotGetter as T, bindConfigApplier as a, bindCanvasCapture as b, bindEventBus as c, bindLastDrawables as d, bindTraitStateGetter as e, clearVerification as f, getAllChecks as g, getBridgeHealth as h, getSnapshot as i, getSummary as j, getTraitSnapshots as k, getTransitions as l, getTransitionsForTrait as m, recordServerResponse as n, recordTransition as o, recordingTransport as p, registerCheck as q, recordOrbitalResponse as r, registerTraitSnapshot as s, serverEffectTraces as t, subscribeToVerification as u, updateAssetStatus as v, updateBridgeHealth as w, updateCheck as x, waitForTransition as y };

package/locales/ar.json

@@ -129,7 +129,6 @@
   "aria.upvote": "تصويت إيجابي",
   "aria.downvote": "تصويت سلبي",
   "aria.qrScanner": "ماسح QR",
-  "aria.mockScanDev": "مسح تجريبي (تطوير)",
   "aria.openMenu": "فتح القائمة",
   "aria.closeMenu": "إغلاق القائمة",
   "aria.openSidebar": "فتح الشريط الجانبي",
@@ -327,7 +326,6 @@
   "qrScanner.pauseScanning": "إيقاف المسح مؤقتًا",
   "qrScanner.switchToFrontCamera": "التبديل إلى الكاميرا الأمامية",
   "qrScanner.switchToRearCamera": "التبديل إلى الكاميرا الخلفية",
-  "qrScanner.mockScan": "مسح تجريبي",
   "docSearch.placeholder": "البحث في الوثائق...",
   "stateMachine.loading": "جارٍ تحميل آلة الحالة…",
   "stateMachine.noStateMachine": "لا توجد آلة حالة لعرضها",
@@ -1253,5 +1251,6 @@
   "avl.stateInitial": "البداية",
   "avl.stateTerminal": "النهاية",
   "avl.guardCaption": "لا يحدث الانتقال إلا عندما يكون هذا الشرط صحيحًا.",
-  "avl.effectsCaption": "ما يُنفَّذ، بالترتيب، عند حدوث الانتقال."
+  "avl.effectsCaption": "ما يُنفَّذ، بالترتيب، عند حدوث الانتقال.",
+  "aria.carousel": "عرض شرائح"
 }

package/locales/en.json

@@ -133,7 +133,6 @@
   "aria.upvote": "Upvote",
   "aria.downvote": "Downvote",
   "aria.qrScanner": "QR scanner",
-  "aria.mockScanDev": "Mock scan (dev)",
   "aria.openMenu": "Open menu",
   "aria.closeMenu": "Close menu",
   "aria.openSidebar": "Open sidebar",
@@ -331,7 +330,6 @@
   "qrScanner.pauseScanning": "Pause scanning",
   "qrScanner.switchToFrontCamera": "Switch to front camera",
   "qrScanner.switchToRearCamera": "Switch to rear camera",
-  "qrScanner.mockScan": "Mock Scan",
   "docSearch.placeholder": "Search documentation...",
   "stateMachine.loading": "Loading state machine…",
   "stateMachine.noStateMachine": "No state machine to visualize",
@@ -1253,5 +1251,6 @@
   "avl.stateInitial": "start",
   "avl.stateTerminal": "end",
   "avl.guardCaption": "The transition only fires when this check is true.",
-  "avl.effectsCaption": "What runs, in order, when the transition fires."
+  "avl.effectsCaption": "What runs, in order, when the transition fires.",
+  "aria.carousel": "carousel"
 }

package/locales/sl.json

@@ -129,7 +129,6 @@
   "aria.upvote": "Glasuj za",
   "aria.downvote": "Glasuj proti",
   "aria.qrScanner": "QR skener",
-  "aria.mockScanDev": "Simuliraj skeniranje (dev)",
   "aria.openMenu": "Odpri meni",
   "aria.closeMenu": "Zapri meni",
   "aria.openSidebar": "Odpri stransko vrstico",
@@ -327,7 +326,6 @@
   "qrScanner.pauseScanning": "Začasno ustavi skeniranje",
   "qrScanner.switchToFrontCamera": "Preklopi na sprednjo kamero",
   "qrScanner.switchToRearCamera": "Preklopi na zadnjo kamero",
-  "qrScanner.mockScan": "Preizkusno skeniranje",
   "docSearch.placeholder": "Iskanje po dokumentaciji...",
   "stateMachine.loading": "Nalaganje stanjskega stroja…",
   "stateMachine.noStateMachine": "Ni stanjskega stroja za prikaz",
@@ -1253,5 +1251,6 @@
   "avl.stateInitial": "začetek",
   "avl.stateTerminal": "konec",
   "avl.guardCaption": "Prehod se zgodi le, ko je ta pogoj izpolnjen.",
-  "avl.effectsCaption": "Kaj se izvede, po vrsti, ko se prehod zgodi."
+  "avl.effectsCaption": "Kaj se izvede, po vrsti, ko se prehod zgodi.",
+  "aria.carousel": "vrtiljak"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.59.0",
+  "version": "6.62.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -126,13 +126,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.121.0",
-    "@almadar/db": "^0.1.1",
-    "@almadar/evaluator": "^2.56.0",
+    "@almadar/core": "^10.124.0",
+    "@almadar/db": "^0.1.3",
+    "@almadar/evaluator": "^2.58.0",
     "@almadar/logger": "^1.17.0",
-    "@almadar/runtime": "^6.106.0",
-    "@almadar/std": "^16.246.0",
-    "@almadar/syntax": "^1.19.1",
+    "@almadar/runtime": "^6.108.0",
+    "@almadar/std": "^16.248.0",
+    "@almadar/syntax": "^1.20.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -192,7 +192,7 @@
     }
   },
   "devDependencies": {
-    "@almadar-io/behaviors": "^0.16.194",
+    "@almadar-io/behaviors": "^0.16.198",
     "@almadar/eslint-plugin": "^2.21.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",

package/tailwind-preset.cjs

@@ -33,6 +33,9 @@ const { allDesignClasses } = require('./dist/design-classes/index.cjs');
 module.exports = {
   darkMode: 'class',
   safelist: [
+  'proof-marquee', 'proof-marquee-track', 'animate-almadar-marquee',
+  'hover:[animation-play-state:paused]', 'motion-reduce:animate-none', 'motion-reduce:w-auto',
+  'motion-reduce:flex-wrap', 'motion-reduce:justify-center', 'motion-reduce:hidden', 'motion-reduce:[mask-image:none]',
   ...allDesignClasses(),
   // Standard utilities used via dynamic className from .orb schemas
   'contents',
@@ -46,9 +49,9 @@ module.exports = {
   'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4',
   'sm:grid-cols-2', 'md:grid-cols-2', 'md:grid-cols-3', 'lg:grid-cols-3', 'lg:grid-cols-4',
   'text-center', 'text-left', 'text-right',
-  // Split composes its column widths as `${breakpoint}${ratio}` at runtime
-  ...['sm:', 'md:', 'lg:', 'xl:'].flatMap((bp) => [
-    'w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-1/5', 'w-4/5', 'w-2/5', 'w-3/5', 'flex-row-reverse',
+  // Split composes its stacking classes as `${containerBreakpoint}${cls}` at runtime
+  ...['@sm:', '@md:', '@lg:', '@xl:'].flatMap((bp) => [
+    'w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-1/5', 'w-4/5', 'w-2/5', 'w-3/5', 'flex-row', 'flex-row-reverse',
   ].map((cls) => `${bp}${cls}`)),
   // Non-theme CSS variable classes (no semantic equivalent in theme config)
   'active:scale-[var(--active-scale)]',
@@ -429,10 +432,10 @@ module.exports = {
   'max-h-[80%]',
   'max-w-[1440px]',
   'max-w-[16rem]',
-  'min-w-[min(400px,100%)]',
-  'min-w-[min(520px,100%)]',
-  'min-w-[min(600px,100%)]',
-  'min-w-[min(700px,100%)]',
+  'min-w-[min(theme(minWidth.modal-sm),100%)]',
+  'min-w-[min(theme(minWidth.modal-md),100%)]',
+  'min-w-[min(theme(minWidth.modal-lg),100%)]',
+  'min-w-[min(theme(minWidth.modal-xl),100%)]',
   'pb-[calc(5rem+env(safe-area-inset-bottom))]',
   'pb-[env(safe-area-inset-bottom)]',
   'pt-[10%]',
@@ -601,6 +604,10 @@ module.exports = {
         spring: 'var(--easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1))',
       },
       keyframes: {
+        'almadar-marquee': {
+          from: { transform: 'translateX(0)' },
+          to: { transform: 'translateX(var(--marquee-shift, -50%))' },
+        },
         'modal-in': {
           '0%': {
             opacity: 'var(--motion-modal-enter-from-opacity, 0)',
@@ -733,6 +740,7 @@ module.exports = {
         },
       },
       animation: {
+        'almadar-marquee': 'almadar-marquee 40s linear infinite',
         // Motion-token-driven durations/easings (fall back to legacy
         // --transition-* so themes that haven't migrated keep working).
         'modal-in': 'modal-in var(--duration-normal, var(--transition-normal, 250ms)) var(--easing-standard, var(--transition-timing, cubic-bezier(0.4, 0, 0.2, 1)))',
@@ -817,6 +825,12 @@ module.exports = {
         'row-normal': 'var(--row-height-normal, 40px)',
         'row-spacious': 'var(--row-height-spacious, 48px)',
       },
+      minWidth: {
+        'modal-sm': '25rem',
+        'modal-md': '32.5rem',
+        'modal-lg': '37.5rem',
+        'modal-xl': '43.75rem',
+      },
       width: {
         'icon-default': 'var(--icon-default-size, 16px)',
       },
@@ -848,7 +862,9 @@ module.exports = {
     // Chrome-skin utilities: sprite-driven panel/button chrome, opt-in per theme.
     // No-op (`none`) unless the active theme defines the backing --game-* vars —
     // zero visual change for every theme that doesn't set them.
-    require('tailwindcss/plugin')(({ addUtilities }) => {
+    require('tailwindcss/plugin')(({ addBase, addUtilities }) => {
+      // AnimatedReveal marks a band away from the viewport; nothing inside it needs to animate.
+      addBase({ '[data-on-screen="false"] *': { 'animation-play-state': 'paused !important' } });
       addUtilities({
         '.chrome-panel': {
           'border-image-source': 'var(--game-panel-border-image, none)',
@@ -884,6 +900,60 @@ module.exports = {
           'border-radius': 'var(--surface-content-radius, var(--radius-container, var(--radius-md)))',
           'box-shadow': 'var(--surface-content-shadow, var(--elevation-card, var(--shadow-sm)))',
         },
+        // Logo / wordmark marquee (std-proof `proofLook: marquee`): two copies of the strip scroll as one loop.
+        '.proof-marquee': {
+          overflow: 'hidden',
+          'mask-image': 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
+          '-webkit-mask-image': 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)',
+        },
+        '.proof-marquee-track': { display: 'flex', width: 'max-content' },
+        // An RTL strip starts at the right edge, so the loop slides right.
+        '[dir="rtl"] .proof-marquee-track': { '--marquee-shift': '50%' },
+        // Full-width band layers (Box edgeTop/edgeBottom/texture/backdrop, std-hero scrim).
+        '.band': { position: 'relative', overflow: 'hidden', isolation: 'isolate' },
+        '.band > :not([data-band-layer])': { position: 'relative', 'z-index': '1' },
+        '.band-backdrop': { position: 'absolute', inset: '0', 'pointer-events': 'none', 'z-index': '0' },
+        '.band-backdrop img': { width: '100%', height: '100%', 'object-fit': 'cover' },
+        '.band-scrim': {
+          position: 'absolute', inset: '0', 'pointer-events': 'none', 'z-index': '0',
+          'background-image': 'var(--surface-scrim, linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.15)))',
+        },
+        '.band-texture': {
+          position: 'absolute', inset: '0', 'pointer-events': 'none', 'z-index': '0',
+          'background-color': 'color-mix(in oklab, var(--color-primary) 14%, transparent)',
+          'mask-image': "var(--surface-texture-mask, url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>\"))",
+          '-webkit-mask-image': "var(--surface-texture-mask, url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>\"))",
+          'mask-size': 'var(--surface-texture-size, 24px 24px)',
+          '-webkit-mask-size': 'var(--surface-texture-size, 24px 24px)',
+          'mask-repeat': 'repeat',
+          '-webkit-mask-repeat': 'repeat',
+        },
+        '.band-edge': {
+          position: 'absolute', left: '0', right: '0', 'pointer-events': 'none', 'z-index': '0',
+          'mask-size': '100% 100%', '-webkit-mask-size': '100% 100%',
+          'mask-repeat': 'no-repeat', '-webkit-mask-repeat': 'no-repeat',
+        },
+        '.band-edge-top': { top: '0' },
+        '.band-edge-bottom': { bottom: '0' },
+        '.band-gradient': {
+          'background-color': 'var(--color-muted)',
+          'background-image': 'var(--surface-accent-image, linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 12%, var(--color-background)), var(--color-background)))',
+          color: 'var(--color-foreground)',
+        },
+        '.band-inverse': {
+          '--band-fg': 'var(--color-foreground)',
+          '--band-bg': 'var(--color-background)',
+          'background-color': 'var(--color-foreground)',
+          color: 'var(--color-background)',
+        },
+        '.band-inverse > :not([data-band-layer])': {
+          '--color-foreground': 'var(--band-bg)',
+          '--color-background': 'var(--band-fg)',
+          '--color-card': 'color-mix(in oklab, var(--band-fg) 90%, var(--band-bg))',
+          '--color-muted': 'color-mix(in oklab, var(--band-fg) 85%, var(--band-bg))',
+          '--color-muted-foreground': 'color-mix(in oklab, var(--band-bg) 72%, var(--band-fg))',
+          '--color-border': 'color-mix(in oklab, var(--band-bg) 22%, var(--band-fg))',
+        },
         // Surface material on the page background (app shell / themed root).
         '.surface-page': {
           'background-image': 'var(--surface-page-image, none)',

package/themes/_base.css

@@ -321,6 +321,33 @@
 .almadar-enter-delay-7 { --enter-index: 7; }
 .almadar-enter-delay-8 { --enter-index: 8; }
 
+/* SVG atom motion (`lib/svgMotion.ts`). One dash period of the `8 6` dash per loop. */
+@keyframes almadar-svg-flow-dash {
+    from { stroke-dashoffset: 14; }
+    to { stroke-dashoffset: 0; }
+}
+.almadar-svg-flow-dash {
+    animation: almadar-svg-flow-dash 1s linear infinite;
+}
+@keyframes almadar-svg-pulse-ring {
+    from { transform: scale(0.6); opacity: 0.3; }
+    to { transform: scale(1); opacity: 0; }
+}
+.almadar-svg-pulse-ring {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: almadar-svg-pulse-ring 2s ease-out infinite;
+}
+@keyframes almadar-svg-pulse-expand {
+    from { transform: scale(0.3); opacity: 0.4; }
+    to { transform: scale(1); opacity: 0; }
+}
+.almadar-svg-pulse-expand {
+    transform-box: fill-box;
+    transform-origin: center;
+    animation: almadar-svg-pulse-expand 2s ease-out infinite;
+}
+
 /* The shimmer gradient background. Pair with the `animate-shimmer` utility
  * (defined in tailwind-preset) which sweeps background-position. */
 .almadar-shimmer {

package/themes/_contract.md

@@ -241,6 +241,12 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 | `surface.contentBorderColor` | `--surface-content-border-color` | `.surface-content` | `--color-border` |
 | `surface.contentRadius` | `--surface-content-radius` | `.surface-content` | `--radius-container` |
 | `surface.contentShadow` | `--surface-content-shadow` | `.surface-content` | `--elevation-card` |
+| `surface.edgeMask` | `--surface-edge-mask` | `.band-edge` (Box `edgeTop`/`edgeBottom: curve`) | `none` (straight edge) |
+| `surface.edgeHeight` | `--surface-edge-height` | `.band-edge` (curve only) | `clamp(24px, 6vw, 96px)` |
+| `surface.textureMask` | `--surface-texture-mask` | `.band-texture` (Box `texture`) | built-in dot tile |
+| `surface.textureSize` | `--surface-texture-size` | `.band-texture` | `24px 24px` |
+| `surface.accentImage` | `--surface-accent-image` | `.band-gradient` (Box `bg: gradient`) | faint primary-tinted linear gradient |
+| `surface.scrim` | `--surface-scrim` | `.band-scrim` (std-hero `surface: image`) | dark bottom-up gradient |
 
 | `motion.shapes.modalEnter` / `modalExit` | `--motion-modal-enter-from-transform` / `--motion-modal-exit-to-transform` | `Modal` (every modal slot: runtime, contained preview, compiled) | `scale(.96) translateY(8px)` / `scale(.92) translateY(16px)` |
 | `motion.shapes.popoverEnter` / `popoverExit` | `--motion-popover-enter-from-transform` / `--motion-popover-exit-to-transform` | `Popover`, menus | `scale(.95)` |

package/themes/_fonts.css

@@ -4,9 +4,9 @@
  * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Anton&family=Archivo:wght@400;500;700;800&family=Archivo+Black&family=Baloo+2:wght@500;600;700;800&family=Bangers&family=Bungee&family=Cairo:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,500;1,700&family=Crimson+Pro:wght@500;600;700&family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&family=DotGothic16&family=EB+Garamond:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Fredoka:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Hanken+Grotesk:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=IM+Fell+English&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500;700&family=Josefin+Sans:wght@400;500;700&family=Jost:wght@300;400;500;700;800&family=Kalam:wght@300;400;700&family=Karla:wght@400;500;700&family=Libre+Baskerville:wght@400;700&family=Lilita+One&family=Limelight&family=Lora:wght@400;500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Ma+Shan+Zheng&family=Manrope:wght@400;500;600;700;800&family=MedievalSharp&family=Newsreader:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400;500;700&family=Noto+Sans:wght@400;500;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;500;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&family=Nunito:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Old+Standard+TT&family=Orbitron:wght@500;700;900&family=Oswald:wght@500;700&family=Outfit:wght@300;400;500;600&family=Patrick+Hand&family=Pixelify+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,500;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poiret+One&family=Poppins:wght@500;600;700&family=Press+Start+2P&family=Quicksand:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;500;700&family=Roboto+Flex:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Rubik:wght@400;500;700&family=Rubik+Mono+One&family=Russo+One&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Share+Tech+Mono&family=Shippori+Mincho:wght@400;500&family=Shrikhand&family=Silkscreen:wght@400;700&family=Sora:wght@400;600;700&family=Space+Mono:wght@400;700&family=Special+Elite&family=Tilt+Neon&family=UnifrakturCook:wght@700&family=VT323&family=Work+Sans:wght@400;500;600;700&family=Zen+Antique&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Anton&family=Archivo:wght@400;500;700;800&family=Archivo+Black&family=Baloo+2:wght@500;600;700;800&family=Bangers&family=Bricolage+Grotesque:wght@500;600;700&family=Bungee&family=Cairo:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,500;1,700&family=Crimson+Pro:wght@500;600;700&family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&family=DotGothic16&family=EB+Garamond:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Fredoka:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Hanken+Grotesk:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=IM+Fell+English&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Josefin+Sans:wght@400;500;700&family=Jost:wght@300;400;500;700;800&family=Kalam:wght@300;400;700&family=Karla:wght@400;500;700&family=Libre+Baskerville:wght@400;700&family=Lilita+One&family=Limelight&family=Lora:wght@400;500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Ma+Shan+Zheng&family=Manrope:wght@400;500;600;700;800&family=MedievalSharp&family=Newsreader:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;700&family=Noto+Sans:wght@400;500;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Mono:wght@400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700&family=Nunito:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Old+Standard+TT&family=Orbitron:wght@500;700;900&family=Oswald:wght@500;700&family=Outfit:wght@300;400;500;600&family=Patrick+Hand&family=Pixelify+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,500;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poiret+One&family=Poppins:wght@500;600;700&family=Press+Start+2P&family=Quicksand:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;500;700&family=Roboto+Flex:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Rubik:wght@400;500;700&family=Rubik+Mono+One&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Russo+One&family=Schibsted+Grotesk:wght@400;500;600;700&family=Share+Tech+Mono&family=Shippori+Mincho:wght@400;500&family=Shrikhand&family=Silkscreen:wght@400;700&family=Sora:wght@400;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Special+Elite&family=Tilt+Neon&family=UnifrakturCook:wght@700&family=VT323&family=Work+Sans:wght@400;500;600;700&family=Zen+Antique&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap");

package/themes/_foundation.css

@@ -92,3 +92,14 @@
     font-style: var(--heading-style, normal);
     text-shadow: var(--heading-shadow, none);
 }
+
+/* Presentation motion: a subtree whose changes are there to be watched (a live demo,
+ * `Box animateChanges`) plays them over the theme's dramatic duration with its standard
+ * ease-in-out instead of the snappy emphasized timing. Lives here because every app
+ * (runtime and compiled) loads the foundation; doubled attribute so it wins over a
+ * `[data-theme]` block on the same element. */
+[data-motion="presentation"][data-motion] {
+    --duration-normal: var(--duration-dramatic, 600ms);
+    --duration-slow: var(--duration-dramatic, 600ms);
+    --easing-emphasized: var(--easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
+}

package/themes/_presets.css

@@ -40,6 +40,7 @@
 @import "./mid-century.css";
 @import "./minimalist.css";
 @import "./mudcloth.css";
+@import "./nata.css";
 @import "./neon.css";
 @import "./neumorphic.css";
 @import "./newsprint.css";
@@ -47,6 +48,7 @@
 @import "./orb.css";
 @import "./pixel.css";
 @import "./prism.css";
+@import "./rawi.css";
 @import "./retro.css";
 @import "./risograph.css";
 @import "./scandi.css";

package/themes/almadar-website.css

@@ -101,6 +101,11 @@
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 0.75px;
     --diagram-stroke-normal: 1.5px;
     --diagram-stroke-bold: 2.25px;
@@ -230,6 +235,11 @@
     --border-hairline: 1px;
     --border-standard: var(--border-width);
     --border-heavy: var(--border-width-thick);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 0.75px;
     --diagram-stroke-normal: 1.5px;
     --diagram-stroke-bold: 2.25px;

package/themes/almadar.css

@@ -103,6 +103,11 @@
     --border-heavy: var(--border-width-thick);
     --corner-shape: squircle;
     --surface-card-image: linear-gradient(160deg, rgba(20,184,166,0.07), rgba(20,184,166,0) 55%);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 1px;
     --diagram-stroke-normal: 2px;
     --diagram-stroke-bold: 3px;
@@ -230,6 +235,11 @@
     --border-heavy: var(--border-width-thick);
     --corner-shape: squircle;
     --surface-card-image: linear-gradient(160deg, rgba(20,184,166,0.07), rgba(20,184,166,0) 55%);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 1px;
     --diagram-stroke-normal: 2px;
     --diagram-stroke-bold: 3px;

package/themes/atelier.css

@@ -200,6 +200,11 @@
     --corner-shape-pill: squircle;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 1px;
     --diagram-stroke-normal: 1.5px;
     --diagram-stroke-bold: 2px;
@@ -424,6 +429,11 @@
     --corner-shape-pill: squircle;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 1px;
     --diagram-stroke-normal: 1.5px;
     --diagram-stroke-bold: 2px;

package/themes/bauhaus.css

@@ -199,6 +199,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 Q720 0 1440 100 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 .5H40M.5 0V40' stroke='black' stroke-width='1' fill='none'/></svg>");
+    --surface-texture-size: 40px 40px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 3px;
     --diagram-stroke-normal: 5px;
     --diagram-stroke-bold: 8px;
@@ -422,6 +427,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 Q720 0 1440 100 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 .5H40M.5 0V40' stroke='black' stroke-width='1' fill='none'/></svg>");
+    --surface-texture-size: 40px 40px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 3px;
     --diagram-stroke-normal: 5px;
     --diagram-stroke-bold: 8px;

package/themes/bloomberg-dense.css

@@ -200,6 +200,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: none;
+    --surface-edge-height: 0px;
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 .5H40M.5 0V40' stroke='black' stroke-width='1' fill='none'/></svg>");
+    --surface-texture-size: 40px 40px;
+    --surface-accent-image: none;
     --diagram-stroke-thin: 0.75px;
     --diagram-stroke-normal: 1px;
     --diagram-stroke-bold: 2px;
@@ -424,6 +429,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: none;
+    --surface-edge-height: 0px;
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 .5H40M.5 0V40' stroke='black' stroke-width='1' fill='none'/></svg>");
+    --surface-texture-size: 40px 40px;
+    --surface-accent-image: none;
     --diagram-stroke-thin: 0.75px;
     --diagram-stroke-normal: 1px;
     --diagram-stroke-bold: 2px;

package/themes/clay.css

@@ -193,6 +193,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 2px;
     --diagram-stroke-normal: 3px;
     --diagram-stroke-bold: 5px;
@@ -410,6 +415,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 2px;
     --diagram-stroke-normal: 3px;
     --diagram-stroke-bold: 5px;

package/themes/corporate.css

@@ -193,6 +193,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 Q720 0 1440 100 Z'/></svg>");
+    --surface-edge-height: clamp(16px, 4vw, 56px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 .5H40M.5 0V40' stroke='black' stroke-width='1' fill='none'/></svg>");
+    --surface-texture-size: 40px 40px;
+    --surface-accent-image: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)), var(--color-background));
     --diagram-stroke-thin: 1px;
     --diagram-stroke-normal: 1.5px;
     --diagram-stroke-bold: 2px;
@@ -410,6 +415,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 100 Q720 0 1440 100 Z'/></svg>");
+    --surface-edge-height: clamp(16px, 4vw, 56px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 .5H40M.5 0V40' stroke='black' stroke-width='1' fill='none'/></svg>");
+    --surface-texture-size: 40px 40px;
+    --surface-accent-image: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 8%, var(--color-background)), var(--color-background));
     --diagram-stroke-thin: 1px;
     --diagram-stroke-normal: 1.5px;
     --diagram-stroke-bold: 2px;

package/themes/gazette.css

@@ -193,6 +193,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: none;
+    --surface-edge-height: 0px;
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M0 31.5H32' stroke='black' stroke-width='1'/></svg>");
+    --surface-texture-size: 32px 32px;
+    --surface-accent-image: none;
     --diagram-stroke-thin: 0.75px;
     --diagram-stroke-normal: 1px;
     --diagram-stroke-bold: 2px;
@@ -410,6 +415,11 @@
     --corner-shape-pill: round;
     --border-style: solid;
     --border-style-interactive: solid;
+    --surface-edge-mask: none;
+    --surface-edge-height: 0px;
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M0 31.5H32' stroke='black' stroke-width='1'/></svg>");
+    --surface-texture-size: 32px 32px;
+    --surface-accent-image: none;
     --diagram-stroke-thin: 0.75px;
     --diagram-stroke-normal: 1px;
     --diagram-stroke-bold: 2px;

package/themes/glass.css

@@ -197,6 +197,11 @@
     --surface-card-image: linear-gradient(135deg, rgba(255,255,255,0.45), rgba(255,255,255,0.05));
     --surface-page-image: radial-gradient(60% 50% at 15% 10%, rgba(64,88,214,0.22), transparent 70%), radial-gradient(50% 45% at 85% 20%, rgba(194,65,122,0.14), transparent 70%), radial-gradient(55% 50% at 70% 90%, rgba(56,160,190,0.16), transparent 70%), radial-gradient(45% 40% at 10% 85%, rgba(64,88,214,0.12), transparent 70%);
     --surface-page-image-size: 100% 100%;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 1;
     --diagram-stroke-normal: 1.5;
     --diagram-stroke-bold: 2.5;
@@ -418,6 +423,11 @@
     --surface-card-image: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.01));
     --surface-page-image: radial-gradient(60% 50% at 15% 10%, rgba(138,160,255,0.28), transparent 70%), radial-gradient(50% 45% at 85% 20%, rgba(240,140,176,0.16), transparent 70%), radial-gradient(55% 50% at 70% 90%, rgba(56,160,190,0.16), transparent 70%), radial-gradient(45% 40% at 10% 85%, rgba(138,160,255,0.14), transparent 70%);
     --surface-page-image-size: 100% 100%;
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 1;
     --diagram-stroke-normal: 1.5;
     --diagram-stroke-bold: 2.5;

package/themes/kflow.css

@@ -123,6 +123,11 @@
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(135deg, rgba(99, 102, 241, 0.07) 0%, rgba(34, 211, 238, 0.05) 55%, rgba(16, 185, 129, 0.06) 100%);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
     --diagram-stroke-thin: 1px;
     --diagram-stroke-normal: 2px;
     --diagram-stroke-bold: 3px;