@adia-ai/web-modules 0.6.20 → 0.6.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/chat/chat-composer/chat-composer.a2ui.json +1 -1
  3. package/chat/chat-composer/chat-composer.d.ts +0 -4
  4. package/chat/chat-composer/chat-composer.yaml +4 -4
  5. package/chat/chat-empty/chat-empty.a2ui.json +1 -1
  6. package/chat/chat-empty/chat-empty.yaml +6 -2
  7. package/chat/chat-header/chat-header.a2ui.json +1 -1
  8. package/chat/chat-header/chat-header.yaml +7 -3
  9. package/chat/chat-shell/chat-shell.a2ui.json +16 -7
  10. package/chat/chat-shell/chat-shell.d.ts +15 -6
  11. package/chat/chat-shell/chat-shell.yaml +56 -16
  12. package/chat/chat-sidebar/chat-sidebar.yaml +4 -0
  13. package/chat/chat-status/chat-status.yaml +4 -0
  14. package/chat/chat-thread/chat-thread.a2ui.json +1 -1
  15. package/chat/chat-thread/chat-thread.d.ts +1 -7
  16. package/chat/chat-thread/chat-thread.yaml +4 -9
  17. package/editor/editor-canvas/editor-canvas.a2ui.json +1 -1
  18. package/editor/editor-canvas/editor-canvas.d.ts +0 -4
  19. package/editor/editor-canvas/editor-canvas.yaml +0 -4
  20. package/editor/editor-canvas-empty/editor-canvas-empty.yaml +4 -0
  21. package/editor/editor-shell/editor-shell.a2ui.json +33 -22
  22. package/editor/editor-shell/editor-shell.d.ts +22 -5
  23. package/editor/editor-shell/editor-shell.yaml +84 -37
  24. package/editor/editor-sidebar/editor-sidebar.yaml +4 -0
  25. package/editor/editor-statusbar/editor-statusbar.yaml +4 -0
  26. package/editor/editor-toolbar/editor-toolbar.a2ui.json +1 -1
  27. package/editor/editor-toolbar/editor-toolbar.d.ts +3 -2
  28. package/editor/editor-toolbar/editor-toolbar.yaml +7 -2
  29. package/package.json +1 -1
  30. package/runtime/a2ui-root/a2ui-root.a2ui.json +7 -1
  31. package/runtime/a2ui-root/a2ui-root.yaml +10 -1
  32. package/runtime/gen-root/gen-root.a2ui.json +7 -1
  33. package/runtime/gen-root/gen-root.yaml +7 -0
  34. package/shell/admin-command/admin-command.a2ui.json +1 -1
  35. package/shell/admin-command/admin-command.d.ts +2 -2
  36. package/shell/admin-command/admin-command.yaml +6 -2
  37. package/shell/admin-content/admin-content.a2ui.json +1 -1
  38. package/shell/admin-content/admin-content.yaml +6 -2
  39. package/shell/admin-entity-item/admin-entity-item.yaml +4 -0
  40. package/shell/admin-page/admin-page.yaml +4 -0
  41. package/shell/admin-page-body/admin-page-body.yaml +4 -0
  42. package/shell/admin-page-header/admin-page-header.yaml +4 -0
  43. package/shell/admin-scroll/admin-scroll.yaml +4 -0
  44. package/shell/admin-shell/admin-shell.a2ui.json +5 -5
  45. package/shell/admin-shell/admin-shell.d.ts +14 -4
  46. package/shell/admin-shell/admin-shell.js +0 -32
  47. package/shell/admin-shell/admin-shell.yaml +45 -15
  48. package/shell/admin-shell/css/admin-shell.bespoke.css +2 -2
  49. package/shell/admin-shell/css/admin-shell.entity-item.css +8 -2
  50. package/shell/admin-shell/css/admin-shell.templates.css +22 -5
  51. package/shell/admin-sidebar/admin-sidebar.a2ui.json +1 -1
  52. package/shell/admin-sidebar/admin-sidebar.d.ts +2 -3
  53. package/shell/admin-sidebar/admin-sidebar.yaml +6 -3
  54. package/shell/admin-statusbar/admin-statusbar.a2ui.json +1 -1
  55. package/shell/admin-statusbar/admin-statusbar.yaml +9 -8
  56. package/shell/admin-topbar/admin-topbar.a2ui.json +1 -1
  57. package/shell/admin-topbar/admin-topbar.yaml +9 -10
  58. package/simple/simple-content/simple-content.yaml +4 -0
  59. package/simple/simple-hero/simple-hero.yaml +4 -0
  60. package/simple/simple-shell/simple-shell.yaml +4 -0
