@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.
- package/CHANGELOG.md +44 -0
- package/README.md +29 -15
- package/chat/chat-shell/chat-shell.js +28 -40
- package/chat/chat-shell/css/chat-shell.empty.css +3 -3
- package/chat/chat-shell/css/chat-shell.layout.css +2 -2
- package/editor/editor-canvas/editor-canvas.examples.html +65 -0
- package/editor/editor-canvas/editor-canvas.html +43 -0
- package/editor/editor-canvas-empty/editor-canvas-empty.examples.html +65 -0
- package/editor/editor-canvas-empty/editor-canvas-empty.html +42 -0
- package/editor/editor-shell/css/editor-shell.bespoke.css +67 -2
- package/editor/editor-shell/css/editor-shell.layout.css +6 -6
- package/editor/editor-shell/editor-shell.js +19 -17
- package/editor/editor-sidebar/editor-sidebar.a2ui.json +5 -0
- package/editor/editor-sidebar/editor-sidebar.examples.html +65 -0
- package/editor/editor-sidebar/editor-sidebar.html +43 -0
- package/editor/editor-sidebar/editor-sidebar.js +30 -6
- package/editor/editor-sidebar/editor-sidebar.test.js +19 -0
- package/editor/editor-sidebar/editor-sidebar.yaml +8 -0
- package/editor/editor-statusbar/editor-statusbar.examples.html +65 -0
- package/editor/editor-statusbar/editor-statusbar.html +42 -0
- package/editor/editor-toolbar/editor-toolbar.examples.html +65 -0
- package/editor/editor-toolbar/editor-toolbar.html +43 -0
- package/index.js +1 -0
- package/package.json +8 -5
- package/shell/admin-shell/admin-shell.js +27 -243
- package/shell/admin-shell/css/admin-shell.bespoke.css +22 -26
- package/shell/admin-shell/css/admin-shell.main.css +2 -2
- package/shell/admin-shell/css/admin-shell.shell.css +2 -2
- package/shell/admin-shell/css/admin-shell.sidebar.css +35 -33
- package/simple/index.js +2 -0
- package/simple/simple-content/simple-content.a2ui.json +67 -0
- package/simple/simple-content/simple-content.css +29 -0
- package/simple/simple-content/simple-content.examples.html +13 -0
- package/simple/simple-content/simple-content.html +42 -0
- package/simple/simple-content/simple-content.yaml +54 -0
- package/simple/simple-hero/simple-hero.a2ui.json +76 -0
- package/simple/simple-hero/simple-hero.css +45 -0
- package/simple/simple-hero/simple-hero.examples.html +33 -0
- package/simple/simple-hero/simple-hero.html +42 -0
- package/simple/simple-hero/simple-hero.yaml +57 -0
- package/simple/simple-shell/simple-shell.a2ui.json +87 -0
- package/simple/simple-shell/simple-shell.css +40 -0
- package/simple/simple-shell/simple-shell.examples.html +42 -0
- package/simple/simple-shell/simple-shell.html +42 -0
- package/simple/simple-shell/simple-shell.js +47 -0
- package/simple/simple-shell/simple-shell.test.js +83 -0
- package/simple/simple-shell/simple-shell.yaml +78 -0
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
},
|
|
21
21
|
"component": {
|
|
22
22
|
"const": "EditorSidebar"
|
|
23
|
+
},
|
|
24
|
+
"resizing": {
|
|
25
|
+
"description": "Reflected — set during an active pointer-drag of the pane's\nresize handle. Used to disable transitions and visual treatments\nthat would feel laggy during drag.\n",
|
|
26
|
+
"type": "boolean",
|
|
27
|
+
"default": false
|
|
23
28
|
}
|
|
24
29
|
},
|
|
25
30
|
"required": [
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<header>
|
|
2
|
+
<div>
|
|
3
|
+
<h1>Editor Sidebar</h1>
|
|
4
|
+
<div data-actions>
|
|
5
|
+
<tag-ui size="sm">editor-sidebar</tag-ui>
|
|
6
|
+
<tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<p>Module-tier editor-cluster sidebar — wraps <pane-ui resizable> rather than reimplementing drag. Cluster-distinct localStorage prefix.</p>
|
|
10
|
+
</header>
|
|
11
|
+
|
|
12
|
+
<section data-section>
|
|
13
|
+
<h2 variant="section">Role</h2>
|
|
14
|
+
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code><editor-shell></code> (host), <code><editor-toolbar></code>, <code><editor-canvas></code>, <code><editor-sidebar></code> (JS-bearing) + <code><editor-statusbar></code>, <code><editor-canvas-empty></code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
|
|
15
|
+
</section>
|
|
16
|
+
|
|
17
|
+
<section data-section>
|
|
18
|
+
<h2 variant="section">Composition</h2>
|
|
19
|
+
<p>Typical placement inside <code><editor-shell></code>:</p>
|
|
20
|
+
<code-ui language="html"><editor-shell>
|
|
21
|
+
<editor-toolbar>
|
|
22
|
+
<span slot="title">Untitled.fig</span>
|
|
23
|
+
<button-ui slot="action" icon="gear"></button-ui>
|
|
24
|
+
</editor-toolbar>
|
|
25
|
+
|
|
26
|
+
<editor-sidebar slot="leading" collapsible>
|
|
27
|
+
<pane-ui resizable>
|
|
28
|
+
<header>Navigator</header>
|
|
29
|
+
<section>…layers…</section>
|
|
30
|
+
</pane-ui>
|
|
31
|
+
</editor-sidebar>
|
|
32
|
+
|
|
33
|
+
<editor-canvas>
|
|
34
|
+
<editor-canvas-empty>
|
|
35
|
+
<empty-state-ui icon="square" heading="New document" description="Drop content to begin."></empty-state-ui>
|
|
36
|
+
</editor-canvas-empty>
|
|
37
|
+
</editor-canvas>
|
|
38
|
+
|
|
39
|
+
<editor-sidebar slot="trailing" collapsible>
|
|
40
|
+
<pane-ui resizable>
|
|
41
|
+
<header>Inspector</header>
|
|
42
|
+
<section>…properties…</section>
|
|
43
|
+
</pane-ui>
|
|
44
|
+
</editor-sidebar>
|
|
45
|
+
|
|
46
|
+
<editor-statusbar>
|
|
47
|
+
<span slot="status">Saved</span>
|
|
48
|
+
<span slot="zoom">100%</span>
|
|
49
|
+
</editor-statusbar>
|
|
50
|
+
</editor-shell></code-ui>
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<section data-section>
|
|
54
|
+
<h2 variant="section">State as attribute</h2>
|
|
55
|
+
<code-ui language="css">/* Hide all chrome in focus mode */
|
|
56
|
+
editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Visual treatment for empty canvas */
|
|
61
|
+
editor-canvas[empty] { /* placeholder UI */ }
|
|
62
|
+
|
|
63
|
+
/* Highlight focused canvas */
|
|
64
|
+
editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
|
|
65
|
+
</section>
|
|
@@ -0,0 +1,43 @@
|
|
|
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>Editor Sidebar — 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="../editor-shell/editor-shell.css">
|
|
11
|
+
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
12
|
+
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
13
|
+
|
|
14
|
+
<script type="module" src="../editor-shell/editor-shell.js"></script>
|
|
15
|
+
<script type="module" src="./editor-sidebar.js"></script>
|
|
16
|
+
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
17
|
+
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
21
|
+
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
|
|
26
|
+
<main id="demo-root">
|
|
27
|
+
<p>Loading examples…</p>
|
|
28
|
+
</main>
|
|
29
|
+
|
|
30
|
+
<script type="module">
|
|
31
|
+
const root = document.getElementById('demo-root');
|
|
32
|
+
try {
|
|
33
|
+
const res = await fetch('./editor-sidebar.examples.html');
|
|
34
|
+
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
35
|
+
root.innerHTML = await res.text();
|
|
36
|
+
} catch (err) {
|
|
37
|
+
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load editor-sidebar.examples.html — ${err.message}</p>`;
|
|
38
|
+
console.error('[editor-sidebar.html]', err);
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
@@ -54,6 +54,7 @@ const STORAGE_PREFIX = 'adia-editor-sidebar-';
|
|
|
54
54
|
class EditorSidebar extends UIElement {
|
|
55
55
|
static properties = {
|
|
56
56
|
collapsed: { type: Boolean, default: false, reflect: true },
|
|
57
|
+
resizing: { type: Boolean, default: false, reflect: true },
|
|
57
58
|
};
|
|
58
59
|
|
|
59
60
|
static template = () => null;
|
|
@@ -61,6 +62,8 @@ class EditorSidebar extends UIElement {
|
|
|
61
62
|
#pane = null;
|
|
62
63
|
#ro = null;
|
|
63
64
|
#storageKey = null;
|
|
65
|
+
#onPointerDown = null;
|
|
66
|
+
#onPointerUp = null;
|
|
64
67
|
|
|
65
68
|
connected() {
|
|
66
69
|
this.#pane = this.querySelector('pane-ui');
|
|
@@ -78,17 +81,38 @@ class EditorSidebar extends UIElement {
|
|
|
78
81
|
this.#ro = new ResizeObserver(() => this.#syncCollapsed());
|
|
79
82
|
this.#ro.observe(this.#pane);
|
|
80
83
|
|
|
81
|
-
//
|
|
82
|
-
|
|
83
|
-
|
|
84
|
+
// Track resize via pointerdown on resize-handle children of the pane
|
|
85
|
+
// (pane-ui's drag-handle is internal; we listen on the pane and let
|
|
86
|
+
// pointerup on document terminate)
|
|
87
|
+
this.#onPointerDown = (e) => {
|
|
88
|
+
// Heuristic — pointerdown inside pane that targets a drag-handle
|
|
89
|
+
// (covers pane-ui's internal handle classes + [data-resize])
|
|
90
|
+
const target = e.target;
|
|
91
|
+
if (target?.matches?.('[data-resize], [class*="resize"], [class*="handle"]')) {
|
|
92
|
+
this.resizing = true;
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
this.#pane.addEventListener('pointerdown', this.#onPointerDown);
|
|
96
|
+
|
|
97
|
+
this.#onPointerUp = () => {
|
|
98
|
+
if (this.resizing) {
|
|
99
|
+
this.resizing = false;
|
|
100
|
+
}
|
|
101
|
+
this.#persistWidth();
|
|
102
|
+
};
|
|
103
|
+
document.addEventListener('pointerup', this.#onPointerUp);
|
|
84
104
|
}
|
|
85
105
|
|
|
86
106
|
disconnected() {
|
|
87
107
|
this.#ro?.disconnect();
|
|
88
108
|
this.#ro = null;
|
|
89
|
-
if (this
|
|
90
|
-
|
|
91
|
-
this
|
|
109
|
+
if (this.#onPointerDown && this.#pane) {
|
|
110
|
+
this.#pane.removeEventListener('pointerdown', this.#onPointerDown);
|
|
111
|
+
this.#onPointerDown = null;
|
|
112
|
+
}
|
|
113
|
+
if (this.#onPointerUp) {
|
|
114
|
+
document.removeEventListener('pointerup', this.#onPointerUp);
|
|
115
|
+
this.#onPointerUp = null;
|
|
92
116
|
}
|
|
93
117
|
}
|
|
94
118
|
|
|
@@ -123,4 +123,23 @@ describe('editor-sidebar', () => {
|
|
|
123
123
|
expect(() => sb.collapse()).not.toThrow();
|
|
124
124
|
expect(() => sb.expand()).not.toThrow();
|
|
125
125
|
});
|
|
126
|
+
|
|
127
|
+
it('reflects [resizing] via property assignment', async () => {
|
|
128
|
+
const sb = mount('<editor-sidebar slot="leading"><pane-ui></pane-ui></editor-sidebar>');
|
|
129
|
+
sb.resizing = true;
|
|
130
|
+
await tick();
|
|
131
|
+
expect(sb.hasAttribute('resizing')).toBe(true);
|
|
132
|
+
sb.resizing = false;
|
|
133
|
+
await tick();
|
|
134
|
+
expect(sb.hasAttribute('resizing')).toBe(false);
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
it('clears [resizing] on document pointerup', async () => {
|
|
138
|
+
const sb = mount('<editor-sidebar slot="leading"><pane-ui></pane-ui></editor-sidebar>');
|
|
139
|
+
sb.resizing = true;
|
|
140
|
+
await tick();
|
|
141
|
+
document.dispatchEvent(new Event('pointerup'));
|
|
142
|
+
await tick();
|
|
143
|
+
expect(sb.resizing).toBe(false);
|
|
144
|
+
});
|
|
126
145
|
});
|
|
@@ -29,6 +29,14 @@ props:
|
|
|
29
29
|
type: boolean
|
|
30
30
|
default: false
|
|
31
31
|
reflect: true
|
|
32
|
+
resizing:
|
|
33
|
+
description: |
|
|
34
|
+
Reflected — set during an active pointer-drag of the pane's
|
|
35
|
+
resize handle. Used to disable transitions and visual treatments
|
|
36
|
+
that would feel laggy during drag.
|
|
37
|
+
type: boolean
|
|
38
|
+
default: false
|
|
39
|
+
reflect: true
|
|
32
40
|
|
|
33
41
|
events:
|
|
34
42
|
sidebar-toggle:
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<header>
|
|
2
|
+
<div>
|
|
3
|
+
<h1>Editor Statusbar</h1>
|
|
4
|
+
<div data-actions>
|
|
5
|
+
<tag-ui size="sm">editor-statusbar</tag-ui>
|
|
6
|
+
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<p>Module-tier editor statusbar — bottom chrome bar. CSS-only.</p>
|
|
10
|
+
</header>
|
|
11
|
+
|
|
12
|
+
<section data-section>
|
|
13
|
+
<h2 variant="section">Role</h2>
|
|
14
|
+
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code><editor-shell></code> (host), <code><editor-toolbar></code>, <code><editor-canvas></code>, <code><editor-sidebar></code> (JS-bearing) + <code><editor-statusbar></code>, <code><editor-canvas-empty></code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
|
|
15
|
+
</section>
|
|
16
|
+
|
|
17
|
+
<section data-section>
|
|
18
|
+
<h2 variant="section">Composition</h2>
|
|
19
|
+
<p>Typical placement inside <code><editor-shell></code>:</p>
|
|
20
|
+
<code-ui language="html"><editor-shell>
|
|
21
|
+
<editor-toolbar>
|
|
22
|
+
<span slot="title">Untitled.fig</span>
|
|
23
|
+
<button-ui slot="action" icon="gear"></button-ui>
|
|
24
|
+
</editor-toolbar>
|
|
25
|
+
|
|
26
|
+
<editor-sidebar slot="leading" collapsible>
|
|
27
|
+
<pane-ui resizable>
|
|
28
|
+
<header>Navigator</header>
|
|
29
|
+
<section>…layers…</section>
|
|
30
|
+
</pane-ui>
|
|
31
|
+
</editor-sidebar>
|
|
32
|
+
|
|
33
|
+
<editor-canvas>
|
|
34
|
+
<editor-canvas-empty>
|
|
35
|
+
<empty-state-ui icon="square" heading="New document" description="Drop content to begin."></empty-state-ui>
|
|
36
|
+
</editor-canvas-empty>
|
|
37
|
+
</editor-canvas>
|
|
38
|
+
|
|
39
|
+
<editor-sidebar slot="trailing" collapsible>
|
|
40
|
+
<pane-ui resizable>
|
|
41
|
+
<header>Inspector</header>
|
|
42
|
+
<section>…properties…</section>
|
|
43
|
+
</pane-ui>
|
|
44
|
+
</editor-sidebar>
|
|
45
|
+
|
|
46
|
+
<editor-statusbar>
|
|
47
|
+
<span slot="status">Saved</span>
|
|
48
|
+
<span slot="zoom">100%</span>
|
|
49
|
+
</editor-statusbar>
|
|
50
|
+
</editor-shell></code-ui>
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<section data-section>
|
|
54
|
+
<h2 variant="section">State as attribute</h2>
|
|
55
|
+
<code-ui language="css">/* Hide all chrome in focus mode */
|
|
56
|
+
editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Visual treatment for empty canvas */
|
|
61
|
+
editor-canvas[empty] { /* placeholder UI */ }
|
|
62
|
+
|
|
63
|
+
/* Highlight focused canvas */
|
|
64
|
+
editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
|
|
65
|
+
</section>
|
|
@@ -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>Editor Statusbar — 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="../editor-shell/editor-shell.css">
|
|
11
|
+
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
12
|
+
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
13
|
+
|
|
14
|
+
<script type="module" src="../editor-shell/editor-shell.js"></script>
|
|
15
|
+
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
16
|
+
<script type="module" src="../../../web-components/components/tag/tag.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('./editor-statusbar.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 editor-statusbar.examples.html — ${err.message}</p>`;
|
|
37
|
+
console.error('[editor-statusbar.html]', err);
|
|
38
|
+
}
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
</body>
|
|
42
|
+
</html>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<header>
|
|
2
|
+
<div>
|
|
3
|
+
<h1>Editor Toolbar</h1>
|
|
4
|
+
<div data-actions>
|
|
5
|
+
<tag-ui size="sm">editor-toolbar</tag-ui>
|
|
6
|
+
<tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<p>Module-tier editor toolbar — replaces legacy <header> chrome bar. Click-bubble for [data-toolbar-action] buttons + [full-screen] reflected attribute.</p>
|
|
10
|
+
</header>
|
|
11
|
+
|
|
12
|
+
<section data-section>
|
|
13
|
+
<h2 variant="section">Role</h2>
|
|
14
|
+
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the editor cluster's bespoke family — <code><editor-shell></code> (host), <code><editor-toolbar></code>, <code><editor-canvas></code>, <code><editor-sidebar></code> (JS-bearing) + <code><editor-statusbar></code>, <code><editor-canvas-empty></code> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).</p>
|
|
15
|
+
</section>
|
|
16
|
+
|
|
17
|
+
<section data-section>
|
|
18
|
+
<h2 variant="section">Composition</h2>
|
|
19
|
+
<p>Typical placement inside <code><editor-shell></code>:</p>
|
|
20
|
+
<code-ui language="html"><editor-shell>
|
|
21
|
+
<editor-toolbar>
|
|
22
|
+
<span slot="title">Untitled.fig</span>
|
|
23
|
+
<button-ui slot="action" icon="gear"></button-ui>
|
|
24
|
+
</editor-toolbar>
|
|
25
|
+
|
|
26
|
+
<editor-sidebar slot="leading" collapsible>
|
|
27
|
+
<pane-ui resizable>
|
|
28
|
+
<header>Navigator</header>
|
|
29
|
+
<section>…layers…</section>
|
|
30
|
+
</pane-ui>
|
|
31
|
+
</editor-sidebar>
|
|
32
|
+
|
|
33
|
+
<editor-canvas>
|
|
34
|
+
<editor-canvas-empty>
|
|
35
|
+
<empty-state-ui icon="square" heading="New document" description="Drop content to begin."></empty-state-ui>
|
|
36
|
+
</editor-canvas-empty>
|
|
37
|
+
</editor-canvas>
|
|
38
|
+
|
|
39
|
+
<editor-sidebar slot="trailing" collapsible>
|
|
40
|
+
<pane-ui resizable>
|
|
41
|
+
<header>Inspector</header>
|
|
42
|
+
<section>…properties…</section>
|
|
43
|
+
</pane-ui>
|
|
44
|
+
</editor-sidebar>
|
|
45
|
+
|
|
46
|
+
<editor-statusbar>
|
|
47
|
+
<span slot="status">Saved</span>
|
|
48
|
+
<span slot="zoom">100%</span>
|
|
49
|
+
</editor-statusbar>
|
|
50
|
+
</editor-shell></code-ui>
|
|
51
|
+
</section>
|
|
52
|
+
|
|
53
|
+
<section data-section>
|
|
54
|
+
<h2 variant="section">State as attribute</h2>
|
|
55
|
+
<code-ui language="css">/* Hide all chrome in focus mode */
|
|
56
|
+
editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
|
|
57
|
+
display: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Visual treatment for empty canvas */
|
|
61
|
+
editor-canvas[empty] { /* placeholder UI */ }
|
|
62
|
+
|
|
63
|
+
/* Highlight focused canvas */
|
|
64
|
+
editor-canvas[focused] { outline: 2px solid var(--a-accent); }</code-ui>
|
|
65
|
+
</section>
|
|
@@ -0,0 +1,43 @@
|
|
|
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>Editor Toolbar — 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="../editor-shell/editor-shell.css">
|
|
11
|
+
<link rel="stylesheet" href="../../../web-components/components/code/code.css">
|
|
12
|
+
<link rel="stylesheet" href="../../../web-components/components/tag/tag.css">
|
|
13
|
+
|
|
14
|
+
<script type="module" src="../editor-shell/editor-shell.js"></script>
|
|
15
|
+
<script type="module" src="./editor-toolbar.js"></script>
|
|
16
|
+
<script type="module" src="../../../web-components/components/code/code.js"></script>
|
|
17
|
+
<script type="module" src="../../../web-components/components/tag/tag.js"></script>
|
|
18
|
+
|
|
19
|
+
<style>
|
|
20
|
+
:where(html, body) { margin: 0; min-height: 100vh; background: var(--a-bg); color: var(--a-fg); font-family: var(--a-font); }
|
|
21
|
+
main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
|
|
22
|
+
</style>
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
|
|
26
|
+
<main id="demo-root">
|
|
27
|
+
<p>Loading examples…</p>
|
|
28
|
+
</main>
|
|
29
|
+
|
|
30
|
+
<script type="module">
|
|
31
|
+
const root = document.getElementById('demo-root');
|
|
32
|
+
try {
|
|
33
|
+
const res = await fetch('./editor-toolbar.examples.html');
|
|
34
|
+
if (!res.ok) throw new Error(`fetch failed (${res.status})`);
|
|
35
|
+
root.innerHTML = await res.text();
|
|
36
|
+
} catch (err) {
|
|
37
|
+
root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load editor-toolbar.examples.html — ${err.message}</p>`;
|
|
38
|
+
console.error('[editor-toolbar.html]', err);
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adia-ai/web-modules",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "AdiaUI composite custom elements
|
|
3
|
+
"version": "0.4.1",
|
|
4
|
+
"description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": "./index.js",
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
"./chat/*": "./chat/*/*.js",
|
|
12
12
|
"./editor": "./editor/index.js",
|
|
13
13
|
"./editor/*": "./editor/*/*.js",
|
|
14
|
+
"./simple": "./simple/index.js",
|
|
15
|
+
"./simple/*": "./simple/*/*.js",
|
|
14
16
|
"./runtime": "./runtime/index.js",
|
|
15
17
|
"./runtime/*": "./runtime/*/*.js",
|
|
16
18
|
"./package.json": "./package.json"
|
|
@@ -19,6 +21,7 @@
|
|
|
19
21
|
"shell/",
|
|
20
22
|
"chat/",
|
|
21
23
|
"editor/",
|
|
24
|
+
"simple/",
|
|
22
25
|
"runtime/",
|
|
23
26
|
"index.js",
|
|
24
27
|
"README.md",
|
|
@@ -33,9 +36,9 @@
|
|
|
33
36
|
"./runtime/**/*.js"
|
|
34
37
|
],
|
|
35
38
|
"peerDependencies": {
|
|
36
|
-
"@adia-ai/web-components": "^0.
|
|
37
|
-
"@adia-ai/a2ui-runtime": "^0.
|
|
38
|
-
"@adia-ai/llm": "^0.
|
|
39
|
+
"@adia-ai/web-components": "^0.4.0",
|
|
40
|
+
"@adia-ai/a2ui-runtime": "^0.4.0",
|
|
41
|
+
"@adia-ai/llm": "^0.4.0"
|
|
39
42
|
},
|
|
40
43
|
"publishConfig": {
|
|
41
44
|
"access": "public",
|