@gravitee/graphene-core 2.51.0 → 2.52.0-feat-layout-content-width-tiers.35c2ff9

package/USAGE_GUIDE.md

@@ -141,9 +141,62 @@ Scale: `0`, `0.5`, `1`, `1.5`, `2`, `2.5`, `3`, `3.5`, `4`, `5`, `6`, `7`, `8`,
 
 `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl` (mapped to semantic `--radius`).
 
-### Layout
+### Layout — content width system
 
-- Content max width is defined on the theme token `--container-content` (maps to `--content-max-width`). Use the max-width utility Tailwind emits for that token in your setup.
+The layout uses a single default container (100rem / 1600px, left-aligned) with two content wrappers for narrower pages:
+
+| Layer | Token | Rem | Tailwind class | When to use |
+|-------|-------|-----|----------------|-------------|
+| Container (default) | `--content-max-width` | `100rem` | `max-w-content` | The shell container. Applied automatically by `AppLayout`. |
+| Full-bleed | N/A | none | N/A | Tool layouts (Policy Studio), observability pages. Set via `useLayoutConfig({ contentVariant: 'full-bleed' })`. |
+| `<PageSection>` | `--content-form-width` | `80rem` | `max-w-form` | Form pages, settings, config views. Wrap page content in this component. |
+| `<PageFocused>` | `--content-focused-width` | `56rem` | `max-w-focused` | Creation wizards, steppers, onboarding flows. Wrap page content in this component. |
+
+**Decision flowchart:**
+
+1. Is this a tool/workspace layout (Policy Studio, LLM Studio, observability)? → `useLayoutConfig({ contentVariant: 'full-bleed' })`
+2. Is this a creation wizard or stepper? → Wrap content in `<PageFocused>`
+3. Is the page primarily forms, settings, or card-based config? → Wrap content in `<PageSection>`
+4. Is the page primarily a DataTable, entity list, or dashboard? → No wrapper needed (fills the 100rem container)
+5. Not sure? → No wrapper. The default container handles most content well.
+
+Content is **left-aligned** (not centered). Width changes between pages only affect the right edge, keeping the left anchor stable during navigation.
+
+```tsx
+import { PageSection, PageFocused } from '@gravitee/graphene-core';
+
+// Form/settings page
+function GeneralSettingsPage() {
+  return (
+    <PageSection>
+      <h2>General</h2>
+      <form>...</form>
+    </PageSection>
+  );
+}
+
+// Wizard/creation page
+function CreateApiPage() {
+  return (
+    <PageFocused>
+      <StepProgress steps={steps} activeStep={step} />
+      <StepContent />
+    </PageFocused>
+  );
+}
+
+// Table page — no wrapper needed
+function ApisPage() {
+  return (
+    <div className="space-y-4">
+      <h2>APIs</h2>
+      <DataTable ... />
+    </div>
+  );
+}
+```
+
+All width values are defined in `rem` so they scale with user font-size preferences and browser zoom. Consumers do not set `max-w-*` classes directly on page wrappers — use the provided components instead.
 
 ## Styling
 
@@ -293,27 +346,108 @@ If you have not migrated to `AppContextBar` yet, keeping the app name as the fir
 
 **Linear breadcrumbs:** When each step maps to a **path string** and React Router’s `navigate`, use **`buildLinearBreadcrumbs(navigate, segments)`** so `ContentHeader` / `useLayoutConfig` get consistent `BreadcrumbEntry[]` without copying the same `onClick` wiring. If the first crumb is a **custom action** (e.g. “back” that is not `navigate('/path')`), build that entry by hand or mix with `buildLinearBreadcrumbs`—see Storybook **Composed/ContentHeader → Linear breadcrumbs from builder** for the canonical route-based pattern. API edge cases are covered in `packages/core/src/lib/breadcrumbs/buildLinearBreadcrumbs.test.ts`.
 
