@adia-ai/web-modules 0.3.5 → 0.4.0

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 (41) hide show
  1. package/CHANGELOG.md +55 -0
  2. package/chat/chat-shell/chat-shell.js +28 -40
  3. package/chat/chat-shell/css/chat-shell.empty.css +3 -3
  4. package/chat/chat-shell/css/chat-shell.layout.css +2 -2
  5. package/editor/editor-canvas/editor-canvas.a2ui.json +87 -0
  6. package/editor/editor-canvas/editor-canvas.examples.html +65 -0
  7. package/editor/editor-canvas/editor-canvas.html +43 -0
  8. package/editor/editor-canvas/editor-canvas.js +103 -0
  9. package/editor/editor-canvas/editor-canvas.test.js +100 -0
  10. package/editor/editor-canvas/editor-canvas.yaml +88 -0
  11. package/editor/editor-canvas-empty/editor-canvas-empty.a2ui.json +69 -0
  12. package/editor/editor-canvas-empty/editor-canvas-empty.examples.html +65 -0
  13. package/editor/editor-canvas-empty/editor-canvas-empty.html +42 -0
  14. package/editor/editor-canvas-empty/editor-canvas-empty.yaml +56 -0
  15. package/editor/editor-shell/css/editor-shell.bespoke.css +237 -0
  16. package/editor/editor-shell/css/editor-shell.layout.css +6 -6
  17. package/editor/editor-shell/editor-shell.css +1 -0
  18. package/editor/editor-shell/editor-shell.js +87 -30
  19. package/editor/editor-sidebar/editor-sidebar.a2ui.json +93 -0
  20. package/editor/editor-sidebar/editor-sidebar.examples.html +65 -0
  21. package/editor/editor-sidebar/editor-sidebar.html +43 -0
  22. package/editor/editor-sidebar/editor-sidebar.js +197 -0
  23. package/editor/editor-sidebar/editor-sidebar.test.js +145 -0
  24. package/editor/editor-sidebar/editor-sidebar.yaml +91 -0
  25. package/editor/editor-statusbar/editor-statusbar.a2ui.json +76 -0
  26. package/editor/editor-statusbar/editor-statusbar.examples.html +65 -0
  27. package/editor/editor-statusbar/editor-statusbar.html +42 -0
  28. package/editor/editor-statusbar/editor-statusbar.yaml +57 -0
  29. package/editor/editor-toolbar/editor-toolbar.a2ui.json +96 -0
  30. package/editor/editor-toolbar/editor-toolbar.examples.html +65 -0
  31. package/editor/editor-toolbar/editor-toolbar.html +43 -0
  32. package/editor/editor-toolbar/editor-toolbar.js +58 -0
  33. package/editor/editor-toolbar/editor-toolbar.test.js +99 -0
  34. package/editor/editor-toolbar/editor-toolbar.yaml +81 -0
  35. package/editor/index.js +3 -0
  36. package/package.json +4 -4
  37. package/shell/admin-shell/admin-shell.js +27 -243
  38. package/shell/admin-shell/css/admin-shell.bespoke.css +22 -26
  39. package/shell/admin-shell/css/admin-shell.main.css +2 -2
  40. package/shell/admin-shell/css/admin-shell.shell.css +2 -2
  41. package/shell/admin-shell/css/admin-shell.sidebar.css +35 -33
package/shell/admin-shell/css/admin-shell.sidebar.css CHANGED
@@ -5,12 +5,14 @@
5
5
  Acts as a CSS container query provider (container-name: sidebar)
6
6
  so children can adapt to collapsed width via @container.
7
7
 
8
- Authoring shapes (both styled identically):
9
- - Legacy: <aside data-sidebar="leading|trailing">
10
- - Slot vocabulary: <aside-ui slot="leading|trailing">
8
+ Canonical authoring shape (since v0.4.0, ADR-0023 Phase 3):
9
+ <admin-sidebar slot="leading|trailing" resizable collapsible>
10
+
11
+ Pre-v0.4.0 legacy shapes (<aside data-sidebar>, <aside-ui slot>)
12
+ were retired; see ADR-0024 + git history for the migration recipe.
11
13
  ═══════════════════════════════════════════════════════════════ */
12
14
 
13
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) {
15
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) {
14
16
  display: flex;
15
17
  flex-direction: column;
16
18
  flex-shrink: 0;
@@ -27,7 +29,7 @@
27
29
  /* ── Resize handle ──
28
30
  6px invisible hit area straddling the sidebar edge.
29
31
  Accent color on hover/drag. */
30
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > [data-resize] {
32
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > [data-resize] {
31
33
  position: absolute;
32
34
  top: 0;
33
35
  bottom: 0;
@@ -38,29 +40,29 @@
38
40
  z-index: 2;
39
41
  }
40
42
 
41
- :is([data-sidebar="leading"], aside-ui[slot="leading"]) > [data-resize] { right: -3px; }
42
- :is([data-sidebar="trailing"], aside-ui[slot="trailing"]) > [data-resize] { left: -3px; }
43
+ admin-sidebar[slot="leading"] > [data-resize] { right: -3px; }
44
+ admin-sidebar[slot="trailing"] > [data-resize] { left: -3px; }
43
45
 
44
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > [data-resize]:hover {
46
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > [data-resize]:hover {
45
47
  background: var(--page-sidebar-resize-accent);
46
48
  }
47
49
 
48
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])[data-resizing] > [data-resize] {
50
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"])[data-resizing] > [data-resize] {
49
51
  background: var(--page-sidebar-resize-accent);
50
52
  }
51
53
 
52
54
  /* During drag: disable transition + text selection */
53
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"])[data-resizing] {
55
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"])[data-resizing] {
54
56
  user-select: none;
55
57
  transition: none;
56
58
  }
