@adia-ai/web-modules 0.3.6 → 0.4.1

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 (47) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/README.md +29 -15
  3. package/chat/chat-shell/chat-shell.js +28 -40
  4. package/chat/chat-shell/css/chat-shell.empty.css +3 -3
  5. package/chat/chat-shell/css/chat-shell.layout.css +2 -2
  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-empty/editor-canvas-empty.examples.html +65 -0
  9. package/editor/editor-canvas-empty/editor-canvas-empty.html +42 -0
  10. package/editor/editor-shell/css/editor-shell.bespoke.css +67 -2
  11. package/editor/editor-shell/css/editor-shell.layout.css +6 -6
  12. package/editor/editor-shell/editor-shell.js +19 -17
  13. package/editor/editor-sidebar/editor-sidebar.a2ui.json +5 -0
  14. package/editor/editor-sidebar/editor-sidebar.examples.html +65 -0
  15. package/editor/editor-sidebar/editor-sidebar.html +43 -0
  16. package/editor/editor-sidebar/editor-sidebar.js +30 -6
  17. package/editor/editor-sidebar/editor-sidebar.test.js +19 -0
  18. package/editor/editor-sidebar/editor-sidebar.yaml +8 -0
  19. package/editor/editor-statusbar/editor-statusbar.examples.html +65 -0
  20. package/editor/editor-statusbar/editor-statusbar.html +42 -0
  21. package/editor/editor-toolbar/editor-toolbar.examples.html +65 -0
  22. package/editor/editor-toolbar/editor-toolbar.html +43 -0
  23. package/index.js +1 -0
  24. package/package.json +8 -5
  25. package/shell/admin-shell/admin-shell.js +27 -243
  26. package/shell/admin-shell/css/admin-shell.bespoke.css +22 -26
  27. package/shell/admin-shell/css/admin-shell.main.css +2 -2
  28. package/shell/admin-shell/css/admin-shell.shell.css +2 -2
  29. package/shell/admin-shell/css/admin-shell.sidebar.css +35 -33
  30. package/simple/index.js +2 -0
  31. package/simple/simple-content/simple-content.a2ui.json +67 -0
  32. package/simple/simple-content/simple-content.css +29 -0
  33. package/simple/simple-content/simple-content.examples.html +13 -0
  34. package/simple/simple-content/simple-content.html +42 -0
  35. package/simple/simple-content/simple-content.yaml +54 -0
  36. package/simple/simple-hero/simple-hero.a2ui.json +76 -0
  37. package/simple/simple-hero/simple-hero.css +45 -0
  38. package/simple/simple-hero/simple-hero.examples.html +33 -0
  39. package/simple/simple-hero/simple-hero.html +42 -0
  40. package/simple/simple-hero/simple-hero.yaml +57 -0
  41. package/simple/simple-shell/simple-shell.a2ui.json +87 -0
  42. package/simple/simple-shell/simple-shell.css +40 -0
  43. package/simple/simple-shell/simple-shell.examples.html +42 -0
  44. package/simple/simple-shell/simple-shell.html +42 -0
  45. package/simple/simple-shell/simple-shell.js +47 -0
  46. package/simple/simple-shell/simple-shell.test.js +83 -0
  47. package/simple/simple-shell/simple-shell.yaml +78 -0
