@spacesync/client 0.1.0

package/dist/page-list-chrome.js

@@ -0,0 +1,970 @@
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import { ChevronUp, ChevronDown, ChevronsUpDown, Search, ChevronDownIcon, CheckIcon, ChevronLeftIcon, MoreHorizontalIcon, ChevronRightIcon, ChevronUpIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+// src/shell/page-list-chrome.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/shell/page-list-sticky-columns.ts
+var leftEdgeShadow = cn(
+  "after:pointer-events-none after:absolute after:inset-y-0 after:right-0 after:w-3 after:translate-x-full",
+  "after:bg-gradient-to-r after:from-black/[0.06] after:to-transparent dark:after:from-black/20",
+  "after:opacity-0 after:transition-opacity",
+  "group-data-[scrolled-x=true]/table-scroll:after:opacity-100"
+);
+var rightEdgeShadow = cn(
+  "before:pointer-events-none before:absolute before:inset-y-0 before:left-0 before:w-3 before:-translate-x-full",
+  "before:bg-gradient-to-l before:from-black/[0.06] before:to-transparent dark:before:from-black/20",
+  "before:opacity-0 before:transition-opacity",
+  "group-data-[scrolled-x-end=false]/table-scroll:before:opacity-100"
+);
+function pageListStickyColumnClass({
+  side,
+  layer,
+  sortActive = false
+}) {
+  const isHead = layer === "head";
+  const pin = side === "left" ? "left-0" : "right-0";
+  const edgeShadow = side === "left" ? leftEdgeShadow : rightEdgeShadow;
+  return cn(
+    "relative sticky",
+    pin,
+    isHead ? "top-0 z-[3]" : "z-[1]",
+    sortActive ? "bg-blue-50/80 dark:bg-blue-950/40" : isHead ? "bg-card" : "bg-card group-hover:bg-accent",
+    edgeShadow
+  );
+}
+var pageListTableWithFixedColumnsClass = "border-separate border-spacing-0";
+
+// src/shell/shell-top-bar-chrome.ts
+var shellTopBarActionSize = cn(
+  "inline-flex !h-7 min-h-0 items-center justify-center gap-1 px-2.5 text-xs font-medium",
+  "[&_svg:not([class*='size-'])]:size-3.5"
+);
+var shellTopBarRadius = "rounded-md";
+var shellTopBarNeutralRest = "border border-sidebar-border bg-sidebar-accent text-sidebar-foreground shadow-none transition-colors";
+var shellTopBarNeutralHover = "hover:!border-sidebar-foreground/14 hover:!bg-sidebar-foreground/6 hover:!text-sidebar-foreground";
+var shellTopBarNeutralActive = "active:!border-sidebar-foreground/10 active:!bg-sidebar-foreground/4 active:!text-sidebar-foreground";
+var shellTopBarNeutralActionDataAttr = {
+  "data-shell-top-bar-action": ""
+};
+cn(
+  "inline-flex !h-6 !w-6 shrink-0 items-center justify-center text-sidebar-foreground/70",
+  shellTopBarRadius,
+  shellTopBarNeutralRest,
+  shellTopBarNeutralHover,
+  shellTopBarNeutralActive
+);
+cn(
+  "inline-flex !h-7 !w-7 shrink-0 items-center justify-center text-sidebar-foreground/70",
+  shellTopBarRadius,
+  shellTopBarNeutralRest,
+  shellTopBarNeutralHover,
+  shellTopBarNeutralActive,
+  "[&_svg:not([class*='size-'])]:size-3.5"
+);
+var shellTopBarSecondaryButtonClass = cn(
+  shellTopBarActionSize,
+  shellTopBarRadius,
+  "!border-sidebar-border !bg-sidebar-accent !text-sidebar-foreground shadow-none transition-colors",
+  "!py-0",
+  shellTopBarNeutralHover,
+  shellTopBarNeutralActive,
+  "disabled:pointer-events-none disabled:!border-sidebar-border/60 disabled:!bg-sidebar-accent/60 disabled:!text-sidebar-foreground/40"
+);
+var shellTopBarPrimaryButtonClass = cn(
+  shellTopBarActionSize,
+  shellTopBarRadius,
+  "bg-blue-500 text-white transition-colors hover:bg-blue-600",
+  "disabled:pointer-events-none disabled:opacity-50"
+);
+cn(
+  shellTopBarActionSize,
+  shellTopBarRadius,
+  "bg-emerald-600 text-white transition-colors hover:bg-emerald-700"
+);
+cn(
+  shellTopBarActionSize,
+  shellTopBarRadius,
+  "border border-emerald-200 bg-emerald-50 text-emerald-700 transition-colors hover:border-emerald-300 hover:bg-emerald-100"
+);
+cn(
+  shellTopBarActionSize,
+  shellTopBarRadius,
+  "border border-blue-200 bg-blue-50 text-blue-700 transition-colors hover:border-blue-300 hover:bg-blue-100"
+);
+var shellTopBarOutlineButtonClass = shellTopBarSecondaryButtonClass;
+cn(
+  "flex items-center gap-0.5 border border-sidebar-border bg-sidebar-accent p-0.5",
+  shellTopBarRadius
+);
+cn(
+  "flex h-7 items-center gap-1.5 border border-sidebar-border bg-sidebar-accent pl-2.5 pr-1 text-sidebar-foreground",
+  shellTopBarRadius
+);
+cn(
+  "inline-flex !h-6 !w-6 items-center justify-center text-sidebar-foreground/70",
+  shellTopBarRadius,
+  shellTopBarNeutralRest,
+  shellTopBarNeutralHover,
+  shellTopBarNeutralActive,
+  "[&_svg:not([class*='size-'])]:size-3.5"
+);
+cn(
+  shellTopBarActionSize,
+  "min-w-[72px]",
+  shellTopBarNeutralRest,
+  shellTopBarNeutralHover,
+  shellTopBarNeutralActive
+);
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 active:scale-[0.98] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:active:bg-destructive/70",
+        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground active:bg-accent/80 active:scale-[0.98] dark:bg-input/30 dark:border-input dark:hover:bg-input/50 dark:active:bg-input/60",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]",
+        ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/90 active:scale-[0.98] dark:hover:bg-accent/50 dark:active:bg-accent/40",
+        link: "text-primary underline-offset-4 hover:underline active:text-primary/80"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9 rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(function Button2({ className, variant, size, asChild = false, ...props }, ref) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+Button.displayName = "Button";
+var inputVariants = cva(
+  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-border bg-card text-foreground flex w-full min-w-0 rounded-md border px-3 py-1 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:border-blue-400 focus-visible:ring-[3px] focus-visible:ring-blue-500/25 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-red-400 aria-invalid:ring-red-500/20 md:text-sm",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-sm",
+        default: "h-9",
+        lg: "h-10",
+        xl: "h-11"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var Input = React.forwardRef(function Input2({ className, type, size, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      "data-slot": "input",
+      className: cn(inputVariants({ size }), className),
+      ...props
+    }
+  );
+});
+function SearchField({
+  value,
+  onChange,
+  placeholder,
+  className,
+  size = "default",
+  "aria-label": ariaLabel
+}) {
+  const heightClass = size === "lg" ? "h-11" : "h-10";
+  const iconSize = size === "lg" ? 16 : 16;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 rounded-md border border-border bg-card px-3 w-full focus-within:border-blue-400 focus-within:ring-[3px] focus-within:ring-blue-500/25 transition-all",
+        heightClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Search, { size: iconSize, className: "text-muted-foreground shrink-0", strokeWidth: 2.25 }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "search",
+            value,
+            onChange: (e) => onChange(e.target.value),
+            placeholder,
+            "aria-label": ariaLabel,
+            className: "flex-1 border-0 bg-transparent shadow-none focus-visible:ring-0 px-0 min-w-0 h-auto"
+          }
+        )
+      ]
+    }
+  );
+}
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size
+        }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
+      ]
+    }
+  );
+}
+function PaginationNext({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ]
+    }
+  );
+}
+function PaginationEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border border-border bg-card data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:border-border focus-visible:border-blue-400 focus-visible:ring-blue-500/25 aria-invalid:border-red-400 aria-invalid:ring-red-500/20 dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-white/10 shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-card/10 focus:text-popover-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn("flex cursor-default items-center justify-center py-1", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+function PageListRoot({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("h-full flex flex-col min-h-0 bg-card", className), ...props });
+}
+function PageListHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("shrink-0 bg-card border-b border-border px-5 pt-4 pb-4", className),
+      ...props
+    }
+  );
+}
+function PageListTitleRow({
+  title,
+  subtitle,
+  actions,
+  titleAddon
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      titleAddon ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
+        titleAddon,
+        /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-foreground", children: title })
+      ] }) : /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-foreground", children: title }),
+      subtitle ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: subtitle }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: actions }) : null
+  ] });
+}
+function PageListPrimaryActionButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      className: cn(
+        "h-9 gap-1.5 rounded-xl bg-blue-500 px-4 text-sm font-medium text-white hover:bg-blue-600",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PageListSecondaryActionButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      className: cn(
+        "h-9 gap-1.5 rounded-xl border-border bg-card px-4 text-sm font-medium text-foreground hover:bg-accent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ShellTopBarPrimaryActionButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", className: cn(shellTopBarPrimaryButtonClass, className), ...props });
+}
+function ShellTopBarSecondaryActionButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "sm",
+      className: cn(shellTopBarOutlineButtonClass, className),
+      ...props
+    }
+  );
+}
+function PageListToolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("mt-4 flex flex-col gap-3 items-start", className), ...props });
+}
+function PageListStatGrid({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("mt-4 grid grid-cols-2 gap-2 sm:grid-cols-4", className),
+      ...props
+    }
+  );
+}
+function PageListStatCard({
+  label,
+  value,
+  tone = "default"
+}) {
+  const shell = tone === "danger" ? "border-red-100 bg-red-50/80" : tone === "success" ? "border-emerald-100 bg-emerald-50/80" : "border-border bg-muted";
+  const labelClass = tone === "danger" ? "text-red-600/80" : tone === "success" ? "text-emerald-700/80" : "text-muted-foreground";
+  const valueClass = tone === "danger" ? "text-red-700" : tone === "success" ? "text-emerald-800" : "text-foreground";
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border px-3 py-2", shell), children: [
+    /* @__PURE__ */ jsx("p", { className: cn("text-[11px] mb-0.5", labelClass), children: label }),
+    /* @__PURE__ */ jsx("p", { className: cn("text-sm font-semibold tabular-nums", valueClass), children: value })
+  ] });
+}
+function PageListTableArea({ className, ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const syncScrollState = () => {
+      if (el.scrollLeft > 0) {
+        el.dataset.scrolledX = "true";
+      } else {
+        delete el.dataset.scrolledX;
+      }
+      const atRightEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+      if (!atRightEnd && el.scrollWidth > el.clientWidth) {
+        el.dataset.scrolledXEnd = "false";
+      } else {
+        delete el.dataset.scrolledXEnd;
+      }
+    };
+    syncScrollState();
+    el.addEventListener("scroll", syncScrollState, { passive: true });
+    const resizeObserver = new ResizeObserver(syncScrollState);
+    resizeObserver.observe(el);
+    if (el.firstElementChild) {
+      resizeObserver.observe(el.firstElementChild);
+    }
+    return () => {
+      el.removeEventListener("scroll", syncScrollState);
+      resizeObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "group/table-scroll flex-1 min-h-0 overflow-auto bg-card border-t border-border",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PageListSearchField({
+  value,
+  onChange,
+  placeholder,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    SearchField,
+    {
+      value,
+      onChange,
+      placeholder,
+      className
+    }
+  );
+}
+function PageListStickyThead({ children }) {
+  return /* @__PURE__ */ jsx("thead", { className: "sticky top-0 z-[2] bg-card shadow-[0_1px_0_0_var(--border)]", children });
+}
+function PageListThead({ className, ...props }) {
+  return /* @__PURE__ */ jsx("thead", { className: cn("border-b border-border", className), ...props });
+}
+function PageListTable({
+  minWidth,
+  fixedColumns = false,
+  compact = false,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      className: cn(
+        "w-full text-left text-sm",
+        fixedColumns ? pageListTableWithFixedColumnsClass : "border-collapse",
+        compact && "border-collapse",
+        className
+      ),
+      style: minWidth != null ? { ...style, minWidth: `${minWidth}px` } : style,
+      ...props
+    }
+  );
+}
+function PageListHeaderRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn("text-[10px] uppercase tracking-wide text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+var pageListTdToneClass = {
+  default: "text-xs text-foreground",
+  primary: "text-xs font-medium text-foreground",
+  muted: "text-xs text-muted-foreground",
+  mono: "text-xs font-mono text-muted-foreground"
+};
+var pageListTdSizeClass = {
+  default: "px-2 py-2.5 first:pl-5 last:pr-5",
+  comfortable: "px-5 py-3.5 first:pl-5 last:pr-5"
+};
+function PageListTr({
+  onClick,
+  selected = false,
+  className,
+  onKeyDown,
+  ...props
+}) {
+  const clickable = Boolean(onClick);
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      role: clickable ? "link" : void 0,
+      tabIndex: clickable ? 0 : void 0,
+      onClick,
+      onKeyDown: clickable && onClick ? (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : onKeyDown,
+      className: cn(
+        "border-b border-border last:border-0 transition-colors",
+        clickable && "group cursor-pointer hover:bg-accent outline-none focus-visible:ring-2 focus-visible:ring-blue-400 focus-visible:ring-inset",
+        selected && "bg-accent/60",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var pageListThClass = "font-medium py-2.5 px-2 text-left text-[10px] uppercase tracking-wide text-muted-foreground first:pl-5 last:pr-5";
+var pageListTdClass = pageListTdSizeClass.default;
+function PageListTh({
+  children,
+  columnFixed,
+  align = "left",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        pageListThClass,
+        align === "right" && "text-right",
+        columnFixed && pageListStickyColumnClass({ side: columnFixed, layer: "head" }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function PageListTd({
+  children,
+  columnFixed,
+  align = "left",
+  tone = "default",
+  size = "default",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        pageListTdSizeClass[size],
+        pageListTdToneClass[tone],
+        tone === "mono" && align === "right" && "font-medium text-foreground",
+        align === "right" && "text-right",
+        columnFixed && pageListStickyColumnClass({ side: columnFixed, layer: "body" }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function PageListSortableTh({
+  label,
+  columnKey,
+  sortKey,
+  direction,
+  onSort,
+  align = "left",
+  columnFixed,
+  className
+}) {
+  const active = sortKey === columnKey;
+  const ariaSort = active ? direction === "asc" ? "ascending" : "descending" : void 0;
+  const DirectionIcon = direction === "asc" ? ChevronUp : ChevronDown;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        pageListThClass,
+        align === "right" && "text-right",
+        active && "text-blue-700 shadow-[inset_0_-2px_0_0_rgb(59,130,246)] dark:text-blue-300",
+        columnFixed && pageListStickyColumnClass({
+          side: columnFixed,
+          layer: "head",
+          sortActive: active
+        }),
+        !columnFixed && active && "bg-blue-50/80 dark:bg-blue-950/40",
+        className
+      ),
+      "aria-sort": ariaSort,
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          onClick: () => onSort(columnKey),
+          className: cn(
+            "group inline-flex h-auto w-full gap-1 rounded-none border-0 p-0 shadow-none",
+            "text-[10px] font-medium uppercase tracking-wide",
+            "hover:bg-transparent",
+            active ? "text-blue-700 dark:text-blue-300" : "text-muted-foreground hover:text-foreground",
+            align === "right" ? "justify-end" : "justify-start"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: label }),
+            active ? /* @__PURE__ */ jsx(
+              DirectionIcon,
+              {
+                size: 12,
+                strokeWidth: 2,
+                className: "shrink-0 text-blue-600 dark:text-blue-400",
+                "aria-hidden": true
+              }
+            ) : /* @__PURE__ */ jsx(
+              ChevronsUpDown,
+              {
+                size: 12,
+                strokeWidth: 2,
+                className: "shrink-0 opacity-40 transition-opacity group-hover:opacity-70",
+                "aria-hidden": true
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function getVisiblePages(page, totalPages) {
+  if (totalPages <= 5) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const pages = /* @__PURE__ */ new Set([1, totalPages, page - 1, page, page + 1]);
+  const sorted = [...pages].filter((p) => p >= 1 && p <= totalPages).sort((a, b) => a - b);
+  const result = [];
+  for (let i = 0; i < sorted.length; i += 1) {
+    const current = sorted[i];
+    const prev = sorted[i - 1];
+    if (prev !== void 0 && current - prev > 1) {
+      result.push("ellipsis");
+    }
+    result.push(current);
+  }
+  return result;
+}
+function paginationLinkClick(page, setPage) {
+  return (event) => {
+    event.preventDefault();
+    setPage(page);
+  };
+}
+function PageListPagination({
+  page,
+  setPage,
+  pageSize,
+  setPageSize,
+  pageSizeOptions,
+  totalItems,
+  totalPages,
+  rangeStart,
+  rangeEnd,
+  canPrev,
+  canNext
+}) {
+  if (totalItems === 0) return null;
+  const visiblePages = getVisiblePages(page, totalPages);
+  const showPageControls = totalPages > 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "shrink-0 flex flex-col gap-3 border-t border-border bg-card px-5 py-3 sm:flex-row sm:items-center sm:justify-between",
+      children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground tabular-nums", children: [
+          "Showing ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: rangeStart }),
+          "\u2013",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: rangeEnd }),
+          " of",
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: totalItems })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Rows per page" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: String(pageSize),
+                onValueChange: (value) => setPageSize(Number(value)),
+                children: [
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[72px] rounded-lg border-border bg-card text-sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option), children: option }, option)) })
+                ]
+              }
+            )
+          ] }),
+          showPageControls ? /* @__PURE__ */ jsx(Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationPrevious,
+              {
+                href: "#",
+                "aria-disabled": !canPrev,
+                className: cn(!canPrev && "pointer-events-none opacity-50"),
+                onClick: canPrev ? paginationLinkClick(page - 1, setPage) : (event) => event.preventDefault()
+              }
+            ) }),
+            visiblePages.map(
+              (pageNum, index) => pageNum === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+                PaginationLink,
+                {
+                  href: "#",
+                  isActive: pageNum === page,
+                  onClick: paginationLinkClick(pageNum, setPage),
+                  children: pageNum
+                }
+              ) }, pageNum)
+            ),
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationNext,
+              {
+                href: "#",
+                "aria-disabled": !canNext,
+                className: cn(!canNext && "pointer-events-none opacity-50"),
+                onClick: canNext ? paginationLinkClick(page + 1, setPage) : (event) => event.preventDefault()
+              }
+            ) })
+          ] }) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function PageListEmptyState({
+  title,
+  description,
+  icon,
+  action,
+  variant = "minimal",
+  className
+}) {
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center py-24 gap-2",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: title }),
+          description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: description }) : null,
+          action
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col items-center justify-center py-20 gap-3 border-2 border-dashed border-border rounded-2xl bg-muted/50",
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-2xl bg-muted flex items-center justify-center", children: icon }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-center px-4", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground font-medium", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground max-w-sm", children: description }) : null
+        ] }),
+        action
+      ]
+    }
+  );
+}
+function DetailTableFrame({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("overflow-x-auto rounded-xl border border-border", className),
+      ...props,
+      children
+    }
+  );
+}
+function DetailSection({
+  title,
+  description,
+  headerMeta,
+  headerAction,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-6 py-6 last:border-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: description })
+      ] }),
+      headerAction ? headerAction : headerMeta ? /* @__PURE__ */ jsx("div", { className: "shrink-0 text-xs text-muted-foreground", children: headerMeta }) : null
+    ] }),
+    children
+  ] });
+}
+
+export { DetailSection, DetailTableFrame, PageListEmptyState, PageListHeader, PageListHeaderRow, PageListPagination, PageListPrimaryActionButton, PageListRoot, PageListSearchField, PageListSecondaryActionButton, PageListSortableTh, PageListStatCard, PageListStatGrid, PageListStickyThead, PageListTable, PageListTableArea, PageListTd, PageListTh, PageListThead, PageListTitleRow, PageListToolbar, PageListTr, ShellTopBarPrimaryActionButton, ShellTopBarSecondaryActionButton, pageListStickyColumnClass, pageListTableWithFixedColumnsClass, pageListTdClass, pageListThClass, shellTopBarNeutralActionDataAttr };
+//# sourceMappingURL=page-list-chrome.js.map
+//# sourceMappingURL=page-list-chrome.js.map