@nanisoft/prism-ui 0.4.0 → 0.5.1

package/dist/pages/auth-page/index.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { AuthForm01 } from '../../blocks/auth-form-01';
+export type AuthPageAside = {
+    /** The supporting card's title. */
+    title: string;
+    /** One line under the title. */
+    description?: string;
+    /** The card body: product context, a short list or a supporting note. */
+    children?: ReactNode;
+};
+export type AuthPageProps = {
+    /** The credential form. */
+    form: ComponentProps<typeof AuthForm01>;
+    /**
+     * A supporting card beside the form. Omit it for a single centered column.
+     */
+    aside?: AuthPageAside;
+    /** A node under the form, such as a legal line or a link to another screen. */
+    footer?: ReactNode;
+};
+/**
+ * A complete authentication screen.
+ *
+ * It composes `AuthForm01` with `Card`: the form carries the credentials and an
+ * optional supporting card sits beside it with product context. The page owns
+ * the layout, the centering and the breakpoint only. Every field, label,
+ * handler and error is a prop through `form`, and the page fetches nothing and
+ * imports no router, so the consumer owns the links and the request.
+ *
+ * The layout is one centered column when no `aside` is passed, and a two-column
+ * split from the large breakpoint up when one is. That keeps the docs preview
+ * and a narrow screen on the same, readable path.
+ */
+export declare function AuthPage({ form, aside, footer }: AuthPageProps): import("react").JSX.Element;
+export default AuthPage;
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/auth-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/auth-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAStD,MAAM,MAAM,aAAa,GAAG;IAC1B,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,2BAA2B;IAC3B,IAAI,EAAE,cAAc,CAAC,OAAO,UAAU,CAAC,CAAA;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa,+BA+B9D;AAED,eAAe,QAAQ,CAAA"}

package/dist/pages/auth-page/index.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AuthForm01 } from '../../blocks/auth-form-01';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '../../components/ui/card';
+/**
+ * A complete authentication screen.
+ *
+ * It composes `AuthForm01` with `Card`: the form carries the credentials and an
+ * optional supporting card sits beside it with product context. The page owns
+ * the layout, the centering and the breakpoint only. Every field, label,
+ * handler and error is a prop through `form`, and the page fetches nothing and
+ * imports no router, so the consumer owns the links and the request.
+ *
+ * The layout is one centered column when no `aside` is passed, and a two-column
+ * split from the large breakpoint up when one is. That keeps the docs preview
+ * and a narrow screen on the same, readable path.
+ */
+export function AuthPage({ form, aside, footer }) {
+    return (_jsx("div", { className: "bg-background text-foreground flex min-h-svh w-full items-center justify-center px-6 py-16", children: _jsxs("div", { className: aside
+                ? 'grid w-full max-w-page items-center gap-10 lg:grid-cols-2'
+                : 'w-full max-w-measure-narrow', children: [aside ? (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: aside.title }), aside.description ? (_jsx(CardDescription, { children: aside.description })) : null] }), aside.children ? _jsx(CardContent, { children: aside.children }) : null] })) : null, _jsxs("div", { className: "mx-auto w-full max-w-measure-narrow", children: [_jsx(AuthForm01, { ...form }), footer ? (_jsx("div", { className: "text-muted-foreground mt-4 text-center text-sm", children: footer })) : null] })] }) }));
+}
+export default AuthPage;