@@ -1,9 +1,19 @@
1
1
  /**
2
- * `<editor-shell-ui>` — Behavior-only editor shell module for design-tool layouts. Author
3
- provides the structural DOM header (topbar), [data-editor-body] with
4
- pane-ui children ([data-left], [data-right]), [data-canvas] for the
5
- central surface, and a footer (statusbar). editor-shell wires
6
- select-ui[data-options] for JSON-parsed option lists.
2
+ * `<editor-shell-ui>` — Behavior-only editor shell for design-tool / code-editor / canvas
3
+ layouts. Canonical authoring shape uses cluster-namespaced bespoke
4
+ children — <editor-toolbar> at the top, <editor-sidebar
5
+ slot="leading|trailing"> rails wrapping <pane-ui resizable>,
6
+ <editor-canvas> as the central work surface (optionally containing
7
+ <editor-canvas-toolbar> + <editor-canvas-empty>), and
8
+ <editor-statusbar> at the bottom. The shell coordinates the family,
9
+ propagates [focus-mode] to children's [full-screen] / [focused],
10
+ and lets each child own its own state-as-attribute semantics per
11
+ ADR-0023.
12
+
13
+ Legacy data-attribute shapes (<header>, <div data-editor-body>,
14
+ <pane-ui data-left|data-right>, <div data-canvas>, <footer>,
15
+ <span data-spacer>) were RETIRED in v0.4.0 per ADR-0024 and are no
16
+ longer recognized. Consumers must use the bespoke vocabulary.
7
17
 
8
18
  *
9
19
  * @see https://ui-kit.exe.xyz/site/components/editor-shell
@@ -18,4 +28,11 @@ select-ui[data-options] for JSON-parsed option lists.
18
28
  import { UIElement } from '../../../web-components/core/element.js';
19
29
 
20
30
  export class EditorShell extends UIElement {
31
+ /** Reflected — when set, the shell enters distraction-free mode and
32
+ propagates a matching [full-screen] / [focused] state to its
33
+ bespoke children (editor-toolbar gains [full-screen], editor-canvas
34
+ gains [focused]). Typically toggled by a [data-toolbar-action]
35
+ button inside <editor-toolbar>.
36
+ */
37
+ focusMode: boolean;
21
38
  }
@@ -5,55 +5,102 @@ component: EditorShell
5
5
  category: container
6
6
  version: 1
7
7
  description: |
8
- Behavior-only editor shell module for design-tool layouts. Author
9
- provides the structural DOM header (topbar), [data-editor-body] with
10
- pane-ui children ([data-left], [data-right]), [data-canvas] for the
11
- central surface, and a footer (statusbar). editor-shell wires
12
- select-ui[data-options] for JSON-parsed option lists.
8
+ Behavior-only editor shell for design-tool / code-editor / canvas
9
+ layouts. Canonical authoring shape uses cluster-namespaced bespoke
10
+ children — <editor-toolbar> at the top, <editor-sidebar
11
+ slot="leading|trailing"> rails wrapping <pane-ui resizable>,
12
+ <editor-canvas> as the central work surface (optionally containing
13
+ <editor-canvas-toolbar> + <editor-canvas-empty>), and
14
+ <editor-statusbar> at the bottom. The shell coordinates the family,
15
+ propagates [focus-mode] to children's [full-screen] / [focused],
16
+ and lets each child own its own state-as-attribute semantics per
17
+ ADR-0023.
13
18
 
14
- props: {} # Pure wrapper no own props.
19
+ Legacy data-attribute shapes (<header>, <div data-editor-body>,
20
+ <pane-ui data-left|data-right>, <div data-canvas>, <footer>,
21
+ <span data-spacer>) were RETIRED in v0.4.0 per ADR-0024 and are no
22
+ longer recognized. Consumers must use the bespoke vocabulary.
15
23
 
16
- events: {} # Child interactions bubble through.
24
+ props:
25
+ focusMode:
26
+ description: |
27
+ Reflected — when set, the shell enters distraction-free mode and
28
+ propagates a matching [full-screen] / [focused] state to its
29
+ bespoke children (editor-toolbar gains [full-screen], editor-canvas
30
+ gains [focused]). Typically toggled by a [data-toolbar-action]
31
+ button inside <editor-toolbar>.
32
+ type: boolean
33
+ default: false
34
+ reflect: true
35
+ attribute: focus-mode
36
+
37
+ events: {} # Child interactions bubble through their own events.
17
38
 
18
39
  slots:
19
40
  default:
20
41
  description: >-
