microui-wc 0.1.1 → 0.1.2

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 (339) hide show
  1. package/AGENTS.md +71 -71
  2. package/CHANGELOG.md +1 -1
  3. package/README.md +14 -9
  4. package/dist/AGENTS.md +71 -71
  5. package/dist/README.md +14 -9
  6. package/dist/microui.css +1 -1
  7. package/dist/microui.esm.js.map +1 -1
  8. package/dist/microui.min.js.map +1 -1
  9. package/docs/getting-started.md +3 -3
  10. package/package.json +39 -11
  11. package/src/components/mu-schema-form.js +1 -1
  12. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -40
  13. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -33
  14. package/.github/PULL_REQUEST_TEMPLATE.md +0 -28
  15. package/.github/workflows/ci.yml +0 -42
  16. package/.github/workflows/deploy-pages.yml +0 -112
  17. package/CODE_OF_CONDUCT.md +0 -59
  18. package/CONTRIBUTING.md +0 -156
  19. package/SECURITY.md +0 -58
  20. package/app/.generated/routes/alerts.js +0 -8
  21. package/app/.generated/routes/avatars.js +0 -8
  22. package/app/.generated/routes/badges.js +0 -8
  23. package/app/.generated/routes/buttons.js +0 -10
  24. package/app/.generated/routes/cards.js +0 -10
  25. package/app/.generated/routes/checkboxes.js +0 -9
  26. package/app/.generated/routes/chips.js +0 -8
  27. package/app/.generated/routes/dropdowns.js +0 -9
  28. package/app/.generated/routes/home.js +0 -7
  29. package/app/.generated/routes/icons.js +0 -9
  30. package/app/.generated/routes/inputs.js +0 -10
  31. package/app/.generated/routes/installation.js +0 -7
  32. package/app/.generated/routes/layout.js +0 -9
  33. package/app/.generated/routes/modals.js +0 -9
  34. package/app/.generated/routes/navbar.js +0 -7
  35. package/app/.generated/routes/progress.js +0 -9
  36. package/app/.generated/routes/radios.js +0 -9
  37. package/app/.generated/routes/switches.js +0 -9
  38. package/app/.generated/routes/tabs.js +0 -8
  39. package/app/.generated/routes/toasts.js +0 -9
  40. package/app/index.html +0 -67
  41. package/app/pages/alerts.html +0 -23
  42. package/app/pages/avatars.html +0 -22
  43. package/app/pages/badges.html +0 -22
  44. package/app/pages/buttons.html +0 -71
  45. package/app/pages/cards.html +0 -54
  46. package/app/pages/checkboxes.html +0 -39
  47. package/app/pages/chips.html +0 -23
  48. package/app/pages/dropdowns.html +0 -41
  49. package/app/pages/home.html +0 -59
  50. package/app/pages/icons.html +0 -29
  51. package/app/pages/inputs.html +0 -66
  52. package/app/pages/installation.html +0 -34
  53. package/app/pages/layout.html +0 -30
  54. package/app/pages/modals.html +0 -21
  55. package/app/pages/navbar.html +0 -22
  56. package/app/pages/progress.html +0 -35
  57. package/app/pages/radios.html +0 -40
  58. package/app/pages/switches.html +0 -39
  59. package/app/pages/tabs.html +0 -30
  60. package/app/pages/toasts.html +0 -22
  61. package/app-dist/index.html +0 -67
  62. package/app-dist/pages/alerts.html +0 -23
  63. package/app-dist/pages/avatars.html +0 -22
  64. package/app-dist/pages/badges.html +0 -22
  65. package/app-dist/pages/buttons.html +0 -71
  66. package/app-dist/pages/cards.html +0 -54
  67. package/app-dist/pages/checkboxes.html +0 -39
  68. package/app-dist/pages/chips.html +0 -23
  69. package/app-dist/pages/dropdowns.html +0 -41
  70. package/app-dist/pages/home.html +0 -59
  71. package/app-dist/pages/icons.html +0 -29
  72. package/app-dist/pages/inputs.html +0 -66
  73. package/app-dist/pages/installation.html +0 -34
  74. package/app-dist/pages/layout.html +0 -30
  75. package/app-dist/pages/modals.html +0 -21
  76. package/app-dist/pages/navbar.html +0 -22
  77. package/app-dist/pages/progress.html +0 -35
  78. package/app-dist/pages/radios.html +0 -40
  79. package/app-dist/pages/switches.html +0 -39
  80. package/app-dist/pages/tabs.html +0 -30
  81. package/app-dist/pages/toasts.html +0 -22
  82. package/app-dist/pages.json +0 -217
  83. package/app-dist/routes/alerts.js +0 -5
  84. package/app-dist/routes/avatars.js +0 -1
  85. package/app-dist/routes/badges.js +0 -1
  86. package/app-dist/routes/buttons.js +0 -1
  87. package/app-dist/routes/cards.js +0 -1
  88. package/app-dist/routes/checkboxes.js +0 -9
  89. package/app-dist/routes/chips.js +0 -4
  90. package/app-dist/routes/chunk-019e5e2f.js +0 -5
  91. package/app-dist/routes/chunk-0m4j19yd.js +0 -2
  92. package/app-dist/routes/chunk-0tmmp5q0.js +0 -1
  93. package/app-dist/routes/chunk-10xn709r.js +0 -1
  94. package/app-dist/routes/chunk-15m2qcda.js +0 -2
  95. package/app-dist/routes/chunk-1bh8g23n.js +0 -1
  96. package/app-dist/routes/chunk-1vg0v937.js +0 -1
  97. package/app-dist/routes/chunk-1zvcgy3j.js +0 -1
  98. package/app-dist/routes/chunk-2afb0861.js +0 -1
  99. package/app-dist/routes/chunk-2c6ttpzt.js +0 -5
  100. package/app-dist/routes/chunk-3dy30fhs.js +0 -1
  101. package/app-dist/routes/chunk-426dnces.js +0 -13
  102. package/app-dist/routes/chunk-44kgxery.js +0 -1
  103. package/app-dist/routes/chunk-47fdnejd.js +0 -33
  104. package/app-dist/routes/chunk-49a6t2vq.js +0 -1
  105. package/app-dist/routes/chunk-4fe1rm5b.js +0 -1
  106. package/app-dist/routes/chunk-4ggmvkta.js +0 -33
  107. package/app-dist/routes/chunk-4vkz81q7.js +0 -33
  108. package/app-dist/routes/chunk-4w4tmj8f.js +0 -31
  109. package/app-dist/routes/chunk-532s62kr.js +0 -31
  110. package/app-dist/routes/chunk-5hm3bssy.js +0 -33
  111. package/app-dist/routes/chunk-5vrh24hc.js +0 -1
  112. package/app-dist/routes/chunk-61pcg25a.js +0 -1
  113. package/app-dist/routes/chunk-6nfhygvf.js +0 -1
  114. package/app-dist/routes/chunk-700e7je6.js +0 -33
  115. package/app-dist/routes/chunk-7fsn17kg.js +0 -1
  116. package/app-dist/routes/chunk-7k789b32.js +0 -1
  117. package/app-dist/routes/chunk-7r46q0ys.js +0 -36
  118. package/app-dist/routes/chunk-86fmc1fr.js +0 -5
  119. package/app-dist/routes/chunk-8qth37vw.js +0 -1
  120. package/app-dist/routes/chunk-924wv8n0.js +0 -1
  121. package/app-dist/routes/chunk-9mbhgxk9.js +0 -1
  122. package/app-dist/routes/chunk-a216hyd9.js +0 -1
  123. package/app-dist/routes/chunk-akzxykh9.js +0 -33
  124. package/app-dist/routes/chunk-b3dcvy8c.js +0 -1
  125. package/app-dist/routes/chunk-b74zahz5.js +0 -31
  126. package/app-dist/routes/chunk-bftj53p2.js +0 -5
  127. package/app-dist/routes/chunk-c01hnz3e.js +0 -1
  128. package/app-dist/routes/chunk-d8pvv5km.js +0 -1
  129. package/app-dist/routes/chunk-dev0aezr.js +0 -2
  130. package/app-dist/routes/chunk-dh6vnv0e.js +0 -1
  131. package/app-dist/routes/chunk-dn2cbpva.js +0 -36
  132. package/app-dist/routes/chunk-dvn0my90.js +0 -1
  133. package/app-dist/routes/chunk-dvq8mnve.js +0 -36
  134. package/app-dist/routes/chunk-e8c2gc4d.js +0 -5
  135. package/app-dist/routes/chunk-ejf9ak2x.js +0 -1
  136. package/app-dist/routes/chunk-f083m55s.js +0 -1
  137. package/app-dist/routes/chunk-fnrj28s1.js +0 -31
  138. package/app-dist/routes/chunk-fvg3yjdp.js +0 -31
  139. package/app-dist/routes/chunk-g7k381n1.js +0 -1
  140. package/app-dist/routes/chunk-h01kq2ae.js +0 -13
  141. package/app-dist/routes/chunk-h4dk761v.js +0 -5
  142. package/app-dist/routes/chunk-hmx91z2x.js +0 -5
  143. package/app-dist/routes/chunk-hxbg4m42.js +0 -36
  144. package/app-dist/routes/chunk-jbjnfp2b.js +0 -2
  145. package/app-dist/routes/chunk-jxtz5vv6.js +0 -36
  146. package/app-dist/routes/chunk-jxzcs0ey.js +0 -36
  147. package/app-dist/routes/chunk-kt7wwhcx.js +0 -1
  148. package/app-dist/routes/chunk-kzptszyc.js +0 -33
  149. package/app-dist/routes/chunk-mhgca4w4.js +0 -2
  150. package/app-dist/routes/chunk-mhswxa20.js +0 -1
  151. package/app-dist/routes/chunk-n8zfeex6.js +0 -1
  152. package/app-dist/routes/chunk-pee47b2r.js +0 -1
  153. package/app-dist/routes/chunk-pesmw829.js +0 -1
  154. package/app-dist/routes/chunk-pgc4c6f3.js +0 -36
  155. package/app-dist/routes/chunk-q8egegm1.js +0 -1
  156. package/app-dist/routes/chunk-q9mn2qyq.js +0 -36
  157. package/app-dist/routes/chunk-qh0rtaf3.js +0 -5
  158. package/app-dist/routes/chunk-qqhmk6ye.js +0 -2
  159. package/app-dist/routes/chunk-qrxygmf7.js +0 -33
  160. package/app-dist/routes/chunk-r46yzksx.js +0 -36
  161. package/app-dist/routes/chunk-rgpbw2w0.js +0 -5
  162. package/app-dist/routes/chunk-rnpzv3d8.js +0 -2
  163. package/app-dist/routes/chunk-s5v8cv05.js +0 -2
  164. package/app-dist/routes/chunk-sbwn5bpc.js +0 -1
  165. package/app-dist/routes/chunk-sqbg8jbt.js +0 -33
  166. package/app-dist/routes/chunk-sv8dqnf7.js +0 -1
  167. package/app-dist/routes/chunk-t67sw3za.js +0 -1
  168. package/app-dist/routes/chunk-tjdpqwdf.js +0 -31
  169. package/app-dist/routes/chunk-tq2mfghg.js +0 -1
  170. package/app-dist/routes/chunk-ttn10vt6.js +0 -1
  171. package/app-dist/routes/chunk-v2hzpjxr.js +0 -1
  172. package/app-dist/routes/chunk-wfjjkw9y.js +0 -1
  173. package/app-dist/routes/chunk-wt8cxzmf.js +0 -31
  174. package/app-dist/routes/chunk-x45d372k.js +0 -5
  175. package/app-dist/routes/chunk-y3wsazkt.js +0 -1
  176. package/app-dist/routes/chunk-y7pmgc7t.js +0 -33
  177. package/app-dist/routes/chunk-zefdt2q3.js +0 -31
  178. package/app-dist/routes/dropdowns.js +0 -6
  179. package/app-dist/routes/home.js +0 -1
  180. package/app-dist/routes/icons.js +0 -1
  181. package/app-dist/routes/inputs.js +0 -12
  182. package/app-dist/routes/installation.js +0 -1
  183. package/app-dist/routes/layout.js +0 -1
  184. package/app-dist/routes/modals.js +0 -7
  185. package/app-dist/routes/navbar.js +0 -1
  186. package/app-dist/routes/progress.js +0 -1
  187. package/app-dist/routes/radios.js +0 -6
  188. package/app-dist/routes/switches.js +0 -6
  189. package/app-dist/routes/tabs.js +0 -1
  190. package/app-dist/routes/toasts.js +0 -16
  191. package/assets/fonts/material-symbols-mini.woff2 +0 -0
  192. package/assets/fonts/material-symbols.woff2 +0 -0
  193. package/assets/fonts/roboto-400.woff2 +0 -0
  194. package/assets/fonts/roboto-500.woff2 +0 -0
  195. package/assets/fonts/roboto-700.woff2 +0 -0
  196. package/assets/logo-banner-400.jpg +0 -0
  197. package/assets/logo-banner-400.webp +0 -0
  198. package/assets/logo-banner-800.webp +0 -0
  199. package/assets/logo-banner.jpg +0 -0
  200. package/assets/logo-icon-64.jpg +0 -0
  201. package/assets/logo-icon-64.webp +0 -0
  202. package/assets/logo-icon.jpg +0 -0
  203. package/assets/logo-square.jpg +0 -0
  204. package/bun.lock +0 -312
  205. package/bunfig.toml +0 -4
  206. package/custom-elements.json +0 -1916
  207. package/demo/api/sample-data.json +0 -38
  208. package/demo/content/alerts.html +0 -115
  209. package/demo/content/avatars.html +0 -70
  210. package/demo/content/badges.html +0 -65
  211. package/demo/content/buttons.html +0 -188
  212. package/demo/content/callouts.html +0 -91
  213. package/demo/content/cards.html +0 -121
  214. package/demo/content/checkboxes.html +0 -178
  215. package/demo/content/chips.html +0 -67
  216. package/demo/content/codeblocks.html +0 -101
  217. package/demo/content/confirms.html +0 -115
  218. package/demo/content/datatables.html +0 -149
  219. package/demo/content/dividers.html +0 -119
  220. package/demo/content/dropdowns.html +0 -89
  221. package/demo/content/enterprise.html +0 -252
  222. package/demo/content/home.html +0 -149
  223. package/demo/content/icons.html +0 -89
  224. package/demo/content/inputs.html +0 -135
  225. package/demo/content/installation.html +0 -16
  226. package/demo/content/layout.html +0 -136
  227. package/demo/content/modals.html +0 -141
  228. package/demo/content/navbar.html +0 -70
  229. package/demo/content/progress.html +0 -119
  230. package/demo/content/radios.html +0 -88
  231. package/demo/content/skeletons.html +0 -109
  232. package/demo/content/spinners.html +0 -96
  233. package/demo/content/switches.html +0 -84
  234. package/demo/content/tables.html +0 -124
  235. package/demo/content/tabs.html +0 -85
  236. package/demo/content/toasts.html +0 -116
  237. package/demo/content/tooltips.html +0 -107
  238. package/demo/content/virtual-lists.html +0 -233
  239. package/demo/favicon.ico +0 -0
  240. package/demo/favicon.png +0 -0
  241. package/demo/full.html +0 -52
  242. package/demo/iife.html +0 -46
  243. package/demo/manifest.json +0 -34
  244. package/demo/pages/datatable-demo.html +0 -237
  245. package/demo/pages/prompt-ui-demo.html +0 -218
  246. package/demo/pages/responsive-demo.html +0 -122
  247. package/demo/pages/schema-form-demo.html +0 -270
  248. package/demo/robots.txt +0 -6
  249. package/demo/shell.html +0 -712
  250. package/demo/sw.js +0 -387
  251. package/lighthouse-audit.mjs +0 -113
  252. package/scripts/analyze-components.js +0 -105
  253. package/scripts/build-app.js +0 -193
  254. package/scripts/build-framework.js +0 -444
  255. package/scripts/build-utils.js +0 -101
  256. package/scripts/test-isolated.js +0 -151
  257. package/server.js +0 -256
  258. package/tests/agents/agent-integration.test.js +0 -76
  259. package/tests/benchmark.html +0 -296
  260. package/tests/build/scan-components.test.js +0 -173
  261. package/tests/components/all-components.test.js +0 -245
  262. package/tests/components/all-missing-components.test.js +0 -574
  263. package/tests/components/mu-alert.test.js +0 -113
  264. package/tests/components/mu-avatar.test.js +0 -148
  265. package/tests/components/mu-badge.test.js +0 -92
  266. package/tests/components/mu-button.test.js +0 -112
  267. package/tests/components/mu-card.test.js +0 -89
  268. package/tests/components/mu-checkbox.test.js +0 -158
  269. package/tests/components/mu-chip.test.js +0 -118
  270. package/tests/components/mu-container.test.js +0 -120
  271. package/tests/components/mu-divider.test.js +0 -98
  272. package/tests/components/mu-drawer-item.test.js +0 -199
  273. package/tests/components/mu-drawer.test.js +0 -96
  274. package/tests/components/mu-dropdown.test.js +0 -125
  275. package/tests/components/mu-form.test.js +0 -138
  276. package/tests/components/mu-grid.test.js +0 -135
  277. package/tests/components/mu-icon.test.js +0 -110
  278. package/tests/components/mu-input.test.js +0 -131
  279. package/tests/components/mu-lazy.test.js +0 -103
  280. package/tests/components/mu-modal.test.js +0 -275
  281. package/tests/components/mu-navbar.test.js +0 -101
  282. package/tests/components/mu-progress.test.js +0 -115
  283. package/tests/components/mu-radio.test.js +0 -114
  284. package/tests/components/mu-repeat.test.js +0 -106
  285. package/tests/components/mu-sidebar.test.js +0 -126
  286. package/tests/components/mu-skeleton.test.js +0 -162
  287. package/tests/components/mu-stack.test.js +0 -143
  288. package/tests/components/mu-switch.test.js +0 -292
  289. package/tests/components/mu-table.test.js +0 -124
  290. package/tests/components/mu-tabs.test.js +0 -104
  291. package/tests/components/mu-textarea.test.js +0 -115
  292. package/tests/components/mu-toast.test.js +0 -321
  293. package/tests/components/mu-tooltip.test.js +0 -133
  294. package/tests/components/mu-virtual-list.test.js +0 -109
  295. package/tests/core/MuElement.test.js +0 -120
  296. package/tests/core/agent-api.test.js +0 -125
  297. package/tests/core/all-core-modules.test.js +0 -442
  298. package/tests/core/bus.test.js +0 -364
  299. package/tests/core/component-schema.test.js +0 -160
  300. package/tests/core/feature-registry.test.js +0 -198
  301. package/tests/core/form-state.test.js +0 -167
  302. package/tests/core/http.test.js +0 -119
  303. package/tests/core/keyboard.test.js +0 -319
  304. package/tests/core/layers.test.js +0 -129
  305. package/tests/core/namespaced-stores.test.js +0 -114
  306. package/tests/core/render.test.js +0 -121
  307. package/tests/core/ripple.test.js +0 -131
  308. package/tests/core/router.test.js +0 -89
  309. package/tests/core/scheduler.test.js +0 -121
  310. package/tests/core/signals.test.js +0 -128
  311. package/tests/core/store.test.js +0 -171
  312. package/tests/core/transitions.test.js +0 -82
  313. package/tests/e2e/accessibility-harness.html +0 -58
  314. package/tests/e2e/accessibility.test.js +0 -401
  315. package/tests/e2e/agent-features.test.js +0 -372
  316. package/tests/e2e/card-spacing.test.js +0 -287
  317. package/tests/e2e/components.test.js +0 -439
  318. package/tests/e2e/demo-routes.test.js +0 -478
  319. package/tests/e2e/layout-css-fallback.test.js +0 -334
  320. package/tests/e2e/mu-alert.e2e.test.js +0 -111
  321. package/tests/e2e/mu-checkbox.test.js +0 -489
  322. package/tests/e2e/mu-chip.test.js +0 -347
  323. package/tests/e2e/mu-form.test.js +0 -499
  324. package/tests/e2e/mu-icon.test.js +0 -114
  325. package/tests/e2e/mu-radio.test.js +0 -113
  326. package/tests/e2e/mu-skeleton.test.js +0 -140
  327. package/tests/e2e/mu-switch.test.js +0 -415
  328. package/tests/e2e/mu-tabs.test.js +0 -494
  329. package/tests/e2e/mu-textarea.test.js +0 -242
  330. package/tests/e2e/mu-virtual-list.test.js +0 -427
  331. package/tests/e2e/perf-memory.test.js +0 -161
  332. package/tests/e2e/puppeteer-helper.js +0 -137
  333. package/tests/e2e/puppeteer.test.js +0 -226
  334. package/tests/e2e/pwa.test.js +0 -261
  335. package/tests/e2e/test-harness.html +0 -319
  336. package/tests/manual/test-components.html +0 -120
  337. package/tests/memory-test.html +0 -309
  338. package/tests/setup-dom.js +0 -93
  339. package/tests/visual-test.html +0 -301
