@spacesync/client 0.1.0

package/dist/detail-page-header.js

@@ -0,0 +1,220 @@
+import { ChevronLeft } from 'lucide-react';
+import * as React from 'react';
+import { createContext, useEffect, useContext } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/shell/detail-page-header.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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 EMPTY_TOP_BAR_STATE = {};
+var ShellTopBarStoreContext = createContext(null);
+function useShellTopBarStore() {
+  const store = useContext(ShellTopBarStoreContext);
+  if (!store) {
+    throw new Error("ShellTopBar components must be used within ShellTopBarProvider");
+  }
+  return store;
+}
+function ShellTopBar({
+  title,
+  icon,
+  actions
+}) {
+  const store = useShellTopBarStore();
+  useEffect(() => {
+    store.setState({ title, icon, actions });
+    return () => store.setState(EMPTY_TOP_BAR_STATE);
+  }, [title, icon, actions, store]);
+  return null;
+}
+
+// src/shell/shell-top-bar-chrome.ts
+var shellTopBarMutedIconClass = "text-sidebar-foreground/60";
+var shellTopBarTitleTextClass = "text-sidebar-foreground";
+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 shellTopBarBackButtonClass = 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"
+);
+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"
+);
+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"
+);
+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 mobileBackClass = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground";
+function DetailTitleRow({
+  onBack,
+  backAriaLabel,
+  icon,
+  title,
+  backClassName,
+  backIconSize
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        onClick: onBack,
+        "aria-label": backAriaLabel,
+        className: backClassName,
+        children: /* @__PURE__ */ jsx(ChevronLeft, { size: backIconSize, strokeWidth: 2 })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: `flex shrink-0 items-center ${shellTopBarMutedIconClass}`, children: icon }),
+    typeof title === "string" ? /* @__PURE__ */ jsx("span", { className: `truncate text-sm font-normal ${shellTopBarTitleTextClass}`, children: title }) : /* @__PURE__ */ jsx("span", { className: `min-w-0 flex-1 truncate text-sm font-normal ${shellTopBarTitleTextClass}`, children: title })
+  ] });
+}
+function DetailPageShellHeader(props) {
+  return /* @__PURE__ */ jsx(
+    ShellTopBar,
+    {
+      title: /* @__PURE__ */ jsx(DetailTitleRow, { ...props, backClassName: shellTopBarBackButtonClass, backIconSize: 14 }),
+      actions: props.actions
+    }
+  );
+}
+function DetailPageMobileHeader({
+  onBack,
+  backAriaLabel,
+  icon,
+  title,
+  mobileTitle,
+  actions
+}) {
+  const resolvedMobileTitle = mobileTitle ?? (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: "truncate text-sm font-semibold text-foreground", children: title }) : /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: title }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-border px-5 py-3 md:hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          onClick: onBack,
+          "aria-label": backAriaLabel,
+          className: mobileBackClass,
+          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 18, strokeWidth: 2 })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center text-muted-foreground", children: icon }),
+      resolvedMobileTitle
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+  ] });
+}
+
+export { DetailPageMobileHeader, DetailPageShellHeader };
+//# sourceMappingURL=detail-page-header.js.map
+//# sourceMappingURL=detail-page-header.js.map