21
- Author provides header, [data-editor-body] wrapping pane-ui[data-left],
22
- [data-canvas], pane-ui[data-right], and an optional footer.
23
- icon:
24
- description: >-
25
- Leading glyph inside <header> or <footer> status dot, app icon,
26
- zoom badge, etc. Muted color, size-aware.
27
- heading:
28
- description: >-
29
- Primary label inside <header> or <footer>. Rendered with
30
- --editor-title-weight + the strong foreground token.
31
- description:
32
- description: >-
33
- Secondary metadata inside <header> or <footer> — document name,
34
- artboard size, zoom level, etc. Muted color, --a-ui-sm size.
35
- action:
36
- description: >-
37
- Trailing control cluster inside <header> or <footer>. The first
38
- [slot="action"] child pushes itself (and siblings) to the end of
39
- the bar; subsequent [slot="action"] siblings flow with gap.
40
- action-leading:
41
- description: >-
42
- Leading (inline-start) control cluster inside <header> or <footer>.
43
- Pairs with [slot="action"] to produce a dual-cluster bar with
44
- space-between alignment (e.g. Back ↔ Cancel/Next, Discard ↔
45
- Publish). Replaces the legacy <span data-spacer> hack.
42
+ Bespoke children compose here in document order — <editor-toolbar>,
43
+ <editor-sidebar slot="leading">, <editor-canvas>,
44
+ <editor-sidebar slot="trailing">, <editor-statusbar>. The shell's
45
+ grid layout reads child tag selectors to place them; no slot=
46
+ attribute is needed on the children themselves except for the
47
+ leading / trailing sidebar discriminator.
46
48
 
47
49
  states:
48
50
  - name: idle
49
- description: Default.
51
+ description: Default editing mode.
52
+ - name: focus-mode
53
+ attribute: focus-mode
54
+ description: Distraction-free mode active; chrome children dim or hide per their own [full-screen] / [focused] rules.
50
55
 
51
56
  traits: []
52
57
 
53
58
  a2ui:
54
59
  rules:
55
- - editor-shell is a layout skeleton. Children must follow the documented
56
- structural DOM; the element wires behavior, not content.
60
+ - >-
61
+ editor-shell takes bespoke editor-* children only. The canonical
62
+ composition is <editor-toolbar> + <editor-sidebar slot="leading">
63
+ + <editor-canvas> + <editor-sidebar slot="trailing"> +
64
+ <editor-statusbar>. Each child is optional except the canvas.
65
+ - >-
66
+ Don't nest col-ui / row-ui or generic layout primitives directly
67
+ inside editor-shell — the shell's CSS reads child tag selectors
68
+ to lay them out. Generic layout goes inside the bespoke children.
69
+ - >-
70
+ <editor-sidebar> WRAPS <pane-ui resizable> rather than implementing
71
+ drag itself (delegation pattern). Inside each sidebar place a
72
+ single <pane-ui resizable size="sm"> filled with <header> +
73
+ <section> slots.
74
+ - >-
75
+ For editor-inside-admin nested-shell pages, place the editor-shell
76
+ inside <admin-page-body> with `flex: 1; min-height: 0` on every
77
+ ancestor in the flex chain. Without min-height: 0 the inner shell
78
+ collapses to zero height.
79
+ - >-
80
+ Legacy data-attribute shapes were retired in v0.4.0 per ADR-0024.
81
+ Do not author <div data-editor-body>, <pane-ui data-left|data-right>,
82
+ <div data-canvas>, <span data-spacer>, or bare <header>/<footer>
83
+ chrome inside editor-shell.
84
+
85
+ keywords:
86
+ - editor-shell
87
+ - editor
88
+ - design-tool
89
+ - code-editor
90
+ - canvas-shell
91
+ - workspace-shell
92
+ - editing-surface
93
+
94
+ synonyms:
95
+ editor-shell: [design-tool-shell, code-editor-shell, workspace-shell, canvas-shell]
57
96
 
58
- keywords: [editor-shell, editor, design-tool, canvas-shell]
59
- related: [Pane, Select, Toolbar]
97
+ related:
98
+ - EditorToolbar
99
+ - EditorCanvas
100
+ - EditorCanvasToolbar
101
+ - EditorCanvasEmpty
102
+ - EditorSidebar
103
+ - EditorStatusbar
104
+ - Pane
105
+ - AdminShell
106
+ - ChatShell
@@ -84,6 +84,10 @@ a2ui:
84
84
  The cluster-distinct localStorage prefix (adia-editor-sidebar-*)
85
85
  keeps editor sidebars from colliding with admin (adia-sidebar-*)
86
86
  and chat (adia-chat-sidebar-*) sidebars on the same domain.
87
+ - rule: 'Wraps a SINGLE <pane-ui resizable> as its only structural child; fill the pane with sub-views (nav, inspector, layers panel, etc.).'
88
+ reason: 'Single-pane composition contract.'
89
+ - rule: 'For multiple panes (e.g. left nav + right inspector), use two <editor-sidebar> instances at slot="leading" and slot="trailing" of <editor-shell>.'
90
+ reason: 'Per-sidebar pane discipline.'
87
91
 
88
92
  keywords:
89
93
  - editor-sidebar