package/demo/pages/prompt-ui-demo.html DELETED
@@ -1,218 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>AI Prompt UI Demo - microUI</title>
8
- <link rel="stylesheet" href="../../dist/microui.css">
9
- <style>
10
- body {
11
- font-family: var(--md-sys-typescale-font);
12
- background: var(--md-sys-color-background);
13
- color: var(--md-sys-color-on-background);
14
- padding: 24px;
15
- margin: 0;
16
- }
17
-
18
- .container {
19
- max-width: 800px;
20
- margin: 0 auto;
21
- }
22
-
23
- h1 {
24
- margin-bottom: 8px;
25
- }
26
-
27
- .subtitle {
28
- color: var(--md-sys-color-on-surface-variant);
29
- margin-bottom: 32px;
30
- }
31
-
32
- .section {
33
- margin-bottom: 48px;
34
- }
35
-
36
- .section h2 {
37
- margin-bottom: 16px;
38
- }
39
-
40
- .chat-container {
41
- background: var(--md-sys-color-surface-container);
42
- border-radius: var(--md-sys-shape-corner-large);
43
- padding: 24px;
44
- margin-bottom: 16px;
45
- }
46
-
47
- .demo-row {
48
- display: flex;
49
- gap: 16px;
50
- margin-bottom: 16px;
51
- }
52
-
53
- .demo-row>* {
54
- flex: 1;
55
- }
56
- </style>
57
- </head>
58
-
59
- <body>
60
- <div class="container">
61
- <h1>🤖 AI Prompt UI Components</h1>
62
- <p class="subtitle">Components for building AI agent interfaces - chat bubbles, code blocks, prompt inputs</p>
63
-
64
- <!-- Prompt Input Demo -->
65
- <section class="section">
66
- <h2>📝 mu-prompt-input</h2>
67
- <div class="demo-row">
68
- <mu-prompt-input id="basic-prompt" placeholder="Ask me anything..."></mu-prompt-input>
69
- </div>
70
- <div class="demo-row">
71
- <mu-prompt-input id="loading-prompt" placeholder="Processing..." loading></mu-prompt-input>
72
- </div>
73
- <div class="demo-row">
74
- <mu-prompt-input id="multiline-prompt" placeholder="Write a longer message..."
75
- multiline></mu-prompt-input>
76
- </div>
77
- </section>
78
-
79
- <!-- Chat Demo -->
80
- <section class="section">
81
- <h2>💬 Chat Interface</h2>
82
- <div class="chat-container" id="chat-container">
83
- <mu-message-bubble role="user" timestamp="10:30 AM">
84
- How do I sort an array in JavaScript?
85
- </mu-message-bubble>
86
-
87
- <mu-message-bubble role="assistant" timestamp="10:30 AM">
88
- Here's how to sort an array in JavaScript:
89
-
90
- <mu-code-block language="javascript">
91
- // Sort numbers ascending
92
- const numbers = [3, 1, 4, 1, 5, 9];
93
- const sorted = numbers.sort((a, b) => a - b);
94
- console.log(sorted); // [1, 1, 3, 4, 5, 9]
95
-
96
- // Sort strings alphabetically
97
- const fruits = ['banana', 'apple', 'cherry'];
98
- fruits.sort();
99
- console.log(fruits); // ['apple', 'banana', 'cherry']
100
- </mu-code-block>
101
-
102
- The default `.sort()` method sorts strings alphabetically. For numbers, you need a compare function.
103
-
104
- <mu-agent-toolbar></mu-agent-toolbar>
105
- </mu-message-bubble>
106
-
107
- <mu-message-bubble role="user" timestamp="10:31 AM">
108
- What about sorting objects by property?
109
- </mu-message-bubble>
110
-
111
- <mu-message-bubble role="assistant" timestamp="10:31 AM">
112
- Great question! Here's how to sort objects by a property:
113
-
114
- <mu-code-block language="javascript" filename="sort-objects.js">
115
- const users = [
116
- { name: 'Alice', age: 30 },
117
- { name: 'Bob', age: 25 },
118
- { name: 'Charlie', age: 35 }
119
- ];
120
-
121
- // Sort by age (ascending)
122
- users.sort((a, b) => a.age - b.age);
123
-
124
- // Sort by name (alphabetically)
125
- users.sort((a, b) => a.name.localeCompare(b.name));
126
- </mu-code-block>
127
-
128
- <mu-agent-toolbar actions="copy,regenerate,thumbsUp,thumbsDown"></mu-agent-toolbar>
129
- </mu-message-bubble>
130
- </div>
131
-
132
- <mu-prompt-input id="chat-input" placeholder="Type your message..."></mu-prompt-input>
133
- </section>
134
-
135
- <!-- Code Block Standalone -->
136
- <section class="section">
137
- <h2>📄 mu-code-block</h2>
138
- <mu-code-block language="python" filename="example.py">
139
- def fibonacci(n):
140
- if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2) # Generate first 10 Fibonacci numbers for i
141
- in range(10): print(fibonacci(i)) </mu-code-block>
142
-
143
- <mu-code-block language="css">
144
- .button {
145
- background: var(--md-sys-color-primary);
146
- color: var(--md-sys-color-on-primary);
147
- padding: 12px 24px;
148
- border-radius: 8px;
149
- border: none;
150
- }
151
- </mu-code-block>
152
- </section>
153
-
154
- <!-- Agent Toolbar Demo -->
155
- <section class="section">
156
- <h2>🔧 mu-agent-toolbar</h2>
157
- <p>Default actions:</p>
158
- <mu-agent-toolbar id="toolbar1"></mu-agent-toolbar>
159
-
160
- <p style="margin-top: 24px;">Custom actions:</p>
161
- <mu-agent-toolbar id="toolbar2" actions="copy,edit,share"></mu-agent-toolbar>
162
- </section>
163
- </div>
164
-
165
- <script type="module">
166
- import '../../dist/microui.esm.js';
167
-
168
- // Basic prompt
169
- const basicPrompt = document.getElementById('basic-prompt');
170
- basicPrompt.addEventListener('mu-submit', (e) => {
171
- console.log('Submitted:', e.detail.value);
172
- alert(`You asked: "${e.detail.value}"`);
173
- });
174
-
175
- // Chat functionality
176
- const chatInput = document.getElementById('chat-input');
177
- const chatContainer = document.getElementById('chat-container');
178
-
179
- chatInput.addEventListener('mu-submit', (e) => {
180
- // Add user message
181
- const userBubble = document.createElement('mu-message-bubble');
182
- userBubble.setAttribute('role', 'user');
183
- userBubble.setAttribute('timestamp', new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
184
- userBubble.textContent = e.detail.value;
185
- chatContainer.appendChild(userBubble);
186
-
187
- // Simulate loading
188
- chatInput.loading = true;
189
- chatInput.value = '';
190
-
191
- // Simulate AI response
192
- setTimeout(() => {
193
- const aiBubble = document.createElement('mu-message-bubble');
194
- aiBubble.setAttribute('role', 'assistant');
195
- aiBubble.setAttribute('timestamp', new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
196
- aiBubble.innerHTML = `
197
- I received your message: "<em>${e.detail.value}</em>".
198
- This is a simulated response demonstrating the chat interface.
199
- <mu-agent-toolbar></mu-agent-toolbar>
200
- `;
201
- chatContainer.appendChild(aiBubble);
202
- chatInput.loading = false;
203
- }, 1500);
204
- });
205
-
206
- // Toolbar actions
207
- document.getElementById('toolbar1').addEventListener('mu-action', (e) => {
208
- console.log('Action:', e.detail.action);
209
- alert(`Action: ${e.detail.action}`);
210
- });
211
-
212
- document.getElementById('toolbar2').addEventListener('mu-action', (e) => {
213
- console.log('Action:', e.detail.action);
214
- });
215
- </script>
216
- </body>
217
-
218
- </html>
package/demo/pages/responsive-demo.html DELETED
@@ -1,122 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Responsive Layout - microUI</title>
8
- <link rel="stylesheet" href="/dist/microui.css">
9
- <style>
10
- body {
11
- margin: 0;
12
- font-family: var(--md-sys-typescale-font);
13
- }
14
-
15
- /* Demo content */
16
- .demo-section {
17
- padding: 24px;
18
- max-width: 800px;
19
- }
20
-
21
- .demo-section h1 {
22
- margin-top: 0;
23
- }
24
-
25
- /* Resize instruction */
26
- .resize-hint {
27
- position: fixed;
28
- bottom: 100px;
29
- right: 16px;
30
- background: var(--md-sys-color-secondary-container);
31
- color: var(--md-sys-color-on-secondary-container);
32
- padding: 12px 16px;
33
- border-radius: 12px;
34
- font-size: 14px;
35
- z-index: 1000;
36
- box-shadow: var(--md-sys-elevation-level2);
37
- }
38
-
39
- @media (max-width: 599px) {
40
- .resize-hint {
41
- bottom: 160px;
42
- }
43
- }
44
- </style>
45
- </head>
46
-
47
- <body>
48
- <mu-layout>
49
- <!-- Drawer -->
50
- <mu-drawer slot="drawer" mode="auto" expand-on-hover>
51
- <div slot="header" style="padding: 16px; display: flex; align-items: center; gap: 12px;">
52
- <mu-icon name="widgets" style="color: var(--md-sys-color-primary);"></mu-icon>
53
- <span style="font-weight: 500;">microUI</span>
54
- </div>
55
-
56
- <mu-drawer-item icon="home" href="#home" active label="Home"></mu-drawer-item>
57
- <mu-drawer-item icon="smart_button" href="#buttons" label="Buttons"></mu-drawer-item>
58
- <mu-drawer-item icon="input" href="#inputs" label="Inputs"></mu-drawer-item>
59
- <mu-drawer-item icon="view_carousel" href="#cards" label="Cards"></mu-drawer-item>
60
- <mu-drawer-item icon="tab" href="#tabs" label="Tabs"></mu-drawer-item>
61
- <mu-drawer-item icon="notification_important" href="#alerts" label="Alerts"></mu-drawer-item>
62
- <mu-drawer-item icon="settings" href="#settings" label="Settings"></mu-drawer-item>
63
- </mu-drawer>
64
-
65
- <!-- Main content -->
66
- <div slot="default">
67
- <section class="demo-section" id="content">
68
- <h1>🎉 Responsive Layout Demo</h1>
69
- <p>This page demonstrates the new MD3 responsive layout components:</p>
70
-
71
- <mu-card style="margin: 16px 0;">
72
- <h3>📱 Responsive Behavior</h3>
73
- <ul>
74
- <li><strong>Mobile (&lt;600px)</strong>: Hamburger menu + bottom nav</li>
75
- <li><strong>Tablet (600-839px)</strong>: Navigation rail (icons only)</li>
76
- <li><strong>Desktop (840px+)</strong>: Expanded drawer with labels</li>
77
- </ul>
78
- </mu-card>
79
-
80
- <mu-card style="margin: 16px 0;">
81
- <h3>🧩 Components Used</h3>
82
- <ul>
83
- <li><code>&lt;mu-layout&gt;</code> - Main container</li>
84
- <li><code>&lt;mu-drawer&gt;</code> - Adaptive navigation drawer</li>
85
- <li><code>&lt;mu-drawer-item&gt;</code> - Navigation items</li>
86
- <li><code>&lt;mu-bottom-nav&gt;</code> - Mobile bottom navigation</li>
87
- </ul>
88
- </mu-card>
89
-
90
- <mu-card style="margin: 16px 0;">
91
- <h3>⚙️ Drawer Modes</h3>
92
- <p>The <code>mu-drawer</code> supports these modes:</p>
93
- <ul>
94
- <li><code>auto</code> - Adapts to breakpoints (default)</li>
95
- <li><code>permanent</code> - Always visible</li>
96
- <li><code>temporary</code> - Always hidden, opens as modal</li>
97
- <li><code>rail</code> - Always collapsed (icons only)</li>
98
- </ul>
99
- </mu-card>
100
-
101
- <mu-button variant="filled" onclick="document.querySelector('mu-drawer').toggle()">
102
- Toggle Drawer
103
- </mu-button>
104
- </section>
105
- </div>
106
-
107
- <!-- Bottom Navigation (mobile only) -->
108
- <mu-bottom-nav slot="bottom" hide-on-desktop>
109
- <mu-nav-item icon="home" active>Home</mu-nav-item>
110
- <mu-nav-item icon="category">Components</mu-nav-item>
111
- <mu-nav-item icon="info">About</mu-nav-item>
112
- </mu-bottom-nav>
113
- </mu-layout>
114
-
115
- <div class="resize-hint">
116
- ↔️ Resize window to test responsive behavior
117
- </div>
118
-
119
- <script type="module" src="/dist/microui.esm.js"></script>
120
- </body>
121
-
122
- </html>
package/demo/pages/schema-form-demo.html DELETED
@@ -1,270 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Schema Form Demo - microUI</title>
8
- <link rel="stylesheet" href="../../dist/microui.css">
9
- <style>
10
- body {
11
- font-family: var(--md-sys-typescale-font);
12
- background: var(--md-sys-color-background);
13
- color: var(--md-sys-color-on-background);
14
- padding: 24px;
15
- margin: 0;
16
- }
17
-
18
- .container {
19
- max-width: 1000px;
20
- margin: 0 auto;
21
- }
22
-
23
- h1 {
24
- margin-bottom: 8px;
25
- }
26
-
27
- .subtitle {
28
- color: var(--md-sys-color-on-surface-variant);
29
- margin-bottom: 32px;
30
- }
31
-
32
- .section {
33
- margin-bottom: 48px;
34
- }
35
-
36
- .section h2 {
37
- margin-bottom: 16px;
38
- }
39
-
40
- .demo-grid {
41
- display: grid;
42
- grid-template-columns: 1fr 1fr;
43
- gap: 24px;
44
- }
45
-
46
- @media (max-width: 768px) {
47
- .demo-grid {
48
- grid-template-columns: 1fr;
49
- }
50
- }
51
-
52
- .demo-panel {
53
- background: var(--md-sys-color-surface-container);
54
- padding: 24px;
55
- border-radius: var(--md-sys-shape-corner-large);
56
- }
57
-
58
- .demo-panel h3 {
59
- margin-top: 0;
60
- margin-bottom: 16px;
61
- }
62
-
63
- pre {
64
- background: var(--md-sys-color-surface-container-high);
65
- padding: 16px;
66
- border-radius: 8px;
67
- overflow-x: auto;
68
- font-size: 12px;
69
- margin: 0;
70
- }
71
-
72
- .output {
73
- background: var(--md-sys-color-inverse-surface);
74
- color: var(--md-sys-color-inverse-on-surface);
75
- padding: 12px 16px;
76
- border-radius: 8px;
77
- font-family: monospace;
78
- font-size: 13px;
79
- min-height: 60px;
80
- white-space: pre-wrap;
81
- }
82
-
83
- .actions {
84
- display: flex;
85
- gap: 8px;
86
- margin-bottom: 16px;
87
- }
88
- </style>
89
- </head>
90
-
91
- <body>
92
- <div class="container">
93
- <h1>📝 mu-schema-form</h1>
94
- <p class="subtitle">Auto-generate forms from JSON Schema – no HTML boilerplate required</p>
95
-
96
- <!-- User Registration Form -->
97
- <section class="section">
98
- <h2>👤 User Registration Form</h2>
99
- <div class="demo-grid">
100
- <div class="demo-panel">
101
- <h3>Generated Form</h3>
102
- <mu-schema-form id="user-form"></mu-schema-form>
103
- </div>
104
- <div class="demo-panel">
105
- <h3>Schema Definition</h3>
106
- <pre id="schema-display"></pre>
107
- </div>
108
- </div>
109
- <div class="demo-panel" style="margin-top: 16px;">
110
- <h3>Form Output</h3>
111
- <div id="output" class="output">Submit the form to see the output...</div>
112
- </div>
113
- </section>
114
-
115
- <!-- Settings Form -->
116
- <section class="section">
117
- <h2>⚙️ Settings Form (Inline Layout)</h2>
118
- <div class="demo-panel">
119
- <mu-schema-form id="settings-form" inline submit-label="Save Settings"></mu-schema-form>
120
- </div>
121
- <div class="demo-panel" style="margin-top: 16px;">
122
- <div id="settings-output" class="output">Change settings to see live updates...</div>
123
- </div>
124
- </section>
125
-
126
- <!-- API Reference -->
127
- <section class="section">
128
- <h2>📚 Schema Features</h2>
129
- <div class="demo-panel">
130
- <pre>// JSON Schema → microUI Component Mapping
131
-
132
- {
133
- "type": "string" → &lt;mu-input&gt;
134
- "type": "string", "format": "email" → &lt;mu-input type="email"&gt;
135
- "type": "string", "multiline": true → &lt;mu-textarea&gt;
136
- "type": "string", "enum": [...] → &lt;mu-dropdown&gt;
137
- "type": "number" → &lt;mu-input type="number"&gt;
138
- "type": "boolean" → &lt;mu-switch&gt;
139
- }
140
-
141
- // Validation properties:
142
- // minLength, maxLength, minimum, maximum, pattern, required
143
-
144
- // Custom properties:
145
- // title (label), description (helper text), placeholder
146
- // enumLabels (display names for enum values)
147
- // default (initial value)</pre>
148
- </div>
149
- </section>
150
- </div>
151
-
152
- <script type="module">
153
- import '../../dist/microui.esm.js';
154
-
155
- // User Registration Schema
156
- const userSchema = {
157
- type: 'object',
158
- properties: {
159
- name: {
160
- type: 'string',
161
- title: 'Full Name',
162
- placeholder: 'Enter your full name',
163
- minLength: 2,
164
- maxLength: 100
165
- },
166
- email: {
167
- type: 'string',
168
- format: 'email',
169
- title: 'Email Address',
170
- placeholder: 'user@example.com'
171
- },
172
- password: {
173
- type: 'string',
174
- format: 'password',
175
- title: 'Password',
176
- minLength: 8,
177
- description: 'At least 8 characters'
178
- },
179
- role: {
180
- type: 'string',
181
- title: 'Role',
182
- enum: ['user', 'admin', 'moderator'],
183
- enumLabels: ['Regular User', 'Administrator', 'Moderator'],
184
- default: 'user'
185
- },
186
- age: {
187
- type: 'integer',
188
- title: 'Age',
189
- minimum: 18,
190
- maximum: 120,
191
- description: 'Must be 18 or older'
192
- },
193
- newsletter: {
194
- type: 'boolean',
195
- title: 'Subscribe to newsletter',
196
- default: true
197
- },
198
- bio: {
199
- type: 'string',
200
- title: 'Bio',
201
- multiline: true,
202
- placeholder: 'Tell us about yourself...',
203
- maxLength: 500
204
- }
205
- },
206
- required: ['name', 'email', 'password']
207
- };
208
-
209
- // Settings Schema
210
- const settingsSchema = {
211
- type: 'object',
212
- properties: {
213
- theme: {
214
- type: 'string',
215
- title: 'Theme',
216
- enum: ['light', 'dark', 'auto'],
217
- enumLabels: ['Light', 'Dark', 'System'],
218
- default: 'auto'
219
- },
220
- notifications: {
221
- type: 'boolean',
222
- title: 'Enable notifications',
223
- default: true
224
- },
225
- language: {
226
- type: 'string',
227
- title: 'Language',
228
- enum: ['en', 'it', 'es', 'de'],
229
- enumLabels: ['English', 'Italiano', 'Español', 'Deutsch'],
230
- default: 'en'
231
- }
232
- }
233
- };
234
-
235
- // Initialize forms
236
- const userForm = document.getElementById('user-form');
237
- const settingsForm = document.getElementById('settings-form');
238
- const outputEl = document.getElementById('output');
239
- const settingsOutputEl = document.getElementById('settings-output');
240
- const schemaDisplay = document.getElementById('schema-display');
241
-
242
- // Display schema
243
- schemaDisplay.textContent = JSON.stringify(userSchema, null, 2);
244
-
245
- // Set schemas
246
- userForm.schema = userSchema;
247
- settingsForm.schema = settingsSchema;
248
-
249
- // Event handlers
250
- userForm.addEventListener('mu-submit', (e) => {
251
- outputEl.textContent = '✅ Form submitted!\n\n' + JSON.stringify(e.detail, null, 2);
252
- });
253
-
254
- userForm.addEventListener('mu-change', (e) => {
255
- outputEl.textContent = '📝 Field changed: ' + e.detail.field + '\n\n' +
256
- JSON.stringify(e.detail.values, null, 2);
257
- });
258
-
259
- settingsForm.addEventListener('mu-change', (e) => {
260
- settingsOutputEl.textContent = 'Settings updated:\n\n' +
261
- JSON.stringify(e.detail.values, null, 2);
262
- });
263
-
264
- settingsForm.addEventListener('mu-submit', (e) => {
265
- settingsOutputEl.textContent = '✅ Settings saved!\n\n' + JSON.stringify(e.detail, null, 2);
266
- });
267
- </script>
268
- </body>
269
-
270
- </html>
package/demo/robots.txt DELETED
@@ -1,6 +0,0 @@
1
- # robots.txt for microUI
2
- User-agent: *
3
- Allow: /
4
-
5
- # Sitemap (when available)
6
- # Sitemap: https://microui.dev/sitemap.xml