@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-flow-editor.js

@@ -0,0 +1,198 @@
+import {
+  InfiniteCanvas
+} from "./chunk-AMK4VCBG.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-flow-editor/dist/index.js
+import * as React from "react";
+
+// ../flow-editor/dist/index.js
+var DEFAULT_NODE_WIDTH = 160;
+var DEFAULT_NODE_HEIGHT = 48;
+function nodeById(nodes, id) {
+  return nodes.find((n) => n.id === id);
+}
+function edgePath(source, target) {
+  const sw = source.width ?? DEFAULT_NODE_WIDTH;
+  const sh = source.height ?? DEFAULT_NODE_HEIGHT;
+  const th = target.height ?? DEFAULT_NODE_HEIGHT;
+  const x1 = source.x + sw;
+  const y1 = source.y + sh / 2;
+  const x2 = target.x;
+  const y2 = target.y + th / 2;
+  const dx = Math.abs(x2 - x1);
+  const handleLen = Math.max(dx * 0.5, 40);
+  const cx1 = x1 + handleLen;
+  const cy1 = y1;
+  const cx2 = x2 - handleLen;
+  const cy2 = y2;
+  return `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`;
+}
+function createFlowEditor() {
+  return {
+    ariaProps: {
+      role: "group",
+      "aria-label": "Flow editor"
+    },
+    dataAttributes: {
+      "data-flow-editor": "true"
+    }
+  };
+}
+var flowEditorVariants = cva({
+  base: "relative w-full overflow-hidden bg-background border border-border rounded-lg",
+  variants: {
+    size: {
+      sm: "h-64",
+      md: "h-96",
+      lg: "h-[32rem]"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var flowNodeVariants = cva({
+  base: [
+    "absolute flex items-center justify-center rounded-md border",
+    "bg-card border-border text-card-foreground text-sm font-medium",
+    "cursor-pointer select-none transition-shadow",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+  ].join(" "),
+  variants: {
+    selected: {
+      true: "ring-2 ring-ring ring-primary shadow-md",
+      false: "hover:border-primary/50 hover:shadow-sm"
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+var flowNodeLabelClass = "px-3 py-2 truncate pointer-events-none";
+var flowEdgePathClass = "fill-none stroke-current stroke-2 transition-opacity";
+var flowEdgeLabelClass = "text-xs fill-muted-foreground select-none pointer-events-none";
+
+// ../react-flow-editor/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var FlowEditor = React.forwardRef(
+  function FlowEditor2({
+    nodes,
+    edges,
+    onNodeClick,
+    onNodeMove,
+    renderNode,
+    selectedId,
+    showGrid = true,
+    showControls = true,
+    className,
+    ...props
+  }, ref) {
+    const api = createFlowEditor();
+    const dragRef = React.useRef(null);
+    const handlePointerDown = React.useCallback(
+      (event, node) => {
+        if (!onNodeMove) return;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragRef.current = {
+          id: node.id,
+          startPointerX: event.clientX,
+          startPointerY: event.clientY,
+          startNodeX: node.x,
+          startNodeY: node.y
+        };
+      },
+      [onNodeMove]
+    );
+    const handlePointerMove = React.useCallback(
+      (event) => {
+        const drag = dragRef.current;
+        if (!drag || !onNodeMove) return;
+        const dx = event.clientX - drag.startPointerX;
+        const dy = event.clientY - drag.startPointerY;
+        onNodeMove(drag.id, drag.startNodeX + dx, drag.startNodeY + dy);
+      },
+      [onNodeMove]
+    );
+    const handlePointerUp = React.useCallback(() => {
+      dragRef.current = null;
+    }, []);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(flowEditorVariants(), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: /* @__PURE__ */ jsxs(InfiniteCanvas, { showGrid, showControls, children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "absolute inset-0 w-full h-full overflow-visible text-muted-foreground pointer-events-none",
+              "aria-hidden": "true",
+              children: edges.map((edge) => {
+                const src = nodeById(nodes, edge.source);
+                const tgt = nodeById(nodes, edge.target);
+                if (!src || !tgt) return null;
+                const d = edgePath(src, tgt);
+                const midX = (src.x + (src.width ?? 160) + tgt.x) / 2;
+                const midY = (src.y + (src.height ?? 48) / 2 + tgt.y + (tgt.height ?? 48) / 2) / 2;
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx("path", { d, className: flowEdgePathClass }),
+                  edge.label != null && /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: midX,
+                      y: midY - 4,
+                      textAnchor: "middle",
+                      className: flowEdgeLabelClass,
+                      children: edge.label
+                    }
+                  )
+                ] }, edge.id);
+              })
+            }
+          ),
+          nodes.map((node) => {
+            const isSelected = node.selected || node.id === selectedId;
+            const w = node.width ?? 160;
+            const h = node.height ?? 48;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-pressed": isSelected,
+                "aria-label": node.label,
+                className: flowNodeVariants({
+                  selected: isSelected ? "true" : "false"
+                }),
+                style: { left: node.x, top: node.y, width: w, height: h },
+                onClick: () => onNodeClick?.(node.id),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onNodeClick?.(node.id);
+                  }
+                },
+                onPointerDown: (e) => handlePointerDown(e, node),
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                children: renderNode ? renderNode(node) : /* @__PURE__ */ jsx("span", { className: flowNodeLabelClass, children: node.label })
+              },
+              node.id
+            );
+          })
+        ] })
+      }
+    );
+  }
+);
+export {
+  FlowEditor
+};
+//# sourceMappingURL=react-flow-editor.js.map

