@almadar/ui 6.58.0 → 6.61.0

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

@@ -1,4 +1,4 @@
-import { D as DrawableNode } from './paintDispatch-BN8Vbzgs.js';
+import { D as DrawableNode } from './paintDispatch-Cp1_S93j.js';
 import { OrbitalVerificationAPI, TraitStateSnapshot, EventPayload, BusEvent, VerificationCheck, BridgeHealth, VerificationSnapshot, VerificationSummary, TransitionTrace, OrbitalEventRequest, OrbitalEventResponse, ServerResponseTrace, EffectTrace, CheckStatus, ServerEffectResult, AssetLoadStatus } from '@almadar/core';
 import { EventTransport } from '@almadar/runtime';
 
@@ -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": "لا توجد آلة حالة لعرضها",

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",

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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.58.0",
+  "version": "6.61.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -126,12 +126,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.120.0",
-    "@almadar/db": "^0.1.1",
-    "@almadar/evaluator": "^2.55.1",
+    "@almadar/core": "^10.123.0",
+    "@almadar/db": "^0.1.2",
+    "@almadar/evaluator": "^2.57.0",
     "@almadar/logger": "^1.17.0",
-    "@almadar/runtime": "^6.105.0",
-    "@almadar/std": "^16.245.0",
+    "@almadar/runtime": "^6.107.0",
+    "@almadar/std": "^16.248.0",
     "@almadar/syntax": "^1.19.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -192,7 +192,7 @@
     }
   },
   "devDependencies": {
-    "@almadar-io/behaviors": "^0.16.193",
+    "@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/_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;

package/themes/kiosk.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: 2;
     --diagram-stroke-normal: 3;
     --diagram-stroke-bold: 5;
@@ -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: 2;
     --diagram-stroke-normal: 3;
     --diagram-stroke-bold: 5;

package/themes/linear-clean.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 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: 1;
     --diagram-stroke-normal: 1;
     --diagram-stroke-bold: 1.5;
@@ -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 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: 1;
     --diagram-stroke-normal: 1;
     --diagram-stroke-bold: 1.5;