@adia-ai/web-modules 0.0.4 → 0.2.0

package/CHANGELOG.md

@@ -11,6 +11,60 @@ Built from `@adia-ai/web-components` primitives.
 
 _No pending changes._
 
+## [0.2.0] — 2026-05-02
+
+**Lockstep cut.** All 8 published `@adia-ai/*` packages now share one
+version, governed by [`docs/specs/package-architecture.md` § 15
+(Versioning Policy)](../../docs/specs/package-architecture.md#15-versioning-policy).
+
+### Changed
+
+- `version`: `0.0.5` → `0.2.0`.
+- `peerDependencies["@adia-ai/web-components"]`: `>=0.0.33` → `^0.2.0`.
+- `peerDependencies["@adia-ai/a2ui-utils"]`: `^0.0.2` → `^0.2.0`.
+
+### No source changes
+
+Composite element source (shell, chat, editor, runtime clusters) is
+byte-identical to 0.0.5. The cut bumps version + tightens peer-dep
+ranges only. Consumers who want the 0.0.5 work (page-content
+container-query system) get it via either 0.0.5 or 0.2.0 — both ship
+the same module code.
+
+## [0.0.5] — 2026-05-02
+
+Additive — `page-content` container-query system on `<admin-shell>`.
+Templates can now react to the available *content width* (sidebars
+expanded vs collapsed, inspector rail open, drawer-embed contexts)
+instead of viewport width. No BREAKING changes.
+
+### Added
+
+- `<article data-content-root>` is now an inline-size container query
+  provider named `page-content` (`admin-shell.templates.css`). Templates
+  react to the available *content width* (sidebars expanded vs
+  collapsed, inspector rail open, drawer-embed contexts) instead of
+  viewport width.
+- Three documented breakpoint tokens on `:where(admin-shell)` —
+  `--page-content-bp-sm` (480px), `--page-content-bp-md` (720px),
+  `--page-content-bp-lg` (1024px) — for parity with the literal numbers
+  used inside `@container page-content (...)` queries.
+
+### Changed
+
+- `[data-tab-content] > section > [data-section]` collapses from
+  `1fr 2fr` to a single column at `@container page-content (max-width:
+  720px)` — the canonical settings-template aside/control pair stacks
+  vertically when the article is narrow, regardless of viewport.
+- `[data-content-header] / [data-content-body] / [data-content-footer]`
+  inner padding tightens from `--page-content-inset` (`var(--a-space-10)`)
+  to `var(--a-space-4)` at `@container page-content (max-width: 480px)`
+  for the genuinely-narrow case.
+- `site.css` settings-template override migrated from `@media
+  (max-width: 720px)` to `@container page-content (max-width: 720px)`
+  for the same threshold so the docs site and the canonical
+  `<admin-shell>` template behave identically.
+
 ## [0.0.4] — 2026-05-01
 
 ⚠️ **BREAKING** — nav family removed (consolidated into

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {
@@ -33,8 +33,8 @@
     "./runtime/**/*.js"
   ],
   "peerDependencies": {
-    "@adia-ai/web-components": ">=0.0.33",
-    "@adia-ai/a2ui-utils": "^0.0.2"
+    "@adia-ai/web-components": "^0.2.0",
+    "@adia-ai/a2ui-utils": "^0.2.0"
   },
   "publishConfig": {
     "access": "public",

package/shell/admin-shell/css/admin-shell.templates.css

@@ -18,11 +18,23 @@
    [data-content-body] to opt out of the column.
    ═══════════════════════════════════════════════════════════════ */
 
-/* ── Content root ── */
+/* ── Content root ──
+   `<article data-content-root>` provides an inline-size query container
+   named `page-content` so descendants can adapt to the *available content
+   width* (sidebars expanded vs collapsed) instead of the viewport.
+
+   Breakpoint scale (mirrored in `:where(admin-shell) { --page-content-bp-* }`):
+     sm   480px   — phone / very narrow rail
+     md   720px   — tablet / 2-col → 1-col flip for [data-section]
+     lg  1024px   — wide content (no current rule; reserved)
+   Container queries can't read custom properties as thresholds, so the
+   numbers below are duplicated — keep them in lockstep with the tokens. */
 [data-content-root] {
   position: relative;
   isolation: isolate;
   min-block-size: 100%;
+  container-type: inline-size;
+  container-name: page-content;
 }
 
 /* Fill-mode: when the body contains only an iframe (or explicit opt-in),
@@ -213,3 +225,26 @@
 [data-tab-content] > section > [data-section] > aside > p {
   margin: 0;
 }
+
+/* ── Responsive: stack [data-section] vertically when the article is
+   narrower than the `md` breakpoint. Container-driven (not viewport)
+   so the layout reacts to sidebar collapse / inspector rail / drawer
+   embed contexts the same way it reacts to a real narrow window. */
+@container page-content (max-width: 720px) {
+  [data-tab-content] > section > [data-section] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--page-block-gap) 0;
+  }
+}
+
+/* Tighten the content gutter when the article is genuinely narrow. */
+@container page-content (max-width: 480px) {
+  [data-content-header] > :is(header, header-ui),
+  [data-content-body] > :is(section, section-ui),
+  [data-content-footer] > :is(footer, footer-ui) {
+    padding-inline: var(--a-space-4);
+  }
+  [data-content-body] > :is(section, section-ui) {
+    padding-block: var(--a-space-4);
+  }
+}

package/shell/admin-shell/css/admin-shell.tokens.css

@@ -44,6 +44,14 @@
   --page-content-border:    1px solid var(--a-border-subtle); /* content dividers (persists in "borderless") */
   --page-content-shadow:    var(--a-shadow-sm);      /* soft lift on the content surface */
 
+  /* Content breakpoint scale — `[data-content-root]` is a `page-content`
+     container query provider (admin-shell.templates.css). These tokens
+     are the documented thresholds; @container queries can't read custom
+     properties for thresholds, so the numbers are duplicated in CSS. */
+  --page-content-bp-sm:     480px;   /* phone / very narrow rail        */
+  --page-content-bp-md:     720px;   /* [data-section] flips to 1-col   */
+  --page-content-bp-lg:     1024px;  /* reserved (wide content)         */
+
   /* Section labels (e.g. "WORKSPACE") — maps to "kicker" typography role */
   --page-section-gap:             var(--a-space-6);
   /* Within-section block rhythm (h2 / [data-note] / code-ui / artifact stack). */