package/dist/react-flow-editor.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../flow-editor/src/flow-editor.ts", "../../flow-editor/src/flow-editor.styles.ts", "../../react-flow-editor/src/flow-editor.tsx"],
+  "sourcesContent": ["/** A node in the flow editor canvas. */\nexport type FlowNode = {\n  id: string\n  x: number\n  y: number\n  width?: number\n  height?: number\n  label: string\n  selected?: boolean\n}\n\n/** A directed edge connecting two nodes. */\nexport type FlowEdge = {\n  id: string\n  source: string\n  target: string\n  label?: string\n}\n\n/** Default node dimensions used when width/height are not specified. */\nconst DEFAULT_NODE_WIDTH = 160\nconst DEFAULT_NODE_HEIGHT = 48\n\n/**\n * Compute the center point of a node in canvas coordinates.\n * Uses the node's explicit dimensions when available, otherwise falls back to\n * the default box size.\n */\nexport function nodeCenter(node: FlowNode): { x: number; y: number } {\n  const w = node.width ?? DEFAULT_NODE_WIDTH\n  const h = node.height ?? DEFAULT_NODE_HEIGHT\n  return { x: node.x + w / 2, y: node.y + h / 2 }\n}\n\n/**\n * Find a node by id. Returns `undefined` when not found; callers must guard.\n */\nexport function nodeById(\n  nodes: FlowNode[],\n  id: string,\n): FlowNode | undefined {\n  return nodes.find((n) => n.id === id)\n}\n\n/**\n * Produce an SVG cubic-bezier path `d` string between the anchor points of two\n * nodes. The control handles extend horizontally from each anchor so the curve\n * is smooth regardless of relative position — matching the easyloops\n * architecture-editor style.\n *\n * Source anchor: right-center of the source node.\n * Target anchor: left-center of the target node.\n */\nexport function edgePath(source: FlowNode, target: FlowNode): string {\n  const sw = source.width ?? DEFAULT_NODE_WIDTH\n  const sh = source.height ?? DEFAULT_NODE_HEIGHT\n  const th = target.height ?? DEFAULT_NODE_HEIGHT\n\n  const x1 = source.x + sw\n  const y1 = source.y + sh / 2\n  const x2 = target.x\n  const y2 = target.y + th / 2\n\n  const dx = Math.abs(x2 - x1)\n  const handleLen = Math.max(dx * 0.5, 40)\n\n  const cx1 = x1 + handleLen\n  const cy1 = y1\n  const cx2 = x2 - handleLen\n  const cy2 = y2\n\n  return `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`\n}\n\n/**\n * Compute the bounding box that contains all nodes. Useful for fitting the\n * viewport to content. Returns zeros when the node list is empty.\n */\nexport function contentBounds(nodes: FlowNode[]): {\n  minX: number\n  minY: number\n  maxX: number\n  maxY: number\n} {\n  if (nodes.length === 0) {\n    return { minX: 0, minY: 0, maxX: 0, maxY: 0 }\n  }\n\n  let minX = Infinity\n  let minY = Infinity\n  let maxX = -Infinity\n  let maxY = -Infinity\n\n  for (const node of nodes) {\n    const w = node.width ?? DEFAULT_NODE_WIDTH\n    const h = node.height ?? DEFAULT_NODE_HEIGHT\n    if (node.x < minX) minX = node.x\n    if (node.y < minY) minY = node.y\n    if (node.x + w > maxX) maxX = node.x + w\n    if (node.y + h > maxY) maxY = node.y + h\n  }\n\n  return { minX, minY, maxX, maxY }\n}\n\n/** Accessibility and data attributes for the root flow editor container. */\nexport interface FlowEditorAPI {\n  ariaProps: Record<string, string | number | boolean>\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Return the framework-agnostic root attributes for a FlowEditor.\n * Adapters spread `ariaProps` and `dataAttributes` on the outermost element.\n */\nexport function createFlowEditor(): FlowEditorAPI {\n  return {\n    ariaProps: {\n      role: 'group',\n      'aria-label': 'Flow editor',\n    },\n    dataAttributes: {\n      'data-flow-editor': 'true',\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Root wrapper for the flow editor canvas. Sized to fill its container and\n * provides a relative positioning context for the node/edge layers.\n */\nexport const flowEditorVariants = cva({\n  base: 'relative w-full overflow-hidden bg-background border border-border rounded-lg',\n  variants: {\n    size: {\n      sm: 'h-64',\n      md: 'h-96',\n      lg: 'h-[32rem]',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/**\n * A single node box. The `selected` variant adds a ring to signal the active\n * selection; semantic token classes are used throughout so theming works\n * without overrides.\n */\nexport const flowNodeVariants = cva({\n  base: [\n    'absolute flex items-center justify-center rounded-md border',\n    'bg-card border-border text-card-foreground text-sm font-medium',\n    'cursor-pointer select-none transition-shadow',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n  ].join(' '),\n  variants: {\n    selected: {\n      true: 'ring-2 ring-ring ring-primary shadow-md',\n      false: 'hover:border-primary/50 hover:shadow-sm',\n    },\n  },\n  defaultVariants: {\n    selected: 'false',\n  },\n})\n\n/** Accessible label text inside a node box. */\nexport const flowNodeLabelClass = 'px-3 py-2 truncate pointer-events-none'\n\n/**\n * SVG `<path>` element class for an edge. `currentColor` is used so the\n * stroke inherits from `text-muted-foreground` set on the SVG container.\n */\nexport const flowEdgePathClass =\n  'fill-none stroke-current stroke-2 transition-opacity'\n\n/** Text label positioned at the midpoint of an edge. */\nexport const flowEdgeLabelClass =\n  'text-xs fill-muted-foreground select-none pointer-events-none'\n", "import * as React from 'react'\nimport { InfiniteCanvas } from '@refraction-ui/react-infinite-canvas'\nimport {\n  createFlowEditor,\n  edgePath,\n  nodeById,\n  flowEditorVariants,\n  flowNodeVariants,\n  flowNodeLabelClass,\n  flowEdgePathClass,\n  flowEdgeLabelClass,\n  type FlowNode,\n  type FlowEdge,\n} from '@refraction-ui/flow-editor'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { FlowNode, FlowEdge }\n\nexport interface FlowEditorProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'onSelect' | 'results' | 'color' | 'content'\n  > {\n  /** The nodes to render on the canvas. */\n  nodes: FlowNode[]\n  /** The directed edges connecting nodes. */\n  edges: FlowEdge[]\n  /** Called when a node is clicked; receives the node's id. */\n  onNodeClick?: (id: string) => void\n  /**\n   * Called when a node has been dragged to a new position.\n   * Receives the node id and the new (x, y) canvas coordinates.\n   */\n  onNodeMove?: (id: string, x: number, y: number) => void\n  /** Override the rendering of individual node boxes. */\n  renderNode?: (node: FlowNode) => React.ReactNode\n  /** Id of the currently selected node (controlled). */\n  selectedId?: string\n  /** Whether to show the pan/zoom grid. */\n  showGrid?: boolean\n  /** Whether to show zoom/pan controls. */\n  showControls?: boolean\n}\n\n/**\n * FlowEditor — a node-and-edge diagram editor.\n *\n * Renders inside `<InfiniteCanvas>` so the whole graph is pan/zoomable.\n * Edges are drawn as SVG cubic bezier paths behind the node boxes.\n * Node drag is kept deliberately simple (pointer events, no external dep).\n */\nexport const FlowEditor = React.forwardRef<HTMLDivElement, FlowEditorProps>(\n  function FlowEditor(\n    {\n      nodes,\n      edges,\n      onNodeClick,\n      onNodeMove,\n      renderNode,\n      selectedId,\n      showGrid = true,\n      showControls = true,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createFlowEditor()\n\n    // Track pointer-drag state without triggering re-renders mid-drag.\n    const dragRef = React.useRef<{\n      id: string\n      startPointerX: number\n      startPointerY: number\n      startNodeX: number\n      startNodeY: number\n    } | null>(null)\n\n    const handlePointerDown = React.useCallback(\n      (event: React.PointerEvent<HTMLDivElement>, node: FlowNode) => {\n        if (!onNodeMove) return\n        event.currentTarget.setPointerCapture(event.pointerId)\n        dragRef.current = {\n          id: node.id,\n          startPointerX: event.clientX,\n          startPointerY: event.clientY,\n          startNodeX: node.x,\n          startNodeY: node.y,\n        }\n      },\n      [onNodeMove],\n    )\n\n    const handlePointerMove = React.useCallback(\n      (event: React.PointerEvent<HTMLDivElement>) => {\n        const drag = dragRef.current\n        if (!drag || !onNodeMove) return\n        const dx = event.clientX - drag.startPointerX\n        const dy = event.clientY - drag.startPointerY\n        onNodeMove(drag.id, drag.startNodeX + dx, drag.startNodeY + dy)\n      },\n      [onNodeMove],\n    )\n\n    const handlePointerUp = React.useCallback(() => {\n      dragRef.current = null\n    }, [])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(flowEditorVariants(), className)}\n        {...(api.ariaProps as React.HTMLAttributes<HTMLDivElement>)}\n        {...api.dataAttributes}\n        {...props}\n      >\n        <InfiniteCanvas showGrid={showGrid} showControls={showControls}>\n          {/* SVG edge layer — rendered behind nodes */}\n          <svg\n            className=\"absolute inset-0 w-full h-full overflow-visible text-muted-foreground pointer-events-none\"\n            aria-hidden=\"true\"\n          >\n            {edges.map((edge) => {\n              const src = nodeById(nodes, edge.source)\n              const tgt = nodeById(nodes, edge.target)\n              if (!src || !tgt) return null\n              const d = edgePath(src, tgt)\n              const midX = (src.x + (src.width ?? 160) + tgt.x) / 2\n              const midY = (src.y + (src.height ?? 48) / 2 + tgt.y + (tgt.height ?? 48) / 2) / 2\n              return (\n                <g key={edge.id}>\n                  <path d={d} className={flowEdgePathClass} />\n                  {edge.label != null && (\n                    <text\n                      x={midX}\n                      y={midY - 4}\n                      textAnchor=\"middle\"\n                      className={flowEdgeLabelClass}\n                    >\n                      {edge.label}\n                    </text>\n                  )}\n                </g>\n              )\n            })}\n          </svg>\n\n          {/* Node layer — positioned absolutely by x/y */}\n          {nodes.map((node) => {\n            const isSelected = node.selected || node.id === selectedId\n            const w = node.width ?? 160\n            const h = node.height ?? 48\n            return (\n              <div\n                key={node.id}\n                role=\"button\"\n                tabIndex={0}\n                aria-pressed={isSelected}\n                aria-label={node.label}\n                className={flowNodeVariants({\n                  selected: isSelected ? 'true' : 'false',\n                })}\n                style={{ left: node.x, top: node.y, width: w, height: h }}\n                onClick={() => onNodeClick?.(node.id)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault()\n                    onNodeClick?.(node.id)\n                  }\n                }}\n                onPointerDown={(e) => handlePointerDown(e, node)}\n                onPointerMove={handlePointerMove}\n                onPointerUp={handlePointerUp}\n              >\n                {renderNode ? (\n                  renderNode(node)\n                ) : (\n                  <span className={flowNodeLabelClass}>{node.label}</span>\n                )}\n              </div>\n            )\n          })}\n        </InfiniteCanvas>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["FlowEditor"]
+}

