@almadar/ui 6.51.2 → 6.52.0

package/dist/{themeTokens-CN9WCXQc.d.ts → themeTokens-Ccu7EmGY.d.ts}

@@ -1,4 +1,4 @@
-import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant, DensityTokens, ElevationTokens, GeometryTokens, IconographyTokens, MotionDurationKey, MotionEasingKey, MotionIntentMap, MotionShapeTokens, SurfaceTokens, TypeScaleTokens, TypeIntentMap, TypeSizeKey } from '@almadar/core';
+import { ThemeRef, ThemeDefinition, ThemeTokens, ThemeVariant, DensityTokens, ElevationTokens, GeometryTokens, IconographyTokens, MotionDurationKey, MotionEasingKey, MotionIntentMap, MotionShapeTokens, SurfaceTokens, TypeScaleTokens, TypeIntentMap, TypeSizeKey, EnterAnimation } from '@almadar/core';
 
 /**
  * themeTokens — runtime mirror of the orbital compiler's theme codegen.
@@ -106,6 +106,8 @@ declare const LEGACY_PREFIXES: {
  * back to the base tokens.
  */
 declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, darkVariant?: ThemeVariant): Record<string, string>;
+/** The keyframe name an entry keyword plays (`none` stays `none`). */
+declare function enterKeyframe(enter: EnterAnimation): string;
 /**
  * `ThemeRef` is `ThemeDefinition | string`. When it's a string, it's an
  * unresolved import reference (e.g. `"Ocean.theme"`) that should have been
@@ -115,4 +117,4 @@ declare function themeTokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode, dar
  */
 declare function resolveThemeForRuntime(theme: ThemeRef | undefined): ThemeDefinition | undefined;
 
-export { DENSITY_ELEMENT_VARS as D, ELEVATION_VARS as E, type FlatVarEntry as F, GEOMETRY_VARS as G, ICONOGRAPHY_VARS as I, LEGACY_PREFIXES as L, MOTION_DURATION_KEYS as M, SURFACE_VARS as S, type ThemeMode as T, DENSITY_SPACING_VARS as a, MOTION_EASING_KEYS as b, MOTION_INTENT_VARS as c, MOTION_SHAPE_VARS as d, type StringValueKey as e, TYPE_FAMILY_VARS as f, TYPE_HEADING_VARS as g, TYPE_INTENT_VARS as h, TYPE_SIZE_KEYS as i, resolveThemeForRuntime as r, themeTokensToCssVars as t };
+export { DENSITY_ELEMENT_VARS as D, ELEVATION_VARS as E, type FlatVarEntry as F, GEOMETRY_VARS as G, ICONOGRAPHY_VARS as I, LEGACY_PREFIXES as L, MOTION_DURATION_KEYS as M, SURFACE_VARS as S, type ThemeMode as T, DENSITY_SPACING_VARS as a, MOTION_EASING_KEYS as b, MOTION_INTENT_VARS as c, MOTION_SHAPE_VARS as d, type StringValueKey as e, TYPE_FAMILY_VARS as f, TYPE_HEADING_VARS as g, TYPE_INTENT_VARS as h, TYPE_SIZE_KEYS as i, enterKeyframe as j, resolveThemeForRuntime as r, themeTokensToCssVars as t };

package/dist/{useUISlots-CwUWM1ra.d.ts → useUISlots-1dk2TR4j.d.ts}

@@ -33,10 +33,6 @@ import { UISlot, RenderItemLambda, EventPayloadValue } from '@almadar/core';
  * @packageDocumentation
  */
 
-/**
- * Animation types for slot transitions
- */
-type SlotAnimation = 'fade' | 'slide' | 'scale' | 'none';
 /**
  * Render-prop callback after fn-form-lambda conversion or
  * `wrapCallbackForEvent` wrapping. Pattern components consume these as
@@ -85,8 +81,6 @@ interface SlotContent {
     props: SlotProps | string;
     /** Priority for conflict resolution (higher wins) */
     priority: number;
