@almadar/ui 6.58.0 → 6.61.0

package/themes/material.css

@@ -200,6 +200,11 @@
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(rgba(103, 80, 164, 0.06), rgba(103, 80, 164, 0.06));
+    --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: 2;
     --diagram-stroke-bold: 3;
@@ -424,6 +429,11 @@
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(rgba(208, 188, 255, 0.08), rgba(208, 188, 255, 0.08));
+    --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: 2;
     --diagram-stroke-bold: 3;

package/themes/minimalist.css

@@ -193,6 +193,11 @@
     --corner-shape-pill: round;
     --border-style: none;
     --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: 2;
@@ -410,6 +415,11 @@
     --corner-shape-pill: round;
     --border-style: none;
     --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: 2;

package/themes/nata.css

@@ -0,0 +1,304 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/nata.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="nata-light"] {
+    --color-primary: #b45309;
+    --color-primary-hover: #92400e;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #fdf3e6;
+    --color-secondary-hover: #fbe6c8;
+    --color-secondary-foreground: #451a03;
+    --color-accent: #0f766e;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #f7f1e8;
+    --color-muted-foreground: #6b5a45;
+    --color-background: #fcfaf6;
+    --color-foreground: #1c1408;
+    --color-card: #ffffff;
+    --color-card-foreground: #1c1408;
+    --color-surface: #f8f2ea;
+    --color-border: #ece2d3;
+    --color-input: #dccdb6;
+    --color-ring: #b45309;
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #047857;
+    --color-success-foreground: #ffffff;
+    --color-warning: #b45309;
+    --color-warning-foreground: #ffffff;
+    --color-info: #0369a1;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(28, 20, 8, 0.55);
+    --color-series-1: #0891b2;
+    --color-series-2: #c026d3;
+    --color-series-3: #65a30d;
+    --color-series-4: #ea580c;
+    --color-series-5: #db2777;
+    --color-series-6: #2563eb;
+    --color-series-7: #854d0e;
+    --color-series-8: #0d9488;
+    --color-diagram-ink: #1c1408;
+    --color-diagram-label: #6b5a45;
+    --color-diagram-guide: #94a0bd;
+    --color-diagram-axis: #3b2e1c;
+    --color-diagram-grid: #ece2d3;
+    --color-diagram-highlight: #6d28d9;
+    --color-diagram-fill: #fde8c8;
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: currentColor;
+    --transition-fast: 120ms;
+    --transition-normal: 200ms;
+    --transition-slow: 320ms;
+    --transition-timing: cubic-bezier(0.2, 0, 0, 1);
+    --hover-scale: 1.0;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #4f46e5;
+    --font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --letter-spacing: -0.005em;
+    --line-height: 1.6;
+    --shadow-main: 0 8px 24px -8px rgba(79, 70, 229, 0.20), 0 2px 6px rgba(8, 145, 178, 0.08);
+    --shadow-sm: 0 2px 8px -2px rgba(79, 70, 229, 0.16);
+    --shadow-lg: 0 24px 48px -12px rgba(79, 70, 229, 0.28), 0 6px 16px rgba(8, 145, 178, 0.10);
+    --shadow-inner: inset 0 1px 2px rgba(79, 70, 229, 0.10);
+    --shadow-none: none;
+    --shadow-hover: 0 14px 32px -10px rgba(79, 70, 229, 0.32), 0 4px 10px rgba(16, 185, 129, 0.10);
+    --shadow-active: 0 2px 6px -2px rgba(79, 70, 229, 0.24);
+    --font-family-display: "Newsreader", "IBM Plex Sans Arabic", Georgia, serif;
+    --font-family-body: "Source Sans 3", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --heading-weight: 600;
+    --heading-transform: none;
+    --heading-tracking: -0.02em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --duration-instant: 0ms;
+    --duration-fast: 120ms;
+    --duration-normal: 200ms;
+    --duration-slow: 320ms;
+    --duration-dramatic: 640ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: translateY(12px) scale(0.98);
+    --motion-modal-exit-to-transform: scale(0.98);
+    --motion-popover-enter-from-transform: scale(0.97);
+    --motion-popover-exit-to-transform: scale(0.97);
+    --motion-toast-enter-from-transform: translateY(-12px);
+    --motion-toast-exit-to-transform: translateY(-12px);
+    --motion-page-enter-from-transform: translateY(10px);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-inner);
+    --radius-container: 8px;
+    --radius-interactive: 6px;
+    --radius-pill: 9999px;
+    --border-hairline: 1px;
+    --border-standard: 1px;
+    --border-heavy: 2px;
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-card-image: linear-gradient(135deg, rgba(180, 83, 9, 0.07) 0%, rgba(15, 118, 110, 0.05) 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;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.2;
+    --diagram-roughness: 0;
+    --diagram-glow: 2;
+    --diagram-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 8px;
+    --material-roughness: 0.25;
+    --material-metalness: 0.15;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.15;
+    --light-key-color: #eef2ff;
+    --scene-fog: 0.05;
+}
+
+[data-theme="nata-dark"] {
+    --color-primary: #fbbf24;
+    --color-primary-hover: #fcd34d;
+    --color-primary-foreground: #1c1408;
+    --color-secondary: #2a1f0e;
+    --color-secondary-hover: #3a2b14;
+    --color-secondary-foreground: #fdf3e6;
+    --color-accent: #2dd4bf;
+    --color-accent-foreground: #04201c;
+    --color-muted: #221a0d;
+    --color-muted-foreground: #c4b49b;
+    --color-background: #110c05;
+    --color-foreground: #f8f1e5;
+    --color-card: #1a140a;
+    --color-card-foreground: #f8f1e5;
+    --color-surface: #201810;
+    --color-border: #3a2e1c;
+    --color-input: #4d3d25;
+    --color-ring: #fbbf24;
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #34d399;
+    --color-success-foreground: #022c22;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #22d3ee;
+    --color-series-2: #e879f9;
+    --color-series-3: #a3e635;
+    --color-series-4: #fb923c;
+    --color-series-5: #f472b6;
+    --color-series-6: #60a5fa;
+    --color-series-7: #fef08a;
+    --color-series-8: #2dd4bf;
+    --color-diagram-ink: #f8f1e5;
+    --color-diagram-label: #c4b49b;
+    --color-diagram-guide: #5d6890;
+    --color-diagram-axis: #e6d9c4;
+    --color-diagram-grid: #3a2e1c;
+    --color-diagram-highlight: #c4b5fd;
+    --color-diagram-fill: #4a3714;
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: currentColor;
+    --transition-fast: 120ms;
+    --transition-normal: 200ms;
+    --transition-slow: 320ms;
+    --transition-timing: cubic-bezier(0.2, 0, 0, 1);
+    --hover-scale: 1.0;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #818cf8;
+    --font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --letter-spacing: -0.005em;
+    --line-height: 1.6;
+    --shadow-main: 0 8px 28px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(129, 140, 248, 0.08);
+    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.7), 0 0 32px -8px rgba(99, 102, 241, 0.25);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-none: none;
+    --shadow-hover: 0 14px 36px -10px rgba(99, 102, 241, 0.35);
+    --shadow-active: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
+    --font-family-display: "Newsreader", "IBM Plex Sans Arabic", Georgia, serif;
+    --font-family-body: "Source Sans 3", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --heading-weight: 600;
+    --heading-transform: none;
+    --heading-tracking: -0.02em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --duration-instant: 0ms;
+    --duration-fast: 120ms;
+    --duration-normal: 200ms;
+    --duration-slow: 320ms;
+    --duration-dramatic: 640ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: translateY(12px) scale(0.98);
+    --motion-modal-exit-to-transform: scale(0.98);
+    --motion-popover-enter-from-transform: scale(0.97);
+    --motion-popover-exit-to-transform: scale(0.97);
+    --motion-toast-enter-from-transform: translateY(-12px);
+    --motion-toast-exit-to-transform: translateY(-12px);
+    --motion-page-enter-from-transform: translateY(10px);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-inner);
+    --radius-container: 8px;
+    --radius-interactive: 6px;
+    --radius-pill: 9999px;
+    --border-hairline: 1px;
+    --border-standard: 1px;
+    --border-heavy: 2px;
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-card-image: linear-gradient(135deg, rgba(129, 140, 248, 0.10) 0%, rgba(34, 211, 238, 0.06) 55%, rgba(52, 211, 153, 0.07) 100%);
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.2;
+    --diagram-roughness: 0;
+    --diagram-glow: 2;
+    --diagram-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 8px;
+    --material-roughness: 0.25;
+    --material-metalness: 0.15;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.15;
+    --light-key-color: #eef2ff;
+    --scene-fog: 0.05;
+}