package/dist/pages/dashboard-page/index.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'react';
+import { AppShell01 } from '../../blocks/app-shell-01';
+import { DataTable01 } from '../../blocks/data-table-01';
+import { PageHeader01 } from '../../blocks/page-header-01';
+import { Stats01 } from '../../blocks/stats-01';
+export type DashboardPageProps = {
+    /**
+     * The frame: the navigation rail, the top bar and the mobile navigation
+     * sheet. Navigation, actions and the rail slots are passed as nodes, so the
+     * page never imports a router.
+     */
+    shell: Omit<ComponentProps<typeof AppShell01>, 'children'>;
+    /** The page title band. */
+    header: ComponentProps<typeof PageHeader01>;
+    /** The key-figure row above the table. */
+    stats: ComponentProps<typeof Stats01>;
+    /** The main table, with its rows, columns, labels and callbacks. */
+    table: ComponentProps<typeof DataTable01>;
+};
+/**
+ * A complete dashboard screen.
+ *
+ * It composes `AppShell01`, `PageHeader01`, `Stats01` and `DataTable01`: the
+ * shell provides the frame, the header names the screen, the stats summarise it
+ * and the table carries the working set. The page owns the sequence and the
+ * spacing only. Every row, column, label and handler is a prop, and the page
+ * fetches nothing.
+ *
+ * The page is a client component because the blocks it composes are stateful.
+ * That is a property of this composition, not of the data: the consumer still
+ * owns the rows and the callbacks, and can drive the table from a server render
+ * or a client cache by the same props.
+ */
+export declare function DashboardPage({ shell, header, stats, table }: DashboardPageProps): import("react").JSX.Element;
+export default DashboardPage;
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/dashboard-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/dashboard-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAE/C,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,CAAA;IAC1D,2BAA2B;IAC3B,MAAM,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;IAC3C,0CAA0C;IAC1C,KAAK,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;IACrC,oEAAoE;IACpE,KAAK,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;CAC1C,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB,+BAUhF;AAED,eAAe,aAAa,CAAA"}

