orcheo-studio 0.24.5 → 0.24.7

package/src/features/workflow/pages/workflow/components/workflow-tab-content.tsx

@@ -34,6 +34,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/design-system/ui/tooltip";
+import { useColorScheme } from "@/hooks/use-color-scheme";
 import { toast } from "@/hooks/use-toast";
 import { ConfirmDeleteWorkflowDialog } from "@features/workflow/components/dialogs/confirm-delete-workflow-dialog";
 import { PublishWorkflowDialog } from "@features/workflow/components/dialogs/publish-workflow-dialog";
@@ -239,7 +240,7 @@ const resolveRunResultBanner = (
       return {
         Icon: CheckCircle2,
         className:
-          "border-emerald-500/40 bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300",
+          "border-success/40 bg-success-muted text-success-muted-foreground",
         message: "Workflow run succeeded. See the full trace on the Trace tab.",
       };
     case "failed":
@@ -252,7 +253,7 @@ const resolveRunResultBanner = (
       return {
         Icon: AlertTriangle,
         className:
-          "border-amber-500/40 bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+          "border-warning/40 bg-warning-muted text-warning-muted-foreground",
         message:
           "Workflow run finished with partial results. Check the Trace tab for details.",
       };
@@ -261,7 +262,7 @@ const resolveRunResultBanner = (
       return {
         Icon: AlertTriangle,
         className:
-          "border-amber-500/40 bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+          "border-warning/40 bg-warning-muted text-warning-muted-foreground",
         message:
           "Workflow run ended without a final status. Check the Trace tab for the latest status.",
       };
@@ -289,6 +290,7 @@ export function WorkflowTabContent({
   initialShareUrl,
   missingCredentials = [],
 }: WorkflowTabContentProps) {
+  const colorScheme = useColorScheme();
   const navigate = useNavigate();
   const uploadsAllowed = useUploadsAllowed();
   const latestVersion = versions.at(-1);
@@ -707,7 +709,7 @@ export function WorkflowTabContent({
   return (
     <>
       <div className="flex min-h-0 flex-1 flex-col gap-4 p-4">
-        <div className="flex items-center justify-between border-b pb-3">
+        <div className="flex items-center justify-between pb-3">
           <div>
             <h2 className="text-lg font-semibold">
               {workflowName || "Workflow"}
@@ -915,7 +917,7 @@ export function WorkflowTabContent({
 
         {latestVersion && mermaidSource && !diagramError && (
           <div className="min-h-0 flex flex-1 flex-col">
-            <div className="min-h-0 flex-1 overflow-hidden">
+            <div className="dot-grid min-h-0 flex-1 overflow-hidden rounded-xl border border-border bg-muted/30">
               {diagramNodes.length > 0 ? (
                 <ReactFlow
                   key={`${latestVersion.id}-mermaid-svg`}
@@ -929,6 +931,7 @@ export function WorkflowTabContent({
                   nodesConnectable={false}
                   elementsSelectable={false}
                   zoomOnDoubleClick={false}
+                  colorMode={colorScheme}
                   className="h-full w-full"
                   proOptions={{ hideAttribution: true }}
                   style={{ background: "transparent" }}

package/src/features/workflow/pages/workflow-gallery/workflow-card.tsx

@@ -213,7 +213,7 @@ export const WorkflowCard = ({
     <>
       <Card
         className={cn(
-          "flex w-full flex-col overflow-hidden border-border/70 bg-card text-card-foreground shadow-[0_16px_48px_rgba(15,23,42,0.08)] transition-transform duration-200 hover:-translate-y-1 dark:shadow-[0_16px_48px_rgba(0,0,0,0.45)] text-[20px] md:text-[14px]",
+          "flex w-full flex-col overflow-hidden border-border/70 bg-card text-card-foreground shadow-[0_16px_48px_rgba(40,30,16,0.1)] transition-transform duration-200 hover:-translate-y-1 dark:shadow-[0_16px_48px_rgba(0,0,0,0.45)] text-[20px] md:text-[14px]",
           WORKFLOW_GALLERY_CARD_ASPECT_CLASSNAME,
           isClickable && "cursor-pointer",
         )}
@@ -223,7 +223,7 @@ export const WorkflowCard = ({
         role={isClickable ? "button" : undefined}
         tabIndex={isClickable ? 0 : undefined}
       >
-        <CardHeader className="relative flex h-12 items-center justify-center overflow-hidden border-b border-border/70 bg-gradient-to-r from-slate-950 via-slate-900 to-slate-800 px-4 py-0 text-center text-slate-50 dark:border-border/60 dark:from-slate-100 dark:via-slate-50 dark:to-slate-200 dark:text-slate-950">
+        <CardHeader className="relative flex h-12 items-center justify-center overflow-hidden border-b border-border/70 bg-gradient-to-r from-stone-950 via-stone-900 to-stone-800 px-4 py-0 text-center text-stone-50 dark:border-border/60 dark:from-stone-100 dark:via-stone-50 dark:to-stone-200 dark:text-stone-950">
           <div
             className="absolute inset-0 opacity-25 dark:opacity-40"
             aria-hidden="true"
@@ -235,7 +235,7 @@ export const WorkflowCard = ({
           />
 
           <div className="relative z-10 flex items-center gap-2">
-            <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70 dark:text-slate-700">
+            <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70 dark:text-stone-700">
               {headerLabel}
             </span>
           </div>
@@ -253,7 +253,7 @@ export const WorkflowCard = ({
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute right-2 top-2 z-10 h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white dark:text-slate-700 dark:hover:bg-slate-950/10 dark:hover:text-slate-950"
+                className="absolute right-2 top-2 z-10 h-7 w-7 text-white/75 hover:bg-white/10 hover:text-white dark:text-stone-700 dark:hover:bg-stone-950/10 dark:hover:text-stone-950"
                 onClick={stopPropagation}
                 onPointerDown={stopPropagation}
                 aria-label="Workflow actions"
@@ -290,7 +290,7 @@ export const WorkflowCard = ({
                     <>
                       <DropdownMenuSeparator />
                       <DropdownMenuItem
-                        className="text-red-600"
+                        className="text-destructive"
                         onSelect={(event) => {
                           event.preventDefault();
                           event.stopPropagation();
@@ -314,31 +314,31 @@ export const WorkflowCard = ({
               className={cn(
                 "absolute left-0 top-0 flex items-center gap-1 rounded-md border px-2 py-1 shadow-sm",
                 uploadError
-                  ? "border-red-500/40 bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300"
-                  : "border-border/70 bg-muted/60 text-muted-foreground dark:bg-slate-950/20",
+                  ? "border-destructive/40 bg-destructive-muted text-destructive-muted-foreground"
+                  : "border-border/70 bg-muted/60 text-muted-foreground dark:bg-background/30",
               )}
             >
               <span
                 className={cn(
                   "h-1.5 w-1.5 rounded-full",
                   uploadError
-                    ? "bg-red-600 shadow-[0_0_6px_rgba(220,38,38,0.45)] dark:bg-red-300"
-                    : "bg-slate-800 shadow-[0_0_6px_rgba(15,23,42,0.32)] dark:bg-slate-200 dark:shadow-[0_0_6px_rgba(226,232,240,0.28)]",
+                    ? "bg-destructive shadow-[0_0_6px_hsl(var(--destructive)/0.5)]"
+                    : "bg-foreground shadow-[0_0_6px_hsl(var(--foreground)/0.35)]",
                 )}
               />
               <span
                 className={cn(
                   "font-mono text-[9px] font-bold uppercase tracking-[0.1em]",
                   uploadError
-                    ? "text-red-700 dark:text-red-300"
-                    : "text-slate-700 dark:text-slate-300",
+                    ? "text-destructive-muted-foreground"
+                    : "text-muted-foreground",
                 )}
               >
                 {uploadError ? "Error" : "AI"}
               </span>
             </div>
 
-            <div className="flex h-[7em] w-[7em] items-center justify-center overflow-hidden rounded-full border-4 border-slate-900 bg-slate-100 shadow-[0_4px_16px_rgba(15,23,42,0.18)] dark:border-slate-100 dark:bg-slate-800 dark:shadow-[0_4px_16px_rgba(0,0,0,0.35)]">
+            <div className="flex h-[7em] w-[7em] items-center justify-center overflow-hidden rounded-full border-4 border-primary bg-muted shadow-[0_4px_16px_rgba(248,120,37,0.24)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.35)]">
               <img
                 src={avatarUrl}
                 alt={workflow.name}
@@ -354,7 +354,7 @@ export const WorkflowCard = ({
                     <Button
                       variant="outline"
                       size="icon"
-                      className="absolute right-10 top-0 h-8 w-8 border-emerald-500/40 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-300 dark:hover:bg-emerald-900/60"
+                      className="absolute right-10 top-0 h-8 w-8 border-success/40 bg-success-muted text-success-muted-foreground hover:bg-success/20"
                       aria-label={`Update ${workflow.name} to candidate version ${candidateUpdate.latestVersion}`}
                       data-card-action="true"
                       onClick={(event) => {
@@ -376,7 +376,7 @@ export const WorkflowCard = ({
                         <p>{candidateUpdate.latestSummary}</p>
                       ) : null}
                       {candidateUpdate.firstMigration ? (
-                        <p className="text-amber-600 dark:text-amber-300">
+                        <p className="text-warning-muted-foreground">
                           {candidateUpdate.firstMigration}
                         </p>
                       ) : null}
@@ -490,7 +490,7 @@ export const WorkflowCard = ({
             </DialogHeader>
 
             {candidateUpdate.isMajor ? (
-              <div className="rounded-md border border-amber-500/50 bg-amber-50 px-3 py-2 text-sm text-amber-900 dark:bg-amber-950/30 dark:text-amber-200">
+              <div className="rounded-md border border-warning/50 bg-warning-muted px-3 py-2 text-sm text-warning-muted-foreground">
                 This is a major candidate update. Review migration notes before
                 applying it to this colleague.
               </div>
@@ -508,7 +508,7 @@ export const WorkflowCard = ({
                     </div>
                     <p className="mt-1 text-muted-foreground">{note.summary}</p>
                     {note.migration ? (
-                      <p className="mt-2 text-amber-700 dark:text-amber-300">
+                      <p className="mt-2 text-warning-muted-foreground">
                         {note.migration}
                       </p>
                     ) : null}

package/src/index.css

@@ -2,60 +2,98 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * Theme derived from the Orcheo design system (orcheo-design-system/tokens/).
+ * Warm circuit-orchestration palette: Orcheo orange primary, warm ink neutral
+ * ramp (never cool/blue gray), parchment page background, warm semantic hues.
+ * Values are HSL triplets of the design-system hex tokens.
+ */
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --background: 45 33% 95%; /* ink-50: warm off-white page */
+    --foreground: 43 9% 15%; /* ink-800: body text */
+    --card: 0 0% 100%; /* white raised surfaces */
+    --card-foreground: 43 9% 15%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
+    --popover-foreground: 43 9% 15%;
+    --primary: 24 94% 56%; /* orange-500: Orcheo orange */
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 22 80% 50%; /* orange-600 */
+    --primary-active: 21 83% 41%; /* orange-700 */
+    --secondary: 43 28% 90%; /* ink-100 */
+    --secondary-foreground: 45 8% 9%; /* ink-900 */
+    --muted: 43 28% 90%; /* ink-100 */
+    --muted-foreground: 42 8% 32%; /* ink-600 */
+    --accent: 43 28% 90%; /* ink-100: faint warm hover tint */
+    --accent-foreground: 45 8% 9%;
+    --destructive: 9 69% 48%; /* red-500: warm red */
+    --destructive-foreground: 0 0% 100%;
+    --destructive-muted: 13 80% 92%; /* red-100 */
+    --destructive-muted-foreground: 10 75% 39%; /* red-600 */
+    --success: 147 46% 33%; /* green-500: forest green */
+    --success-foreground: 0 0% 100%;
+    --success-muted: 146 32% 91%; /* green-100 */
+    --success-muted-foreground: 147 48% 27%; /* green-600 */
+    --warning: 41 82% 47%; /* amber-500: ochre amber */
+    --warning-foreground: 45 8% 9%;
+    --warning-muted: 43 81% 90%; /* amber-100 */
+    --warning-muted-foreground: 40 84% 39%; /* amber-600 */
+    --info: 207 42% 42%; /* blue-500: muted slate blue */
+    --info-foreground: 0 0% 100%;
+    --info-muted: 205 42% 92%; /* blue-100 */
+    --info-muted-foreground: 207 43% 33%; /* blue-600 */
+    --border: 42 22% 82%; /* ink-200 */
+    --input: 42 16% 71%; /* ink-300 */
+    --ring: 26 93% 61%; /* orange-400 focus ring */
+    --radius: 0.875rem; /* 14px cards; md maps to 10px controls */
+    --chart-1: 24 94% 56%; /* orange-500 */
+    --chart-2: 147 46% 33%; /* green-500 */
+    --chart-3: 207 42% 42%; /* blue-500 */
+    --chart-4: 41 82% 47%; /* amber-500 */
+    --chart-5: 34 45% 55%; /* tan-500 */
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --background: 60 8% 5%; /* ink-950 */
+    --foreground: 43 28% 90%; /* ink-100 */
+    --card: 45 8% 9%; /* ink-900 */
+    --card-foreground: 43 28% 90%;
+    --popover: 45 8% 9%;
+    --popover-foreground: 43 28% 90%;
+    --primary: 24 94% 56%; /* orange-500 */
+    --primary-foreground: 0 0% 100%;
+    --primary-hover: 26 93% 61%; /* orange-400: lighten on dark */
+    --primary-active: 28 93% 68%; /* orange-300 */
+    --secondary: 43 9% 15%; /* ink-800 */
+    --secondary-foreground: 43 28% 90%;
+    --muted: 43 9% 15%; /* ink-800 */
+    --muted-foreground: 41 10% 56%; /* ink-400 */
+    --accent: 43 9% 15%; /* ink-800 */
+    --accent-foreground: 43 28% 90%;
+    --destructive: 9 69% 48%;
+    --destructive-foreground: 0 0% 100%;
+    --destructive-muted: 10 75% 15%;
+    --destructive-muted-foreground: 11 70% 70%;
+    --success: 147 46% 33%;
+    --success-foreground: 0 0% 100%;
+    --success-muted: 147 48% 14%;
+    --success-muted-foreground: 147 35% 65%;
+    --warning: 41 82% 47%;
+    --warning-foreground: 60 8% 5%;
+    --warning-muted: 40 84% 14%;
+    --warning-muted-foreground: 41 70% 65%;
+    --info: 207 42% 42%;
+    --info-foreground: 0 0% 100%;
+    --info-muted: 207 43% 16%;
+    --info-muted-foreground: 207 45% 70%;
+    --border: 43 9% 15%; /* ink-800 */
+    --input: 42 9% 22%; /* ink-700 */
+    --ring: 26 93% 61%; /* orange-400 */
+    --chart-1: 26 93% 61%; /* orange-400 */
+    --chart-2: 147 46% 33%;
+    --chart-3: 207 42% 42%;
+    --chart-4: 41 82% 47%;
+    --chart-5: 34 45% 55%;
   }
 }
 
@@ -64,17 +102,54 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background font-sans text-foreground antialiased;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-display font-semibold tracking-tight;
+  }
+  ::selection {
+    background: hsl(28 92% 80%); /* orange-200 */
+    color: hsl(60 8% 5%); /* ink-950 */
+  }
+  .dark ::selection {
+    background: hsl(21 81% 33%); /* orange-800 */
+    color: hsl(0 0% 100%);
   }
 }
 
 @layer components {
+  /* Warm dot lattice — the design system's workspace-canvas motif. */
+  .dot-grid {
+    background-image: radial-gradient(
+      hsl(42 22% 82%) 1px,
+      transparent 1px
+    ); /* ink-200 */
+    background-size: 18px 18px;
+  }
+  .dark .dot-grid {
+    background-image: radial-gradient(
+      hsl(43 10% 14%) 1px,
+      transparent 1px
+    ); /* warm ink dot */
+  }
+
   .react-flow__controls {
-    @apply flex flex-col overflow-hidden rounded-xl border border-slate-200/80 bg-white/95 text-slate-700 shadow-lg backdrop-blur-sm;
+    --xy-controls-box-shadow: 0 8px 20px hsl(var(--background) / 0.45);
+    --xy-controls-button-background-color: hsl(var(--card) / 0.98);
+    --xy-controls-button-background-color-hover: hsl(var(--accent));
+    --xy-controls-button-border-color: hsl(var(--border) / 0.9);
+    --xy-controls-button-color: hsl(var(--card-foreground));
+    --xy-controls-button-color-hover: hsl(var(--accent-foreground));
+    @apply flex flex-col overflow-hidden rounded-xl border border-border bg-card/95 text-card-foreground shadow-lg backdrop-blur-sm;
   }
 
   .react-flow__controls-button {
-    @apply flex h-10 w-10 items-center justify-center border-b border-slate-200/70 text-slate-700 transition-colors duration-200 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white;
+    @apply flex h-10 w-10 items-center justify-center border-b border-border/70 text-muted-foreground transition-colors duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2 focus-visible:ring-offset-card;
   }
 
   .react-flow__controls-button:last-child {
@@ -84,12 +159,4 @@
   .react-flow__controls-button svg {
     @apply text-current;
   }
-
-  .dark .react-flow__controls {
-    @apply border-slate-800/80 bg-slate-900/90 text-slate-200 shadow-[0_18px_40px_rgba(0,0,0,0.65)];
-  }
-
-  .dark .react-flow__controls-button {
-    @apply border-slate-800/70 text-slate-400 hover:bg-slate-800 focus-visible:ring-slate-300/40 focus-visible:ring-offset-slate-900;
-  }
 }

package/tailwind.config.js

@@ -1,4 +1,5 @@
 import tailwindcssAnimate from "tailwindcss-animate";
+import defaultTheme from "tailwindcss/defaultTheme";
 
 const agentPrismPrefix = "agentprism";
 const agentPrismTokens = [
@@ -99,10 +100,32 @@ export default {
   content: ["./main.tsx", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['"IBM Plex Sans"', ...defaultTheme.fontFamily.sans],
+        display: ['"Space Grotesk"', ...defaultTheme.fontFamily.sans],
+        mono: ['"IBM Plex Mono"', ...defaultTheme.fontFamily.mono],
+      },
+      // Orcheo design-system radii: controls 10px, cards 14px, panels 20px.
       borderRadius: {
+        sm: "calc(var(--radius) - 8px)",
+        md: "calc(var(--radius) - 4px)",
         lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: "calc(var(--radius) + 6px)",
+        "2xl": "calc(var(--radius) + 14px)",
+      },
+      // Warm-tinted shadows (ink/brown alpha, never black-blue).
+      boxShadow: {
+        xs: "0 1px 2px rgba(40, 30, 16, 0.06)",
+        sm: "0 1px 2px rgba(40, 30, 16, 0.06), 0 2px 6px rgba(40, 30, 16, 0.06)",
+        DEFAULT:
+          "0 1px 2px rgba(40, 30, 16, 0.06), 0 2px 6px rgba(40, 30, 16, 0.06)",
+        md: "0 2px 4px rgba(40, 30, 16, 0.06), 0 6px 16px rgba(40, 30, 16, 0.08)",
+        lg: "0 4px 8px rgba(40, 30, 16, 0.06), 0 16px 32px rgba(40, 30, 16, 0.12)",
+        xl: "0 8px 16px rgba(40, 30, 16, 0.08), 0 28px 56px rgba(40, 30, 16, 0.16)",
+        brand: "0 4px 14px rgba(248, 120, 37, 0.32)",
+        // Primary-button sheen: faint inset top highlight so orange doesn't read flat.
+        "primary-sheen":
+          "inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(40, 30, 16, 0.06)",
       },
       colors: {
         background: "hsl(var(--background))",
@@ -118,6 +141,8 @@ export default {
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
+          hover: "hsl(var(--primary-hover))",
+          active: "hsl(var(--primary-active))",
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary))",
@@ -134,10 +159,33 @@ export default {
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
           foreground: "hsl(var(--destructive-foreground))",
+          muted: "hsl(var(--destructive-muted))",
+          "muted-foreground": "hsl(var(--destructive-muted-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+          muted: "hsl(var(--success-muted))",
+          "muted-foreground": "hsl(var(--success-muted-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+          muted: "hsl(var(--warning-muted))",
+          "muted-foreground": "hsl(var(--warning-muted-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+          muted: "hsl(var(--info-muted))",
+          "muted-foreground": "hsl(var(--info-muted-foreground))",
         },
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
+        // Orcheo brand accents (orcheo-design-system: brand-cream, brand-tan).
+        cream: "#f6f5d4",
+        tan: "#e0c090",
         chart: {
           1: "hsl(var(--chart-1))",
           2: "hsl(var(--chart-2))",

package/dist/assets/channel-pJdT5i-M.js

@@ -1 +0,0 @@
-import{ap as o,aq as n}from"./index-DTxvVcXp.js";const t=(a,r)=>o.lang.round(n.parse(a)[r]);export{t as c};

package/dist/assets/classDiagram-2ON5EDUG-CNT-EGNU.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-DwV5xRJr.js";import{_ as i}from"./index-DTxvVcXp.js";import"./chunk-FMBD7UC4-6Q-Lz0AM.js";import"./chunk-55IACEB6-DRmZnlbz.js";import"./chunk-QN33PNHL-BFy_ml8O.js";var p={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{p as diagram};

package/dist/assets/classDiagram-v2-WZHVMYZB-CNT-EGNU.js

@@ -1 +0,0 @@
-import{s as a,c as s,a as e,C as t}from"./chunk-B4BG7PRW-DwV5xRJr.js";import{_ as i}from"./index-DTxvVcXp.js";import"./chunk-FMBD7UC4-6Q-Lz0AM.js";import"./chunk-55IACEB6-DRmZnlbz.js";import"./chunk-QN33PNHL-BFy_ml8O.js";var p={parser:e,get db(){return new t},renderer:s,styles:a,init:i(r=>{r.class||(r.class={}),r.class.arrowMarkerAbsolute=r.arrowMarkerAbsolute},"init")};export{p as diagram};

package/dist/assets/clone-BCi0j082.js

@@ -1 +0,0 @@
-import{ay as r}from"./index-DTxvVcXp.js";var a=4;function n(o){return r(o,a)}export{n as c};