package/dist/detail-page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/utils.ts","../src/ui/button.tsx","../src/shell/shell-top-bar.tsx","../src/shell/shell-top-bar-chrome.ts","../src/shell/detail-page-header.tsx"],"names":["Button","jsxs","jsx"],"mappings":"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","file":"detail-page-header.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","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"./utils\";\n\nconst buttonVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]\",\n        destructive:\n          \"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\",\n        outline:\n          \"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\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]\",\n        ghost:\n          \"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\",\n        link: \"text-primary underline-offset-4 hover:underline active:text-primary/80\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9 rounded-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> &\n    VariantProps<typeof buttonVariants> & {\n      asChild?: boolean;\n    }\n>(function Button({ className, variant, size, asChild = false, ...props }, ref) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n});\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  useSyncExternalStore,\n  type ReactNode,\n} from \"react\";\n\ntype ShellTopBarState = {\n  title?: ReactNode;\n  icon?: ReactNode;\n  actions?: ReactNode;\n};\n\ntype ShellTopBarStore = {\n  getSnapshot: () => ShellTopBarState;\n  subscribe: (listener: () => void) => () => void;\n  setState: (next: ShellTopBarState) => void;\n};\n\nconst EMPTY_TOP_BAR_STATE: ShellTopBarState = {};\n\nfunction createShellTopBarStore(): ShellTopBarStore {\n  let state = EMPTY_TOP_BAR_STATE;\n  const listeners = new Set<() => void>();\n\n  return {\n    getSnapshot: () => state,\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    setState: (next) => {\n      state = next;\n      listeners.forEach((listener) => listener());\n    },\n  };\n}\n\nconst ShellTopBarStoreContext = createContext<ShellTopBarStore | null>(null);\n\nexport function ShellTopBarProvider({ children }: { children: ReactNode }) {\n  const [store] = useState(createShellTopBarStore);\n\n  return (\n    <ShellTopBarStoreContext.Provider value={store}>\n      {children}\n    </ShellTopBarStoreContext.Provider>\n  );\n}\n\nfunction useShellTopBarStore() {\n  const store = useContext(ShellTopBarStoreContext);\n  if (!store) {\n    throw new Error(\"ShellTopBar components must be used within ShellTopBarProvider\");\n  }\n  return store;\n}\n\n/** Pages render a title and optional actions for the app shell top bar. */\nexport function ShellTopBar({\n  title,\n  icon,\n  actions,\n}: {\n  title: ReactNode;\n  icon?: ReactNode;\n  actions?: ReactNode;\n}) {\n  const store = useShellTopBarStore();\n\n  useEffect(() => {\n    store.setState({ title, icon, actions });\n    return () => store.setState(EMPTY_TOP_BAR_STATE);\n  }, [title, icon, actions, store]);\n\n  return null;\n}\n\n/** Renders registered page title and actions inside AppWebShell topBar. */\nexport function ShellTopBarFrame() {\n  const store = useShellTopBarStore();\n  const state = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n  const { title, icon, actions } = state;\n\n  if (title == null && actions == null) {\n    return <div className=\"flex flex-1 items-center\" />;\n  }\n\n  const titleIsPlainText = typeof title === \"string\";\n\n  return (\n    <>\n      <div className=\"flex min-w-0 flex-1 items-center\">\n        {title != null ? (\n          <div\n            data-slot=\"shell-top-bar-title\"\n            className=\"flex min-w-0 flex-1 items-center gap-2 text-sidebar-foreground\"\n          >\n            {titleIsPlainText ? (\n              <>\n                {icon != null ? (\n                  <span className=\"flex shrink-0 items-center text-sidebar-foreground/60\">{icon}</span>\n                ) : null}\n                <h1 className=\"truncate text-sm font-normal\">{title}</h1>\n              </>\n            ) : (\n              title\n            )}\n          </div>\n        ) : null}\n      </div>\n      {actions != null ? (\n        <div data-slot=\"shell-top-bar-actions\" className=\"flex shrink-0 items-center gap-1.5\">\n          {actions}\n        </div>\n      ) : null}\n    </>\n  );\n}\n","import { getShellTheme } from \"../theme/shell-theme\";\nimport { cn } from \"../ui/utils\";\n\nexport const shellTopBarMutedIconClass = \"text-sidebar-foreground/60\";\nexport const shellTopBarTitleTextClass = \"text-sidebar-foreground\";\n\n/** Shared sizing and corner radius for shell top bar actions. */\nconst shellTopBarActionSize = cn(\n  \"inline-flex !h-7 min-h-0 items-center justify-center gap-1 px-2.5 text-xs font-medium\",\n  \"[&_svg:not([class*='size-'])]:size-3.5\",\n);\nconst shellTopBarRadius = \"rounded-md\";\n\nfunction isDarkShell() {\n  return getShellTheme() === \"dark\";\n}\n\n/** Resting surface for neutral shell controls (secondary, outline, icon). */\nconst shellTopBarNeutralRest =\n  \"border border-sidebar-border bg-sidebar-accent text-sidebar-foreground shadow-none transition-colors\";\n\n/** Visible hover — lighten fill on dark shell, darken on light shell. */\nconst shellTopBarNeutralHover = isDarkShell()\n  ? \"hover:!border-sidebar-foreground/25 hover:!bg-sidebar-foreground/12 hover:!text-sidebar-foreground\"\n  : \"hover:!border-sidebar-foreground/14 hover:!bg-sidebar-foreground/6 hover:!text-sidebar-foreground\";\n\nconst shellTopBarNeutralActive = isDarkShell()\n  ? \"active:!border-sidebar-foreground/20 active:!bg-sidebar-foreground/8 active:!text-sidebar-foreground\"\n  : \"active:!border-sidebar-foreground/10 active:!bg-sidebar-foreground/4 active:!text-sidebar-foreground\";\n\n/** Apply to native shell actions (links, ticket buttons) so they share the same hover treatment as {@link ShellTopBarSecondaryActionButton}. */\nexport const shellTopBarNeutralActionDataAttr = {\n  \"data-shell-top-bar-action\": \"\",\n} as const;\n\n/** Compact back control in the shell top bar (detail pages). */\nexport const shellTopBarBackButtonClass = cn(\n  \"inline-flex !h-6 !w-6 shrink-0 items-center justify-center text-sidebar-foreground/70\",\n  shellTopBarRadius,\n  shellTopBarNeutralRest,\n  shellTopBarNeutralHover,\n  shellTopBarNeutralActive,\n);\n\n/** Icon-only control (e.g. overflow menu) in the shell top bar. */\nexport const shellTopBarIconButtonClass = cn(\n  \"inline-flex !h-7 !w-7 shrink-0 items-center justify-center text-sidebar-foreground/70\",\n  shellTopBarRadius,\n  shellTopBarNeutralRest,\n  shellTopBarNeutralHover,\n  shellTopBarNeutralActive,\n  \"[&_svg:not([class*='size-'])]:size-3.5\",\n);\n\n/**\n * Neutral secondary / outline action in the shell top bar.\n * Uses `!` on hover so shadcn `Button variant=\"outline\"` cannot win.\n */\nexport const shellTopBarSecondaryButtonClass = cn(\n  shellTopBarActionSize,\n  shellTopBarRadius,\n  \"!border-sidebar-border !bg-sidebar-accent !text-sidebar-foreground shadow-none transition-colors\",\n  \"!py-0\",\n  shellTopBarNeutralHover,\n  shellTopBarNeutralActive,\n  \"disabled:pointer-events-none disabled:!border-sidebar-border/60 disabled:!bg-sidebar-accent/60 disabled:!text-sidebar-foreground/40\",\n);\n\n/** Primary CTA in the shell top bar (New invoice, Add staff, etc.). */\nexport const shellTopBarPrimaryButtonClass = cn(\n  shellTopBarActionSize,\n  shellTopBarRadius,\n  \"bg-blue-500 text-white transition-colors hover:bg-blue-600\",\n  \"disabled:pointer-events-none disabled:opacity-50\",\n);\n\n/** Positive / payment emphasis in the shell top bar (e.g. Mark as paid). */\nexport const shellTopBarAccentButtonClass = cn(\n  shellTopBarActionSize,\n  shellTopBarRadius,\n  \"bg-emerald-600 text-white transition-colors hover:bg-emerald-700\",\n);\n\n/** Positive status action in the shell top bar (e.g. Mark resolved). */\nexport const shellTopBarSuccessButtonClass = cn(\n  shellTopBarActionSize,\n  shellTopBarRadius,\n  isDarkShell()\n    ? \"border border-emerald-500/35 bg-emerald-500/15 text-emerald-300 transition-colors hover:border-emerald-400/45 hover:bg-emerald-500/25\"\n    : \"border border-emerald-200 bg-emerald-50 text-emerald-700 transition-colors hover:border-emerald-300 hover:bg-emerald-100\",\n);\n\n/** Informative / reopen action in the shell top bar. */\nexport const shellTopBarInfoButtonClass = cn(\n  shellTopBarActionSize,\n  shellTopBarRadius,\n  isDarkShell()\n    ? \"border border-blue-500/35 bg-blue-500/15 text-blue-300 transition-colors hover:border-blue-400/45 hover:bg-blue-500/25\"\n    : \"border border-blue-200 bg-blue-50 text-blue-700 transition-colors hover:border-blue-300 hover:bg-blue-100\",\n);\n\n/** Outline-style action — same neutral chrome as {@link shellTopBarSecondaryButtonClass}. */\nexport const shellTopBarOutlineButtonClass = shellTopBarSecondaryButtonClass;\n\n/** Wrapper for segmented toggles (2D / list, etc.) in the shell top bar. */\nexport const shellTopBarSegmentedShellClass = cn(\n  \"flex items-center gap-0.5 border border-sidebar-border bg-sidebar-accent p-0.5\",\n  shellTopBarRadius,\n);\n\nexport function shellTopBarSegmentedItemClass(active: boolean) {\n  const dark = isDarkShell();\n  return cn(\n    shellTopBarActionSize,\n    \"!h-6 px-2\",\n    \"rounded-sm\",\n    active\n      ? dark\n        ? \"bg-sidebar text-sidebar-foreground shadow-sm\"\n        : \"bg-white text-sidebar-foreground shadow-sm\"\n      : dark\n        ? \"text-sidebar-foreground/60 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground\"\n        : \"text-sidebar-foreground/60 hover:bg-sidebar-foreground/6 hover:text-sidebar-foreground\",\n  );\n}\n\n/** Grouped field shell (month picker, etc.) in the top bar. */\nexport const shellTopBarControlGroupClass = cn(\n  \"flex h-7 items-center gap-1.5 border border-sidebar-border bg-sidebar-accent pl-2.5 pr-1 text-sidebar-foreground\",\n  shellTopBarRadius,\n);\n\nexport const shellTopBarControlLabelClass =\n  \"m-0 shrink-0 text-[11px] font-normal text-sidebar-foreground/60\";\n\n/** Select trigger embedded in {@link shellTopBarControlGroupClass}. */\nexport const shellTopBarSelectTriggerClass =\n  \"h-6 min-w-[140px] flex-1 border-0 bg-transparent px-1 text-xs text-sidebar-foreground shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 [&_svg]:text-sidebar-foreground/60\";\n\n/** Square control for date steppers and similar compact actions. */\nexport const shellTopBarCompactIconButtonClass = cn(\n  \"inline-flex !h-6 !w-6 items-center justify-center text-sidebar-foreground/70\",\n  shellTopBarRadius,\n  shellTopBarNeutralRest,\n  shellTopBarNeutralHover,\n  shellTopBarNeutralActive,\n  \"[&_svg:not([class*='size-'])]:size-3.5\",\n);\n\n/** Center label in a date stepper (shows “Today” or a formatted date). */\nexport const shellTopBarDateLabelButtonClass = cn(\n  shellTopBarActionSize,\n  \"min-w-[72px]\",\n  shellTopBarNeutralRest,\n  shellTopBarNeutralHover,\n  shellTopBarNeutralActive,\n);\n","import type { ReactNode } from \"react\";\nimport { ChevronLeft } from \"lucide-react\";\nimport { Button } from \"../ui/button\";\nimport { ShellTopBar } from \"./shell-top-bar\";\nimport {\n  shellTopBarBackButtonClass,\n  shellTopBarMutedIconClass,\n  shellTopBarTitleTextClass,\n} from \"./shell-top-bar-chrome\";\n\nexport type DetailPageHeaderProps = {\n  onBack: () => void;\n  backAriaLabel: string;\n  icon: ReactNode;\n  title: ReactNode;\n  /** Defaults to `title` when it is a plain string */\n  mobileTitle?: ReactNode;\n  actions?: ReactNode;\n};\n\nconst mobileBackClass =\n  \"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground\";\n\nfunction DetailTitleRow({\n  onBack,\n  backAriaLabel,\n  icon,\n  title,\n  backClassName,\n  backIconSize,\n}: DetailPageHeaderProps & { backClassName: string; backIconSize: number }) {\n  return (\n    <span className=\"flex min-w-0 items-center gap-2\">\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon\"\n        onClick={onBack}\n        aria-label={backAriaLabel}\n        className={backClassName}\n      >\n        <ChevronLeft size={backIconSize} strokeWidth={2} />\n      </Button>\n      <span className={`flex shrink-0 items-center ${shellTopBarMutedIconClass}`}>{icon}</span>\n      {typeof title === \"string\" ? (\n        <span className={`truncate text-sm font-normal ${shellTopBarTitleTextClass}`}>{title}</span>\n      ) : (\n        <span className={`min-w-0 flex-1 truncate text-sm font-normal ${shellTopBarTitleTextClass}`}>\n          {title}\n        </span>\n      )}\n    </span>\n  );\n}\n\nexport function DetailPageShellHeader(props: DetailPageHeaderProps) {\n  return (\n    <ShellTopBar\n      title={<DetailTitleRow {...props} backClassName={shellTopBarBackButtonClass} backIconSize={14} />}\n      actions={props.actions}\n    />\n  );\n}\n\nexport function DetailPageMobileHeader({\n  onBack,\n  backAriaLabel,\n  icon,\n  title,\n  mobileTitle,\n  actions,\n}: DetailPageHeaderProps) {\n  const resolvedMobileTitle =\n    mobileTitle ??\n    (typeof title === \"string\" ? (\n      <h1 className=\"truncate text-sm font-semibold text-foreground\">{title}</h1>\n    ) : (\n      <div className=\"min-w-0 flex-1 truncate text-sm font-semibold text-foreground\">{title}</div>\n    ));\n\n  return (\n    <div className=\"flex shrink-0 items-center justify-between gap-3 border-b border-border px-5 py-3 md:hidden\">\n      <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={onBack}\n          aria-label={backAriaLabel}\n          className={mobileBackClass}\n        >\n          <ChevronLeft size={18} strokeWidth={2} />\n        </Button>\n        <span className=\"flex shrink-0 items-center text-muted-foreground\">{icon}</span>\n        {resolvedMobileTitle}\n      </div>\n      {actions ? <div className=\"flex shrink-0 items-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n"]}