@@ -41,6 +41,10 @@ a2ui:
41
41
  editor-statusbar replaces legacy <footer> chrome bar inside
42
42
  <editor-shell>. Use named slots for canonical clusters; ad-hoc
43
43
  content goes in the default slot.
44
+ - rule: 'Slots: [slot="status"] for save/sync state, [slot="cursor"] for cursor position, [slot="zoom"] for zoom level, [slot="action"] for actions. All optional.'
45
+ reason: 'Slot contract — editor-specific status clusters.'
46
+ - rule: 'Different from <admin-statusbar> (which is for admin-shell); editor-statusbar has editor-specific slot vocabulary (cursor, zoom).'
47
+ reason: 'Per-cluster status-bar variant.'
44
48
 
45
49
  keywords:
46
50
  - editor-statusbar
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/EditorToolbar.json",
4
4
  "title": "EditorToolbar",
5
- "description": "Module-tier editor toolbar — replaces legacy <header> chrome bar\ninside <editor-shell> per ADR-0023. Owns the [full-screen] reflected\nattribute (set when host enters focus mode), click-bubble for\n[data-toolbar-action] buttons, and slot vocabulary routing.\n\nSits at the top of <editor-shell>. Authors compose actions + status\nvia slot vocabulary. The host (<editor-shell>) reads either\n<editor-toolbar> or <header> via :is() selector for backwards compat.\n",
5
+ "description": "Module-tier editor toolbar — replaces legacy <header> chrome bar\ninside <editor-shell> per ADR-0023. Owns the [full-screen] reflected\nattribute (set when host enters focus mode), click-bubble for\n[data-toolbar-action] buttons, and slot vocabulary routing.\n\nSits at the top of <editor-shell>. Authors compose actions + status\nvia slot vocabulary. Replaces the legacy <header> chrome bar per\nADR-0023; the legacy shape was retired in v0.4.0 per ADR-0024 and\nis no longer recognized.\n",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -5,8 +5,9 @@ attribute (set when host enters focus mode), click-bubble for
5
5
  [data-toolbar-action] buttons, and slot vocabulary routing.
6
6
 
7
7
  Sits at the top of <editor-shell>. Authors compose actions + status
8
- via slot vocabulary. The host (<editor-shell>) reads either
9
- <editor-toolbar> or <header> via :is() selector for backwards compat.
8
+ via slot vocabulary. Replaces the legacy <header> chrome bar per
9
+ ADR-0023; the legacy shape was retired in v0.4.0 per ADR-0024 and
10
+ is no longer recognized.
10
11
 
11
12
  *
12
13
  * @see https://ui-kit.exe.xyz/site/components/editor-toolbar
@@ -12,8 +12,9 @@ description: |
12
12
  [data-toolbar-action] buttons, and slot vocabulary routing.
13
13
 
14
14
  Sits at the top of <editor-shell>. Authors compose actions + status
15
- via slot vocabulary. The host (<editor-shell>) reads either
16
- <editor-toolbar> or <header> via :is() selector for backwards compat.
15
+ via slot vocabulary. Replaces the legacy <header> chrome bar per
16
+ ADR-0023; the legacy shape was retired in v0.4.0 per ADR-0024 and
17
+ is no longer recognized.
17
18
 
18
19
  props:
19
20
  fullScreen:
@@ -63,6 +64,10 @@ a2ui:
63
64
  Buttons that should trigger named actions get
64
65
  [data-toolbar-action="<name>"]. The toolbar bubbles a single
65
66
  'toolbar-action' event up to the host with the name in detail.
67
+ - rule: 'Different from <admin-topbar> (admin-shell chrome) — editor-toolbar has [full-screen] state + editor-specific [data-toolbar-action] event bubbling.'
68
+ reason: 'Per-cluster toolbar variant.'
69
+ - rule: 'Place full-screen toggle buttons inside the toolbar with [data-toolbar-action="toggle-full-screen"]; host reflects [full-screen] up to <editor-shell>.'
70
+ reason: 'Full-screen mode contract.'
66
71
 
67
72
  keywords:
68
73
  - editor-toolbar
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adia-ai/web-modules",
3
- "version": "0.6.20",
3
+ "version": "0.6.22",
4
4
  "description": "AdiaUI composite custom elements \u2014 shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
5
5
  "type": "module",
6
6
  "exports": {
@@ -117,7 +117,13 @@
117
117
  "name": "active"
118
118
  }
119
119
  ],
120
- "synonyms": {},
120
+ "synonyms": {
121
+ "a2ui-root": [
122
+ "a2ui-canvas-host",
123
+ "a2ui-mount",
124
+ "doc-root"
125
+ ]
126
+ },
121
127
  "tag": "a2ui-root",
122
128
  "tokens": {},
123
129
  "traits": [],
