@orvui/vue 0.0.0-stage → 0.1.1

package/registry/sankey-chart.json

@@ -0,0 +1,161 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "sankey-chart",
+  "type": "registry:component",
+  "title": "Sankey Chart",
+  "description": "Trace weighted flows across stages using connected nodes and proportional ribbons.",
+  "files": [
+    {
+      "path": "registry/orvui/charts/ChartTooltip.vue",
+      "target": "~/src/components/orvui/charts/ChartTooltip.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { nextTick, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport {\n  autoUpdate,\n  computePosition,\n  flip,\n  offset,\n  shift,\n  type VirtualElement,\n} from \"@floating-ui/dom\";\nimport { SPRING_PANEL } from \"../lib/ease\";\nimport { resolveElement, useReducedMotion } from \"../lib/composables\";\nconst props = withDefaults(\n  defineProps<{\n    open: boolean;\n    anchor: HTMLElement | null;\n    id: string;\n    point?: { x: number; y: number };\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n    followCursor?: boolean;\n  }>(),\n  { side: \"top\", point: () => ({ x: 0.5, y: 0.5 }), followCursor: false },\n);\nconst emit = defineEmits([\"update:open\"]);\nconst popup = ref<HTMLElement | null>(null);\nconst position = ref({ x: 0, y: 0 });\nconst ready = ref(false);\nconst reduce = useReducedMotion();\nconst mounted = ref(false);\nlet generation = 0;\nlet pointer: { x: number; y: number } | undefined;\nlet disposeLayout: (() => void) | undefined;\n\nfunction element() {\n  return resolveElement<HTMLElement>(popup.value);\n}\nfunction reference(anchor: HTMLElement): VirtualElement {\n  return {\n    contextElement: anchor,\n    getBoundingClientRect() {\n      const box = anchor.getBoundingClientRect();\n      const x =\n        props.followCursor && pointer\n          ? pointer.x\n          : box.left + box.width * props.point.x;\n      const y =\n        props.followCursor && pointer\n          ? pointer.y\n          : box.top + box.height * props.point.y;\n      return {\n        x,\n        y,\n        left: x,\n        right: x,\n        top: y,\n        bottom: y,\n        width: 0,\n        height: 0,\n        toJSON: () => ({}),\n      };\n    },\n  };\n}\nasync function place() {\n  const tooltip = element();\n  const anchor = props.anchor;\n  const current = generation;\n  if (!mounted.value || !props.open || !tooltip || !anchor) return;\n  const result = await computePosition(reference(anchor), tooltip, {\n    placement: props.side,\n    strategy: \"fixed\",\n    middleware: [offset(10), flip(), shift({ padding: 8 })],\n  });\n  if (\n    current !== generation ||\n    !mounted.value ||\n    !props.open ||\n    element() !== tooltip\n  )\n    return;\n  position.value = { x: result.x, y: result.y };\n  ready.value = true;\n}\nwatch(\n  [mounted, () => props.open, () => props.anchor, popup],\n  async (_, __, cleanup) => {\n    const current = ++generation;\n    disposeLayout?.();\n    disposeLayout = undefined;\n    ready.value = false;\n    cleanup(() => {\n      generation++;\n      disposeLayout?.();\n      disposeLayout = undefined;\n    });\n    if (!mounted.value || !props.open || !props.anchor) return;\n    await nextTick();\n    const tooltip = element();\n    if (current !== generation || !tooltip || !props.anchor) return;\n    disposeLayout = autoUpdate(props.anchor, tooltip, () => {\n      void place();\n    });\n  },\n  { flush: \"post\" },\n);\nwatch(\n  () => [props.point.x, props.point.y, props.side, props.followCursor],\n  () => {\n    void place();\n  },\n);\nwatch(\n  [mounted, () => props.anchor],\n  ([isMounted, anchor], _, cleanup) => {\n    pointer = undefined;\n    if (!isMounted || !anchor) return;\n    const move = (event: PointerEvent) => {\n      if (event.pointerType === \"touch\") return;\n      pointer = { x: event.clientX, y: event.clientY };\n      if (props.open) void place();\n    };\n    const leave = () => {\n      pointer = undefined;\n    };\n    anchor.addEventListener(\"pointermove\", move);\n    anchor.addEventListener(\"pointerleave\", leave);\n    cleanup(() => {\n      anchor.removeEventListener(\"pointermove\", move);\n      anchor.removeEventListener(\"pointerleave\", leave);\n    });\n  },\n  { flush: \"post\" },\n);\nfunction dismiss(event: PointerEvent) {\n  if (!props.open || !(event.target instanceof Node)) return;\n  if (\n    !props.anchor?.contains(event.target) &&\n    !element()?.contains(event.target)\n  )\n    emit(\"update:open\", false);\n}\nfunction escape(event: KeyboardEvent) {\n  if (props.open && event.key === \"Escape\") emit(\"update:open\", false);\n}\nonMounted(() => {\n  mounted.value = true;\n  document.addEventListener(\"pointerdown\", dismiss);\n  document.addEventListener(\"keydown\", escape);\n});\nonBeforeUnmount(() => {\n  mounted.value = false;\n  generation++;\n  disposeLayout?.();\n  document.removeEventListener(\"pointerdown\", dismiss);\n  document.removeEventListener(\"keydown\", escape);\n});\n</script>\n\n<template>\n  <AnimatePresence>\n    <motion.div\n      v-if=\"open\"\n      :id=\"id\"\n      ref=\"popup\"\n      role=\"tooltip\"\n      class=\"pointer-events-none fixed top-0 left-0 z-50 max-w-64 rounded-xl border border-border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-lg\"\n      :initial=\"{ opacity: 0, scale: 0.96 }\"\n      :animate=\"{\n        opacity: ready ? 1 : 0,\n        scale: 1,\n        x: position.x,\n        y: position.y,\n      }\"\n      :exit=\"{ opacity: 0, scale: 0.96 }\"\n      :transition=\"\n        reduce\n          ? { duration: 0 }\n          : { ...SPRING_PANEL, opacity: { duration: 0.12 } }\n      \"\n      ><slot\n    /></motion.div>\n  </AnimatePresence>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/charts/sankey-chart/index.ts",
+      "target": "~/src/components/orvui/charts/sankey-chart/index.ts",
+      "type": "registry:lib",
+      "content": "export { default as SankeyChart } from \"./src/SankeyChart.vue\";\nexport { default as SankeyChartPlot } from \"./src/SankeyChartPlot.vue\";\nexport { default as SankeyChartTooltip } from \"./src/SankeyChartTooltip.vue\";\nexport { useSankeyChart } from \"./src/context\";\nexport type { SankeyChartProps, SankeyActive } from \"./src/context\";\nexport type {\n  SankeyNode,\n  SankeyLink,\n  PlacedNode as SankeyPlacedNode,\n  PlacedLink as SankeyPlacedLink,\n} from \"./src/model\";\nexport type SankeyChartPlotProps = InstanceType<\n  (typeof import(\"./src/SankeyChartPlot.vue\"))[\"default\"]\n>[\"$props\"];\nexport type SankeyChartTooltipProps = InstanceType<\n  (typeof import(\"./src/SankeyChartTooltip.vue\"))[\"default\"]\n>[\"$props\"];\n"
+    },
+    {
+      "path": "registry/orvui/charts/sankey-chart/src/context.ts",
+      "target": "~/src/components/orvui/charts/sankey-chart/src/context.ts",
+      "type": "registry:lib",
+      "content": "import { computed, reactive, ref, useId } from \"vue\";\nimport { useMediaQuery, useReducedMotion } from \"../../../lib/composables\";\nimport { activeSelection, context, formatNumber, usePlotSize } from \"../../shared\";\nimport {\n  cleanSankey,\n  layoutSankey,\n  SANKEY_COLORS,\n  type SankeyNode,\n  type SankeyLink,\n  type PlacedNode,\n  type PlacedLink,\n} from \"./model\";\nexport interface SankeyChartProps {\n  nodes: readonly SankeyNode[];\n  links: readonly SankeyLink[];\n  label?: string;\n  formatValue?: (value: number) => string;\n  colors?: readonly string[];\n  nodeWidth?: number;\n  nodePadding?: number;\n  activeId?: string | null;\n  defaultActiveId?: string | null;\n  className?: string;\n}\nexport type SankeyActive =\n  { type: \"node\"; node: PlacedNode } | { type: \"link\"; link: PlacedLink };\nexport function createSankeyModel(\n  props: SankeyChartProps,\n  emit: (event: any, ...args: any[]) => void,\n) {\n  const plotRef = ref<HTMLElement | null>(null),\n    size = usePlotSize(plotRef, { width: 640, height: 320 });\n  const data = computed(() => cleanSankey(props.nodes, props.links));\n  const layout = computed(() =>\n    layoutSankey(data.value, {\n      ...size.value,\n      nodeWidth: props.nodeWidth ?? 12,\n      nodePadding: props.nodePadding ?? 16,\n      colors: props.colors ?? SANKEY_COLORS,\n    }),\n  );\n  const activeId = activeSelection(\n    () => props.activeId,\n    props.defaultActiveId ?? null,\n    computed(() => [\n      ...layout.value.nodes.map((node) => node.id),\n      ...layout.value.links.map((link) => link.id),\n    ]),\n    (id) => {\n      emit(\"update:activeId\", id);\n      emit(\"activeChange\", id);\n    },\n  );\n  const active = computed<SankeyActive | null>(() => {\n    const node = layout.value.nodes.find((node) => node.id === activeId.value);\n    if (node) return { type: \"node\", node };\n    const link = layout.value.links.find((link) => link.id === activeId.value);\n    return link ? { type: \"link\", link } : null;\n  });\n  return reactive({\n    nodes: computed(() => layout.value.nodes),\n    links: computed(() => layout.value.links),\n    columns: computed(() => layout.value.columns),\n    step: computed(() => layout.value.step),\n    size,\n    plotRef,\n    activeId,\n    active,\n    setActive(id: string | null) {\n      activeId.value = id;\n    },\n    tooltipOpen: ref(false),\n    tooltipId: useId(),\n    gradientId: useId().replace(/[^\\w-]/g, \"\"),\n    label: computed(() => props.label ?? \"Sankey chart\"),\n    formatValue: computed(() => props.formatValue ?? formatNumber),\n    empty: computed(() =>\n      data.value.links.length\n        ? null\n        : props.nodes.length\n          ? \"No flows to show\"\n          : \"No sankey data\",\n    ),\n    reduce: useReducedMotion(),\n    canHover: useMediaQuery(\"(hover: hover)\"),\n  });\n}\nexport const sankeyContext =\n  context<ReturnType<typeof createSankeyModel>>(\"SankeyChart\");\nexport const useSankeyChart = sankeyContext.use;\nexport function emphasis(active: SankeyActive | null) {\n  function node(node: PlacedNode) {\n    if (!active) return true;\n    return active.type === \"node\"\n      ? node.id === active.node.id\n      : node.id === active.link.source.id || node.id === active.link.target.id;\n  }\n  function link(link: PlacedLink) {\n    if (!active) return true;\n    return active.type === \"node\"\n      ? link.source.id === active.node.id || link.target.id === active.node.id\n      : link.id === active.link.id;\n  }\n  return { node, link };\n}\n"
+    },
+    {
+      "path": "registry/orvui/charts/sankey-chart/src/model.ts",
+      "target": "~/src/components/orvui/charts/sankey-chart/src/model.ts",
+      "type": "registry:lib",
+      "content": "export interface SankeyNode {\n  id: string;\n  label: string;\n  color?: string;\n  description?: string;\n}\nexport interface SankeyLink {\n  id?: string;\n  source: string;\n  target: string;\n  value: number;\n}\nexport type PlacedNode = Required<\n  Pick<SankeyNode, \"id\" | \"label\" | \"color\">\n> & {\n  description?: string;\n  value: number;\n  inValue: number;\n  outValue: number;\n  depth: number;\n  x0: number;\n  x1: number;\n  y0: number;\n  y1: number;\n};\nexport type PlacedLink = {\n  id: string;\n  source: PlacedNode;\n  target: PlacedNode;\n  value: number;\n  share: number;\n  width: number;\n  x0: number;\n  y0: number;\n  x1: number;\n  y1: number;\n  path: string;\n};\nexport type SankeyData = {\n  nodes: SankeyNode[];\n  links: SankeyLink[];\n  dropped: { invalid: SankeyLink[]; cycle: SankeyLink[] };\n};\nexport const SANKEY_COLORS = [\n  \"#1d4ed8\",\n  \"#7c3aed\",\n  \"#0f766e\",\n  \"#b45309\",\n  \"#be123c\",\n  \"#475569\",\n] as const;\nexport const linkId = (link: SankeyLink) =>\n  link.id ?? `${link.source}:${link.target}`;\n\nfunction append<T>(map: Map<string, T[]>, id: string, value: T) {\n  const list = map.get(id);\n  if (list) list.push(value);\n  else map.set(id, [value]);\n}\n\nexport function cleanSankey(\n  nodes: readonly SankeyNode[],\n  links: readonly SankeyLink[],\n): SankeyData {\n  const identities = new Map<string, SankeyNode>();\n  nodes.forEach((node) => {\n    if (!identities.has(node.id)) identities.set(node.id, node);\n  });\n  const invalid: SankeyLink[] = [];\n  const edges = new Map<string, SankeyLink>();\n  for (const edge of links) {\n    if (\n      !identities.has(edge.source) ||\n      !identities.has(edge.target) ||\n      edge.source === edge.target ||\n      !Number.isFinite(edge.value) ||\n      edge.value <= 0\n    ) {\n      invalid.push(edge);\n      continue;\n    }\n    const key = linkId(edge);\n    const previous = edges.get(key);\n    if (!previous) edges.set(key, { ...edge, id: key });\n    else if (\n      edge.id === undefined &&\n      previous.source === edge.source &&\n      previous.target === edge.target\n    )\n      previous.value += edge.value;\n    else invalid.push(edge);\n  }\n  const outgoing = new Map<string, SankeyLink[]>();\n  edges.forEach((edge) => append(outgoing, edge.source, edge));\n  const entered = new Set<string>();\n  const finished = new Set<string>();\n  const backEdges = new Set<SankeyLink>();\n  for (const root of identities.keys()) {\n    if (entered.has(root)) continue;\n    entered.add(root);\n    const traversal: { id: string; next: number }[] = [{ id: root, next: 0 }];\n    while (traversal.length) {\n      const frame = traversal[traversal.length - 1];\n      const edge = outgoing.get(frame.id)?.[frame.next++];\n      if (!edge) {\n        finished.add(frame.id);\n        traversal.pop();\n        continue;\n      }\n      if (!entered.has(edge.target)) {\n        entered.add(edge.target);\n        traversal.push({ id: edge.target, next: 0 });\n      } else if (!finished.has(edge.target)) backEdges.add(edge);\n    }\n  }\n  const kept: SankeyLink[] = [];\n  const cycle: SankeyLink[] = [];\n  edges.forEach((edge) => (backEdges.has(edge) ? cycle : kept).push(edge));\n  return {\n    nodes: [...identities.values()],\n    links: kept,\n    dropped: { invalid, cycle },\n  };\n}\n\ntype LayoutOptions = {\n  width: number;\n  height: number;\n  nodeWidth: number;\n  nodePadding: number;\n  colors: readonly string[];\n};\ntype Flow = {\n  link: SankeyLink;\n  source: PlacedNode;\n  target: PlacedNode;\n  from: number;\n  to: number;\n};\n\nexport function layoutSankey(data: SankeyData, options: LayoutOptions) {\n  const { width, height, nodeWidth, nodePadding, colors } = options;\n  const incoming = new Map<string, SankeyLink[]>();\n  const outgoing = new Map<string, SankeyLink[]>();\n  const received = new Map<string, number>();\n  const sent = new Map<string, number>();\n  for (const edge of data.links) {\n    append(incoming, edge.target, edge);\n    append(outgoing, edge.source, edge);\n    received.set(edge.target, (received.get(edge.target) ?? 0) + edge.value);\n    sent.set(edge.source, (sent.get(edge.source) ?? 0) + edge.value);\n  }\n  const remaining = new Map(\n    data.nodes.map((node) => [node.id, incoming.get(node.id)?.length ?? 0]),\n  );\n  const depth = new Map<string, number>();\n  const ready = data.nodes\n    .filter((node) => !remaining.get(node.id))\n    .map((node) => node.id);\n  ready.forEach((id) => depth.set(id, 0));\n  for (let index = 0; index < ready.length; index++) {\n    const id = ready[index];\n    for (const edge of outgoing.get(id) ?? []) {\n      depth.set(\n        edge.target,\n        Math.max(depth.get(edge.target) ?? 0, (depth.get(id) ?? 0) + 1),\n      );\n      const count = (remaining.get(edge.target) ?? 0) - 1;\n      remaining.set(edge.target, count);\n      if (count === 0) ready.push(edge.target);\n    }\n  }\n  const linked = data.nodes.filter(\n    (node) => received.has(node.id) || sent.has(node.id),\n  );\n  if (!linked.length || width <= 0 || height <= 0)\n    return {\n      nodes: [] as PlacedNode[],\n      links: [] as PlacedLink[],\n      columns: 0,\n      step: 0,\n    };\n  let terminal = 0;\n  for (const node of linked)\n    terminal = Math.max(terminal, depth.get(node.id) ?? 0);\n  const columns = terminal + 1;\n  const step = columns > 1 ? (width - nodeWidth) / (columns - 1) : 0;\n  const sourceIndices = new Map(\n    data.nodes.map((node, index) => [node.id, index]),\n  );\n  const placed = linked.map((node): PlacedNode => {\n    const inValue = received.get(node.id) ?? 0;\n    const outValue = sent.get(node.id) ?? 0;\n    const column = sent.has(node.id) ? (depth.get(node.id) ?? 0) : terminal;\n    return {\n      id: node.id,\n      label: node.label,\n      description: node.description,\n      color:\n        node.color ?? colors[(sourceIndices.get(node.id) ?? 0) % colors.length],\n      value: Math.max(inValue, outValue),\n      inValue,\n      outValue,\n      depth: column,\n      x0: column * step,\n      x1: column * step + nodeWidth,\n      y0: 0,\n      y1: 0,\n    };\n  });\n  const nodesById = new Map(placed.map((node) => [node.id, node]));\n  const lanes: PlacedNode[][] = Array.from({ length: columns }, () => []);\n  for (const node of placed) lanes[node.depth].push(node);\n  let padding = nodePadding;\n  for (const lane of lanes)\n    if (lane.length > 1)\n      padding = Math.min(padding, (height * 0.5) / (lane.length - 1));\n  let unit = Infinity;\n  for (const lane of lanes) {\n    if (!lane.length) continue;\n    const sum = lane.reduce((value, node) => value + node.value, 0);\n    unit = Math.min(unit, (height - (lane.length - 1) * padding) / sum);\n  }\n  for (const lane of lanes) {\n    let cursor = 0;\n    for (const node of lane) {\n      node.y0 = cursor;\n      node.y1 = cursor + node.value * unit;\n      cursor = node.y1 + padding;\n    }\n    const offset = (height - (cursor - padding)) / 2;\n    for (const node of lane) {\n      node.y0 += offset;\n      node.y1 += offset;\n    }\n  }\n  function constrain(lane: PlacedNode[]) {\n    let boundary = 0;\n    for (const node of lane) {\n      const shift = boundary - node.y0;\n      if (shift > 0) {\n        node.y0 += shift;\n        node.y1 += shift;\n      }\n      boundary = node.y1 + padding;\n    }\n    boundary = height;\n    for (let index = lane.length - 1; index >= 0; index--) {\n      const node = lane[index];\n      const shift = node.y1 - boundary;\n      if (shift > 0) {\n        node.y0 -= shift;\n        node.y1 -= shift;\n      }\n      boundary = node.y0 - padding;\n    }\n  }\n  function settle(lane: PlacedNode[], alpha: number, fromIncoming: boolean) {\n    for (const node of lane) {\n      let weighted = 0;\n      let weight = 0;\n      for (const edge of (fromIncoming ? incoming : outgoing).get(node.id) ??\n        []) {\n        const other = nodesById.get(fromIncoming ? edge.source : edge.target);\n        if (!other) continue;\n        weighted += ((other.y0 + other.y1) / 2) * edge.value;\n        weight += edge.value;\n      }\n      if (weight) {\n        const distance = (weighted / weight - (node.y0 + node.y1) / 2) * alpha;\n        node.y0 += distance;\n        node.y1 += distance;\n      }\n    }\n    constrain(lane);\n  }\n  for (let iteration = 0; iteration < 6; iteration++) {\n    const alpha = 0.99 ** iteration;\n    for (let column = 1; column < columns; column++)\n      settle(lanes[column], alpha, true);\n    for (let column = columns - 2; column >= 0; column--)\n      settle(lanes[column], alpha, false);\n  }\n  const leaving = new Map<string, Flow[]>();\n  const arriving = new Map<string, Flow[]>();\n  const flows: Flow[] = data.links.map((link) => ({\n    link,\n    source: nodesById.get(link.source)!,\n    target: nodesById.get(link.target)!,\n    from: 0,\n    to: 0,\n  }));\n  for (const flow of flows) {\n    append(leaving, flow.source.id, flow);\n    append(arriving, flow.target.id, flow);\n  }\n  for (const node of placed) {\n    let start = node.y0;\n    for (const flow of (leaving.get(node.id) ?? []).sort(\n      (a, b) => a.target.y0 - b.target.y0,\n    )) {\n      flow.from = start;\n      start += flow.link.value * unit;\n    }\n    start = node.y0;\n    for (const flow of (arriving.get(node.id) ?? []).sort(\n      (a, b) => a.source.y0 - b.source.y0,\n    )) {\n      flow.to = start;\n      start += flow.link.value * unit;\n    }\n  }\n  const links: PlacedLink[] = flows.map(\n    ({ link, source, target, from, to }) => {\n      const band = link.value * unit;\n      const x0 = source.x1,\n        x1 = target.x0;\n      const y0 = from + band / 2,\n        y1 = to + band / 2;\n      const middle = (x0 + x1) / 2;\n      return {\n        id: linkId(link),\n        source,\n        target,\n        value: link.value,\n        share: source.value ? link.value / source.value : 0,\n        width: band,\n        x0,\n        x1,\n        y0,\n        y1,\n        path: `M ${x0} ${y0} C ${middle} ${y0} ${middle} ${y1} ${x1} ${y1}`,\n      };\n    },\n  );\n  return { nodes: lanes.flat(), links, columns, step };\n}\n"
+    },
+    {
+      "path": "registry/orvui/charts/sankey-chart/src/SankeyChart.vue",
+      "target": "~/src/components/orvui/charts/sankey-chart/src/SankeyChart.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { provide } from \"vue\";\nimport {\n  createSankeyModel,\n  sankeyContext,\n  type SankeyChartProps,\n} from \"./context\";\nimport SankeyChartPlot from \"./SankeyChartPlot.vue\";\nimport SankeyChartTooltip from \"./SankeyChartTooltip.vue\";\nconst props = defineProps<SankeyChartProps>();\nconst emit = defineEmits([\"update:activeId\", \"activeChange\"]);\nconst chart = createSankeyModel(props, emit);\nprovide(sankeyContext.key, chart);\n</script>\n<template>\n  <section\n    :aria-label=\"chart.label\"\n    :class=\"['relative w-full min-w-0', props.className]\"\n    data-slot=\"sankey-chart\"\n  >\n    <slot><SankeyChartPlot /><SankeyChartTooltip /></slot>\n    <div class=\"sr-only\">\n      <table>\n        <caption>\n          {{\n            chart.label\n          }}\n          data\n        </caption>\n        <thead>\n          <tr>\n            <th>Flow</th>\n            <th>Value</th>\n            <th>Share of source</th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr v-for=\"link in chart.links\" :key=\"link.id\">\n            <th>{{ link.source.label }} to {{ link.target.label }}</th>\n            <td>{{ chart.formatValue(link.value) }}</td>\n            <td>{{ (link.share * 100).toFixed(1) }}%</td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </section>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/charts/sankey-chart/src/SankeyChartPlot.vue",
+      "target": "~/src/components/orvui/charts/sankey-chart/src/SankeyChartPlot.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n} from \"vue\";\nimport { motion } from \"motion-v\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"../../../lib/ease\";\nimport { useSankeyChart, emphasis } from \"./context\";\nimport type { PlacedNode } from \"./model\";\nconst props = withDefaults(defineProps<{ showValues?: boolean }>(), {\n  showValues: true,\n});\nconst chart = useSankeyChart(),\n  element = ref<HTMLElement | null>(null);\nlet focused: string | null = null,\n  live = false;\nonMounted(() => {\n  live = true;\n  chart.plotRef = element.value;\n});\nonBeforeUnmount(() => {\n  live = false;\n  if (chart.plotRef === element.value) chart.plotRef = null;\n});\nwatch(\n  () => chart.nodes.map((node) => node.id),\n  async (ids) => {\n    if (!focused || ids.includes(focused)) return;\n    focused = null;\n    await nextTick();\n    if (\n      live &&\n      (document.activeElement === document.body ||\n        !element.value?.contains(document.activeElement))\n    )\n      (\n        element.value?.querySelector<HTMLElement>(\"[data-node]\") ??\n        element.value\n      )?.focus();\n  },\n);\nconst lit = computed(() => emphasis(chart.active));\nconst links = computed(() =>\n  chart.links.map((link, index) => ({\n    link,\n    gradient: `${chart.gradientId}-${index}`,\n    opacity: chart.active ? (lit.value.link(link) ? 0.6 : 0.08) : 0.32,\n  })),\n);\nconst nodes = computed(() => {\n  const room =\n    chart.columns > 1\n      ? chart.step -\n        (chart.nodes[0] ? chart.nodes[0].x1 - chart.nodes[0].x0 : 12) -\n        16\n      : chart.size.width;\n  const characters = Math.floor(room / 6.6);\n  const connected = new Set<string>();\n  if (chart.active?.type === \"node\")\n    for (const link of chart.links) {\n      if (link.source.id === chart.activeId) connected.add(link.target.id);\n      if (link.target.id === chart.activeId) connected.add(link.source.id);\n    }\n  return chart.nodes.map((node) => {\n    const last = chart.columns > 1 && node.depth === chart.columns - 1;\n    const height = node.y1 - node.y0;\n    return {\n      node,\n      label:\n        characters >= node.label.length\n          ? node.label\n          : characters < 4\n            ? \"\"\n            : node.label.slice(0, characters - 1).trimEnd() + \"…\",\n      twoLines:\n        props.showValues &&\n        height >= 12 * 2.4 &&\n        chart.formatValue(node.value).length * 6.6 <= room,\n      labelX: last ? node.x0 - 8 : node.x1 + 8,\n      align: last ? \"end\" : \"start\",\n      lit: lit.value.node(node) || connected.has(node.id),\n      bounds: {\n        left: ((node.x0 - 4) / chart.size.width) * 100 + \"%\",\n        top:\n          (((node.y0 + node.y1) / 2 - Math.max(24, height) / 2) /\n            chart.size.height) *\n            100 +\n          \"%\",\n        width: ((node.x1 - node.x0 + 8) / chart.size.width) * 100 + \"%\",\n        height: (Math.max(24, height) / chart.size.height) * 100 + \"%\",\n      },\n    };\n  });\n});\nfunction activate(id: string) {\n  chart.setActive(id);\n  chart.tooltipOpen = true;\n}\nfunction remember(event: FocusEvent) {\n  focused = (event.target as HTMLElement).dataset.node ?? null;\n}\nfunction leave() {\n  chart.tooltipOpen = false;\n  chart.setActive(null);\n}\nfunction destination(current: PlacedNode, key: string) {\n  if (key === \"Home\") return chart.nodes[0];\n  if (key === \"End\") return chart.nodes.at(-1);\n  if (key === \"ArrowUp\" || key === \"ArrowDown\") {\n    const column = chart.nodes.filter((node) => node.depth === current.depth);\n    return column[column.indexOf(current) + (key === \"ArrowUp\" ? -1 : 1)];\n  }\n  const direction = key === \"ArrowLeft\" ? -1 : 1;\n  const center = (current.y0 + current.y1) / 2;\n  for (\n    let depth = current.depth + direction;\n    depth >= 0 && depth < chart.columns;\n    depth += direction\n  ) {\n    const candidates = chart.nodes.filter((node) => node.depth === depth);\n    if (candidates.length)\n      return candidates.sort(\n        (a, b) =>\n          Math.abs((a.y0 + a.y1) / 2 - center) -\n          Math.abs((b.y0 + b.y1) / 2 - center),\n      )[0];\n  }\n}\nfunction keydown(event: KeyboardEvent, node: PlacedNode) {\n  if (event.key === \"Escape\") {\n    chart.tooltipOpen = false;\n    return;\n  }\n  if (\n    ![\n      \"ArrowUp\",\n      \"ArrowDown\",\n      \"ArrowLeft\",\n      \"ArrowRight\",\n      \"Home\",\n      \"End\",\n    ].includes(event.key)\n  )\n    return;\n  event.preventDefault();\n  const next = destination(node, event.key) ?? node;\n  Array.from(element.value?.querySelectorAll<HTMLElement>(\"[data-node]\") ?? [])\n    .find((item) => item.dataset.node === next.id)\n    ?.focus();\n}\n</script>\n<template>\n  <div class=\"-m-2 overflow-x-auto overflow-y-hidden p-2\">\n    <div\n      ref=\"element\"\n      role=\"group\"\n      :aria-label=\"chart.label\"\n      tabindex=\"-1\"\n      class=\"relative h-80 w-full min-w-[32rem] outline-none\"\n      data-slot=\"sankey-chart-plot\"\n      @focusin=\"remember\"\n      @focusout=\"!element?.contains($event.relatedTarget as Node) && leave()\"\n      @pointerleave=\"$event.pointerType !== 'touch' && leave()\"\n    >\n      <p\n        v-if=\"chart.empty\"\n        class=\"flex h-full items-center justify-center text-sm text-muted-foreground\"\n      >\n        {{ chart.empty }}\n      </p>\n      <template v-else>\n        <svg\n          :viewBox=\"`0 0 ${chart.size.width} ${chart.size.height}`\"\n          class=\"size-full overflow-visible\"\n          aria-hidden=\"true\"\n        >\n          <defs>\n            <linearGradient\n              v-for=\"entry in links\"\n              :id=\"entry.gradient\"\n              :key=\"entry.link.id\"\n              gradientUnits=\"userSpaceOnUse\"\n              :x1=\"entry.link.x0\"\n              :x2=\"entry.link.x1\"\n            >\n              <stop offset=\"0\" :stop-color=\"entry.link.source.color\" />\n              <stop offset=\"1\" :stop-color=\"entry.link.target.color\" />\n            </linearGradient>\n          </defs>\n          <g v-for=\"{ link, gradient, opacity } in links\" :key=\"link.id\">\n            <motion.path\n              :d=\"link.path\"\n              :stroke-width=\"link.width\"\n              :stroke=\"`url(#${gradient})`\"\n              fill=\"none\"\n              :initial=\"\n                chart.reduce\n                  ? { d: link.path, strokeWidth: link.width, opacity }\n                  : {\n                      d: link.path,\n                      strokeWidth: link.width,\n                      pathLength: 0,\n                      opacity: 0,\n                    }\n              \"\n              :while-in-view=\"{\n                d: link.path,\n                strokeWidth: link.width,\n                pathLength: 1,\n                opacity,\n              }\"\n              :animate=\"{ d: link.path, strokeWidth: link.width, opacity }\"\n              :in-view-options=\"{ once: true }\"\n              :transition=\"\n                chart.reduce\n                  ? { duration: 0 }\n                  : {\n                      d: SPRING_LAYOUT,\n                      strokeWidth: SPRING_LAYOUT,\n                      pathLength: {\n                        duration: 0.7,\n                        delay: link.source.depth * 0.12,\n                        ease: EASE_OUT,\n                      },\n                      opacity: { duration: 0.18 },\n                    }\n              \"\n            />\n            <path\n              :d=\"link.path\"\n              fill=\"none\"\n              stroke=\"transparent\"\n              :stroke-width=\"Math.max(8, link.width)\"\n              @pointerenter=\"chart.canHover && activate(link.id)\"\n              @click=\"activate(link.id)\"\n            />\n          </g>\n          <motion.g\n            v-for=\"entry in nodes\"\n            :key=\"entry.node.id\"\n            :animate=\"{ opacity: entry.lit ? 1 : 0.3 }\"\n            :transition=\"{ duration: chart.reduce ? 0 : 0.18 }\"\n          >\n            <motion.rect\n              :fill=\"entry.node.color\"\n              rx=\"2\"\n              :initial=\"false\"\n              :animate=\"{\n                x: entry.node.x0,\n                y: entry.node.y0,\n                width: entry.node.x1 - entry.node.x0,\n                height: entry.node.y1 - entry.node.y0,\n              }\"\n              :transition=\"chart.reduce ? { duration: 0 } : SPRING_LAYOUT\"\n            />\n            <motion.text\n              v-if=\"entry.node.y1 - entry.node.y0 >= 12 && entry.label\"\n              :x=\"entry.labelX\"\n              :text-anchor=\"entry.align\"\n              dominant-baseline=\"middle\"\n              class=\"fill-foreground stroke-background text-xs [paint-order:stroke]\"\n              stroke-width=\"3\"\n              stroke-linejoin=\"round\"\n              :initial=\"\n                chart.reduce\n                  ? false\n                  : { y: (entry.node.y0 + entry.node.y1) / 2, opacity: 0 }\n              \"\n              :animate=\"{ y: (entry.node.y0 + entry.node.y1) / 2, opacity: 1 }\"\n              :transition=\"\n                chart.reduce\n                  ? { duration: 0 }\n                  : {\n                      y: SPRING_LAYOUT,\n                      opacity: { duration: 0.2, ease: EASE_OUT },\n                    }\n              \"\n            >\n              <tspan\n                :x=\"entry.labelX\"\n                :dy=\"entry.twoLines ? '-0.6em' : 0\"\n                class=\"font-medium\"\n              >\n                {{ entry.label }}\n              </tspan>\n              <tspan\n                v-if=\"entry.twoLines\"\n                :x=\"entry.labelX\"\n                dy=\"1.2em\"\n                class=\"fill-muted-foreground tabular-nums\"\n              >\n                {{ chart.formatValue(entry.node.value) }}\n              </tspan>\n            </motion.text>\n          </motion.g>\n        </svg>\n        <button\n          v-for=\"{ node, bounds } in nodes\"\n          :key=\"node.id\"\n          type=\"button\"\n          :data-node=\"node.id\"\n          :tabindex=\"\n            node.id ===\n            (chart.active?.type === 'node'\n              ? chart.activeId\n              : chart.nodes[0]?.id)\n              ? 0\n              : -1\n          \"\n          :aria-label=\"`${node.label}. ${chart.formatValue(node.value)}`\"\n          :aria-describedby=\"\n            chart.tooltipOpen && chart.activeId === node.id\n              ? chart.tooltipId\n              : undefined\n          \"\n          class=\"absolute rounded outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n          :style=\"bounds\"\n          @focus=\"activate(node.id)\"\n          @click=\"activate(node.id)\"\n          @pointerenter=\"chart.canHover && activate(node.id)\"\n          @keydown=\"keydown($event, node)\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/charts/sankey-chart/src/SankeyChartTooltip.vue",
+      "target": "~/src/components/orvui/charts/sankey-chart/src/SankeyChartTooltip.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { NumberTicker } from \"../../../motion/number\";\nimport ChartTooltip from \"../../ChartTooltip.vue\";\nimport { useSankeyChart } from \"./context\";\nwithDefaults(defineProps<{ side?: \"top\" | \"right\" | \"bottom\" | \"left\" }>(), {\n  side: \"top\",\n});\nconst chart = useSankeyChart();\nconst point = computed(() => {\n  const selected = chart.active;\n  if (!selected) return { x: 0.5, y: 0.5 };\n  if (selected.type === \"node\")\n    return {\n      x: (selected.node.x0 + selected.node.x1) / 2 / chart.size.width,\n      y: selected.node.y0 / chart.size.height,\n    };\n  return {\n    x: (selected.link.x0 + selected.link.x1) / 2 / chart.size.width,\n    y: (selected.link.y0 + selected.link.y1) / 2 / chart.size.height,\n  };\n});\nfunction nodeValue() {\n  return chart.formatValue(\n    chart.active?.type === \"node\" ? chart.active.node.value : 0,\n  );\n}\n</script>\n<template>\n  <ChartTooltip\n    :open=\"chart.tooltipOpen && chart.active !== null\"\n    :anchor=\"chart.plotRef\"\n    :id=\"chart.tooltipId\"\n    :point=\"point\"\n    :side=\"side\"\n    :follow-cursor=\"true\"\n    @update:open=\"chart.tooltipOpen = $event\"\n    ><slot v-if=\"chart.active\" :active=\"chart.active\"\n      ><template v-if=\"chart.active.type === 'node'\"\n        ><p class=\"font-medium\">{{ chart.active.node.label }}</p>\n        <p class=\"mt-1 font-mono\">\n          <NumberTicker\n            :value=\"chart.active.node.value\"\n            :format=\"nodeValue\"\n            :start-on-view=\"false\"\n            :duration=\"0.2\"\n            :stagger=\"0\"\n          />\n        </p>\n        <p class=\"text-muted-foreground\">\n          In {{ chart.formatValue(chart.active.node.inValue) }} · Out\n          {{ chart.formatValue(chart.active.node.outValue) }}\n        </p>\n        <p\n          v-if=\"chart.active.node.description\"\n          class=\"mt-1 text-muted-foreground\"\n        >\n          {{ chart.active.node.description }}\n        </p></template\n      ><template v-else\n        ><p>\n          {{ chart.active.link.source.label }} →\n          {{ chart.active.link.target.label }}\n        </p>\n        <p class=\"mt-1 font-mono\">\n          {{ chart.formatValue(chart.active.link.value) }} ·\n          {{ (chart.active.link.share * 100).toFixed(1) }}%\n        </p></template\n      ></slot\n    ></ChartTooltip\n  >\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/charts/shared.ts",
+      "target": "~/src/components/orvui/charts/shared.ts",
+      "type": "registry:lib",
+      "content": "import {\n  computed,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n  type ComputedRef,\n  type InjectionKey,\n  type Ref,\n} from \"vue\";\n\nconst numeric = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 2 });\nconst compact = new Intl.NumberFormat(\"en-US\", {\n  notation: \"compact\",\n  maximumFractionDigits: 1,\n});\nexport const formatNumber = (value: number) => numeric.format(value);\nexport const formatCompact = (value: number) => compact.format(value);\n\nexport function context<T>(name: string) {\n  const key: InjectionKey<T> = Symbol(name);\n  function use(): T {\n    const provided = inject(key);\n    if (provided === undefined || provided === null)\n      throw new Error(`${name} parts must be rendered inside ${name}.`);\n    return provided;\n  }\n  return { key, use };\n}\n\nexport function selection<T>(\n  get: () => T | undefined,\n  initial: T,\n  change: (value: T) => void,\n) {\n  const fallback = ref(initial) as Ref<T>;\n  return computed<T>({\n    get() {\n      const supplied = get();\n      return supplied === undefined ? fallback.value : supplied;\n    },\n    set(value) {\n      if (get() === undefined) fallback.value = value;\n      change(value);\n    },\n  });\n}\n\nexport function activeSelection(\n  get: () => string | null | undefined,\n  initial: string | null,\n  ids: ComputedRef<string[]>,\n  change: (id: string | null) => void,\n) {\n  const requested = selection(get, initial, change);\n  const available = computed(() => new Set(ids.value));\n  watch(available, (current) => {\n    const id = requested.value;\n    if (get() === undefined && id !== null && !current.has(id))\n      requested.value = null;\n  });\n  return computed<string | null>({\n    get() {\n      const id = requested.value;\n      return id !== null && available.value.has(id) ? id : null;\n    },\n    set: (id) => {\n      requested.value = id;\n    },\n  });\n}\n\nexport function usePlotSize(\n  element: Ref<HTMLElement | null>,\n  initial: { width: number; height: number },\n) {\n  const size = ref({ ...initial });\n  let observer: ResizeObserver | undefined;\n  let stop: (() => void) | undefined;\n  onMounted(() => {\n    if (typeof ResizeObserver === \"undefined\") return;\n    observer = new ResizeObserver((entries) => {\n      const entry = entries.find((item) => item.target === element.value);\n      const box = entry?.contentRect;\n      if (\n        box &&\n        box.width > 0 &&\n        box.height > 0 &&\n        (box.width !== size.value.width || box.height !== size.value.height)\n      )\n        size.value = { width: box.width, height: box.height };\n    });\n    stop = watch(\n      element,\n      (current, previous) => {\n        if (previous) observer?.unobserve(previous);\n        if (current) observer?.observe(current);\n      },\n      { immediate: true },\n    );\n  });\n  onBeforeUnmount(() => {\n    stop?.();\n    observer?.disconnect();\n  });\n  return size;\n}\n\nexport function moveFocus(\n  event: KeyboardEvent,\n  index: number,\n  count: number,\n  columns = 1,\n) {\n  if (count <= 0) return;\n  const stride = Math.max(1, columns);\n  const rowStart = Math.floor(index / stride) * stride;\n  const destinations: Record<string, number> = {\n    ArrowRight: index + 1,\n    ArrowLeft: index - 1,\n    ArrowDown: index + stride,\n    ArrowUp: index - stride,\n    Home: event.ctrlKey ? 0 : rowStart,\n    End: event.ctrlKey ? count - 1 : rowStart + stride - 1,\n  };\n  if (!(event.key in destinations)) return;\n  event.preventDefault();\n  const current = event.currentTarget;\n  if (!(current instanceof HTMLElement)) return;\n  const entries = current\n    .closest(\"[data-chart-keyboard]\")\n    ?.querySelectorAll<HTMLElement>(\"[data-chart-item]\");\n  const destination = Math.max(0, Math.min(count - 1, destinations[event.key]));\n  entries?.[destination]?.focus();\n}\n\nexport function unwrapModel<T extends object>(model: ComputedRef<T>): T {\n  const descriptors = Object.fromEntries(\n    Object.keys(model.value).map((key) => [\n      key,\n      {\n        enumerable: true,\n        get: () => model.value[key as keyof T],\n      },\n    ]),\n  );\n  return Object.defineProperties({} as T, descriptors);\n}\n"
+    },
+    {
+      "path": "registry/orvui/lib/composables.ts",
+      "target": "~/src/components/orvui/lib/composables.ts",
+      "type": "registry:lib",
+      "content": "import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch, type Ref } from \"vue\";\nimport { layerManager, type Layer } from \"./layers\";\n\nexport function useControllable<T>(props: Record<string, any>, key: string, emit: (...args: any[]) => void, fallback: T) {\n  const local = ref<T>(fallback) as Ref<T>;\n  const read = () => props[key] as T | undefined;\n  return computed<T>({\n    get() { const supplied = read(); return supplied === undefined ? local.value : supplied; },\n    set(value) { if (read() === undefined) local.value = value; emit(`update:${key}`, value); },\n  });\n}\n\nexport function useMediaQuery(query: string) {\n  const matches = ref(false);\n  let disconnect: (() => void) | undefined;\n  onMounted(() => {\n    if (typeof window.matchMedia !== \"function\") return;\n    const media = window.matchMedia(query);\n    const update = () => { matches.value = media.matches; };\n    update();\n    media.addEventListener?.(\"change\", update);\n    disconnect = () => media.removeEventListener?.(\"change\", update);\n  });\n  onBeforeUnmount(() => disconnect?.());\n  return matches;\n}\nexport function useReducedMotion() { return useMediaQuery(\"(prefers-reduced-motion: reduce)\"); }\n\nconst lockedProperties = [\"overflow\", \"position\", \"top\", \"left\", \"right\", \"width\"] as const;\nlet scrollOwners = 0;\nlet unlockPage: (() => void) | undefined;\nfunction acquirePage() {\n  if (scrollOwners++ === 0) {\n    const body = document.body.style;\n    const saved = lockedProperties.map(name => ({ name, value: body.getPropertyValue(name), priority: body.getPropertyPriority(name) }));\n    const x = window.scrollX, y = window.scrollY;\n    body.setProperty(\"overflow\", \"hidden\");\n    body.setProperty(\"position\", \"fixed\");\n    body.setProperty(\"left\", `${-x}px`);\n    body.setProperty(\"top\", `${-y}px`);\n    body.setProperty(\"right\", \"0px\");\n    body.setProperty(\"width\", \"100%\");\n    unlockPage = () => {\n      for (const entry of saved) {\n        if (entry.value) body.setProperty(entry.name, entry.value, entry.priority);\n        else body.removeProperty(entry.name);\n      }\n      const root = document.documentElement.style;\n      const behavior = root.getPropertyValue(\"scroll-behavior\");\n      const priority = root.getPropertyPriority(\"scroll-behavior\");\n      root.setProperty(\"scroll-behavior\", \"auto\");\n      window.scrollTo(x, y);\n      if (behavior) root.setProperty(\"scroll-behavior\", behavior, priority);\n      else root.removeProperty(\"scroll-behavior\");\n    };\n  }\n  let released = false;\n  return () => {\n    if (released) return;\n    released = true;\n    if (--scrollOwners === 0) { unlockPage?.(); unlockPage = undefined; }\n  };\n}\nexport function useScrollLock(locked: Ref<boolean>) {\n  let mounted = false;\n  let release: (() => void) | undefined;\n  const update = (value: boolean) => {\n    if (!mounted) return;\n    if (value && !release) release = acquirePage();\n    if (!value && release) { release(); release = undefined; }\n  };\n  onMounted(() => { mounted = true; update(locked.value); });\n  watch(locked, update);\n  onBeforeUnmount(() => { release?.(); release = undefined; mounted = false; });\n}\n\nexport function resolveElement<T extends Element = HTMLElement>(value: unknown): T | null {\n  if (!value) return null;\n  const unwrapped = (value as { $el?: unknown }).$el ?? value;\n  return typeof (unwrapped as Element).nodeType === \"number\" && (unwrapped as Element).nodeType === 1 ? unwrapped as T : null;\n}\nconst focusable = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\nfunction createLayer(modal: boolean, panel?: { readonly value: unknown }): Layer {\n  return { key: Symbol(\"orvui-layer\"), modal, owner: getCurrentInstance(), surface: () => resolveElement(panel?.value), returnTo: null };\n}\nexport function useOverlay(open: Ref<boolean>, panel: Ref<HTMLElement | null>, close: () => void, initialFocus?: () => HTMLElement | undefined) {\n  const layer = createLayer(true, panel);\n  let mounted = false;\n  let revision = 0;\n  const sync = async (value: boolean) => {\n    const current = ++revision;\n    if (!mounted) return;\n    if (!value) { layerManager.detach(layer, true); return; }\n    if (!layerManager.attach(layer)) return;\n    await nextTick();\n    if (!mounted || current !== revision || !open.value || !layerManager.top(layer)) return;\n    (initialFocus?.() ?? layer.surface()?.querySelector<HTMLElement>(focusable) ?? layer.surface())?.focus({ preventScroll: true });\n  };\n  const onKey = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || !open.value) return;\n    if (event.key === \"Escape\" && layerManager.top(layer)) {\n      event.preventDefault(); event.stopPropagation(); close(); return;\n    }\n    if (event.key !== \"Tab\" || !layerManager.modal(layer)) return;\n    const candidates = new Set<HTMLElement>();\n    for (const surface of layerManager.scopes(layer)) {\n      for (const node of surface.querySelectorAll<HTMLElement>(focusable)) {\n        if (node.getClientRects().length > 0 && !node.closest(\"[inert]\")) candidates.add(node);\n      }\n    }\n    event.preventDefault();\n    const nodes = [...candidates];\n    if (!nodes.length) { layer.surface()?.focus(); return; }\n    const position = nodes.indexOf(document.activeElement as HTMLElement);\n    const next = position < 0 ? (event.shiftKey ? nodes.length - 1 : 0) : (position + (event.shiftKey ? -1 : 1) + nodes.length) % nodes.length;\n    nodes[next].focus();\n  };\n  useScrollLock(open);\n  onMounted(() => { mounted = true; document.addEventListener(\"keydown\", onKey); void sync(open.value); });\n  watch(open, value => void sync(value));\n  onBeforeUnmount(() => { mounted = false; revision++; document.removeEventListener(\"keydown\", onKey); layerManager.detach(layer, true); });\n  return {\n    isTop: () => open.value && layerManager.top(layer),\n    containsHigher: (target: EventTarget | null) => layerManager.higher(layer, target),\n    containsOwnedPortal: (target: HTMLElement) => layerManager.containsPortal(layer.owner, target),\n  };\n}\nexport function useFloatingLayer(open: Ref<boolean>, panel?: { readonly value: unknown }) {\n  const layer = createLayer(false, panel);\n  let mounted = false;\n  let unregister: (() => void) | undefined;\n  const sync = (value: boolean) => {\n    if (!mounted) return;\n    if (value) layerManager.attach(layer); else layerManager.detach(layer, false);\n  };\n  onMounted(() => { mounted = true; unregister = layerManager.portal(layer.owner, layer.surface); sync(open.value); });\n  watch(open, sync, { flush: \"sync\" });\n  onBeforeUnmount(() => { mounted = false; unregister?.(); layerManager.detach(layer, false); });\n  const isTop = () => open.value && layerManager.top(layer);\n  return {\n    isTop,\n    claimEscape(event: KeyboardEvent) {\n      if (event.key !== \"Escape\" || event.defaultPrevented || !isTop()) return false;\n      event.preventDefault(); event.stopImmediatePropagation(); return true;\n    },\n    containsHigher: (target: EventTarget | null) => layerManager.higher(layer, target),\n  };\n}\nexport function useEventListener(target: () => EventTarget | null | undefined, event: string, handler: EventListener, options?: AddEventListenerOptions) {\n  let remove: (() => void) | undefined;\n  onMounted(() => { const element = target(); element?.addEventListener(event, handler, options); remove = () => element?.removeEventListener(event, handler, options); });\n  onBeforeUnmount(() => remove?.());\n}\n"
+    },
+    {
+      "path": "registry/orvui/lib/ease.ts",
+      "target": "~/src/components/orvui/lib/ease.ts",
+      "type": "registry:lib",
+      "content": "export const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16,1,0.3,1)\";\nexport const SPRING_PRESS = {\n  type: \"spring\",\n  stiffness: 500,\n  damping: 30,\n  mass: 0.6,\n} as const;\nexport const SPRING_SWAP = {\n  type: \"spring\",\n  stiffness: 460,\n  damping: 30,\n  mass: 0.55,\n} as const;\nexport const SPRING_PANEL = {\n  type: \"spring\",\n  stiffness: 420,\n  damping: 40,\n  mass: 0.5,\n} as const;\nexport const SPRING_LAYOUT = {\n  type: \"spring\",\n  stiffness: 360,\n  damping: 32,\n  mass: 0.6,\n} as const;\nexport const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3 } as const;\nexport const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5 } as const;\nexport const SPRING_TIMELINE = {\n  type: \"spring\",\n  stiffness: 120,\n  damping: 24,\n  mass: 1,\n} as const;\n"
+    },
+    {
+      "path": "registry/orvui/lib/layers.ts",
+      "target": "~/src/components/orvui/lib/layers.ts",
+      "type": "registry:lib",
+      "content": "import type { ComponentInternalInstance } from \"vue\";\n\ntype Surface = () => HTMLElement | null;\nexport interface Layer {\n  key: symbol;\n  modal: boolean;\n  owner: ComponentInternalInstance | null;\n  surface: Surface;\n  returnTo: HTMLElement | null;\n}\nconst active: Layer[] = [];\nconst portals = new Set<{ owner: ComponentInternalInstance | null; surface: Surface }>();\n\nfunction belongsTo(child: ComponentInternalInstance | null, parent: ComponentInternalInstance | null) {\n  if (!parent) return false;\n  for (let node = child; node; node = node.parent) if (node === parent) return true;\n  return false;\n}\nfunction later(layer: Layer) {\n  const index = active.indexOf(layer);\n  return index < 0 ? [] : active.slice(index + 1);\n}\nexport const layerManager = {\n  attach(layer: Layer) {\n    if (active.includes(layer)) return false;\n    layer.returnTo = document.activeElement as HTMLElement | null;\n    const before = active.findIndex(entry => entry.owner !== layer.owner && belongsTo(entry.owner, layer.owner));\n    active.splice(before < 0 ? active.length : before, 0, layer);\n    return true;\n  },\n  detach(layer: Layer, restore: boolean) {\n    const index = active.indexOf(layer);\n    if (index < 0) return;\n    const wasLast = index === active.length - 1;\n    const surface = layer.surface();\n    for (const successor of later(layer)) {\n      if (successor.returnTo && surface?.contains(successor.returnTo)) successor.returnTo = layer.returnTo;\n    }\n    active.splice(index, 1);\n    if (restore && wasLast && layer.returnTo?.isConnected) layer.returnTo.focus({ preventScroll: true });\n  },\n  top(layer: Layer) { return active.at(-1) === layer; },\n  modal(layer: Layer) { return active.slice().reverse().find(entry => entry.modal) === layer; },\n  higher(layer: Layer, target: EventTarget | null) {\n    return !!target && typeof (target as Node).nodeType === \"number\" && later(layer).some(entry => entry.surface()?.contains(target as Node));\n  },\n  scopes(layer: Layer) {\n    const result = [layer.surface()];\n    for (const entry of later(layer)) if (!entry.modal && belongsTo(entry.owner, layer.owner)) result.push(entry.surface());\n    return result.filter((surface): surface is HTMLElement => surface !== null);\n  },\n  portal(owner: ComponentInternalInstance | null, surface: Surface) {\n    const portal = { owner, surface };\n    portals.add(portal);\n    return () => portals.delete(portal);\n  },\n  containsPortal(owner: ComponentInternalInstance | null, target: HTMLElement) {\n    for (const portal of portals) {\n      const node = portal.surface();\n      if (node && belongsTo(portal.owner, owner) && target.contains(node)) return true;\n    }\n    return false;\n  },\n};\n"
+    },
+    {
+      "path": "registry/orvui/lib/utils.ts",
+      "target": "~/src/components/orvui/lib/utils.ts",
+      "type": "registry:lib",
+      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: unknown[]) {\n  const combined = clsx(...inputs as ClassValue[]);\n  return twMerge(combined);\n}\nexport function clamp(value: number, min: number, max: number) {\n  const aboveFloor = Math.max(min, value);\n  return Math.min(aboveFloor, max);\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/number/index.ts",
+      "target": "~/src/components/orvui/motion/number/index.ts",
+      "type": "registry:lib",
+      "content": "export { default as AnimatedNumber } from \"./src/AnimatedNumber.vue\";\nexport { default as DigitSwap } from \"./src/DigitSwap.vue\";\nexport { default as NumberTicker } from \"./src/NumberTicker.vue\";\nexport type {\n  AnimatedNumberProps,\n  NumberTickerProps,\n  DigitSwapProps,\n  DigitSwapDirection,\n} from \"./src/types\";\n"
+    },
+    {
+      "path": "registry/orvui/motion/number/src/AnimatedNumber.vue",
+      "target": "~/src/components/orvui/motion/number/src/AnimatedNumber.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport { animate } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport { useNumberViewGate } from \"./view-gate\";\nimport type { AnimatedNumberProps } from \"./types\";\nconst props = withDefaults(defineProps<AnimatedNumberProps>(), { duration: 1.2, startOnView: true });\nconst element = ref<HTMLElement | null>(null), display = ref(0), mounted = ref(false);\nconst ready = useNumberViewGate(element, () => props.startOnView);\nconst reduced = useReducedMotion();\nlet animation: ReturnType<typeof animate> | undefined;\nwatch([() => props.value, () => props.duration, ready, reduced, mounted], () => {\n  animation?.stop();\n  if (!mounted.value || !ready.value) return;\n  if (reduced.value) { display.value = props.value; return; }\n  animation = animate(display.value, props.value, { duration: props.duration, ease: EASE_OUT, onUpdate(value) { display.value = value; } });\n});\nonMounted(() => { mounted.value = true; });\nonBeforeUnmount(() => { mounted.value = false; animation?.stop(); });\n</script>\n<template><span ref=\"element\" :class=\"['tabular-nums', className]\">{{ format ? format(display) : Math.round(display).toLocaleString() }}</span></template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/number/src/DigitSwap.vue",
+      "target": "~/src/components/orvui/motion/number/src/DigitSwap.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { AnimatePresence, motion } from \"motion-v\";\nimport { cn } from \"../../../lib/utils\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { useReducedMotion } from \"../../../lib/composables\";\nimport type { DigitSwapProps } from \"./types\";\nconst props = withDefaults(defineProps<DigitSwapProps>(), { direction: \"up\", duration: 0.18, stagger: 0.006, suffixLength: 0 });\nconst reduced = useReducedMotion(), text = computed(() => String(props.value));\nconst glyphs = computed(() => Array.from(text.value, (character, position) => ({ character, position })));\nconst suffixStart = computed(() => Math.max(0, text.value.length - Math.max(0, props.suffixLength)));\nconst context = computed(() => ({ direction: props.direction, reduceMotion: reduced.value }));\nfunction hidden(data: unknown, departing: boolean) {\n  const state = data as { direction: \"up\" | \"down\"; reduceMotion: boolean };\n  const sign = state.direction === \"up\" ? 1 : -1;\n  return { opacity: 0, transform: state.reduceMotion ? \"none\" : `translateY(${45 * sign * (departing ? -1 : 1)}%)` };\n}\nconst poses = { enter: (data: unknown) => hidden(data, false), visible: { opacity: 1, transform: \"translateY(0%)\" }, exit: (data: unknown) => hidden(data, true) };\nfunction key(character: string, position: number) { return `glyph-${position}-${character}${(props.animationKey ?? props.replayKey) === undefined ? \"\" : `-${props.animationKey ?? props.replayKey}`}`; }\n</script>\n<template>\n  <span data-slot=\"digit-swap\" :data-direction=\"direction\" :class=\"['inline-flex items-baseline whitespace-nowrap', className]\">\n    <span class=\"sr-only\">{{ text }}{{ suffix }}</span>\n    <span aria-hidden=\"true\" class=\"inline-flex items-baseline\">\n      <template v-for=\"glyph in glyphs\" :key=\"glyph.position\">\n        <span v-if=\"glyph.character === ' '\" class=\"inline-block w-[0.7ch]\" />\n        <span v-else data-slot=\"digit-swap-glyph\" class=\"relative inline-block h-[1.1em] shrink-0 leading-[1.1em] [clip-path:inset(0)]\" :class=\"/\\d/.test(glyph.character) ? 'w-[1ch] text-center' : undefined\">\n          <span class=\"invisible\">{{ glyph.character }}</span>\n          <AnimatePresence :initial=\"false\" :custom=\"context\">\n            <motion.span :key=\"key(glyph.character, glyph.position)\" :custom=\"context\" :variants=\"poses\" initial=\"enter\" animate=\"visible\" exit=\"exit\"\n              :transition=\"{ duration: reduced ? Math.min(duration, 0.12) : duration, delay: reduced ? 0 : glyph.position * stagger, ease: EASE_OUT }\"\n              :class=\"cn('absolute inset-0 flex items-center justify-center leading-none', glyphClassName, glyph.position >= suffixStart ? suffixClassName : undefined)\">{{ glyph.character }}</motion.span>\n          </AnimatePresence>\n        </span>\n      </template>\n      <span v-if=\"suffix\">{{ suffix }}</span>\n    </span>\n  </span>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/number/src/NumberTicker.vue",
+      "target": "~/src/components/orvui/motion/number/src/NumberTicker.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from \"vue\";\nimport NumberTickerDigit from \"./NumberTickerDigit.vue\";\nimport { useNumberViewGate } from \"./view-gate\";\nimport type { NumberTickerProps } from \"./types\";\nconst props = withDefaults(defineProps<NumberTickerProps>(), { duration: 0.9, stagger: 0.04, startOnView: true, blur: false, locale: false });\nconst element = ref<HTMLElement | null>(null), entered = ref(false), mounted = ref(false);\nconst ready = useNumberViewGate(element, () => props.startOnView);\nconst text = computed(() => {\n  const places = Math.max(0, Math.floor(props.decimals ?? props.decimalPlaces ?? 0));\n  const rounded = Math.round(props.value * 10 ** places) / 10 ** places;\n  const formatted = props.format ? props.format(rounded) : props.locale\n    ? rounded.toLocaleString(undefined, { minimumFractionDigits: places, maximumFractionDigits: places })\n    : rounded.toFixed(places);\n  return props.pad ? formatted.padStart(props.pad, \"0\") : formatted;\n});\nconst glyphs = computed(() => Array.from(text.value, (character, index) => ({ character, id: `g-${text.value.length - index - 1}` })));\nlet timer: ReturnType<typeof setTimeout> | undefined;\nwatch([ready, mounted, () => props.duration, () => props.stagger, () => glyphs.value.length], () => {\n  clearTimeout(timer);\n  if (!mounted.value || !ready.value || entered.value) return;\n  timer = setTimeout(() => { entered.value = true; }, 1000 * (props.duration + glyphs.value.length * props.stagger));\n});\nonMounted(() => { mounted.value = true; });\nonBeforeUnmount(() => { mounted.value = false; clearTimeout(timer); });\n</script>\n<template>\n  <span ref=\"element\" :class=\"['inline-flex items-baseline tabular-nums', className]\">\n    <span class=\"sr-only\">{{ (prefix ?? '') + text + (suffix ?? '') }}</span>\n    <span aria-hidden=\"true\" class=\"inline-flex items-baseline\">\n      <span v-if=\"prefix\">{{ prefix }}</span>\n      <template v-for=\"(glyph, index) in glyphs\" :key=\"glyph.id\">\n        <NumberTickerDigit v-if=\"/\\d/.test(glyph.character)\" :digit=\"ready ? Number(glyph.character) : 0\"\n          :delay=\"entered ? 0 : index * stagger\" :duration=\"duration\" :blur=\"blur\" :class-name=\"digitClassName\" />\n        <span v-else class=\"inline-block\">{{ glyph.character }}</span>\n      </template>\n      <span v-if=\"suffix\">{{ suffix }}</span>\n    </span>\n  </span>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/number/src/NumberTickerDigit.vue",
+      "target": "~/src/components/orvui/motion/number/src/NumberTickerDigit.vue",
+      "type": "registry:component",
+      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, ref, watch } from \"vue\";\nimport { animate, motion } from \"motion-v\";\nimport { EASE_OUT } from \"../../../lib/ease\";\nimport { resolveElement, useReducedMotion } from \"../../../lib/composables\";\nconst props = defineProps<{ digit: number; delay: number; duration: number; blur: boolean; className?: string }>();\nconst column = ref<HTMLElement | null>(null), reduced = useReducedMotion();\nlet animation: ReturnType<typeof animate> | undefined;\nwatch([() => props.digit, () => props.delay, () => props.duration, () => props.blur, reduced, column], () => {\n  animation?.stop();\n  const target = column.value;\n  if (!target) return;\n  if (reduced.value || !props.blur || !Number.isFinite(props.digit)) { target.style.filter = \"blur(0px)\"; return; }\n  animation = animate(target, { filter: [\"blur(10px)\", \"blur(0px)\"] }, { duration: Math.min(0.32, props.duration * 0.75), delay: props.delay, ease: EASE_OUT });\n}, { flush: \"post\" });\nonBeforeUnmount(() => { animation?.stop(); if (column.value) column.value.style.filter = \"blur(0px)\"; });\n</script>\n<template>\n  <span :class=\"['relative inline-block text-center [clip-path:inset(0)]', className]\" :style=\"{ height: '1.1em', lineHeight: '1.1em', width: '1ch' }\">\n    <span class=\"invisible\">{{ digit }}</span>\n    <motion.span :ref=\"node => column = resolveElement<HTMLElement>(node)\" :initial=\"{ y: 0 }\" :animate=\"{ y: `-${digit * 1.1}em` }\"\n      :transition=\"reduced ? { duration: 0 } : { duration, delay, ease: EASE_OUT }\" class=\"absolute inset-x-0 top-0 flex flex-col items-center will-change-[transform,filter]\">\n      <span v-for=\"digitValue in 10\" :key=\"digitValue - 1\" class=\"flex h-[1.1em] items-center justify-center leading-none\">{{ digitValue - 1 }}</span>\n    </motion.span>\n  </span>\n</template>\n"
+    },
+    {
+      "path": "registry/orvui/motion/number/src/types.ts",
+      "target": "~/src/components/orvui/motion/number/src/types.ts",
+      "type": "registry:lib",
+      "content": "export interface NumberTickerProps {\n  value: number;\n  pad?: number;\n  decimals?: number;\n  /** Compatibility alias for decimals. */\n  decimalPlaces?: number;\n  duration?: number;\n  stagger?: number;\n  startOnView?: boolean;\n  prefix?: string;\n  suffix?: string;\n  blur?: boolean;\n  className?: string;\n  digitClassName?: string;\n  locale?: boolean;\n  format?: (value: number) => string;\n}\nexport type DigitSwapDirection = \"up\" | \"down\";\nexport interface DigitSwapProps {\n  value: string | number;\n  animationKey?: string | number;\n  /** Compatibility alias for animationKey. */\n  replayKey?: string | number;\n  direction?: DigitSwapDirection;\n  duration?: number;\n  stagger?: number;\n  suffixLength?: number;\n  className?: string;\n  glyphClassName?: string;\n  suffixClassName?: string;\n  suffix?: string;\n}\nexport interface AnimatedNumberProps {\n  value: number;\n  duration?: number;\n  format?: (n: number) => string;\n  className?: string;\n  startOnView?: boolean;\n}\n"
+    },
+    {
+      "path": "registry/orvui/motion/number/src/view-gate.ts",
+      "target": "~/src/components/orvui/motion/number/src/view-gate.ts",
+      "type": "registry:lib",
+      "content": "import { onBeforeUnmount, onMounted, ref, watch, type Ref } from \"vue\";\n\n/** A one-shot viewport gate shared by the two number renderers. */\nexport function useNumberViewGate(element: Ref<HTMLElement | null>, startOnView: () => boolean) {\n  const ready = ref(!startOnView());\n  let mounted = false, observer: IntersectionObserver | undefined;\n  function arm() {\n    if (!mounted || ready.value) return;\n    observer?.disconnect();\n    if (!startOnView() || !element.value || typeof IntersectionObserver === \"undefined\") { ready.value = true; return; }\n    observer = new IntersectionObserver(entries => {\n      if (entries.some(entry => entry.isIntersecting)) { ready.value = true; observer?.disconnect(); }\n    }, { threshold: 0.6 });\n    observer.observe(element.value);\n  }\n  onMounted(() => { mounted = true; arm(); });\n  watch(startOnView, arm);\n  onBeforeUnmount(() => { mounted = false; observer?.disconnect(); });\n  return ready;\n}\n"
+    },
+    {
+      "path": "registry/orvui/styles.css.txt",
+      "target": "~/src/components/orvui/styles.css",
+      "type": "registry:file",
+      "content": "@import \"tailwindcss\";\n@import \"./tokens.css\";\n@source \"./**/*.{vue,ts}\";\n@source not \"./**/tests/**\";\n@custom-variant dark (&:where(.dark, .dark *));\n\n:root { --announcement-h: 2.5rem; }\n\n@theme {\n  --background-image-brand-bg: var(--gradient-bg);\n  --background-image-brand-accent: var(--gradient-accent);\n  --animate-marquee: marquee 30s linear infinite;\n  --animate-marquee-vertical: marquee-vertical 30s linear infinite;\n  --animate-rainbow-border: rainbow-border 3s linear infinite;\n  --animate-shimmer: shimmer 2.5s linear infinite;\n  --animate-action-send: action-send 520ms var(--ease-out) both;\n  --animate-action-copy: action-copy 520ms var(--ease-out) both;\n  --animate-action-download: action-download 540ms var(--ease-out) both;\n  --animate-action-archive: action-archive 520ms var(--ease-out) both;\n  --animate-action-bell: action-bell 680ms var(--ease-out) both;\n  --animate-action-settings: action-settings 720ms var(--ease-out) both;\n}\n\n/* Named motion tracks are part of the public styling contract. */\n@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap, 1rem))); } }\n@keyframes marquee-vertical { to { transform: translateY(calc(-100% - var(--gap, 1rem))); } }\n@keyframes rainbow-border {\n  from { background-position: 0% 50%; }\n  to { background-position: 100% 50%; }\n}\n@keyframes shimmer {\n  from { background-position: 200% 0; }\n  to { background-position: -200% 0; }\n}\n@keyframes action-send {\n  0%, 100% { transform: translate(0, 0); }\n  45% { transform: translate(2px, -2px); }\n}\n@keyframes action-copy {\n  0%, 100% { transform: translate(0, 0); }\n  40% { transform: translate(1.5px, -1.5px); }\n  70% { transform: translate(-1px, 1px); }\n}\n@keyframes action-download {\n  0%, 100% { transform: translateY(0); }\n  42% { transform: translateY(2.5px); }\n}\n@keyframes action-archive {\n  0%, 100% { transform: scale(1); }\n  45% { transform: scale(0.9); }\n}\n@keyframes action-bell {\n  0%, 100% { transform: rotate(0deg); }\n  18% { transform: rotate(14deg); }\n  36% { transform: rotate(-12deg); }\n  54% { transform: rotate(8deg); }\n  72% { transform: rotate(-5deg); }\n}\n@keyframes action-settings {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(90deg); }\n}\n\n@layer base {\n  html, body { overflow-x: clip; }\n  html { color-scheme: light dark; }\n  body {\n    font-family: var(--font-sans);\n    color: var(--foreground);\n    background: var(--background);\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n  }\n  a, button:not(:disabled), [role=\"button\"]:not(:disabled) { cursor: pointer; }\n  ::selection {\n    color: var(--foreground);\n    background: color-mix(in oklch, var(--accent) 30%, transparent);\n  }\n  .shiki, .shiki span { color: var(--shiki-light); }\n  .dark .shiki, .dark .shiki span { color: var(--shiki-dark); }\n}\n\n@layer utilities {\n  .text-balance { text-wrap: balance; }\n  .text-pretty { text-wrap: pretty; }\n  .scrollbar-hide { scrollbar-width: none; }\n  .scrollbar-hide::-webkit-scrollbar { display: none; }\n  .mask-b-fade { mask-image: linear-gradient(to bottom, black 60%, transparent); }\n  .mask-radial-fade { mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%); }\n  .grid-noise {\n    background-size: 32px 32px;\n    background-image: linear-gradient(to right, color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--foreground) 6%, transparent) 1px, transparent 1px);\n  }\n  .glass {\n    background: var(--glass-bg);\n    border: 1px solid var(--glass-border);\n    backdrop-filter: blur(20px) saturate(160%);\n    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), 0 24px 60px -24px rgb(0 0 0 / 0.45);\n  }\n  .glass-strong { background: var(--glass-strong-bg); backdrop-filter: blur(16px); }\n  .glass-thin { background: var(--glass-thin-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); }\n  .press { transition: transform 120ms var(--ease-out); }\n  .press:active { transform: scale(0.97); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n"
+    },
+    {
+      "path": "registry/orvui/tokens.css.txt",
+      "target": "~/src/components/orvui/tokens.css",
+      "type": "registry:file",
+      "content": "/* Generated from the orvui theme compatibility contract. */\n\n:root {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: #0285f7;\n  --primary-foreground: #ffffff;\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(72% 0.18 195);\n  --accent-foreground: var(--accent-fg);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: var(--border-strong);\n}\n\n.dark {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: #0285f7;\n  --primary-foreground: #ffffff;\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(80% 0.18 195);\n  --accent-foreground: var(--accent-fg);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: var(--border-strong);\n}\n\n[data-theme=\"violet\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.2 290);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.2 290);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.2 290 / 0.5);\n}\n.dark[data-theme=\"violet\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.16 290);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.16 290);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.16 290 / 0.55);\n}\n\n[data-theme=\"blue\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.18 255);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.18 255);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.18 255 / 0.5);\n}\n.dark[data-theme=\"blue\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(70% 0.15 255);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(70% 0.15 255);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(70% 0.15 255 / 0.55);\n}\n\n[data-theme=\"green\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(56% 0.14 150);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(56% 0.14 150);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(56% 0.14 150 / 0.5);\n}\n.dark[data-theme=\"green\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.15 150);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.15 150);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.15 150 / 0.55);\n}\n\n[data-theme=\"amber\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(74% 0.15 70);\n  --primary-foreground: oklch(20% 0.02 70);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(74% 0.15 70);\n  --accent-foreground: oklch(20% 0.02 70);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(74% 0.15 70 / 0.5);\n}\n.dark[data-theme=\"amber\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(80% 0.15 75);\n  --primary-foreground: oklch(18% 0.02 75);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(80% 0.15 75);\n  --accent-foreground: oklch(18% 0.02 75);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(80% 0.15 75 / 0.55);\n}\n\n[data-theme=\"blood-orange\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(60% 0.19 40);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(60% 0.19 40);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(60% 0.19 40 / 0.5);\n}\n.dark[data-theme=\"blood-orange\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.17 42);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.17 42);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.17 42 / 0.55);\n}\n\n[data-theme=\"rose\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(58% 0.2 12);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(58% 0.2 12);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(58% 0.2 12 / 0.5);\n}\n.dark[data-theme=\"rose\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(70% 0.17 12);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(70% 0.17 12);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(70% 0.17 12 / 0.55);\n}\n\n[data-theme=\"red\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.22 25);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.22 25);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.22 25 / 0.5);\n}\n.dark[data-theme=\"red\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(68% 0.19 25);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(68% 0.19 25);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(68% 0.19 25 / 0.55);\n}\n\n[data-theme=\"teal\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(55% 0.12 185);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(55% 0.12 185);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(55% 0.12 185 / 0.5);\n}\n.dark[data-theme=\"teal\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.13 185);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(72% 0.13 185);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(72% 0.13 185 / 0.55);\n}\n\n[data-theme=\"indigo\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(50% 0.2 275);\n  --primary-foreground: oklch(99% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(50% 0.2 275);\n  --accent-foreground: oklch(99% 0 0);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(50% 0.2 275 / 0.5);\n}\n.dark[data-theme=\"indigo\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(70% 0.16 275);\n  --primary-foreground: oklch(15% 0 0);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(70% 0.16 275);\n  --accent-foreground: oklch(15% 0 0);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(70% 0.16 275 / 0.55);\n}\n\n[data-theme=\"lime\"] {\n  --border-strong: oklch(15% 0 0 / 0.12);\n  --accent-fg: oklch(15% 0 0);\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: oklch(99% 0 0 / 0.55);\n  --glass-border: oklch(15% 0 0 / 0.08);\n  --glass-strong-bg: rgb(255 255 255 / 0.7);\n  --glass-thin-bg: rgb(255 255 255 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(99% 0 0) 0%, oklch(96% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(72% 0.18 195) 0%, oklch(68% 0.22 295) 100%);\n  --background: oklch(99% 0 0);\n  --foreground: oklch(15% 0 0);\n  --card: oklch(97% 0 0);\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(72% 0.18 130);\n  --primary-foreground: oklch(20% 0.04 130);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(50% 0 0);\n  --accent: oklch(72% 0.18 130);\n  --accent-foreground: oklch(20% 0.04 130);\n  --destructive: var(--danger);\n  --border: oklch(15% 0 0 / 0.06);\n  --input: var(--border);\n  --ring: oklch(72% 0.18 130 / 0.5);\n}\n.dark[data-theme=\"lime\"] {\n  --border-strong: rgb(255 255 255 / 0.1);\n  --accent-fg: #151515;\n  --neon: oklch(80% 0.22 145);\n  --violet: oklch(68% 0.22 295);\n  --danger: oklch(62% 0.22 25);\n  --success: oklch(70% 0.18 155);\n  --warning: oklch(78% 0.18 75);\n  --glass-bg: rgb(28 28 28 / 0.55);\n  --glass-border: rgb(255 255 255 / 0.08);\n  --glass-strong-bg: rgb(28 28 28 / 0.6);\n  --glass-thin-bg: rgb(21 21 21 / 0.45);\n  --gradient-bg: linear-gradient(135deg, oklch(19% 0 0) 0%, oklch(22% 0.008 210) 100%);\n  --gradient-accent: linear-gradient(to right, oklch(80% 0.18 195) 0%, oklch(72% 0.18 295) 100%);\n  --background: #151515;\n  --foreground: oklch(96% 0 0);\n  --card: #1c1c1c;\n  --card-foreground: var(--foreground);\n  --popover: var(--card);\n  --popover-foreground: var(--foreground);\n  --primary: oklch(80% 0.18 130);\n  --primary-foreground: oklch(18% 0.04 130);\n  --secondary: var(--card);\n  --secondary-foreground: var(--foreground);\n  --muted: var(--card);\n  --muted-foreground: oklch(62% 0 0);\n  --accent: oklch(80% 0.18 130);\n  --accent-foreground: oklch(18% 0.04 130);\n  --destructive: var(--danger);\n  --border: rgb(255 255 255 / 0.05);\n  --input: var(--border);\n  --ring: oklch(80% 0.18 130 / 0.55);\n}\n\n@theme inline {\n  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\n  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);\n  --color-border: var(--border);\n  --color-border-strong: var(--border-strong);\n  --color-neon: var(--neon);\n  --color-violet: var(--violet);\n  --color-success: var(--success);\n  --color-warning: var(--warning);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --font-sans: var(--font-geist-sans, Geist), ui-sans-serif, system-ui, sans-serif;\n  --font-mono: var(--font-geist-mono, \"Geist Mono\"), ui-monospace, monospace;\n  --font-display: var(--font-geist-sans, Geist), ui-sans-serif, system-ui, sans-serif;\n}\n\n"
+    },
+    {
+      "path": "registry/orvui/LICENSE.txt",
+      "target": "~/src/components/orvui/LICENSE.txt",
+      "type": "registry:file",
+      "content": "MIT License\n\nCopyright (c) 2026 everfu\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
+    },
+    {
+      "path": "registry/orvui/NOTICE.txt",
+      "target": "~/src/components/orvui/NOTICE.txt",
+      "type": "registry:file",
+      "content": "orvui component library\n\nCopyright (c) 2026 everfu. orvui source is distributed under MIT.\nPublic signatures, numeric palette values and visual compatibility inputs are\nmaintained as the product contract. Third-party material remains separately\nlicensed; the orvui MIT license does not replace the terms below.\n\nThe documentation hero uses the framework-neutral border-beam 1.4.1 generator,\nCopyright (c) 2026 Jakub Antalik, MIT licensed. Its license is retained at\napps/docs/public/licenses/border-beam-MIT.txt.\n\nPaper Design GPU programs and @paper-design/shaders remain under PolyForm\nShield 1.0.0. See src/motion/shader-background/LICENSE.paper-design in the\npackage and /licenses/paper-design-PolyForm-Shield.txt in the documentation.\n\nGeist and Geist Mono come from installed Fontsource packages. Their SIL Open\nFont License texts are retained in the documentation licenses directory.\nLucide icons retain their ISC license. Simple Icons brand assets come from\n@iconify-json/simple-icons 1.2.100 and retain CC0 1.0 Universal; see the\nadjacent LICENSE.simple-icons files and /licenses/simple-icons-CC0.txt.\n\nDemo photography is separate third-party material served by Unsplash and\nLorem Picsum, under the provider's terms: https://unsplash.com/license .\nDiceBear Glass avatars are CC0: https://www.dicebear.com/styles/glass/ .\nCountry flag images come from Flagpedia's documented CDN service:\nhttps://flagpedia.net/download/api . These media are not relicensed as orvui code.\nConsumer-level source records are in tools/catalog/media-provenance.json;\nthe documentation serves a copy at /media-provenance.json.\n\nSynthetic club badges, terrain illustrations and demonstration copy authored\nin this implementation use the orvui MIT license. No institutional or sports\nteam marks are bundled with the synthetic market-card example.\n"
+    }
+  ],
+  "dependencies": [
+    "@floating-ui/dom@^1.7.0",
+    "clsx@^2.1.1",
+    "motion-v@^1.10.0",
+    "tailwind-merge@^3.0.0",
+    "tailwindcss@^4.0.0"
+  ],
+  "meta": {
+    "product": "orvui",
+    "version": "0.1.1",
+    "package": "@orvui/vue",
+    "category": "charts",
+    "registry": "https://orvui.efu.me/r/sankey-chart.json"
+  }
+}