@xzibit/ui 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.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. |
 
 ---
 

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,26 @@ function BuildBadge({
     }
   );
 }
+
+// src/ContentContainer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TIER_STYLES = {
+  editorial: { maxWidth: 720, margin: "0 auto", padding: "3rem 2rem" },
+  reference: { maxWidth: 1200, margin: "0 auto", padding: "3rem 2rem" },
+  data: { maxWidth: "100%", margin: "0 auto", padding: "1.5rem 2rem" }
+};
+function ContentContainer({
+  tier = "reference",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: TIER_STYLES[tier], 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,50 @@ 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;
+    /** 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, 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,50 @@ 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;
+    /** 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, 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,25 @@ function BuildBadge({
     }
   );
 }
+
+// src/ContentContainer.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TIER_STYLES = {
+  editorial: { maxWidth: 720, margin: "0 auto", padding: "3rem 2rem" },
+  reference: { maxWidth: 1200, margin: "0 auto", padding: "3rem 2rem" },
+  data: { maxWidth: "100%", margin: "0 auto", padding: "1.5rem 2rem" }
+};
+function ContentContainer({
+  tier = "reference",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx5("div", { className, style: TIER_STYLES[tier], children });
+}
 export {
   AppsDropdown,
   BackToLauncher,
+  ContentContainer,
   TopBar,
   XzibitMark,
   normalizeApp,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xzibit/ui",
-  "version": "0.1.1",
+  "version": "0.2.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",