@flamingo-stack/openframe-frontend-core 0.0.702 → 0.0.703-snapshot.20261006080901

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   SoftwareInfo,
   SoftwareSourceBadge,
   ToolBadge
-} from "./chunk-PLK6GHN7.js";
+} from "./chunk-I7DFUQMN.js";
 import {
   AppHeader,
   AppLayout,
@@ -29,14 +29,14 @@ import {
   SlidingSidebar,
   TicketAlertsButton,
   TopNavigation
-} from "./chunk-SAA7B3DA.js";
+} from "./chunk-2G546OND.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useSectionNavigation
-} from "./chunk-HYFLTFFB.js";
-import "./chunk-RS7HWAYX.js";
+} from "./chunk-ZQFZSFQI.js";
+import "./chunk-7LFIKJX2.js";
 import {
   AIEnrichButton,
   AIEnrichSection,
@@ -665,7 +665,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-CZ34HXDW.js";
+} from "./chunk-4KGXLVCF.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";
 import {
@@ -783,7 +783,7 @@ import {
   validateSchema,
   validateVariables,
   variablesToUrlParams
-} from "./chunk-KJ5LWATV.js";
+} from "./chunk-IHU5ANUY.js";
 import "./chunk-HFL2F4RM.js";
 import {
   CONTENT_REF_GROUPS,
@@ -791,7 +791,7 @@ import {
   getContentRefLabel,
   getContentRefLabelOrTitleCase,
   orderContentRefTypes
-} from "./chunk-HUMWQMCU.js";
+} from "./chunk-UT4YHQZW.js";
 import {
   PAGE_PARAM_LIMITS,
   clampPageToTotal,
@@ -805,7 +805,7 @@ import {
   serializeSchemaParams,
   shouldIncludeInUrl,
   withQuery
-} from "./chunk-Q76ZTHNV.js";
+} from "./chunk-MP2C3LJ4.js";
 import {
   Checkbox
 } from "./chunk-PLWMIU72.js";
