@kerfjs/ui 5.0.0-beta.56 → 5.0.0-beta.58

package/ai/component-catalog.json

@@ -420,6 +420,9 @@
       "publicClasses": [
         "kui-app-root"
       ],
+      "placeableClasses": [
+        "kui-app-root"
+      ],
       "publicTokens": [],
       "links": {
         "catalogRoute": "?component=document-baseline",
@@ -482,6 +485,12 @@
         "kui-inline-metadata",
         "kui-scroll-owner"
       ],
+      "placeableClasses": [
+        "kui-content",
+        "kui-control-cluster",
+        "kui-inline-metadata",
+        "kui-scroll-owner"
+      ],
       "publicTokens": [
         "--kui-layout-control-gap",
         "--kui-layout-content-gap",
@@ -508,11 +517,13 @@
       "uses": [],
       "purpose": "Organize a sidebar, main area, inspector, or dialog column into fixed vertical header/footer chrome around one scrolling content owner.",
       "publicExports": [
-        "Pane"
+        "Pane",
+        "wireScrollDividers"
       ],
       "useWhen": [
         "An application column needs shared header, content, and optional footer organization with exactly one scrolling content owner.",
-        "A pane boundary needs an opt-in separator on any combination of logical sides."
+        "A pane boundary needs an opt-in separator on any combination of logical sides.",
+        "Pinned chrome needs a divider from the scrolling content only while content is scrolled beneath it (wireScrollDividers)."
       ],
       "avoidWhen": [
         "Do not use Pane as a padded card or add a competing scroll owner around its content slot.",
@@ -531,7 +542,8 @@
         "header, content, and footer children",
         "which logical boundaries show separators",
         "which sides may compensate for device safe areas in an app-owned arrangement (safeAreaEdges)",
-        "responsive placement and visibility"
+        "responsive placement and visibility",
+        "whether the chrome dividers follow the scroll, always show, or never show (chromeDividers)"
       ],
       "variants": [
         "content only",
@@ -540,7 +552,9 @@
         "block-start separator",
         "block-end separator",
         "inline-start separator",
-        "inline-end separator"
+        "inline-end separator",
+        "chrome dividers only while scrolled (default, wired by wireScrollDividers)",
+        "always or no chrome dividers"
       ],
       "accessibility": [
         "Choose semantic root and content elements that match the region and provide labels for landmark elements.",
@@ -562,7 +576,25 @@
           "browser-condition-css"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-pane__content",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-pane__header and kui-pane__footer",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
+        }
+      ],
       "publicClasses": [
         "kui-pane",
         "kui-pane__content",
@@ -630,7 +662,8 @@
         "preferred initial focus targets when DOM order is insufficient",
         "per-view bottom toolbar content or a persistent fallback",
         "per-view leading, center, and trailing top-toolbar groups",
-        "top-toolbar configuration, title size, and heading level"
+        "top-toolbar configuration, title size, and heading level",
+        "whether the chrome and bottom-toolbar dividers follow the scroll, always show, or never show (chromeDividers)"
       ],
       "variants": [
         "single root view",
@@ -639,7 +672,9 @@
         "configured top toolbar",
         "custom back icon or visible back text",
         "per-view bottom toolbar",
-        "persistent bottom-toolbar fallback"
+        "persistent bottom-toolbar fallback",
+        "chrome and bottom-toolbar dividers only while the active view scrolls beneath them (wired by wireScrollDividers)",
+        "permanent or no chrome dividers (chromeDividers always or none)"
       ],
       "accessibility": [
         "Give the stack region an accessible label and every back control a stable action label; visible backText names the control itself.",
@@ -652,14 +687,16 @@
         "border": "conditional",
         "padding": "child",
         "notes": [
-          "The stack owns its full-height chrome and viewport; each view owns its internal content padding and scrollable content."
+          "The stack owns its full-height chrome and viewport; each view owns its internal content padding and scrollable content.",
+          "The top chrome's bottom line and the bottom toolbar's top line are scroll state (wireScrollDividers), drawn as an overlaid 1px pseudo-element on the chrome and the bottom toolbar's always-present 1px top border, so neither moves the chrome or the content."
         ]
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/nav-stack",
+        "browserImport": "@kerfjs/ui/nav-stack",
         "manualCssImport": "@kerfjs/ui/nav-stack.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -684,6 +721,23 @@
               "meaning": "\"true\" on a popped view the helper briefly re-inserts to slide it out."
             }
           ]
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the active kui-nav-stack__view, or the kui-pane__content of a sole Pane in it",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-nav-stack__chrome and kui-nav-stack__bottom",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -694,8 +748,6 @@
         "kui-nav-stack__chrome-copy",
         "kui-nav-stack__chrome-copy--bottom",
         "kui-nav-stack__chrome-copy--exiting",