@@ -70,7 +70,13 @@ states:
70
70
  traits: []
71
71
  tokens: {}
72
72
  a2ui:
73
- rules: []
73
+ rules:
74
+ - rule: 'Mount point for an A2UI-rendered composition. Hosts the runtime-emitted DOM tree.'
75
+ reason: 'A2UI runtime contract.'
76
+ - rule: 'Different from <gen-root> (which is for the generative-UI lane with LLM-driven streaming).'
77
+ reason: 'Lane boundary — A2UI is deterministic, gen is generative.'
78
+ - rule: 'Do not place static children inside; runtime owns the contents.'
79
+ reason: 'Reserved DOM region.'
74
80
  anti_patterns: []
75
81
  keywords:
76
82
  - a2ui
@@ -85,3 +91,6 @@ keywords:
85
91
  related:
86
92
  - canvas
87
93
  - inspector
94
+
95
+ synonyms:
96
+ a2ui-root: [a2ui-canvas-host, a2ui-mount, doc-root]
@@ -68,7 +68,13 @@
68
68
  "name": "idle"
69
69
  }
70
70
  ],
71
- "synonyms": {},
71
+ "synonyms": {
72
+ "gen-root": [
73
+ "gen-ui-root",
74
+ "gen-ui-mount",
75
+ "generative-root"
76
+ ]
77
+ },
72
78
  "tag": "gen-root",
73
79
  "tokens": {},
74
80
  "traits": [],
@@ -44,6 +44,13 @@ traits: []
44
44
  a2ui:
45
45
  rules:
46
46
  - gen-root is an integration shell. Prefer admin-shell for admin UIs; use gen-root only for chat+canvas tooling.
47
+ - rule: 'Hosts <chat-thread-ui>, <canvas-ui>, and <inspector-ui> children via named slots — chat slot for the conversation lane, canvas slot for the artifact lane, inspector slot for the dev-tools lane.'
48
+ reason: 'Composition contract — three-pane integration shell.'
49
+ - rule: 'Mode attribute (chat-only|split|canvas-only) controls layout; transitions are CSS-animated.'
50
+ reason: 'Layout-mode knob.'
47
51
 
48
52
  keywords: [gen-ui, generative-ui, chat-canvas, agent-shell]
49
53
  related: [AppShell, Chat]
54
+
55
+ synonyms:
56
+ gen-root: [gen-ui-root, gen-ui-mount, generative-root]
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/AdminCommand.json",
4
4
  "title": "AdminCommand",
5
- "description": "Module-tier command palette wrapper — wraps a native <dialog> and the\ninner <command-ui>. Owns the keyboard shortcut listener, focus\nmanagement, and dismiss handlers. Reflects [open].\n\nSits inside <admin-shell> as a direct child. The host wires\n[data-command-trigger] elements to <admin-command>.show() via lookup.\n\nThis is the bespoke web-component replacement for the legacy\n<dialog data-command> shape. <admin-shell> still recognizes the\nlegacy shape via :is() selector. New code should prefer <admin-command>.\n",
5
+ "description": "Module-tier command palette wrapper — wraps a native <dialog> and the\ninner <command-ui>. Owns the keyboard shortcut listener, focus\nmanagement, and dismiss handlers. Reflects [open].\n\nSits inside <admin-shell> as a direct child. The host wires\n[data-command-trigger] elements to <admin-command>.show() via lookup.\n\nThis is the bespoke web-component replacement for the legacy\n<dialog data-command> shape per ADR-0023. The legacy shape was\nretired in v0.4.0 per ADR-0024 and is no longer recognized.\n",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -7,8 +7,8 @@ Sits inside <admin-shell> as a direct child. The host wires
7
7
  [data-command-trigger] elements to <admin-command>.show() via lookup.
8
8
 
9
9
  This is the bespoke web-component replacement for the legacy
10
- <dialog data-command> shape. <admin-shell> still recognizes the
11
- legacy shape via :is() selector. New code should prefer <admin-command>.
10
+ <dialog data-command> shape per ADR-0023. The legacy shape was
11
+ retired in v0.4.0 per ADR-0024 and is no longer recognized.
12
12
 
13
13
  *
14
14
  * @see https://ui-kit.exe.xyz/site/components/admin-command
@@ -14,8 +14,8 @@ description: |
14
14
  [data-command-trigger] elements to <admin-command>.show() via lookup.
15
15
 
16
16
  This is the bespoke web-component replacement for the legacy
17
- <dialog data-command> shape. <admin-shell> still recognizes the
18
- legacy shape via :is() selector. New code should prefer <admin-command>.
17
+ <dialog data-command> shape per ADR-0023. The legacy shape was
18
+ retired in v0.4.0 per ADR-0024 and is no longer recognized.
19
19
 
20
20
  props:
