minka-ds 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [

package/src/components/ui/diagram-node.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+export type DiagramNodeVariant = "wallet" | "anchor"
+
+/** Brand pair for state nodes (issue/destroy). */
+export type DiagramAccent =
+  | "yellow-darkforest"
+  | "rose-coral"
+  | "blue-navy"
+  | "beige-bronze"
+  | "gray-black"
+
+export interface DiagramNodeProps {
+  /** Node type — drives default colors. wallet = white/raised, anchor = inverted slate. */
+  variant?: DiagramNodeVariant
+  /** When false, renders a dashed empty slot. */
+  filled?: boolean
+  /** Pair-colored "state" node (issue/destroy). Overrides variant colors. */
+  accent?: DiagramAccent
+  /** Invert the accent fill (light bg + dark text). */
+  accentInverted?: boolean
+  /** Compact sizing (used by anchor/alias nodes). */
+  compact?: boolean
+  className?: string
+  children?: React.ReactNode
+}
+
+// exact-dash rounded border for the empty state
+function DashedBorder({ radius = 10 }: { radius?: number }) {
+  return (
+    <svg className="pointer-events-none absolute inset-0 size-full" aria-hidden>
+      <rect
+        x="0.75" y="0.75"
+        rx={radius} ry={radius}
+        fill="none"
+        stroke="var(--color-border-default)"
+        strokeWidth="1.5"
+        strokeDasharray="6 6"
+        style={{ width: "calc(100% - 1.5px)", height: "calc(100% - 1.5px)" }}
+      />
+    </svg>
+  )
+}
+
+/**
+ * A node card for the diagram family (FlowDiagram, alias resolve, …). Raised
+ * two-layer treatment: a 4px stroke ring underneath + a surface on top whose
+ * lift shadow falls OVER the stroke (button-like). The stroke grows 0→4px as
+ * the node fills (smooth, no layout shift). Empty nodes render a dashed slot.
+ *
+ * Node type is encoded by color: wallet = white/raised, anchor = inverted slate,
+ * accent = pair-colored state (issue/destroy).
+ */
+function DiagramNode({
+  variant = "wallet",
+  filled = true,
+  accent,
+  accentInverted = false,
+  compact = false,
+  className,
+  children,
+}: DiagramNodeProps) {
+  const sizeClass = compact ? "px-4 py-2 min-h-[48px] min-w-[140px]" : "px-5 py-3 min-h-[64px] min-w-[180px]"
+
+  // resolve fill / stroke / text per type
+  let fill = "var(--color-bg-raised)"
+  let stroke = "var(--color-border-default)"
+  let ink: string | undefined
+
+  if (accent) {
+    fill = accentInverted ? `var(--color-pair-${accent}-light)` : `var(--color-pair-${accent}-dark)`
+    stroke = accentInverted ? `var(--color-pair-${accent}-dark)` : `var(--color-pair-${accent}-light)`
+    ink = accentInverted ? "var(--color-text-default)" : "var(--color-text-inverse)"
+  } else if (variant === "anchor") {
+    fill = "var(--color-pair-blue-navy-dark)"
+    stroke = "var(--color-pair-blue-navy-light)"
+    ink = "var(--color-text-inverse)"
+  }
+
+  return (
+    <div
+      data-slot="diagram-node"
+      className={cn("relative [border-radius:var(--radius-card)]", className)}
+      style={filled ? { animation: "diagram-node-pop .18s cubic-bezier(0.16,1,0.3,1) both" } : undefined}
+    >
+      <style>{`@keyframes diagram-node-pop { from { opacity:0; transform: scale(.96) } to { opacity:1; transform: scale(1) } }`}</style>
+
+      {/* bottom: stroke ring that grows 0→4px on fill */}
+      <div
+        className="absolute inset-0 [border-radius:var(--radius-card)] transition-[box-shadow] duration-300 ease-out"
+        style={{ boxShadow: filled ? `inset 0 0 0 4px ${stroke}` : "inset 0 0 0 0px transparent" }}
+      />
+
+      {/* top: surface — inset so the ring shows; bg + lift fade in on fill */}
+      <div
+        className={cn(
+          "relative m-1 flex items-center justify-center [border-radius:calc(var(--radius-card)-4px)] text-center transition-[background-color,box-shadow] duration-300 ease-out",
+          sizeClass,
+        )}
+        style={{
+          backgroundColor: filled ? fill : "var(--color-bg-base)",
+          color: filled ? ink : undefined,
+          boxShadow: filled ? "var(--shadow-raised)" : "none",
+        }}
+      >
+        {!filled && <DashedBorder radius={6} />}
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export { DiagramNode }

package/src/components/ui/flow-diagram.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { DiagramNode } from "./diagram-node"
 
 /** Brand pair used to give a node / the flow a semantic accent. */
 export type FlowAccent =
@@ -185,72 +186,66 @@ function Connector({
   )
 }
 
-function FlowNodeCard({ node, active, format, pop }: { node: FlowNode; active: boolean; format: FormatFn; pop?: boolean }) {
+function FlowNodeCard({ node, active, format }: { node: FlowNode; active: boolean; format: FormatFn; pop?: boolean }) {
   const showAfter = active && node.after !== null
   const overdrawn = node.after !== null && node.after < 0
 
+  // Empty slot
   if (node.empty) {
     return (
-      <div className="relative flex flex-col items-center justify-center gap-1 [border-radius:var(--radius-card)] bg-[var(--color-bg-base)] px-5 py-3 text-center min-w-[180px] min-h-[64px]">
-        <DashedBorder radius={10} />
+      <DiagramNode filled={false}>
         <span className="text-body-sm text-[var(--color-text-hint)]">{node.name}</span>
-      </div>
+      </DiagramNode>
     )
   }
 
-  // State node (issue/destroy abstract end): pair-colored, no balance. Icon sits
-  // inline next to the main label; subtext below.
+  // State node (issue/destroy): pair-colored, no balance. Icon + label, subtext below.
   if (node.accent) {
-    // default: dark fill + light text; inverted: light fill + dark text.
-    const fill = node.accentInverted ? `var(--color-pair-${node.accent}-light)` : `var(--color-pair-${node.accent}-dark)`
-    const ink  = node.accentInverted ? `var(--color-pair-${node.accent}-dark)` : `var(--color-pair-${node.accent}-light)`
-    const ring = node.accentInverted ? `var(--color-pair-${node.accent}-dark)` : `var(--color-pair-${node.accent}-light)`
     const subInk = node.accentInverted ? "var(--color-text-default)" : "var(--color-text-inverse)"
     return (
-      <div
-        className="flex flex-col items-center gap-1 [border-radius:var(--radius-card)] border px-5 py-3 text-center min-w-[180px]"
-        style={{ backgroundColor: fill, color: ink, borderColor: ring }}
-      >
-        <span className="flex items-center gap-1.5 text-body-sm">
-          {node.icon && <span className="flex items-center [&_svg]:size-4">{node.icon}</span>}
-          {node.name}
-        </span>
-        {node.subtitle && <span className="text-caption" style={{ color: subInk }}>{node.subtitle}</span>}
-      </div>
+      <DiagramNode accent={node.accent} accentInverted={node.accentInverted}>
+        <div className="flex flex-col items-center gap-1">
+          <span className="flex items-center gap-1.5 text-body-sm">
+            {node.icon && <span className="flex items-center [&_svg]:size-4">{node.icon}</span>}
+            {node.name}
+          </span>
+          {node.subtitle && <span className="text-caption" style={{ color: subInk }}>{node.subtitle}</span>}
+        </div>
+      </DiagramNode>
     )
   }
 
+  // Wallet / balance node
   return (
-    <div
-      className="flex flex-col items-center gap-1 [border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-5 py-3 text-center min-w-[180px]"
-      style={pop ? { animation: "flow-pop .18s cubic-bezier(0.16,1,0.3,1) both" } : undefined}
-    >
-      <span className="text-body-sm text-[var(--color-text-default)]">{node.name}</span>
-
-      {node.current === null ? (
-        node.subtitle ? <span className="text-caption text-[var(--color-text-muted)]">{node.subtitle}</span> : null
-      ) : (
-        <div className="flex flex-col items-center leading-none">
-          <span
-            className={`origin-bottom transition-all duration-300 ${
-              showAfter
-                ? "scale-[0.78] text-caption text-[var(--color-text-muted)] mb-0.5"
-                : "text-label-mono text-[var(--color-text-default)]"
-            }`}
-          >
-            {showAfter ? `was ${format(node.current)}` : format(node.current)}
-          </span>
-          {showAfter && (
+    <DiagramNode variant="wallet">
+      <div className="flex flex-col items-center gap-1">
+        <span className="text-body-sm text-[var(--color-text-default)]">{node.name}</span>
+
+        {node.current === null ? (
+          node.subtitle ? <span className="text-caption text-[var(--color-text-muted)]">{node.subtitle}</span> : null
+        ) : (
+          <div className="flex flex-col items-center leading-none">
             <span
-              className={`text-label-mono ${overdrawn ? "text-[var(--color-feedback-error)]" : "text-[var(--color-text-default)]"}`}
-              style={{ animation: "flow-slide-in .3s ease both" }}
+              className={`origin-bottom transition-all duration-300 ${
+                showAfter
+                  ? "scale-[0.78] text-caption text-[var(--color-text-muted)] mb-0.5"
+                  : "text-label-mono text-[var(--color-text-default)]"
+              }`}
             >
-              {format(node.after!)}
+              {showAfter ? `was ${format(node.current)}` : format(node.current)}
             </span>
-          )}
-        </div>
-      )}
-    </div>
+            {showAfter && (
+              <span
+                className={`text-label-mono ${overdrawn ? "text-[var(--color-feedback-error)]" : "text-[var(--color-text-default)]"}`}
+                style={{ animation: "flow-slide-in .3s ease both" }}
+              >
+                {format(node.after!)}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    </DiagramNode>
   )
 }
 

package/src/index.ts

@@ -44,6 +44,7 @@ export * from "./components/ui/tabs"
 export * from "./components/ui/textarea"
 export * from "./components/ui/tooltip"
 export * from "./components/ui/flow-diagram"
+export * from "./components/ui/diagram-node"
 export * from "./components/ui/help-expander"
 
 // Brand textures + logo

package/tokens/primitives.css

@@ -240,6 +240,7 @@
   --primitive-shadow-md: 0 4px 6px oklch(0 0 0 / 0.07), 0 2px 4px oklch(0 0 0 / 0.06);
   --primitive-shadow-lg: 0 10px 15px oklch(0 0 0 / 0.10), 0 4px 6px oklch(0 0 0 / 0.05);
   --primitive-shadow-xl: 0 20px 25px oklch(0 0 0 / 0.10), 0 8px 10px oklch(0 0 0 / 0.04);
+  --primitive-shadow-raised: 0 4px 12px -1px oklch(0 0 0 / 0.18), 0 2px 5px -1px oklch(0 0 0 / 0.12);
 
   /* --- Z-index scale --- */
   --primitive-z-base:      0;

package/tokens/semantic.css

@@ -192,6 +192,7 @@
   --shadow-card:    var(--primitive-shadow-xs);
   --shadow-popover: var(--primitive-shadow-md);
   --shadow-modal:   var(--primitive-shadow-lg);
+  --shadow-raised:  var(--primitive-shadow-raised);
 }
 
 /* ── Dark mode ───────────────────────────────────────────────────── */
@@ -321,4 +322,5 @@
   --shadow-card:    none;
   --shadow-popover: var(--primitive-shadow-lg);
   --shadow-modal:   var(--primitive-shadow-xl);
+  --shadow-raised:  var(--primitive-shadow-raised);
 }