package/dist/dialog-CIdvylPK.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+export { DialogContent as D, DialogFooter as a, DialogHeader as b, Dialog as c, DialogClose as d, DialogDescription as e, DialogTitle as f, DialogTrigger as g, DialogOverlay as h, DialogPortal as i };

package/dist/errors-D1niseaa.d.ts

@@ -0,0 +1,34 @@
+/**
+ * - "network": the request never got a response at all (server unreachable, timeout, CORS/preflight failure).
+ * - "validation": HTTP 400 from our API where `error.details` is the Zod-issues shape produced by
+ *   `validate.middleware.ts` — field-mappable.
+ * - "http": every other status our API returns (401, 403, 404, 409, 500, ...). Not field-specific by default.
+ */
+type ApiClientErrorKind = "network" | "validation" | "http";
+interface ApiFieldError {
+    /** Dot-path, e.g. "email" — matched against react-hook-form field names. */
+    path: string;
+    message: string;
+}
+interface ApiClientErrorOptions {
+    statusCode?: number;
+    details?: unknown;
+    fieldErrors?: ApiFieldError[];
+}
+declare class ApiClientError extends Error {
+    readonly kind: ApiClientErrorKind;
+    readonly statusCode?: number;
+    readonly details?: unknown;
+    readonly fieldErrors?: ApiFieldError[];
+    constructor(kind: ApiClientErrorKind, message: string, options?: ApiClientErrorOptions);
+}
+declare function isApiClientError(err: unknown): err is ApiClientError;
+/**
+ * Normalizes anything that can be thrown while making a request (axios error,
+ * envelope-shape mismatch, or an unexpected exception) into one `ApiClientError`,
+ * classified by `kind` so callers like `useApiForm` can apply a sensible default
+ * per failure mode instead of treating a dropped connection the same as a 409.
+ */
+declare function normalizeAxiosError(err: unknown): ApiClientError;
+
+export { ApiClientError as A, type ApiClientErrorKind as a, type ApiClientErrorOptions as b, type ApiFieldError as c, isApiClientError as i, normalizeAxiosError as n };

