minka-ds 0.4.0 → 0.4.2

package/package.json

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

package/src/components/ui/avatar.tsx

@@ -17,6 +17,8 @@ interface AvatarProps {
   size?: "sm" | "md" | "lg"
   /** Background for the initials state. Defaults to a brand color. */
   background?: string
+  /** Foreground (initials) color. Defaults to the inverse text token. */
+  color?: string
   className?: string
 }
 
@@ -25,7 +27,7 @@ function deriveInitials(name?: string): string {
   return name.trim().split(/\s+/).map(p => p[0]).join("").slice(0, 2).toUpperCase()
 }
 
-function Avatar({ src, name, initials, size = "md", background, className }: AvatarProps) {
+function Avatar({ src, name, initials, size = "md", background, color, className }: AvatarProps) {
   return (
     <div
       data-slot="avatar"
@@ -34,7 +36,10 @@ function Avatar({ src, name, initials, size = "md", background, className }: Ava
         SIZE[size],
         className
       )}
-      style={{ background: src ? undefined : (background ?? "var(--color-brand-blue)") }}
+      style={{
+        background: src ? undefined : (background ?? "var(--color-brand-blue)"),
+        ...(color ? { color } : {}),
+      }}
     >
       {src
         ? <img src={src} alt={name ?? ""} className="size-full object-cover" />

package/src/components/ui/dialog.tsx

@@ -47,6 +47,44 @@ function DialogOverlay({
   )
 }
 
+type PanelPlacement = "side" | "top"
+
+/**
+ * Optional contextual panel rendered inside DialogContent. Holds supporting
+ * media or guidance (illustration, brand texture, action summary, help text).
+ * Place it as a direct child of DialogContent; the content adapts its layout.
+ *
+ * By default the panel bleeds to the dialog edges. Pass `inset` to float it
+ * inside the dialog with an 8px frame and rounded corners.
+ */
+function DialogPanel({
+  className,
+  placement = "side",
+  inset = false,
+  ...props
+}: React.ComponentProps<"div"> & { placement?: PanelPlacement; inset?: boolean }) {
+  return (
+    <div
+      data-slot="dialog-panel"
+      data-placement={placement}
+      data-inset={inset || undefined}
+      className={cn(
+        "relative flex flex-col justify-center bg-[var(--color-bg-canvas)]",
+        // inset panels are tighter — the 8px frame already adds breathing room
+        inset ? "p-4" : "p-6",
+        // side: a column down the left; top: a banner across the top
+        placement === "side" ? "shrink-0 sm:w-2/5" : "min-h-32",
+        // inset: float inside the dialog with an 8px frame on the dialog-facing
+        // edges only — the interior edge stays flush, the body padding separates
+        inset && "overflow-hidden [border-radius:var(--radius-card)]",
+        inset && (placement === "side" ? "ml-2 my-2" : "mt-2 mx-2"),
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
 function DialogContent({
   className,
   children,
@@ -57,31 +95,66 @@ function DialogContent({
   showCloseButton?: boolean
   container?: HTMLElement | null
 }) {
+  // Detect an optional DialogPanel child and split it out from the body.
+  const childArray = React.Children.toArray(children)
+  const panel = childArray.find(
+    (c): c is React.ReactElement<{ placement?: PanelPlacement; children?: React.ReactNode }> =>
+      React.isValidElement(c) && (c.type as { displayName?: string })?.displayName === "DialogPanel"
+  )
+  const body = childArray.filter(c => c !== panel)
+  const placement = panel?.props.placement ?? "side"
+  const hasPanel = Boolean(panel)
+
+  const closeButton = showCloseButton && (
+    <DialogPrimitive.Close asChild>
+      <Button
+        data-slot="dialog-close"
+        variant="ghost"
+        size="icon-sm"
+        aria-label="Close"
+        className="absolute top-5 right-5 z-10 translate-y-[5px] text-current opacity-70 hover:opacity-100"
+      >
+        <XIcon />
+      </Button>
+    </DialogPrimitive.Close>
+  )
+
   return (
     <DialogPortal container={container}>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
+        data-panel={hasPanel ? placement : undefined}
         className={cn(
-          "fixed top-[50%] left-[50%] [z-index:var(--z-modal)] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 [border-radius:var(--radius-modal)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] p-6 shadow-[var(--shadow-modal)] duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] [z-index:var(--z-modal)] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] overflow-hidden [border-radius:var(--radius-modal)] border border-[var(--color-border-default)] bg-[var(--color-bg-overlay)] shadow-[var(--shadow-modal)] duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          // layout: plain (padded grid) vs panelled (flex split, panel bleeds to edges)
+          hasPanel
+            ? placement === "side"
+              ? "flex flex-col sm:flex-row sm:max-w-2xl"
+              : "flex flex-col"
+            : "grid gap-4 p-5",
           className
         )}
         {...props}
       >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
+        {/* top: close lives inside the panel so it inherits the panel's foreground */}
+        {placement === "top" && panel
+          ? React.cloneElement(panel, {}, panel.props.children, closeButton)
+          : panel}
+        {hasPanel ? (
+          <div data-slot="dialog-body" className="relative flex flex-1 flex-col gap-4 p-5">
+            {body}
+          </div>
+        ) : (
+          body
         )}
+        {/* side / no panel: close sits over the content body */}
+        {placement !== "top" && closeButton}
       </DialogPrimitive.Content>
     </DialogPortal>
   )
 }
+DialogPanel.displayName = "DialogPanel"
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -127,7 +200,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-heading-4", className)}
+      className={cn("text-heading-2-serif", className)}
       {...props}
     />
   )
@@ -154,6 +227,7 @@ export {
   DialogFooter,
   DialogHeader,
   DialogOverlay,
+  DialogPanel,
   DialogPortal,
   DialogTitle,
   DialogTrigger,

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

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+
+/** Brand pair used to give a node / the flow a semantic accent. */
+export type FlowAccent =
+  | "yellow-darkforest"
+  | "rose-coral"
+  | "blue-navy"
+  | "beige-bronze"
+  | "gray-black"
+
+export interface FlowNode {
+  /** Node label (party name). */
+  name: string
+  /** Current balance; null when hidden (e.g. balance not shown). */
+  current: number | null
+  /** Projected balance after the movement; null when no amount yet or hidden. */
+  after: number | null
+  /** Shown in place of a balance when `current` is null (e.g. "Master balance"). */
+  subtitle?: string
+  /** True when this node is an unfilled slot (e.g. nothing selected yet). */
+  empty?: boolean
+  /** Optional leading icon (used by state nodes like issue/destroy). */
+  icon?: React.ReactNode
+  /**
+   * When set, this node is a "state" node (no balance) rendered in the pair's
+   * colors — used for the abstract create/destroy end of issue/destroy flows.
+   */
+  accent?: FlowAccent
+  /**
+   * Invert the accent fill: light member as background, dark as text/border
+   * (instead of dark bg + light text). Used to contrast destroy vs issue.
+   */
+  accentInverted?: boolean
+}
+
+type FormatFn = (n: number) => string
+const defaultFormat: FormatFn = (n) => "$" + n.toLocaleString("en-US")
+
+/**
+ * Exact-dash rounded border via an SVG rect overlay (CSS border-dashed has a
+ * fixed dash pattern that can't be sized). 6px dash / 6px gap. Fills its
+ * relatively-positioned parent.
+ */
+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"
+        width="100%" height="100%"
+        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>
+  )
+}
+
+export interface FlowDiagramProps {
+  /** Top node (fixed position). */
+  top: FlowNode
+  /** Bottom node (fixed position). */
+  bottom: FlowNode
+  /** The amount flowing; 0 = idle/empty state. */
+  amount: number
+  /** Flow direction — arrow + sheen travel this way. */
+  direction: "up" | "down"
+  /** Unit shown beside the amount. */
+  currency?: string
+  /** Custom amount/balance formatter (defaults to "$" + en-US grouping). */
+  format?: FormatFn
+  /** Optional content rendered below the diagram (e.g. a reference pill). */
+  footer?: React.ReactNode
+  /**
+   * Semantic accent (brand pair) for the flow — tints the arrow, sheen and
+   * amount chip. Used by issue/destroy to read as generative/destructive.
+   */
+  accent?: FlowAccent
+}
+
+/**
+ * Vertical flow diagram for a value movement between two parties. Positions are
+ * FIXED (`top` / `bottom`); only the `direction` changes which way the arrow
+ * points and the light sheen travels. Each node shows its current balance,
+ * which demotes to a "was …" caption as the new (after) balance slides in once
+ * an amount is entered. Unfilled nodes render as a dashed empty slot. Neutral
+ * styling — suited to neutral transfers.
+ */
+function FlowDiagram({ top, bottom, amount, direction, currency = "COP", format = defaultFormat, footer, accent }: FlowDiagramProps) {
+  const active = amount > 0
+  const glintKey = active ? amount : 0
+
+  return (
+    <div data-slot="flow-diagram" className="relative flex flex-col items-center">
+      <style>{`
+        @keyframes flow-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes flow-pop { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+      `}</style>
+
+      <FlowNodeCard key={top.empty ? "top-empty" : `top-${top.name}`} node={top} active={active} format={format} pop />
+
+      <Connector active={active} direction={direction} amount={amount} currency={currency} format={format} glintKey={glintKey} accent={accent} />
+
+      <FlowNodeCard key={bottom.empty ? "bottom-empty" : `bottom-${bottom.name}`} node={bottom} active={active} format={format} pop />
+
+      {/* footer (e.g. reference pill) is absolutely positioned above the diagram
+          so it doesn't shift the diagram's vertical centering when it appears */}
+      {footer && (
+        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-6">{footer}</div>
+      )}
+    </div>
+  )
+}
+
+// Full connector height: enough for top gap + badge + bottom gap.
+const CONNECTOR_H = 80
+
+function Connector({
+  active, direction, amount, currency, format, glintKey, accent,
+}: {
+  active: boolean
+  direction: "up" | "down"
+  amount: number
+  currency: string
+  format: FormatFn
+  glintKey: number
+  accent?: FlowAccent
+}) {
+  const gid = React.useId()
+  const H = CONNECTOR_H
+  const headUp = direction === "up"
+
+  // active stroke: semantic pair-dark when accented, else default ink
+  const activeStroke = accent ? `var(--color-pair-${accent}-dark)` : "var(--color-text-default)"
+
+  const head = headUp ? "M2 6 L7 0 L12 6" : `M2 ${H - 6} L7 ${H} L12 ${H - 6}`
+  const shapes = (
+    <>
+      <line x1="7" y1="0" x2="7" y2={H} />
+      <path d={head} />
+    </>
+  )
+
+  return (
+    <div className="relative flex items-center justify-center my-1" style={{ height: H }}>
+      <svg width="14" height={H} viewBox={`0 0 14 ${H}`} className="block overflow-visible" aria-hidden>
+        <g stroke={active ? activeStroke : "var(--color-border-strong)"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
+          {shapes}
+        </g>
+        {active && (
+          <>
+            <defs>
+              <linearGradient id={gid} gradientUnits="userSpaceOnUse" x1="7" y1="0" x2="7" y2="18">
+                <stop offset="0%"   stopColor="var(--color-bg-raised)" stopOpacity="0" />
+                <stop offset="50%"  stopColor="var(--color-bg-raised)" stopOpacity="0.5" />
+                <stop offset="100%" stopColor="var(--color-bg-raised)" stopOpacity="0" />
+                <animate attributeName="y1" values={direction === "down" ? `-20;${H}` : `${H};-20`} dur="2.4s" repeatCount="indefinite" />
+                <animate attributeName="y2" values={direction === "down" ? `-2;${H + 18}` : `${H + 18};-2`} dur="2.4s" repeatCount="indefinite" />
+              </linearGradient>
+            </defs>
+            <g stroke={`url(#${gid})`} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none">
+              {shapes}
+            </g>
+          </>
+        )}
+      </svg>
+
+      <span
+        key={glintKey}
+        className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 px-2.5 py-1 [border-radius:var(--radius-badge)] text-label-mono transition-colors duration-300 ${
+          active
+            ? "bg-[var(--color-bg-inverted)] text-[var(--color-text-inverse)]"
+            : "bg-[var(--color-bg-base)] text-[var(--color-text-hint)]"
+        }`}
+      >
+        {!active && <DashedBorder radius={16} />}
+        {active ? format(amount) : format(0)}
+        <span className={`text-caption ml-1 ${active ? "text-[var(--color-text-inverse-muted)]" : "text-[var(--color-text-muted)]"}`}>{currency}</span>
+      </span>
+    </div>
+  )
+}
+
+function FlowNodeCard({ node, active, format, pop }: { node: FlowNode; active: boolean; format: FormatFn; pop?: boolean }) {
+  const showAfter = active && node.after !== null
+  const overdrawn = node.after !== null && node.after < 0
+
+  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} />
+        <span className="text-body-sm text-[var(--color-text-hint)]">{node.name}</span>
+      </div>
+    )
+  }
+
+  // State node (issue/destroy abstract end): pair-colored, no balance. Icon sits
+  // inline next to the main 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>
+    )
+  }
+
+  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 && (
+            <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>
+  )
+}
+
+export { FlowDiagram }

package/src/components/ui/help-expander.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+import { HelpCircle, X, ExternalLink } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+type Anchor = "bottom-right" | "bottom-left" | "top-right" | "top-left"
+
+export interface HelpExpanderProps {
+  /** Card heading. */
+  title: string
+  /** Card body (text or nodes). */
+  children: React.ReactNode
+  /**
+   * "popover" (default) floats the card next to the trigger (portaled — works
+   * anywhere). "inset" expands the card inside the nearest positioned container,
+   * frosting whatever is behind it — for panels with empty space to fill.
+   */
+  mode?: "popover" | "inset"
+  /** Trigger appearance. Defaults to a circular "?" icon button, no label. */
+  trigger?: { icon?: React.ReactNode; label?: string }
+  /** inset mode: which corner the button sits in / the card expands from. */
+  anchor?: Anchor
+  /** Optional doc link rendered under the body. */
+  docHref?: string
+  docLabel?: string
+  className?: string
+}
+
+const ANCHOR_POS: Record<Anchor, string> = {
+  "bottom-right": "bottom-3 right-3 items-end",
+  "bottom-left":  "bottom-3 left-3 items-start",
+  "top-right":    "top-3 right-3 items-end",
+  "top-left":     "top-3 left-3 items-start",
+}
+
+// shared trigger button
+function TriggerButton({ trigger, ...props }: { trigger?: HelpExpanderProps["trigger"] } & React.ComponentProps<"button">) {
+  const icon = trigger?.icon ?? <HelpCircle className="size-4" />
+  return (
+    <button
+      type="button"
+      aria-label="Help"
+      className={cn(
+        "flex items-center justify-center gap-1.5 [border-radius:var(--radius-button)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] text-[var(--color-text-muted)] shadow-[var(--shadow-card)] transition-colors hover:text-[var(--color-text-default)] hover:border-[var(--color-border-strong)]",
+        trigger?.label ? "h-8 px-3 text-label-sm" : "size-8",
+      )}
+      {...props}
+    >
+      {icon}
+      {trigger?.label}
+    </button>
+  )
+}
+
+// shared frosted card body
+function CardBody({ title, children, docHref, docLabel, onClose }: {
+  title: string
+  children: React.ReactNode
+  docHref?: string
+  docLabel?: string
+  onClose: () => void
+}) {
+  return (
+    <div
+      className="w-full [border-radius:var(--radius-card)] border border-[var(--color-border-default)] backdrop-blur-md shadow-[var(--shadow-popover)] p-4 [animation:help-in_.2s_cubic-bezier(0.16,1,0.3,1)]"
+      style={{ backgroundColor: "color-mix(in srgb, var(--color-bg-overlay) 70%, transparent)" }}
+    >
+      <style>{`@keyframes help-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
+      <div className="flex items-start justify-between gap-3">
+        <span className="text-heading-4-serif text-[var(--color-text-default)]">{title}</span>
+        <button
+          type="button"
+          aria-label="Close help"
+          onClick={onClose}
+          className="shrink-0 -mr-1 -mt-1 size-6 flex items-center justify-center rounded-[var(--radius-button)] text-[var(--color-text-muted)] hover:bg-[var(--color-action-ghost-hover)] hover:text-[var(--color-text-default)] transition-colors"
+        >
+          <X className="size-3.5" />
+        </button>
+      </div>
+      <div className="mt-1.5 text-caption text-[var(--color-text-muted)] leading-relaxed">{children}</div>
+      {docHref && (
+        <a
+          href={docHref}
+          target="_blank"
+          rel="noreferrer"
+          className="mt-2.5 inline-flex items-center gap-1 text-caption text-[var(--color-text-link)] hover:text-[var(--color-text-link-hover)]"
+        >
+          {docLabel ?? "Learn more"}
+          <ExternalLink className="size-3" />
+        </a>
+      )}
+    </div>
+  )
+}
+
+function HelpExpander({
+  title, children, mode = "popover", trigger, anchor = "bottom-right", docHref, docLabel, className,
+}: HelpExpanderProps) {
+  const [open, setOpen] = React.useState(false)
+
+  // ── inset: expands inside the nearest positioned container ──
+  if (mode === "inset") {
+    return (
+      <div className={cn("absolute z-10 flex flex-col w-[calc(100%-1.5rem)]", ANCHOR_POS[anchor], className)}>
+        {open ? (
+          <CardBody title={title} docHref={docHref} docLabel={docLabel} onClose={() => setOpen(false)}>
+            {children}
+          </CardBody>
+        ) : (
+          <TriggerButton trigger={trigger} onClick={() => setOpen(true)} />
+        )}
+      </div>
+    )
+  }
+
+  // ── popover: floats next to the trigger (portaled) ──
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <TriggerButton trigger={trigger} className={className} />
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="top"
+          align="end"
+          sideOffset={8}
+          className="z-[var(--z-popover)] w-72 outline-none"
+        >
+          <CardBody title={title} docHref={docHref} docLabel={docLabel} onClose={() => setOpen(false)}>
+            {children}
+          </CardBody>
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  )
+}
+
+export { HelpExpander }

package/src/index.ts

@@ -43,6 +43,8 @@ export * from "./components/ui/tab-count"
 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/help-expander"
 
 // Brand textures + logo
 export * from "./textures"