package/dist/react-footer.js

@@ -0,0 +1,67 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-footer/dist/index.js
+import * as React from "react";
+
+// ../footer/dist/index.js
+function createFooter(props = {}) {
+  const { copyright } = props;
+  const year = props.year ?? (/* @__PURE__ */ new Date()).getFullYear();
+  const copyrightText = copyright ?? `\xA9 ${year} All rights reserved.`;
+  return {
+    ariaProps: { role: "contentinfo" },
+    copyrightText
+  };
+}
+var footerVariants = cva({
+  base: "border-t bg-background py-8"
+});
+
+// ../react-footer/dist/index.js
+import { jsx, jsxs } from "react/jsx-runtime";
+var Footer = React.forwardRef(
+  function Footer2({
+    copyright,
+    socialLinks = [],
+    columns = [],
+    className,
+    ...props
+  }, ref) {
+    const api = createFooter({ copyright, socialLinks, columns });
+    const classes = cn(footerVariants(), className);
+    return /* @__PURE__ */ jsx("footer", { ref, className: classes, ...api.ariaProps, ...props, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl px-4", children: [
+      columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 md:grid-cols-4", children: columns.map((column) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-semibold", children: column.title }),
+        /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: column.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.href,
+            className: "text-sm text-muted-foreground transition-colors hover:text-foreground",
+            children: link.label
+          }
+        ) }, link.href)) })
+      ] }, column.title)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-8", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: api.copyrightText }),
+        socialLinks.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: socialLinks.map((link) => /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: link.href,
+            className: "text-muted-foreground transition-colors hover:text-foreground",
+            "aria-label": link.label,
+            children: link.icon ?? link.label
+          },
+          link.href
+        )) })
+      ] })
+    ] }) });
+  }
+);
+export {
+  Footer,
+  footerVariants
+};
+//# sourceMappingURL=react-footer.js.map

