@xzibit/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

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

package/README.md

@@ -146,7 +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. |
+| `<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

@@ -563,17 +563,28 @@ 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" }
+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
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style: TIER_STYLES[tier], 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 = {

package/dist/index.d.cts

@@ -196,6 +196,22 @@ interface ContentContainerProps {
      * 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. */
@@ -226,6 +242,6 @@ interface ContentContainerProps {
  * </ContentContainer>
  * ```
  */
-declare function ContentContainer({ tier, className, children, }: ContentContainerProps): react_jsx_runtime.JSX.Element;
+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

@@ -196,6 +196,22 @@ interface ContentContainerProps {
      * 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. */
@@ -226,6 +242,6 @@ interface ContentContainerProps {
  * </ContentContainer>
  * ```
  */
-declare function ContentContainer({ tier, className, children, }: ContentContainerProps): react_jsx_runtime.JSX.Element;
+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

@@ -531,17 +531,28 @@ 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" }
+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
 }) {
-  return /* @__PURE__ */ jsx5("div", { className, style: TIER_STYLES[tier], 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,

package/package.json

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