-    /** Animation for showing/hiding */
-    animation?: SlotAnimation;
     /** Auto-dismiss timestamp (for toasts) */
     autoDismissAt?: number;
     /** Callback when dismissed */
@@ -116,8 +110,6 @@ interface SlotRenderConfig {
     props?: SlotProps | string;
     /** Priority (default: 0) */
     priority?: number;
-    /** Animation type */
-    animation?: SlotAnimation;
     /** Auto-dismiss after ms (for toasts) */
     autoDismissMs?: number;
     /** Callback on dismiss */
@@ -215,4 +207,4 @@ declare const DEFAULT_SLOTS: Partial<Record<UISlot, SlotContent | null>>;
  */
 declare function useUISlotManager(): UISlotManager;
 
-export { DEFAULT_SLOTS as D, type SlotAnimation as S, type UISlotManager as U, type SlotChangeCallback as a, type SlotContent as b, type SlotRenderConfig as c, type SlotPropValue as d, useUISlotManager as u };
+export { DEFAULT_SLOTS as D, type SlotChangeCallback as S, type UISlotManager as U, type SlotContent as a, type SlotRenderConfig as b, type SlotPropValue as c, useUISlotManager as u };

package/dist/{verificationRegistry-DBHfOR9y.d.ts → verificationRegistry-BYD3cVhS.d.ts}

@@ -1,4 +1,4 @@
-import { D as DrawableNode } from './paintDispatch-CMgOyVjS.js';
+import { D as DrawableNode } from './paintDispatch-DHo3WhaU.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';
 

package/locales/ar.json

@@ -1150,5 +1150,35 @@
   "flowCanvas.presetSize": "{{label}} ({{width}}بكسل)",
   "avl.breadcrumb.transitionNumber": "الانتقال #{{n}}",
   "orbInspector.pattern": "النمط",
-  "orbInspector.slotLabel": "الفتحة: {{slot}}"
+  "orbInspector.slotLabel": "الفتحة: {{slot}}",
+  "detailPanel.section.activity": "النشاط",
+  "detailPanel.section.lineItems": "البنود",
+  "detailPanel.tab.overview": "نظرة عامة",
+  "detailPanel.thread.empty": "لا توجد رسائل بعد",
+  "detailPanel.openImage": "فتح الصورة",
+  "detailPanel.showImage": "عرض الصورة {{index}}",
+  "aria.clearSelection": "مسح التحديد",
+  "aria.searchOptions": "البحث في الخيارات",
+  "aria.zoomIn": "تكبير",
+  "aria.zoomOut": "تصغير",
+  "aria.previousPage": "الصفحة السابقة",
+  "aria.nextPage": "الصفحة التالية",
+  "aria.downloadDocument": "تنزيل المستند",
+  "aria.printDocument": "طباعة المستند",
+  "aria.wrapLines": "التفاف الأسطر",
+  "aria.copyCode": "نسخ الشيفرة",
+  "aria.clearInput": "مسح الإدخال",
+  "aria.skipToContent": "انتقل إلى المحتوى",
+  "aria.mainNavigation": "التنقل الرئيسي",
+  "aria.carouselSlides": "الشرائح",
+  "aria.minimap": "الخريطة المصغرة",
+  "aria.canvasScene": "مشهد اللعبة",
+  "aria.learningCanvas": "رسم تفاعلي",
+  "aria.scene3d": "مشهد ثلاثي الأبعاد",
+  "aria.graphCanvas": "رسم بياني",
+  "aria.positionedCanvas": "مخطط الموقع",
+  "aria.walkTraitDone": "مكتمل",
+  "aria.walkTraitPending": "قيد الانتظار",
+  "aria.walkGraph": "مخطط الحالات لـ {{trait}}: من {{from}} إلى {{to}}",
+  "aria.loading": "جارٍ التحميل"
 }

package/locales/en.json

@@ -1150,5 +1150,35 @@
   "flowCanvas.presetSize": "{{label}} ({{width}}px)",
   "avl.breadcrumb.transitionNumber": "Transition #{{n}}",
   "orbInspector.pattern": "Pattern",