-### `contentVariant` — full-bleed content
+### `contentVariant` — content width tiers
+
+`AppLayout` accepts `contentVariant` to control content area width and padding:
+
+- `"default"` (default) — `max-w-content` (80rem) with standard padding. Most pages.
+- `"wide"` — `max-w-wide` (100rem) with standard padding. DataTable list pages.
+- `"full-bleed"` — no max-width, no padding; content spans edge-to-edge. Tool layouts and observability pages.
+
+```tsx
+// Default (80rem) — no change needed, AppLayout applies it automatically
+<AppLayout>
+  <DetailPage />
+</AppLayout>
+
+// Wide (100rem) — for DataTable list pages, add one line
+useLayoutConfig({ contentVariant: 'wide' }, []);
+
+// Full-bleed — for tool layouts and observability pages
+useLayoutConfig({ contentVariant: 'full-bleed' }, []);
+```
+
+With `useLayoutConfig` (module federation), a nested page can set `contentVariant` without affecting other layout slots owned by parent components. Each hook only resets the keys it owns on unmount.
+
+#### Artifact-free page transitions
+
+When navigating between pages with different `contentVariant` values, wrap the navigation action in `startLayoutTransition` to eliminate visual overlap artifacts during DOM reconciliation:
+
+```tsx
+import { startLayoutTransition } from '@gravitee/graphene-core';
+
+// In your router or navigation handler (called once, not per-page):
+function useAppNavigate() {
+  const navigate = useNavigate();
+  return useCallback((to: string) => {
+    startLayoutTransition(() => navigate(to));
+  }, [navigate]);
+}
+```
+
+This uses the View Transitions API to capture the old visual state before applying DOM changes, preventing any intermediate "two pages visible" flash. No visible animation is produced; the swap is perceptually instant. Falls back to direct execution in browsers without View Transitions API support.
 
-`AppLayout` accepts `contentVariant` to control content area padding:
+When the user has **Reduce motion** enabled at the OS level (`prefers-reduced-motion: reduce`), view-transition animation duration is `0ms` and navigation is fully instant.
 
-- `"default"` (default) — standard padding on all sides.
-- `"full-bleed"` — no padding; content spans edge-to-edge.
+### `banner` — full-width status slot
 
-Use `full-bleed` for embedded components that manage their own layout grid (Policy Studio, dashboards, full-screen editors):
+`AppLayout` accepts a `banner` prop that renders a full-width region above the padded content wrapper but inside the scroll container. Use it for persistent status indicators with an action (deploy status, environment warnings).
 
 ```tsx
-<AppLayout contentVariant="full-bleed">
-  <PolicyStudio {...props} />
+// Direct prop usage
+<AppLayout banner={<DeployStrip />} bannerSticky>
+  <PageContent />
 </AppLayout>
+
+// Module federation via useLayoutConfig
+useLayoutConfig({
+  banner: deployState === 'NEED_REDEPLOY' ? (
+    <DeployStrip onDeploy={handleDeploy} isPending={isPending} />
+  ) : null,
+  bannerSticky: true,
+}, [deployState, handleDeploy, isPending]);
 ```
 
-With `useLayoutConfig` (module federation), a nested page can set `contentVariant` without affecting other layout slots owned by parent components:
+The banner spans full width regardless of `contentVariant`. When `bannerSticky` is true, it sticks to the top of the scroll area so the action remains reachable while scrolling.
+
+**Button hierarchy:** When a banner contains an action button alongside page content that has its own primary buttons, use an outline treatment on the banner button to avoid competing with the page's primary CTA:
 
 ```tsx
-useLayoutConfig({ contentVariant: 'full-bleed' }, []);
+function DeployStrip({ onDeploy, isPending }) {
+  return (
+    <div className="flex items-center gap-2 border-b border-border px-5 py-1.5">
+      <span className="size-1.5 shrink-0 rounded-full bg-warning" />
+      <span className="text-sm text-muted-foreground">Undeployed changes</span>
+      <div className="flex-1" />
+      <button
+        type="button"
+        className="rounded-md border border-warning/25 bg-warning/5 px-2.5 py-0.5 text-sm font-semibold text-warning-foreground transition-colors hover:bg-warning/10 disabled:opacity-50"
+        onClick={onDeploy}
+        disabled={isPending}
+      >
+        {isPending ? 'Deploying…' : 'Deploy API'}
+      </button>
+    </div>
+  );
+}
 ```
 