package/dist/file-picker-field.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type FilePickerFieldVariant = "card" | "button" | "inline";
+interface FilePickerFieldProps {
+    label?: string;
+    actionLabel?: string;
+    description?: string;
+    selectedLabel?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    variant?: FilePickerFieldVariant;
+    icon?: ReactNode;
+    className?: string;
+    triggerClassName?: string;
+    inputClassName?: string;
+    title?: string;
+    onFilesSelected: (files: FileList | null) => void;
+}
+declare function FilePickerField({ label, actionLabel, description, selectedLabel, accept, multiple, disabled, variant, icon, className, triggerClassName, inputClassName, title, onFilesSelected, }: FilePickerFieldProps): react_jsx_runtime.JSX.Element;
+
+export { FilePickerField, type FilePickerFieldProps, type FilePickerFieldVariant };

package/dist/file-picker-field.js

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { Upload, Paperclip } from 'lucide-react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/files/file-picker-field.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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";
+function FilePickerField({
+  label,
+  actionLabel,
+  description,
+  selectedLabel,
+  accept,
+  multiple = false,
+  disabled = false,
+  variant = "card",
+  icon,
+  className,
+  triggerClassName,
+  inputClassName,
+  title,
+  onFilesSelected
+}) {
+  const inputRef = useRef(null);
+  const triggerLabel = selectedLabel ?? actionLabel ?? (multiple ? "Choose files" : "Choose file");
+  const fallbackIcon = variant === "card" ? /* @__PURE__ */ jsx(Upload, { size: 16, className: "text-muted-foreground" }) : /* @__PURE__ */ jsx(Paperclip, { size: 13 });
+  const handleFiles = (files) => {
+    if (disabled) return;
+    onFilesSelected(files);
+    if (inputRef.current) inputRef.current.value = "";
+  };
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "file",
+      accept,
+      multiple,
+      disabled,
+      className: cn("hidden", inputClassName),
+      onChange: (event) => handleFiles(event.target.files)
+    }
+  );
+  if (variant === "button") {
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      input,
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          disabled,
+          title,
+          className: triggerClassName,
+          onClick: () => inputRef.current?.click(),
+          children: [
+            icon ?? fallbackIcon,
+            triggerLabel
+          ]
+        }
+      )
+    ] });
+  }
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsxs("span", { className, children: [
+      input,
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          title,
+          className: cn(
+            "inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-blue-600 disabled:pointer-events-none disabled:text-muted-foreground/60 dark:text-blue-400",
+            triggerClassName
+          ),
+          onClick: () => inputRef.current?.click(),
+          children: [
+            icon ?? fallbackIcon,
+            triggerLabel
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-widest text-muted-foreground", children: label }) : null,
+    input,
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        title,
+        className: cn(
+          "flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-muted/80 px-4 py-6 text-center transition-colors hover:border-border hover:bg-accent disabled:pointer-events-none disabled:opacity-60",
+          triggerClassName
+        ),
+        onClick: () => inputRef.current?.click(),
+        onDragOver: (event) => {
+          if (disabled) return;
+          event.preventDefault();
+        },
+        onDrop: (event) => {
+          if (disabled) return;
+          event.preventDefault();
+          handleFiles(event.dataTransfer.files);
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "mb-1 flex size-8 items-center justify-center rounded-lg bg-muted", children: icon ?? fallbackIcon }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: triggerLabel }),
+          description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-[10px] text-muted-foreground", children: description }) : null
+        ]
+      }
+    )
+  ] });
+}
+
+export { FilePickerField };
+//# sourceMappingURL=file-picker-field.js.map
+//# sourceMappingURL=file-picker-field.js.map