57
59
 
58
60
  /* ── Sidebar widths ── */
59
- :is([data-sidebar="leading"], aside-ui[slot="leading"]) {
61
+ admin-sidebar[slot="leading"] {
60
62
  width: var(--page-sidebar-width-leading);
61
63
  }
62
64
 
63
- :is([data-sidebar="trailing"], aside-ui[slot="trailing"]) {
65
+ admin-sidebar[slot="trailing"] {
64
66
  width: var(--page-sidebar-width-trailing);
65
67
  }
66
68
 
@@ -71,8 +73,8 @@
71
73
  (a workspace-select or user-select) so the slot rules rarely come
72
74
  into play — but they stay consistent for authors that compose
73
75
  richer sidebar chromes. */
74
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui),
75
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) {
76
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui),
77
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) {
76
78
  display: flex;
77
79
  align-items: center;
78
80
  gap: var(--page-sidebar-gap);
@@ -82,49 +84,49 @@
82
84
  min-width: 0;
83
85
  }
84
86
 
85
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) {
87
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) {
86
88
  min-height: var(--page-header-height);
87
89
  border-bottom: var(--page-border);
88
90
  }
89
91
 
90
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) {
92
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) {
91
93
  min-height: var(--page-header-height);
92
94
  margin-top: auto;
93
95
  border-top: var(--page-border);
94
96
  }
95
97
 
96
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="icon"],
97
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="icon"] {
98
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="icon"],
99
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="icon"] {
98
100
  display: flex;
99
101
  align-items: center;
100
102
  flex-shrink: 0;
101
103
  color: var(--page-header-fg-muted);
102
104
  }
103
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="heading"],
104
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="heading"] {
105
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="heading"],
106
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="heading"] {
105
107
  font-weight: var(--a-weight-medium);
106
108
  color: var(--a-fg);
107
109
  }
108
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="description"],
109
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="description"] {
110
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="description"],
111
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="description"] {
110
112
  color: var(--page-header-fg-muted);
111
113
  font-size: var(--a-ui-sm);
112
114
  }
113
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action"],
114
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] {
115
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="action"],
116
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] {
115
117
  display: flex;
116
118
  align-items: center;
117
119
  gap: var(--page-actions-gap);
118
120
  flex-shrink: 0;
119
121
  margin-inline-start: auto;
120
122
  }
121
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action"] ~ [slot="action"],
122
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] ~ [slot="action"] {
123
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="action"] ~ [slot="action"],
124
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="action"] ~ [slot="action"] {
123
125
  margin-inline-start: 0;
124
126
  }
125
127
  /* Dual-cluster: leading group on inline-start, trailing cluster on inline-end. */
126
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(header, header-ui) > [slot="action-leading"],
127
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(footer, footer-ui) > [slot="action-leading"] {
128
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(header, header-ui) > [slot="action-leading"],
129
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(footer, footer-ui) > [slot="action-leading"] {
128
130
  display: flex;
129
131
  align-items: center;
130
132
  gap: var(--page-actions-gap);
@@ -133,7 +135,7 @@
133
135
  }
134
136
 
135
137
  /* ── Sidebar section (scrollable body) ── */
136
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui) {
138
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(section, section-ui) {
137
139
  flex: 1;
138
140
  overflow-y: auto;
139
141
  padding: var(--page-sidebar-px);
@@ -141,23 +143,23 @@
141
143
  scrollbar-width: none;
142
144
  }
143
145
 
144
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui)::-webkit-scrollbar { display: none; }
146
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(section, section-ui)::-webkit-scrollbar { display: none; }
145
147
 
146
148
  /* span[slot="pad"] — opt-in padding wrapper for sidebar content
147
149
  that needs inset (e.g. trailing sidebar inspector fields) */
148
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) span[slot="pad"] {
150
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) span[slot="pad"] {
149
151
  display: block;
150
152
  padding: var(--page-sidebar-px);
151
153
  }
152
154
 
153
155
  /* Reset nav-ui border/padding inside sidebars */
154
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) nav-ui {
156
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) nav-ui {
155
157
  border: none;
156
158
  padding: 0;
157
159
  }
158
160
 
159
161
  /* Sidebar-level divider (outside nav-ui scope) */
160
- :is([data-sidebar], aside-ui[slot="leading"], aside-ui[slot="trailing"]) > :is(section, section-ui) > hr[data-nav-divider] {
162
+ :is(admin-sidebar[slot="leading"], admin-sidebar[slot="trailing"]) > :is(section, section-ui) > hr[data-nav-divider] {
161
163
  border: none;
162
164
  height: 1px;
163
165
  background: var(--page-sidebar-divider-bg);