@exxatdesignux/ui 0.2.19 → 0.3.0

package/dist/components/data-views/os-folder-glyph.js

@@ -0,0 +1,104 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var OS_FOLDER_GLYPH_SRC = "/folders/icons8-folder-windows-11.svg";
+var COLOR_TINT_FILTER = {
+  brand: "hue-rotate(-42deg) saturate(1.25) brightness(0.97)",
+  success: "hue-rotate(82deg) saturate(1.2) brightness(0.95)",
+  warning: "hue-rotate(-5deg) saturate(1.35) brightness(1.02)",
+  destructive: "hue-rotate(300deg) saturate(1.15) brightness(0.92)",
+  muted: "saturate(0.15) brightness(1.08)",
+  chart1: "hue-rotate(200deg) saturate(1.2) brightness(0.96)",
+  chart2: "hue-rotate(95deg) saturate(1.15) brightness(0.96)",
+  chart3: "hue-rotate(265deg) saturate(1.2) brightness(0.96)"
+};
+var SIZE_MAP = {
+  /** Compact — folder inspector / column headers (matches ~36px row height). */
+  xs: "h-9 w-[2.6rem]",
+  sm: "h-[3.35rem] w-[3.85rem]",
+  md: "h-[4.6rem] w-[5.25rem]",
+  lg: "h-[6.5rem] w-[7.25rem]"
+};
+var ICON_TEXT = {
+  xs: "text-[13px] leading-none",
+  sm: "text-lg",
+  md: "text-2xl",
+  lg: "text-4xl"
+};
+var ICON_COLOR = {
+  brand: "text-orange-800 dark:text-orange-600",
+  success: "text-emerald-800 dark:text-emerald-600",
+  warning: "text-amber-800 dark:text-amber-600",
+  destructive: "text-red-800 dark:text-red-600",
+  muted: "text-slate-600 dark:text-slate-400",
+  chart1: "text-blue-800 dark:text-blue-600",
+  chart2: "text-lime-800 dark:text-lime-600",
+  chart3: "text-purple-800 dark:text-purple-600"
+};
+function OsFolderGlyph({
+  colorKey,
+  icon,
+  size = "md",
+  className,
+  variant = "solid",
+  decorative = true,
+  label
+}) {
+  const outline = variant === "outline";
+  const tint = COLOR_TINT_FILTER[colorKey];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out",
+        "hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100",
+        SIZE_MAP[size],
+        className
+      ),
+      role: !decorative && label ? "img" : void 0,
+      "aria-label": !decorative ? label : void 0,
+      "aria-hidden": decorative ? true : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: OS_FOLDER_GLYPH_SRC,
+            alt: "",
+            width: 240,
+            height: 240,
+            draggable: false,
+            loading: "lazy",
+            decoding: "async",
+            className: cn(
+              "h-full w-full object-contain",
+              "transition-[filter] duration-200",
+              outline && "opacity-75 saturate-[0.65]"
+            ),
+            style: outline ? void 0 : { filter: tint }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute inset-0 flex items-center justify-center",
+              size === "xs" ? "translate-y-[0.18rem]" : "translate-y-[0.35rem]",
+              ICON_TEXT[size],
+              outline ? "text-muted-foreground" : cn(ICON_COLOR[colorKey], "opacity-100")
+            ),
+            children: /* @__PURE__ */ jsx("i", { className: cn("fa-solid", icon), "aria-hidden": "true" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { OS_FOLDER_GLYPH_SRC, OsFolderGlyph };
+//# sourceMappingURL=os-folder-glyph.js.map
+//# sourceMappingURL=os-folder-glyph.js.map

package/dist/components/data-views/os-folder-glyph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/data-views/os-folder-glyph.tsx"],"names":[],"mappings":"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","file":"os-folder-glyph.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * Windows 11–style folder art (Icons8) + optional FA glyph on the pocket.\n * Static asset: `public/folders/icons8-folder-windows-11.svg`\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\n/**\n * Color palette tones shared across folder hubs. Domain-specific palette\n * names (e.g. `QuestionBankFolderColorKey`) are structurally identical to\n * this union and pass through without conversion.\n */\nexport type FolderGlyphColorKey =\n  | \"brand\"\n  | \"success\"\n  | \"warning\"\n  | \"destructive\"\n  | \"muted\"\n  | \"chart1\"\n  | \"chart2\"\n  | \"chart3\"\n\n/** Default asset path (override via `OsFolderGlyph` `src` prop if you ship a different file). */\nexport const OS_FOLDER_GLYPH_SRC = \"/folders/icons8-folder-windows-11.svg\"\n\n/** Subtle hue tweak so “color” choice still reads on the shared yellow asset. */\nconst COLOR_TINT_FILTER: Record<FolderGlyphColorKey, string> = {\n  brand: \"hue-rotate(-42deg) saturate(1.25) brightness(0.97)\",\n  success: \"hue-rotate(82deg) saturate(1.2) brightness(0.95)\",\n  warning: \"hue-rotate(-5deg) saturate(1.35) brightness(1.02)\",\n  destructive: \"hue-rotate(300deg) saturate(1.15) brightness(0.92)\",\n  muted: \"saturate(0.15) brightness(1.08)\",\n  chart1: \"hue-rotate(200deg) saturate(1.2) brightness(0.96)\",\n  chart2: \"hue-rotate(95deg) saturate(1.15) brightness(0.96)\",\n  chart3: \"hue-rotate(265deg) saturate(1.2) brightness(0.96)\",\n}\n\nconst SIZE_MAP = {\n  /** Compact — folder inspector / column headers (matches ~36px row height). */\n  xs: \"h-9 w-[2.6rem]\",\n  sm: \"h-[3.35rem] w-[3.85rem]\",\n  md: \"h-[4.6rem] w-[5.25rem]\",\n  lg: \"h-[6.5rem] w-[7.25rem]\",\n}\n\nconst ICON_TEXT: Record<keyof typeof SIZE_MAP, string> = {\n  xs: \"text-[13px] leading-none\",\n  sm: \"text-lg\",\n  md: \"text-2xl\",\n  lg: \"text-4xl\",\n}\n\n/** Darker version of each folder color for punched icon appearance. */\nconst ICON_COLOR: Record<FolderGlyphColorKey, string> = {\n  brand: \"text-orange-800 dark:text-orange-600\",\n  success: \"text-emerald-800 dark:text-emerald-600\",\n  warning: \"text-amber-800 dark:text-amber-600\",\n  destructive: \"text-red-800 dark:text-red-600\",\n  muted: \"text-slate-600 dark:text-slate-400\",\n  chart1: \"text-blue-800 dark:text-blue-600\",\n  chart2: \"text-lime-800 dark:text-lime-600\",\n  chart3: \"text-purple-800 dark:text-purple-600\",\n}\n\nexport interface OsFolderGlyphProps {\n  colorKey: FolderGlyphColorKey\n  /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */\n  icon: string\n  size?: keyof typeof SIZE_MAP\n  className?: string\n  variant?: \"solid\" | \"outline\"\n  /**\n   * When false, exposes `role=\"img\"` + `aria-label` (use with a short label, e.g. sheet preview).\n   * When true (default), hides the glyph from AT — parent control should name the action.\n   */\n  decorative?: boolean\n  /** Required when `decorative={false}` */\n  label?: string\n}\n\nexport function OsFolderGlyph({\n  colorKey,\n  icon,\n  size = \"md\",\n  className,\n  variant = \"solid\",\n  decorative = true,\n  label,\n}: OsFolderGlyphProps) {\n  const outline = variant === \"outline\"\n  const tint = COLOR_TINT_FILTER[colorKey]\n\n  return (\n    <div\n      className={cn(\n        \"group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out\",\n        \"hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100\",\n        SIZE_MAP[size],\n        className,\n      )}\n      role={!decorative && label ? \"img\" : undefined}\n      aria-label={!decorative ? label : undefined}\n      aria-hidden={decorative ? true : undefined}\n    >\n      {/* Static SVG — design-system ships an HTML `<img>` so non-Next consumers\n          (Vite, Remix, plain CRA) can use it without `next/image`. Folder\n          grids render many of these at once; lazy-loading lets the browser\n          skip off-screen glyphs until they scroll near the viewport. */}\n      <img\n        src={OS_FOLDER_GLYPH_SRC}\n        alt=\"\"\n        width={240}\n        height={240}\n        draggable={false}\n        loading=\"lazy\"\n        decoding=\"async\"\n        className={cn(\n          \"h-full w-full object-contain\",\n          \"transition-[filter] duration-200\",\n          outline && \"opacity-75 saturate-[0.65]\",\n        )}\n        style={outline ? undefined : { filter: tint }}\n      />\n      <span\n        className={cn(\n          \"pointer-events-none absolute inset-0 flex items-center justify-center\",\n          size === \"xs\" ? \"translate-y-[0.18rem]\" : \"translate-y-[0.35rem]\",\n          ICON_TEXT[size],\n          outline\n            ? \"text-muted-foreground\"\n            : cn(ICON_COLOR[colorKey], \"opacity-100\"),\n        )}\n      >\n        <i className={cn(\"fa-solid\", icon)} aria-hidden=\"true\" />\n      </span>\n    </div>\n  )\n}\n"]}

