microui-wc 0.1.0 → 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 (343) 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 +116 -116
  5. package/dist/README.md +21 -16
  6. package/dist/components.css +1 -1
  7. package/dist/microui.css +1 -1
  8. package/dist/microui.esm.js.map +1 -1
  9. package/dist/microui.min.js.map +1 -1
  10. package/dist/styles/components/switch.css +1 -1
  11. package/docs/getting-started.md +3 -3
  12. package/package.json +38 -10
  13. package/src/components/mu-schema-form.js +1 -1
  14. package/src/styles/components/switch.css +7 -8
  15. package/src/styles/components.css +6 -6
  16. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -40
  17. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -33
  18. package/.github/PULL_REQUEST_TEMPLATE.md +0 -28
  19. package/.github/workflows/ci.yml +0 -42
  20. package/.github/workflows/deploy-pages.yml +0 -112
  21. package/CODE_OF_CONDUCT.md +0 -59
  22. package/CONTRIBUTING.md +0 -156
  23. package/SECURITY.md +0 -58
  24. package/app/.generated/routes/alerts.js +0 -8
  25. package/app/.generated/routes/avatars.js +0 -8
  26. package/app/.generated/routes/badges.js +0 -8
  27. package/app/.generated/routes/buttons.js +0 -10
  28. package/app/.generated/routes/cards.js +0 -10
  29. package/app/.generated/routes/checkboxes.js +0 -9
  30. package/app/.generated/routes/chips.js +0 -8
  31. package/app/.generated/routes/dropdowns.js +0 -9
  32. package/app/.generated/routes/home.js +0 -7
  33. package/app/.generated/routes/icons.js +0 -9
  34. package/app/.generated/routes/inputs.js +0 -10
  35. package/app/.generated/routes/installation.js +0 -7
  36. package/app/.generated/routes/layout.js +0 -9
  37. package/app/.generated/routes/modals.js +0 -9
  38. package/app/.generated/routes/navbar.js +0 -7
  39. package/app/.generated/routes/progress.js +0 -9
  40. package/app/.generated/routes/radios.js +0 -9
  41. package/app/.generated/routes/switches.js +0 -9
  42. package/app/.generated/routes/tabs.js +0 -8
  43. package/app/.generated/routes/toasts.js +0 -9
  44. package/app/index.html +0 -67
  45. package/app/pages/alerts.html +0 -23
  46. package/app/pages/avatars.html +0 -22
  47. package/app/pages/badges.html +0 -22
  48. package/app/pages/buttons.html +0 -71
  49. package/app/pages/cards.html +0 -54
  50. package/app/pages/checkboxes.html +0 -39
  51. package/app/pages/chips.html +0 -23
  52. package/app/pages/dropdowns.html +0 -41
  53. package/app/pages/home.html +0 -59
  54. package/app/pages/icons.html +0 -29
  55. package/app/pages/inputs.html +0 -66
  56. package/app/pages/installation.html +0 -34
  57. package/app/pages/layout.html +0 -30
  58. package/app/pages/modals.html +0 -21
  59. package/app/pages/navbar.html +0 -22
  60. package/app/pages/progress.html +0 -35
  61. package/app/pages/radios.html +0 -40
  62. package/app/pages/switches.html +0 -39
  63. package/app/pages/tabs.html +0 -30
  64. package/app/pages/toasts.html +0 -22
  65. package/app-dist/index.html +0 -67
  66. package/app-dist/pages/alerts.html +0 -23
  67. package/app-dist/pages/avatars.html +0 -22
  68. package/app-dist/pages/badges.html +0 -22
  69. package/app-dist/pages/buttons.html +0 -71
  70. package/app-dist/pages/cards.html +0 -54
  71. package/app-dist/pages/checkboxes.html +0 -39
  72. package/app-dist/pages/chips.html +0 -23
  73. package/app-dist/pages/dropdowns.html +0 -41
  74. package/app-dist/pages/home.html +0 -59
  75. package/app-dist/pages/icons.html +0 -29
  76. package/app-dist/pages/inputs.html +0 -66
  77. package/app-dist/pages/installation.html +0 -34
  78. package/app-dist/pages/layout.html +0 -30
  79. package/app-dist/pages/modals.html +0 -21
  80. package/app-dist/pages/navbar.html +0 -22
  81. package/app-dist/pages/progress.html +0 -35
  82. package/app-dist/pages/radios.html +0 -40
  83. package/app-dist/pages/switches.html +0 -39
  84. package/app-dist/pages/tabs.html +0 -30
  85. package/app-dist/pages/toasts.html +0 -22
  86. package/app-dist/pages.json +0 -217
  87. package/app-dist/routes/alerts.js +0 -5
  88. package/app-dist/routes/avatars.js +0 -1
  89. package/app-dist/routes/badges.js +0 -1
  90. package/app-dist/routes/buttons.js +0 -1
  91. package/app-dist/routes/cards.js +0 -1
  92. package/app-dist/routes/checkboxes.js +0 -9
  93. package/app-dist/routes/chips.js +0 -4
  94. package/app-dist/routes/chunk-019e5e2f.js +0 -5
  95. package/app-dist/routes/chunk-0m4j19yd.js +0 -2
  96. package/app-dist/routes/chunk-0tmmp5q0.js +0 -1
  97. package/app-dist/routes/chunk-10xn709r.js +0 -1
  98. package/app-dist/routes/chunk-15m2qcda.js +0 -2
  99. package/app-dist/routes/chunk-1bh8g23n.js +0 -1
  100. package/app-dist/routes/chunk-1vg0v937.js +0 -1
  101. package/app-dist/routes/chunk-1zvcgy3j.js +0 -1
  102. package/app-dist/routes/chunk-2afb0861.js +0 -1
  103. package/app-dist/routes/chunk-2c6ttpzt.js +0 -5
  104. package/app-dist/routes/chunk-3dy30fhs.js +0 -1
  105. package/app-dist/routes/chunk-426dnces.js +0 -13
  106. package/app-dist/routes/chunk-44kgxery.js +0 -1
  107. package/app-dist/routes/chunk-47fdnejd.js +0 -33
  108. package/app-dist/routes/chunk-49a6t2vq.js +0 -1
  109. package/app-dist/routes/chunk-4fe1rm5b.js +0 -1
  110. package/app-dist/routes/chunk-4ggmvkta.js +0 -33
  111. package/app-dist/routes/chunk-4vkz81q7.js +0 -33
  112. package/app-dist/routes/chunk-4w4tmj8f.js +0 -31
  113. package/app-dist/routes/chunk-532s62kr.js +0 -31
  114. package/app-dist/routes/chunk-5hm3bssy.js +0 -33
  115. package/app-dist/routes/chunk-5vrh24hc.js +0 -1
  116. package/app-dist/routes/chunk-61pcg25a.js +0 -1
  117. package/app-dist/routes/chunk-6nfhygvf.js +0 -1
  118. package/app-dist/routes/chunk-700e7je6.js +0 -33
  119. package/app-dist/routes/chunk-7fsn17kg.js +0 -1
  120. package/app-dist/routes/chunk-7k789b32.js +0 -1
  121. package/app-dist/routes/chunk-7r46q0ys.js +0 -36
  122. package/app-dist/routes/chunk-86fmc1fr.js +0 -5
  123. package/app-dist/routes/chunk-8qth37vw.js +0 -1
  124. package/app-dist/routes/chunk-924wv8n0.js +0 -1
  125. package/app-dist/routes/chunk-9mbhgxk9.js +0 -1
  126. package/app-dist/routes/chunk-a216hyd9.js +0 -1
  127. package/app-dist/routes/chunk-akzxykh9.js +0 -33
  128. package/app-dist/routes/chunk-b3dcvy8c.js +0 -1
  129. package/app-dist/routes/chunk-b74zahz5.js +0 -31
  130. package/app-dist/routes/chunk-bftj53p2.js +0 -5
  131. package/app-dist/routes/chunk-c01hnz3e.js +0 -1
  132. package/app-dist/routes/chunk-d8pvv5km.js +0 -1
  133. package/app-dist/routes/chunk-dev0aezr.js +0 -2
  134. package/app-dist/routes/chunk-dh6vnv0e.js +0 -1
  135. package/app-dist/routes/chunk-dn2cbpva.js +0 -36
  136. package/app-dist/routes/chunk-dvn0my90.js +0 -1
  137. package/app-dist/routes/chunk-dvq8mnve.js +0 -36
  138. package/app-dist/routes/chunk-e8c2gc4d.js +0 -5
  139. package/app-dist/routes/chunk-ejf9ak2x.js +0 -1
  140. package/app-dist/routes/chunk-f083m55s.js +0 -1
  141. package/app-dist/routes/chunk-fnrj28s1.js +0 -31
  142. package/app-dist/routes/chunk-fvg3yjdp.js +0 -31
  143. package/app-dist/routes/chunk-g7k381n1.js +0 -1
  144. package/app-dist/routes/chunk-h01kq2ae.js +0 -13
  145. package/app-dist/routes/chunk-h4dk761v.js +0 -5
  146. package/app-dist/routes/chunk-hmx91z2x.js +0 -5
  147. package/app-dist/routes/chunk-hxbg4m42.js +0 -36
  148. package/app-dist/routes/chunk-jbjnfp2b.js +0 -2
  149. package/app-dist/routes/chunk-jxtz5vv6.js +0 -36
  150. package/app-dist/routes/chunk-jxzcs0ey.js +0 -36
  151. package/app-dist/routes/chunk-kt7wwhcx.js +0 -1
  152. package/app-dist/routes/chunk-kzptszyc.js +0 -33
  153. package/app-dist/routes/chunk-mhgca4w4.js +0 -2
  154. package/app-dist/routes/chunk-mhswxa20.js +0 -1
  155. package/app-dist/routes/chunk-n8zfeex6.js +0 -1
  156. package/app-dist/routes/chunk-pee47b2r.js +0 -1
  157. package/app-dist/routes/chunk-pesmw829.js +0 -1
  158. package/app-dist/routes/chunk-pgc4c6f3.js +0 -36
  159. package/app-dist/routes/chunk-q8egegm1.js +0 -1
  160. package/app-dist/routes/chunk-q9mn2qyq.js +0 -36
  161. package/app-dist/routes/chunk-qh0rtaf3.js +0 -5
  162. package/app-dist/routes/chunk-qqhmk6ye.js +0 -2
  163. package/app-dist/routes/chunk-qrxygmf7.js +0 -33
  164. package/app-dist/routes/chunk-r46yzksx.js +0 -36
  165. package/app-dist/routes/chunk-rgpbw2w0.js +0 -5
  166. package/app-dist/routes/chunk-rnpzv3d8.js +0 -2
  167. package/app-dist/routes/chunk-s5v8cv05.js +0 -2
  168. package/app-dist/routes/chunk-sbwn5bpc.js +0 -1
  169. package/app-dist/routes/chunk-sqbg8jbt.js +0 -33
  170. package/app-dist/routes/chunk-sv8dqnf7.js +0 -1
  171. package/app-dist/routes/chunk-t67sw3za.js +0 -1
  172. package/app-dist/routes/chunk-tjdpqwdf.js +0 -31
  173. package/app-dist/routes/chunk-tq2mfghg.js +0 -1
  174. package/app-dist/routes/chunk-ttn10vt6.js +0 -1
  175. package/app-dist/routes/chunk-v2hzpjxr.js +0 -1
  176. package/app-dist/routes/chunk-wfjjkw9y.js +0 -1
  177. package/app-dist/routes/chunk-wt8cxzmf.js +0 -31
  178. package/app-dist/routes/chunk-x45d372k.js +0 -5
  179. package/app-dist/routes/chunk-y3wsazkt.js +0 -1
  180. package/app-dist/routes/chunk-y7pmgc7t.js +0 -33
  181. package/app-dist/routes/chunk-zefdt2q3.js +0 -31
  182. package/app-dist/routes/dropdowns.js +0 -6
  183. package/app-dist/routes/home.js +0 -1
  184. package/app-dist/routes/icons.js +0 -1
  185. package/app-dist/routes/inputs.js +0 -12
  186. package/app-dist/routes/installation.js +0 -1
  187. package/app-dist/routes/layout.js +0 -1
  188. package/app-dist/routes/modals.js +0 -7
  189. package/app-dist/routes/navbar.js +0 -1
  190. package/app-dist/routes/progress.js +0 -1
  191. package/app-dist/routes/radios.js +0 -6
  192. package/app-dist/routes/switches.js +0 -6
  193. package/app-dist/routes/tabs.js +0 -1
  194. package/app-dist/routes/toasts.js +0 -16
  195. package/assets/fonts/material-symbols-mini.woff2 +0 -0
  196. package/assets/fonts/material-symbols.woff2 +0 -0
  197. package/assets/fonts/roboto-400.woff2 +0 -0
  198. package/assets/fonts/roboto-500.woff2 +0 -0
  199. package/assets/fonts/roboto-700.woff2 +0 -0
  200. package/assets/logo-banner-400.jpg +0 -0
  201. package/assets/logo-banner-400.webp +0 -0
  202. package/assets/logo-banner-800.webp +0 -0
  203. package/assets/logo-banner.jpg +0 -0
  204. package/assets/logo-icon-64.jpg +0 -0
  205. package/assets/logo-icon-64.webp +0 -0
  206. package/assets/logo-icon.jpg +0 -0
  207. package/assets/logo-square.jpg +0 -0
  208. package/bun.lock +0 -312
  209. package/bunfig.toml +0 -4
  210. package/custom-elements.json +0 -1916
  211. package/demo/api/sample-data.json +0 -38
  212. package/demo/content/alerts.html +0 -115
  213. package/demo/content/avatars.html +0 -70
  214. package/demo/content/badges.html +0 -65
  215. package/demo/content/buttons.html +0 -188
  216. package/demo/content/callouts.html +0 -91
  217. package/demo/content/cards.html +0 -121
  218. package/demo/content/checkboxes.html +0 -178
  219. package/demo/content/chips.html +0 -67
  220. package/demo/content/codeblocks.html +0 -101
  221. package/demo/content/confirms.html +0 -115
  222. package/demo/content/datatables.html +0 -149
  223. package/demo/content/dividers.html +0 -119
  224. package/demo/content/dropdowns.html +0 -89
  225. package/demo/content/enterprise.html +0 -252
  226. package/demo/content/home.html +0 -149
  227. package/demo/content/icons.html +0 -89
  228. package/demo/content/inputs.html +0 -135
  229. package/demo/content/installation.html +0 -16
  230. package/demo/content/layout.html +0 -136
  231. package/demo/content/modals.html +0 -141
  232. package/demo/content/navbar.html +0 -70
  233. package/demo/content/progress.html +0 -119
  234. package/demo/content/radios.html +0 -88
  235. package/demo/content/skeletons.html +0 -109
  236. package/demo/content/spinners.html +0 -96
  237. package/demo/content/switches.html +0 -84
  238. package/demo/content/tables.html +0 -124
  239. package/demo/content/tabs.html +0 -85
  240. package/demo/content/toasts.html +0 -116
  241. package/demo/content/tooltips.html +0 -107
  242. package/demo/content/virtual-lists.html +0 -233
  243. package/demo/favicon.ico +0 -0
  244. package/demo/favicon.png +0 -0
  245. package/demo/full.html +0 -52
  246. package/demo/iife.html +0 -46
  247. package/demo/manifest.json +0 -34
  248. package/demo/pages/datatable-demo.html +0 -237
  249. package/demo/pages/prompt-ui-demo.html +0 -218
  250. package/demo/pages/responsive-demo.html +0 -122
  251. package/demo/pages/schema-form-demo.html +0 -270
  252. package/demo/robots.txt +0 -6
  253. package/demo/shell.html +0 -712
  254. package/demo/sw.js +0 -387
  255. package/lighthouse-audit.mjs +0 -113
  256. package/scripts/analyze-components.js +0 -105
  257. package/scripts/build-app.js +0 -193
  258. package/scripts/build-framework.js +0 -444
  259. package/scripts/build-utils.js +0 -101
  260. package/scripts/test-isolated.js +0 -151
  261. package/server.js +0 -256
  262. package/tests/agents/agent-integration.test.js +0 -76
  263. package/tests/benchmark.html +0 -296
  264. package/tests/build/scan-components.test.js +0 -173
  265. package/tests/components/all-components.test.js +0 -245
  266. package/tests/components/all-missing-components.test.js +0 -574
  267. package/tests/components/mu-alert.test.js +0 -113
  268. package/tests/components/mu-avatar.test.js +0 -148
  269. package/tests/components/mu-badge.test.js +0 -92
  270. package/tests/components/mu-button.test.js +0 -112
  271. package/tests/components/mu-card.test.js +0 -89
  272. package/tests/components/mu-checkbox.test.js +0 -158
  273. package/tests/components/mu-chip.test.js +0 -118
  274. package/tests/components/mu-container.test.js +0 -120
  275. package/tests/components/mu-divider.test.js +0 -98
  276. package/tests/components/mu-drawer-item.test.js +0 -199
  277. package/tests/components/mu-drawer.test.js +0 -96
  278. package/tests/components/mu-dropdown.test.js +0 -125
  279. package/tests/components/mu-form.test.js +0 -138
  280. package/tests/components/mu-grid.test.js +0 -135
  281. package/tests/components/mu-icon.test.js +0 -110
  282. package/tests/components/mu-input.test.js +0 -131
  283. package/tests/components/mu-lazy.test.js +0 -103
  284. package/tests/components/mu-modal.test.js +0 -275
  285. package/tests/components/mu-navbar.test.js +0 -101
  286. package/tests/components/mu-progress.test.js +0 -115
  287. package/tests/components/mu-radio.test.js +0 -114
  288. package/tests/components/mu-repeat.test.js +0 -106
  289. package/tests/components/mu-sidebar.test.js +0 -126
  290. package/tests/components/mu-skeleton.test.js +0 -162
  291. package/tests/components/mu-stack.test.js +0 -143
  292. package/tests/components/mu-switch.test.js +0 -292
  293. package/tests/components/mu-table.test.js +0 -124
  294. package/tests/components/mu-tabs.test.js +0 -104
  295. package/tests/components/mu-textarea.test.js +0 -115
  296. package/tests/components/mu-toast.test.js +0 -321
  297. package/tests/components/mu-tooltip.test.js +0 -133
  298. package/tests/components/mu-virtual-list.test.js +0 -109
  299. package/tests/core/MuElement.test.js +0 -120
  300. package/tests/core/agent-api.test.js +0 -125
  301. package/tests/core/all-core-modules.test.js +0 -442
  302. package/tests/core/bus.test.js +0 -364
  303. package/tests/core/component-schema.test.js +0 -160
  304. package/tests/core/feature-registry.test.js +0 -198
  305. package/tests/core/form-state.test.js +0 -167
  306. package/tests/core/http.test.js +0 -119
  307. package/tests/core/keyboard.test.js +0 -319
  308. package/tests/core/layers.test.js +0 -129
  309. package/tests/core/namespaced-stores.test.js +0 -114
  310. package/tests/core/render.test.js +0 -121
  311. package/tests/core/ripple.test.js +0 -131
  312. package/tests/core/router.test.js +0 -89
  313. package/tests/core/scheduler.test.js +0 -121
  314. package/tests/core/signals.test.js +0 -128
  315. package/tests/core/store.test.js +0 -171
  316. package/tests/core/transitions.test.js +0 -82
  317. package/tests/e2e/accessibility-harness.html +0 -58
  318. package/tests/e2e/accessibility.test.js +0 -401
  319. package/tests/e2e/agent-features.test.js +0 -372
  320. package/tests/e2e/card-spacing.test.js +0 -287
  321. package/tests/e2e/components.test.js +0 -439
  322. package/tests/e2e/demo-routes.test.js +0 -478
  323. package/tests/e2e/layout-css-fallback.test.js +0 -334
  324. package/tests/e2e/mu-alert.e2e.test.js +0 -111
  325. package/tests/e2e/mu-checkbox.test.js +0 -489
  326. package/tests/e2e/mu-chip.test.js +0 -347
  327. package/tests/e2e/mu-form.test.js +0 -499
  328. package/tests/e2e/mu-icon.test.js +0 -114
  329. package/tests/e2e/mu-radio.test.js +0 -113
  330. package/tests/e2e/mu-skeleton.test.js +0 -140
  331. package/tests/e2e/mu-switch.test.js +0 -415
  332. package/tests/e2e/mu-tabs.test.js +0 -494
  333. package/tests/e2e/mu-textarea.test.js +0 -242
  334. package/tests/e2e/mu-virtual-list.test.js +0 -427
  335. package/tests/e2e/perf-memory.test.js +0 -161
  336. package/tests/e2e/puppeteer-helper.js +0 -137
  337. package/tests/e2e/puppeteer.test.js +0 -226
  338. package/tests/e2e/pwa.test.js +0 -261
  339. package/tests/e2e/test-harness.html +0 -319
  340. package/tests/manual/test-components.html +0 -120
  341. package/tests/memory-test.html +0 -309
  342. package/tests/setup-dom.js +0 -93
  343. 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