package/dist/pages/dashboard-page/index.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppShell01 } from '../../blocks/app-shell-01';
+import { DataTable01 } from '../../blocks/data-table-01';
+import { PageHeader01 } from '../../blocks/page-header-01';
+import { Stats01 } from '../../blocks/stats-01';
+/**
+ * A complete dashboard screen.
+ *
+ * It composes `AppShell01`, `PageHeader01`, `Stats01` and `DataTable01`: the
+ * shell provides the frame, the header names the screen, the stats summarise it
+ * and the table carries the working set. The page owns the sequence and the
+ * spacing only. Every row, column, label and handler is a prop, and the page
+ * fetches nothing.
+ *
+ * The page is a client component because the blocks it composes are stateful.
+ * That is a property of this composition, not of the data: the consumer still
+ * owns the rows and the callbacks, and can drive the table from a server render
+ * or a client cache by the same props.
+ */
+export function DashboardPage({ shell, header, stats, table }) {
+    return (_jsx(AppShell01, { ...shell, children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-col gap-8", children: [_jsx(PageHeader01, { ...header, headingLevel: header.headingLevel ?? 'h1' }), _jsx(Stats01, { ...stats }), _jsx(DataTable01, { ...table })] }) }));
+}
+export default DashboardPage;

package/dist/pages/index.d.ts

@@ -1,3 +1,17 @@
-export { BlogLayout, type BlogLayoutProps, type BlogFrontmatter } from './blog-layout/index.js';
-export { DocsShell, type DocsShellProps, type DocsNavEntry } from './docs-shell/index.js';
+/**
+ * Every Prism Page.
+ *
+ * A Page is a shipped, installable screen model composed of Blocks and
+ * Components that receives application-owned navigation, content and data
+ * (ticket 07). The v1 roster ships four Pages. Each is also importable on its
+ * own subpath, `@nanisoft/prism-ui/pages/<slug>`.
+ */
+export { MarketingPage } from './marketing-page';
+export type { MarketingPageProps } from './marketing-page';
+export { DashboardPage } from './dashboard-page';
+export type { DashboardPageProps } from './dashboard-page';
+export { SettingsPage } from './settings-page';
+export type { SettingsPageProps, SettingsPageTab } from './settings-page';
+export { AuthPage } from './auth-page';
+export type { AuthPageProps, AuthPageAside } from './auth-page';
 //# sourceMappingURL=index.d.ts.map

package/dist/pages/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pages/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pages/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA"}

package/dist/pages/index.js

@@ -1,4 +1,12 @@
-// prism-ui pages barrel — full-page compositions taking Prism-owned structural types.
-export { BlogLayout } from './blog-layout/index.js';
-export { DocsShell } from './docs-shell/index.js';
-//# sourceMappingURL=index.js.map
+/**
+ * Every Prism Page.
+ *
+ * A Page is a shipped, installable screen model composed of Blocks and
+ * Components that receives application-owned navigation, content and data
+ * (ticket 07). The v1 roster ships four Pages. Each is also importable on its
+ * own subpath, `@nanisoft/prism-ui/pages/<slug>`.
+ */
+export { MarketingPage } from './marketing-page';
+export { DashboardPage } from './dashboard-page';
+export { SettingsPage } from './settings-page';
+export { AuthPage } from './auth-page';

package/dist/pages/marketing-page/index.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentProps } from 'react';
+import { Cta01 } from '../../blocks/cta-01';
+import { FeatureGrid01 } from '../../blocks/feature-grid-01';
+import { Hero01 } from '../../blocks/hero-01';
+import { Pricing01 } from '../../blocks/pricing-01';
+import { Stats01 } from '../../blocks/stats-01';
+import type { HeadingLevel } from '../../components/ui/section';
+export type MarketingPageProps = {
+    /** The opening band: an optional eyebrow, the headline and one or two actions. */
+    hero: ComponentProps<typeof Hero01>;
+    /** The capability grid below the hero. */
+    features: ComponentProps<typeof FeatureGrid01>;
+    /** The key-figure row. */
+    stats: ComponentProps<typeof Stats01>;
+    /** The plan comparison. */
+    pricing: ComponentProps<typeof Pricing01>;
+    /** The closing call to action. */
+    cta: ComponentProps<typeof Cta01>;
+    /**
+     * The heading level for the hero. Defaults to `h1`, because a page owns the
+     * top of the document outline. A consumer that embeds the page under a
+     * heading it already owns passes one level deeper.
+     */
+    headingLevel?: HeadingLevel;
+};
+/**
+ * A complete marketing page.
+ *
+ * It composes `Hero01`, `FeatureGrid01`, `Stats01`, `Pricing01` and `Cta01` in
+ * reading order and passes each block its own props unchanged, so the page adds
+ * the sequence and nothing else. Every string, number and action is a prop, and
+ * the page ships no sample copy and fetches nothing. It is a product-agnostic
+ * screen model, not this site's own landing route: a consumer installs it,
+ * passes their own content and owns the links.
+ *
+ * The hero is the page's primary heading, so it defaults to `h1`; set
+ * `headingLevel` when the page is embedded rather than rendered as a screen.
+ * The composed blocks keep their own `h2` defaults, so the outline stays one
+ * heading per section below the hero.
+ */
+export declare function MarketingPage({ hero, features, stats, pricing, cta, headingLevel, }: MarketingPageProps): import("react").JSX.Element;
+export default MarketingPage;
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/marketing-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/marketing-page/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAA;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAE/D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,kFAAkF;IAClF,IAAI,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAA;IACnC,0CAA0C;IAC1C,QAAQ,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAA;IAC9C,0BAA0B;IAC1B,KAAK,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAA;IACrC,2BAA2B;IAC3B,OAAO,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;IACzC,kCAAkC;IAClC,GAAG,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAA;IACjC;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,OAAO,EACP,GAAG,EACH,YAAmB,GACpB,EAAE,kBAAkB,+BAUpB;AAED,eAAe,aAAa,CAAA"}

package/dist/pages/marketing-page/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cta01 } from '../../blocks/cta-01';
+import { FeatureGrid01 } from '../../blocks/feature-grid-01';
+import { Hero01 } from '../../blocks/hero-01';
+import { Pricing01 } from '../../blocks/pricing-01';
+import { Stats01 } from '../../blocks/stats-01';
+/**
+ * A complete marketing page.
+ *
+ * It composes `Hero01`, `FeatureGrid01`, `Stats01`, `Pricing01` and `Cta01` in
+ * reading order and passes each block its own props unchanged, so the page adds
+ * the sequence and nothing else. Every string, number and action is a prop, and
+ * the page ships no sample copy and fetches nothing. It is a product-agnostic
+ * screen model, not this site's own landing route: a consumer installs it,
+ * passes their own content and owns the links.
+ *
+ * The hero is the page's primary heading, so it defaults to `h1`; set
+ * `headingLevel` when the page is embedded rather than rendered as a screen.
+ * The composed blocks keep their own `h2` defaults, so the outline stays one
+ * heading per section below the hero.
+ */
+export function MarketingPage({ hero, features, stats, pricing, cta, headingLevel = 'h1', }) {
+    return (_jsxs("div", { className: "bg-background text-foreground", children: [_jsx(Hero01, { ...hero, headingLevel: headingLevel }), _jsx(FeatureGrid01, { ...features }), _jsx(Stats01, { ...stats }), _jsx(Pricing01, { ...pricing }), _jsx(Cta01, { ...cta })] }));
+}
+export default MarketingPage;

package/dist/pages/settings-page/index.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { AppShell01 } from '../../blocks/app-shell-01';
+import { PageHeader01 } from '../../blocks/page-header-01';
+import { SettingsPanel01 } from '../../blocks/settings-panel-01';
+export type SettingsPageTab = {
+    /** The value shared by the trigger and its panel. */
+    value: string;
+    /** The trigger label. */
+    label: string;
+    /**
+     * A saved settings form for this tab. Rendered through `SettingsPanel01`, so
+     * the tab inherits the grouped sections, the field kinds and the save footer.
+     */
+    panel?: ComponentProps<typeof SettingsPanel01>;
+    /** Content for a tab that is not a saved form, such as a read-only summary. */
+    content?: ReactNode;
+};
+export type SettingsPageProps = {
+    /** The frame: rail, top bar and mobile navigation sheet. */
+    shell: Omit<ComponentProps<typeof AppShell01>, 'children'>;
+    /** The page title band. */
+    header: ComponentProps<typeof PageHeader01>;
+    /** The tabs, in order. At least one is required. */
+    tabs: SettingsPageTab[];
+    /** The tab shown first, for uncontrolled tabs. Defaults to the first tab. */
+    defaultValue?: string;
+    /** The controlled active tab. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+/**
+ * A complete settings screen.
+ *
+ * It composes `AppShell01`, `PageHeader01`, `Tabs` and `SettingsPanel01`: the
+ * shell provides the frame, the header names the screen, and each tab is a
+ * saved settings form or a read-only panel. The page owns the sequence and the
+ * tab wiring only. Every section, field, option and label is a prop, and the
+ * page fetches nothing.
+ *
+ * A tab that carries a `panel` renders `SettingsPanel01`, so a settings screen
+ * is a set of grouped forms rather than one long page. A tab that carries
+ * `content` instead renders the node as-is. Both are optional, so a caller can
+ * mix forms and read-only views in one screen.
+ */
+export declare function SettingsPage({ shell, header, tabs, defaultValue, value, onValueChange, }: SettingsPageProps): import("react").JSX.Element;
+export default SettingsPage;
+//# sourceMappingURL=index.d.ts.map

package/dist/pages/settings-page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pages/settings-page/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAGhE,MAAM,MAAM,eAAe,GAAG;IAC5B,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAA;IACb,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;IAC9C,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4DAA4D;IAC5D,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,UAAU,CAAC,CAAA;IAC1D,2BAA2B;IAC3B,MAAM,EAAE,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;IAC3C,oDAAoD;IACpD,IAAI,EAAE,eAAe,EAAE,CAAA;IACvB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,aAAa,GACd,EAAE,iBAAiB,+BA4BnB;AAED,eAAe,YAAY,CAAA"}

package/dist/pages/settings-page/index.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppShell01 } from '../../blocks/app-shell-01';
+import { PageHeader01 } from '../../blocks/page-header-01';
+import { SettingsPanel01 } from '../../blocks/settings-panel-01';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
+/**
+ * A complete settings screen.
+ *
+ * It composes `AppShell01`, `PageHeader01`, `Tabs` and `SettingsPanel01`: the
+ * shell provides the frame, the header names the screen, and each tab is a
+ * saved settings form or a read-only panel. The page owns the sequence and the
+ * tab wiring only. Every section, field, option and label is a prop, and the
+ * page fetches nothing.
+ *
+ * A tab that carries a `panel` renders `SettingsPanel01`, so a settings screen
+ * is a set of grouped forms rather than one long page. A tab that carries
+ * `content` instead renders the node as-is. Both are optional, so a caller can
+ * mix forms and read-only views in one screen.
+ */
+export function SettingsPage({ shell, header, tabs, defaultValue, value, onValueChange, }) {
+    return (_jsx(AppShell01, { ...shell, children: _jsxs("div", { className: "mx-auto flex w-full max-w-page flex-col gap-8", children: [_jsx(PageHeader01, { ...header, headingLevel: header.headingLevel ?? 'h1' }), _jsxs(Tabs, { defaultValue: defaultValue ?? tabs[0]?.value, value: value, onValueChange: onValueChange, children: [_jsx(TabsList, { children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value))) }), tabs.map((tab) => (_jsx(TabsContent, { value: tab.value, children: tab.panel ? _jsx(SettingsPanel01, { ...tab.panel }) : tab.content }, tab.value)))] })] }) }));
+}
+export default SettingsPage;

