panel-frame-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zakai Hamilton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,82 @@
-# Temporary Holding Version
+# Panel Frame
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Panel Frame is a React UI package for the shared dashboards and account screens in the Visitoring, Perminister, Nanogres, and Postparticle applications.
+
+The package standardizes structure and interaction patterns while letting each application provide its own brand, route links, account actions, and semantic theme colors.
+
+## Install
+
+```sh
+pnpm add panel-frame-ui
+```
+
+Import the stylesheet once from the application's root stylesheet or root layout:
+
+```css
+@import "panel-frame-ui/styles.css";
+```
+
+Then map the app's existing theme values to the `--pf-*` variables. At minimum, set `--pf-background`, `--pf-surface`, `--pf-text`, `--pf-muted`, `--pf-border`, `--pf-accent`, and `--pf-accent-contrast`. The package has sensible defaults for other semantic colors.
+
+## Dashboard shell
+
+The shell owns the left sidebar, mobile drawer, toolbar, and right-hand page area. Pass app-owned navigation links and controls as slots so Next.js `Link`, authorization rules, and product-specific actions stay in the application.
+
+```tsx
+import { DashboardShell } from "panel-frame-ui";
+
+<DashboardShell
+  brand={
+    <a className="pf-brand" href="/dashboard">
+      Product
+    </a>
+  }
+  navigation={
+    <a className="pf-sidebar-link" href="/dashboard" aria-current="page">
+      Overview
+    </a>
+  }
+  toolbar={<AccountActions />}
+>
+  <PageContent />
+</DashboardShell>;
+```
+
+Use `pf-sidebar-group`, `pf-sidebar-group-label`, and `pf-sidebar-link` for a consistent navigation hierarchy and active state.
+Set `contentAsMain={false}` when the page content already provides its own `<main>` landmark.
+
+## Authentication shell
+
+```tsx
+import { AuthCard, AuthShell } from "panel-frame-ui";
+
+<AuthShell brand={<Brand />} aside={<AuthIntro />} utility={<ThemePicker />}>
+  <AuthCard>
+    <LoginForm />
+  </AuthCard>
+</AuthShell>;
+```
+
+The app owns all form actions, identity-provider links, and recovery URLs. Panel Frame only provides the common frame and visual primitives.
+
+## Components
+
+The package exports `DashboardShell`, `AuthShell`, `AuthCard`, `Button`, `Card`, `Badge`, `Alert`, `Field`, `TextField`, `SelectField`, `EmptyState`, `Skeleton`, `PageHeader`, and `ThemeSelect`.
+
+React and React DOM are peer dependencies. The package does not depend on Next.js; pass framework links as React children in the app-owned navigation.
+
+## Repository checks
+
+Run `pnpm health` to build the package, lint and format-check the source, run component tests, and check type safety, unused code, duplication, and package exports. GitHub Actions runs those checks on pushes and pull requests, along with OSV-Scanner for dependency vulnerabilities, Gitleaks for secrets, and actionlint for workflow syntax.
+
+The package is ESM-only. Are The Types Wrong? checks the JavaScript entry point; Publint checks the stylesheet export and published files.
+
+## Releases
+
+This repository uses Changesets. Add a changeset with `pnpm changeset` when a change is ready for release. Merging it to `main` opens or updates a version pull request. Merging that version pull request publishes the package and creates a GitHub release. Versioning permissions and npm publishing permissions are separated into different workflow jobs.
+
+The npm package is published publicly with npm trusted publishing from `.github/workflows/release.yml`. For the first publish, use Node 22.14 or later and npm 11.5.1 or later, run `pnpm install --frozen-lockfile` and `pnpm health`, then publish version `0.1.0` with `npm publish --access public` from an npm account you control. Then, in the package's npm settings, add a GitHub Actions trusted publisher for user `zakaihamilton`, repository `panel-frame-ui`, and workflow `release.yml`, and allow direct `npm publish`. Enable GitHub Actions to create pull requests in the repository settings. GitHub may ask a repository writer to approve the health workflow on the automatically created version pull request before its checks run.
+
+## License
+
+Panel Frame UI is available under the MIT License. See [LICENSE](./LICENSE).