package/themes/neon.css

@@ -194,6 +194,11 @@
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-page-image: radial-gradient(circle at 20% 10%, rgba(34,211,238,0.10), transparent 45%), radial-gradient(circle at 80% 90%, rgba(244,114,182,0.10), transparent 45%);
+    --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 L1440 0 V100 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='160' height='80'><path d='M0 20 C40 0 80 40 120 20 S160 0 160 20 M0 60 C40 40 80 80 120 60 S160 40 160 60' fill='none' stroke='black' stroke-width='1.5'/></svg>");
+    --surface-texture-size: 160px 80px;
+    --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: 2;
     --diagram-stroke-bold: 3;
@@ -414,6 +419,11 @@
     --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30'><path d='M0 .5h60M0 15.5h60M30 .5v15M0 15.5v15M60 15.5v15' stroke='%23ffffff' stroke-opacity='.06' fill='none'/></svg>");
     --surface-page-image-size: 60px 30px;
     --surface-diagram: #050a1a;
+    --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 L1440 0 V100 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='160' height='80'><path d='M0 20 C40 0 80 40 120 20 S160 0 160 20 M0 60 C40 40 80 80 120 60 S160 40 160 60' fill='none' stroke='black' stroke-width='1.5'/></svg>");
+    --surface-texture-size: 160px 80px;
+    --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: 2;
     --diagram-stroke-bold: 3;