@@ -936,6 +936,7 @@ import {
   MAX_PENDING_RETAIN_KEYS,
   MESSAGE_ROLE,
   MESSAGE_TYPE,
+  MINGO_V2_RAIL_WIDTH,
   MUX_IMAGE_ORIGIN,
   MUX_STREAM_ORIGIN,
   MarkdownEngine,
@@ -944,8 +945,11 @@ import {
   MemoizedChatMessageEnhanced,
   MermaidDiagram,
   MessageSegmentAccumulator,
+  MingoArchiveList,
+  MingoChatHeader,
   MingoChatHistory,
   MingoChatHistorySkeleton,
+  MingoChatRail,
   MingoHistoryRail,
   MingoOnboardingCard,
   MingoOnboardingCardSkeleton,
@@ -1200,7 +1204,7 @@ import {
   useVideoOriginPreconnect,
   useVideoWarmup,
   usesCanonicalStatusStyle
-} from "./chunk-6JPQDYYY.js";
+} from "./chunk-2JDVL7UV.js";
 import {
   HEADING_EMOJI_RE,
   HUB_HEADER_OFFSET_PX,
@@ -1210,7 +1214,6 @@ import {
   STICKY_HEADER_OFFSET_PX,
   ToolIcon,
   ToolTypeValues,
-  breakpoints,
   clamp,
   createFenceTracker,
   createHeadingIdDeduper,
@@ -1237,17 +1240,13 @@ import {
   useDebounce,
   useHeaderHeight,
   useInView,
-  useLgUp,
   useMarqueeEngine,
-  useMdUp,
-  useMediaQuery,
   useNearViewport,
   usePrefersReducedMotion,
   usePrefersReducedMotionState,
   useResetOnPageHidden,
-  useSmUp,
   useSuppressCloneFocus
-} from "./chunk-64O4L7WN.js";
+} from "./chunk-WUJNYGO2.js";
 import "./chunk-GY4IZG22.js";
 import {
   AboutIcon,
@@ -1614,20 +1613,25 @@ import {
   urlPathLooksLikeSvg,
   useCoverImageFallback,
   webinarTiming
-} from "./chunk-6YCXA7CN.js";
+} from "./chunk-CH5232HV.js";
 import "./chunk-FBZMAPWO.js";
 import {
+  CONTENT_BREAKPOINTS,
+  ContentAreaWidthContext,
   EMBED_PROXY_OPTIONAL_HEADERS,
   ODS_STEM_CLASSES,
   ODS_STEM_TOKENS,
   PLATFORM_BRAND,
   PLATFORM_SURFACE,
   PLATFORM_THEME,
+  ViewportBreakpoints,
   applyProxyAuth,
+  breakpoints,
   buildOgPlaceholderUrl,
   clearAuthedAssetCache,
   clearAuthedImageCache,
   clearEmbedProxyAuth,
+  contentBreakpointFor,
   embedAuthedFetch,
   getDefaultColorForPlatform,
   getDefaultIconForPlatform,
@@ -1659,11 +1663,18 @@ import {
   setEmbedProxyAuth,
   useAuthedAssetSrc,
   useAuthedImageSrc,
+  useContentBreakpoint,
+  useContentLgUp,
+  useContentMdUp,
   useImageEdgeColor,
   useIsTruncated,
   useIsomorphicLayoutEffect,
-  useOgPlaceholderUrl
-} from "./chunk-2T6QWNXU.js";
+  useLgUp,
+  useMdUp,
+  useMediaQuery,
+  useOgPlaceholderUrl,
+  useSmUp
+} from "./chunk-NDESEPW5.js";
 import {
   FigmaIcon,
   ImageIcon,
@@ -1704,7 +1715,7 @@ import {
   SkeletonList,
   SkeletonNavigation,
   SkeletonText
-} from "./chunk-5V6O73EH.js";
+} from "./chunk-FLKJYMVB.js";
 import "./chunk-INS7KZJB.js";
 import {
   Button,
@@ -2046,6 +2057,7 @@ export {
   COMPACT_CARD_TITLE_ROW,
   COMPLIANCE_STANDARDS,
   CONNECTION_STATUS,
+  CONTENT_BREAKPOINTS,
   CONTENT_CARD_FRAME_CLASS,
   CONTENT_CARD_SKELETON_FRAME_CLASS,
   CONTENT_REF_GROUPS,
@@ -2139,6 +2151,7 @@ export {
   ComplianceBadge,
   ComplianceLogo,
   ConfidenceBadge,
+  ContentAreaWidthContext,
   ContentCardFrame,
   ContentLoader,
   ContentPageContainer,
@@ -2433,6 +2446,7 @@ export {
   MESSAGE_ROLE,
   MESSAGE_TYPE,
   MINGO_APPROVAL_REQUEST_TYPE,
+  MINGO_V2_RAIL_WIDTH,
   MOBILE_NAV_PANEL_ID,
   MUX_IMAGE_ORIGIN,
   MUX_STREAM_ORIGIN,
@@ -2469,8 +2483,11 @@ export {
   MiamiCyberGangLogoFaceOnly,
   MicrosoftIcon,
   MingoAiButton,
+  MingoArchiveList,
+  MingoChatHeader,
   MingoChatHistory,
   MingoChatHistorySkeleton,
+  MingoChatRail,
   MingoHistoryRail,
   MingoIcon,
   MingoOnboardingCard,
@@ -2922,6 +2939,7 @@ export {
   VideoSourceSelector,
   VideoUnmuteGlyph,
   ViewToggle,
+  ViewportBreakpoints,
   VolumeOffFilledIcon,
   WALKTHROUGH_OPEN_QUERY_PARAM,
   WALKTHROUGH_VIDEO_DISMISS_KEY,
@@ -3005,6 +3023,7 @@ export {
   configureAuthenticatedImage,
   configureBatchImageFetch,
   consumeAccessCode,
+  contentBreakpointFor,
   copyrightLine,
   createChatConversationsApi,
   createChatDialogStore,
@@ -3481,6 +3500,9 @@ export {
   useCollapsible,
   useConfirm,
   useContactSubmission,
+  useContentBreakpoint,
+  useContentLgUp,
+  useContentMdUp,
   useCopyToClipboard,
   useCoverImageFallback,
   useCursorPaginationState,

package/dist/styles/layout-steps.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Layout steps in px, the one place they are written. `viewport` is the window
+ * step (`md:`, `useMdUp`), `content` its content-area counterpart
+ * (`content-md:`, `useContentMdUp`): the viewport step less the navigation.
+ *
+ * Imported by tailwind.config.ts, so it must stay free of imports and aliases.
+ */
+export declare const LAYOUT_STEPS: {
+    readonly sm: {
+        readonly viewport: 640;
+        readonly content: 640;
+    };
+    readonly md: {
+        readonly viewport: 800;
+        readonly content: 720;
+    };
+    readonly lg: {
+        readonly viewport: 1280;
+        readonly content: 1024;
+    };
+    readonly xl: {
+        readonly viewport: 1440;
+        readonly content: 1216;
+    };
+    readonly '2xl': {
+        readonly viewport: 1536;
+        readonly content: 1312;
+    };
+};
+//# sourceMappingURL=layout-steps.d.ts.map

package/dist/styles/layout-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-steps.d.ts","sourceRoot":"","sources":["../../src/styles/layout-steps.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAMf,CAAC"}

package/dist/tailwind.config.cjs

@@ -101,6 +101,17 @@ var require_plugin = __commonJS({
 
 // tailwind.config.ts
 var import_plugin = __toESM(require_plugin());
+
+// src/styles/layout-steps.ts
+var LAYOUT_STEPS = {
+  sm: { viewport: 640, content: 640 },
+  md: { viewport: 800, content: 720 },
+  lg: { viewport: 1280, content: 1024 },
+  xl: { viewport: 1440, content: 1216 },
+  "2xl": { viewport: 1536, content: 1312 }
+};
+
+// tailwind.config.ts
 var odsTypographyPlugin = (0, import_plugin.default)(({ addUtilities }) => {
   addUtilities({
     ".text-h1": {
@@ -175,6 +186,25 @@ var odsTypographyPlugin = (0, import_plugin.default)(({ addUtilities }) => {
     }
   });
 });
+var CONTENT_STEPS = Object.entries(LAYOUT_STEPS).map(([name, step]) => ({ name, ...step }));
+var odsContentAreaPlugin = (0, import_plugin.default)(({ addVariant }) => {
+  const viewportLayer = ".ods-viewport-layer, .ods-viewport-layer *";
+  const byContent = `&:where(:not(${viewportLayer}))`;
+  const byViewport = `&:where(:not(.ods-content-area *), ${viewportLayer})`;
+  for (const { name, content, viewport } of CONTENT_STEPS) {
+    if (name !== "md" && name !== "lg") continue;
+    addVariant(`content-max-${name}`, [
+      `@container ods-content not (min-width: ${content}px) { ${byContent} }`,
+      `@media not all and (min-width: ${viewport}px) { ${byViewport} }`
+    ]);
+  }
+  for (const { name, content, viewport } of CONTENT_STEPS) {
+    addVariant(`content-${name}`, [
+      `@container ods-content (min-width: ${content}px) { ${byContent} }`,
+      `@media (min-width: ${viewport}px) { ${byViewport} }`
+    ]);
+  }
+});
 var withAlphaValue = (color) => `color-mix(in srgb, ${color} calc(<alpha-value> * 100%), transparent)`;
 var withAlphaSupport = (tree) => Object.fromEntries(
   Object.entries(tree).map(([key, value]) => [
@@ -190,7 +220,9 @@ var config = {
     "md:hidden",
     "lg:hidden",
     "md:flex",
-    "lg:flex"
+    "lg:flex",
+    // ...and their content-area forms (DataTable `hideAt`)
+    ...["md", "lg", "xl", "2xl"].flatMap((step) => [`content-${step}:hidden`, `content-${step}:flex`])
   ],
   theme: {
     container: {
@@ -380,15 +412,8 @@ var config = {
           current: "var(--ods-current)"
         })
       },
-      // Custom breakpoints (aligned with ODS responsive tokens from Figma)
-      screens: {
-        md: "800px",
-        // Tablet: 50rem
-        lg: "1280px",
-        // Desktop: 80rem
-        xl: "1440px"
-        // Large desktop: 90rem
-      },
+      // Aligned with the ODS responsive tokens from Figma: md tablet, lg desktop.
+      screens: Object.fromEntries(CONTENT_STEPS.map(({ name, viewport }) => [name, `${viewport}px`])),
       borderRadius: {
         lg: "var(--radius)",
         // 8px
@@ -503,7 +528,7 @@ var config = {
       }
     }
   },
-  plugins: [tailwindcssAnimate__default.default, odsTypographyPlugin, containerQueries__default.default]
+  plugins: [tailwindcssAnimate__default.default, odsTypographyPlugin, odsContentAreaPlugin, containerQueries__default.default]
 };
 var tailwind_config_default = config;
 

package/dist/tailwind.config.js

@@ -94,6 +94,17 @@ var require_plugin = __commonJS({
 
 // tailwind.config.ts
 var import_plugin = __toESM(require_plugin());
+
+// src/styles/layout-steps.ts
+var LAYOUT_STEPS = {
+  sm: { viewport: 640, content: 640 },
+  md: { viewport: 800, content: 720 },
+  lg: { viewport: 1280, content: 1024 },
+  xl: { viewport: 1440, content: 1216 },
+  "2xl": { viewport: 1536, content: 1312 }
+};
+
+// tailwind.config.ts
 var odsTypographyPlugin = (0, import_plugin.default)(({ addUtilities }) => {
   addUtilities({
     ".text-h1": {
@@ -168,6 +179,25 @@ var odsTypographyPlugin = (0, import_plugin.default)(({ addUtilities }) => {
     }
   });
 });
+var CONTENT_STEPS = Object.entries(LAYOUT_STEPS).map(([name, step]) => ({ name, ...step }));
+var odsContentAreaPlugin = (0, import_plugin.default)(({ addVariant }) => {
+  const viewportLayer = ".ods-viewport-layer, .ods-viewport-layer *";
+  const byContent = `&:where(:not(${viewportLayer}))`;
+  const byViewport = `&:where(:not(.ods-content-area *), ${viewportLayer})`;
+  for (const { name, content, viewport } of CONTENT_STEPS) {
+    if (name !== "md" && name !== "lg") continue;
+    addVariant(`content-max-${name}`, [
+      `@container ods-content not (min-width: ${content}px) { ${byContent} }`,
+      `@media not all and (min-width: ${viewport}px) { ${byViewport} }`
+    ]);
+  }
+  for (const { name, content, viewport } of CONTENT_STEPS) {
+    addVariant(`content-${name}`, [
+      `@container ods-content (min-width: ${content}px) { ${byContent} }`,
+      `@media (min-width: ${viewport}px) { ${byViewport} }`
+    ]);
+  }
+});
 var withAlphaValue = (color) => `color-mix(in srgb, ${color} calc(<alpha-value> * 100%), transparent)`;
 var withAlphaSupport = (tree) => Object.fromEntries(
   Object.entries(tree).map(([key, value]) => [
@@ -183,7 +213,9 @@ var config = {
     "md:hidden",
     "lg:hidden",
     "md:flex",
-    "lg:flex"
+    "lg:flex",
+    // ...and their content-area forms (DataTable `hideAt`)
+    ...["md", "lg", "xl", "2xl"].flatMap((step) => [`content-${step}:hidden`, `content-${step}:flex`])
   ],
   theme: {
     container: {
@@ -373,15 +405,8 @@ var config = {
           current: "var(--ods-current)"
         })
       },
-      // Custom breakpoints (aligned with ODS responsive tokens from Figma)
-      screens: {
-        md: "800px",
-        // Tablet: 50rem
-        lg: "1280px",
-        // Desktop: 80rem
-        xl: "1440px"
-        // Large desktop: 90rem
-      },
+      // Aligned with the ODS responsive tokens from Figma: md tablet, lg desktop.
+      screens: Object.fromEntries(CONTENT_STEPS.map(({ name, viewport }) => [name, `${viewport}px`])),
       borderRadius: {
         lg: "var(--radius)",
         // 8px
@@ -496,7 +521,7 @@ var config = {
       }
     }
   },
-  plugins: [tailwindcssAnimate, odsTypographyPlugin, containerQueries]
+  plugins: [tailwindcssAnimate, odsTypographyPlugin, odsContentAreaPlugin, containerQueries]
 };
 var tailwind_config_default = config;
 

package/eslint-config/README.md

@@ -84,6 +84,15 @@ applied to tests or stories.
   hook that is not a zustand subscription (a context getter, say) is a false positive: carry it in
   a named `files:` block.
 
+## Layout variant rule
+
+`base` carries `flamingo/no-mixed-layout-variants` from `./layout-variants.js`: one class string may
+not hold both a viewport breakpoint (`md:`) and a content-area one (`content-md:`). Tailwind emits
+every `content-*` rule before the viewport ones, so where the two set the same property the viewport
+class wins at any content width, and nothing says so. A class that stacks them
+(`md:content-max-md:`) is the deliberate form and is allowed. The rule reads one string at a time:
+classes split across `cn()` arguments are not compared.
+
 ## Why not ESLint 10
 
 ESLint 10 is out, and `eslint@9` is marked deprecated on npm. It still does not work here:

package/eslint-config/base.js

@@ -6,8 +6,15 @@ import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
 import { ignores } from './ignores.js';
+import { layoutVariantsPlugin } from './layout-variants.js';
 import { webviewPerformancePlugin } from './webview-performance.js';
 
+/** The rules this config ships itself, under one `flamingo/` namespace. */
+const flamingoPlugin = {
+  meta: { name: 'flamingo' },
+  rules: { ...webviewPerformancePlugin.rules, ...layoutVariantsPlugin.rules },
+};
+
 /**
  * Promote every `warn` in a third-party config to `error`.
  *
@@ -299,13 +306,22 @@ export const base = [
     name: 'flamingo/base/webview-performance',
     files: ['**/*.{js,mjs,jsx,ts,mts,tsx}'],
     ignores: ['**/*.{test,spec}.{js,mjs,jsx,ts,mts,tsx}', '**/__tests__/**', '**/*.stories.{js,jsx,ts,tsx,mdx}'],
-    plugins: { flamingo: webviewPerformancePlugin },
+    plugins: { flamingo: flamingoPlugin },
     rules: {
       'flamingo/no-inline-style-element': 'error',
       'flamingo/no-whole-store-subscription': 'error',
     },
   },
 
+  // `md:` and `content-md:` in one class string — see ./layout-variants.js.
+  {
+    name: 'flamingo/base/layout-variants',
+    files: ['**/*.{js,mjs,jsx,ts,mts,tsx}'],
+    ignores: ['**/*.{test,spec}.{js,mjs,jsx,ts,mts,tsx}', '**/__tests__/**'],
+    plugins: { flamingo: flamingoPlugin },
+    rules: { 'flamingo/no-mixed-layout-variants': 'error' },
+  },
+
   // Type declaration files describe other people's shapes; most of the base
   // rules are noise there.
   {

package/eslint-config/layout-variants.js

@@ -0,0 +1,57 @@
+/**
+ * An element lays out by the window (`md:`) or by the content area
+ * (`content-md:`), never both. See "Content area breakpoints" in
+ * src/ODS_TOKEN_RULES.md.
+ */
+
+const VIEWPORT = /^(?:max-)?(?:sm|md|lg|xl|2xl)$/;
+const CONTENT = /^content-(?:max-)?(?:sm|md|lg|xl|2xl)$/;
+
+/** The first class of each kind in a class string. A class that stacks the two
+ *  (`md:content-max-md:flex`) is the deliberate form and counts as neither. */
+function layoutVariantsIn(classes) {
+  const found = {};
+  for (const token of classes.split(/\s+/)) {
+    const variants = token.split(':').slice(0, -1);
+    const viewport = variants.some(variant => VIEWPORT.test(variant));
+    const content = variants.some(variant => CONTENT.test(variant));
+    if (viewport === content) continue;
+    found[viewport ? 'viewport' : 'content'] ??= token;
+  }
+  return found;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noMixedLayoutVariants = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'Disallow viewport and content-area breakpoints in one class string' },
+    schema: [],
+    messages: {
+      mixed:
+        '`{{viewport}}` follows the window and `{{content}}` the content area. Tailwind emits every `content-*` ' +
+        'rule before the viewport ones, so where they set the same property the viewport class wins at any ' +
+        'content width. Use one of the two on an element; chrome that needs both stacks them in one class ' +
+        '(`md:content-max-md:`).',
+    },
+  },
+  create(context) {
+    const check = (node, classes) => {
+      const { viewport, content } = layoutVariantsIn(classes);
+      if (viewport && content) context.report({ node, messageId: 'mixed', data: { viewport, content } });
+    };
+    return {
+      Literal(node) {
+        if (typeof node.value === 'string') check(node, node.value);
+      },
+      TemplateElement(node) {
+        check(node, node.value.cooked ?? node.value.raw);
+      },
+    };
+  },
+};
+
+export const layoutVariantsPlugin = {
+  meta: { name: 'flamingo-layout-variants' },
+  rules: { 'no-mixed-layout-variants': noMixedLayoutVariants },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.702",
+  "version": "0.0.703-snapshot.20261006080901",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -355,6 +355,7 @@
     "yalc:push": "yalc push ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}",
     "yalc:publish": "yalc publish ${YALC_STORE_FOLDER:+--store-folder \"$YALC_STORE_FOLDER\"}",
     "generate:icons": "node scripts/generate-icons.mjs",
+    "generate:content-area": "vitest run src/__tests__/content-area-variants.test.ts -u",
     "format": "prettier --check .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -503,6 +504,7 @@
     "next": "^16.1.3",
     "nodemon": "^3.1.11",
     "pkg-pr-new": "0.0.88",
+    "postcss": "^8.5.15",
     "prettier": "^3.9.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",

package/src/ODS_TOKEN_RULES.md

@@ -109,6 +109,46 @@ for it on badges and chips instead of a raw `text-[10px]`; anything a user reads
 `text-h5`/`text-h6` or larger. Stamps are fixed on purpose — growing them on desktop is what
 balloons a badge out of the row it sits in.
 
+## Content area breakpoints
+
+The tokens and `md:` / `lg:` above follow the **viewport**. When `AppLayout` has a `sidePanel` (the
+docked Mingo chat), the panel narrows the content without the viewport changing, so the content lays
+out by **its own width** instead. `<main>` becomes an `.ods-content-area` container, and:
+
+| Content width | Layout | Tokens (`text-h*`, `--spacing-system-*`) |
+|---------------|--------|-------------------------------------------|
+| < 720px | mobile | mobile values |
+| 720-1023px | tablet (`content-md:`) | the viewport's (desktop sizes on a desktop) |
+| ≥ 1024px | desktop (`content-lg:`) | the viewport's |
+
+- **Tokens need nothing.** `ods-content-area-tokens.css` (generated from the responsive tokens)
+  re-declares the mobile values on the content scope while it is narrower than 720px; every
+  `text-h*` and spacing var below it follows.
+- **The steps are written once**, in `styles/layout-steps.ts`: the Tailwind screens, the
+  `content-*` variants and the JS hooks all read them from there.
+- **Layout switches in page content use `content-md:` / `content-lg:`**, not `md:` / `lg:` — e.g.
+  `grid-cols-2 content-lg:grid-cols-4`. Outside a content area (apps without a side panel, overlays
+  portalled to `<body>`) they fall back to the viewport `md` / `lg` steps, so a shared component can
+  switch to them without changing anywhere else it renders.
+- **Keep `md:` / `lg:` for chrome and overlays** that follow the window: header, navigation,
+  modals, dropdowns, toasts. Never mix `md:` and `content-md:` on one element: lint rejects the two
+  in one class string (`flamingo/no-mixed-layout-variants`).
+- **Window chrome that renders inside the content area** (not portalled to `<body>`: `ModalV2`,
+  `Modal`, `SlidingSidebar`) carries `ods-viewport-layer`, which restates the viewport's tokens on its
+  subtree; otherwise a modal opened from a narrow content area inherits the area's mobile fonts.
+  `content-*` classes under the layer follow the window as well. The JS hooks need their own reset,
+  because React context crosses a portal: `ModalV2`, `Modal`, `Dialog`, `Sheet` and `Drawer` wrap
+  their content in `<ViewportBreakpoints>`.
+- **Chrome inside the content area that ALSO depends on the window** stacks the two:
+  `md:content-max-md:` is "narrow content in a wide window" and never matches outside a content
+  area. `PageActions` `primary-buttons` uses it: the bottom bar spans the window (`md:hidden`),
+  so a docked panel narrowing the content compacts the actions into the title row instead.
+- **JS layout decisions** use `useContentBreakpoint()` / `useContentMdUp()` / `useContentLgUp()`
+  from `hooks` instead of `useMdUp()` / `useLgUp()` — the same steps, the same viewport fallback.
+- **Things that measure the window** (`vw`, `w-screen`, `fixed left-0 right-0`, a `resize` listener
+  on `window`) do not see the panel. Measure the element (`ResizeObserver`) or the container
+  (`cqw`) instead.
+
 ## General
 
 - Convert hardcoded values to ODS tokens even when copying patterns from existing code.

package/src/components/chat/chat-archive-page.tsx

@@ -25,14 +25,14 @@ interface ChatArchivePageBaseProps {
   onLoadMore?: () => void;
 }
 
-/** Standalone (default): renders its own back/close header, so BOTH handlers
- *  are required. */
+/** Standalone (default): renders its own back/close header. `onBack` is
+ *  required; without `onClose` the close button is left out. */
 export interface ChatArchivePageStandaloneProps extends ChatArchivePageBaseProps {
   embedded?: false;
   /** Back chevron — returns to the previous (list) view. */
   onBack: () => void;
   /** Close the whole chat panel. */
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 /** Embedded (wide split layout): the archive lives in the left rail and the
@@ -69,7 +69,7 @@ export function ChatArchivePage(props: ChatArchivePageProps) {
       {/* Mobile (<md): the shared mobile header — back to the list + a ⋯ menu
           (Close only here, since the archive list has no per-chat actions).
           `!props.embedded` narrows the union so `onBack` / `onClose` are the
-          required standalone handlers (no no-op fallbacks). */}
+          standalone handlers (no no-op fallbacks). */}
       {!props.embedded && (
         <ChatPanelHeaderMobile
           className="flex md:hidden"
@@ -93,9 +93,11 @@ export function ChatArchivePage(props: ChatArchivePageProps) {
             <span className="truncate text-ods-text-primary text-h3">Chat Archive</span>
           </div>
 
-          <ChatHeaderIconButton onClick={props.onClose} aria-label="Close">
-            <XmarkIcon size={24} />
-          </ChatHeaderIconButton>
+          {props.onClose && (
+            <ChatHeaderIconButton onClick={props.onClose} aria-label="Close">
+              <XmarkIcon size={24} />
+            </ChatHeaderIconButton>
+          )}
         </div>
       )}
       <div className="flex min-h-0 flex-1 flex-col p-[var(--spacing-system-m)]">