@liam-public/browser-react-cms 0.1.0

package/README.md

@@ -0,0 +1,37 @@
+# @liam-public/browser-react-cms
+
+Reusable CMS/admin **chrome** on top of `@liam-public/browser-react-ui` — the parts every
+admin app reinvents: a responsive app-shell, auth route-guards, and page primitives.
+
+## Exports
+
+- **`CmsLayout`** — responsive shell (desktop sidebar + mobile hamburger sheet) driven by a
+  `nav: NavItem[]` prop (`{ to, label, icon, end?, badge? }`), with `brand` and `headerRight`.
+- **`RequireAuth`** / **`RequireRole`** — route guards over `useAuth()` from
+  `@liam-public/browser-react-auth` (the guard `browser-react-auth` doesn't ship). `RequireAuth`
+  takes `onUnauthenticated` (e.g. trigger the OIDC redirect) + a `fallback`; `RequireRole` takes
+  `anyOf` roles + a `getRoles(user)` extractor.
+- **`PageHeader`**, **`PageStack`** — page title row + vertical section spacing.
+- **`DesktopOnly`/`MobileCards`/`MobileCard`/`MobileField`** — responsive table/card primitives.
+- **`LoadingSpinner`**, **`ConfirmDialog`** — common feedback components.
+
+## Setup
+
+Peer deps: `react`, `react-dom`, `react-router-dom`. Run Tailwind v4 in your app and import the
+theme once:
+
+```css
+/* app.css */
+@import '@liam-public/browser-react-cms/theme.css';
+```
+
+```tsx
+import { CmsLayout, RequireAuth } from '@liam-public/browser-react-cms'
+import { LayoutDashboard } from 'lucide-react'
+
+<RequireAuth onUnauthenticated={() => authClient.signInRedirect()}>
+  <CmsLayout brand="My App" nav={[{ to: '/', label: 'Dashboard', icon: LayoutDashboard, end: true }]}>
+    <Routes>…</Routes>
+  </CmsLayout>
+</RequireAuth>
+```

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+import * as react from 'react';
+import { ReactNode, ComponentType } from 'react';
+
+/** A single sidebar navigation entry. `icon` is any lucide-react (or compatible) icon. */
+interface NavItem {
+    readonly to: string;
+    readonly label: string;
+    readonly icon: ComponentType<{
+        className?: string;
+    }>;
+    /** Exact-match the route (e.g. for the index `/`). */
+    readonly end?: boolean;
+    /** Optional trailing content, e.g. an alert count `<Badge>`. */
+    readonly badge?: ReactNode;
+}
+interface CmsLayoutProps {
+    readonly children: ReactNode;
+    /** Sidebar navigation entries. */
+    readonly nav: readonly NavItem[];
+    /** Brand shown at the top of the sidebar (defaults to "CMS"). */
+    readonly brand?: ReactNode;
+    /** Optional content for the top-right of the desktop header (e.g. a user menu). */
+    readonly headerRight?: ReactNode;
+}
+/**
+ * Responsive CMS app shell: a desktop sidebar (md+) and a mobile hamburger sheet,
+ * with an active-link-aware nav driven entirely by the `nav` prop. Bring your own
+ * router (`react-router-dom`) and Tailwind theme.
+ */
+declare function CmsLayout({ children, nav, brand, headerRight }: CmsLayoutProps): react.JSX.Element;
+
+interface RequireAuthProps {
+    readonly children: ReactNode;
+    /** Rendered while loading or when unauthenticated (defaults to a "Redirecting…" line). */
+    readonly fallback?: ReactNode;
+    /**
+     * Called once when the user is confirmed unauthenticated — e.g. trigger the OIDC
+     * redirect from `@liam-workspace/auth-client`, or navigate to `/login`.
+     */
+    readonly onUnauthenticated?: () => void;
+}
+/**
+ * Gate that renders `children` only for an authenticated user. Wraps `useAuth()` from
+ * `@liam-public/browser-react-auth`, filling the route-guard gap that package leaves open.
+ */
+declare function RequireAuth({ children, fallback, onUnauthenticated }: RequireAuthProps): react.JSX.Element;
+interface RequireRoleProps {
+    readonly children: ReactNode;
+    /** The user is allowed if they hold ANY of these roles. */
+    readonly anyOf: readonly string[];
+    /** Extract the user's roles from the auth `user` object (shape is app-specific). */
+    readonly getRoles: (user: unknown) => readonly string[];
+    /** Rendered when the user lacks the required role(s). */
+    readonly fallback?: ReactNode;
+}
+/** Gate that additionally requires the authenticated user to hold one of `anyOf` roles. */
+declare function RequireRole({ children, anyOf, getRoles, fallback }: RequireRoleProps): react.JSX.Element;
+
+interface PageHeaderProps {
+    readonly title: string;
+    readonly action?: ReactNode;
+}
+/** A page title row with an optional right-aligned action (e.g. a "New" button). */
+declare function PageHeader({ title, action }: PageHeaderProps): react.JSX.Element;
+interface PageStackProps {
+    readonly children: ReactNode;
+    readonly spacing?: 4 | 6;
+}
+/** Vertical spacing container for page sections. */
+declare function PageStack({ children, spacing }: PageStackProps): react.JSX.Element;
+
+/** Renders children only at md and up (desktop table view). */
+declare function DesktopOnly({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+/** Renders children only below md (stacked-card view). */
+declare function MobileCards({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+/** A single stacked card used inside MobileCards. */
+declare function MobileCard({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+/** A label/value line inside a MobileCard. */
+declare function MobileField({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+interface LoadingSpinnerProps {
+    readonly size?: 'md' | 'lg';
+}
+/** Centered spinner for loading states. */
+declare function LoadingSpinner({ size }: LoadingSpinnerProps): react.JSX.Element;
+interface ConfirmDialogProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly title: string;
+    readonly description: string;
+    readonly onConfirm: () => void;
+    readonly loading?: boolean;
+    readonly error?: string | null;
+    /** Confirm-button label (defaults to "Confirm"). */
+    readonly confirmLabel?: string;
+    /** Set true for destructive actions (red confirm button). */
+    readonly destructive?: boolean;
+}
+/** A modal confirm dialog with loading + error states. */
+declare function ConfirmDialog({ open, onOpenChange, title, description, onConfirm, loading, error, confirmLabel, destructive, }: ConfirmDialogProps): react.JSX.Element;
+
+export { CmsLayout, type CmsLayoutProps, ConfirmDialog, type ConfirmDialogProps, DesktopOnly, LoadingSpinner, type LoadingSpinnerProps, MobileCard, MobileCards, MobileField, type NavItem, PageHeader, type PageHeaderProps, PageStack, type PageStackProps, RequireAuth, type RequireAuthProps, RequireRole, type RequireRoleProps };

package/dist/index.js

@@ -0,0 +1,180 @@
+// src/cms-layout.tsx
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { Menu } from "lucide-react";
+import {
+  Button,
+  Separator,
+  Sheet,
+  SheetContent,
+  SheetTrigger,
+  cn
+} from "@liam-public/browser-react-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function NavList({ nav, onNavigate }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: nav.map((item) => /* @__PURE__ */ jsxs(
+    NavLink,
+    {
+      to: item.to,
+      end: item.end,
+      onClick: onNavigate,
+      className: ({ isActive }) => cn(
+        "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent",
+        isActive && "bg-accent text-accent-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(item.icon, { className: "h-4 w-4" }),
+        item.label,
+        item.badge != null && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: item.badge })
+      ]
+    },
+    item.to
+  )) });
+}
+function CmsLayout({ children, nav, brand = "CMS", headerRight }) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-screen flex-col md:flex-row", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-center gap-2 border-b p-3 md:hidden", children: [
+      /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Open menu", className: "h-11 w-11", children: /* @__PURE__ */ jsx(Menu, { className: "h-5 w-5" }) }) }),
+        /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "p-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "p-4 font-semibold text-lg", children: brand }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-1 p-2", children: /* @__PURE__ */ jsx(NavList, { nav, onNavigate: () => setOpen(false) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "font-semibold", children: brand })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "hidden md:flex w-56 border-r bg-muted/30 flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-semibold text-lg", children: brand }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col gap-1 p-2", children: /* @__PURE__ */ jsx(NavList, { nav }) })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex-1 overflow-auto", children: [
+      headerRight && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-end border-b p-3", children: headerRight }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 md:p-6", children })
+    ] })
+  ] });
+}
+
+// src/guards.tsx
+import { useEffect } from "react";
+import { useAuth } from "@liam-public/browser-react-auth";
+import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
+function DefaultFallback({ message }) {
+  return /* @__PURE__ */ jsx2("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsx2("p", { className: "text-sm text-muted-foreground", children: message }) });
+}
+function RequireAuth({ children, fallback, onUnauthenticated }) {
+  const { isAuthenticated, isLoading } = useAuth();
+  useEffect(() => {
+    if (!isLoading && !isAuthenticated) onUnauthenticated?.();
+  }, [isLoading, isAuthenticated, onUnauthenticated]);
+  if (isLoading) return /* @__PURE__ */ jsx2(Fragment2, { children: fallback ?? /* @__PURE__ */ jsx2(DefaultFallback, { message: "Loading\u2026" }) });
+  if (!isAuthenticated) return /* @__PURE__ */ jsx2(Fragment2, { children: fallback ?? /* @__PURE__ */ jsx2(DefaultFallback, { message: "Redirecting to sign in\u2026" }) });
+  return /* @__PURE__ */ jsx2(Fragment2, { children });
+}
+function RequireRole({ children, anyOf, getRoles, fallback }) {
+  const { user, isLoading, isAuthenticated } = useAuth();
+  if (isLoading) return /* @__PURE__ */ jsx2(Fragment2, { children: fallback ?? /* @__PURE__ */ jsx2(DefaultFallback, { message: "Loading\u2026" }) });
+  if (!isAuthenticated) return /* @__PURE__ */ jsx2(Fragment2, { children: fallback ?? /* @__PURE__ */ jsx2(DefaultFallback, { message: "Not signed in." }) });
+  const roles = getRoles(user);
+  const allowed = anyOf.some((r) => roles.includes(r));
+  if (!allowed) return /* @__PURE__ */ jsx2(Fragment2, { children: fallback ?? /* @__PURE__ */ jsx2(DefaultFallback, { message: "You don't have access to this page." }) });
+  return /* @__PURE__ */ jsx2(Fragment2, { children });
+}
+
+// src/page.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function PageHeader({ title, action }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx3("h1", { className: "text-2xl font-bold", children: title }),
+    action
+  ] });
+}
+function PageStack({ children, spacing = 6 }) {
+  return /* @__PURE__ */ jsx3("div", { className: spacing === 4 ? "space-y-4" : "space-y-6", children });
+}
+
+// src/responsive-table.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DesktopOnly({ children }) {
+  return /* @__PURE__ */ jsx4("div", { className: "hidden md:block", children });
+}
+function MobileCards({ children }) {
+  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-3 md:hidden", children });
+}
+function MobileCard({ children }) {
+  return /* @__PURE__ */ jsx4("div", { className: "rounded-lg border bg-card p-3 text-sm", children });
+}
+function MobileField({ label, children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between gap-3 py-0.5", children: [
+    /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx4("span", { className: "text-right font-medium break-words", children })
+  ] });
+}
+
+// src/feedback.tsx
+import { Loader2 } from "lucide-react";
+import {
+  Button as Button2,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@liam-public/browser-react-ui";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function LoadingSpinner({ size = "md" }) {
+  const padding = size === "lg" ? "py-16" : "py-8";
+  const icon = size === "lg" ? "h-8 w-8" : "h-6 w-6";
+  return /* @__PURE__ */ jsx5("div", { className: `flex items-center justify-center ${padding}`, children: /* @__PURE__ */ jsx5(Loader2, { className: `${icon} animate-spin text-muted-foreground` }) });
+}
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onConfirm,
+  loading,
+  error,
+  confirmLabel = "Confirm",
+  destructive
+}) {
+  return /* @__PURE__ */ jsx5(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(DialogContent, { children: [
+    /* @__PURE__ */ jsxs4(DialogHeader, { children: [
+      /* @__PURE__ */ jsx5(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx5(DialogDescription, { children: description })
+    ] }),
+    error && /* @__PURE__ */ jsx5("p", { className: "text-sm text-destructive", children: error }),
+    /* @__PURE__ */ jsxs4(DialogFooter, { children: [
+      /* @__PURE__ */ jsx5(Button2, { variant: "outline", onClick: () => onOpenChange(false), disabled: loading, children: "Cancel" }),
+      /* @__PURE__ */ jsxs4(
+        Button2,
+        {
+          variant: destructive ? "destructive" : "default",
+          onClick: onConfirm,
+          disabled: loading,
+          children: [
+            loading && /* @__PURE__ */ jsx5(Loader2, { className: "h-4 w-4 animate-spin" }),
+            confirmLabel
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  CmsLayout,
+  ConfirmDialog,
+  DesktopOnly,
+  LoadingSpinner,
+  MobileCard,
+  MobileCards,
+  MobileField,
+  PageHeader,
+  PageStack,
+  RequireAuth,
+  RequireRole
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/cms-layout.tsx","../src/guards.tsx","../src/page.tsx","../src/responsive-table.tsx","../src/feedback.tsx"],"sourcesContent":["import { useState } from 'react'\nimport type { ComponentType, ReactNode } from 'react'\nimport { NavLink } from 'react-router-dom'\nimport { Menu } from 'lucide-react'\nimport {\n  Button,\n  Separator,\n  Sheet,\n  SheetContent,\n  SheetTrigger,\n  cn,\n} from '@liam-public/browser-react-ui'\n\n/** A single sidebar navigation entry. `icon` is any lucide-react (or compatible) icon. */\nexport interface NavItem {\n  readonly to: string\n  readonly label: string\n  readonly icon: ComponentType<{ className?: string }>\n  /** Exact-match the route (e.g. for the index `/`). */\n  readonly end?: boolean\n  /** Optional trailing content, e.g. an alert count `<Badge>`. */\n  readonly badge?: ReactNode\n}\n\nfunction NavList({ nav, onNavigate }: { nav: readonly NavItem[]; onNavigate?: () => void }) {\n  return (\n    <>\n      {nav.map((item) => (\n        <NavLink\n          key={item.to}\n          to={item.to}\n          end={item.end}\n          onClick={onNavigate}\n          className={({ isActive }) =>\n            cn(\n              'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent',\n              isActive && 'bg-accent text-accent-foreground',\n            )\n          }\n        >\n          <item.icon className=\"h-4 w-4\" />\n          {item.label}\n          {item.badge != null && <span className=\"ml-auto\">{item.badge}</span>}\n        </NavLink>\n      ))}\n    </>\n  )\n}\n\nexport interface CmsLayoutProps {\n  readonly children: ReactNode\n  /** Sidebar navigation entries. */\n  readonly nav: readonly NavItem[]\n  /** Brand shown at the top of the sidebar (defaults to \"CMS\"). */\n  readonly brand?: ReactNode\n  /** Optional content for the top-right of the desktop header (e.g. a user menu). */\n  readonly headerRight?: ReactNode\n}\n\n/**\n * Responsive CMS app shell: a desktop sidebar (md+) and a mobile hamburger sheet,\n * with an active-link-aware nav driven entirely by the `nav` prop. Bring your own\n * router (`react-router-dom`) and Tailwind theme.\n */\nexport function CmsLayout({ children, nav, brand = 'CMS', headerRight }: CmsLayoutProps) {\n  const [open, setOpen] = useState(false)\n  return (\n    <div className=\"flex h-screen flex-col md:flex-row\">\n      {/* Mobile top bar (hidden at md+) */}\n      <header className=\"flex items-center gap-2 border-b p-3 md:hidden\">\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" aria-label=\"Open menu\" className=\"h-11 w-11\">\n              <Menu className=\"h-5 w-5\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" className=\"p-0\">\n            <div className=\"p-4 font-semibold text-lg\">{brand}</div>\n            <Separator />\n            <nav className=\"flex flex-col gap-1 p-2\">\n              <NavList nav={nav} onNavigate={() => setOpen(false)} />\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <span className=\"font-semibold\">{brand}</span>\n      </header>\n\n      {/* Desktop sidebar (hidden below md) */}\n      <aside className=\"hidden md:flex w-56 border-r bg-muted/30 flex-col\">\n        <div className=\"p-4 font-semibold text-lg\">{brand}</div>\n        <Separator />\n        <nav className=\"flex flex-1 flex-col gap-1 p-2\">\n          <NavList nav={nav} />\n        </nav>\n      </aside>\n\n      <main className=\"flex-1 overflow-auto\">\n        {headerRight && (\n          <div className=\"hidden md:flex items-center justify-end border-b p-3\">{headerRight}</div>\n        )}\n        <div className=\"p-4 md:p-6\">{children}</div>\n      </main>\n    </div>\n  )\n}\n","import { useEffect } from 'react'\nimport type { ReactNode } from 'react'\nimport { useAuth } from '@liam-public/browser-react-auth'\n\nfunction DefaultFallback({ message }: { message: string }) {\n  return (\n    <div className=\"flex h-screen items-center justify-center\">\n      <p className=\"text-sm text-muted-foreground\">{message}</p>\n    </div>\n  )\n}\n\nexport interface RequireAuthProps {\n  readonly children: ReactNode\n  /** Rendered while loading or when unauthenticated (defaults to a \"Redirecting…\" line). */\n  readonly fallback?: ReactNode\n  /**\n   * Called once when the user is confirmed unauthenticated — e.g. trigger the OIDC\n   * redirect from `@liam-workspace/auth-client`, or navigate to `/login`.\n   */\n  readonly onUnauthenticated?: () => void\n}\n\n/**\n * Gate that renders `children` only for an authenticated user. Wraps `useAuth()` from\n * `@liam-public/browser-react-auth`, filling the route-guard gap that package leaves open.\n */\nexport function RequireAuth({ children, fallback, onUnauthenticated }: RequireAuthProps) {\n  const { isAuthenticated, isLoading } = useAuth()\n\n  useEffect(() => {\n    if (!isLoading && !isAuthenticated) onUnauthenticated?.()\n  }, [isLoading, isAuthenticated, onUnauthenticated])\n\n  if (isLoading) return <>{fallback ?? <DefaultFallback message=\"Loading…\" />}</>\n  if (!isAuthenticated) return <>{fallback ?? <DefaultFallback message=\"Redirecting to sign in…\" />}</>\n  return <>{children}</>\n}\n\nexport interface RequireRoleProps {\n  readonly children: ReactNode\n  /** The user is allowed if they hold ANY of these roles. */\n  readonly anyOf: readonly string[]\n  /** Extract the user's roles from the auth `user` object (shape is app-specific). */\n  readonly getRoles: (user: unknown) => readonly string[]\n  /** Rendered when the user lacks the required role(s). */\n  readonly fallback?: ReactNode\n}\n\n/** Gate that additionally requires the authenticated user to hold one of `anyOf` roles. */\nexport function RequireRole({ children, anyOf, getRoles, fallback }: RequireRoleProps) {\n  const { user, isLoading, isAuthenticated } = useAuth()\n  if (isLoading) return <>{fallback ?? <DefaultFallback message=\"Loading…\" />}</>\n  if (!isAuthenticated) return <>{fallback ?? <DefaultFallback message=\"Not signed in.\" />}</>\n  const roles = getRoles(user)\n  const allowed = anyOf.some((r) => roles.includes(r))\n  if (!allowed) return <>{fallback ?? <DefaultFallback message=\"You don't have access to this page.\" />}</>\n  return <>{children}</>\n}\n","import type { ReactNode } from 'react'\n\nexport interface PageHeaderProps {\n  readonly title: string\n  readonly action?: ReactNode\n}\n\n/** A page title row with an optional right-aligned action (e.g. a \"New\" button). */\nexport function PageHeader({ title, action }: PageHeaderProps) {\n  return (\n    <div className=\"flex items-center justify-between\">\n      <h1 className=\"text-2xl font-bold\">{title}</h1>\n      {action}\n    </div>\n  )\n}\n\nexport interface PageStackProps {\n  readonly children: ReactNode\n  readonly spacing?: 4 | 6\n}\n\n/** Vertical spacing container for page sections. */\nexport function PageStack({ children, spacing = 6 }: PageStackProps) {\n  return <div className={spacing === 4 ? 'space-y-4' : 'space-y-6'}>{children}</div>\n}\n","import type { ReactNode } from 'react'\n\n/** Renders children only at md and up (desktop table view). */\nexport function DesktopOnly({ children }: { children: ReactNode }) {\n  return <div className=\"hidden md:block\">{children}</div>\n}\n\n/** Renders children only below md (stacked-card view). */\nexport function MobileCards({ children }: { children: ReactNode }) {\n  return <div className=\"flex flex-col gap-3 md:hidden\">{children}</div>\n}\n\n/** A single stacked card used inside MobileCards. */\nexport function MobileCard({ children }: { children: ReactNode }) {\n  return <div className=\"rounded-lg border bg-card p-3 text-sm\">{children}</div>\n}\n\n/** A label/value line inside a MobileCard. */\nexport function MobileField({ label, children }: { label: string; children: ReactNode }) {\n  return (\n    <div className=\"flex items-start justify-between gap-3 py-0.5\">\n      <span className=\"text-muted-foreground\">{label}</span>\n      <span className=\"text-right font-medium break-words\">{children}</span>\n    </div>\n  )\n}\n","import { Loader2 } from 'lucide-react'\nimport {\n  Button,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@liam-public/browser-react-ui'\n\nexport interface LoadingSpinnerProps {\n  readonly size?: 'md' | 'lg'\n}\n\n/** Centered spinner for loading states. */\nexport function LoadingSpinner({ size = 'md' }: LoadingSpinnerProps) {\n  const padding = size === 'lg' ? 'py-16' : 'py-8'\n  const icon = size === 'lg' ? 'h-8 w-8' : 'h-6 w-6'\n  return (\n    <div className={`flex items-center justify-center ${padding}`}>\n      <Loader2 className={`${icon} animate-spin text-muted-foreground`} />\n    </div>\n  )\n}\n\nexport interface ConfirmDialogProps {\n  readonly open: boolean\n  readonly onOpenChange: (open: boolean) => void\n  readonly title: string\n  readonly description: string\n  readonly onConfirm: () => void\n  readonly loading?: boolean\n  readonly error?: string | null\n  /** Confirm-button label (defaults to \"Confirm\"). */\n  readonly confirmLabel?: string\n  /** Set true for destructive actions (red confirm button). */\n  readonly destructive?: boolean\n}\n\n/** A modal confirm dialog with loading + error states. */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  onConfirm,\n  loading,\n  error,\n  confirmLabel = 'Confirm',\n  destructive,\n}: ConfirmDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        {error && <p className=\"text-sm text-destructive\">{error}</p>}\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)} disabled={loading}>\n            Cancel\n          </Button>\n          <Button\n            variant={destructive ? 'destructive' : 'default'}\n            onClick={onConfirm}\n            disabled={loading}\n          >\n            {loading && <Loader2 className=\"h-4 w-4 animate-spin\" />}\n            {confirmLabel}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":"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","names":["Fragment","jsx","jsx","jsxs","jsx","jsxs","Button","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@liam-public/browser-react-cms",
+  "version": "0.1.0",
+  "description": "Reusable CMS/admin chrome: responsive app-shell, auth route-guards, and page primitives, on Tailwind v4 + Radix.",
+  "type": "module",
+  "liamCompatibility": {
+    "runtime": [
+      "browser"
+    ],
+    "framework": [
+      "react"
+    ]
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./theme.css"
+  },
+  "files": [
+    "dist",
+    "theme.css",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.563.0",
+    "@liam-public/browser-react-auth": "0.1.0",
+    "@liam-public/browser-react-ui": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "jsdom": "^27.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --sourcemap",
+    "clean": "rm -rf dist",
+    "test": "vitest run --environment jsdom",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/theme.css

@@ -0,0 +1,32 @@
+@import 'tailwindcss';
+
+@theme inline {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.145 0 0);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.145 0 0);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.145 0 0);
+  --color-primary: oklch(0.205 0 0);
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-secondary: oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+  --color-muted: oklch(0.97 0 0);
+  --color-muted-foreground: oklch(0.556 0 0);
+  --color-accent: oklch(0.97 0 0);
+  --color-accent-foreground: oklch(0.205 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.577 0.245 27.325);
+  --color-border: oklch(0.922 0 0);
+  --color-input: oklch(0.922 0 0);
+  --color-ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+  --color-sidebar: oklch(0.985 0 0);
+  --color-sidebar-foreground: oklch(0.145 0 0);
+  --color-sidebar-primary: oklch(0.205 0 0);
+  --color-sidebar-primary-foreground: oklch(0.985 0 0);
+  --color-sidebar-accent: oklch(0.97 0 0);
+  --color-sidebar-accent-foreground: oklch(0.205 0 0);
+  --color-sidebar-border: oklch(0.922 0 0);
+  --color-sidebar-ring: oklch(0.708 0 0);
+}