-        "kui-nav-stack__toolbar",
-        "kui-nav-stack__title",
         "kui-nav-stack__viewport",
         "kui-nav-stack__view",
         "kui-nav-stack__view--entering",
@@ -755,7 +807,7 @@
         "list and detail content",
         "optional list width and persistence",
         "optional list collapse state and its restore control",
-        "compact list and detail toolbar groups and toolbar configuration",
+        "compact list and detail toolbar groups, toolbar configuration, and chrome dividers",
         "back action"
       ],
       "variants": [
@@ -780,9 +832,10 @@
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/split-view",
+        "browserImport": "@kerfjs/ui/split-view",
         "manualCssImport": "@kerfjs/ui/split-view.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -882,13 +935,16 @@
         "tab labels, icons, and content",
         "tab badge counts or dots and their localized badgeLabel phrases",
         "routing and persistence",
-        "responsive replacement on larger device classes"
+        "responsive replacement on larger device classes",
+        "whether the bar divider follows the scroll, always shows, or never shows (chromeDividers)"
       ],
       "variants": [
         "text-only tabs",
         "icon and text tabs",
         "badged tabs (count or text-free dot)",
-        "one NavStack per tab"
+        "one NavStack per tab",
+        "bar divider only while the active scene continues below it (wired by wireScrollDividers)",
+        "permanent or no bar divider (chromeDividers always or none)"
       ],
       "accessibility": [
         "Give the tablist an accessible label and keep exactly the active tab in the sequential focus order.",
@@ -897,17 +953,19 @@
       ],
       "geometry": {
         "margin": "none",
-        "border": "self",
+        "border": "conditional",
         "padding": "self",
         "notes": [
-          "The scaffold owns the full-height scene region and safe-area-aware bottom bar; scene content owns its internal geometry."
+          "The scaffold owns the full-height scene region and safe-area-aware bottom bar; scene content owns its internal geometry.",
+          "The bar's top line is scroll state (wireScrollDividers): it shows only while the active scene's content continues below the bar, by coloring the bar's always-present 1px top border."
         ]
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/tab-scaffold",
+        "browserImport": "@kerfjs/ui/tab-scaffold",
         "manualCssImport": "@kerfjs/ui/tab-scaffold.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -915,6 +973,23 @@
           "export": "wireTabScaffold",
           "import": "@kerfjs/ui/wire-tab-scaffold",
           "required": true
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the active kui-tab-scaffold__scene, or what scrolls inside it (a sole NavStack's active view or a sole Pane's content)",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-tab-scaffold__bar",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -995,7 +1070,8 @@
         "clipped, scrolling, or popup-visible content",
         "inline, overlay, or hidden responsive presentation",
         "narrow or compact single-track responsive fill",
-        "safe-area restore control"
+        "safe-area restore control",
+        "chrome dividers only while scrolled (wired by wireScrollDividers)"
       ],
       "accessibility": [
         "Give the Workbench and each meaningful rail or drawer an accessible label.",
@@ -1014,9 +1090,10 @@
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/workbench",
+        "browserImport": "@kerfjs/ui/workbench",
         "manualCssImport": "@kerfjs/ui/workbench.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -1036,6 +1113,23 @@
               "meaning": "Present on a resizable rail or the drawer while a pointer drag resizes it."
             }
           ]
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-pane__content of each panel and work-area Pane",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-pane__header and kui-pane__footer of each panel and work-area Pane",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -1128,7 +1222,8 @@
         "hidden separator",
         "slide, fade-slide, or instant content",
         "clipped, scrolling, or popup-visible content",