package/dist/react-footer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../footer/src/footer.ts", "../../footer/src/footer.styles.ts", "../../react-footer/src/footer.tsx"],
+  "sourcesContent": ["export interface SocialLink {\n  label: string\n  href: string\n  icon?: string\n}\n\nexport interface FooterColumn {\n  title: string\n  links: { label: string; href: string }[]\n}\n\nexport interface FooterProps {\n  copyright?: string\n  socialLinks?: SocialLink[]\n  columns?: FooterColumn[]\n  /** Year for the default copyrightText. Default: ambient current year — inject to avoid year-boundary SSR/CSR mismatch. */\n  year?: number\n}\n\nexport interface FooterAPI {\n  ariaProps: Record<string, string>\n  copyrightText: string\n}\n\nexport function createFooter(props: FooterProps = {}): FooterAPI {\n  const { copyright } = props\n  // Injection boundary: ambient year is the default; inject `year` so SSR and client agree.\n  const year = props.year ?? new Date().getFullYear()\n  const copyrightText = copyright ?? `© ${year} All rights reserved.`\n\n  return {\n    ariaProps: { role: 'contentinfo' },\n    copyrightText,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const footerVariants = cva({\n  base: 'border-t bg-background py-8',\n})\n", "import * as React from 'react'\nimport {\n  createFooter,\n  footerVariants,\n  type FooterColumn,\n  type SocialLink,\n} from '@refraction-ui/footer'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface FooterProps extends React.HTMLAttributes<HTMLElement> {\n  /** Custom copyright text */\n  copyright?: string\n  /** Social media links */\n  socialLinks?: SocialLink[]\n  /** Footer link columns */\n  columns?: FooterColumn[]\n}\n\n/**\n * Footer component — renders a site footer with copyright, social links, and link columns.\n *\n * Uses the headless @refraction-ui/footer core for state and ARIA attributes.\n */\nexport const Footer = React.forwardRef<HTMLElement, FooterProps>(\n  function Footer(\n    {\n      copyright,\n      socialLinks = [],\n      columns = [],\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const api = createFooter({ copyright, socialLinks, columns })\n    const classes = cn(footerVariants(), className)\n\n    return (\n      <footer ref={ref} className={classes} {...api.ariaProps} {...props}>\n        <div className=\"mx-auto max-w-7xl px-4\">\n          {columns.length > 0 && (\n            <div className=\"grid grid-cols-2 gap-8 md:grid-cols-4\">\n              {columns.map((column) => (\n                <div key={column.title}>\n                  <h3 className=\"mb-3 text-sm font-semibold\">{column.title}</h3>\n                  <ul className=\"space-y-2\">\n                    {column.links.map((link) => (\n                      <li key={link.href}>\n                        <a\n                          href={link.href}\n                          className=\"text-sm text-muted-foreground transition-colors hover:text-foreground\"\n                        >\n                          {link.label}\n                        </a>\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          )}\n          <div className=\"flex items-center justify-between pt-8\">\n            <p className=\"text-sm text-muted-foreground\">{api.copyrightText}</p>\n            {socialLinks.length > 0 && (\n              <div className=\"flex items-center gap-4\">\n                {socialLinks.map((link) => (\n                  <a\n                    key={link.href}\n                    href={link.href}\n                    className=\"text-muted-foreground transition-colors hover:text-foreground\"\n                    aria-label={link.label}\n                  >\n                    {link.icon ?? link.label}\n                  </a>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      </footer>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAwBO,SAAS,aAAa,QAAqB,CAAA,GAAe;AAC/D,QAAM,EAAE,UAAA,IAAc;AAEtB,QAAM,OAAO,MAAM,SAAQ,oBAAI,KAAA,GAAO,YAAA;AACtC,QAAM,gBAAgB,aAAa,QAAK,IAAI;AAE5C,SAAO;IACL,WAAW,EAAE,MAAM,cAAA;IACnB;EAAA;AAEJ;AChCO,IAAM,iBAAiB,IAAI;EAChC,MAAM;AACR,CAAC;;;;ACmBM,IAAM,SAAe;EAC1B,SAASA,QACP;IACE;IACA,cAAc,CAAA;IACd,UAAU,CAAA;IACV;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,MAAM,aAAa,EAAE,WAAW,aAAa,QAAA,CAAS;AAC5D,UAAM,UAAU,GAAG,eAAA,GAAkB,SAAS;AAE9C,WACE,oBAAC,UAAA,EAAO,KAAU,WAAW,SAAU,GAAG,IAAI,WAAY,GAAG,OAC3D,UAAA,qBAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;MAAA,QAAQ,SAAS,KAChB,oBAAC,OAAA,EAAI,WAAU,yCACZ,UAAA,QAAQ,IAAI,CAAC,WACZ,qBAAC,OAAA,EACC,UAAA;QAAA,oBAAC,MAAA,EAAG,WAAU,8BAA8B,UAAA,OAAO,MAAA,CAAM;QACzD,oBAAC,MAAA,EAAG,WAAU,aACX,UAAA,OAAO,MAAM,IAAI,CAAC,SACjB,oBAAC,MAAA,EACC,UAAA;UAAC;UAAA;YACC,MAAM,KAAK;YACX,WAAU;YAET,UAAA,KAAK;UAAA;QAAA,EACR,GANO,KAAK,IAOd,CACD,EAAA,CACH;MAAA,EAAA,GAbQ,OAAO,KAcjB,CACD,EAAA,CACH;MAEF,qBAAC,OAAA,EAAI,WAAU,0CACb,UAAA;QAAA,oBAAC,KAAA,EAAE,WAAU,iCAAiC,UAAA,IAAI,cAAA,CAAc;QAC/D,YAAY,SAAS,KACpB,oBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA,YAAY,IAAI,CAAC,SAChB;UAAC;UAAA;YAEC,MAAM,KAAK;YACX,WAAU;YACV,cAAY,KAAK;YAEhB,UAAA,KAAK,QAAQ,KAAK;UAAA;UALd,KAAK;QAAA,CAOb,EAAA,CACH;MAAA,EAAA,CAEJ;IAAA,EAAA,CACF,EAAA,CACF;EAEJ;AACF;",
+  "names": ["Footer"]
+}