-  "orbInspector.slotLabel": "slot: {{slot}}"
+  "orbInspector.slotLabel": "slot: {{slot}}",
+  "detailPanel.section.activity": "Activity",
+  "detailPanel.section.lineItems": "Line items",
+  "detailPanel.tab.overview": "Overview",
+  "detailPanel.thread.empty": "No messages yet",
+  "detailPanel.openImage": "Open image",
+  "detailPanel.showImage": "Show image {{index}}",
+  "aria.clearSelection": "Clear selection",
+  "aria.searchOptions": "Search options",
+  "aria.zoomIn": "Zoom in",
+  "aria.zoomOut": "Zoom out",
+  "aria.previousPage": "Previous page",
+  "aria.nextPage": "Next page",
+  "aria.downloadDocument": "Download document",
+  "aria.printDocument": "Print document",
+  "aria.wrapLines": "Wrap lines",
+  "aria.copyCode": "Copy code",
+  "aria.clearInput": "Clear input",
+  "aria.skipToContent": "Skip to content",
+  "aria.mainNavigation": "Main navigation",
+  "aria.carouselSlides": "Slides",
+  "aria.minimap": "Minimap",
+  "aria.canvasScene": "Game scene",
+  "aria.learningCanvas": "Interactive diagram",
+  "aria.scene3d": "3D scene",
+  "aria.graphCanvas": "Graph",
+  "aria.positionedCanvas": "Floor plan",
+  "aria.walkTraitDone": "completed",
+  "aria.walkTraitPending": "pending",
+  "aria.walkGraph": "State graph for {{trait}}: {{from}} to {{to}}",
+  "aria.loading": "Loading"
 }

package/locales/sl.json

@@ -1150,5 +1150,35 @@
   "flowCanvas.presetSize": "{{label}} ({{width}} px)",
   "avl.breadcrumb.transitionNumber": "Prehod #{{n}}",
   "orbInspector.pattern": "Vzorec",
-  "orbInspector.slotLabel": "reža: {{slot}}"
+  "orbInspector.slotLabel": "reža: {{slot}}",
+  "detailPanel.section.activity": "Dejavnost",
+  "detailPanel.section.lineItems": "Postavke",
+  "detailPanel.tab.overview": "Pregled",
+  "detailPanel.thread.empty": "Še ni sporočil",
+  "detailPanel.openImage": "Odpri sliko",
+  "detailPanel.showImage": "Prikaži sliko {{index}}",
+  "aria.clearSelection": "Počisti izbor",
+  "aria.searchOptions": "Išči možnosti",
+  "aria.zoomIn": "Povečaj",
+  "aria.zoomOut": "Pomanjšaj",
+  "aria.previousPage": "Prejšnja stran",
+  "aria.nextPage": "Naslednja stran",
+  "aria.downloadDocument": "Prenesi dokument",
+  "aria.printDocument": "Natisni dokument",
+  "aria.wrapLines": "Prelomi vrstice",
+  "aria.copyCode": "Kopiraj kodo",
+  "aria.clearInput": "Počisti vnos",
+  "aria.skipToContent": "Preskoči na vsebino",
+  "aria.mainNavigation": "Glavna navigacija",
+  "aria.carouselSlides": "Diapozitivi",
+  "aria.minimap": "Pomanjšani zemljevid",
+  "aria.canvasScene": "Prizor igre",
+  "aria.learningCanvas": "Interaktivni diagram",
+  "aria.scene3d": "3D prizor",
+  "aria.graphCanvas": "Graf",
+  "aria.positionedCanvas": "Tloris",
+  "aria.walkTraitDone": "končano",
+  "aria.walkTraitPending": "čaka",
+  "aria.walkGraph": "Graf stanj za {{trait}}: od {{from}} do {{to}}",
+  "aria.loading": "Nalaganje"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "6.51.2",
+  "version": "6.52.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [
@@ -126,17 +126,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@almadar/core": "^10.113.0",
+    "@almadar/core": "^10.114.0",
     "@almadar/evaluator": "^2.53.0",
     "@almadar/logger": "^1.15.0",