-        "safe-area restore control"
+        "safe-area restore control",
+        "chrome dividers only while scrolled (wired by wireScrollDividers)"
       ],
       "accessibility": [
         "Give the panel region and every collapse or restore control an accessible label.",
@@ -1144,9 +1239,10 @@
       },
       "delivery": {
         "moduleImport": "@kerfjs/ui/collapsible-panel",
+        "browserImport": "@kerfjs/ui/collapsible-panel",
         "manualCssImport": "@kerfjs/ui/collapsible-panel.css",
         "sideEffects": [
-          "manual-css"
+          "browser-condition-css"
         ]
       },
       "wiring": [
@@ -1171,6 +1267,23 @@
               "meaning": "Keeps the injected compact-overlay backdrop through the application's re-render; the helper creates and removes the backdrop itself."
             }
           ]
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-pane__content of each panel and work-area Pane",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "kui-pane__header and kui-pane__footer of each panel and work-area Pane",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -1300,8 +1413,8 @@
         "which screen edges an app bar or bottom bar outside a Pane header or footer claims for device safe areas (safeAreaEdges)"
       ],
       "variants": [
-        "bottom divider (default)",
-        "no dividers",
+        "no dividers (default)",
+        "scroll dividers when named as wireScrollDividers targets chrome",
         "top/right/bottom/left divider combinations",
         "centered content",
         "stacked zones at compact or narrow widths",
@@ -1329,7 +1442,25 @@
           "browser-condition-css"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the targets scroller",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "a Toolbar named as targets chrome",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
+        }
+      ],
       "publicClasses": [
         "kui-toolbar",
         "kui-toolbar__center",
@@ -1366,8 +1497,9 @@
       "useWhen": [
         "Group related controls inside a toolbar with a supported visual treatment.",
         "Use ToolbarActionLink for navigation or external resources that must retain native anchor semantics inside a group.",
-        "Fill it with plain <button> controls (the group styles > button fully); use wa-button only for a Web Awesome feature such as a wa-dropdown popup trigger.",
-        "For an avatar control, set content=avatar and avatarImage instead of inserting an img; one button paints the group and multiple buttons paint only the pressed highlight."
+        "Fill it with plain <button> controls (the group styles > button fully); use wa-button only for a Web Awesome feature. A popup menu is a PopupMenu in a single group with nestedDropdown; it renders its own trigger, so never hand-write wa-dropdown markup. Nothing wraps inside a group: an icon sits beside its label on one row and no trigger gets a fixed width.",
+        "For an avatar control, set content=avatar and avatarImage instead of inserting an img; one button paints the group and multiple buttons paint only the pressed highlight.",
+        "In a Workbench or CollapsiblePanel toolbar, mark a group relocateOnCollapse to keep it available in the work-area toolbar when the panel closes; place it directly or in an array in any toolbar zone."
       ],
       "avoidWhen": [
         "Do not use merely to align unrelated buttons or to imitate an exclusive choice.",
@@ -1404,6 +1536,7 @@
         "standard, compact, or list-zero dropdown menu inset",
         "visible or horizontally scrollable overflow",
         "always visible or compact-only responsive visibility",
+        "relocate on panel collapse",
         "avatar scrim",
         "contained avatar background on a single group or selected multi-button highlight"
       ],
@@ -2496,7 +2629,8 @@
         "top/right/bottom/left divider combinations",
         "top/right/bottom/left text and control inset combinations",
         "fill: the layout root fills a definite-height parent",
-        "rootAttributes: safe data-* metadata on the root"
+        "rootAttributes: safe data-* metadata on the root",
+        "scroll dividers when named as wireScrollDividers targets chrome"
       ],
       "accessibility": [
         "List adds layout only and no list role; children retain responsibility for their native or ARIA semantics.",
@@ -2517,7 +2651,25 @@
           "browser-condition-css"
         ]
       },
-      "wiring": [],
+      "wiring": [
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "the targets scroller",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "a List named as targets chrome",
+              "meaning": "The sides, in t/r/b/l order, on which this chrome currently draws its scroll divider: the side facing the scroller while content is hidden beyond it. Re-applied if a re-render drops it."
+            }
+          ]
+        }
+      ],
       "publicClasses": [
         "kui-list"
       ],
@@ -2605,14 +2757,12 @@
         "kui-list-header",
         "kui-list-header__action",
         "kui-list-header__action-layer",
-        "kui-list-header__label",
         "kui-list-header__title",
         "kui-list-header__toggle"
       ],
       "publicTokens": [
         "--kui-color-neutral-border-quiet",
         "--kui-focus-ring",
-        "--kui-font-xs",
         "--kui-list-header-action-icon-size",
         "--kui-list-header-color",
         "--kui-layout-inline-margin",
@@ -3062,6 +3212,12 @@
         "kui-content-item--pill",
         "kui-content-item--framed"
       ],