package/dist/react-graph-view.js

@@ -0,0 +1,197 @@
+import {
+  InfiniteCanvas
+} from "./chunk-AMK4VCBG.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-graph-view/dist/index.js
+import * as React from "react";
+
+// ../graph-view/dist/index.js
+function createGraphView() {
+  return {
+    ariaProps: {
+      role: "group",
+      "aria-label": "Knowledge graph"
+    },
+    dataAttributes: {}
+  };
+}
+function nodeById(nodes, id) {
+  return nodes.find((n) => n.id === id);
+}
+function graphEdgePath(source, target) {
+  const sx = source.x;
+  const sy = source.y;
+  const tx = target.x;
+  const ty = target.y;
+  const dy = Math.abs(ty - sy);
+  const offset = Math.max(dy * 0.5, 40);
+  return `M ${sx} ${sy} C ${sx} ${sy + offset}, ${tx} ${ty - offset}, ${tx} ${ty}`;
+}
+function summarizeStates(nodes) {
+  const counts = {
+    mastered: 0,
+    "in-progress": 0,
+    "not-started": 0,
+    highlight: 0
+  };
+  for (const n of nodes) {
+    const s = n.state ?? "not-started";
+    counts[s] += 1;
+  }
+  return counts;
+}
+var graphViewVariants = cva({
+  base: "relative w-full overflow-hidden rounded-lg border border-border bg-background",
+  variants: {},
+  defaultVariants: {}
+});
+var graphNodeVariants = cva({
+  base: [
+    "absolute inline-flex items-center justify-center rounded-md border px-2 py-1",
+    "text-xs font-medium leading-none -translate-x-1/2 -translate-y-1/2",
+    "transition-colors focus-visible:outline-none focus-visible:ring-2",
+    "focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "cursor-default select-none"
+  ].join(" "),
+  variants: {
+    state: {
+      mastered: "border-transparent bg-primary text-primary-foreground",
+      "in-progress": "border-transparent bg-accent text-accent-foreground ring-2 ring-ring",
+      "not-started": "border-transparent bg-muted text-muted-foreground",
+      highlight: "border-primary bg-background text-foreground"
+    },
+    interactive: {
+      true: "cursor-pointer hover:opacity-90",
+      false: "cursor-default"
+    }
+  },
+  defaultVariants: {
+    state: "not-started",
+    interactive: "false"
+  }
+});
+var graphNodeLabelClass = "pointer-events-none whitespace-nowrap";
+var graphEdgeClass = "fill-none stroke-border stroke-[1.5] opacity-60";
+var graphLegendChipVariants = cva({
+  base: "inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium",
+  variants: {
+    state: {
+      mastered: "border-transparent bg-primary text-primary-foreground",
+      "in-progress": "border-transparent bg-accent text-accent-foreground ring-1 ring-ring",
+      "not-started": "border-transparent bg-muted text-muted-foreground",
+      highlight: "border-primary bg-background text-foreground"
+    }
+  },
+  defaultVariants: {
+    state: "not-started"
+  }
+});
+
+// ../react-graph-view/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var STATE_LABELS = {
+  mastered: "Mastered",
+  "in-progress": "In Progress",
+  "not-started": "Not Started",
+  highlight: "Highlight"
+};
+var LEGEND_ORDER = ["mastered", "in-progress", "not-started", "highlight"];
+var GraphView = React.forwardRef(
+  function GraphView2({ nodes, edges, onNodeClick, showLegend = false, className, ...props }, ref) {
+    const api = createGraphView();
+    const summary = React.useMemo(() => summarizeStates(nodes), [nodes]);
+    const nodeMap = React.useMemo(() => {
+      const m = /* @__PURE__ */ new Map();
+      for (const n of nodes) m.set(n.id, n);
+      return m;
+    }, [nodes]);
+    const padding = 80;
+    const xs = nodes.map((n) => n.x);
+    const ys = nodes.map((n) => n.y);
+    const svgWidth = nodes.length === 0 ? 400 : Math.max(...xs) + padding * 2;
+    const svgHeight = nodes.length === 0 ? 300 : Math.max(...ys) + padding * 2;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(graphViewVariants(), className),
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(InfiniteCanvas, { showGrid: true, showControls: true, children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: svgWidth,
+                height: svgHeight,
+                "aria-hidden": "true",
+                style: { position: "absolute", top: 0, left: 0, pointerEvents: "none" },
+                children: edges.map((edge) => {
+                  const source = nodeMap.get(edge.source) ?? nodeById(nodes, edge.source);
+                  const target = nodeMap.get(edge.target) ?? nodeById(nodes, edge.target);
+                  if (!source || !target) return null;
+                  return /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: graphEdgePath(source, target),
+                      className: graphEdgeClass
+                    },
+                    edge.id
+                  );
+                })
+              }
+            ),
+            nodes.map((node) => {
+              const state = node.state ?? "not-started";
+              const interactive = onNodeClick !== void 0;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": node.label,
+                  "data-state": state,
+                  className: cn(
+                    graphNodeVariants({ state, interactive: interactive ? "true" : "false" })
+                  ),
+                  style: { left: node.x, top: node.y },
+                  onClick: onNodeClick ? () => onNodeClick(node) : void 0,
+                  children: /* @__PURE__ */ jsx("span", { className: graphNodeLabelClass, children: node.label })
+                },
+                node.id
+              );
+            })
+          ] }),
+          showLegend && /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "list",
+              "aria-label": "Graph legend",
+              className: "absolute bottom-3 left-3 flex flex-wrap gap-1.5",
+              children: LEGEND_ORDER.filter((s) => summary[s] > 0).map((s) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  role: "listitem",
+                  className: graphLegendChipVariants({ state: s }),
+                  children: [
+                    STATE_LABELS[s],
+                    /* @__PURE__ */ jsx("span", { className: "opacity-70", children: summary[s] })
+                  ]
+                },
+                s
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  GraphView
+};
+//# sourceMappingURL=react-graph-view.js.map