package/dist/auth-shell.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type AuthShellProps = {
+    brand: ReactNode;
+    aside: ReactNode;
+    utility?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+};
+export declare function AuthShell({ brand, aside, utility, children, footer, }: AuthShellProps): import("react").JSX.Element;
+export declare function AuthCard({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+//# sourceMappingURL=auth-shell.d.ts.map

package/dist/auth-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-shell.d.ts","sourceRoot":"","sources":["../src/auth-shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,GACP,EAAE,cAAc,+BAgBhB;AAED,wBAAgB,QAAQ,CAAC,EACvB,SAAc,EACd,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,+BAE7B"}

package/dist/auth-shell.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function AuthShell({ brand, aside, utility, children, footer, }) {
+    return (_jsx("main", { className: "pf-auth-shell", children: _jsxs("div", { className: "pf-auth-layout", children: [_jsxs("aside", { className: "pf-auth-aside", children: [_jsx("div", { className: "pf-auth-brand", children: brand }), _jsx("div", { className: "pf-auth-aside-content", children: aside }), footer ? _jsx("div", { className: "pf-auth-aside-footer", children: footer }) : null] }), _jsxs("section", { "aria-label": "Account access", className: "pf-auth-main", children: [utility ? _jsx("div", { className: "pf-auth-utility", children: utility }) : null, _jsx("div", { className: "pf-auth-content", children: children })] })] }) }));
+}
+export function AuthCard({ className = "", ...props }) {
+    return _jsx("section", { className: `pf-auth-card ${className}`.trim(), ...props });
+}

package/dist/dashboard-shell.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export type DashboardShellProps = {
+    brand: ReactNode;
+    navigation: ReactNode;
+    sidebarContext?: ReactNode;
+    sidebarFooter?: ReactNode;
+    toolbar?: ReactNode;
+    sidebarVisible?: boolean;
+    contentAsMain?: boolean;
+    children: ReactNode;
+};
+export declare function DashboardShell({ brand, navigation, sidebarContext, sidebarFooter, toolbar, sidebarVisible, contentAsMain, children, }: DashboardShellProps): import("react").JSX.Element;
+//# sourceMappingURL=dashboard-shell.d.ts.map

package/dist/dashboard-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-shell.d.ts","sourceRoot":"","sources":["../src/dashboard-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,UAAU,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAKF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAqB,EACrB,aAAoB,EACpB,QAAQ,GACT,EAAE,mBAAmB,+BA0JrB"}

package/dist/dashboard-shell.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+const focusableSelector = 'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+export function DashboardShell({ brand, navigation, sidebarContext, sidebarFooter, toolbar, sidebarVisible = true, contentAsMain = true, children, }) {
+    const [isMobile, setIsMobile] = useState(false);
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const sidebarRef = useRef(null);
+    const triggerRef = useRef(null);
+    useEffect(() => {
+        const media = window.matchMedia("(max-width: 780px)");
+        const update = () => {
+            setIsMobile(media.matches);
+            if (!media.matches)
+                setMobileOpen(false);
+        };
+        update();
+        media.addEventListener("change", update);
+        return () => media.removeEventListener("change", update);
+    }, []);
+    useEffect(() => {
+        if (!isMobile || !mobileOpen)
+            return;
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        const focusable = () => Array.from(sidebarRef.current?.querySelectorAll(focusableSelector) ??
+            []).filter((element) => !element.hasAttribute("hidden"));
+        focusable()[0]?.focus();
+        const onKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setMobileOpen(false);
+                triggerRef.current?.focus();
+                return;
+            }
+            if (event.key !== "Tab")
+                return;
+            const elements = focusable();
+            const first = elements[0];
+            const last = elements.at(-1);
+            if (!first || !last) {
+                event.preventDefault();
+            }
+            else if (event.shiftKey && document.activeElement === first) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && document.activeElement === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [isMobile, mobileOpen]);
+    function closeAfterNavigation(event) {
+        if (isMobile &&
+            event.target instanceof Element &&
+            event.target.closest("a[href]")) {
+            setMobileOpen(false);
+        }
+    }
+    function closeDrawer() {
+        setMobileOpen(false);
+        triggerRef.current?.focus();
+    }
+    return (_jsxs("div", { className: "pf-dashboard-shell", "data-mobile-open": mobileOpen ? "true" : "false", "data-sidebar-visible": sidebarVisible ? "true" : "false", children: [_jsx("a", { className: "pf-skip-link", href: "#pf-main-content", children: "Skip to main content" }), _jsxs("aside", { ref: sidebarRef, "aria-hidden": (isMobile && !mobileOpen) || (!isMobile && !sidebarVisible)
+                    ? true
+                    : undefined, "aria-label": "Primary navigation", "aria-modal": isMobile && mobileOpen ? true : undefined, className: "pf-sidebar", id: "pf-dashboard-sidebar", inert: (isMobile && !mobileOpen) || (!isMobile && !sidebarVisible), onClick: closeAfterNavigation, role: isMobile && mobileOpen ? "dialog" : undefined, tabIndex: -1, children: [_jsx("div", { className: "pf-sidebar-brand", children: brand }), sidebarContext ? (_jsx("div", { className: "pf-sidebar-context", children: sidebarContext })) : null, _jsx("div", { className: "pf-sidebar-navigation", children: navigation }), _jsx("div", { className: "pf-sidebar-spacer" }), sidebarFooter ? (_jsx("div", { className: "pf-sidebar-footer", children: sidebarFooter })) : null] }), isMobile && mobileOpen ? (_jsx("button", { "aria-label": "Close dashboard navigation", className: "pf-sidebar-backdrop", onClick: closeDrawer, tabIndex: -1, type: "button" })) : null, _jsxs("div", { className: "pf-dashboard-main", children: [_jsxs("header", { className: "pf-dashboard-toolbar", children: [_jsx("button", { "aria-controls": "pf-dashboard-sidebar", "aria-expanded": mobileOpen, "aria-label": mobileOpen ? "Close navigation" : "Open navigation", className: "pf-mobile-menu-button", onClick: () => setMobileOpen((open) => !open), ref: triggerRef, type: "button", children: _jsx("span", { "aria-hidden": "true", children: "\u2630" }) }), toolbar ? _jsx("div", { className: "pf-toolbar-content", children: toolbar }) : null] }), contentAsMain ? (_jsx("main", { className: "pf-dashboard-content", id: "pf-main-content", tabIndex: -1, children: children })) : (_jsx("div", { className: "pf-dashboard-content", id: "pf-main-content", tabIndex: -1, children: children }))] })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { AuthCard, AuthShell, type AuthShellProps } from "./auth-shell.js";
+export { DashboardShell, type DashboardShellProps } from "./dashboard-shell.js";
+export { Alert, Badge, Button, Card, EmptyState, Field, PageHeader, SelectField, Skeleton, TextField, type ButtonVariant, } from "./primitives.js";
+export { ThemeSelect, type ThemeChoice } from "./theme-select.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,KAAK,aAAa,GACnB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { AuthCard, AuthShell } from "./auth-shell.js";
+export { DashboardShell } from "./dashboard-shell.js";
+export { Alert, Badge, Button, Card, EmptyState, Field, PageHeader, SelectField, Skeleton, TextField, } from "./primitives.js";
+export { ThemeSelect } from "./theme-select.js";

package/dist/primitives.d.ts

@@ -0,0 +1,49 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type InputHTMLAttributes, type ReactNode, type SelectHTMLAttributes } from "react";
+export type ButtonVariant = "primary" | "secondary" | "quiet" | "danger";
+export declare function Button({ variant, className, type, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: ButtonVariant;
+}): import("react").JSX.Element;
+export declare function Card({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;
+export declare function Badge({ tone, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    tone?: "neutral" | "success" | "warning" | "danger" | "accent";
+}): import("react").JSX.Element;
+export declare function Alert({ tone, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+    tone?: "info" | "success" | "warning" | "error";
+}): import("react").JSX.Element;
+export declare function Field({ label, hint, error, id, children, }: {
+    label: string;
+    hint?: string;
+    error?: string;
+    id?: string;
+    children: (props: {
+        id: string;
+        "aria-describedby"?: string;
+        "aria-invalid"?: true;
+    }) => ReactNode;
+}): import("react").JSX.Element;
+export declare function TextField({ label, hint, error, id, ...inputProps }: Omit<InputHTMLAttributes<HTMLInputElement>, "id"> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    id?: string;
+}): import("react").JSX.Element;
+export declare function SelectField({ label, hint, error, id, children, ...selectProps }: Omit<SelectHTMLAttributes<HTMLSelectElement>, "id"> & {
+    label: string;
+    hint?: string;
+    error?: string;
+    id?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function EmptyState({ title, description, action, }: {
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function PageHeader({ eyebrow, title, description, actions, }: {
+    eyebrow?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../src/primitives.tsx"],"names":[],"mappings":"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"}

package/dist/primitives.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+export function Button({ variant = "primary", className = "", type = "button", ...props }) {
+    return (_jsx("button", { className: `pf-button pf-button-${variant} ${className}`.trim(), type: type, ...props }));
+}
+export function Card({ className = "", ...props }) {
+    return _jsx("section", { className: `pf-card ${className}`.trim(), ...props });
+}
+export function Badge({ tone = "neutral", className = "", ...props }) {
+    return (_jsx("span", { className: `pf-badge pf-badge-${tone} ${className}`.trim(), ...props }));
+}
+export function Alert({ tone = "info", className = "", ...props }) {
+    return (_jsx("div", { className: `pf-alert pf-alert-${tone} ${className}`.trim(), role: tone === "error" ? "alert" : "status", ...props }));
+}
+export function Field({ label, hint, error, id, children, }) {
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    const hintId = hint ? `${fieldId}-hint` : undefined;
+    const errorId = error ? `${fieldId}-error` : undefined;
+    const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    return (_jsxs("label", { className: "pf-field", htmlFor: fieldId, children: [_jsx("span", { className: "pf-field-label", children: label }), children({
+                id: fieldId,
+                "aria-describedby": describedBy,
+                "aria-invalid": error ? true : undefined,
+            }), hint ? (_jsx("span", { className: "pf-field-hint", id: hintId, children: hint })) : null, error ? (_jsx("span", { className: "pf-field-error", id: errorId, children: error })) : null] }));
+}
+export function TextField({ label, hint, error, id, ...inputProps }) {
+    return (_jsx(Field, { label: label, hint: hint, error: error, id: id, children: (fieldProps) => (_jsx("input", { className: "pf-input", ...fieldProps, ...inputProps })) }));
+}
+export function SelectField({ label, hint, error, id, children, ...selectProps }) {
+    return (_jsx(Field, { label: label, hint: hint, error: error, id: id, children: (fieldProps) => (_jsx("select", { className: "pf-input pf-select", ...fieldProps, ...selectProps, children: children })) }));
+}
+export function EmptyState({ title, description, action, }) {
+    return (_jsxs("section", { className: "pf-empty-state", children: [_jsx("h2", { children: title }), description ? (_jsx("div", { className: "pf-empty-description", children: description })) : null, action ? _jsx("div", { className: "pf-empty-action", children: action }) : null] }));
+}
+export function Skeleton({ className = "", ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", className: `pf-skeleton ${className}`.trim(), ...props }));
+}
+export function PageHeader({ eyebrow, title, description, actions, }) {
+    return (_jsxs("header", { className: "pf-page-header", children: [_jsxs("div", { className: "pf-page-heading", children: [eyebrow ? _jsx("p", { className: "pf-page-eyebrow", children: eyebrow }) : null, _jsx("h1", { children: title }), description ? (_jsx("p", { className: "pf-page-description", children: description })) : null] }), actions ? _jsx("div", { className: "pf-page-actions", children: actions }) : null] }));
+}

package/dist/theme-select.d.ts

@@ -0,0 +1,7 @@
+import type { SelectHTMLAttributes } from "react";
+export type ThemeChoice = "system" | "light" | "dark";
+export declare function ThemeSelect({ value, onChange, className, ...props }: Omit<SelectHTMLAttributes<HTMLSelectElement>, "value" | "onChange"> & {
+    value: ThemeChoice;
+    onChange: (value: ThemeChoice) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=theme-select.d.ts.map

package/dist/theme-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-select.d.ts","sourceRoot":"","sources":["../src/theme-select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEtD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,SAAc,EACd,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACvE,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC,+BAiBA"}

package/dist/theme-select.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ThemeSelect({ value, onChange, className = "", ...props }) {
+    return (_jsxs("label", { className: `pf-theme-select ${className}`.trim(), children: [_jsx("span", { children: "Theme" }), _jsxs("select", { "aria-label": "Color theme", className: "pf-input", onChange: (event) => onChange(event.target.value), value: value, ...props, children: [_jsx("option", { value: "system", children: "System" }), _jsx("option", { value: "light", children: "Light" }), _jsx("option", { value: "dark", children: "Dark" })] })] }));
+}

package/package.json

@@ -1,6 +1,82 @@
 {
   "name": "panel-frame-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Shared dashboard and account UI for Panel Frame projects",
+  "license": "MIT",
+  "engines": {
+    "node": ">=22.14.0"
+  },
+  "packageManager": "pnpm@12.16.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zakaihamilton/panel-frame-ui.git"
+  },
+  "homepage": "https://github.com/zakaihamilton/panel-frame-ui#readme",
+  "bugs": {
+    "url": "https://github.com/zakaihamilton/panel-frame-ui/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./styles.css"
+  ],
+  "files": [
+    "dist",
+    "styles.css",
+    "styles.css.d.ts",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": {
+      "types": "./styles.css.d.ts",
+      "default": "./styles.css"
+    }
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "prepack": "pnpm run build",
+    "health": "pnpm run build && pnpm run lint && pnpm run format:check && pnpm run test && repnix check",
+    "health:dead-code": "knip",
+    "health:duplication": "jscpd src",
+    "health:package:publint": "publint",
+    "health:package:types": "attw --pack ."
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0 <20.0.0",
+    "react-dom": ">=19.0.0 <20.0.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@changesets/cli": "^3.0.3",
+    "@eslint/js": "^9.39.5",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "globals": "^17.14.0",
+    "jscpd": "^5.4.3",
+    "jsdom": "^31.0.0",
+    "knip": "^6.44.2",
+    "prettier": "^3.9.10",
+    "publint": "^0.3.25",
+    "repnix": "^1.1.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.72.2",
+    "vitest": "^5.1.0"
+  }
+}

package/styles.css

@@ -0,0 +1,782 @@
+:root {
+  --pf-background: #f5f7f6;
+  --pf-surface: #ffffff;
+  --pf-surface-raised: #ffffff;
+  --pf-text: #202b28;
+  --pf-muted: #65716d;
+  --pf-border: #dfe6e2;
+  --pf-accent: #236b55;
+  --pf-accent-contrast: #ffffff;
+  --pf-danger: #a44040;
+  --pf-danger-surface: #fff0ed;
+  --pf-success: #276147;
+  --pf-success-surface: #e7f3eb;
+  --pf-warning: #795920;
+  --pf-warning-surface: #fbf1d8;
+  --pf-sidebar-width: 256px;
+  --pf-content-width: 1440px;
+  --pf-radius-sm: 7px;
+  --pf-radius-md: 11px;
+  --pf-radius-lg: 16px;
+  --pf-shadow: 0 14px 38px rgb(23 43 34 / 8%);
+  --pf-focus: var(--pf-accent);
+  --pf-motion-fast: 150ms;
+  --pf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.pf-dashboard-shell,
+.pf-dashboard-shell *,
+.pf-auth-shell,
+.pf-auth-shell *,
+.pf-component {
+  box-sizing: border-box;
+}
+
+.pf-dashboard-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: var(--pf-sidebar-width) minmax(0, 1fr);
+  color: var(--pf-text);
+  background: var(--pf-background);
+  font-family: var(--pf-font, inherit);
+}
+
+.pf-dashboard-shell[data-sidebar-visible="false"] {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+.pf-dashboard-shell[data-sidebar-visible="false"] .pf-sidebar {
+  width: 0;
+  padding-right: 0;
+  padding-left: 0;
+  overflow: hidden;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.pf-skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 12px;
+  left: 12px;
+  padding: 10px 14px;
+  border-radius: var(--pf-radius-sm);
+  color: var(--pf-accent-contrast);
+  background: var(--pf-accent);
+  transform: translateY(-160%);
+}
+
+.pf-skip-link:focus {
+  transform: translateY(0);
+}
+
+.pf-sidebar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  width: var(--pf-sidebar-width);
+  height: 100vh;
+  min-height: 520px;
+  flex-direction: column;
+  padding: 20px 14px 14px;
+  overflow-y: auto;
+  border-right: 1px solid var(--pf-border);
+  color: var(--pf-text);
+  background: var(--pf-surface);
+}
+
+.pf-sidebar-brand {
+  display: flex;
+  min-height: 46px;
+  align-items: center;
+  padding: 0 10px 17px;
+}
+
+.pf-sidebar-brand > a,
+.pf-brand {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+  color: inherit;
+  font-size: 17px;
+  font-weight: 720;
+  letter-spacing: -0.035em;
+  text-decoration: none;
+}
+
+.pf-sidebar-context {
+  margin: 0 0 16px;
+}
+
+.pf-visitoring-switchers {
+  display: grid;
+  gap: 8px;
+}
+
+.pf-visitoring-switchers > :where(a, form, div) {
+  min-width: 0;
+}
+
+.pf-sidebar-navigation {
+  display: grid;
+  align-content: start;
+  gap: 4px;
+}
+
+.pf-sidebar-group {
+  display: grid;
+  gap: 4px;
+  margin: 12px 0 8px;
+}
+
+.pf-sidebar-group-label {
+  margin: 0 10px 5px;
+  color: var(--pf-muted);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.11em;
+  text-transform: uppercase;
+}
+
+.pf-sidebar-link {
+  display: flex;
+  min-height: 40px;
+  align-items: center;
+  gap: 11px;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--pf-radius-sm);
+  color: var(--pf-muted);
+  font-size: 13px;
+  font-weight: 590;
+  line-height: 1.35;
+  text-decoration: none;
+  transition:
+    color var(--pf-motion-fast) ease,
+    background-color var(--pf-motion-fast) ease,
+    border-color var(--pf-motion-fast) ease;
+}
+
+.pf-sidebar-link:hover {
+  color: var(--pf-text);
+  background: color-mix(in srgb, var(--pf-accent) 7%, var(--pf-surface));
+}
+
+.pf-sidebar-link[aria-current="page"],
+.pf-sidebar-link[data-active="true"] {
+  border-color: color-mix(in srgb, var(--pf-accent) 18%, var(--pf-border));
+  color: var(--pf-accent);
+  background: color-mix(in srgb, var(--pf-accent) 10%, var(--pf-surface));
+  font-weight: 700;
+}
+
+.pf-sidebar-link :where(svg, [data-icon]) {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+}
+
+.pf-sidebar-spacer {
+  flex: 1 0 18px;
+}
+
+.pf-sidebar-footer {
+  display: grid;
+  gap: 10px;
+  padding: 12px 8px 2px;
+  border-top: 1px solid var(--pf-border);
+}
+
+.pf-dashboard-main {
+  min-width: 0;
+  min-height: 100vh;
+}
+
+.pf-dashboard-toolbar {
+  position: sticky;
+  z-index: 20;
+  top: 0;
+  display: flex;
+  min-height: 58px;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 8px clamp(18px, 3vw, 42px);
+  border-bottom: 1px solid var(--pf-border);
+  background: color-mix(in srgb, var(--pf-background) 92%, transparent);
+  backdrop-filter: blur(14px);
+}
+
+.pf-toolbar-content {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 10px;
+}
+
+.pf-toolbar-title {
+  margin-right: auto;
+  color: var(--pf-muted);
+  font-size: 13px;
+  font-weight: 650;
+}
+
+.pf-account-label {
+  overflow: hidden;
+  color: var(--pf-muted);
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-sign-out {
+  width: 100%;
+  border: 0;
+  font: inherit;
+  text-align: left;
+  background: transparent;
+  cursor: pointer;
+}
+
+.pf-mobile-menu-button {
+  display: none;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-sm);
+  color: var(--pf-text);
+  background: var(--pf-surface);
+  font: inherit;
+  cursor: pointer;
+}
+
+.pf-dashboard-content {
+  width: min(100%, var(--pf-content-width));
+  min-width: 0;
+  margin: 0 auto;
+  padding: clamp(20px, 3vw, 42px);
+}
+
+.pf-dashboard-shell
+  :where(a, button, input, select, textarea, [tabindex]):focus-visible,
+.pf-auth-shell
+  :where(a, button, input, select, textarea, [tabindex]):focus-visible,
+.pf-component
+  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--pf-focus) 72%, transparent);
+  outline-offset: 3px;
+}
+
+.pf-sidebar-backdrop {
+  display: none;
+}
+
+.pf-auth-shell {
+  display: grid;
+  min-height: 100vh;
+  place-items: stretch center;
+  padding: clamp(16px, 4vw, 56px);
+  color: var(--pf-text);
+  background: var(--pf-background);
+  font-family: var(--pf-font, inherit);
+}
+
+.pf-auth-layout {
+  display: grid;
+  width: min(1120px, 100%);
+  min-height: min(740px, calc(100vh - 2 * clamp(16px, 4vw, 56px)));
+  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.84fr);
+  overflow: hidden;
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-lg);
+  background: var(--pf-surface);
+  box-shadow: var(--pf-shadow);
+}
+
+.pf-auth-aside {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  padding: clamp(28px, 5vw, 58px);
+  background: color-mix(in srgb, var(--pf-accent) 7%, var(--pf-background));
+}
+
+.pf-auth-brand {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  font-size: 18px;
+  font-weight: 740;
+}
+
+.pf-auth-aside-content {
+  display: grid;
+  flex: 1;
+  align-content: center;
+  gap: 16px;
+  padding: 38px 0;
+}
+
+.pf-auth-aside-content h1,
+.pf-auth-aside-content h2 {
+  max-width: 540px;
+  margin: 0;
+  font-size: clamp(2rem, 4vw, 3.5rem);
+  line-height: 1.05;
+  letter-spacing: -0.055em;
+}
+
+.pf-auth-aside-content p {
+  max-width: 490px;
+  margin: 0;
+  color: var(--pf-muted);
+  font-size: 16px;
+  line-height: 1.7;
+}
+
+.pf-auth-aside-footer {
+  color: var(--pf-muted);
+  font-size: 13px;
+}
+
+.pf-auth-main {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+  padding: clamp(22px, 4vw, 52px);
+}
+
+.pf-auth-utility {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+}
+
+.pf-auth-content {
+  width: min(100%, 460px);
+  margin: 0 auto;
+}
+
+.pf-auth-card {
+  padding: clamp(22px, 3vw, 34px);
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-md);
+  color: var(--pf-text);
+  background: var(--pf-surface-raised);
+  box-shadow: var(--pf-shadow);
+}
+
+.pf-auth-card > :first-child {
+  margin-top: 0;
+}
+
+.pf-auth-card > :last-child {
+  margin-bottom: 0;
+}
+
+.pf-button {
+  display: inline-flex;
+  min-height: 40px;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  padding: 9px 15px;
+  border: 1px solid transparent;
+  border-radius: var(--pf-radius-sm);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 680;
+  line-height: 1.2;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color var(--pf-motion-fast) ease,
+    border-color var(--pf-motion-fast) ease,
+    color var(--pf-motion-fast) ease,
+    transform var(--pf-motion-fast) ease;
+}
+
+.pf-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pf-button-primary {
+  color: var(--pf-accent-contrast);
+  background: var(--pf-accent);
+}
+
+.pf-button-primary:hover:not(:disabled) {
+  filter: brightness(0.94);
+}
+
+.pf-button-secondary {
+  border-color: var(--pf-border);
+  color: var(--pf-text);
+  background: var(--pf-surface);
+}
+
+.pf-button-quiet {
+  border-color: color-mix(in srgb, var(--pf-accent) 20%, var(--pf-border));
+  color: var(--pf-accent);
+  background: color-mix(in srgb, var(--pf-accent) 8%, var(--pf-surface));
+}
+
+.pf-button-danger {
+  border-color: color-mix(in srgb, var(--pf-danger) 24%, var(--pf-border));
+  color: var(--pf-danger);
+  background: var(--pf-danger-surface);
+}
+
+.pf-card {
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-md);
+  background: var(--pf-surface);
+}
+
+.pf-badge {
+  display: inline-flex;
+  min-height: 23px;
+  align-items: center;
+  padding: 3px 8px;
+  border: 1px solid var(--pf-border);
+  border-radius: 999px;
+  color: var(--pf-muted);
+  background: var(--pf-surface);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.pf-badge-success,
+.pf-alert-success {
+  border-color: color-mix(in srgb, var(--pf-success) 22%, var(--pf-border));
+  color: var(--pf-success);
+  background: var(--pf-success-surface);
+}
+
+.pf-badge-warning,
+.pf-alert-warning {
+  border-color: color-mix(in srgb, var(--pf-warning) 22%, var(--pf-border));
+  color: var(--pf-warning);
+  background: var(--pf-warning-surface);
+}
+
+.pf-badge-danger,
+.pf-alert-error {
+  border-color: color-mix(in srgb, var(--pf-danger) 24%, var(--pf-border));
+  color: var(--pf-danger);
+  background: var(--pf-danger-surface);
+}
+
+.pf-badge-accent {
+  border-color: color-mix(in srgb, var(--pf-accent) 20%, var(--pf-border));
+  color: var(--pf-accent);
+  background: color-mix(in srgb, var(--pf-accent) 8%, var(--pf-surface));
+}
+
+.pf-alert {
+  padding: 12px 14px;
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-sm);
+  color: var(--pf-text);
+  background: var(--pf-surface);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.pf-alert-info {
+  border-color: color-mix(in srgb, var(--pf-accent) 20%, var(--pf-border));
+  color: var(--pf-accent);
+  background: color-mix(in srgb, var(--pf-accent) 7%, var(--pf-surface));
+}
+
+.pf-field {
+  display: grid;
+  gap: 7px;
+  color: var(--pf-text);
+  font-size: 13px;
+  font-weight: 620;
+}
+
+.pf-field-label {
+  line-height: 1.35;
+}
+
+.pf-input {
+  width: 100%;
+  min-height: 41px;
+  padding: 9px 11px;
+  border: 1px solid var(--pf-border);
+  border-radius: var(--pf-radius-sm);
+  color: var(--pf-text);
+  background: var(--pf-surface);
+  font: inherit;
+  font-size: 14px;
+}
+
+.pf-input[aria-invalid="true"] {
+  border-color: var(--pf-danger);
+}
+
+.pf-input::placeholder {
+  color: var(--pf-muted);
+  opacity: 0.8;
+}
+
+.pf-field-hint,
+.pf-field-error {
+  color: var(--pf-muted);
+  font-size: 12px;
+  font-weight: 450;
+  line-height: 1.45;
+}
+
+.pf-field-error {
+  color: var(--pf-danger);
+}
+
+.pf-select {
+  cursor: pointer;
+}
+
+.pf-empty-state {
+  display: grid;
+  justify-items: center;
+  gap: 9px;
+  max-width: 560px;
+  margin: 48px auto;
+  padding: 30px 22px;
+  text-align: center;
+}
+
+.pf-empty-state h2 {
+  margin: 0;
+  font-size: 20px;
+  letter-spacing: -0.025em;
+}
+
+.pf-empty-description {
+  max-width: 460px;
+  color: var(--pf-muted);
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.pf-empty-action {
+  margin-top: 6px;
+}
+
+.pf-skeleton {
+  min-height: 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--pf-muted) 12%, var(--pf-surface));
+  animation: pf-skeleton-pulse 1.4s ease-in-out infinite;
+}
+
+.pf-page-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 18px;
+  margin: 0 0 22px;
+}
+
+.pf-page-heading h1 {
+  margin: 5px 0 0;
+  font-size: clamp(1.7rem, 3vw, 2.6rem);
+  line-height: 1.12;
+  letter-spacing: -0.05em;
+}
+
+.pf-page-eyebrow {
+  margin: 0;
+  color: var(--pf-muted);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.pf-page-description {
+  max-width: 720px;
+  margin: 8px 0 0;
+  color: var(--pf-muted);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.pf-page-actions {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pf-theme-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--pf-muted);
+  font-size: 12px;
+}
+
+.pf-theme-select .pf-input {
+  width: auto;
+  min-height: 34px;
+  padding: 5px 9px;
+  font-size: 12px;
+}
+
+@keyframes pf-skeleton-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@media (max-width: 780px) {
+  .pf-dashboard-shell {
+    display: block;
+  }
+
+  .pf-dashboard-shell[data-sidebar-visible="false"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .pf-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    width: min(var(--pf-sidebar-width), calc(100vw - 56px));
+    height: 100dvh;
+    min-height: 0;
+    transform: translateX(-105%);
+    visibility: hidden;
+    transition:
+      transform 220ms var(--pf-ease),
+      visibility 220ms;
+  }
+
+  .pf-dashboard-shell[data-sidebar-visible="false"] .pf-sidebar {
+    width: min(var(--pf-sidebar-width), calc(100vw - 56px));
+    padding: 20px 14px 14px;
+    border-right: 1px solid var(--pf-border);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .pf-dashboard-shell[data-mobile-open="true"] .pf-sidebar {
+    transform: translateX(0);
+    visibility: visible;
+  }
+
+  .pf-sidebar-backdrop {
+    position: fixed;
+    z-index: 25;
+    inset: 0;
+    display: block;
+    border: 0;
+    background: rgb(0 0 0 / 38%);
+  }
+
+  .pf-mobile-menu-button {
+    display: inline-flex;
+    flex: 0 0 auto;
+    margin-right: auto;
+  }
+
+  .pf-dashboard-toolbar {
+    min-height: 56px;
+    padding: 7px 14px;
+  }
+
+  .pf-dashboard-content {
+    padding: 20px 16px 32px;
+  }
+
+  .pf-auth-layout {
+    min-height: calc(100vh - 32px);
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .pf-auth-aside {
+    min-height: 190px;
+    padding: 22px 24px;
+  }
+
+  .pf-auth-aside-content {
+    gap: 9px;
+    padding: 24px 0 4px;
+  }
+
+  .pf-auth-aside-content h1,
+  .pf-auth-aside-content h2 {
+    font-size: clamp(1.65rem, 8vw, 2.35rem);
+  }
+
+  .pf-auth-aside-footer {
+    display: none;
+  }
+
+  .pf-auth-main {
+    padding: 24px;
+  }
+
+  .pf-auth-utility {
+    top: 10px;
+    right: 10px;
+  }
+}
+
+@media (max-width: 520px) {
+  .pf-auth-shell {
+    padding: 0;
+  }
+
+  .pf-auth-layout {
+    min-height: 100vh;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .pf-auth-aside {
+    min-height: 150px;
+    padding: 18px 20px;
+  }
+
+  .pf-auth-main {
+    padding: 22px 18px;
+  }
+
+  .pf-auth-card {
+    padding: 20px;
+  }
+
+  .pf-page-header {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .pf-page-actions {
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-dashboard-shell *,
+  .pf-auth-shell *,
+  .pf-component * {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/styles.css.d.ts

@@ -0,0 +1,3 @@
+declare const stylesheet: string;
+
+export default stylesheet;