@cedros/data-react 0.1.5 → 0.1.6

package/README.md

@@ -31,9 +31,14 @@ Packaging smoke:
 ## Package exports
 
 - `@cedros/data-react`
-  - `defaultPageTemplates`
-  - `DefaultPageKey`, `PageTemplateContract`
-  - re-exports admin + site-template modules
+  - `CedrosDataProvider`, `useCedrosDataTheme`, `useCedrosDataThemeOptional`
+  - `CmsContent`, `getOrCreateVisitorId`, `sanitizeCmsHtml`, `renderCmsMarkdown`
+  - theme/page/content types
+- `@cedros/data-react/server`
+  - `generatePageMetadata`, `buildPageMetadata`
+  - `fetchBlogPost`, `listContentSlugs`, `listBlogSlugs`, `listLearnPathIds`
+  - `loadSitemapEntries`
+  - all accept `ServerFetchOptions` with optional `apiKey` (falls back to `CEDROS_X_API_KEY` env)
 - `@cedros/data-react/admin`
   - `cedrosDataPlugin`
   - section IDs/groups/types
@@ -91,6 +96,9 @@ Content:
 - `pages`
 - `navigation`
 - `site-settings`
+- `layout` — nav width, link position/style, footer width
+- `tipping`
+- `monetization`
 
 Data model:
 - `collections`
@@ -102,8 +110,44 @@ Operations:
 - `data-ops`
 - `history`
 
+## Theme system (CedrosDataProvider)
+
+`CedrosDataProvider` matches the theme API used by cedros-login and cedros-pay:
+
+```tsx
+import { CedrosDataProvider } from "@cedros/data-react";
+
+<CedrosDataProvider
+  theme="dark"
+  themeOverrides={{
+    "--cedros-background": "#292524",
+    "--cedros-foreground": "#f5f5f4",
+    "--cedros-border": "#44403c",
+  }}
+>
+  <SiteLayout ... />
+</CedrosDataProvider>
+```
+
+Props:
+- `theme` — `'light'` | `'dark'` (default: `'light'`)
+- `themeOverrides` — typed `CedrosDataThemeOverrides` with 13 tokens + open-ended `[key: string]`
+- `unstyled` — disables all default className/style (for custom design systems)
+
+Hook:
+```tsx
+import { useCedrosDataTheme } from "@cedros/data-react";
+
+const { mode, isDark, className, style, unstyled } = useCedrosDataTheme();
+```
+
+Also exports `useCedrosDataThemeOptional()` which returns `null` outside a provider.
+
+The provider applies className (`.cedros-dark`) and inline style overrides on the **same element** so overrides always win via CSS specificity — matching cedros-pay/login behavior.
+
 ## Styling and dark mode
 
+- All component styles use `var(--cedros-*, fallback)` — no hardcoded colors, even in dark mode.
 - Admin UIs use tokenized variables aligned with cedros-login/cedros-pay conventions.
 - Dark mode responds to both:
   - `.cedros-dark`
@@ -117,11 +161,38 @@ import "@cedros/data-react/admin/styles.css";
 ## Site templates and components
 
 Layouts/navigation:
-- `SiteLayout`
-- `TopNav`
-- `SiteFooter`
+- `SiteLayout` — accepts `layout?: SiteLayoutOptions` for nav/footer configuration
+- `TopNav` — accepts `layout?: NavLayoutOptions`
+- `SiteFooter` — accepts `layout?: FooterLayoutOptions`
 - `DashboardShell`
 
+### Layout options
+
+Layout preferences are managed via the admin "Layout" section (stored as `site_settings/layout`). Pass them to `SiteLayout`:
+
+```tsx
+<SiteLayout
+  siteTitle="My Site"
+  navigation={navItems}
+  layout={{
+    nav: {
+      width: "full",           // "contained" (default) | "full"
+      linkPosition: "center",  // "right" (default) | "center"
+      linkStyle: "text",       // "pill" (default) | "text"
+    },
+    footer: {
+      width: "full",           // "contained" (default) | "full"
+    },
+  }}
+>
+  {children}
+</SiteLayout>
+```
+
+- **width: "full"** — logo and actions stretch to viewport edges
+- **linkPosition: "center"** — nav links centered between brand and right slot
+- **linkStyle: "text"** — plain text links instead of pill buttons
+
 Core page templates:
 - `HomePageTemplate`
 - `ContactPageTemplate`
@@ -248,6 +319,30 @@ Docs/blog templates default to `bodyMarkdown`.
 
 This keeps markdown as the safe default and avoids unsafe HTML rendering by default.
 