package/dist/provider/index.d.ts

@@ -1,5 +1,12 @@
-export { PrismProvider, type PrismProviderProps } from './PrismProvider.js';
-export { mergePrismTheme, toAntdTheme, isPrismTheme } from './mergePrismTheme.js';
-export { usePrismLink, PrismLinkContextProvider, type PrismLinkContextValue } from './PrismLinkContext.js';
-export { PrismThemeModeProvider, usePrismThemeMode, type PrismThemeModeProviderProps, type PrismThemeModeValue, } from './PrismThemeMode.js';
+/**
+ * The Prism provider entry.
+ *
+ * `PrismProvider` and `usePrismTheme` are the optional programmatic path;
+ * `PrismThemeScript` is the optional pre-hydration script. The declarative
+ * `data-pack` and `.dark` attributes are the default and need none of this.
+ */
+export { PrismProvider, usePrismTheme } from './provider';
+export type { PrismProviderProps, PrismTheme } from './provider';
+export { PrismThemeScript } from './theme-script';
+export type { PrismThemeScriptProps } from './theme-script';
 //# sourceMappingURL=index.d.ts.map

package/dist/provider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,wBAAwB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC3G,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,KAAK,2BAA2B,EAChC,KAAK,mBAAmB,GACzB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACjD,YAAY,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/provider/index.js