21
21
  open:
@@ -83,6 +83,10 @@ a2ui:
83
83
  Place admin-command as a direct child of admin-shell, NOT inside
84
84
  a sidebar or main column. The host coordinates triggers
85
85
  ([data-command-trigger]) by reaching across siblings.
86
+ - rule: 'For inline content-region command surfaces use <command-ui> directly; admin-command is the modal wrapper that opens the palette as an overlay.'
87
+ reason: 'Modal vs inline decision rule.'
88
+ - rule: 'Triggers anywhere in the shell via [data-command-trigger] attribute on any element; the host wires the open/close cycle.'
89
+ reason: 'Triggering convention — no manual event wiring.'
86
90
 
87
91
  keywords:
88
92
  - admin-command
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/AdminContent.json",
4
4
  "title": "AdminContent",
5
- "description": "Module-tier shell main-column container. CSS-only — no behavior, no\nJS. Sits inside <admin-shell> as the center column between leading\nand trailing sidebars. Authors compose chrome bars + scroll surface\nvia slot vocabulary.\n\nThis is the bespoke replacement for the legacy raw <main> element\ninside admin-shell. Both shapes still render correctly per ADR-0023\nPhase 1 backwards-compat; new code should prefer <admin-content>.\n",
5
+ "description": "Module-tier shell main-column container. CSS-only — no behavior, no\nJS. Sits inside <admin-shell> as the center column between leading\nand trailing sidebars. Authors compose chrome bars + scroll surface\nvia slot vocabulary.\n\nThis is the bespoke replacement for the legacy raw <main> element\ninside admin-shell per ADR-0023. The legacy shape was retired in\nv0.4.0 per ADR-0024 and is no longer recognized.\n",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -12,8 +12,8 @@ description: |
12
12
  via slot vocabulary.
13
13
 
14
14
  This is the bespoke replacement for the legacy raw <main> element
15
- inside admin-shell. Both shapes still render correctly per ADR-0023
16
- Phase 1 backwards-compat; new code should prefer <admin-content>.
15
+ inside admin-shell per ADR-0023. The legacy shape was retired in
16
+ v0.4.0 per ADR-0024 and is no longer recognized.
17
17
 
18
18
  props: {}
19
19
 
@@ -44,6 +44,10 @@ a2ui:
44
44
  admin-content is the bespoke replacement for raw <main> inside
45
45
  admin-shell. CSS-only; the shell's css/main.css selectors target
46
46
  both shapes via :is(main, admin-content).
47
+ - rule: 'Place as a direct child of <admin-shell>, not inside a sidebar or topbar; admin-content owns the center column.'
48
+ reason: 'Shell hierarchy constraint.'
49
+ - rule: 'Hosts <admin-page> children OR raw page content via the default slot; for chrome bars use <admin-topbar slot="header">.'
50
+ reason: 'Composition contract — page surface.'
47
51
 
48
52
  keywords:
49
53
  - admin-content
@@ -63,6 +63,10 @@ a2ui:
63
63
  - >-
64
64
  For an INTERACTIVE workspace switcher use <select-ui variant="ghost">
65
65
  instead — admin-entity-item is read-only identity display.
66
+ - rule: 'Slot whole into [slot="heading"] of <admin-topbar>/<admin-statusbar>; do not nest inside other admin-entity-items.'
67
+ reason: 'Single-cell identity row; no recursion.'
68
+ - rule: 'Flat hierarchy: icon + label + badge in three slots, no extra wrapping. For full-width metadata strips compose multiple inside <row-ui> instead.'
69
+ reason: 'Cardinality + composition discipline.'
66
70
 
67
71
  keywords:
68
72
  - admin-entity-item
@@ -44,6 +44,10 @@ a2ui:
44
44
  admin-page is the bespoke replacement for <article data-content-root>.
45
45
  Provides the page-content named container query so descendants
46
46
  can use @container page-content (max-width: 720px) etc.
47
+ - rule: 'Hosts a single page surface via [slot="body"] (typically <admin-page-body>) with optional [slot="header"] (<admin-page-header>) and [slot="footer"].'
48
+ reason: 'Slot contract — header/body/footer triad.'
49
+ - rule: 'Sits inside <admin-content>''s default slot; do not place outside admin-shell.'
50
+ reason: 'Shell hierarchy.'
47
51
 
48
52
  keywords:
49
53
  - admin-page
@@ -34,6 +34,10 @@ a2ui:
34
34
  admin-page-body is the centered body band of <admin-page>.
35
35
  Wraps an inner <section-ui> for centered reading-column
36
36
  rhythm; can host full-bleed content directly to opt out.
