@xzibit/ui 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,44 @@
 
 All notable changes to `@xzibit/ui` are documented here. Format follows [Keep a Changelog](https://keepachangelog.com/) loosely; versioning follows [SemVer](https://semver.org/).
 
+## [0.3.0] — 2026-05-24
+
+### Added
+
+- **`disablePadding` prop on `<ContentContainer>`** — when `true`, renders no padding (only `max-width` + `margin: 0 auto`). For app-shell integration where the parent layout already provides padding (e.g. left-nav offset), preventing the tier padding from stacking and reducing effective content width.
+
+  ```tsx
+  <ContentContainer tier="reference" disablePadding>
+    {/* shell-managed padding flows through */}
+  </ContentContainer>
+  ```
+
+### Why
+
+ERP Overview Phase 1.13 (the canonical `<ContentContainer>` migration ship 2026-05-24) surfaced a left-nav stacking conflict: the per-page outer div uses `padding: '2.5rem 2.5rem 2.5rem 280px'` (left-nav offset), and stacking the container's `3rem 2rem` reduces effective width on wide monitors from the spec's 1200px to ~816px. Their resolution — `className="content-container--layout"` + `!important` padding zero — works but is a smell. `disablePadding` is the canonical API. Every left-nav-bearing portfolio app will hit this same conflict; this prop is the right answer for v0.3 before the portfolio-wide broadcast.
+
+### Backward compatible
+
+`disablePadding` defaults to `false`. v0.2.x adopters who don't set it see no change. v0.3+ is the recommended version for app-shell integration; v0.2.x is fine for page-level adoption where shell padding isn't a concern.
+
+---
+
+## [0.2.0] — 2026-05-24
+
+### Added
+
+- **`<ContentContainer tier="...">`** — implements DESIGN-STANDARD v2.4 §Content Density Tiers. Three tiers: `'editorial'` (720px), `'reference'` (1200px, DEFAULT), `'data'` (unconstrained with 32px side padding). Drop-in wrapper for `<main>` content. Per-page overrides via `tier` prop.
+- **`ContentTier`** type exported for app authors wanting to type tier props at their own layer.
+
+### Coming next
+
+- `<Toast />` + `useToast()` — wrapper around `sonner` per DESIGN-STANDARD §Toast / Notification (v2.2). Will ship as v0.2.1 once drafted.
+- `<Modal />` — wrapper around `@radix-ui/react-dialog` per DESIGN-STANDARD §Modal / Dialog (v2.2). Will ship as v0.2.2 once drafted.
+
+(Joel chose Option A 2026-05-24 — fast-ship v0.2.0 with just ContentContainer to unblock portfolio-wide adoption of the new content tier system. Toast + Modal ship as subsequent patches.)
+
+---
+
 ## [0.1.1] — 2026-05-24
 
 ### Fixed

package/README.md

@@ -146,6 +146,7 @@ This sets `--xz-charcoal`, `--xz-teal`, `--xz-white`, `--border`, etc. — and `
 | `<AppsDropdown />` | Sectioned + alphabetical apps dropdown driven by `/api/me/apps` |
 | `<XzibitMark size={28} />` | Xzibit X brand mark as inline SVG (any size, any density) |
 | `useApps()` | React hook fetching `/api/me/apps` with loading + error + refetch |
+| `<ContentContainer tier="reference">` *(v0.2+)* | Content max-width container per DESIGN-STANDARD v2.4 §Content Density Tiers — tiers: `'editorial'` (720px), `'reference'` (1200px, default), `'data'` (unconstrained). Wraps `<main>` content. v0.3+ adds `disablePadding` prop for app-shell integration where layout already provides padding (e.g. left-nav offset). |
 
 ---
 

package/dist/index.cjs

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   AppsDropdown: () => AppsDropdown,
   BackToLauncher: () => BackToLauncher,
+  ContentContainer: () => ContentContainer,
   TopBar: () => TopBar,
   XzibitMark: () => XzibitMark,
   normalizeApp: () => normalizeApp,
@@ -559,10 +560,37 @@ function BuildBadge({
     }
   );
 }
+
+// src/ContentContainer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TIER_MAX_WIDTH = {
+  editorial: 720,
+  reference: 1200,
+  data: "100%"
+};
+var TIER_PADDING = {
+  editorial: "3rem 2rem",
+  reference: "3rem 2rem",
+  data: "1.5rem 2rem"
+};
+function ContentContainer({
+  tier = "reference",
+  disablePadding = false,
+  className,
+  children
+}) {
+  const style = {
+    maxWidth: TIER_MAX_WIDTH[tier],
+    margin: "0 auto",
+    ...disablePadding ? {} : { padding: TIER_PADDING[tier] }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, children });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppsDropdown,
   BackToLauncher,
+  ContentContainer,
   TopBar,
   XzibitMark,
   normalizeApp,

package/dist/index.d.cts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 interface TopBarProps {
     /** App display name shown in the wordmark slot (e.g. "ERP Overview"). */
@@ -181,4 +182,66 @@ interface UseAppsOptions {
  */
 declare function useApps(options?: UseAppsOptions): UseAppsResult;
 
-export { type App, AppsDropdown, type AppsDropdownProps, type AppsResponse, BackToLauncher, type BackToLauncherProps, type RawApp, TopBar, type TopBarProps, type UseAppsOptions, type UseAppsResult, XzibitMark, type XzibitMarkProps, normalizeApp, useApps };
+/**
+ * Content density tier per DESIGN-STANDARD v2.4 §Content Density Tiers.
+ *
+ * - `'editorial'`: 720px max-width — marketing / public-facing docs / long-form prose
+ * - `'reference'` (DEFAULT): 1200px max-width — internal docs / wikis / dashboards / most app pages
+ * - `'data'`: unconstrained with 32px min side padding — wide tables / kanban / calendars / heatmaps
+ */
+type ContentTier = 'editorial' | 'reference' | 'data';
+interface ContentContainerProps {
+    /**
+     * Content density tier — picks max-width + padding.
+     * Defaults to `'reference'` (the portfolio default per v2.4).
+     */
+    tier?: ContentTier;
+    /**
+     * If `true`, render no padding — useful when the parent app shell already
+     * provides layout-level padding (e.g. left-nav offset).
+     *
+     * Default: `false` (tier padding is applied).
+     *
+     * **Common use case:** app-shell `layout.tsx` integration where the surrounding
+     * layout div sets `padding: '2.5rem 2.5rem 2.5rem 280px'` for left-nav offset.
+     * Without `disablePadding`, the container's `3rem 2rem` stacks with the shell
+     * padding and reduces effective content width (e.g. 1200px ContentContainer
+     * minus 64px container padding minus 320px shell padding ≈ 816px actual).
+     *
+     * Added in v0.3.0 (2026-05-24) after ERP Overview Phase 1.13 surfaced the
+     * left-nav stacking conflict.
+     */
+    disablePadding?: boolean;
+    /** Optional className for additional styling. */
+    className?: string;
+    /** Children to render inside the container. */
+    children: ReactNode;
+}
+/**
+ * Content container that applies the right max-width + padding for its content
+ * density tier per DESIGN-STANDARD v2.4 §Content Density Tiers.
+ *
+ * Per the spec:
+ * - Component override > page override > app default (most-specific wins)
+ * - Cards INHERIT the parent container's max-width — they do NOT set their own
+ *
+ * Typical app usage in `src/app/layout.tsx`:
+ *
+ * ```tsx
+ * <main id="main" style={{ marginTop: 44 }}>
+ *   <ContentContainer>{children}</ContentContainer>
+ * </main>
+ * ```
+ *
+ * Per-page override (rare):
+ *
+ * ```tsx
+ * // A wide-table page within an otherwise-reference app
+ * <ContentContainer tier="data">
+ *   <DataTable ... />
+ * </ContentContainer>
+ * ```
+ */
+declare function ContentContainer({ tier, disablePadding, className, children, }: ContentContainerProps): react_jsx_runtime.JSX.Element;
+
+export { type App, AppsDropdown, type AppsDropdownProps, type AppsResponse, BackToLauncher, type BackToLauncherProps, ContentContainer, type ContentContainerProps, type ContentTier, type RawApp, TopBar, type TopBarProps, type UseAppsOptions, type UseAppsResult, XzibitMark, type XzibitMarkProps, normalizeApp, useApps };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 interface TopBarProps {
     /** App display name shown in the wordmark slot (e.g. "ERP Overview"). */
@@ -181,4 +182,66 @@ interface UseAppsOptions {
  */
 declare function useApps(options?: UseAppsOptions): UseAppsResult;
 
-export { type App, AppsDropdown, type AppsDropdownProps, type AppsResponse, BackToLauncher, type BackToLauncherProps, type RawApp, TopBar, type TopBarProps, type UseAppsOptions, type UseAppsResult, XzibitMark, type XzibitMarkProps, normalizeApp, useApps };
+/**
+ * Content density tier per DESIGN-STANDARD v2.4 §Content Density Tiers.
+ *
+ * - `'editorial'`: 720px max-width — marketing / public-facing docs / long-form prose
+ * - `'reference'` (DEFAULT): 1200px max-width — internal docs / wikis / dashboards / most app pages
+ * - `'data'`: unconstrained with 32px min side padding — wide tables / kanban / calendars / heatmaps
+ */
+type ContentTier = 'editorial' | 'reference' | 'data';
+interface ContentContainerProps {
+    /**
+     * Content density tier — picks max-width + padding.
+     * Defaults to `'reference'` (the portfolio default per v2.4).
+     */
+    tier?: ContentTier;
+    /**
+     * If `true`, render no padding — useful when the parent app shell already
+     * provides layout-level padding (e.g. left-nav offset).
+     *
+     * Default: `false` (tier padding is applied).
+     *
+     * **Common use case:** app-shell `layout.tsx` integration where the surrounding
+     * layout div sets `padding: '2.5rem 2.5rem 2.5rem 280px'` for left-nav offset.
+     * Without `disablePadding`, the container's `3rem 2rem` stacks with the shell
+     * padding and reduces effective content width (e.g. 1200px ContentContainer
+     * minus 64px container padding minus 320px shell padding ≈ 816px actual).
+     *
+     * Added in v0.3.0 (2026-05-24) after ERP Overview Phase 1.13 surfaced the
+     * left-nav stacking conflict.
+     */
+    disablePadding?: boolean;
+    /** Optional className for additional styling. */
+    className?: string;
+    /** Children to render inside the container. */
+    children: ReactNode;
+}
+/**
+ * Content container that applies the right max-width + padding for its content
+ * density tier per DESIGN-STANDARD v2.4 §Content Density Tiers.
+ *
+ * Per the spec:
+ * - Component override > page override > app default (most-specific wins)
+ * - Cards INHERIT the parent container's max-width — they do NOT set their own
+ *
+ * Typical app usage in `src/app/layout.tsx`:
+ *
+ * ```tsx
+ * <main id="main" style={{ marginTop: 44 }}>
+ *   <ContentContainer>{children}</ContentContainer>
+ * </main>
+ * ```
+ *
+ * Per-page override (rare):
+ *
+ * ```tsx
+ * // A wide-table page within an otherwise-reference app
+ * <ContentContainer tier="data">
+ *   <DataTable ... />
+ * </ContentContainer>
+ * ```
+ */
+declare function ContentContainer({ tier, disablePadding, className, children, }: ContentContainerProps): react_jsx_runtime.JSX.Element;
+
+export { type App, AppsDropdown, type AppsDropdownProps, type AppsResponse, BackToLauncher, type BackToLauncherProps, ContentContainer, type ContentContainerProps, type ContentTier, type RawApp, TopBar, type TopBarProps, type UseAppsOptions, type UseAppsResult, XzibitMark, type XzibitMarkProps, normalizeApp, useApps };

package/dist/index.js

@@ -528,9 +528,36 @@ function BuildBadge({
     }
   );
 }
+
+// src/ContentContainer.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TIER_MAX_WIDTH = {
+  editorial: 720,
+  reference: 1200,
+  data: "100%"
+};
+var TIER_PADDING = {
+  editorial: "3rem 2rem",
+  reference: "3rem 2rem",
+  data: "1.5rem 2rem"
+};
+function ContentContainer({
+  tier = "reference",
+  disablePadding = false,
+  className,
+  children
+}) {
+  const style = {
+    maxWidth: TIER_MAX_WIDTH[tier],
+    margin: "0 auto",
+    ...disablePadding ? {} : { padding: TIER_PADDING[tier] }
+  };
+  return /* @__PURE__ */ jsx5("div", { className, style, children });
+}
 export {
   AppsDropdown,
   BackToLauncher,
+  ContentContainer,
   TopBar,
   XzibitMark,
   normalizeApp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xzibit/ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Shared chrome components for the Xzibit Apps portfolio. v0.1: TopBar + BackToLauncher + AppsDropdown + XzibitMark + useApps hook. Single source of truth for portfolio chrome — tweak once, every app picks it up on next deploy.",
   "license": "MIT",
   "author": "Xzibit Apps",