@adia-ai/web-components 0.0.2 → 0.0.4

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 (127) hide show
  1. package/README.md +29 -22
  2. package/a2ui/index.js +23 -17
  3. package/components/accordion/accordion.js +1 -1
  4. package/components/action-list/action-list.js +1 -1
  5. package/components/agent-artifact/agent-artifact.js +1 -1
  6. package/components/agent-feedback-bar/agent-feedback-bar.js +1 -1
  7. package/components/agent-questions/agent-questions.js +1 -1
  8. package/components/agent-reasoning/agent-reasoning.js +1 -1
  9. package/components/agent-suggestions/agent-suggestions.js +1 -1
  10. package/components/agent-trace/agent-trace.js +1 -1
  11. package/components/alert/alert.js +1 -1
  12. package/components/avatar/avatar.js +1 -1
  13. package/components/badge/badge.js +1 -1
  14. package/components/block/block.js +1 -1
  15. package/components/breadcrumb/breadcrumb.js +1 -1
  16. package/components/button/button.js +2 -2
  17. package/components/calendar-picker/calendar-picker.js +2 -2
  18. package/components/canvas/canvas.js +2 -2
  19. package/components/card/card.js +2 -2
  20. package/components/chart/chart.js +1 -1
  21. package/components/chat/chat-input.js +1 -1
  22. package/components/chat/chat.css +1 -2
  23. package/components/chat/chat.js +2 -2
  24. package/components/check/check.js +2 -2
  25. package/components/code/code.css +2 -0
  26. package/components/code/code.js +1 -1
  27. package/components/col/col.js +1 -1
  28. package/components/color-picker/color-picker.js +1 -1
  29. package/components/command/command.js +1 -1
  30. package/components/description-list/description-list.js +1 -1
  31. package/components/divider/divider.js +1 -1
  32. package/components/drawer/drawer.js +1 -1
  33. package/components/embed/embed.js +1 -1
  34. package/components/empty-state/empty-state.js +1 -1
  35. package/components/grid/grid.js +1 -1
  36. package/components/heatmap/heatmap.js +1 -1
  37. package/components/icon/icon.js +2 -2
  38. package/components/image/image.js +1 -1
  39. package/components/input/input.js +2 -2
  40. package/components/inspector/inspector.js +2 -2
  41. package/components/kbd/kbd.js +1 -1
  42. package/components/list/list.js +1 -1
  43. package/components/menu/menu.js +2 -2
  44. package/components/modal/modal.js +1 -1
  45. package/components/noodles/noodles.js +1 -1
  46. package/components/otp-input/otp-input.js +1 -1
  47. package/components/pagination/pagination.js +1 -1
  48. package/components/pane/pane.css +2 -2
  49. package/components/pane/pane.js +1 -1
  50. package/components/pipeline-status/pipeline-status.js +1 -1
  51. package/components/popover/popover.js +2 -2
  52. package/components/progress/progress.js +1 -1
  53. package/components/progress-row/progress-row.js +1 -1
  54. package/components/radio/radio.js +2 -2
  55. package/components/range/range.js +1 -1
  56. package/components/rating/rating.js +1 -1
  57. package/components/richtext/richtext.js +2 -2
  58. package/components/row/row.js +2 -2
  59. package/components/search/search.js +1 -1
  60. package/components/segment/segment.js +1 -1
  61. package/components/segmented/segmented.js +1 -1
  62. package/components/select/select.js +2 -2
  63. package/components/skeleton/skeleton.js +1 -1
  64. package/components/slider/slider.js +1 -1
  65. package/components/stack/stack.js +1 -1
  66. package/components/stat/stat.js +1 -1
  67. package/components/stepper/stepper.js +1 -1
  68. package/components/stream/stream.js +1 -1
  69. package/components/swiper/swiper.js +1 -1
  70. package/components/switch/switch.js +2 -2
  71. package/components/table/table.js +1 -1
  72. package/components/tabs/tab.js +1 -1
  73. package/components/tabs/tabs.js +1 -1
  74. package/components/tag/tag.js +1 -1
  75. package/components/text/text.js +1 -1
  76. package/components/textarea/textarea.js +1 -1
  77. package/components/timeline/timeline.js +1 -1
  78. package/components/toast/toast.js +1 -1
  79. package/components/toggle-group/toggle-group.js +1 -1
  80. package/components/toolbar/toolbar.js +2 -2
  81. package/components/tooltip/tooltip.js +2 -2
  82. package/components/tree/tree.js +1 -1
  83. package/components/upload/upload.js +1 -1
  84. package/core/markdown.js +1 -1
  85. package/core/provider.js +2 -2
  86. package/package.json +7 -3
  87. package/patterns/a2ui-root/a2ui-root.a2ui.json +118 -0
  88. package/{a2ui/root.js → patterns/a2ui-root/a2ui-root.js} +9 -4
  89. package/patterns/a2ui-root/a2ui-root.yaml +76 -0
  90. package/patterns/adia-chat/adia-chat.js +3 -3
  91. package/patterns/adia-chat/css/adia-chat.tokens.css +1 -1
  92. package/patterns/adia-editor/adia-editor.a2ui.json +12 -0
  93. package/patterns/adia-editor/adia-editor.js +1 -1
  94. package/patterns/adia-editor/adia-editor.yaml +17 -0
  95. package/patterns/adia-editor/css/adia-editor.layout.css +70 -3
  96. package/patterns/adia-editor/css/adia-editor.tokens.css +1 -1
  97. package/patterns/app-nav/app-nav.js +1 -1
  98. package/patterns/app-nav-group/app-nav-group.js +2 -2
  99. package/patterns/app-nav-item/app-nav-item.js +1 -1
  100. package/patterns/app-shell/app-shell.js +1 -1
  101. package/patterns/app-shell/css/app-shell.tokens.css +1 -1
  102. package/patterns/gen-ui/gen-ui.js +1 -1
  103. package/patterns/index.js +1 -0
  104. package/patterns/section-nav/section-nav.js +1 -1
  105. package/patterns/section-nav-group/section-nav-group.js +1 -1
  106. package/patterns/section-nav-item/section-nav-item.js +1 -1
  107. package/styles/tokens.css +12 -0
  108. package/traits/define.js +1 -1
  109. package/a2ui/dockables/action.js +0 -152
  110. package/a2ui/dockables/base.js +0 -30
  111. package/a2ui/dockables/controller.js +0 -97
  112. package/a2ui/dockables/data-source.js +0 -103
  113. package/a2ui/dockables/index.js +0 -6
  114. package/a2ui/dockables/lifecycle.js +0 -84
  115. package/a2ui/dockables/provider.js +0 -59
  116. package/a2ui/manifest-runtime.js +0 -226
  117. package/a2ui/registry.js +0 -200
  118. package/a2ui/renderer.js +0 -361
  119. package/a2ui/stream.js +0 -243
  120. package/a2ui/surface-manifest.js +0 -294
  121. package/a2ui/surface.js +0 -222
  122. package/a2ui/wire-factory.js +0 -134
  123. package/a2ui/wiring-engine.js +0 -209
  124. package/a2ui/wiring-registry.js +0 -342
  125. package/patterns/adia-chat/index.html +0 -93
  126. package/patterns/adia-editor/index.html +0 -179
  127. package/patterns/app-shell/index.html +0 -112