package/simple/simple-shell/simple-shell.html ADDED
@@ -0,0 +1,42 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="auto">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Simple Shell — AdiaUI</title>
7
+
8
+ <link rel="stylesheet" href="../../../web-components/styles/resets.css">
9
+ <link rel="stylesheet" href="../../../web-components/styles/tokens.css">
10
+ <link rel="stylesheet" href="../simple-shell/simple-shell.css">
11
+ <link rel="stylesheet" href="../simple-content/simple-content.css">
12
+ <link rel="stylesheet" href="../simple-hero/simple-hero.css">
13
+ <link rel="stylesheet" href="../../../web-components/components/button/button.css">
14
+
15
+ <script type="module" src="../simple-shell/simple-shell.js"></script>
16
+ <script type="module" src="../../../web-components/components/button/button.js"></script>
17
+
18
+ <style>
19
+ :where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
20
+ main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
21
+ </style>
22
+ </head>
23
+ <body>
24
+
25
+ <main id="demo-root">
26
+ <p>Loading examples…</p>
27
+ </main>
28
+
29
+ <script type="module">
30
+ const root = document.getElementById('demo-root');
31
+ try {
32
+ const res = await fetch('./simple-shell.examples.html');
33
+ if (!res.ok) throw new Error(`fetch failed (${res.status})`);
34
+ root.innerHTML = await res.text();
35
+ } catch (err) {
36
+ root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load simple-shell.examples.html — ${err.message}</p>`;
37
+ console.error('[simple-shell.html]', err);
38
+ }
39
+ </script>
40
+
41
+ </body>
42
+ </html>
package/simple/simple-shell/simple-shell.js ADDED
@@ -0,0 +1,47 @@
1
+ import { UIElement } from '../../../web-components/core/element.js';
2
+
3
+ /**
4
+ * <simple-shell> — Minimal shell for marketing / landing / error pages.
5
+ *
6
+ * Behavior-only orchestrator. Reflects `[centered]` (vertical center)
7
+ * and `[full-bleed]` (drops max-width). No sidebars, no chrome bars,
8
+ * no command palette — deliberately minimal.
9
+ *
10
+ * Structure (bespoke shape, canonical since v0.4.1):
11
+ *
12
+ * <simple-shell centered>
13
+ * <simple-hero>
14
+ * <h1 slot="heading">Welcome</h1>
15
+ * <p slot="lede">Get started in seconds.</p>
16
+ * <div slot="actions"><button-ui>Sign up</button-ui></div>
17
+ * </simple-hero>
18
+ * <simple-content>
19
+ * <p>Body content goes here.</p>
20
+ * </simple-content>
21
+ * </simple-shell>
22
+ *
23
+ * Use cases:
24
+ * - Marketing splash pages
25
+ * - Error pages (404, 500, maintenance)
26
+ * - "Thank you" / confirmation pages
27
+ * - Single-card flows (sign-in, password reset)
28
+ *
29
+ * Per ADR-0023 + ADR-0024, simple-shell is the 4th cluster in the
30
+ * bespoke-shell-children family (after admin/chat/editor). Designed
31
+ * deliberately small to prove the pattern works for thin clusters
32
+ * without ceremony.
33
+ */
34
+ class SimpleShell extends UIElement {
35
+ static properties = {
36
+ centered: { type: Boolean, default: false, reflect: true },
37
+ 'full-bleed': { type: Boolean, default: false, reflect: true },
38
+ };
39
+
40
+ static template = () => null;
41
+ }
42
+
43
+ if (!customElements.get('simple-shell')) {
44
+ customElements.define('simple-shell', SimpleShell);
45
+ }
46
+
47
+ export { SimpleShell };
package/simple/simple-shell/simple-shell.test.js ADDED
@@ -0,0 +1,83 @@
1
+ import { describe, it, expect, beforeEach } from 'vitest';
2
+ import '../../../web-components/core/element.js';
3
+ import './simple-shell.js';
4
+
5
+ const tick = () => new Promise((r) => queueMicrotask(r));
6
+
7
+ function mount(html) {
8
+ const wrap = document.createElement('div');
9
+ wrap.innerHTML = html;
10
+ document.body.appendChild(wrap);
11
+ return wrap.firstElementChild;
12
+ }
13
+
14
+ beforeEach(() => {
15
+ document.body.innerHTML = '';
16
+ });
17
+
18
+ describe('simple-shell', () => {
19
+ it('registers simple-shell as a custom element', () => {
20
+ expect(customElements.get('simple-shell')).toBeDefined();
21
+ });
22
+
23
+ it('defaults to centered=false and full-bleed=false', () => {
24
+ const el = mount('<simple-shell></simple-shell>');
25
+ expect(el.hasAttribute('centered')).toBe(false);
26
+ expect(el.hasAttribute('full-bleed')).toBe(false);
27
+ });
28
+
29
+ it('honors initial [centered] attribute on connect', () => {
30
+ const el = mount('<simple-shell centered></simple-shell>');
31
+ expect(el.centered).toBe(true);
32
+ });
33
+
34
+ it('honors initial [full-bleed] attribute on connect', () => {
35
+ const el = mount('<simple-shell full-bleed></simple-shell>');
36
+ expect(el['full-bleed']).toBe(true);
37
+ });
38
+
39
+ it('reflects [centered] via property assignment', async () => {
40
+ const el = mount('<simple-shell></simple-shell>');
41
+ el.centered = true;
42
+ await tick();
43
+ expect(el.hasAttribute('centered')).toBe(true);
44
+ });
45
+
46
+ it('reflects [full-bleed] via property assignment', async () => {
47
+ const el = mount('<simple-shell></simple-shell>');
48
+ el['full-bleed'] = true;
49
+ await tick();
50
+ expect(el.hasAttribute('full-bleed')).toBe(true);
51
+ });
52
+
53
+ it('removes [centered] when set to false', async () => {
54
+ const el = mount('<simple-shell centered></simple-shell>');
55
+ el.centered = false;
56
+ await tick();
57
+ expect(el.hasAttribute('centered')).toBe(false);
58
+ });
59
+
60
+ it('stamps no HTML (behavior-only orchestrator)', () => {
61
+ const el = mount('<simple-shell></simple-shell>');
62
+ // Empty content + nothing stamped by the host
63
+ expect(el.children.length).toBe(0);
64
+ });
65
+
66
+ it('preserves authored slotted children', () => {
67
+ const el = mount(`
68
+ <simple-shell>
69
+ <simple-hero><h1 slot="heading">Hello</h1></simple-hero>
70
+ <simple-content><p>Body</p></simple-content>
71
+ </simple-shell>
72
+ `);
73
+ expect(el.querySelector('simple-hero')).toBeTruthy();
74
+ expect(el.querySelector('simple-content')).toBeTruthy();
75
+ expect(el.querySelector('[slot="heading"]')).toBeTruthy();
76
+ });
77
+
78
+ it('supports both [centered] and [full-bleed] simultaneously', () => {
79
+ const el = mount('<simple-shell centered full-bleed></simple-shell>');
80
+ expect(el.centered).toBe(true);
81
+ expect(el['full-bleed']).toBe(true);
82
+ });
83
+ });
package/simple/simple-shell/simple-shell.yaml ADDED
@@ -0,0 +1,78 @@
1
+ # Edit this file; run `npm run build:components` to regenerate a2ui.json.
2
+ $schema: ../../../../scripts/schemas/component.yaml.schema.json
3
+ name: SimpleShell
4
+ tag: simple-shell
5
+ component: SimpleShell
6
+ category: shells
7
+ version: 1
8
+ description: |
9
+ Module-tier minimal shell for marketing / landing / error pages.
10
+ Behavior-only orchestrator with two reflected attributes — [centered]
11
+ for vertical centering, [full-bleed] for dropping the max-width
12
+ constraint.
13
+
14
+ The 4th cluster in the bespoke shell family per ADR-0023, designed
15
+ deliberately small (1 host + 2 CSS-only children) to demonstrate
16
+ the pattern works without ceremony for thin clusters.
17
+
18
+ Use cases: marketing splashes, error pages (404 / 500 / maintenance),
19
+ thank-you pages, single-card flows (sign-in, password reset).
20
+
21
+ props:
22
+ centered:
23
+ description: Reflected — vertically centers content in viewport.
24
+ type: boolean
25
+ default: false
26
+ reflect: true
27
+ full-bleed:
28
+ description: Reflected — drops the default max-width so content fills full viewport.
29
+ type: boolean
30
+ default: false
31
+ reflect: true
32
+
33
+ events: {}
34
+
35
+ slots:
36
+ default:
37
+ description: >-
38
+ Bespoke children (<simple-hero>, <simple-content>) compose here.
39
+ The author owns layout order.
40
+
41
+ states:
42
+ - name: idle
43
+ description: Default layout — top-aligned, max-width container.
44
+ - name: centered
45
+ description: When [centered] is set — vertically centers the content stack.
46
+ - name: full-bleed
47
+ description: When [full-bleed] is set — drops max-width so content fills the viewport.
48
+
49
+ traits: []
50
+
51
+ a2ui:
52
+ rules:
53
+ - >-
54
+ simple-shell is the bespoke shell for thin / minimal page surfaces.
55
+ Use when the page has no nav rail, no chrome bars, no command
56
+ palette. For full app surfaces use admin-shell; for chat surfaces
57
+ use chat-shell; for design tools use editor-shell.
58
+ - >-
59
+ Compose with <simple-hero> (optional top hero strip) and
60
+ <simple-content> (main article body). Both are CSS-only structural
61
+ children — no JS, no state.
62
+
63
+ keywords:
64
+ - simple-shell
65
+ - landing
66
+ - marketing
67
+ - error-page
68
+ - splash
69
+ - confirmation
70
+ - minimal-shell
71
+
72
+ synonyms:
73
+ simple-shell: [marketing-shell, landing-shell, minimal-shell, splash-shell, error-shell]
74
+
75
+ related:
76
+ - SimpleHero
77
+ - SimpleContent
78
+ - AdminShell