+See Storybook **Composed/AppLayout → BannerSlot** for the full interactive example.
+
+### Adopting content width tiers in consumer modules
+
+Follow these steps to apply the layout tier system to an existing consumer module:
+
+1. **Identify all pages** in your module that render inside `AppLayout`.
+2. **Categorize each page:**
+   - **Default** — detail views, edit forms, overviews, settings, creation wizards. No change needed; `AppLayout` applies `max-w-content` (80rem) automatically.
+   - **Wide** — any page whose primary content is a `DataTable`. Add `useLayoutConfig({ contentVariant: 'wide' }, [])` at the top of the component.
+   - **Full-bleed** — tool layouts (Policy Studio) or observability pages (dashboards, explorers). Add `useLayoutConfig({ contentVariant: 'full-bleed' }, [])` if not already set.
+3. **Remove ad-hoc width constraints** — delete any `max-w-*` classes on page-level wrapper divs. The design system owns content width.
+4. **Verify** — resize the browser to confirm content centers correctly on wide viewports and doesn't clip on narrow ones.
+
+See `packages/core/snippets/data-table-list-page.tsx` for a complete list-page example with `useLayoutConfig`.
+
 ### Data table (entity list pages)
 
 Use `DataTable` for any entity list — whether the data is fetched page-by-page from an API or loaded in full on the client. The component provides sorting, filtering, pagination, column visibility, row selection, and bulk actions through a composable slot API.

package/dist/composed/AppLayout/AppLayout.d.ts

