@xenide-io/the-old-ui-theme 0.5.2 → 0.5.4

package/src/suite/icons/glyphs.ts

@@ -14,13 +14,14 @@
 
 export type SuiteGlyphElement =
   | {
-      kind: 'path';
+      kind: "path";
       d: string;
       accent?: boolean;
       filled?: boolean;
+      transform?: string;
     }
   | {
-      kind: 'circle';
+      kind: "circle";
       cx: number;
       cy: number;
       r: number;
@@ -28,7 +29,7 @@ export type SuiteGlyphElement =
       filled?: boolean;
     }
   | {
-      kind: 'rect';
+      kind: "rect";
       x: number;
       y: number;
       width: number;
@@ -50,120 +51,147 @@ export interface SuiteGlyph {
 }
 
 export type SuiteIconName =
-  | 'timer-shell'
-  | 'kanban-wave'
-  | 'squid-doc'
-  | 'stack-hex'
-  | 'crew-bot'
-  | 'workspace'
-  | 'organisation'
-  | 'integration-plug'
-  | 'suite-grid'
-  | 'bell-wave'
-  | 'today-sun';
+  | "timer-shell"
+  | "kanban-wave"
+  | "squid-doc"
+  | "stack-hex"
+  | "crew-bot"
+  | "nakama-fist"
+  | "workspace"
+  | "organisation"
+  | "integration-plug"
+  | "suite-grid"
+  | "bell-wave"
+  | "today-sun";
 
 export const SUITE_GLYPHS: Record<SuiteIconName, SuiteGlyph> = {
-  'timer-shell': {
-    description: 'TurtleTime — turtle-shell dome holding clock hands',
+  "timer-shell": {
+    description: "TurtleTime — turtle-shell dome holding clock hands",
     elements: [
-      { kind: 'path', d: 'M3 17h18' },
-      { kind: 'path', d: 'M6.5 17a5.5 5.5 0 0 1 11 0' },
-      { kind: 'circle', cx: 4, cy: 15.3, r: 1.5 },
-      { kind: 'path', d: 'M12 17v-3.4', accent: true },
-      { kind: 'path', d: 'M12 17l2.4-1.4', accent: true },
+      { kind: "path", d: "M3 17h18" },
+      { kind: "path", d: "M6.5 17a5.5 5.5 0 0 1 11 0" },
+      { kind: "circle", cx: 4, cy: 15.3, r: 1.5 },
+      { kind: "path", d: "M12 17v-3.4", accent: true },
+      { kind: "path", d: "M12 17l2.4-1.4", accent: true },
     ],
   },
-  'kanban-wave': {
-    description: 'Tides — three kanban bars riding a wave',
+  "kanban-wave": {
+    description: "Tides — three kanban bars riding a wave",
     elements: [
-      { kind: 'rect', x: 5.5, y: 8, width: 3, height: 8, rx: 1.5 },
-      { kind: 'rect', x: 10.5, y: 5.5, width: 3, height: 10.5, rx: 1.5 },
-      { kind: 'rect', x: 15.5, y: 9.5, width: 3, height: 6.5, rx: 1.5 },
+      { kind: "rect", x: 5.5, y: 8, width: 3, height: 8, rx: 1.5 },
+      { kind: "rect", x: 10.5, y: 5.5, width: 3, height: 10.5, rx: 1.5 },
+      { kind: "rect", x: 15.5, y: 9.5, width: 3, height: 6.5, rx: 1.5 },
       {
-        kind: 'path',
-        d: 'M3 19.5q2.25-2.4 4.5 0t4.5 0t4.5 0t4.5 0',
+        kind: "path",
+        d: "M3 19.5q2.25-2.4 4.5 0t4.5 0t4.5 0t4.5 0",
         accent: true,
       },
     ],
   },
-  'squid-doc': {
-    description: 'Kraken — squid with a pen-nib centre tentacle',
+  "squid-doc": {
+    description: "Kraken — squid with a pen-nib centre tentacle",
     elements: [
       {
-        kind: 'path',
-        d: 'M12 3.2c2.7 2.3 4.2 5.3 4.2 9.3H7.8c0-4 1.5-7 4.2-9.3Z',
+        kind: "path",
+        d: "M12 3.2c2.7 2.3 4.2 5.3 4.2 9.3H7.8c0-4 1.5-7 4.2-9.3Z",
       },
-      { kind: 'circle', cx: 10.1, cy: 9, r: 0.9, filled: true },
-      { kind: 'circle', cx: 13.9, cy: 9, r: 0.9, filled: true },
-      { kind: 'path', d: 'M9.4 12.4v4.8q0 2.3-2.3 2.3' },
-      { kind: 'path', d: 'M14.6 12.4v4.8q0 2.3 2.3 2.3' },
-      { kind: 'path', d: 'M12 12.4v7.1', accent: true },
+      { kind: "circle", cx: 10.1, cy: 9, r: 0.9, filled: true },
+      { kind: "circle", cx: 13.9, cy: 9, r: 0.9, filled: true },
+      { kind: "path", d: "M9.4 12.4v4.8q0 2.3-2.3 2.3" },
+      { kind: "path", d: "M14.6 12.4v4.8q0 2.3 2.3 2.3" },
+      { kind: "path", d: "M12 12.4v7.1", accent: true },
     ],
   },
-  'stack-hex': {
-    description: 'ShellStack — hexagon with the resolving spiral',
+  "stack-hex": {
+    description: "ShellStack — hexagon with the resolving spiral",
     elements: [
-      { kind: 'path', d: 'M18 12l-3 5.2H9l-3-5.2 3-5.2h6Z' },
-      { kind: 'path', d: 'M14.2 9.3H9.8v5.4h4.4v-2.7h-2.2', accent: true },
+      { kind: "path", d: "M18 12l-3 5.2H9l-3-5.2 3-5.2h6Z" },
+      { kind: "path", d: "M14.2 9.3H9.8v5.4h4.4v-2.7h-2.2", accent: true },
     ],
   },
-  'crew-bot': {
-    description: 'Crew — friendly robot head with antenna and smile',
+  "crew-bot": {
+    description: "Crew — friendly robot head with antenna and smile",
     elements: [
-      { kind: 'path', d: 'M12 7.5V5' },
-      { kind: 'circle', cx: 12, cy: 4, r: 1, filled: true },
-      { kind: 'rect', x: 5, y: 8, width: 14, height: 9.5, rx: 3 },
-      { kind: 'path', d: 'M5 11.8H3.4' },
-      { kind: 'path', d: 'M19 11.8h1.6' },
-      { kind: 'circle', cx: 9.2, cy: 11.8, r: 1, filled: true },
-      { kind: 'circle', cx: 14.8, cy: 11.8, r: 1, filled: true },
-      { kind: 'path', d: 'M9.6 14.6q2.4 1.7 4.8 0', accent: true },
+      { kind: "path", d: "M12 7.5V5" },
+      { kind: "circle", cx: 12, cy: 4, r: 1, filled: true },
+      { kind: "rect", x: 5, y: 8, width: 14, height: 9.5, rx: 3 },
+      { kind: "path", d: "M5 11.8H3.4" },
+      { kind: "path", d: "M19 11.8h1.6" },
+      { kind: "circle", cx: 9.2, cy: 11.8, r: 1, filled: true },
+      { kind: "circle", cx: 14.8, cy: 11.8, r: 1, filled: true },
+      { kind: "path", d: "M9.6 14.6q2.4 1.7 4.8 0", accent: true },
+    ],
+  },
+  "nakama-fist": {
+    description: "Nakama — raised fist with neon crew signal lines",
+    elements: [
+      {
+        kind: "path",
+        d: "M192 0c17.7 0 32 14.3 32 32v112h-64V32c0-17.7 14.3-32 32-32zM64 64c0-17.7-32-32 32-32s32 14.3 32 32v80H64V64zm192 0c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V64zm96 64c0-17.7 14.3-32 32-32s32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32v-64zm-96 88v-.6c9.4 5.4 20.3 8.6 32 8.6 13.2 0 25.4-4 35.6-10.8 8.7 24.9 32.5 42.8 60.4 42.8 11.7 0 22.6-3.1 32-8.6v8.6c0 52.3-25.1 98.8-64 128v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32v-78.4c-17.3-7.9-33.2-18.8-46.9-32.5L69.5 357.5C45.5 333.5 32 300.9 32 267v-27c0-35.3 28.7-64 64-64h88c22.1 0 40 17.9 40 40s-17.9 40-40 40h-56c-8.8 0-16 7.2-16 16s7.2 16 16 16h56c39.8 0 72-32.2 72-72z",
+        filled: true,
+        transform: "translate(2.5 1.75) scale(.0425 .0375)",
+      },
+      { kind: "path", d: "M7 18h3.5M12.2 18h3M8.5 19.5h6", accent: true },
+      {
+        kind: "path",
+        d: "M4.8 5.8h2.7M4.8 7.4h1.4M18.5 17.1h1.7",
+        accent: true,
+      },
+      { kind: "circle", cx: 18.5, cy: 4.5, r: 0.8, accent: true, filled: true },
     ],
   },
   workspace: {
-    description: 'Workspace container — panel with header bar and content',
+    description: "Workspace container — panel with header bar and content",
     elements: [
-      { kind: 'rect', x: 3.5, y: 4.5, width: 17, height: 15, rx: 2.5 },
-      { kind: 'path', d: 'M3.5 8.7h17' },
-      { kind: 'circle', cx: 6.2, cy: 6.6, r: 0.9, accent: true, filled: true },
-      { kind: 'path', d: 'M6.4 12.2h7' },
-      { kind: 'path', d: 'M6.4 15.4h10.5' },
+      { kind: "rect", x: 3.5, y: 4.5, width: 17, height: 15, rx: 2.5 },
+      { kind: "path", d: "M3.5 8.7h17" },
+      { kind: "circle", cx: 6.2, cy: 6.6, r: 0.9, accent: true, filled: true },
+      { kind: "path", d: "M6.4 12.2h7" },
+      { kind: "path", d: "M6.4 15.4h10.5" },
     ],
   },
   organisation: {
-    description: 'Organisation chart — root node with two members',
+    description: "Organisation chart — root node with two members",
     elements: [
-      { kind: 'rect', x: 9.5, y: 3.5, width: 5, height: 5, rx: 1.4, accent: true },
-      { kind: 'path', d: 'M12 8.5v2.5' },
-      { kind: 'path', d: 'M6.75 13.5v-2.5h10.5v2.5' },
-      { kind: 'rect', x: 4.25, y: 13.5, width: 5, height: 5, rx: 1.4 },
-      { kind: 'rect', x: 14.75, y: 13.5, width: 5, height: 5, rx: 1.4 },
+      {
+        kind: "rect",
+        x: 9.5,
+        y: 3.5,
+        width: 5,
+        height: 5,
+        rx: 1.4,
+        accent: true,
+      },
+      { kind: "path", d: "M12 8.5v2.5" },
+      { kind: "path", d: "M6.75 13.5v-2.5h10.5v2.5" },
+      { kind: "rect", x: 4.25, y: 13.5, width: 5, height: 5, rx: 1.4 },
+      { kind: "rect", x: 14.75, y: 13.5, width: 5, height: 5, rx: 1.4 },
     ],
   },
-  'integration-plug': {
-    description: 'Integration — two plug halves meeting under a spark',
+  "integration-plug": {
+    description: "Integration — two plug halves meeting under a spark",
     elements: [
-      { kind: 'rect', x: 3.2, y: 9.8, width: 5.6, height: 4.6, rx: 1.4 },
-      { kind: 'path', d: 'M8.8 11h2.4' },
-      { kind: 'path', d: 'M8.8 13.2h2.4' },
-      { kind: 'rect', x: 15.2, y: 9.8, width: 5.6, height: 4.6, rx: 1.4 },
-      { kind: 'path', d: 'M15.2 11h-2.4' },
-      { kind: 'path', d: 'M15.2 13.2h-2.4' },
-      { kind: 'path', d: 'M6 14.4v2q0 1.4-1.4 1.4H3.4' },
-      { kind: 'path', d: 'M18 14.4v2q0 1.4 1.4 1.4h1.2' },
-      { kind: 'path', d: 'M12 4.4v2.4', accent: true },
-      { kind: 'path', d: 'M10.4 5l3.2 1.2', accent: true },
-      { kind: 'path', d: 'M13.6 5l-3.2 1.2', accent: true },
+      { kind: "rect", x: 3.2, y: 9.8, width: 5.6, height: 4.6, rx: 1.4 },
+      { kind: "path", d: "M8.8 11h2.4" },
+      { kind: "path", d: "M8.8 13.2h2.4" },
+      { kind: "rect", x: 15.2, y: 9.8, width: 5.6, height: 4.6, rx: 1.4 },
+      { kind: "path", d: "M15.2 11h-2.4" },
+      { kind: "path", d: "M15.2 13.2h-2.4" },
+      { kind: "path", d: "M6 14.4v2q0 1.4-1.4 1.4H3.4" },
+      { kind: "path", d: "M18 14.4v2q0 1.4 1.4 1.4h1.2" },
+      { kind: "path", d: "M12 4.4v2.4", accent: true },
+      { kind: "path", d: "M10.4 5l3.2 1.2", accent: true },
+      { kind: "path", d: "M13.6 5l-3.2 1.2", accent: true },
     ],
   },
-  'suite-grid': {
-    description: 'Suite app switcher — four tiles, the active app filled',
+  "suite-grid": {
+    description: "Suite app switcher — four tiles, the active app filled",
     elements: [
-      { kind: 'rect', x: 4, y: 4, width: 7, height: 7, rx: 2 },
-      { kind: 'rect', x: 13, y: 4, width: 7, height: 7, rx: 2 },
-      { kind: 'rect', x: 4, y: 13, width: 7, height: 7, rx: 2 },
+      { kind: "rect", x: 4, y: 4, width: 7, height: 7, rx: 2 },
+      { kind: "rect", x: 13, y: 4, width: 7, height: 7, rx: 2 },
+      { kind: "rect", x: 4, y: 13, width: 7, height: 7, rx: 2 },
       {
-        kind: 'rect',
+        kind: "rect",
         x: 13,
         y: 13,
         width: 7,
@@ -174,28 +202,31 @@ export const SUITE_GLYPHS: Record<SuiteIconName, SuiteGlyph> = {
       },
     ],
   },
-  'bell-wave': {
-    description: 'Notifications — bell with sound waves',
+  "bell-wave": {
+    description: "Notifications — bell with sound waves",
     elements: [
-      { kind: 'path', d: 'M7 9.2a5 5 0 0 1 10 0c0 5.3 2.4 7.3 2.4 7.3H4.6S7 14.5 7 9.2' },
-      { kind: 'path', d: 'M10.7 19.3a1.5 1.5 0 0 0 2.6 0' },
-      { kind: 'path', d: 'M17.9 6.4a5.5 5.5 0 0 1 1.4 3.7', accent: true },
-      { kind: 'path', d: 'M15.7 4a9.4 9.4 0 0 1 2.4 6', accent: true },
+      {
+        kind: "path",
+        d: "M7 9.2a5 5 0 0 1 10 0c0 5.3 2.4 7.3 2.4 7.3H4.6S7 14.5 7 9.2",
+      },
+      { kind: "path", d: "M10.7 19.3a1.5 1.5 0 0 0 2.6 0" },
+      { kind: "path", d: "M17.9 6.4a5.5 5.5 0 0 1 1.4 3.7", accent: true },
+      { kind: "path", d: "M15.7 4a9.4 9.4 0 0 1 2.4 6", accent: true },
     ],
   },
-  'today-sun': {
-    description: 'Today — sun with slowly turning rays (motion-safe)',
+  "today-sun": {
+    description: "Today — sun with slowly turning rays (motion-safe)",
     animatedAccent: true,
     elements: [
-      { kind: 'circle', cx: 12, cy: 12, r: 4 },
-      { kind: 'path', d: 'M12 2.8v2.4', accent: true },
-      { kind: 'path', d: 'M12 18.8v2.4', accent: true },
-      { kind: 'path', d: 'M2.8 12h2.4', accent: true },
-      { kind: 'path', d: 'M18.8 12h2.4', accent: true },
-      { kind: 'path', d: 'M5.5 5.5l1.7 1.7', accent: true },
-      { kind: 'path', d: 'M16.8 16.8l1.7 1.7', accent: true },
-      { kind: 'path', d: 'M5.5 18.5l1.7-1.7', accent: true },
-      { kind: 'path', d: 'M16.8 7.2l1.7-1.7', accent: true },
+      { kind: "circle", cx: 12, cy: 12, r: 4 },
+      { kind: "path", d: "M12 2.8v2.4", accent: true },
+      { kind: "path", d: "M12 18.8v2.4", accent: true },
+      { kind: "path", d: "M2.8 12h2.4", accent: true },
+      { kind: "path", d: "M18.8 12h2.4", accent: true },
+      { kind: "path", d: "M5.5 5.5l1.7 1.7", accent: true },
+      { kind: "path", d: "M16.8 16.8l1.7 1.7", accent: true },
+      { kind: "path", d: "M5.5 18.5l1.7-1.7", accent: true },
+      { kind: "path", d: "M16.8 7.2l1.7-1.7", accent: true },
     ],
   },
 };

package/src/suite/lib/apps.ts

@@ -16,7 +16,7 @@ export interface SuiteAppDefinition {
   slug: SuiteAppSlug;
   name: string;
   description: string;
-  /** Public asset path — every app hosts all four icons. */
+  /** Public asset path — every app hosts its suite icon. */
   icon: string;
   /** Landing route used after cross-app SSO redirect. */
   landing: string;

package/src/suite/lib/injected.ts

@@ -1,8 +1,4 @@
-import type {
-  ButtonHTMLAttributes,
-  ComponentType,
-  ReactNode,
-} from 'react';
+import type { ButtonHTMLAttributes, ComponentType, ReactNode } from "react";
 
 /**
  * Structural types for theme primitives each app injects from
@@ -12,10 +8,12 @@ import type {
 
 export interface SuiteDropdownMenuProps {
   trigger: ReactNode;
+  triggerId?: string;
+  triggerDataTest?: string;
   children: ReactNode;
-  'aria-label': string;
-  align?: 'start' | 'center' | 'end';
-  side?: 'top' | 'right' | 'bottom' | 'left';
+  "aria-label": string;
+  align?: "start" | "center" | "end";
+  side?: "top" | "right" | "bottom" | "left";
   sideOffset?: number;
   className?: string;
   panelClassName?: string;
@@ -23,8 +21,7 @@ export interface SuiteDropdownMenuProps {
   onOpenChange?: (open: boolean) => void;
 }
 
-export type SuiteDropdownMenuComponent =
-  ComponentType<SuiteDropdownMenuProps>;
+export type SuiteDropdownMenuComponent = ComponentType<SuiteDropdownMenuProps>;
 
 export type SuiteDropdownItemComponent = ComponentType<
   ButtonHTMLAttributes<HTMLButtonElement>
@@ -44,11 +41,15 @@ export type SuiteCommandPaletteComponent = ComponentType<{
   onClose: () => void;
   placeholder?: string;
   className?: string;
+  id?: string;
+  dataTest?: string;
+  inputId?: string;
+  inputDataTest?: string;
 }>;
 
 /** App-branded spinner (each app has its own AppSpinner design). */
 export type SuiteSpinnerComponent = ComponentType<{
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   className?: string;
   label?: string;
 }>;

package/src/suite/lib/use-sidebar-width.ts

@@ -27,8 +27,12 @@ function snapWidth(width: number): number {
  * Shared suite sidebar resizing: drag below the threshold to collapse,
  * drag the rail edge out to expand, and double-click to reset.
  */
-export function useSidebarWidth(storageKey: string) {
-  const [width, setWidth] = useState(SIDEBAR_DEFAULT_WIDTH);
+export function useSidebarWidth(
+  storageKey: string,
+  defaultWidth = SIDEBAR_DEFAULT_WIDTH,
+) {
+  const fallbackWidth = snapWidth(clampWidth(defaultWidth));
+  const [width, setWidth] = useState(fallbackWidth);
   const [narrowViewport, setNarrowViewport] = useState(false);
   const collapsed = narrowViewport || width <= SIDEBAR_COLLAPSE_THRESHOLD;
 
@@ -71,19 +75,19 @@ export function useSidebarWidth(storageKey: string) {
         const next = value
           ? SIDEBAR_RAIL_WIDTH
           : current <= SIDEBAR_COLLAPSE_THRESHOLD
-            ? SIDEBAR_DEFAULT_WIDTH
+            ? fallbackWidth
             : snapWidth(current);
         persist(next);
         return next;
       });
     },
-    [persist],
+    [fallbackWidth, persist],
   );
 
   const resetWidth = useCallback(() => {
-    setWidth(SIDEBAR_DEFAULT_WIDTH);
-    persist(SIDEBAR_DEFAULT_WIDTH);
-  }, [persist]);
+    setWidth(fallbackWidth);
+    persist(fallbackWidth);
+  }, [fallbackWidth, persist]);
 
   const startResize = useCallback(
     (event: ReactPointerEvent<HTMLDivElement>) => {
@@ -110,5 +114,16 @@ export function useSidebarWidth(storageKey: string) {
     [persist, width],
   );
 
-  return { width, collapsed, setCollapsed, resetWidth, startResize };
+  const resizeBy = useCallback(
+    (delta: number) => {
+      setWidth((current) => {
+        const next = clampWidth(current + delta);
+        persist(next);
+        return next;
+      });
+    },
+    [persist],
+  );
+
+  return { width, collapsed, setCollapsed, resetWidth, startResize, resizeBy };
 }

package/src/components/charts/index.ts

@@ -1,9 +0,0 @@
-"use client";
-
-export { TimeSeriesLineChart, BarChart, PieChart, Sparkline, MetricCard, FunnelChart } from "./quill";
-export type { TimeSeriesLineChartProps, TimeSeriesLineChartSeries } from "./quill";
-export type { BarChartProps, BarChartSeries } from "./quill";
-export type { PieChartProps, PieChartSlice } from "./quill";
-export type { SparklineProps } from "./quill";
-export type { MetricCardProps } from "./quill";
-export type { FunnelChartProps, FunnelStep } from "./quill/FunnelChart";

package/src/components/charts/quill/BarChart.tsx

@@ -1,85 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
-import { cn } from "@/lib/cn";
-
-export interface BarChartSeries {
-  key: string;
-  label: string;
-  data: number[];
-  color?: string;
-}
-
-export interface BarChartProps {
-  series: BarChartSeries[];
-  labels: string[];
-  className?: string;
-  height?: number;
-}
-
-export function BarChart({ series, labels, className, height = 280 }: BarChartProps) {
-  const tokens = useChartTokens();
-  const groupCount = labels.length;
-  const barCount = series.length;
-
-  const { maxVal, chartData } = useMemo(() => {
-    let mx = 0;
-    const flat = series.flatMap((s) => s.data);
-    for (const v of flat) if (v > mx) mx = v;
-    return {
-      maxVal: mx || 1,
-      chartData: series.map((s, i) => ({
-        label: s.label,
-        color: s.color ?? tokens.series[i % tokens.series.length],
-        values: s.data,
-      })),
-    };
-  }, [series, tokens.series]);
-
-  const padding = { top: 16, right: 8, bottom: 24, left: 8 };
-  const innerW = 400 - padding.left - padding.right;
-  const innerH = height - padding.top - padding.bottom;
-  const groupW = innerW / groupCount;
-  const barW = Math.max(4, (groupW * 0.7) / barCount);
-  const gap = groupW * 0.15;
-
-  return (
-    <div className={cn("relative w-full", className)} style={{ height }}>
-      <svg viewBox={`0 0 400 ${height}`} className="h-full w-full" preserveAspectRatio="xMidYMid meet" suppressHydrationWarning>
-        {chartData.map((bar, bi) =>
-          bar.values.map((v, li) => {
-            const x = padding.left + li * groupW + gap / 2 + bi * barW;
-            const barH = (v / maxVal) * (innerH - 4);
-            const y = padding.top + innerH - barH;
-            return (
-              <rect
-                key={`${bi}-${li}`}
-                x={x}
-                y={y}
-                width={barW}
-                height={barH}
-                fill={bar.color}
-                rx={2}
-              >
-                <title>{`${bar.label}: ${v}`}</title>
-              </rect>
-            );
-          })
-        )}
-        {labels.map((l, i) => (
-          <text
-            key={l}
-            x={padding.left + i * groupW + groupW / 2}
-            y={height - 4}
-            textAnchor="middle"
-            className="fill-ph-mutedtext"
-            fontSize="10"
-          >
-            {l}
-          </text>
-        ))}
-      </svg>
-    </div>
-  );
-}

package/src/components/charts/quill/FunnelChart.tsx

@@ -1,49 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
-import { cn } from "@/lib/cn";
-
-export interface FunnelStep {
-  label: string;
-  count: number;
-}
-
-export interface FunnelChartProps {
-  steps: FunnelStep[];
-  className?: string;
-}
-
-export function FunnelChart({ steps, className }: FunnelChartProps) {
-  const tokens = useChartTokens();
-
-  const maxCount = useMemo(() => Math.max(...steps.map((s) => s.count)), [steps]);
-
-  return (
-    <div className={cn("space-y-2", className)} suppressHydrationWarning>
-      {steps.map((step, i) => {
-        const pct = (step.count / maxCount) * 100;
-        const prev = i > 0 ? steps[i - 1].count : step.count;
-        const dropoff = prev > 0 ? ((prev - step.count) / prev) * 100 : 0;
-
-        return (
-          <div key={step.label} className="space-y-1">
-            <div className="flex items-center justify-between text-sm">
-              <span className="font-medium text-ph-ink">{step.label}</span>
-              <span className="tabular-nums text-ph-subtle">{step.count.toLocaleString()}</span>
-            </div>
-            <div className="relative h-8 overflow-hidden rounded-md" style={{ background: tokens.muted }}>
-              <div
-                className="h-full rounded-md transition-all duration-500"
-                style={{ width: `${pct}%`, background: i === 0 ? tokens.series[0] : tokens.series[i % tokens.series.length] }}
-              />
-            </div>
-            {i > 0 && dropoff > 0 && (
-              <p className="text-xs text-ph-danger">-{dropoff.toFixed(1)}% dropoff</p>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/charts/quill/InsightShell.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { cn } from "@/lib/cn";
-
-export interface InsightShellProps {
-  title: string;
-  subtitle?: string;
-  ribbonColor?: string;
-  children: ReactNode;
-  className?: string;
-}
-
-export function InsightShell({ title, subtitle, ribbonColor, children, className }: InsightShellProps) {
-  return (
-    <div className={cn("ph-insight-shell", className)}>
-      <div className="flex items-start gap-3 px-4 pt-4">
-        {ribbonColor && <div className="ph-insight-shell__ribbon" style={{ background: ribbonColor }} />}
-        <div className="min-w-0 flex-1">
-          <h3 className="text-sm font-semibold text-ph-ink truncate">{title}</h3>
-          {subtitle && <p className="text-xs text-ph-mutedtext mt-0.5">{subtitle}</p>}
-        </div>
-      </div>
-      <div className="p-4 pt-3">{children}</div>
-    </div>
-  );
-}

package/src/components/charts/quill/MetricCard.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { cn } from "@/lib/cn";
-import { Sparkline } from "@/components/charts/quill/Sparkline";
-import { Badge } from "@/components/ui/Badge";
-
-export interface MetricCardProps {
-  value: string | number;
-  label: string;
-  change?: { value: number; positive?: boolean };
-  sparklineData?: number[];
-  icon?: ReactNode;
-  className?: string;
-}
-
-export function MetricCard({
-  value,
-  label,
-  change,
-  sparklineData,
-  icon,
-  className,
-}: MetricCardProps) {
-  return (
-    <div className={cn("ph-metric", className)}>
-      <div className="ph-metric__header">
-        {icon && <span className="ph-metric__icon">{icon}</span>}
-        <span className="ph-metric__label">{label}</span>
-        {change && (
-          <Badge variant={change.positive ?? change.value >= 0 ? "success" : "danger"}>
-            {change.value >= 0 ? "+" : ""}{change.value}%
-          </Badge>
-        )}
-      </div>
-      <div className="ph-metric__value">{value}</div>
-      {sparklineData && sparklineData.length > 0 && (
-        <div className="mt-2">
-          <Sparkline data={sparklineData} />
-        </div>
-      )}
-    </div>
-  );
-}