package/patterns/adia-editor/index.html DELETED
@@ -1,179 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>AdiaUI — Editor</title>
7
- <link rel="stylesheet" href="../../styles/tokens.css" />
8
- <link rel="stylesheet" href="../../styles/styles.css" />
9
- <link rel="stylesheet" href="adia-editor.css" />
10
- <style>
11
- body {
12
- font-family: var(--a-font-family);
13
- margin: 0;
14
- height: 100dvh;
15
- display: flex;
16
- flex-direction: column;
17
- }
18
- </style>
19
- </head>
20
- <body>
21
-
22
- <adia-editor-ui style="flex:1;">
23
- <header>
24
- <span data-title>AdiaUI</span>
25
- <span data-spacer></span>
26
- <button-ui icon="moon" variant="ghost" size="sm"></button-ui>
27
- <button-ui icon="gear" variant="ghost" size="sm"></button-ui>
28
- </header>
29
-
30
- <div data-editor-body>
31
-
32
- <!-- ═══ LEFT PANE — Navigator ═══ -->
33
- <pane-ui data-left resizable>
34
- <header>Navigator</header>
35
- <section>
36
- <header>Layers</header>
37
- <tree-ui>
38
- <tree-item-ui text="Page" icon="folder">
39
- <tree-item-ui text="Header" icon="folder">
40
- <tree-item-ui text="Logo" icon="folder"></tree-item-ui>
41
- <tree-item-ui text="Nav" icon="folder">
42
- <tree-item-ui text="Home" icon="folder"></tree-item-ui>
43
- <tree-item-ui text="About" icon="folder"></tree-item-ui>
44
- <tree-item-ui text="Contact" icon="folder"></tree-item-ui>
45
- </tree-item-ui>
46
- </tree-item-ui>
47
- <tree-item-ui text="Hero" icon="folder">
48
- <tree-item-ui text="Heading" icon="folder"></tree-item-ui>
49
- <tree-item-ui text="Subheading" icon="folder"></tree-item-ui>
50
- <tree-item-ui text="CTA Button" icon="folder"></tree-item-ui>
51
- </tree-item-ui>
52
- <tree-item-ui text="Card Grid" icon="folder">
53
- <tree-item-ui text="Card 1" icon="folder"></tree-item-ui>
54
- <tree-item-ui text="Card 2" icon="folder"></tree-item-ui>
55
- <tree-item-ui text="Card 3" icon="folder"></tree-item-ui>
56
- </tree-item-ui>
57
- <tree-item-ui text="Footer" icon="folder">
58
- <tree-item-ui text="Links" icon="folder"></tree-item-ui>
59
- <tree-item-ui text="Copyright" icon="folder"></tree-item-ui>
60
- </tree-item-ui>
61
- </tree-item-ui>
62
- </tree-ui>
63
- </section>
64
- </pane-ui>
65
-
66
- <!-- ═══ CANVAS ═══ -->
67
- <div data-canvas>Canvas</div>
68
-
69
- <!-- ═══ RIGHT PANE — Inspector ═══ -->
70
- <pane-ui data-right resizable>
71
- <header>Inspector</header>
72
-
73
- <section>
74
- <header>Layout</header>
75
- <div data-col style="padding:var(--a-space-2);">
76
- <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--a-space-2);">
77
- <input-ui prefix="X" placeholder="0" suffix="px"></input-ui>
78
- <input-ui prefix="Y" placeholder="0" suffix="px"></input-ui>
79
- <input-ui prefix="W" placeholder="auto" suffix="px"></input-ui>
80
- <input-ui prefix="H" placeholder="auto" suffix="px"></input-ui>
81
- </div>
82
- <select-ui id="display-select" label="Display" placeholder="block"></select-ui>
83
- <select-ui id="position-select" label="Position" placeholder="relative"></select-ui>
84
- </div>
85
- </section>
86
-
87
- <section>
88
- <header>Spacing</header>
89
- <div data-col style="padding:var(--a-space-2);">
90
- <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--a-space-2);">
91
- <range-ui label="Padding" value="16" min="0" max="64" step="1" suffix="px"></range-ui>
92
- <range-ui label="Margin" value="0" min="0" max="64" step="1" suffix="px"></range-ui>
93
- <range-ui label="Gap" value="8" min="0" max="48" step="1" suffix="px"></range-ui>
94
- <range-ui label="Radius" value="6" min="0" max="32" step="1" suffix="px"></range-ui>
95
- </div>
96
- </div>
97
- </section>
98
-
99
- <section>
100
- <header>Typography</header>
101
- <div data-col style="padding:var(--a-space-2);">
102
- <select-ui id="font-select" label="Family" placeholder="GT Standard"></select-ui>
103
- <div style="display:grid; grid-template-columns:1fr 1fr; gap:var(--a-space-2);">
104
- <range-ui label="Size" value="14" min="8" max="72" step="1" suffix="px"></range-ui>
105
- <range-ui label="Weight" value="400" min="100" max="900" step="100"></range-ui>
106
- <range-ui label="Leading" value="1.5" min="0.8" max="2.5" step="0.05"></range-ui>
107
- <range-ui label="Tracking" value="0" min="-0.05" max="0.1" step="0.005" suffix="em"></range-ui>
108
- </div>
109
- <segmented-ui value="left">
110
- <segment-ui value="left" text="Left"></segment-ui>
111
- <segment-ui value="center" text="Center"></segment-ui>
112
- <segment-ui value="right" text="Right"></segment-ui>
113
- </segmented-ui>
114
- </div>
115
- </section>
116
-
117
- <section>
118
- <header>Appearance</header>
119
- <div data-col style="padding:var(--a-space-2);">
120
- <input-ui label="Background" placeholder="#000000" prefix="#"></input-ui>
121
- <input-ui label="Border" placeholder="none"></input-ui>
122
- <range-ui label="Opacity" value="1" min="0" max="1" step="0.01"></range-ui>
123
- <select-ui id="overflow-select" label="Overflow" placeholder="visible"></select-ui>
124
- </div>
125
- </section>
126
-
127
- <footer>
128
- <button-ui text="Apply" variant="primary" stretch></button-ui>
129
- </footer>
130
- </pane-ui>
131
-
132
- </div>
133
-
134
- <footer>
135
- <span>Ready</span>
136
- <span data-spacer></span>
137
- <span>1280 × 800</span>
138
- <span>100%</span>
139
- </footer>
140
- </adia-editor-ui>
141
-
142
- <script type="module">
143
- import '../../components/index.js';
144
- import '../../patterns/index.js';
145
-
146
- customElements.whenDefined('select-ui').then(() => {
147
- document.getElementById('display-select').options = [
148
- { value: 'block', label: 'Block' },
149
- { value: 'flex', label: 'Flex' },
150
- { value: 'grid', label: 'Grid' },
151
- { value: 'inline', label: 'Inline' },
152
- { value: 'none', label: 'None' },
153
- ];
154
- document.getElementById('position-select').options = [
155
- { value: 'relative', label: 'Relative' },
156
- { value: 'absolute', label: 'Absolute' },
157
- { value: 'fixed', label: 'Fixed' },
158
- { value: 'sticky', label: 'Sticky' },
159
- ];
160
- document.getElementById('font-select').options = [
161
- { label: 'Sans', options: [
162
- { value: 'gt-standard', label: 'GT Standard' },
163
- { value: 'supply-sans', label: 'Supply Sans' },
164
- ]},
165
- { label: 'Mono', options: [
166
- { value: 'gt-standard-mono', label: 'GT Standard Mono' },
167
- { value: 'supply-mono', label: 'Supply Mono' },
168
- ]},
169
- ];
170
- document.getElementById('overflow-select').options = [
171
- { value: 'visible', label: 'Visible' },
172
- { value: 'hidden', label: 'Hidden' },
173
- { value: 'auto', label: 'Auto' },
174
- { value: 'scroll', label: 'Scroll' },
175
- ];
176
- });
177
- </script>
178
- </body>
179
- </html>
package/patterns/app-shell/index.html DELETED
@@ -1,112 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>AdiaUI — App Shell</title>
7
- <link rel="stylesheet" href="../../styles/tokens.css" />
8
- <link rel="stylesheet" href="../../styles/styles.css" />
9
- <link rel="stylesheet" href="app-shell.css" />
10
- <link rel="stylesheet" href="app-nav.css" />
11
- </head>
12
- <body>
13
- <app-shell-ui mode="rounded borderless">
14
-
15
- <!-- ═══════════════ LEFT SIDEBAR ═══════════════ -->
16
- <aside data-sidebar="leading">
17
- <header>
18
- <select-ui id="workspace-select" avatar="" value="adia-ui" variant="ghost" style="flex:1"></select-ui>
19
- </header>
20
-
21
- <section>
22
- <app-nav-ui id="nav">
23
- <app-nav-item-ui icon="magnifying-glass" text="Search" value="search">
24
- <span slot="icon"><icon-ui name="magnifying-glass"></icon-ui></span>
25
- <span slot="text">Search</span>
26
- </app-nav-item-ui>
27
- <hr data-nav-divider />
28
- <app-nav-group-ui icon="house" text="Home">
29
- <app-nav-item-ui text="Dashboard" value="dashboard" selected></app-nav-item-ui>
30
- <app-nav-item-ui text="Analytics" value="analytics"></app-nav-item-ui>
31
- <app-nav-item-ui text="Reports" value="reports"></app-nav-item-ui>
32
- </app-nav-group-ui>
33
- <app-nav-group-ui icon="gear" text="Settings">
34
- <app-nav-item-ui text="General" value="general"></app-nav-item-ui>
35
- <app-nav-item-ui text="Team" value="team"></app-nav-item-ui>
36
- <app-nav-item-ui text="Billing" value="billing"></app-nav-item-ui>
37
- </app-nav-group-ui>
38
- </app-nav-ui>
39
- </section>
40
-
41
- <footer>
42
- <select-ui id="user-select" avatar="https://i.pravatar.cc/32?u=demo" value="demo" variant="ghost" style="flex:1"></select-ui>
43
- </footer>
44
- <div data-resize></div>
45
- </aside>
46
-
47
- <!-- ═══════════════ MAIN ═══════════════ -->
48
- <main>
49
- <header>
50
- <button-ui data-sidebar-toggle="leading" icon="sidebar" variant="ghost" size="sm"></button-ui>
51
- <breadcrumb-ui>
52
- <a href="#">Home</a>
53
- <span>Dashboard</span>
54
- </breadcrumb-ui>
55
- <span data-spacer></span>
56
- <div data-actions>
57
- <button-ui icon="moon" variant="ghost" size="sm"></button-ui>
58
- </div>
59
- </header>
60
-
61
- <section>
62
- <article data-content-root>
63
- <div data-content-header>
64
- <header>
65
- <div>
66
- <h1>Dashboard</h1>
67
- <div data-actions>
68
- <button-ui text="Export" variant="outline" size="sm"></button-ui>
69
- </div>
70
- </div>
71
- <p>Welcome back. Here's what's happening.</p>
72
- </header>
73
- </div>
74
- <div data-content-body>
75
- <section data-tab-content>
76
- <p style="color:var(--a-fg-muted); text-align:center;">
77
- App Shell pattern demo. Resize the sidebar, toggle collapse, and explore the navigation.
78
- </p>
79
- </section>
80
- </div>
81
- </article>
82
- </section>
83
-
84
- <footer>
85
- <span>AdiaUI App Shell</span>
86
- <span data-spacer></span>
87
- <span>v0.1.0</span>
88
- </footer>
89
- </main>
90
-
91
- </app-shell-ui>
92
-
93
- <script type="module">
94
- import '../../components/index.js';
95
- import '../../patterns/index.js';
96
-
97
- customElements.whenDefined('select-ui').then(() => {
98
- document.getElementById('workspace-select').options = [
99
- { label: 'Workspaces', options: [
100
- { value: 'adia-ui', icon: 'stack', label: 'AdiaUI' },
101
- { value: 'acme', icon: 'chart-bar', label: 'Acme App' },
102
- ]},
103
- ];
104
- document.getElementById('user-select').options = [
105
- { header: true, avatar: 'https://i.pravatar.cc/32?u=demo', label: 'Demo User', description: 'demo@example.com' },
106
- { separator: true },
107
- { action: 'logout', icon: 'sign-out', label: 'Log out' },
108
- ];
109
- });
110
- </script>
111
- </body>
112
- </html>