package/dist/file-picker-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/utils.ts","../src/ui/button.tsx","../src/files/file-picker-field.tsx"],"names":["Button","jsx"],"mappings":"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","file":"file-picker-field.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","import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"./utils\";\n\nconst buttonVariants = cva(\n  \"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\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 active:scale-[0.98]\",\n        destructive:\n          \"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\",\n        outline:\n          \"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\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 active:scale-[0.98]\",\n        ghost:\n          \"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\",\n        link: \"text-primary underline-offset-4 hover:underline active:text-primary/80\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9 rounded-md\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nconst Button = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\"> &\n    VariantProps<typeof buttonVariants> & {\n      asChild?: boolean;\n    }\n>(function Button({ className, variant, size, asChild = false, ...props }, ref) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n});\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import { useRef, type ReactNode } from \"react\";\nimport { Paperclip, Upload } from \"lucide-react\";\nimport { Button } from \"../ui/button\";\nimport { cn } from \"../ui/utils\";\n\nexport type FilePickerFieldVariant = \"card\" | \"button\" | \"inline\";\n\nexport interface FilePickerFieldProps {\n  label?: string;\n  actionLabel?: string;\n  description?: string;\n  selectedLabel?: string;\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  variant?: FilePickerFieldVariant;\n  icon?: ReactNode;\n  className?: string;\n  triggerClassName?: string;\n  inputClassName?: string;\n  title?: string;\n  onFilesSelected: (files: FileList | null) => void;\n}\n\nexport function FilePickerField({\n  label,\n  actionLabel,\n  description,\n  selectedLabel,\n  accept,\n  multiple = false,\n  disabled = false,\n  variant = \"card\",\n  icon,\n  className,\n  triggerClassName,\n  inputClassName,\n  title,\n  onFilesSelected,\n}: FilePickerFieldProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const triggerLabel = selectedLabel ?? actionLabel ?? (multiple ? \"Choose files\" : \"Choose file\");\n  const fallbackIcon = variant === \"card\" ? (\n    <Upload size={16} className=\"text-muted-foreground\" />\n  ) : (\n    <Paperclip size={13} />\n  );\n\n  const handleFiles = (files: FileList | null) => {\n    if (disabled) return;\n    onFilesSelected(files);\n    if (inputRef.current) inputRef.current.value = \"\";\n  };\n\n  const input = (\n    <input\n      ref={inputRef}\n      type=\"file\"\n      accept={accept}\n      multiple={multiple}\n      disabled={disabled}\n      className={cn(\"hidden\", inputClassName)}\n      onChange={(event) => handleFiles(event.target.files)}\n    />\n  );\n\n  if (variant === \"button\") {\n    return (\n      <div className={className}>\n        {input}\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          disabled={disabled}\n          title={title}\n          className={triggerClassName}\n          onClick={() => inputRef.current?.click()}\n        >\n          {icon ?? fallbackIcon}\n          {triggerLabel}\n        </Button>\n      </div>\n    );\n  }\n\n  if (variant === \"inline\") {\n    return (\n      <span className={className}>\n        {input}\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className={cn(\n            \"inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-blue-600 disabled:pointer-events-none disabled:text-muted-foreground/60 dark:text-blue-400\",\n            triggerClassName,\n          )}\n          onClick={() => inputRef.current?.click()}\n        >\n          {icon ?? fallbackIcon}\n          {triggerLabel}\n        </button>\n      </span>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)}>\n      {label ? (\n        <span className=\"text-[10px] font-medium uppercase tracking-widest text-muted-foreground\">\n          {label}\n        </span>\n      ) : null}\n      {input}\n      <button\n        type=\"button\"\n        disabled={disabled}\n        title={title}\n        className={cn(\n          \"flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-border bg-muted/80 px-4 py-6 text-center transition-colors hover:border-border hover:bg-accent disabled:pointer-events-none disabled:opacity-60\",\n          triggerClassName,\n        )}\n        onClick={() => inputRef.current?.click()}\n        onDragOver={(event) => {\n          if (disabled) return;\n          event.preventDefault();\n        }}\n        onDrop={(event) => {\n          if (disabled) return;\n          event.preventDefault();\n          handleFiles(event.dataTransfer.files);\n        }}\n      >\n        <span className=\"mb-1 flex size-8 items-center justify-center rounded-lg bg-muted\">\n          {icon ?? fallbackIcon}\n        </span>\n        <span className=\"text-xs font-medium text-muted-foreground\">{triggerLabel}</span>\n        {description ? (\n          <span className=\"mt-0.5 text-[10px] text-muted-foreground\">{description}</span>\n        ) : null}\n      </button>\n    </div>\n  );\n}\n"]}

package/dist/file-viewer-dialog.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface FileViewerFile {
+    name: string;
+    mimeType: string;
+    sizeLabel?: string;
+    url: string;
+}
+declare function FileViewerDialog({ file, open, onOpenChange, }: {
+    file: FileViewerFile | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { FileViewerDialog, type FileViewerFile };