+## Server helpers and API key
+
+`@cedros/data-react/server` provides Next.js data-fetching helpers that call cedros-data directly:
+
+```tsx
+import { generatePageMetadata, loadSitemapEntries, fetchBlogPost } from "@cedros/data-react/server";
+
+// All helpers accept ServerFetchOptions:
+const meta = await generatePageMetadata("about", {
+  serverUrl: process.env.CEDROS_DATA_URL,
+  apiKey: process.env.CEDROS_X_API_KEY,  // optional, sent as x-api-key header
+});
+```
+
+The API key resolves from (in order):
+1. `options.apiKey` if explicitly passed
+2. `process.env.CEDROS_X_API_KEY` environment variable
+3. No header sent (unauthenticated — works with direct cedros-data access)
+
+Environment variables for server URL resolution:
+1. `options.serverUrl` if explicitly passed
+2. `CEDROS_DATA_URL`
+3. `NEXT_PUBLIC_BACKEND_API_URL`
+
 ## Default page contract
 
 The package exports the default page template contract used by server bootstrap:

package/dist/admin/icons.d.ts

@@ -12,4 +12,5 @@ export declare const Icons: {
     history: ReactNode;
     tipping: ReactNode;
     monetization: ReactNode;
+    layout: ReactNode;
 };

package/dist/admin/icons.js

@@ -14,5 +14,6 @@ export const Icons = {
     dataOps: icon("M4 4h16v16H4z M8 8h8 M8 12h8 M8 16h4"),
     history: icon("M12 8v5l3 2M20 12a8 8 0 11-2.34-5.66"),
     tipping: icon("M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7z"),
-    monetization: icon("M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6")
+    monetization: icon("M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"),
+    layout: icon("M4 3h16a1 1 0 011 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1V4a1 1 0 011-1zM3 9h18M9 21V9")
 };

package/dist/admin/plugin.js

@@ -14,6 +14,7 @@ const MediaSection = lazy(() => import("./sections/media/MediaSection.js"));
 const HistorySection = lazy(() => import("./sections/HistorySection.js"));
 const TippingSection = lazy(() => import("./sections/TippingSection.js"));
 const MonetizationSection = lazy(() => import("./sections/MonetizationSection.js"));