+      "placeableClasses": [
+        "kui-content-item",
+        "kui-content-item--pill",
+        "kui-content-item--framed"
+      ],
+      "rootElement": "div",
       "publicTokens": [
         "--kui-content-item-border",
         "--kui-content-item-radius",
@@ -3282,7 +3438,8 @@
         "rail, segmented, and inspector presentation",
         "intrinsic or fill allocation",
         "separate or adjacent trailing action",
-        "far-edge end action"
+        "far-edge end action",
+        "overflow dividers on each side with tabs scrolled out of view (wired by wireScrollDividers)"
       ],
       "accessibility": [
         "Keep exactly one selected tab at tabindex 0 and preserve the wiring keyboard model."
@@ -3329,6 +3486,23 @@
           "export": "reorderTabs",
           "import": "@kerfjs/ui/wire-tab-bars",
           "required": false
+        },
+        {
+          "export": "wireScrollDividers",
+          "import": "@kerfjs/ui/wire-scroll-dividers",
+          "required": false,
+          "stateAttributes": [
+            {
+              "name": "data-scroll-overflow",
+              "on": "kui-tab-bar__tabs",
+              "meaning": "The physical edges, in canonical t/r/b/l order, beyond which content is scrolled out of view; absent when nothing is hidden (content that fits never reports its far edges). Re-applied if a re-render drops it."
+            },
+            {
+              "name": "data-scroll-divider",
+              "on": "chrome named in wireScrollDividers targets (a TabBar strip has none)",
+              "meaning": "The sides, in t/r/b/l order, on which that chrome currently draws its scroll divider. Re-applied if a re-render drops it."
+            }
+          ]
         }
       ],
       "publicClasses": [
@@ -3340,7 +3514,8 @@
       ],
       "publicTokens": [
         "--kui-tab-bar-background",
-        "--kui-tab-bar-border"
+        "--kui-tab-bar-border",
+        "--kui-tab-bar-divider-color"
       ],
       "links": {
         "catalogRoute": "?component=tab-bar",
@@ -5465,6 +5640,9 @@
       "publicClasses": [
         "hide-actions"
       ],
+      "placeableClasses": [
+        "hide-actions"
+      ],
       "geometry": {
         "margin": "none",
         "border": "child",

package/ai/component-catalog.schema.json

@@ -39,6 +39,8 @@
         "variants": { "type": "array", "items": { "type": "string" } },
         "accessibility": { "type": "array", "items": { "type": "string" } },
         "publicClasses": { "type": "array", "items": { "type": "string" }, "uniqueItems": true },
+        "placeableClasses": { "description": "Public classes an application may place on its own elements (layout utilities, a document root, or item geometry on a non-div carrier). Every other public class is component anatomy: render the component instead.", "type": "array", "items": { "type": "string" }, "uniqueItems": true },
+        "rootElement": { "description": "The intrinsic element the component renders at its root. Required for a component whose placeableClasses it renders itself: a placeable class on a plain element of this tag is the component recreated, so render the component instead; another carrier element may keep the class.", "type": "string", "pattern": "^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$" },
         "publicTokens": { "type": "array", "items": { "type": "string" }, "uniqueItems": true },
         "cssValueProps": { "type": "array", "items": { "$ref": "#/$defs/cssValueProp" }, "uniqueItems": true },
         "geometry": { "$ref": "#/$defs/geometry" },

package/ai/component-class-owners.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+// The one rule for which component export renders a cataloged public class —
+// the KUI-L103 "render X instead" answer. `eslint-plugin-kerfjs`'s
+// `ui-public-boundaries` rule loads this file from the installed
+// `@kerfjs/ui/ai/` directory (beside `application-ui-profile-sync.cjs`), and
+// `@kerfjs/ui`'s generated `ai/components/*.md` pages import it, so the lint
+// message and the component reference cannot name different components. It
+// applies to any composition catalog, `@kerfjs/ui`'s or a declared component
+// package's (`acme-meter`), so it assumes no class prefix. CommonJS so the
+// ESLint rule can load it synchronously.
+
+// The component render exports among an entry's public exports: PascalCase
+// names (JSX treats a lowercase tag as an intrinsic element) other than prop
+// types, deduplicated in catalog order. Helpers such as `uiColor` or `px` are
+// never a class's renderer.
+function componentExportNames(exports) {
+  return [
+    ...new Set(
+      (exports ?? []).filter(
+        (name) =>
+          typeof name === 'string' &&
+          /^[A-Z]/.test(name) &&
+          !name.endsWith('Props'),
+      ),
+    ),
+  ];
+}
+
+// The export that renders `className`: the export named after the class's
+// block, tried from the whole block down to its last word
+// (`kui-toolbar-action-link` is ToolbarActionLink, `kui-pane__content` is
+// Pane, `acme-meter__bar` is Meter), else the entry's own export, else every
+// component export the entry lists.
+function classRenderers(className, entryName, exports) {
+  const components = componentExportNames(exports);
+  const words = className.replace(/(?:__|--).*$/, '').split('-');
+  for (let start = 0; start < words.length; start += 1) {
+    const candidate = words
+      .slice(start)
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join('');
+    if (components.includes(candidate)) return [candidate];
+  }
+  if (components.includes(entryName)) return [entryName];
+  return components;
+}
+
+// The public classes of one catalog entry that are its component's rendered
+// anatomy, each with the exports that render it. A class the entry lists in
+// `placeableClasses` is the application's to place and is absent — unless the
+// entry names the `rootElement` its component renders around those classes:
+// then the class is listed with that `element`, because a plain
+// `<div class="kui-content-item">` is exactly what ContentItem renders while
+// a `<ul>` carrying the geometry stays the application's. An entry with no
+// component export owns no classes.
+function componentClassOwnership({
+  name,
+  exports,
+  publicClasses,
+  placeableClasses,
+  rootElement,
+}) {
+  const components = componentExportNames(exports);
+  if (components.length === 0) return [];
+  const placeable = new Set(placeableClasses ?? []);
+  const owned = [];
+  for (const className of publicClasses ?? []) {
+    if (placeable.has(className) && !rootElement) continue;
+    owned.push({
+      className,
+      render: classRenderers(className, name, components),
+      ...(placeable.has(className) ? { element: rootElement } : {}),
+    });
+  }
+  return owned;
+}
+
+module.exports = {
+  classRenderers,
+  componentClassOwnership,
+  componentExportNames,
+};

package/ai/component-composition-extension.d.ts

@@ -0,0 +1,7 @@
+import type {
+  CatalogCompositionEntry,
+  ComponentComposition,
+} from './component-composition.js';
+
+export type ConsumerCompositionEntry = CatalogCompositionEntry;
+export type ConsumerComponentComposition = ComponentComposition;

package/ai/component-composition-extension.schema.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://raw.githubusercontent.com/brianwestphal/kerf/main/ui/ai/component-composition-extension.schema.json",
+  "title": "Kerf UI consumer composition catalog extension",
+  "allOf": [{ "$ref": "./component-composition.schema.json" }],
+  "description": "Consumer composition catalogs use the composition entry contract with their own non-empty package identity; keys are always package:id."
+}

package/ai/{component-catalog-v2-overrides.json → component-composition-rules.json}

@@ -180,7 +180,7 @@
     ],
     "wiring": {
       "required": true,
-      "helpers": ["wireTabBars"],
+      "helpers": ["wireTabBars", "wireScrollDividers"],
       "obligations": [
         "Retain and invoke the disposer.",
         "Apply onReorder to application-owned order."
@@ -435,6 +435,7 @@
     "boundaries": {
       "rootClass": null,
       "publicClasses": ["hide-actions"],
+      "placeableClasses": ["hide-actions"],
       "publicTokens": []
     }
   },

package/ai/{component-catalog-v2.d.ts → component-composition.d.ts}

@@ -39,7 +39,7 @@ export type CatalogCssValueProp = {
   unsafeHelper?: string;
   examples: string[];
 };
-export interface CatalogCompositionEntryV2 {
+export interface CatalogCompositionEntry {
   key: CatalogQualifiedKey;
   package: string;
   id: string;
@@ -95,6 +95,10 @@ export interface CatalogCompositionEntryV2 {
   boundaries: {
     rootClass: string | null;
     publicClasses: string[];
+    /** Public classes an application may place on its own elements; absent means none. */
+    placeableClasses?: string[];
+    /** The intrinsic element the component renders at its root; a placeable class on a plain element of this tag recreates the component. */
+    rootElement?: string;
     publicTokens: string[];
     publicParts?: string[];
   };
@@ -102,10 +106,10 @@ export interface CatalogCompositionEntryV2 {
   diagnostics: CatalogDiagnostic[];
   provenance: { selection: string; composition: string };
 }
-export interface ComponentCatalogV2 {
+export interface ComponentComposition {
   $schema?: string;
-  schemaVersion: 2;
+  schemaVersion: 1;
   package: string;
-  compatibility: { v1Catalog: string; identity: 'package:id' };
-  entries: CatalogCompositionEntryV2[];
+  compatibility: { componentCatalog: string; identity: 'package:id' };
+  entries: CatalogCompositionEntry[];
 }