-    "@almadar/runtime": "^6.99.0",
-    "@almadar/std": "^16.237.0",
+    "@almadar/runtime": "^6.100.0",
+    "@almadar/std": "^16.238.0",
     "@almadar/syntax": "^1.19.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@phosphor-icons/react": "^2.1.10",
     "@tabler/icons-react": "^3.44.0",
+    "@tailwindcss/typography": "^0.5.20",
     "@xyflow/react": "12.10.1",
     "clsx": "^2.1.0",
     "d3-force": "^3.0.0",
@@ -162,12 +163,12 @@
     "@react-three/fiber": "^9.0.0",
     "@react-three/postprocessing": "^3.0.0",
     "@tanstack/react-query": "^5.0.0",
+    "postcss": "^8.4.35",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": "^7.0.0",
-    "three": "^0.160.0",
-    "postcss": "^8.4.35",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0",
+    "three": "^0.160.0"
   },
   "peerDependenciesMeta": {
     "@react-three/drei": {
@@ -190,7 +191,7 @@
     }
   },
   "devDependencies": {
-    "@almadar-io/behaviors": "^0.16.184",
+    "@almadar-io/behaviors": "^0.16.185",
     "@almadar/eslint-plugin": "^2.21.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.6.0",
@@ -212,6 +213,7 @@
     "@vitejs/plugin-react": "^4.2.0",
     "@vitest/ui": "^3.2.6",
     "autoprefixer": "^10.4.0",
+    "axe-core": "4.13.0",
     "babel-plugin-react-compiler": "19.0.0-beta-af1b7da-20250417",
     "eslint": "10.0.0",
     "eslint-plugin-react-compiler": "19.1.0-rc.2",
@@ -231,7 +233,8 @@
     "turbo": "^2.8.17",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^5.2.0",
-    "vitest": "^3.2.6"
+    "vitest": "^3.2.6",
+    "vitest-axe": "^0.1.0"
   },
   "repository": {
     "type": "git",

package/tailwind-preset.cjs

@@ -46,6 +46,10 @@ 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',
+  ].map((cls) => `${bp}${cls}`)),
   // Non-theme CSS variable classes (no semantic equivalent in theme config)
   'active:scale-[var(--active-scale)]',
   'border-b-[length:var(--border-width)]',