@@ -1,5 +1,9 @@
-export { PrismProvider } from './PrismProvider.js';
-export { mergePrismTheme, toAntdTheme, isPrismTheme } from './mergePrismTheme.js';
-export { usePrismLink, PrismLinkContextProvider } from './PrismLinkContext.js';
-export { PrismThemeModeProvider, usePrismThemeMode, } from './PrismThemeMode.js';
-//# sourceMappingURL=index.js.map
+/**
+ * The Prism provider entry.
+ *
+ * `PrismProvider` and `usePrismTheme` are the optional programmatic path;
+ * `PrismThemeScript` is the optional pre-hydration script. The declarative
+ * `data-pack` and `.dark` attributes are the default and need none of this.
+ */
+export { PrismProvider, usePrismTheme } from './provider';
+export { PrismThemeScript } from './theme-script';

package/dist/provider/provider.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The optional client runtime for programmatic theme switching.
+ *
+ * The provider is strictly additive: a consumer who puts `data-pack` and
+ * `.dark` on `<html>` never needs it, and a consumer who wants no client
+ * JavaScript omits it. It carries the pack and mode through context and writes
+ * the same two markup attributes the declarative form uses. There is no
+ * override, merge, token, className or style prop: the provider's only outputs
+ * are the document-element attributes and context (ticket 07).
+ */
+import { type ReactNode } from 'react';
+import { type Mode, type PackId } from '../theming';
+export type PrismTheme = {
+    pack: PackId;
+    mode: Mode;
+    setPack: (pack: PackId) => void;
+    setMode: (mode: Mode) => void;
+    toggleMode: () => void;
+};
+export type PrismProviderProps = {
+    /** Pack used when nothing is stored and no pack attribute is present. */
+    defaultPack?: PackId;
+    /** Mode used in the same fallback. */
+    defaultMode?: Mode;
+    /** localStorage key for the persisted `{ pack, mode }` object. */
+    storageKey?: string;
+    children?: ReactNode;
+};
+export declare function PrismProvider({ defaultPack, defaultMode, storageKey, children, }: PrismProviderProps): import("react").JSX.Element;
+/**
+ * Reads and mutates the active pack and mode.
+ *
+ * Throws outside a `PrismProvider`. The provider is optional, so a consumer
+ * that does not mount it simply does not call this hook.
+ */
+export declare function usePrismTheme(): PrismTheme;
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/provider/provider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAEd,OAAO,EAML,KAAK,IAAI,EACT,KAAK,MAAM,EACZ,MAAM,YAAY,CAAA;AAEnB,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,IAAI,CAAA;IACV,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAID,MAAM,MAAM,kBAAkB,GAAG;IAC/B,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAwBD,wBAAgB,aAAa,CAAC,EAC5B,WAAuB,EACvB,WAAqB,EACrB,UAAgC,EAChC,QAAQ,GACT,EAAE,kBAAkB,+BA8CpB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,UAAU,CAM1C"}