+const LayoutSection = lazy(() => import("./sections/LayoutSection.js"));
 export const cedrosDataPlugin = {
     id: "cedros-data",
     name: "Cedros Data",
@@ -114,6 +115,14 @@ export const cedrosDataPlugin = {
             group: CEDROS_DATA_GROUPS.content,
             order: 5,
             requiredPermission: "data:settings:read"
+        },
+        {
+            id: CEDROS_DATA_SECTIONS.layout,
+            label: "Layout",
+            icon: Icons.layout,
+            group: CEDROS_DATA_GROUPS.content,
+            order: 6,
+            requiredPermission: "data:settings:read"
         }
     ],
     groups: [
@@ -133,7 +142,8 @@ export const cedrosDataPlugin = {
         [CEDROS_DATA_SECTIONS.dataOps]: DataOpsSection,
         [CEDROS_DATA_SECTIONS.history]: HistorySection,
         [CEDROS_DATA_SECTIONS.tipping]: TippingSection,
-        [CEDROS_DATA_SECTIONS.monetization]: MonetizationSection
+        [CEDROS_DATA_SECTIONS.monetization]: MonetizationSection,
+        [CEDROS_DATA_SECTIONS.layout]: LayoutSection
     },
     createPluginContext(hostContext) {
         const custom = readCedrosDataCustomContext(hostContext);

package/dist/admin/sectionIds.d.ts

@@ -11,8 +11,9 @@ export declare const CEDROS_DATA_SECTIONS: {
     readonly history: "history";
     readonly tipping: "tipping";
     readonly monetization: "monetization";
+    readonly layout: "layout";
 };
-export declare const CEDROS_DATA_SECTION_IDS: readonly ["cedros-data:pages", "cedros-data:navigation", "cedros-data:site-settings", "cedros-data:media", "cedros-data:collections", "cedros-data:schema-designer", "cedros-data:contract-verify", "cedros-data:custom-data", "cedros-data:data-ops", "cedros-data:history", "cedros-data:tipping", "cedros-data:monetization"];
+export declare const CEDROS_DATA_SECTION_IDS: readonly ["cedros-data:pages", "cedros-data:navigation", "cedros-data:site-settings", "cedros-data:media", "cedros-data:collections", "cedros-data:schema-designer", "cedros-data:contract-verify", "cedros-data:custom-data", "cedros-data:data-ops", "cedros-data:history", "cedros-data:tipping", "cedros-data:monetization", "cedros-data:layout"];
 export declare const CEDROS_DATA_GROUPS: {
     readonly content: "Content";
     readonly dataModel: "Data Model";

package/dist/admin/sectionIds.js

@@ -10,7 +10,8 @@ export const CEDROS_DATA_SECTIONS = {
     dataOps: "data-ops",
     history: "history",
     tipping: "tipping",
-    monetization: "monetization"
+    monetization: "monetization",
+    layout: "layout"
 };
 export const CEDROS_DATA_SECTION_IDS = [
     "cedros-data:pages",
@@ -24,7 +25,8 @@ export const CEDROS_DATA_SECTION_IDS = [
     "cedros-data:data-ops",
     "cedros-data:history",
     "cedros-data:tipping",
-    "cedros-data:monetization"
+    "cedros-data:monetization",
+    "cedros-data:layout"
 ];
 export const CEDROS_DATA_GROUPS = {
     content: "Content",

package/dist/admin/sections/LayoutSection.d.ts

@@ -0,0 +1,2 @@
+import type { AdminSectionProps } from "../types.js";
+export default function LayoutSection({ pluginContext }: AdminSectionProps): React.JSX.Element;

package/dist/admin/sections/LayoutSection.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { requestJson } from "../api.js";
+import { AdminButton, Card, SelectInput, StatusNotice } from "../components.js";
+const DEFAULT_LAYOUT = {
+    navWidth: "contained",
+    navLinkPosition: "right",
+    navLinkStyle: "pill",
+    footerWidth: "contained"
+};
+export default function LayoutSection({ pluginContext }) {
+    const canWrite = pluginContext.hasPermission("data:settings:write");
+    const [settings, setSettings] = useState(DEFAULT_LAYOUT);
+    const [status, setStatus] = useState("");
+    const [tone, setTone] = useState("neutral");
+    const [loading, setLoading] = useState(false);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setStatus("");
+        try {
+            const entries = await requestJson(pluginContext, "/entries/query", {
+                method: "POST",
+                body: {
+                    collection_name: "site_settings",
+                    entry_keys: ["layout"],
+                    contains: null,
+                    limit: 1,
+                    offset: 0
+                }
+            });
+            if (entries.length > 0) {
+                setSettings(parseLayoutSettings(entries[0].payload));
+            }
+        }
+        catch (error) {
+            setStatus(error.message);
+            setTone("error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [pluginContext]);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    const save = useCallback(async () => {
+        if (!canWrite) {
+            setStatus("Missing data:settings:write permission.");
+            setTone("error");
+            return;
+        }
+        setLoading(true);
+        setStatus("");
+        try {
+            await requestJson(pluginContext, "/entries/upsert", {
+                method: "POST",
+                body: {
+                    collection_name: "site_settings",
+                    entry_key: "layout",
+                    payload: settings
+                }
+            });
+            setStatus("Layout settings saved.");
+            setTone("success");
+        }
+        catch (error) {
+            setStatus(error.message);
+            setTone("error");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [canWrite, pluginContext, settings]);
+    const update = useCallback((key, value) => {
+        setSettings((prev) => ({ ...prev, [key]: value }));
+    }, []);
+    return (_jsxs("div", { className: "cedros-data", children: [_jsxs("header", { className: "cedros-data__header", children: [_jsxs("div", { children: [_jsx("h2", { className: "cedros-data__title", children: "Layout" }), _jsx("p", { className: "cedros-data__subtitle", children: "Configure the site navigation bar and footer appearance." }), !canWrite && (_jsx("p", { className: "cedros-data__subtitle", children: "Read-only. Missing data:settings:write permission." }))] }), _jsxs("div", { className: "cedros-data-actions", children: [_jsx(AdminButton, { variant: "secondary", onClick: () => void load(), disabled: loading, children: "Refresh" }), _jsx(AdminButton, { variant: "primary", onClick: () => void save(), disabled: loading || !canWrite, children: "Save" })] })] }), _jsxs("div", { className: "cedros-data-grid cedros-data-grid--two", children: [_jsxs(Card, { title: "Navigation Bar", subtitle: "Controls the top nav header layout.", children: [_jsxs(SelectInput, { label: "Width", value: settings.navWidth, onChange: (e) => update("navWidth", e.target.value), disabled: !canWrite, children: [_jsx("option", { value: "contained", children: "Contained (max-width)" }), _jsx("option", { value: "full", children: "Full width (edge to edge)" })] }), _jsxs(SelectInput, { label: "Link Position", value: settings.navLinkPosition, onChange: (e) => update("navLinkPosition", e.target.value), disabled: !canWrite, children: [_jsx("option", { value: "right", children: "Right (next to actions)" }), _jsx("option", { value: "center", children: "Center" })] }), _jsxs(SelectInput, { label: "Link Style", value: settings.navLinkStyle, onChange: (e) => update("navLinkStyle", e.target.value), disabled: !canWrite, children: [_jsx("option", { value: "pill", children: "Pill buttons" }), _jsx("option", { value: "text", children: "Plain text links" })] })] }), _jsx(Card, { title: "Footer", subtitle: "Controls the site footer layout.", children: _jsxs(SelectInput, { label: "Width", value: settings.footerWidth, onChange: (e) => update("footerWidth", e.target.value), disabled: !canWrite, children: [_jsx("option", { value: "contained", children: "Contained (max-width)" }), _jsx("option", { value: "full", children: "Full width (edge to edge)" })] }) })] }), status && _jsx(StatusNotice, { tone: tone, message: status })] }));
+}
+function parseLayoutSettings(payload) {
+    return {
+        navWidth: isNavWidth(payload.navWidth) ? payload.navWidth : DEFAULT_LAYOUT.navWidth,
+        navLinkPosition: isNavLinkPosition(payload.navLinkPosition)
+            ? payload.navLinkPosition
+            : DEFAULT_LAYOUT.navLinkPosition,
+        navLinkStyle: isNavLinkStyle(payload.navLinkStyle)
+            ? payload.navLinkStyle
+            : DEFAULT_LAYOUT.navLinkStyle,
+        footerWidth: isFooterWidth(payload.footerWidth)
+            ? payload.footerWidth
+            : DEFAULT_LAYOUT.footerWidth
+    };
+}
+function isNavWidth(v) {
+    return v === "contained" || v === "full";
+}
+function isNavLinkPosition(v) {
+    return v === "center" || v === "right";
+}
+function isNavLinkStyle(v) {
+    return v === "text" || v === "pill";
+}
+function isFooterWidth(v) {
+    return v === "contained" || v === "full";
+}

package/dist/admin/styles.css

@@ -22,17 +22,17 @@
 
 .cedros-dark .cedros-data,
 .cedros-admin.cedros-admin--dark .cedros-data {
-  --cd-bg: hsl(222.2, 84%, 4.9%);
-  --cd-fg: hsl(210, 40%, 98%);
-  --cd-muted: hsl(215, 20.2%, 65.1%);
-  --cd-muted-bg: hsl(217.2, 32.6%, 17.5%);
-  --cd-border: hsl(217.2, 32.6%, 17.5%);
-  --cd-accent: hsl(217.2, 32.6%, 17.5%);
-  --cd-ring: hsl(212.7, 26.8%, 83.9%);
-  --cd-primary: hsl(210, 40%, 98%);
-  --cd-primary-fg: hsl(222.2, 47.4%, 11.2%);
-  --cd-success: hsl(142, 71%, 45%);
-  --cd-error: hsl(0, 84.2%, 60.2%);
+  --cd-bg: var(--cedros-background, hsl(222.2, 84%, 4.9%));
+  --cd-fg: var(--cedros-foreground, hsl(210, 40%, 98%));
+  --cd-muted: var(--cedros-muted-foreground, hsl(215, 20.2%, 65.1%));
+  --cd-muted-bg: var(--cedros-muted, hsl(217.2, 32.6%, 17.5%));
+  --cd-border: var(--cedros-border, hsl(217.2, 32.6%, 17.5%));
+  --cd-accent: var(--cedros-accent, hsl(217.2, 32.6%, 17.5%));
+  --cd-ring: var(--cedros-ring, hsl(212.7, 26.8%, 83.9%));
+  --cd-primary: var(--cedros-primary, hsl(210, 40%, 98%));
+  --cd-primary-fg: var(--cedros-primary-foreground, hsl(222.2, 47.4%, 11.2%));
+  --cd-success: var(--cedros-success, hsl(142, 71%, 45%));
+  --cd-error: var(--cedros-error, hsl(0, 84.2%, 60.2%));
 }
 
 .cedros-data__header {

package/dist/react/CedrosDataProvider.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { CedrosDataThemeOverrides, CedrosDataThemeValue, ThemeMode } from "./theme.js";
+export interface CedrosDataProviderProps {
+    /** Light or dark mode. */
+    theme?: ThemeMode;
+    /** CSS variable overrides applied as inline styles. */
+    themeOverrides?: CedrosDataThemeOverrides;
+    /** When true, no default className or style is applied. */
+    unstyled?: boolean;
+    children: ReactNode;
+}
+/**
+ * Theme provider for cedros-data components.
+ *
+ * Applies `className` and inline `style` on the **same element** so that
+ * overrides always win over class-selector-based CSS variable declarations.
+ */
+export declare function CedrosDataProvider({ theme, themeOverrides, unstyled, children, }: CedrosDataProviderProps): React.JSX.Element;
+/**
+ * Returns the current theme context.
+ *
+ * Must be called inside a `<CedrosDataProvider>`.
+ */
+export declare function useCedrosDataTheme(): CedrosDataThemeValue;
+/**
+ * Returns the current theme context, or `null` when outside a provider.
+ */
+export declare function useCedrosDataThemeOptional(): CedrosDataThemeValue | null;

package/dist/react/CedrosDataProvider.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+const CedrosDataThemeContext = createContext(null);
+/**
+ * Theme provider for cedros-data components.
+ *
+ * Applies `className` and inline `style` on the **same element** so that
+ * overrides always win over class-selector-based CSS variable declarations.
+ */
+export function CedrosDataProvider({ theme = "light", themeOverrides, unstyled = false, children, }) {
+    const stableOverrides = useStableOverrides(themeOverrides);
+    const value = useMemo(() => {
+        const isDark = theme === "dark";
+        if (unstyled) {
+            return { mode: theme, isDark, className: "", style: {}, unstyled: true, overrides: stableOverrides };
+        }
+        const className = isDark ? "cedros-dark" : "";
+        const style = overridesToStyle(stableOverrides);
+        return { mode: theme, isDark, className, style, unstyled: false, overrides: stableOverrides };
+    }, [theme, unstyled, stableOverrides]);
+    return (_jsx(CedrosDataThemeContext.Provider, { value: value, children: _jsx("div", { className: value.className || undefined, style: value.style, children: children }) }));
+}
+/**
+ * Returns the current theme context.
+ *
+ * Must be called inside a `<CedrosDataProvider>`.
+ */
+export function useCedrosDataTheme() {
+    const ctx = useContext(CedrosDataThemeContext);
+    if (!ctx) {
+        throw new Error("useCedrosDataTheme must be used within CedrosDataProvider");
+    }
+    return ctx;
+}
+/**
+ * Returns the current theme context, or `null` when outside a provider.
+ */
+export function useCedrosDataThemeOptional() {
+    return useContext(CedrosDataThemeContext);
+}
+// -- internals ----------------------------------------------------------------
+/** Deep-compare overrides so parent inline objects don't cause re-renders. */
+function useStableOverrides(overrides) {
+    const ref = useRef(overrides);
+    const [stable, setStable] = useState(overrides);
+    useEffect(() => {
+        if (shallowEqual(ref.current, overrides))
+            return;
+        ref.current = overrides;
+        setStable(overrides);
+    }, [overrides]);
+    return stable;
+}
+function shallowEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    return keysA.every((key) => a[key] === b[key]);
+}
+function overridesToStyle(overrides) {
+    if (!overrides)
+        return {};
+    const style = {};
+    for (const [key, value] of Object.entries(overrides)) {
+        if (value !== undefined) {
+            style[key] = value;
+        }
+    }
+    return style;
+}

package/dist/react/index.d.ts

@@ -4,6 +4,8 @@
  * These exports are safe to use in React Client Components and
  * do not import any server-only modules.
  */
+export { CedrosDataProvider, useCedrosDataTheme, useCedrosDataThemeOptional, type CedrosDataProviderProps, } from "./CedrosDataProvider.js";
+export type { ThemeMode, CedrosDataThemeOverrides, CedrosDataThemeValue, } from "./theme.js";
 export { CmsContent, type CmsContentProps } from "./CmsContent.js";
 export { getOrCreateVisitorId } from "./visitor.js";
 export { sanitizeCmsHtml, renderCmsMarkdown } from "./sanitize.js";

package/dist/react/index.js

@@ -4,6 +4,7 @@
  * These exports are safe to use in React Client Components and
  * do not import any server-only modules.
  */
+export { CedrosDataProvider, useCedrosDataTheme, useCedrosDataThemeOptional, } from "./CedrosDataProvider.js";
 export { CmsContent } from "./CmsContent.js";
 export { getOrCreateVisitorId } from "./visitor.js";
 export { sanitizeCmsHtml, renderCmsMarkdown } from "./sanitize.js";

package/dist/react/theme.d.ts

@@ -0,0 +1,33 @@
+/** Theme mode selector. */
+export type ThemeMode = "light" | "dark";
+/**
+ * Typed theme token overrides using CSS variable names.
+ *
+ * Matches the `--cedros-*` variable namespace shared across
+ * cedros-login, cedros-pay, and cedros-data.
+ */
+export interface CedrosDataThemeOverrides {
+    "--cedros-background"?: string;
+    "--cedros-foreground"?: string;
+    "--cedros-muted"?: string;
+    "--cedros-muted-foreground"?: string;
+    "--cedros-border"?: string;
+    "--cedros-link"?: string;
+    "--cedros-primary"?: string;
+    "--cedros-primary-foreground"?: string;
+    "--cedros-accent"?: string;
+    "--cedros-ring"?: string;
+    "--cedros-radius"?: string;
+    "--cedros-success"?: string;
+    "--cedros-error"?: string;
+    [key: string]: string | undefined;
+}
+/** Value returned by `useCedrosDataTheme()`. */
+export interface CedrosDataThemeValue {
+    mode: ThemeMode;
+    isDark: boolean;
+    className: string;
+    style: React.CSSProperties;
+    unstyled: boolean;
+    overrides?: CedrosDataThemeOverrides;
+}

package/dist/react/theme.js

@@ -0,0 +1 @@
+export {};

package/dist/site-templates/SiteFooter.d.ts

@@ -1,4 +1,9 @@
 import type { ReactNode } from "react";
+/** Layout options for the site footer. */
+export interface FooterLayoutOptions {
+    /** Full-width stretches content to viewport edges. Default: "contained". */
+    width?: "contained" | "full";
+}
 export interface SiteFooterLink {
     key: string;
     label: string;
@@ -9,5 +14,6 @@ export interface SiteFooterProps {
     note?: string;
     links?: SiteFooterLink[];
     rightSlot?: ReactNode;
+    layout?: FooterLayoutOptions;
 }
-export declare function SiteFooter({ siteTitle, note, links, rightSlot }: SiteFooterProps): React.JSX.Element;
+export declare function SiteFooter({ siteTitle, note, links, rightSlot, layout }: SiteFooterProps): React.JSX.Element;

package/dist/site-templates/SiteFooter.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function SiteFooter({ siteTitle, note, links = [], rightSlot }) {
-    return (_jsx("footer", { className: "cedros-site__footer", children: _jsxs("div", { className: "cedros-site__container cedros-site__footer-inner", children: [_jsxs("div", { className: "cedros-site__footer-brand", children: [_jsx("span", { children: siteTitle }), note && _jsx("span", { children: note })] }), links.length > 0 && (_jsx("nav", { className: "cedros-site__footer-links", "aria-label": "Footer", children: links.map((link) => (_jsx("a", { href: link.route, className: "cedros-site__footer-link", children: link.label }, link.key))) })), rightSlot && _jsx("div", { className: "cedros-site__footer-right", children: rightSlot })] }) }));
+export function SiteFooter({ siteTitle, note, links = [], rightSlot, layout }) {
+    const footerClasses = layout?.width === "full"
+        ? "cedros-site__footer cedros-site__footer--full"
+        : "cedros-site__footer";
+    return (_jsx("footer", { className: footerClasses, children: _jsxs("div", { className: "cedros-site__container cedros-site__footer-inner", children: [_jsxs("div", { className: "cedros-site__footer-brand", children: [_jsx("span", { children: siteTitle }), note && _jsx("span", { children: note })] }), links.length > 0 && (_jsx("nav", { className: "cedros-site__footer-links", "aria-label": "Footer", children: links.map((link) => (_jsx("a", { href: link.route, className: "cedros-site__footer-link", children: link.label }, link.key))) })), rightSlot && _jsx("div", { className: "cedros-site__footer-right", children: rightSlot })] }) }));
 }

package/dist/site-templates/SiteLayout.d.ts

@@ -1,14 +1,22 @@
 import type { ReactNode } from "react";
+import type { NavLayoutOptions } from "./TopNav.js";
+import type { FooterLayoutOptions } from "./SiteFooter.js";
 export interface SiteNavigationItem {
     key: string;
     label: string;
     route: string;
 }
+/** Combined layout options for the full site shell. */
+export interface SiteLayoutOptions {
+    nav?: NavLayoutOptions;
+    footer?: FooterLayoutOptions;
+}
 export interface SiteLayoutProps {
     siteTitle: string;
     navigation: SiteNavigationItem[];
     children: ReactNode;
     brandHref?: string;
     footerNote?: string;
+    layout?: SiteLayoutOptions;
 }
-export declare function SiteLayout({ siteTitle, navigation, children, brandHref, footerNote }: SiteLayoutProps): React.JSX.Element;
+export declare function SiteLayout({ siteTitle, navigation, children, brandHref, footerNote, layout }: SiteLayoutProps): React.JSX.Element;

package/dist/site-templates/SiteLayout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SiteFooter } from "./SiteFooter.js";
 import { TopNav } from "./TopNav.js";
-export function SiteLayout({ siteTitle, navigation, children, brandHref = "/", footerNote = "Powered by cedros-data" }) {
-    return (_jsxs("div", { className: "cedros-site", children: [_jsx(TopNav, { siteTitle: siteTitle, navigation: navigation, brandHref: brandHref }), _jsx("main", { className: "cedros-site__main", children: _jsx("div", { className: "cedros-site__container", children: children }) }), _jsx(SiteFooter, { siteTitle: siteTitle, note: footerNote })] }));
+export function SiteLayout({ siteTitle, navigation, children, brandHref = "/", footerNote = "Powered by cedros-data", layout }) {
+    return (_jsxs("div", { className: "cedros-site", children: [_jsx(TopNav, { siteTitle: siteTitle, navigation: navigation, brandHref: brandHref, layout: layout?.nav }), _jsx("main", { className: "cedros-site__main", children: _jsx("div", { className: "cedros-site__container", children: children }) }), _jsx(SiteFooter, { siteTitle: siteTitle, note: footerNote, layout: layout?.footer })] }));
 }

package/dist/site-templates/TopNav.d.ts

@@ -1,10 +1,20 @@
 import type { ReactNode } from "react";
 import type { SiteNavigationItem } from "./SiteLayout.js";
+/** Layout options for the top navigation bar. */
+export interface NavLayoutOptions {
+    /** Full-width stretches logo/actions to viewport edges. Default: "contained". */
+    width?: "contained" | "full";
+    /** Where the main nav links sit. Default: "right". */
+    linkPosition?: "center" | "right";
+    /** Visual style for nav links. Default: "pill". */
+    linkStyle?: "text" | "pill";
+}
 export interface TopNavProps {
     siteTitle: string;
     navigation: SiteNavigationItem[];
     brandHref?: string;
     rightSlot?: ReactNode;
     currentPath?: string;
+    layout?: NavLayoutOptions;
 }
-export declare function TopNav({ siteTitle, navigation, brandHref, rightSlot, currentPath }: TopNavProps): React.JSX.Element;
+export declare function TopNav({ siteTitle, navigation, brandHref, rightSlot, currentPath, layout }: TopNavProps): React.JSX.Element;

package/dist/site-templates/TopNav.js

@@ -1,8 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { withActiveRouteState } from "./routing.js";
-export function TopNav({ siteTitle, navigation, brandHref = "/", rightSlot, currentPath }) {
+export function TopNav({ siteTitle, navigation, brandHref = "/", rightSlot, currentPath, layout }) {
     const activeNavigation = currentPath
         ? withActiveRouteState(navigation, currentPath)
         : navigation.map((item) => ({ ...item, isActive: false }));
-    return (_jsx("header", { className: "cedros-site__header", children: _jsxs("div", { className: "cedros-site__container cedros-site__header-inner", children: [_jsx("a", { href: brandHref, className: "cedros-site__brand", children: siteTitle }), _jsx("nav", { className: "cedros-site__nav", "aria-label": "Primary", children: activeNavigation.map((item) => (_jsx("a", { href: item.route, className: `cedros-site__nav-link${item.isActive ? " cedros-site__nav-link--active" : ""}`, "aria-current": item.isActive ? "page" : undefined, children: item.label }, item.key))) }), rightSlot && _jsx("div", { className: "cedros-site__header-right", children: rightSlot })] }) }));
+    const headerClasses = buildHeaderClasses(layout);
+    const linkStyleClass = layout?.linkStyle === "text" ? " cedros-site__nav-link--text" : "";
+    return (_jsx("header", { className: headerClasses, children: _jsxs("div", { className: "cedros-site__container cedros-site__header-inner", children: [_jsx("a", { href: brandHref, className: "cedros-site__brand", children: siteTitle }), _jsx("nav", { className: "cedros-site__nav", "aria-label": "Primary", children: activeNavigation.map((item) => (_jsx("a", { href: item.route, className: `cedros-site__nav-link${linkStyleClass}${item.isActive ? " cedros-site__nav-link--active" : ""}`, "aria-current": item.isActive ? "page" : undefined, children: item.label }, item.key))) }), rightSlot && _jsx("div", { className: "cedros-site__header-right", children: rightSlot })] }) }));
+}
+function buildHeaderClasses(layout) {
+    let classes = "cedros-site__header";
+    if (layout?.width === "full")
+        classes += " cedros-site__header--full";
+    if (layout?.linkPosition === "center")
+        classes += " cedros-site__header--nav-center";
+    return classes;
 }

package/dist/site-templates/index.d.ts

@@ -1,6 +1,6 @@
-export { SiteLayout, type SiteLayoutProps, type SiteNavigationItem } from "./SiteLayout.js";
-export { TopNav, type TopNavProps } from "./TopNav.js";
-export { SiteFooter, type SiteFooterProps, type SiteFooterLink } from "./SiteFooter.js";
+export { SiteLayout, type SiteLayoutProps, type SiteLayoutOptions, type SiteNavigationItem } from "./SiteLayout.js";
+export { TopNav, type TopNavProps, type NavLayoutOptions } from "./TopNav.js";
+export { SiteFooter, type SiteFooterProps, type SiteFooterLink, type FooterLayoutOptions } from "./SiteFooter.js";
 export { DashboardShell, type DashboardShellProps, type DashboardNavItem } from "./DashboardShell.js";
 export { DashboardOverviewTemplate, type DashboardOverviewTemplateProps, type DashboardPanel, type DashboardStat } from "./DashboardOverviewTemplate.js";
 export { isRouteActive, normalizeRoutePath, withActiveRouteState, type RouteAwareItem, type RouteMatcherOptions } from "./routing.js";

package/dist/site-templates/styles.css

@@ -27,14 +27,14 @@
 }
 
 .cedros-dark .cedros-site {
-  --cds-bg: hsl(222.2, 84%, 4.9%);
-  --cds-fg: hsl(210, 40%, 98%);
-  --cds-muted: hsl(215, 20.2%, 65.1%);
-  --cds-muted-bg: hsl(217.2, 32.6%, 17.5%);
-  --cds-border: hsl(217.2, 32.6%, 17.5%);
-  --cds-link: hsl(217.2, 91.2%, 59.8%);
-  --cds-primary: hsl(210, 40%, 98%);
-  --cds-primary-fg: hsl(222.2, 47.4%, 11.2%);
+  --cds-bg: var(--cedros-background, hsl(222.2, 84%, 4.9%));
+  --cds-fg: var(--cedros-foreground, hsl(210, 40%, 98%));
+  --cds-muted: var(--cedros-muted-foreground, hsl(215, 20.2%, 65.1%));
+  --cds-muted-bg: var(--cedros-muted, hsl(217.2, 32.6%, 17.5%));
+  --cds-border: var(--cedros-border, hsl(217.2, 32.6%, 17.5%));
+  --cds-link: var(--cedros-link, hsl(217.2, 91.2%, 59.8%));
+  --cds-primary: var(--cedros-primary, hsl(210, 40%, 98%));
+  --cds-primary-fg: var(--cedros-primary-foreground, hsl(222.2, 47.4%, 11.2%));
 }
 
 .cedros-site__container {
@@ -107,6 +107,50 @@
   gap: 0.45rem;
 }
 
+/* -- Nav layout modifiers ------------------------------------------------- */
+
+.cedros-site__header--full .cedros-site__container {
+  width: 100%;
+  max-width: none;
+  padding: 0 1.5rem;
+}
+
+.cedros-site__header--nav-center .cedros-site__nav {
+  flex: 1;
+  justify-content: center;
+  margin-left: 0;
+}
+
+.cedros-site__nav-link--text {
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
+  padding: 0.45rem 0.25rem;
+}
+
+.cedros-site__nav-link--text:hover {
+  background: transparent;
+  border-color: transparent;
+  text-decoration: underline;
+}
+
+.cedros-site__nav-link--text.cedros-site__nav-link--active {
+  background: transparent;
+  border-color: transparent;
+  color: var(--cds-link);
+  text-decoration: underline;
+}
+
+/* -- Footer layout modifiers ---------------------------------------------- */
+
+.cedros-site__footer--full .cedros-site__container {
+  width: 100%;
+  max-width: none;
+  padding: 0 1.5rem;
+}
+
+/* ------------------------------------------------------------------------- */
+
 .cedros-site__main {
   padding: 1.5rem 0 2.4rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedros/data-react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React components, page templates, and Next.js integration for cedros-data",
   "type": "module",
   "main": "./dist/react/index.js",