package/dist/react-graph-view.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../graph-view/src/graph-view.ts", "../../graph-view/src/graph-view.styles.ts", "../../react-graph-view/src/graph-view.tsx"],
+  "sourcesContent": ["/** Visual mastery state of a node in the knowledge graph. */\nexport type GraphNodeState = 'mastered' | 'in-progress' | 'not-started' | 'highlight'\n\n/** A concept node in the knowledge / dependency graph. */\nexport interface GraphNode {\n  /** Unique identifier. */\n  id: string\n  /** X position in the graph canvas (pixels). */\n  x: number\n  /** Y position in the graph canvas (pixels). */\n  y: number\n  /** Human-readable label shown in the node chip. */\n  label: string\n  /** Visual mastery state. Defaults to `'not-started'`. */\n  state?: GraphNodeState\n}\n\n/** A directed edge connecting two nodes. */\nexport interface GraphEdge {\n  /** Unique identifier. */\n  id: string\n  /** ID of the source node. */\n  source: string\n  /** ID of the target node. */\n  target: string\n}\n\n/** Axis-aligned bounding box of a set of nodes. */\nexport interface GraphBounds {\n  minX: number\n  minY: number\n  maxX: number\n  maxY: number\n  width: number\n  height: number\n}\n\n/** Per-state counts returned by {@link summarizeStates}. */\nexport type GraphStateSummary = Record<GraphNodeState, number>\n\nexport interface GraphViewAPI {\n  /** ARIA/role attributes to spread on the graph container. */\n  ariaProps: { role: string; 'aria-label': string }\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build framework-agnostic container props for a GraphView.\n *\n * The graph is a read-only knowledge / dependency visualisation. It uses\n * `role=\"group\"` (not `role=\"img\"`) so that interactive node chips inside it\n * remain in the accessibility tree and keyboard reachable.\n */\nexport function createGraphView(): GraphViewAPI {\n  return {\n    ariaProps: {\n      role: 'group',\n      'aria-label': 'Knowledge graph',\n    },\n    dataAttributes: {},\n  }\n}\n\n/**\n * Look up a node by id. Returns `undefined` when not found.\n */\nexport function nodeById(nodes: GraphNode[], id: string): GraphNode | undefined {\n  return nodes.find((n) => n.id === id)\n}\n\n/**\n * Build an SVG cubic-bezier path `d` string between two node positions.\n *\n * The control points bend the curve vertically so edges arc gracefully between\n * horizontally or vertically offset nodes. Works for any pair of positions.\n */\nexport function graphEdgePath(source: GraphNode, target: GraphNode): string {\n  const sx = source.x\n  const sy = source.y\n  const tx = target.x\n  const ty = target.y\n\n  // Control-point offset: half the vertical distance, minimum 40px.\n  const dy = Math.abs(ty - sy)\n  const offset = Math.max(dy * 0.5, 40)\n\n  return `M ${sx} ${sy} C ${sx} ${sy + offset}, ${tx} ${ty - offset}, ${tx} ${ty}`\n}\n\n/**\n * Compute the axis-aligned bounding box of a set of nodes.\n *\n * Returns zero-area bounds centred at the origin when the array is empty.\n */\nexport function graphBounds(nodes: GraphNode[]): GraphBounds {\n  if (nodes.length === 0) {\n    return { minX: 0, minY: 0, maxX: 0, maxY: 0, width: 0, height: 0 }\n  }\n  let minX = Infinity\n  let minY = Infinity\n  let maxX = -Infinity\n  let maxY = -Infinity\n  for (const n of nodes) {\n    if (n.x < minX) minX = n.x\n    if (n.y < minY) minY = n.y\n    if (n.x > maxX) maxX = n.x\n    if (n.y > maxY) maxY = n.y\n  }\n  return { minX, minY, maxX, maxY, width: maxX - minX, height: maxY - minY }\n}\n\n/**\n * Count nodes per mastery state.\n *\n * Nodes without an explicit `state` are counted as `'not-started'`.\n */\nexport function summarizeStates(nodes: GraphNode[]): GraphStateSummary {\n  const counts: GraphStateSummary = {\n    mastered: 0,\n    'in-progress': 0,\n    'not-started': 0,\n    highlight: 0,\n  }\n  for (const n of nodes) {\n    const s: GraphNodeState = n.state ?? 'not-started'\n    counts[s] += 1\n  }\n  return counts\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/** Outer wrapper for the graph canvas area. */\nexport const graphViewVariants = cva({\n  base: 'relative w-full overflow-hidden rounded-lg border border-border bg-background',\n  variants: {},\n  defaultVariants: {},\n})\n\n/**\n * Node chip: a positioned, clickable concept node colored by mastery state.\n *\n * `state` variant drives the visual treatment:\n * - mastered      → filled primary (bg-primary / text-primary-foreground)\n * - in-progress   → accent ring (ring-2 ring-ring bg-accent text-accent-foreground)\n * - not-started   → muted (bg-muted text-muted-foreground)\n * - highlight     → border-primary accent outline (border-primary bg-background text-foreground)\n */\nexport const graphNodeVariants = cva({\n  base: [\n    'absolute inline-flex items-center justify-center rounded-md border px-2 py-1',\n    'text-xs font-medium leading-none -translate-x-1/2 -translate-y-1/2',\n    'transition-colors focus-visible:outline-none focus-visible:ring-2',\n    'focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    'cursor-default select-none',\n  ].join(' '),\n  variants: {\n    state: {\n      mastered: 'border-transparent bg-primary text-primary-foreground',\n      'in-progress': 'border-transparent bg-accent text-accent-foreground ring-2 ring-ring',\n      'not-started': 'border-transparent bg-muted text-muted-foreground',\n      highlight: 'border-primary bg-background text-foreground',\n    },\n    interactive: {\n      true: 'cursor-pointer hover:opacity-90',\n      false: 'cursor-default',\n    },\n  },\n  defaultVariants: {\n    state: 'not-started',\n    interactive: 'false',\n  },\n})\n\n/** Label text rendered inside each node chip (already embedded in the chip). */\nexport const graphNodeLabelClass = 'pointer-events-none whitespace-nowrap'\n\n/** SVG edge line/path classes. */\nexport const graphEdgeClass =\n  'fill-none stroke-border stroke-[1.5] opacity-60'\n\n/** Legend chip: a small colored indicator + label for a single mastery state. */\nexport const graphLegendChipVariants = cva({\n  base: 'inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium',\n  variants: {\n    state: {\n      mastered: 'border-transparent bg-primary text-primary-foreground',\n      'in-progress': 'border-transparent bg-accent text-accent-foreground ring-1 ring-ring',\n      'not-started': 'border-transparent bg-muted text-muted-foreground',\n      highlight: 'border-primary bg-background text-foreground',\n    },\n  },\n  defaultVariants: {\n    state: 'not-started',\n  },\n})\n", "import * as React from 'react'\nimport { InfiniteCanvas } from '@refraction-ui/react-infinite-canvas'\nimport {\n  createGraphView,\n  graphEdgePath,\n  nodeById,\n  summarizeStates,\n  graphNodeVariants,\n  graphNodeLabelClass,\n  graphEdgeClass,\n  graphLegendChipVariants,\n  graphViewVariants,\n  type GraphNode,\n  type GraphEdge,\n  type GraphNodeState,\n} from '@refraction-ui/graph-view'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { GraphNode, GraphEdge, GraphNodeState }\n\n/** Labels shown in the legend for each mastery state. */\nconst STATE_LABELS: Record<GraphNodeState, string> = {\n  mastered: 'Mastered',\n  'in-progress': 'In Progress',\n  'not-started': 'Not Started',\n  highlight: 'Highlight',\n}\n\n/** Order in which legend states are rendered. */\nconst LEGEND_ORDER: GraphNodeState[] = ['mastered', 'in-progress', 'not-started', 'highlight']\n\nexport interface GraphViewProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'color' | 'content' | 'results'> {\n  /** Nodes to render. */\n  nodes: GraphNode[]\n  /** Directed edges connecting nodes. */\n  edges: GraphEdge[]\n  /** Called when a node chip is clicked (read-only — no selection state). */\n  onNodeClick?: (node: GraphNode) => void\n  /** Show a legend summarising mastery-state counts. */\n  showLegend?: boolean\n}\n\n/**\n * GraphView — a read-only knowledge / dependency graph rendered inside an\n * InfiniteCanvas (pan + zoom). Concept nodes are coloured by mastery state;\n * edges are SVG curves. An optional legend shows per-state node counts.\n *\n * The component is intentionally read-only: clicking a node fires `onNodeClick`\n * but never mutates the `nodes` array — the caller owns the data.\n */\nexport const GraphView = React.forwardRef<HTMLDivElement, GraphViewProps>(\n  function GraphView({ nodes, edges, onNodeClick, showLegend = false, className, ...props }, ref) {\n    const api = createGraphView()\n    const summary = React.useMemo(() => summarizeStates(nodes), [nodes])\n\n    // Build a lookup map for resolving edge endpoints.\n    const nodeMap = React.useMemo(() => {\n      const m = new Map<string, GraphNode>()\n      for (const n of nodes) m.set(n.id, n)\n      return m\n    }, [nodes])\n\n    // Estimate SVG viewport from node extents (with padding).\n    const padding = 80\n    const xs = nodes.map((n) => n.x)\n    const ys = nodes.map((n) => n.y)\n    const svgWidth = nodes.length === 0 ? 400 : Math.max(...xs) + padding * 2\n    const svgHeight = nodes.length === 0 ? 300 : Math.max(...ys) + padding * 2\n\n    return (\n      <div\n        ref={ref}\n        className={cn(graphViewVariants(), className)}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        {...props}\n      >\n        <InfiniteCanvas showGrid showControls>\n          {/* SVG layer for edges */}\n          <svg\n            width={svgWidth}\n            height={svgHeight}\n            aria-hidden=\"true\"\n            style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}\n          >\n            {edges.map((edge) => {\n              const source = nodeMap.get(edge.source) ?? nodeById(nodes, edge.source)\n              const target = nodeMap.get(edge.target) ?? nodeById(nodes, edge.target)\n              if (!source || !target) return null\n              return (\n                <path\n                  key={edge.id}\n                  d={graphEdgePath(source, target)}\n                  className={graphEdgeClass}\n                />\n              )\n            })}\n          </svg>\n\n          {/* Node chips positioned absolutely */}\n          {nodes.map((node) => {\n            const state: GraphNodeState = node.state ?? 'not-started'\n            const interactive = onNodeClick !== undefined\n            return (\n              <button\n                key={node.id}\n                type=\"button\"\n                aria-label={node.label}\n                data-state={state}\n                className={cn(\n                  graphNodeVariants({ state, interactive: interactive ? 'true' : 'false' }),\n                )}\n                style={{ left: node.x, top: node.y }}\n                onClick={onNodeClick ? () => onNodeClick(node) : undefined}\n              >\n                <span className={graphNodeLabelClass}>{node.label}</span>\n              </button>\n            )\n          })}\n        </InfiniteCanvas>\n\n        {/* Optional legend */}\n        {showLegend && (\n          <div\n            role=\"list\"\n            aria-label=\"Graph legend\"\n            className=\"absolute bottom-3 left-3 flex flex-wrap gap-1.5\"\n          >\n            {LEGEND_ORDER.filter((s) => summary[s] > 0).map((s) => (\n              <span\n                key={s}\n                role=\"listitem\"\n                className={graphLegendChipVariants({ state: s })}\n              >\n                {STATE_LABELS[s]}\n                <span className=\"opacity-70\">{summary[s]}</span>\n              </span>\n            ))}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["GraphView"]
+}

package/dist/react-icon-system.js

@@ -0,0 +1,9 @@
+// ../react-icon-system/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var IconSystem = () => {
+  return /* @__PURE__ */ jsx("div", {});
+};
+export {
+  IconSystem
+};
+//# sourceMappingURL=react-icon-system.js.map

package/dist/react-icon-system.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../react-icon-system/src/react-icon-system.tsx"],
+  "sourcesContent": ["import React from \"react\";\nexport const IconSystem = () => { return <div></div>; };\n"],
+  "mappings": ";;AACO,IAAM,aAAa,MAAM;AAAE,SAAA,oBAAQ,OAAA,CAAA,CAAI;AAAQ;",
+  "names": []
+}

package/dist/react-infinite-canvas.js

@@ -0,0 +1,8 @@
+import {
+  InfiniteCanvas
+} from "./chunk-AMK4VCBG.js";
+import "./chunk-ZF3OHCGV.js";
+export {
+  InfiniteCanvas
+};
+//# sourceMappingURL=react-infinite-canvas.js.map

package/dist/react-infinite-canvas.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}