@the-portland-company/shell 0.68.0 → 0.69.0

package/dist/index.cjs

@@ -848,43 +848,8 @@ function Card({
     }
   );
 }
-function PageContainer({
-  children,
-  maxW = "container.xl",
-  px,
-  py,
-  lockHeight = true
-}) {
-  const isFullWidth = maxW === "full";
-  const effectivePx = isFullWidth ? 0 : px === void 0 ? 4 : Number(px);
-  const effectivePy = py === void 0 ? isFullWidth ? 0 : 4 : py;
-  const pxValue = String(effectivePx);
-  const pyValue = String(effectivePy);
-  const maxWClass = isFullWidth ? "max-w-none" : maxW === "container.xl" ? "max-w-7xl" : maxW === "container.lg" ? "max-w-6xl" : maxW === "container.md" ? "max-w-5xl" : typeof maxW === "string" && /^(\d+)px$/.test(maxW) ? "" : "max-w-7xl";
-  const pxClass = pxValue === "0" ? "px-0" : pxValue === "1" ? "px-1" : pxValue === "2" ? "px-2" : pxValue === "3" ? "px-3" : pxValue === "4" ? "px-4" : "px-4";
-  const pyClass = pyValue === "0" ? "py-0" : pyValue === "4" ? "py-4" : pyValue === "5" ? "py-5" : pyValue === "6" ? "py-6" : "py-6";
-  const inlineMaxWStyle = typeof maxW === "string" && /^(\d+)px$/.test(maxW) ? { maxWidth: maxW } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "main",
-    {
-      className: lockHeight ? "h-[calc(100vh-80px)] min-h-[calc(100vh-80px)]" : "",
-      style: { background: "var(--app-tab-content-bg)" },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: clsx2__default.default(
-            "mx-auto w-full",
-            maxWClass,
-            pxClass,
-            pyClass,
-            lockHeight ? "h-full" : "h-auto"
-          ),
-          style: inlineMaxWStyle,
-          children
-        }
-      )
-    }
-  );
+function FormColumn({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-shell-form-column": "", className: clsx2__default.default("w-full max-w-[960px]", className), children });
 }
 var resolveMaxWidthClass = (maxW) => {
   if (maxW === "full") return "max-w-none";
@@ -948,11 +913,72 @@ function PageHeader({
     }
   );
 }
+
+// src/lib/deprecation.ts
+var warned = /* @__PURE__ */ new Set();
+function isDev() {
+  try {
+    return typeof process !== "undefined" && process.env?.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+function warnDeprecated(key, message) {
+  if (!isDev() || warned.has(key)) return;
+  warned.add(key);
+  console.warn(`[@the-portland-company/shell] ${message}`);
+}
+function PageContainer({
+  children,
+  maxW = "container.xl",
+  px,
+  py,
+  lockHeight = true
+}) {
+  warnDeprecated(
+    "PageContainer",
+    "<PageContainer> is deprecated for apps: the frame owns a fluid <main>. Render content directly inside <PolitogyAppFrame>, and use <FormColumn> for form/settings pages."
+  );
+  const isFullWidth = maxW === "full";
+  const effectivePx = isFullWidth ? 0 : px === void 0 ? 4 : Number(px);
+  const effectivePy = py === void 0 ? isFullWidth ? 0 : 4 : py;
+  const pxValue = String(effectivePx);
+  const pyValue = String(effectivePy);
+  const maxWClass = isFullWidth ? "max-w-none" : maxW === "container.xl" ? "max-w-7xl" : maxW === "container.lg" ? "max-w-6xl" : maxW === "container.md" ? "max-w-5xl" : typeof maxW === "string" && /^(\d+)px$/.test(maxW) ? "" : "max-w-7xl";
+  const pxClass = pxValue === "0" ? "px-0" : pxValue === "1" ? "px-1" : pxValue === "2" ? "px-2" : pxValue === "3" ? "px-3" : pxValue === "4" ? "px-4" : "px-4";
+  const pyClass = pyValue === "0" ? "py-0" : pyValue === "4" ? "py-4" : pyValue === "5" ? "py-5" : pyValue === "6" ? "py-6" : "py-6";
+  const inlineMaxWStyle = typeof maxW === "string" && /^(\d+)px$/.test(maxW) ? { maxWidth: maxW } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "main",
+    {
+      className: lockHeight ? "h-[calc(100vh-80px)] min-h-[calc(100vh-80px)]" : "",
+      style: { background: "var(--app-tab-content-bg)" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx2__default.default(
+            "mx-auto w-full",
+            maxWClass,
+            pxClass,
+            pyClass,
+            lockHeight ? "h-full" : "h-auto"
+          ),
+          style: inlineMaxWStyle,
+          children
+        }
+      )
+    }
+  );
+}
 function BreadcrumbBar({
   breadcrumbs = [],
   actions = null,
   maxW = "full"
 }) {
+  warnDeprecated(
+    "BreadcrumbBar",
+    "<BreadcrumbBar> is deprecated for apps: the breadcrumb trail is retired. Use the page header (mode eyebrow + title) instead."
+  );
   if ((!breadcrumbs || breadcrumbs.length === 0) && !actions) {
     return null;
   }
@@ -979,6 +1005,10 @@ function HeaderTabBar({
   className,
   ariaLabel = "Tabs"
 }) {
+  warnDeprecated(
+    "HeaderTabBar",
+    "<HeaderTabBar> is deprecated: use <NavTabStrip> from @the-portland-company/shell/native, the canonical page tab strip."
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1559,6 +1589,7 @@ exports.BrandIcon = BrandIcon;
 exports.BrandLogo = BrandLogo;
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Card = Card;
+exports.FormColumn = FormColumn;
 exports.GlobalUiIdProvider = GlobalUiIdProvider;
 exports.HeaderTabBar = HeaderTabBar;
 exports.PageContainer = PageContainer;