@@ -18,11 +18,24 @@ interface AppLayoutProps {
     /** Optional callback when context expansion state changes. */
     readonly onContextExpandedChange?: (expanded: boolean) => void;
     /**
-     * Controls content area padding.
-     * - `"default"` — standard padding on all sides (the default).
-     * - `"full-bleed"` — no padding; content spans edge-to-edge.
+     * Controls content area width and padding.
+     * - `"default"` — `max-w-content` (100rem) left-aligned with standard padding.
+     * - `"full-bleed"` — no max-width, no padding; content spans edge-to-edge.
+     *
+     * Pages that need narrower content (forms, wizards) use `<PageSection>` or
+     * `<PageFocused>` wrappers inside the default container.
+     *
+     * @deprecated `"wide"` is accepted for backward compatibility but is equivalent to `"default"`.
      */
-    readonly contentVariant?: 'default' | 'full-bleed';
+    readonly contentVariant?: 'default' | 'wide' | 'full-bleed';
+    /**
+     * Full-width banner rendered above the padded content area.
+     * Sits inside the scroll container but outside the content padding wrapper,
+     * so it spans edge-to-edge regardless of `contentVariant`.
+     */
+    readonly banner?: ReactNode;
+    /** When true the banner sticks to the top of the scroll container. Defaults to `false`. */
+    readonly bannerSticky?: boolean;
     /**
      * When true the layout spans the full viewport height.
      * Defaults to `true` (sidebar-dominant shell).

package/dist/composed/AppLayout/AppLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/composed/AppLayout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAC;AAGtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAEhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAGhF,UAAU,cAAc;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,sDAAsD;IACtD,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC/B,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACzC,iEAAiE;IACjE,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,8DAA8D;IAC9D,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D;;;;OAIG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACnD;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC1C,kDAAkD;IAClD,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;CACnC;AA4FD,iBAAS,SAAS,CAAC,EAAE,kBAAmC,EAAE,YAAuB,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAQ3G;kBARQ,SAAS;;;AAYlB,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/composed/AppLayout/AppLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,SAAS,EAA6B,MAAM,OAAO,CAAC;AAGtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,8CAA8C,CAAC;AAEhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAC;AAGhF,UAAU,cAAc;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B,sDAAsD;IACtD,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,6EAA6E;IAC7E,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC/B,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACzC,iEAAiE;IACjE,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,8DAA8D;IAC9D,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/D;;;;;;;;;OASG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;IAC5D;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,2FAA2F;IAC3F,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC1C,kDAAkD;IAClD,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;CACnC;AAmGD,iBAAS,SAAS,CAAC,EAAE,kBAAmC,EAAE,YAAuB,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,+BAQ3G;kBARQ,SAAS;;;AAYlB,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}

package/dist/composed/LayoutSlots/LayoutSlotsContext.d.ts

@@ -8,7 +8,17 @@ interface LayoutSlots {
     readonly leading: ReactNode;
     readonly viewMode: 'global' | 'context';
     readonly contextExpanded: boolean;
-    readonly contentVariant: 'default' | 'full-bleed';
+    /**
+     * `"default"` — 100rem left-aligned with padding (use for all standard pages).
+     * `"full-bleed"` — no max-width, no padding (tool layouts like Policy Studio).
+     *
+     * @deprecated `"wide"` is accepted for backward compatibility but equivalent to `"default"`.
+     */
+    readonly contentVariant: 'default' | 'wide' | 'full-bleed';
+    /** Full-width banner rendered above the padded content area (e.g. deploy status, environment warnings). */
+    readonly banner: ReactNode;
+    /** When true the banner sticks to the top of the scroll container. */
+    readonly bannerSticky: boolean;
 }
 interface LayoutSlotsContextValue {
     readonly slots: LayoutSlots;

package/dist/composed/LayoutSlots/LayoutSlotsContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutSlotsContext.d.ts","sourceRoot":"","sources":["../../../src/composed/LayoutSlots/LayoutSlotsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAC;AAClG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAEtF,UAAU,WAAW;IACnB,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC;IAC/B,QAAQ,CAAC,cAAc,EAAE,SAAS,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,eAAe,EAAE,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,cAAc,EAAE,SAAS,GAAG,YAAY,CAAC;CACnD;AAED,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,MAAM,WAAW,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACvF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,WAAW,CAAC,KAAK,IAAI,CAAC;CACvE;AAED,QAAA,MAAM,aAAa,EAAE,WAQpB,CAAC;AAIF,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAwB1E;AAED,iBAAS,cAAc,IAAI,uBAAuB,CAMjD;AAED,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"LayoutSlotsContext.d.ts","sourceRoot":"","sources":["../../../src/composed/LayoutSlots/LayoutSlotsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAC;AAClG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAEtF,UAAU,WAAW;IACnB,QAAQ,CAAC,UAAU,EAAE,SAAS,CAAC;IAC/B,QAAQ,CAAC,cAAc,EAAE,SAAS,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,eAAe,EAAE,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IACxC,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAC;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,EAAE,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;IAC3D,2GAA2G;IAC3G,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,sEAAsE;IACtE,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAC;CAChC;AAED,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,MAAM,WAAW,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IACvF,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,UAAU,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,MAAM,WAAW,CAAC,KAAK,IAAI,CAAC;CACvE;AAED,QAAA,MAAM,aAAa,EAAE,WAUpB,CAAC;AAIF,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAwB1E;AAED,iBAAS,cAAc,IAAI,uBAAuB,CAMjD;AAED,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/composed/LayoutSlots/use-layout-config.d.ts

@@ -7,6 +7,9 @@ import { LayoutSlots } from './LayoutSlotsContext';
  * **Resets all slots to defaults on unmount** so stale module content
  * never lingers after navigation.
  *
+ * Uses `useLayoutEffect` to apply config synchronously before paint,
+ * preventing visible layout shifts during navigation.
+ *
  * @param config - Slot values the module wants to own.
  * @param deps   - Dependency array that triggers a config re-push
  *                 (same semantics as `useEffect` deps).

package/dist/composed/LayoutSlots/use-layout-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-layout-config.d.ts","sourceRoot":"","sources":["../../../src/composed/LayoutSlots/use-layout-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,IAAI,GAAE,KAAK,CAAC,cAAmB,QAYrF;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"use-layout-config.d.ts","sourceRoot":"","sources":["../../../src/composed/LayoutSlots/use-layout-config.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,eAAe,CAAC,MAAM,EAAE,OAAO,CAAC,WAAW,CAAC,EAAE,IAAI,GAAE,KAAK,CAAC,cAAmB,QAYrF;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/composed/PageContent/PageContent.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+interface PageSectionProps {
+    /** Page content (forms, settings panels, card layouts). */
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+/**
+ * Constrains page content to a comfortable form width (80rem / 1280px),
+ * left-aligned within the default 100rem container.
+ *
+ * Use for settings pages, configuration forms, detail overviews, and
+ * any page where the primary content is NOT a full-width DataTable.
+ *
+ * @example
+ * ```tsx
+ * export function GeneralSettingsPage() {
+ *   return (
+ *     <PageSection>
+ *       <h2>General</h2>
+ *       <form>...</form>
+ *     </PageSection>
+ *   );
+ * }
+ * ```
+ */
+declare function PageSection({ children, className }: PageSectionProps): import("react").JSX.Element;
+declare namespace PageSection {
+    var displayName: string;
+}
+interface PageFocusedProps {
+    /** Focused content (stepper, creation wizard, onboarding flow). */
+    readonly children: ReactNode;
+    readonly className?: string;
+}
+/**
+ * Constrains and centers page content for focused flows (56rem / 896px).
+ *
+ * Use for creation wizards, multi-step forms, onboarding sequences, and
+ * any task where the user is working through a focused linear flow.
+ * The centering signals "you are in a sub-task" and draws the eye inward.
+ *
+ * @example
+ * ```tsx
+ * export function CreateApiWizardPage() {
+ *   return (
+ *     <PageFocused>
+ *       <StepProgress steps={steps} activeStep={step} />
+ *       <StepContent />
+ *     </PageFocused>
+ *   );
+ * }
+ * ```
+ */
+declare function PageFocused({ children, className }: PageFocusedProps): import("react").JSX.Element;
+declare namespace PageFocused {
+    var displayName: string;
+}
+export { PageFocused, PageSection };
+export type { PageFocusedProps, PageSectionProps };
+//# sourceMappingURL=PageContent.d.ts.map

package/dist/composed/PageContent/PageContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageContent.d.ts","sourceRoot":"","sources":["../../../src/composed/PageContent/PageContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,UAAU,gBAAgB;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAE7D;kBAFQ,WAAW;;;AAMpB,UAAU,gBAAgB;IACxB,mEAAmE;IACnE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAE7D;kBAFQ,WAAW;;;AAMpB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AACpC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/composed/PageContent/index.d.ts

@@ -0,0 +1,3 @@
+export { PageFocused, PageSection } from './PageContent';
+export type { PageFocusedProps, PageSectionProps } from './PageContent';
+//# sourceMappingURL=index.d.ts.map

package/dist/composed/PageContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/PageContent/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { cn } from './lib/utils';
 export { PortalContainerProvider, usePortalContainer } from './lib/PortalContainerContext';
+export { startLayoutTransition } from './lib/view-transitions';
 export * from './base/Accordion';
 export * from './base/Alert';
 export * from './base/Avatar';
@@ -62,6 +63,7 @@ export * from './composed/FacetedFilter';
 export * from './composed/FileUpload';
 export * from './composed/JsonSchemaForm';
 export * from './composed/LayoutSlots';
+export * from './composed/PageContent';
 export * from './composed/PasswordInput';
 export * from './composed/SelectorDropdown';
 export * from './composed/SidebarMode';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AAMvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,0CAA0C,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAG/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AAMvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EACL,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,0CAA0C,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC"}