package/dist/provider/provider.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The optional client runtime for programmatic theme switching.
+ *
+ * The provider is strictly additive: a consumer who puts `data-pack` and
+ * `.dark` on `<html>` never needs it, and a consumer who wants no client
+ * JavaScript omits it. It carries the pack and mode through context and writes
+ * the same two markup attributes the declarative form uses. There is no
+ * override, merge, token, className or style prop: the provider's only outputs
+ * are the document-element attributes and context (ticket 07).
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { DEFAULT_STORAGE_KEY, MODES, PACKS, parseStoredTheme, themeAttributes, } from '../theming';
+const PrismThemeContext = createContext(null);
+function applyDocumentAttributes(pack, mode) {
+    const root = document.documentElement;
+    const { 'data-pack': packAttribute, className } = themeAttributes({ pack, mode });
+    if (packAttribute)
+        root.setAttribute('data-pack', packAttribute);
+    else
+        root.removeAttribute('data-pack');
+    if (className)
+        root.classList.add('dark');
+    else
+        root.classList.remove('dark');
+}
+function packFromDocument(fallback) {
+    const attribute = document.documentElement.getAttribute('data-pack');
+    return attribute && PACKS.includes(attribute)
+        ? attribute
+        : fallback;
+}
+function modeFromDocument(fallback) {
+    return document.documentElement.classList.contains('dark') ? 'dark' : fallback;
+}
+export function PrismProvider({ defaultPack = 'default', defaultMode = 'light', storageKey = DEFAULT_STORAGE_KEY, children, }) {
+    const [pack, setPackState] = useState(defaultPack);
+    const [mode, setModeState] = useState(defaultMode);
+    const [resolved, setResolved] = useState(false);
+    /*
+     * Resolution order on mount: stored value, then the server-rendered attribute,
+     * then the default. A server-rendered pack therefore survives hydration
+     * instead of flashing to the default.
+     */
+    useEffect(() => {
+        const stored = parseStoredTheme(localStorage.getItem(storageKey));
+        const next = stored ?? { pack: packFromDocument(defaultPack), mode: modeFromDocument(defaultMode) };
+        setPackState(next.pack);
+        setModeState(next.mode);
+        setResolved(true);
+    }, [storageKey, defaultPack, defaultMode]);
+    /*
+     * Persist and apply only after resolution, so the first client commit never
+     * writes the defaults over a stored or server-rendered choice.
+     */
+    useEffect(() => {
+        if (!resolved)
+            return;
+        applyDocumentAttributes(pack, mode);
+        try {
+            localStorage.setItem(storageKey, JSON.stringify({ pack, mode }));
+        }
+        catch {
+            // A blocked or full localStorage must not break theme switching. The
+            // attributes are already applied, so the visible behaviour is unchanged.
+        }
+    }, [resolved, pack, mode, storageKey]);
+    const setPack = useCallback((next) => setPackState(next), []);
+    const setMode = useCallback((next) => setModeState(next), []);
+    const toggleMode = useCallback(() => setModeState((current) => (current === 'dark' ? MODES[0] : MODES[1])), []);
+    const value = useMemo(() => ({ pack, mode, setPack, setMode, toggleMode }), [pack, mode, setPack, setMode, toggleMode]);
+    return _jsx(PrismThemeContext.Provider, { value: value, children: children });
+}
+/**
+ * Reads and mutates the active pack and mode.
+ *
+ * Throws outside a `PrismProvider`. The provider is optional, so a consumer
+ * that does not mount it simply does not call this hook.
+ */
+export function usePrismTheme() {
+    const value = useContext(PrismThemeContext);
+    if (!value) {
+        throw new Error('usePrismTheme must be used within a PrismProvider');
+    }
+    return value;
+}