37
+ - rule: 'Wraps an inner <section-ui> by default for centered reading-column rhythm; for full-bleed content (tables, canvas grids) use [data-full-bleed] on the section.'
38
+ reason: 'Reading-column vs full-bleed knob.'
39
+ - rule: 'Always inside <admin-page slot="body">; do not place admin-page-body outside admin-page.'
40
+ reason: 'Composition constraint.'
37
41
 
38
42
  keywords:
39
43
  - admin-page-body
@@ -32,6 +32,10 @@ a2ui:
32
32
  - >-
33
33
  admin-page-header is the sticky top band of <admin-page>.
34
34
  Wraps an inner <header-ui> for centered reading-column rhythm.
35
+ - rule: 'Wraps an inner <header-ui> for centered reading-column rhythm; admin-page-header owns sticky positioning + border, header-ui owns the content layout.'
36
+ reason: 'Sticky chrome vs content layout separation.'
37
+ - rule: 'Always inside <admin-page slot="header">; for shell-tier chrome use <admin-topbar> instead.'
38
+ reason: 'Page-tier vs shell-tier distinction.'
35
39
 
36
40
  keywords:
37
41
  - admin-page-header
@@ -36,6 +36,10 @@ a2ui:
36
36
  admin-scroll is the bespoke replacement for the legacy <section>
37
37
  child of <main> inside admin-shell. Single child convention —
38
38
  typically wraps an <admin-page> for sticky-band layout.
39
+ - rule: 'Wraps a single <admin-page> child typically; do not place multiple admin-pages side-by-side as siblings here.'
40
+ reason: 'Single-axis vertical scroll only.'
41
+ - rule: 'For horizontal scrolling regions (data grids, canvas surfaces) use overflow on the inner content instead — admin-scroll is vertical-only.'
42
+ reason: 'Scroll-axis discipline.'
39
43
 
40
44
  keywords:
41
45
  - admin-scroll
@@ -2,7 +2,7 @@
2
2
  "$schema": "https://json-schema.org/draft/2020-12/schema",
3
3
  "$id": "https://adiaui.dev/a2ui/v0_9/components/AppShell.json",
4
4
  "title": "AppShell",
5
- "description": "Behavior-only application shell. Wires sidebar toggles, resize handles,\na Cmd+K command palette, and a ResizeObserver that drives responsive\nsidebar collapse. Author supplies the DOM (aside[data-sidebar], main,\ndialog[data-command]); admin-shell binds the interactions.\n",
5
+ "description": "Behavior-only application shell. Canonical authoring shape uses\ncluster-namespaced bespoke children — <admin-topbar> at the top,\n<admin-sidebar slot=\"leading|trailing\"> rails, <admin-content> for\nthe main content region, <admin-command> for the Cmd+K palette, and\noptional <admin-statusbar> at the bottom. The shell wires sidebar\ntoggle forwarding, command-palette triggers, and the ResizeObserver\nthat drives responsive sidebar collapse; each bespoke child owns\nits own resize / collapse / open state-as-attribute semantics per\nADR-0023.\n\nLegacy data-attribute shapes (<aside data-sidebar>, <dialog\ndata-command>, [data-resize], <aside-ui slot=>, <span data-spacer>,\n<div data-actions>) were RETIRED in v0.4.0 per ADR-0024 and are no\nlonger recognized. Consumers must use the bespoke vocabulary.\n",
6
6
  "type": "object",
7
7
  "allOf": [
8
8
  {
@@ -74,19 +74,19 @@
74
74
  "description": "Secondary metadata inside any chrome bar. Muted + --a-ui-sm size."
75
75
  },
76
76
  "default": {
77
- "description": "Author-supplied page DOM. Expected structureaside[data-sidebar] for navigation, main for content, optional dialog[data-command] for Cmd+K."
77
+ "description": "Bespoke children compose here in document order <admin-topbar>, <admin-sidebar slot=\"leading\">, <admin-content> (containing <admin-page> / <admin-page-header> / <admin-page-body>), <admin-sidebar slot=\"trailing\">, <admin-command>, optional <admin-statusbar>. The shell's grid layout reads child tag selectors to place them."
78
78
  },
79
79
  "action": {
80
- "description": "Trailing control cluster inside any chrome bar. The first [slot=\"action\"] child pushes itself (and siblings) to the end; subsequent siblings flow with gap. Coexists with legacy <span data-spacer> / <div data-actions> hooks for one release — new code should prefer slots."
80
+ "description": "Trailing control cluster inside any chrome bar. The first [slot=\"action\"] child pushes itself (and siblings) to the end; subsequent siblings flow with gap."
81
81
  },
82
82
  "action-leading": {
83
- "description": "Leading (inline-start) control cluster inside any chrome bar. Pairs with [slot=\"action\"] for dual-cluster chrome (e.g. back button + breadcrumb on the left, primary actions on the right). Replaces the legacy <span data-spacer> hack."
83
+ "description": "Leading (inline-start) control cluster inside any chrome bar. Pairs with [slot=\"action\"] for dual-cluster chrome (e.g. back button + breadcrumb on the left, primary actions on the right)."
84
84
  },
85
85
  "heading": {
86
86
  "description": "Primary label inside any chrome bar. Medium-weight + strong fg."
87
87
  },
88
88
  "icon": {
89
- "description": "Leading glyph inside any chrome bar > main > header / footer and [data-sidebar] > header / footer. Muted color, flex-align."
89
+ "description": "Leading glyph inside any chrome bar (<admin-topbar>, <admin-statusbar>, <admin-sidebar> header/footer). Muted color, flex-align."
90
90
  }
91
91
  },