@@ -440,6 +444,12 @@ module.exports = {
   'pt-[env(safe-area-inset-top)]',
   'rounded-[calc(var(--radius-xl)*1.5)]',
   'text-primary-foreground/80',
+
+  // Auto-added by audit-tailwind-safelist.ts (2026-10-01)
+  'max-w-[18rem]',
+
+  // Auto-added by audit-tailwind-safelist.ts (2026-10-01)
+  'lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]',
 ],
   theme: {
     fontFamily: {
@@ -452,6 +462,15 @@ module.exports = {
       body: ['var(--font-family-body, var(--font-family))', 'ui-sans-serif', 'system-ui', 'sans-serif'],
     },
     extend: {
+      // MarkdownContent draws its own inline-code chip; drop the plugin's literal backticks
+      typography: {
+        DEFAULT: {
+          css: {
+            'code::before': { content: 'none' },
+            'code::after': { content: 'none' },
+          },
+        },
+      },
       colors: {
         primary: {
           DEFAULT: withOpacity('--color-primary'),
@@ -809,6 +828,8 @@ module.exports = {
     },
   },
   plugins: [
+    // MarkdownContent styles itself with `prose`, themed via its --tw-prose-* vars
+    require('@tailwindcss/typography'),
     // 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.
@@ -841,9 +862,11 @@ module.exports = {
           'background-size': 'var(--surface-page-image-size, auto)',
           'background-attachment': 'fixed',
         },
-        // Interactive-control border style (outset bevel for Win95-style chrome).
+        // Interactive-control geometry: border style (outset bevel for Win95-style
+        // chrome) and corner shape (round controls inside a scoop/notch frame).
         '.interactive-border': {
           'border-style': 'var(--border-style-interactive, var(--border-style, solid))',
+          'corner-shape': 'var(--corner-shape-interactive, var(--corner-shape, round))',
         },
         '.chrome-button': {
           'background-image': 'var(--game-button-bg-image, none)',

package/themes/_base.css

@@ -215,6 +215,23 @@
     --motion-page-exit-to-opacity: 0;
     --motion-page-exit-to-transform: translateY(-8px);
 
+    /* ----------------------------------------------------------------
+     * Element entry — how a rendered element animates in when it mounts.
+     * --motion-enter-default is the keyframe every slot's content plays when
+     * it changes (`none` = off); a render-ui node's own `enter` overrides it.
+     * The shape tokens restyle what each named entry looks like; timing is
+     * the `enter` intent (--duration-normal / --easing-emphasized).
+     * ---------------------------------------------------------------- */
+    --motion-enter-default: almadar-enter-fade;
+    /* A busy control shows its spinner only once its action outlasts this
+     * (under it the action reads as instant — no flash on fast actions). */
+    --motion-busy-delay: 300ms;
+    --motion-enter-stagger: 40ms;
+    --motion-enter-rise-from-transform: translateY(12px);
+    --motion-enter-scale-from-transform: scale(0.96);
+    --motion-enter-slide-sign: 1;
+    --motion-enter-slide-from-transform: translateX(calc(16px * var(--motion-enter-slide-sign)));
+
     /* ----------------------------------------------------------------
      * Skeleton shimmer — the loading-placeholder sweep. Two color stops
      * (base + highlight) drive the gradient; --duration-shimmer the loop.
@@ -225,6 +242,75 @@
     --duration-shimmer: 1.5s;
 }
 
+[dir="rtl"] {
+    --motion-enter-slide-sign: -1;
+}
+
+@keyframes almadar-enter-fade {
+    from { opacity: 0; }
+}
+@keyframes almadar-enter-rise {
+    from { opacity: 0; transform: var(--motion-enter-rise-from-transform); }
+}
+@keyframes almadar-enter-scale {
+    from { opacity: 0; transform: var(--motion-enter-scale-from-transform); }
+}
+@keyframes almadar-enter-slide {
+    from { opacity: 0; transform: var(--motion-enter-slide-from-transform); }
+}
+
+/* Busy control: the label gives way to the spinner only after --motion-busy-delay. */
+@keyframes almadar-busy-hide {
+    to { visibility: hidden; }
+}
+@keyframes almadar-busy-show {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+.almadar-busy-content {
+    animation: almadar-busy-hide 0s linear var(--motion-busy-delay, 300ms) forwards;
+}
+.almadar-busy-indicator {
+    opacity: 0;
+    animation: almadar-busy-show var(--duration-fast, 150ms) var(--easing-standard, ease) var(--motion-busy-delay, 300ms) forwards;
+}
+
+/* A row whose own action is in flight: dims after --motion-busy-delay, never re-clickable. */
+@keyframes almadar-row-pending {
+    to { opacity: 0.55; }
+}
+[data-row-pending="true"] {
+    pointer-events: none;
+    animation: almadar-row-pending var(--duration-fast, 150ms) var(--easing-standard, ease) var(--motion-busy-delay, 300ms) forwards;
+}
+
+/* Slot content: plays the theme's default entry (restarted when the content changes). */
+.almadar-enter-slot {
+    animation-name: var(--motion-enter-default, none);
+}
+.almadar-enter-slot,
+.almadar-enter-fade,
+.almadar-enter-rise,
+.almadar-enter-scale,
+.almadar-enter-slide {
+    animation-duration: var(--duration-normal, 250ms);
+    animation-timing-function: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
+    animation-fill-mode: both;
+    animation-delay: calc(var(--enter-index, 0) * var(--motion-enter-stagger, 40ms));
+}
+.almadar-enter-fade { animation-name: almadar-enter-fade; }
+.almadar-enter-rise { animation-name: almadar-enter-rise; }
+.almadar-enter-scale { animation-name: almadar-enter-scale; }
+.almadar-enter-slide { animation-name: almadar-enter-slide; }
+.almadar-enter-delay-1 { --enter-index: 1; }
+.almadar-enter-delay-2 { --enter-index: 2; }
+.almadar-enter-delay-3 { --enter-index: 3; }
+.almadar-enter-delay-4 { --enter-index: 4; }
+.almadar-enter-delay-5 { --enter-index: 5; }
+.almadar-enter-delay-6 { --enter-index: 6; }
+.almadar-enter-delay-7 { --enter-index: 7; }
+.almadar-enter-delay-8 { --enter-index: 8; }
+
 /* The shimmer gradient background. Pair with the `animate-shimmer` utility
  * (defined in tailwind-preset) which sweeps background-position. */
 .almadar-shimmer {

package/themes/_contract.md

@@ -227,6 +227,7 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 | `typeScale.fontImport` | — (not a var) | preset: generated `_fonts.css` `@import`; inline: `OrbitalThemeProvider` `<link>`; compiled: `@import` atop the theme CSS | — |
 | `geometry.cornerShape` | `--corner-shape` | every element inside `[data-theme]` (CSS `corner-shape`; Chromium 139+, other engines render plain round corners) | `round` |
 | `geometry.cornerShapePill` | `--corner-shape-pill` | `.rounded-full` / `.rounded-pill` | `round` |
+| `geometry.cornerShapeInteractive` | `--corner-shape-interactive` | `Button`, `Input`, `Select`, `Textarea` (`.interactive-border`) | `--corner-shape` |
 | `geometry.borderStyle` | `--border-style` | every bordered element (scoped reset) | `solid` |
 | `geometry.borderStyleInteractive` | `--border-style-interactive` | `Button` (`.interactive-border`) | `--border-style` |
 | `elevation.interactiveElevation` | `--elevation-interactive` | `Button` resting (`shadow-elevation-interactive`) | `--shadow-sm` |

package/themes/almadar-website.css

@@ -31,6 +31,7 @@
     --color-warning-foreground: #000000;
     --color-info: #1d4ed8;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -118,6 +119,7 @@
     --color-warning-foreground: #000000;
     --color-info: #38bdf8;
     --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;

package/themes/almadar.css

@@ -31,6 +31,7 @@
     --color-warning-foreground: #000000;
     --color-info: #0369a1;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 10px;
@@ -116,6 +117,7 @@
     --color-warning-foreground: #000000;
     --color-info: #38bdf8;
     --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 10px;

package/themes/aqua.css

@@ -11,7 +11,7 @@
     --color-secondary: #dde5f0;
     --color-secondary-hover: #cbd6e6;
     --color-secondary-foreground: #1c2a3a;
-    --color-accent: #0b6b8a;
+    --color-accent: #56657a;
     --color-accent-foreground: #ffffff;
     --color-muted: #e4e9f1;
     --color-muted-foreground: #4a5a70;
@@ -37,6 +37,7 @@
     --color-warning-foreground: #2a1c00;
     --color-info: #1f6fe0;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 9px;
@@ -194,8 +195,8 @@
     --color-secondary: #343c49;
     --color-secondary-hover: #414b5b;
     --color-secondary-foreground: #e8eef8;
-    --color-accent: #5fd0ee;
-    --color-accent-foreground: #00222c;
+    --color-accent: #9aa7b8;
+    --color-accent-foreground: #10161f;
     --color-muted: #2a313c;
     --color-muted-foreground: #b4c0d2;
     --color-background: #1a1f27;
@@ -220,6 +221,7 @@
     --color-warning-foreground: #2a1c00;
     --color-info: #4a9bff;
     --color-info-foreground: #001a3a;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 6px;
     --radius-md: 9px;

package/themes/arabesque.css

@@ -8,9 +8,9 @@
     --color-primary: #1f3f8f;
     --color-primary-hover: #183275;
     --color-primary-foreground: #fff8e7;
-    --color-secondary: #2bb3a6;
-    --color-secondary-hover: #2fbfb1;
-    --color-secondary-foreground: #06302c;
+    --color-secondary: #247a74;
+    --color-secondary-hover: #1d6964;
+    --color-secondary-foreground: #fff8e7;
     --color-accent: #7d5a0c;
     --color-accent-foreground: #fff8e7;
     --color-muted: #ebe0c6;
@@ -37,6 +37,7 @@
     --color-warning-foreground: #1a1200;
     --color-info: #1f5fbf;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -193,8 +194,8 @@
     --color-primary: #e0b64a;
     --color-primary-hover: #efc866;
     --color-primary-foreground: #1a1200;
-    --color-secondary: #3cc9bb;
-    --color-secondary-hover: #56d8cb;
+    --color-secondary: #4fb3a9;
+    --color-secondary-hover: #66c1b8;
     --color-secondary-foreground: #04201d;
     --color-accent: #8fb0ff;
     --color-accent-foreground: #0a1530;
@@ -207,7 +208,7 @@
     --color-surface: #122040;
     --color-border: #c9a13a;
     --color-input: #c9a13a;
-    --color-ring: #3cc9bb;
+    --color-ring: #4fb3a9;
     --color-table-header: #122040;
     --color-table-border: #c9a13a;
     --color-table-row-hover: #1a2c55;
@@ -222,6 +223,7 @@
     --color-warning-foreground: #1a1200;
     --color-info: #8ab4ff;
     --color-info-foreground: #071b3d;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -249,7 +251,7 @@
     --active-translate-y: 0px;
     --focus-ring-width: 2px;
     --focus-ring-offset: 2px;
-    --focus-ring-color: #3cc9bb;
+    --focus-ring-color: #4fb3a9;
     --shadow-main: 0 4px 14px rgba(0,0,0,0.45);
     --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
     --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);

package/themes/art-deco.css

@@ -5,7 +5,7 @@
  */
 
 [data-theme="art-deco-light"] {
-    --color-primary: #7a5a00;
+    --color-primary: #7d6024;
     --color-primary-foreground: #fff6d8;
     --color-secondary: #0f5a45;
     --color-secondary-hover: #0b4937;
@@ -36,7 +36,8 @@
     --color-warning-foreground: #1a1200;
     --color-info: #1f4a8a;
     --color-info-foreground: #ffffff;
-    --color-primary-hover: #634900;
+    --color-primary-hover: #664e1c;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;
@@ -52,7 +53,7 @@
     --font-weight-bold: 700;
     --letter-spacing: 0.02em;
     --line-height: 1.55;
-    --icon-color: #7a5a00;
+    --icon-color: #7d6024;
     --transition-fast: 240ms;
     --transition-normal: 420ms;
     --transition-slow: 700ms;
@@ -221,6 +222,7 @@
     --color-warning-foreground: #1a1200;
     --color-info: #79a8f2;
     --color-info-foreground: #051226;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 4px;
     --radius-md: 8px;

package/themes/art-nouveau.css

@@ -37,6 +37,7 @@
     --color-warning-foreground: #2a1c00;
     --color-info: #3a6a80;
     --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
     --radius-none: 0px;
     --radius-sm: 8px;
     --radius-md: 16px;
@@ -181,6 +182,7 @@
     --border-heavy: var(--border-width-thick);
     --corner-shape: scoop;
     --corner-shape-pill: round;
+    --corner-shape-interactive: round;
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(160deg, rgba(255,250,235,0.7), rgba(233,200,192,0.12));
@@ -221,6 +223,7 @@
     --color-warning-foreground: #241800;
     --color-info: #86c2dc;
     --color-info-foreground: #05202c;
+    --color-scrim: rgba(0, 0, 0, 0.7);
     --radius-none: 0px;
     --radius-sm: 8px;
     --radius-md: 16px;
@@ -365,6 +368,7 @@
     --border-heavy: var(--border-width-thick);
     --corner-shape: scoop;
     --corner-shape-pill: round;
+    --corner-shape-interactive: round;
     --border-style: solid;
     --border-style-interactive: solid;
     --surface-card-image: linear-gradient(160deg, rgba(185,196,106,0.07), rgba(227,160,168,0.04));