package/dist/provider/theme-script.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The optional pre-hydration theme script.
+ *
+ * A Server Component that renders one blocking script. Placed in `<head>`, it
+ * applies the stored pack and mode before React hydrates, so the first paint is
+ * already correct. Precedence matches `PrismProvider`: stored value, then the
+ * server-rendered attribute, then the defaults. It is safe to omit; a consumer
+ * who renders the attributes on `<html>` needs no client runtime at all.
+ */
+import { type Mode, type PackId } from '../theming';
+export type PrismThemeScriptProps = {
+    storageKey?: string;
+    defaultPack?: PackId;
+    defaultMode?: Mode;
+};
+export declare function PrismThemeScript({ storageKey, defaultPack, defaultMode, }: PrismThemeScriptProps): import("react").JSX.Element;
+//# sourceMappingURL=theme-script.d.ts.map

package/dist/provider/theme-script.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-script.d.ts","sourceRoot":"","sources":["../../src/provider/theme-script.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAqC,KAAK,IAAI,EAAE,KAAK,MAAM,EAAE,MAAM,YAAY,CAAA;AAEtF,MAAM,MAAM,qBAAqB,GAAG;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,IAAI,CAAA;CACnB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,UAAgC,EAChC,WAAuB,EACvB,WAAqB,GACtB,EAAE,qBAAqB,+BAkBvB"}

package/dist/provider/theme-script.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The optional pre-hydration theme script.
+ *
+ * A Server Component that renders one blocking script. Placed in `<head>`, it
+ * applies the stored pack and mode before React hydrates, so the first paint is
+ * already correct. Precedence matches `PrismProvider`: stored value, then the
+ * server-rendered attribute, then the defaults. It is safe to omit; a consumer
+ * who renders the attributes on `<html>` needs no client runtime at all.
+ */
+import { DEFAULT_STORAGE_KEY, MODES, PACKS } from '../theming';
+export function PrismThemeScript({ storageKey = DEFAULT_STORAGE_KEY, defaultPack = 'default', defaultMode = 'light', }) {
+    const script = '(function(){try{' +
+        'var root=document.documentElement;' +
+        `var packs=${JSON.stringify(PACKS)};` +
+        `var modes=${JSON.stringify(MODES)};` +
+        'var stored=null;' +
+        `try{stored=JSON.parse(localStorage.getItem(${JSON.stringify(storageKey)})||"null");}catch(ignored){}` +
+        'var pack=stored&&packs.indexOf(stored.pack)>-1?stored.pack:(root.getAttribute("data-pack")||' +
+        `${JSON.stringify(defaultPack)});` +
+        'var mode=stored&&modes.indexOf(stored.mode)>-1?stored.mode:(root.classList.contains("dark")?"dark":' +
+        `${JSON.stringify(defaultMode)});` +
+        `if(packs.indexOf(pack)<0){pack=${JSON.stringify(defaultPack)};}` +
+        'if(pack&&pack!=="default"){root.setAttribute("data-pack",pack);}else{root.removeAttribute("data-pack");}' +
+        'root.classList.toggle("dark",mode==="dark");' +
+        '}catch(ignored){}})();';
+    return _jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+}