92
92
  "states": [
@@ -1,8 +1,18 @@
1
1
  /**
2
- * `<admin-shell-ui>` — Behavior-only application shell. Wires sidebar toggles, resize handles,
3
- a Cmd+K command palette, and a ResizeObserver that drives responsive
4
- sidebar collapse. Author supplies the DOM (aside[data-sidebar], main,
5
- dialog[data-command]); admin-shell binds the interactions.
2
+ * `<admin-shell-ui>` — Behavior-only application shell. Canonical authoring shape uses
3
+ cluster-namespaced bespoke children <admin-topbar> at the top,
4
+ <admin-sidebar slot="leading|trailing"> rails, <admin-content> for
5
+ the main content region, <admin-command> for the Cmd+K palette, and
6
+ optional <admin-statusbar> at the bottom. The shell wires sidebar
7
+ toggle forwarding, command-palette triggers, and the ResizeObserver
8
+ that drives responsive sidebar collapse; each bespoke child owns
9
+ its own resize / collapse / open state-as-attribute semantics per
10
+ ADR-0023.
11
+
12
+ Legacy data-attribute shapes (<aside data-sidebar>, <dialog
13
+ data-command>, [data-resize], <aside-ui slot=>, <span data-spacer>,
14
+ <div data-actions>) were RETIRED in v0.4.0 per ADR-0024 and are no
15
+ longer recognized. Consumers must use the bespoke vocabulary.
6
16
 
7
17
  *
8
18
  * @see https://ui-kit.exe.xyz/site/components/admin-shell
@@ -40,10 +40,6 @@ class AdminShell extends UIElement {
40
40
 
41
41
  static template = () => null;
42
42
 
43
- // FEEDBACK-37: one-shot per-element warn for <admin-topbar>/<admin-statusbar>
44
- // mounted without their slot. WeakSet so it never pins the element from GC.
45
- static #warnedSlots = new WeakSet();
46
-
47
43
  connected() {
48
44
  // Apply the v0.6.13 default mode if (and only if) the author did
49
45
  // not supply a `mode` attribute on the tag. `hasAttribute` returns
@@ -52,7 +48,6 @@ class AdminShell extends UIElement {
52
48
  if (!this.hasAttribute('mode')) this.mode = DEFAULT_MODE;
53
49
  this.#wireToggleButtons();
54
50
  this.#wireCommandTriggers();
55
- this.#checkSlotContracts();
56
51
  }
57
52
 
58
53
  // No #disconnected — children own their own cleanup; the host registers
@@ -100,33 +95,6 @@ class AdminShell extends UIElement {
100
95
  if (item) nav.select(item);
101
96
  });
102
97
  }
103
-
104
- // ── 3. Slot-contract diagnostics (FEEDBACK-37) ──
105
- // <admin-topbar>/<admin-statusbar> are CSS-only — placed inside
106
- // <admin-sidebar>/<admin-content> without slot="header"/"footer" they
107
- // land in the default slot and render in the body column instead of the
108
- // chrome band, with no diagnostic. One-shot warn per misused element.
109
- // (admin-statusbar folded in — identical failure mode to admin-topbar.)
110
- #checkSlotContracts() {
111
- const want = { 'admin-topbar': 'header', 'admin-statusbar': 'footer' };
112
- for (const parent of this.querySelectorAll('admin-sidebar, admin-content')) {
113
- for (const child of parent.children) {
114
- const slot = want[child.localName];
115
- if (slot
116
- && child.getAttribute('slot') !== slot
117
- && !AdminShell.#warnedSlots.has(child)) {
118
- AdminShell.#warnedSlots.add(child);
119
- // eslint-disable-next-line no-console
120
- console.warn(
121
- `[admin-shell] <${child.localName}> inside <${parent.localName}> is missing ` +
122
- `slot="${slot}" — it renders in the default body slot instead of the chrome ` +
123
- `band. Add slot="${slot}". See ${child.localName}.yaml.`,
124
- child,
125
- );
126
- }
127
- }
128
- }
129
- }
130
98
  }
131
99
 
132
100
  customElements.define('admin-shell', AdminShell);