package/dist/components/data-views/outline-tree-menu.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { CollapsibleContent } from '../ui/collapsible.js';
+import 'radix-ui';
+
+type OutlineTreeSurface = "sidebar" | "panel";
+type OutlineTreeGuideLayout = "inset" | "chevronRail";
+/** Pull row content onto the guide line — matches `SidebarMenuSubButton` horizontal nudge (inset layout only). */
+declare const OUTLINE_TREE_SUB_ROW_SHIFT_CLASS = "-translate-x-px rtl:translate-x-px";
+/** `CollapsibleContent` row: spacer width = `px-2` (8px) + half of `size-8` chevron (16px) → guide under chevron center. */
+declare const OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS = "flex min-w-0 w-full";
+/** Spacer column — keep in sync with folder row `px-2` + `size-8` chevron. */
+declare const OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS = "w-6 shrink-0";
+/** Wrap `OutlineTreeSub` with `guideLayout="chevronRail"` so the vertical border meets the chevron center. */
+declare function OutlineTreeCollapsibleContentRail({ className, children, ...props }: React.ComponentProps<typeof CollapsibleContent>): react_jsx_runtime.JSX.Element;
+/** Nested list under a folder — vertical guide + indent. */
+declare function OutlineTreeSub({ surface, guideLayout, className, ...props }: React.ComponentProps<"ul"> & {
+    surface?: OutlineTreeSurface;
+    guideLayout?: OutlineTreeGuideLayout;
+}): react_jsx_runtime.JSX.Element;
+/** Root or nested branch list — matches `SidebarMenu` spacing. */
+declare function OutlineTreeMenu({ className, ...props }: React.ComponentProps<"ul">): react_jsx_runtime.JSX.Element;
+/** Expandable folder row wrapper — matches `SidebarMenuItem`. */
+declare function OutlineTreeMenuItem({ className, ...props }: React.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+/** Leaf / nested row inside `OutlineTreeSub` — matches `SidebarMenuSubItem`. */
+declare function OutlineTreeSubItem({ className, ...props }: React.ComponentProps<"li">): react_jsx_runtime.JSX.Element;
+interface OutlineTreeLeafButtonProps extends React.ComponentProps<"button"> {
+    surface?: OutlineTreeSurface;
+    isActive?: boolean;
+    /** Inset `OutlineTreeSub` only — nudge like `SidebarMenuSubButton`. Ignored when parent uses `chevronRail`. */
+    subGuideAlign?: boolean;
+}
+/** Selectable leaf row (file / terminal row) — `SidebarMenuSubButton`–aligned rhythm. */
+declare function OutlineTreeLeafButton({ surface, isActive, subGuideAlign, className, ...props }: OutlineTreeLeafButtonProps): react_jsx_runtime.JSX.Element;
+
+export { OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS, OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, OUTLINE_TREE_SUB_ROW_SHIFT_CLASS, OutlineTreeCollapsibleContentRail, type OutlineTreeGuideLayout, OutlineTreeLeafButton, type OutlineTreeLeafButtonProps, OutlineTreeMenu, OutlineTreeMenuItem, OutlineTreeSub, OutlineTreeSubItem, type OutlineTreeSurface };

package/dist/components/data-views/outline-tree-menu.js

@@ -0,0 +1,131 @@
+"use client";
+import { Collapsible } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function CollapsibleContent({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Collapsible.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      ...props
+    }
+  );
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var outlineTreeSubInsetClass = {
+  sidebar: "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 rtl:-translate-x-px",
+  panel: "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-border/60 px-2.5 py-0.5 rtl:-translate-x-px"
+};
+var outlineTreeSubChevronRailClass = {
+  sidebar: "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-sidebar-border py-0.5 ps-2.5",
+  panel: "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-border/60 py-0.5 ps-2.5"
+};
+var OUTLINE_TREE_SUB_ROW_SHIFT_CLASS = "-translate-x-px rtl:translate-x-px";
+var OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS = "flex min-w-0 w-full";
+var OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS = "w-6 shrink-0";
+function OutlineTreeCollapsibleContentRail({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    CollapsibleContent,
+    {
+      className: cn(OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS, "aria-hidden": true }),
+        children
+      ]
+    }
+  );
+}
+function OutlineTreeSub({
+  surface = "panel",
+  guideLayout = "inset",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "outline-tree-sub",
+      "data-guide-layout": guideLayout,
+      className: cn(
+        guideLayout === "inset" && outlineTreeSubInsetClass[surface],
+        guideLayout === "chevronRail" && outlineTreeSubChevronRailClass[surface],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function OutlineTreeMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "outline-tree-menu",
+      className: cn("flex w-full min-w-0 list-none flex-col gap-0", className),
+      ...props
+    }
+  );
+}
+function OutlineTreeMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "outline-tree-menu-item",
+      className: cn("group/menu-item relative min-w-0 w-full list-none", className),
+      ...props
+    }
+  );
+}
+function OutlineTreeSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "outline-tree-sub-item",
+      className: cn("group/menu-sub-item relative min-w-0 w-full list-none", className),
+      ...props
+    }
+  );
+}
+function OutlineTreeLeafButton({
+  surface = "panel",
+  isActive = false,
+  subGuideAlign = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-active": isActive || void 0,
+      className: cn(
+        "flex min-h-8 w-full min-w-0 cursor-pointer select-none items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm outline-none ring-ring focus-visible:ring-2 focus-visible:ring-inset [&>svg]:size-4 [&>svg]:shrink-0",
+        subGuideAlign && OUTLINE_TREE_SUB_ROW_SHIFT_CLASS,
+        surface === "panel" && cn(
+          "text-foreground hover:bg-muted/50",
+          isActive && "bg-accent font-medium text-accent-foreground"
+        ),
+        surface === "sidebar" && cn(
+          "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+          isActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+        ),
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+export { OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS, OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, OUTLINE_TREE_SUB_ROW_SHIFT_CLASS, OutlineTreeCollapsibleContentRail, OutlineTreeLeafButton, OutlineTreeMenu, OutlineTreeMenuItem, OutlineTreeSub, OutlineTreeSubItem };
+//# sourceMappingURL=outline-tree-menu.js.map
+//# sourceMappingURL=outline-tree-menu.js.map

package/dist/components/data-views/outline-tree-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/collapsible.tsx","../../../src/lib/utils.ts","../../../src/components/data-views/outline-tree-menu.tsx"],"names":["CollapsiblePrimitive","jsx"],"mappings":"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","file":"outline-tree-menu.js","sourcesContent":["\"use client\"\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\n\nfunction Collapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\nfunction CollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction CollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n{...props}\n    />\n  )\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n","import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\n/**\n * Central outline-tree chrome — mirrors shadcn/ui **Sidebar** file-tree structure\n * (`SidebarMenu` → `SidebarMenuItem` + `Collapsible` → `SidebarMenuSub` → rows) without\n * coupling to `useSidebar`.\n *\n * - **`guideLayout=\"inset\"`** — same rhythm as `SidebarMenuSub` (`mx-3.5` + `translate-x-px`).\n * - **`guideLayout=\"chevronRail\"`** — use with **`OutlineTreeCollapsibleContentRail`**: a **`w-6`**\n *   spacer lines up the vertical guide with the **horizontal center** of a **`size-8`** chevron\n *   when the folder row uses **`px-2`** (8px padding + 16px half of 32px chevron hit target).\n *\n * @see packages/ui/src/components/ui/sidebar.tsx — `SidebarMenuSub`, `SidebarMenuSubItem`\n */\n\nimport * as React from \"react\"\nimport { CollapsibleContent } from \"../ui/collapsible\"\nimport { cn } from \"../../lib/utils\"\n\nexport type OutlineTreeSurface = \"sidebar\" | \"panel\"\n\nexport type OutlineTreeGuideLayout = \"inset\" | \"chevronRail\"\n\nconst outlineTreeSubInsetClass: Record<OutlineTreeSurface, string> = {\n  sidebar:\n    \"mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 rtl:-translate-x-px\",\n  panel:\n    \"mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-border/60 px-2.5 py-0.5 rtl:-translate-x-px\",\n}\n\nconst outlineTreeSubChevronRailClass: Record<OutlineTreeSurface, string> = {\n  sidebar:\n    \"flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-sidebar-border py-0.5 ps-2.5\",\n  panel: \"flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-border/60 py-0.5 ps-2.5\",\n}\n\n/** Pull row content onto the guide line — matches `SidebarMenuSubButton` horizontal nudge (inset layout only). */\nexport const OUTLINE_TREE_SUB_ROW_SHIFT_CLASS = \"-translate-x-px rtl:translate-x-px\"\n\n/** `CollapsibleContent` row: spacer width = `px-2` (8px) + half of `size-8` chevron (16px) → guide under chevron center. */\nexport const OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS = \"flex min-w-0 w-full\"\n\n/** Spacer column — keep in sync with folder row `px-2` + `size-8` chevron. */\nexport const OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS = \"w-6 shrink-0\"\n\n/** Wrap `OutlineTreeSub` with `guideLayout=\"chevronRail\"` so the vertical border meets the chevron center. */\nexport function OutlineTreeCollapsibleContentRail({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsibleContent>) {\n  return (\n    <CollapsibleContent\n      className={cn(OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, className)}\n      {...props}\n    >\n      <div className={OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS} aria-hidden />\n      {children}\n    </CollapsibleContent>\n  )\n}\n\n/** Nested list under a folder — vertical guide + indent. */\nexport function OutlineTreeSub({\n  surface = \"panel\",\n  guideLayout = \"inset\",\n  className,\n  ...props\n}: React.ComponentProps<\"ul\"> & {\n  surface?: OutlineTreeSurface\n  guideLayout?: OutlineTreeGuideLayout\n}) {\n  return (\n    <ul\n      data-slot=\"outline-tree-sub\"\n      data-guide-layout={guideLayout}\n      className={cn(\n        guideLayout === \"inset\" && outlineTreeSubInsetClass[surface],\n        guideLayout === \"chevronRail\" && outlineTreeSubChevronRailClass[surface],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Root or nested branch list — matches `SidebarMenu` spacing. */\nexport function OutlineTreeMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"outline-tree-menu\"\n      className={cn(\"flex w-full min-w-0 list-none flex-col gap-0\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Expandable folder row wrapper — matches `SidebarMenuItem`. */\nexport function OutlineTreeMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"outline-tree-menu-item\"\n      className={cn(\"group/menu-item relative min-w-0 w-full list-none\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Leaf / nested row inside `OutlineTreeSub` — matches `SidebarMenuSubItem`. */\nexport function OutlineTreeSubItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"outline-tree-sub-item\"\n      className={cn(\"group/menu-sub-item relative min-w-0 w-full list-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport interface OutlineTreeLeafButtonProps extends React.ComponentProps<\"button\"> {\n  surface?: OutlineTreeSurface\n  isActive?: boolean\n  /** Inset `OutlineTreeSub` only — nudge like `SidebarMenuSubButton`. Ignored when parent uses `chevronRail`. */\n  subGuideAlign?: boolean\n}\n\n/** Selectable leaf row (file / terminal row) — `SidebarMenuSubButton`–aligned rhythm. */\nexport function OutlineTreeLeafButton({\n  surface = \"panel\",\n  isActive = false,\n  subGuideAlign = false,\n  className,\n  ...props\n}: OutlineTreeLeafButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      data-active={isActive || undefined}\n      className={cn(\n        \"flex min-h-8 w-full min-w-0 cursor-pointer select-none items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm outline-none ring-ring focus-visible:ring-2 focus-visible:ring-inset [&>svg]:size-4 [&>svg]:shrink-0\",\n        subGuideAlign && OUTLINE_TREE_SUB_ROW_SHIFT_CLASS,\n        surface === \"panel\" &&\n          cn(\n            \"text-foreground hover:bg-muted/50\",\n            isActive && \"bg-accent font-medium text-accent-foreground\",\n          ),\n        surface === \"sidebar\" &&\n          cn(\n            \"text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n            isActive && \"bg-sidebar-accent font-medium text-sidebar-accent-foreground\",\n          ),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n"]}

package/dist/components/table-properties/column-row.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ColumnRowProps {
+    label: string;
+    isFirst: boolean;
+    isLast: boolean;
+    visible: boolean;
+    onToggleVisible: () => void;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    draggable: true;
+    onDragStart: React.DragEventHandler;
+    onDragOver: React.DragEventHandler;
+    onDrop: React.DragEventHandler;
+    onDragEnd: React.DragEventHandler;
+    isDragging: boolean;
+    isOver: boolean;
+}
+declare function ColumnRow({ label, isFirst, isLast, visible, onToggleVisible, onMoveUp, onMoveDown, draggable, onDragStart, onDragOver, onDrop, onDragEnd, isDragging, isOver, }: ColumnRowProps): react_jsx_runtime.JSX.Element;
+
+export { ColumnRow, type ColumnRowProps };

package/dist/components/table-properties/column-row.js

@@ -0,0 +1,153 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip$1.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      suppressHydrationWarning: true,
+      className: cn("cursor-pointer", className),
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" })
+      ]
+    }
+  ) });
+}
+function Tip({ label, children, side = "top" }) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, className: "flex flex-wrap items-center gap-1.5", children: label })
+  ] });
+}
+function DragHandleGripIcon({ className }) {
+  return /* @__PURE__ */ jsx("i", { className: cn("fa-solid fa-grip-dots-vertical shrink-0", className), "aria-hidden": "true" });
+}
+function ToggleSwitch({ checked, onChange, id }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      id,
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      onClick: () => onChange(!checked),
+      className: cn(
+        "relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-input transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        checked ? "bg-primary" : "bg-input"
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: cn(
+        "pointer-events-none inline-block size-4 rounded-full bg-primary-foreground shadow-sm transition-transform",
+        checked ? "translate-x-4" : "translate-x-0"
+      ) })
+    }
+  );
+}
+function ColumnRow({
+  label,
+  isFirst,
+  isLast,
+  visible,
+  onToggleVisible,
+  onMoveUp,
+  onMoveDown,
+  draggable,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
+  isDragging,
+  isOver
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listitem",
+      draggable,
+      onDragStart,
+      onDragOver,
+      onDrop,
+      onDragEnd,
+      className: cn(
+        "flex items-center gap-2 px-2 py-2 rounded-lg group hover:bg-interactive-hover-subtle transition-colors cursor-grab active:cursor-grabbing",
+        isDragging && "opacity-40",
+        isOver && "ring-2 ring-ring bg-accent/30"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(DragHandleGripIcon, { className: "text-[13px] text-muted-foreground/40 transition-colors group-hover:text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm text-foreground", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity", children: [
+          /* @__PURE__ */ jsx(Tip, { label: `Move ${label} up`, side: "top", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} up`,
+              disabled: isFirst,
+              onClick: onMoveUp,
+              className: "inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-up text-xs", "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Tip, { label: `Move ${label} down`, side: "top", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Move ${label} down`,
+              disabled: isLast,
+              onClick: onMoveDown,
+              className: "inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: /* @__PURE__ */ jsx("i", { className: "fa-light fa-chevron-down text-xs", "aria-hidden": "true" })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            checked: visible,
+            onChange: onToggleVisible
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ColumnRow };
+//# sourceMappingURL=column-row.js.map
+//# sourceMappingURL=column-row.js.map

package/dist/components/table-properties/column-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/tooltip.tsx","../../../src/components/ui/tip.tsx","../../../src/components/ui/drag-handle-grip.tsx","../../../src/components/ui/toggle-switch.tsx","../../../src/components/table-properties/column-row.tsx"],"names":["TooltipPrimitive","jsxs","jsx"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACeA,SAAS,OAAA,CAAQ;AAAA,EACf,GAAG;AACL,CAAA,EAAuD;AACrD,EAAA,2BAAQA,SAAA,CAAiB,IAAA,EAAjB,EAAsB,WAAA,EAAU,SAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC/D;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA;AAAA,IAACA,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,wBAAA,EAAwB,IAAA;AAAA,MACxB,SAAA,EAAW,EAAA,CAAG,gBAAA,EAAkB,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,UAAA,GAAa,CAAA;AAAA,EACb,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,GAAA,CAACA,SAAA,CAAiB,MAAA,EAAjB,EACC,QAAA,kBAAA,IAAA;AAAA,IAACA,SAAA,CAAiB,OAAA;AAAA,IAAjB;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,UAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4rBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACD,GAAA,CAACA,SAAA,CAAiB,KAAA,EAAjB,EAAuB,WAAU,oGAAA,EAAqG;AAAA;AAAA;AAAA,GACzI,EACF,CAAA;AAEJ;ACnDO,SAAS,IAAI,EAAE,KAAA,EAAO,QAAA,EAAU,IAAA,GAAO,OAAM,EAAa;AAC/D,EAAA,uBACEC,KAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAC,GAAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAS,CAAA;AAAA,oBAClCA,GAAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAY,SAAA,EAAU,uCACnC,QAAA,EAAA,KAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;ACfO,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAU,EAA2B;AACxE,EAAA,uBACEA,IAAC,GAAA,EAAA,EAAE,SAAA,EAAW,GAAG,yCAAA,EAA2C,SAAS,CAAA,EAAG,aAAA,EAAY,MAAA,EAAO,CAAA;AAE/F;ACCO,SAAS,YAAA,CAAa,EAAE,OAAA,EAAS,QAAA,EAAU,IAAG,EAAsB;AACzE,EAAA,uBACEA,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,cAAA,EAAc,OAAA;AAAA,MACd,OAAA,EAAS,MAAM,QAAA,CAAS,CAAC,OAAO,CAAA;AAAA,MAChC,SAAA,EAAW,EAAA;AAAA,QACT,2GAAA;AAAA,QACA,qGAAA;AAAA,QACA,UAAU,YAAA,GAAe;AAAA,OAC3B;AAAA,MAEA,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA;AAAA,QACf,2GAAA;AAAA,QACA,UAAU,eAAA,GAAkB;AAAA,OAC9B,EAAG;AAAA;AAAA,GACL;AAEJ;ACLO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,uBACED,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,UAAA;AAAA,MACL,SAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,2IAAA;AAAA,QACA,UAAA,IAAc,YAAA;AAAA,QACd,MAAA,IAAU;AAAA,OACZ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,GAAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAU,0FAAA,EAA2F,CAAA;AAAA,wBACzHA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kCAAkC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBAExDD,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gFAAA,EACb,QAAA,EAAA;AAAA,0BAAAC,GAAAA,CAAC,OAAI,KAAA,EAAO,CAAA,KAAA,EAAQ,KAAK,CAAA,GAAA,CAAA,EAAO,IAAA,EAAK,OACnC,QAAA,kBAAAA,GAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,YAAA,EAAY,QAAQ,KAAK,CAAA,GAAA,CAAA;AAAA,cACzB,QAAA,EAAU,OAAA;AAAA,cACV,OAAA,EAAS,QAAA;AAAA,cACT,SAAA,EAAU,4RAAA;AAAA,cAEV,0BAAAA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,gCAAA,EAAiC,eAAY,MAAA,EAAO;AAAA;AAAA,WACnE,EACF,CAAA;AAAA,0BACAA,IAAC,GAAA,EAAA,EAAI,KAAA,EAAO,QAAQ,KAAK,CAAA,KAAA,CAAA,EAAS,IAAA,EAAK,KAAA,EACrC,QAAA,kBAAAA,GAAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,YAAA,EAAY,QAAQ,KAAK,CAAA,KAAA,CAAA;AAAA,cACzB,QAAA,EAAU,MAAA;AAAA,cACV,OAAA,EAAS,UAAA;AAAA,cACT,SAAA,EAAU,4RAAA;AAAA,cAEV,0BAAAA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,kCAAA,EAAmC,eAAY,MAAA,EAAO;AAAA;AAAA,WACrE,EACF;AAAA,SAAA,EACF,CAAA;AAAA,wBAEAA,GAAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAS,OAAA;AAAA,YACT,QAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,GACF;AAEJ","file":"column-row.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return (\n    <TooltipPrimitive.Trigger\n      data-slot=\"tooltip-trigger\"\n      suppressHydrationWarning\n      className={cn(\"cursor-pointer\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n","\"use client\"\nimport * as React from \"react\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"./tooltip\"\n\ninterface TipProps {\n  /** Plain string or text + `<Kbd />` — see `.cursor/rules/exxat-kbd-shortcuts.mdc` */\n  label: React.ReactNode\n  children: React.ReactNode\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\"\n}\n\nexport function Tip({ label, children, side = \"top\" }: TipProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{children}</TooltipTrigger>\n      <TooltipContent side={side} className=\"flex flex-wrap items-center gap-1.5\">\n        {label}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n","import { cn } from \"../../lib/utils\"\n\n/**\n * Solid grip icon for drag handles — use anywhere rows/cards reorder (dashboard, Properties, etc.).\n */\nexport function DragHandleGripIcon({ className }: { className?: string }) {\n  return (\n    <i className={cn(\"fa-solid fa-grip-dots-vertical shrink-0\", className)} aria-hidden=\"true\" />\n  )\n}\n","\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\n\ninterface ToggleSwitchProps {\n  checked: boolean\n  onChange: (value: boolean) => void\n  id?: string\n}\n\nexport function ToggleSwitch({ checked, onChange, id }: ToggleSwitchProps) {\n  return (\n    <button\n      id={id}\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      onClick={() => onChange(!checked)}\n      className={cn(\n        \"relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-input transition-colors\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n        checked ? \"bg-primary\" : \"bg-input\"\n      )}\n    >\n      <span className={cn(\n        \"pointer-events-none inline-block size-4 rounded-full bg-primary-foreground shadow-sm transition-transform\",\n        checked ? \"translate-x-4\" : \"translate-x-0\"\n      )} />\n    </button>\n  )\n}\n","\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport { Tip } from \"../ui/tip\"\nimport { DragHandleGripIcon } from \"../ui/drag-handle-grip\"\nimport { ToggleSwitch } from \"../ui/toggle-switch\"\n\nexport interface ColumnRowProps {\n  label: string\n  isFirst: boolean\n  isLast: boolean\n  visible: boolean\n  onToggleVisible: () => void\n  onMoveUp: () => void\n  onMoveDown: () => void\n  // drag-and-drop props spread from useDraggableList\n  draggable: true\n  onDragStart: React.DragEventHandler\n  onDragOver: React.DragEventHandler\n  onDrop: React.DragEventHandler\n  onDragEnd: React.DragEventHandler\n  isDragging: boolean\n  isOver: boolean\n}\n\nexport function ColumnRow({\n  label,\n  isFirst,\n  isLast,\n  visible,\n  onToggleVisible,\n  onMoveUp,\n  onMoveDown,\n  draggable,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  onDragEnd,\n  isDragging,\n  isOver,\n}: ColumnRowProps) {\n  return (\n    <div\n      role=\"listitem\"\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onDragEnd={onDragEnd}\n      className={cn(\n        \"flex items-center gap-2 px-2 py-2 rounded-lg group hover:bg-interactive-hover-subtle transition-colors cursor-grab active:cursor-grabbing\",\n        isDragging && \"opacity-40\",\n        isOver && \"ring-2 ring-ring bg-accent/30\",\n      )}\n    >\n      <DragHandleGripIcon className=\"text-[13px] text-muted-foreground/40 transition-colors group-hover:text-muted-foreground\" />\n      <span className=\"flex-1 text-sm text-foreground\">{label}</span>\n      {/* Up / Down priority buttons */}\n      <div className=\"flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity\">\n        <Tip label={`Move ${label} up`} side=\"top\">\n          <button\n            type=\"button\"\n            aria-label={`Move ${label} up`}\n            disabled={isFirst}\n            onClick={onMoveUp}\n            className=\"inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <i className=\"fa-light fa-chevron-up text-xs\" aria-hidden=\"true\" />\n          </button>\n        </Tip>\n        <Tip label={`Move ${label} down`} side=\"top\">\n          <button\n            type=\"button\"\n            aria-label={`Move ${label} down`}\n            disabled={isLast}\n            onClick={onMoveDown}\n            className=\"inline-flex items-center justify-center size-6 rounded text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover disabled:opacity-30 disabled:pointer-events-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <i className=\"fa-light fa-chevron-down text-xs\" aria-hidden=\"true\" />\n          </button>\n        </Tip>\n      </div>\n      {/* Visibility toggle */}\n      <ToggleSwitch\n        checked={visible}\n        onChange={onToggleVisible}\n      />\n    </div>\n  )\n}\n"]}

package/dist/components/table-properties/draggable-list.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+/**
+ * useDraggableList — pointer-driven reorder hook used by drawer sort cards,
+ * column rows, and conditional-rule lists. Generic over item shape via
+ * `getId(item) => string | number`.
+ */
+
+interface DraggableListHandle {
+    dragId: string | null;
+    overId: string | null;
+    getItemProps: (id: string) => {
+        draggable: true;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+        "data-dragging": boolean;
+        "data-over": boolean;
+    };
+}
+declare function useDraggableList<T>(items: T[], getId: (item: T) => string, onReorder: (newItems: T[]) => void): DraggableListHandle;
+
+export { type DraggableListHandle, useDraggableList };

package/dist/components/table-properties/draggable-list.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+// src/components/table-properties/draggable-list.ts
+function useDraggableList(items, getId, onReorder) {
+  const [dragId, setDragId] = React.useState(null);
+  const [overId, setOverId] = React.useState(null);
+  function getItemProps(id) {
+    return {
+      draggable: true,
+      onDragStart: (e) => {
+        e.dataTransfer.effectAllowed = "move";
+        setDragId(id);
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "move";
+        setOverId(id);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        if (!dragId || dragId === id) {
+          setDragId(null);
+          setOverId(null);
+          return;
+        }
+        const from = items.findIndex((i) => getId(i) === dragId);
+        const to = items.findIndex((i) => getId(i) === id);
+        if (from === -1 || to === -1) {
+          setDragId(null);
+          setOverId(null);
+          return;
+        }
+        const next = [...items];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        onReorder(next);
+        setDragId(null);
+        setOverId(null);
+      },
+      onDragEnd: () => {
+        setDragId(null);
+        setOverId(null);
+      },
+      "data-dragging": dragId === id,
+      "data-over": overId === id && dragId !== id
+    };
+  }
+  return { dragId, overId, getItemProps };
+}
+
+export { useDraggableList };
+//# sourceMappingURL=draggable-list.js.map
+//# sourceMappingURL=draggable-list.js.map

package/dist/components/table-properties/draggable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table-properties/draggable-list.ts"],"names":[],"mappings":";;;AAqBO,SAAS,gBAAA,CACd,KAAA,EACA,KAAA,EACA,SAAA,EACqB;AACrB,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAU,eAAwB,IAAI,CAAA;AAC9D,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAU,eAAwB,IAAI,CAAA;AAE9D,EAAA,SAAS,aAAa,EAAA,EAAY;AAChC,IAAA,OAAO;AAAA,MACL,SAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAa,CAAC,CAAA,KAAuB;AAAE,QAAA,CAAA,CAAE,aAAa,aAAA,GAAgB,MAAA;AAAQ,QAAA,SAAA,CAAU,EAAE,CAAA;AAAA,MAAE,CAAA;AAAA,MAC5F,UAAA,EAAY,CAAC,CAAA,KAAuB;AAAE,QAAA,CAAA,CAAE,cAAA,EAAe;AAAG,QAAA,CAAA,CAAE,aAAa,UAAA,GAAa,MAAA;AAAQ,QAAA,SAAA,CAAU,EAAE,CAAA;AAAA,MAAE,CAAA;AAAA,MAC5G,MAAA,EAAQ,CAAC,CAAA,KAAuB;AAC9B,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,IAAI,CAAC,MAAA,IAAU,MAAA,KAAW,EAAA,EAAI;AAAE,UAAA,SAAA,CAAU,IAAI,CAAA;AAAG,UAAA,SAAA,CAAU,IAAI,CAAA;AAAG,UAAA;AAAA,QAAO;AACzE,QAAA,MAAM,OAAO,KAAA,CAAM,SAAA,CAAU,OAAK,KAAA,CAAM,CAAC,MAAM,MAAM,CAAA;AACrD,QAAA,MAAM,KAAO,KAAA,CAAM,SAAA,CAAU,OAAK,KAAA,CAAM,CAAC,MAAM,EAAE,CAAA;AACjD,QAAA,IAAI,IAAA,KAAS,EAAA,IAAM,EAAA,KAAO,EAAA,EAAI;AAAE,UAAA,SAAA,CAAU,IAAI,CAAA;AAAG,UAAA,SAAA,CAAU,IAAI,CAAA;AAAG,UAAA;AAAA,QAAO;AACzE,QAAA,MAAM,IAAA,GAAO,CAAC,GAAG,KAAK,CAAA;AACtB,QAAA,MAAM,CAAC,KAAK,CAAA,GAAI,IAAA,CAAK,MAAA,CAAO,MAAM,CAAC,CAAA;AACnC,QAAA,IAAA,CAAK,MAAA,CAAO,EAAA,EAAI,CAAA,EAAG,KAAK,CAAA;AACxB,QAAA,SAAA,CAAU,IAAI,CAAA;AACd,QAAA,SAAA,CAAU,IAAI,CAAA;AAAG,QAAA,SAAA,CAAU,IAAI,CAAA;AAAA,MACjC,CAAA;AAAA,MACA,WAAW,MAAM;AAAE,QAAA,SAAA,CAAU,IAAI,CAAA;AAAG,QAAA,SAAA,CAAU,IAAI,CAAA;AAAA,MAAE,CAAA;AAAA,MACpD,iBAAiB,MAAA,KAAW,EAAA;AAAA,MAC5B,WAAA,EAAa,MAAA,KAAW,EAAA,IAAM,MAAA,KAAW;AAAA,KAC3C;AAAA,EACF;AAEA,EAAA,OAAO,EAAE,MAAA,EAAQ,MAAA,EAAQ,YAAA,EAAa;AACxC","file":"draggable-list.js","sourcesContent":["/**\n * useDraggableList — pointer-driven reorder hook used by drawer sort cards,\n * column rows, and conditional-rule lists. Generic over item shape via\n * `getId(item) => string | number`.\n */\nimport * as React from \"react\"\n\nexport interface DraggableListHandle {\n  dragId: string | null\n  overId: string | null\n  getItemProps: (id: string) => {\n    draggable: true\n    onDragStart: (e: React.DragEvent) => void\n    onDragOver: (e: React.DragEvent) => void\n    onDrop: (e: React.DragEvent) => void\n    onDragEnd: () => void\n    \"data-dragging\": boolean\n    \"data-over\": boolean\n  }\n}\n\nexport function useDraggableList<T>(\n  items: T[],\n  getId: (item: T) => string,\n  onReorder: (newItems: T[]) => void,\n): DraggableListHandle {\n  const [dragId, setDragId] = React.useState<string | null>(null)\n  const [overId, setOverId] = React.useState<string | null>(null)\n\n  function getItemProps(id: string) {\n    return {\n      draggable: true as const,\n      onDragStart: (e: React.DragEvent) => { e.dataTransfer.effectAllowed = \"move\"; setDragId(id) },\n      onDragOver: (e: React.DragEvent) => { e.preventDefault(); e.dataTransfer.dropEffect = \"move\"; setOverId(id) },\n      onDrop: (e: React.DragEvent) => {\n        e.preventDefault()\n        if (!dragId || dragId === id) { setDragId(null); setOverId(null); return }\n        const from = items.findIndex(i => getId(i) === dragId)\n        const to   = items.findIndex(i => getId(i) === id)\n        if (from === -1 || to === -1) { setDragId(null); setOverId(null); return }\n        const next = [...items]\n        const [moved] = next.splice(from, 1)\n        next.splice(to, 0, moved)\n        onReorder(next)\n        setDragId(null); setOverId(null)\n      },\n      onDragEnd: () => { setDragId(null); setOverId(null) },\n      \"data-dragging\": dragId === id,\n      \"data-over\": overId === id && dragId !== id,\n    }\n  }\n\n  return { dragId, overId, getItemProps }\n}\n"]}