package/themes/notion-editorial.css

@@ -200,6 +200,11 @@
     --corner-shape-pill: round;
     --border-style: none;
     --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='32' height='32'><path d='M0 31.5H32' stroke='black' stroke-width='1'/></svg>");
+    --surface-texture-size: 32px 32px;
+    --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.5;
     --diagram-stroke-bold: 2.5;
@@ -424,6 +429,11 @@
     --corner-shape-pill: round;
     --border-style: none;
     --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='32' height='32'><path d='M0 31.5H32' stroke='black' stroke-width='1'/></svg>");
+    --surface-texture-size: 32px 32px;
+    --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.5;
     --diagram-stroke-bold: 2.5;

package/themes/orb.css

@@ -201,6 +201,11 @@
     --surface-card-image: none;
     --surface-page-image: repeating-radial-gradient(circle at 92% -8%, transparent 0 95px, rgba(20,22,26,0.05) 96px 97px);
     --surface-page-image-size: auto;
+    --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='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;
@@ -426,6 +431,11 @@
     --surface-card-image: none;
     --surface-page-image: repeating-radial-gradient(circle at 92% -8%, transparent 0 95px, rgba(236,235,230,0.05) 96px 97px);
     --surface-page-image-size: auto;
+    --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='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/prism.css

@@ -123,6 +123,11 @@
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(135deg, rgba(109, 63, 214, 0.08) 0%, rgba(236, 72, 153, 0.05) 50%, rgba(194, 65, 12, 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;
@@ -270,6 +275,11 @@
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(135deg, rgba(167, 139, 250, 0.14) 0%, rgba(236, 72, 153, 0.08) 50%, rgba(190, 242, 100, 0.10) 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;