@adia-ai/web-modules 0.6.4 → 0.6.7
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 +22 -0
- package/generative/index.d.ts +11 -0
- package/generative/index.js +45 -0
- package/package.json +28 -1
- package/chat/chat-composer/chat-composer.examples.html +0 -28
- package/chat/chat-composer/chat-composer.html +0 -43
- package/chat/chat-empty/chat-empty.examples.html +0 -34
- package/chat/chat-empty/chat-empty.html +0 -42
- package/chat/chat-header/chat-header.examples.html +0 -30
- package/chat/chat-header/chat-header.html +0 -42
- package/chat/chat-shell/chat-shell.examples.html +0 -126
- package/chat/chat-shell/chat-shell.html +0 -42
- package/chat/chat-sidebar/chat-sidebar.examples.html +0 -36
- package/chat/chat-sidebar/chat-sidebar.html +0 -43
- package/chat/chat-status/chat-status.examples.html +0 -29
- package/chat/chat-status/chat-status.html +0 -42
- package/chat/chat-thread/chat-thread.examples.html +0 -36
- package/chat/chat-thread/chat-thread.html +0 -43
- package/editor/editor-canvas/editor-canvas.examples.html +0 -65
- package/editor/editor-canvas/editor-canvas.html +0 -43
- package/editor/editor-canvas-empty/editor-canvas-empty.examples.html +0 -65
- package/editor/editor-canvas-empty/editor-canvas-empty.html +0 -42
- package/editor/editor-canvas-toolbar/editor-canvas-toolbar.examples.html +0 -56
- package/editor/editor-canvas-toolbar/editor-canvas-toolbar.html +0 -42
- package/editor/editor-shell/editor-shell.examples.html +0 -71
- package/editor/editor-shell/editor-shell.html +0 -42
- package/editor/editor-sidebar/editor-sidebar.examples.html +0 -65
- package/editor/editor-sidebar/editor-sidebar.html +0 -43
- package/editor/editor-statusbar/editor-statusbar.examples.html +0 -65
- package/editor/editor-statusbar/editor-statusbar.html +0 -42
- package/editor/editor-toolbar/editor-toolbar.examples.html +0 -65
- package/editor/editor-toolbar/editor-toolbar.html +0 -43
- package/shell/admin-command/admin-command.examples.html +0 -83
- package/shell/admin-command/admin-command.html +0 -42
- package/shell/admin-content/admin-content.examples.html +0 -33
- package/shell/admin-content/admin-content.html +0 -42
- package/shell/admin-page/admin-page.examples.html +0 -37
- package/shell/admin-page/admin-page.html +0 -42
- package/shell/admin-page-body/admin-page-body.examples.html +0 -34
- package/shell/admin-page-body/admin-page-body.html +0 -42
- package/shell/admin-page-header/admin-page-header.examples.html +0 -34
- package/shell/admin-page-header/admin-page-header.html +0 -42
- package/shell/admin-scroll/admin-scroll.examples.html +0 -31
- package/shell/admin-scroll/admin-scroll.html +0 -42
- package/shell/admin-shell/admin-shell.examples.html +0 -181
- package/shell/admin-shell/admin-shell.html +0 -46
- package/shell/admin-sidebar/admin-sidebar.examples.html +0 -76
- package/shell/admin-sidebar/admin-sidebar.html +0 -47
- package/shell/admin-statusbar/admin-statusbar.examples.html +0 -29
- package/shell/admin-statusbar/admin-statusbar.html +0 -42
- package/shell/admin-topbar/admin-topbar.examples.html +0 -31
- package/shell/admin-topbar/admin-topbar.html +0 -42
- package/simple/simple-content/simple-content.examples.html +0 -13
- package/simple/simple-content/simple-content.html +0 -42
- package/simple/simple-hero/simple-hero.examples.html +0 -33
- package/simple/simple-hero/simple-hero.html +0 -42
- package/simple/simple-shell/simple-shell.examples.html +0 -42
- package/simple/simple-shell/simple-shell.html +0 -42
- package/theme/theme-panel/theme-panel.examples.html +0 -112
- package/theme/theme-panel/theme-panel.html +0 -75
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Chat Status</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">chat-status</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier chat status indicator. CSS-only. Inline content for connection/streaming state.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>Inline status indicator. Pure CSS-only stub. Authors set content directly; the host's streaming pipeline updates innerText.</p>
|
|
15
|
-
</section>
|
|
16
|
-
|
|
17
|
-
<section data-section>
|
|
18
|
-
<h2 variant="section">Composition</h2>
|
|
19
|
-
<p>Typical placement inside <code><chat-shell></code>:</p>
|
|
20
|
-
<code-ui language="html"><chat-status>
|
|
21
|
-
<icon-ui name="circle-fill" style="color: var(--a-success)"></icon-ui>
|
|
22
|
-
<span>Connected</span>
|
|
23
|
-
</chat-status></code-ui>
|
|
24
|
-
</section>
|
|
25
|
-
|
|
26
|
-
<section data-section>
|
|
27
|
-
<h2 variant="section">Family</h2>
|
|
28
|
-
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the chat cluster's bespoke family — <code><chat-shell></code> (host), <code><chat-thread></code>, <code><chat-composer></code>, <code><chat-sidebar></code> (JS-bearing) + <code><chat-header></code>, <code><chat-status></code>, <code><chat-empty></code> (CSS-only). Mirrors the admin cluster's pattern.</p>
|
|
29
|
-
</section>
|
|
@@ -1,42 +0,0 @@
|
|
|
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>Chat Status — 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="../chat-shell/chat-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="../chat-shell/chat-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('./chat-status.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 chat-status.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[chat-status.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Chat Thread</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">chat-thread</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier chat message thread container — owns scroll-to-bottom, [streaming] and [empty] reflected attributes.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>Owns scroll-to-bottom on new message (with user-scroll-up suspension), [streaming] and [empty] reflected attributes, and a stable target for the host's message rendering pipeline. JS-bearing.</p>
|
|
15
|
-
</section>
|
|
16
|
-
|
|
17
|
-
<section data-section>
|
|
18
|
-
<h2 variant="section">Composition</h2>
|
|
19
|
-
<p>Typical placement inside <code><chat-shell></code>:</p>
|
|
20
|
-
<code-ui language="html"><chat-shell>
|
|
21
|
-
<chat-header>…</chat-header>
|
|
22
|
-
<chat-thread>
|
|
23
|
-
<chat-empty>
|
|
24
|
-
<empty-state-ui icon="chat-circle" heading="Hello!" description="Ask me anything."></empty-state-ui>
|
|
25
|
-
</chat-empty>
|
|
26
|
-
</chat-thread>
|
|
27
|
-
<chat-composer>
|
|
28
|
-
<chat-input-ui placeholder="Message…"></chat-input-ui>
|
|
29
|
-
</chat-composer>
|
|
30
|
-
</chat-shell></code-ui>
|
|
31
|
-
</section>
|
|
32
|
-
|
|
33
|
-
<section data-section>
|
|
34
|
-
<h2 variant="section">Family</h2>
|
|
35
|
-
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, the chat cluster's bespoke family — <code><chat-shell></code> (host), <code><chat-thread></code>, <code><chat-composer></code>, <code><chat-sidebar></code> (JS-bearing) + <code><chat-header></code>, <code><chat-status></code>, <code><chat-empty></code> (CSS-only). Mirrors the admin cluster's pattern.</p>
|
|
36
|
-
</section>
|
|
@@ -1,43 +0,0 @@
|
|
|
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>Chat Thread — 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="../chat-shell/chat-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="../chat-shell/chat-shell.js"></script>
|
|
15
|
-
<script type="module" src="./chat-thread.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('./chat-thread.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 chat-thread.examples.html — ${err.message}</p>`;
|
|
38
|
-
console.error('[chat-thread.html]', err);
|
|
39
|
-
}
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Editor Canvas</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">editor-canvas</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">JS-bearing</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier editor canvas surface — replaces legacy <div data-canvas>. Owns scroll/zoom container, [empty] + [focused] reflected.</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>
|
|
@@ -1,43 +0,0 @@
|
|
|
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 Canvas — 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-canvas.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-canvas.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-canvas.examples.html — ${err.message}</p>`;
|
|
38
|
-
console.error('[editor-canvas.html]', err);
|
|
39
|
-
}
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Editor Canvas Empty</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">editor-canvas-empty</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier editor canvas empty state. CSS-only. Visibility driven by parent <editor-canvas>[empty].</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>
|
|
@@ -1,42 +0,0 @@
|
|
|
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 Canvas Empty — 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-canvas-empty.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-canvas-empty.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[editor-canvas-empty.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Editor Canvas Toolbar</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">editor-canvas-toolbar</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">CSS-only</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Module-tier canvas toolbar — chrome bar inside <code><editor-canvas></code> that holds view-mode tabs, breadcrumbs, or canvas-scoped actions.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Role</h2>
|
|
14
|
-
<p>Replaces the ad-hoc <code><div data-view-strip></code> pattern. Sits as the first child of <code><editor-canvas></code>; the canvas's flex-column layout positions it above the content body automatically. Sticky to the canvas scroll surface so tabs stay visible during scroll.</p>
|
|
15
|
-
<p>Distinct from <code><editor-toolbar></code> — that one is app-scope (top of <code><editor-shell></code>, holds document-wide actions); this one is canvas-scope (top of <code><editor-canvas></code>, holds view-mode affordances).</p>
|
|
16
|
-
</section>
|
|
17
|
-
|
|
18
|
-
<section data-section>
|
|
19
|
-
<h2 variant="section">Composition</h2>
|
|
20
|
-
<p>Typical view-tabs usage inside <code><editor-canvas></code>:</p>
|
|
21
|
-
<code-ui language="html"><editor-canvas>
|
|
22
|
-
<editor-canvas-toolbar>
|
|
23
|
-
<tabs-ui value="preview" variant="underline">
|
|
24
|
-
<tab-ui value="preview" text="Preview" icon="eye"></tab-ui>
|
|
25
|
-
<tab-ui value="schema" text="Schema" icon="brackets-curly"></tab-ui>
|
|
26
|
-
<tab-ui value="dom" text="DOM" icon="code"></tab-ui>
|
|
27
|
-
</tabs-ui>
|
|
28
|
-
</editor-canvas-toolbar>
|
|
29
|
-
|
|
30
|
-
<div data-view-body>
|
|
31
|
-
<!-- one of [data-view] visible at a time -->
|
|
32
|
-
</div>
|
|
33
|
-
</editor-canvas></code-ui>
|
|
34
|
-
</section>
|
|
35
|
-
|
|
36
|
-
<section data-section>
|
|
37
|
-
<h2 variant="section">Slot vocabulary</h2>
|
|
38
|
-
<p>Mirrors the <code><editor-toolbar></code> / <code><editor-statusbar></code> slot conventions:</p>
|
|
39
|
-
<code-ui language="html"><editor-canvas-toolbar>
|
|
40
|
-
<span slot="action-leading">
|
|
41
|
-
<button-ui icon="arrow-left" variant="ghost" size="sm"></button-ui>
|
|
42
|
-
</span>
|
|
43
|
-
<span slot="title">Untitled.fig</span>
|
|
44
|
-
<span slot="action">
|
|
45
|
-
<button-ui icon="gear" variant="ghost" size="sm"></button-ui>
|
|
46
|
-
</span>
|
|
47
|
-
</editor-canvas-toolbar></code-ui>
|
|
48
|
-
</section>
|
|
49
|
-
|
|
50
|
-
<section data-section>
|
|
51
|
-
<h2 variant="section">Tokens</h2>
|
|
52
|
-
<code-ui language="css">/* Defaults — override on editor-shell or editor-canvas-toolbar */
|
|
53
|
-
--editor-canvas-toolbar-bg: var(--editor-panel-bg);
|
|
54
|
-
--editor-canvas-toolbar-px: var(--a-space-3);
|
|
55
|
-
--editor-canvas-toolbar-gap: var(--a-space-2);</code-ui>
|
|
56
|
-
</section>
|
|
@@ -1,42 +0,0 @@
|
|
|
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 Canvas 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="../../../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-canvas-toolbar.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-canvas-toolbar.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[editor-canvas-toolbar.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
<header>
|
|
2
|
-
<div>
|
|
3
|
-
<h1>Editor Shell</h1>
|
|
4
|
-
<div data-actions>
|
|
5
|
-
<tag-ui size="sm">editor-shell</tag-ui>
|
|
6
|
-
<tag-ui size="sm" variant="ghost">module-tier</tag-ui>
|
|
7
|
-
</div>
|
|
8
|
-
</div>
|
|
9
|
-
<p>Behavior-only editor shell module for design-tool layouts. Author provides the structural DOM — header (topbar), <code>[data-editor-body]</code> with pane-ui children (<code>[data-left]</code>, <code>[data-right]</code>), <code>[data-canvas]</code> for the central surface, and a footer (statusbar). editor-shell wires <code>select-ui[data-options]</code> for JSON-parsed option lists.</p>
|
|
10
|
-
</header>
|
|
11
|
-
|
|
12
|
-
<section data-section>
|
|
13
|
-
<h2 variant="section">Basic shape</h2>
|
|
14
|
-
<p data-note>Author supplies the structural DOM — header, body with pane-ui rails + canvas, footer. The shell binds toolbar select wiring + responsive pane collapse.</p>
|
|
15
|
-
<code-ui language="html"><editor-shell>
|
|
16
|
-
<header>
|
|
17
|
-
<icon-ui slot="icon" name="layers"></icon-ui>
|
|
18
|
-
<span slot="heading">Untitled.fig</span>
|
|
19
|
-
<span slot="description">1920 × 1080</span>
|
|
20
|
-
<button-ui slot="action" variant="ghost">Share</button-ui>
|
|
21
|
-
</header>
|
|
22
|
-
|
|
23
|
-
<div data-editor-body>
|
|
24
|
-
<pane-ui data-left>…tools panel…</pane-ui>
|
|
25
|
-
<div data-canvas>…central canvas…</div>
|
|
26
|
-
<pane-ui data-right>…inspector panel…</pane-ui>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<footer>
|
|
30
|
-
<icon-ui slot="icon" name="zoom-in"></icon-ui>
|
|
31
|
-
<span>100%</span>
|
|
32
|
-
</footer>
|
|
33
|
-
</editor-shell></code-ui>
|
|
34
|
-
</section>
|
|
35
|
-
|
|
36
|
-
<section data-section>
|
|
37
|
-
<h2 variant="section">Slots</h2>
|
|
38
|
-
<table>
|
|
39
|
-
<thead><tr><th>Slot</th><th>Purpose</th></tr></thead>
|
|
40
|
-
<tbody>
|
|
41
|
-
<tr><td><code>icon</code></td><td>Leading glyph in <code><header></code> or <code><footer></code> — status dot, app icon, zoom badge.</td></tr>
|
|
42
|
-
<tr><td><code>heading</code></td><td>Primary label inside chrome bars.</td></tr>
|
|
43
|
-
<tr><td><code>description</code></td><td>Secondary metadata (document name, artboard size, zoom level).</td></tr>
|
|
44
|
-
<tr><td><code>action</code></td><td>Trailing control cluster. First <code>[slot="action"]</code> child pushes itself + siblings to the end.</td></tr>
|
|
45
|
-
<tr><td><code>action-leading</code></td><td>Leading control cluster (back, undo). Pairs with <code>action</code> for dual-cluster bars.</td></tr>
|
|
46
|
-
</tbody>
|
|
47
|
-
</table>
|
|
48
|
-
</section>
|
|
49
|
-
|
|
50
|
-
<section data-section>
|
|
51
|
-
<h2 variant="section">Behavior wiring</h2>
|
|
52
|
-
<table>
|
|
53
|
-
<thead><tr><th>Affordance</th><th>Author markup</th><th>What the shell does</th></tr></thead>
|
|
54
|
-
<tbody>
|
|
55
|
-
<tr><td>Editor body</td><td><code>[data-editor-body]</code> wrapping <code>pane-ui[data-left]</code>, <code>[data-canvas]</code>, <code>pane-ui[data-right]</code></td><td>Lays out the canvas + flanking panes; handles responsive collapse.</td></tr>
|
|
56
|
-
<tr><td>Toolbar selects</td><td><code>select-ui[data-options]</code> with JSON in the attribute</td><td>Parses <code>data-options</code> JSON to populate option lists at connect.</td></tr>
|
|
57
|
-
</tbody>
|
|
58
|
-
</table>
|
|
59
|
-
</section>
|
|
60
|
-
|
|
61
|
-
<section data-section>
|
|
62
|
-
<h2 variant="section">Family pattern (forward-looking)</h2>
|
|
63
|
-
<p>Per <a href="../../../../.brain/adrs/0023-bespoke-shell-tier-children.md">ADR-0023</a>, future releases extend the bespoke-children family to the editor cluster. Planned children:</p>
|
|
64
|
-
<ul data-features>
|
|
65
|
-
<li><code><editor-canvas></code> — replaces <code>[data-canvas]</code>; owns zoom/pan, viewport state</li>
|
|
66
|
-
<li><code><editor-toolbar></code> — replaces toolbar headers; owns select-ui wiring</li>
|
|
67
|
-
<li><code><editor-inspector></code> + <code><editor-tools></code> — replace <code>pane-ui[data-left/right]</code>; owns pane state attributes</li>
|
|
68
|
-
<li><code><editor-statusbar></code> — zoom level, artboard info</li>
|
|
69
|
-
</ul>
|
|
70
|
-
<p data-note>Today's <code>data-*</code> shape is fully supported and will continue to work alongside the bespoke vocabulary when it lands.</p>
|
|
71
|
-
</section>
|
|
@@ -1,42 +0,0 @@
|
|
|
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 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="./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.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-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 editor-shell.examples.html — ${err.message}</p>`;
|
|
37
|
-
console.error('[editor-shell.html]', err);
|
|
38
|
-
}
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
</body>
|
|
42
|
-
</html>
|