@f-ewald/components 0.5.0 → 0.7.0

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 (101) hide show
  1. package/README.md +61 -0
  2. package/custom-elements.json +3808 -930
  3. package/dist/chat-message.d.ts +39 -0
  4. package/dist/chat-message.d.ts.map +1 -0
  5. package/dist/chat-message.js +155 -0
  6. package/dist/chat-message.js.map +1 -0
  7. package/dist/data-table.d.ts +39 -0
  8. package/dist/data-table.d.ts.map +1 -0
  9. package/dist/data-table.js +119 -0
  10. package/dist/data-table.js.map +1 -0
  11. package/dist/dropdown-button.d.ts +37 -0
  12. package/dist/dropdown-button.d.ts.map +1 -0
  13. package/dist/dropdown-button.js +219 -0
  14. package/dist/dropdown-button.js.map +1 -0
  15. package/dist/editable-text.d.ts +52 -0
  16. package/dist/editable-text.d.ts.map +1 -0
  17. package/dist/editable-text.js +224 -0
  18. package/dist/editable-text.js.map +1 -0
  19. package/dist/form-select.d.ts +46 -0
  20. package/dist/form-select.d.ts.map +1 -0
  21. package/dist/form-select.js +245 -0
  22. package/dist/form-select.js.map +1 -0
  23. package/dist/frame-box.d.ts +22 -0
  24. package/dist/frame-box.d.ts.map +1 -0
  25. package/dist/frame-box.js +68 -0
  26. package/dist/frame-box.js.map +1 -0
  27. package/dist/gallery-item-variant.d.ts +21 -0
  28. package/dist/gallery-item-variant.d.ts.map +1 -0
  29. package/dist/gallery-item-variant.js +44 -0
  30. package/dist/gallery-item-variant.js.map +1 -0
  31. package/dist/gallery-item.d.ts +28 -0
  32. package/dist/gallery-item.d.ts.map +1 -0
  33. package/dist/gallery-item.js +54 -0
  34. package/dist/gallery-item.js.map +1 -0
  35. package/dist/icon-button.d.ts +27 -0
  36. package/dist/icon-button.d.ts.map +1 -0
  37. package/dist/icon-button.js +83 -0
  38. package/dist/icon-button.js.map +1 -0
  39. package/dist/icons.d.ts +8 -0
  40. package/dist/icons.d.ts.map +1 -1
  41. package/dist/icons.js +8 -0
  42. package/dist/icons.js.map +1 -1
  43. package/dist/index.d.ts +16 -1
  44. package/dist/index.d.ts.map +1 -1
  45. package/dist/index.js +16 -1
  46. package/dist/index.js.map +1 -1
  47. package/dist/live-timer.d.ts +31 -0
  48. package/dist/live-timer.d.ts.map +1 -0
  49. package/dist/live-timer.js +78 -0
  50. package/dist/live-timer.js.map +1 -0
  51. package/dist/mcp-server.d.ts +3 -0
  52. package/dist/mcp-server.d.ts.map +1 -0
  53. package/dist/mcp-server.js +82 -0
  54. package/dist/mcp-server.js.map +1 -0
  55. package/dist/photo-gallery.d.ts +117 -0
  56. package/dist/photo-gallery.d.ts.map +1 -0
  57. package/dist/photo-gallery.js +620 -0
  58. package/dist/photo-gallery.js.map +1 -0
  59. package/dist/popover-panel.d.ts +37 -0
  60. package/dist/popover-panel.d.ts.map +1 -0
  61. package/dist/popover-panel.js +184 -0
  62. package/dist/popover-panel.js.map +1 -0
  63. package/dist/status-pill.d.ts +24 -0
  64. package/dist/status-pill.d.ts.map +1 -0
  65. package/dist/status-pill.js +101 -0
  66. package/dist/status-pill.js.map +1 -0
  67. package/dist/tile-grid.d.ts +32 -0
  68. package/dist/tile-grid.d.ts.map +1 -0
  69. package/dist/tile-grid.js +102 -0
  70. package/dist/tile-grid.js.map +1 -0
  71. package/dist/tokens.css +39 -0
  72. package/dist/tokens.d.ts +28 -3
  73. package/dist/tokens.d.ts.map +1 -1
  74. package/dist/tokens.js +42 -43
  75. package/dist/tokens.js.map +1 -1
  76. package/dist/user-avatar.d.ts +5 -2
  77. package/dist/user-avatar.d.ts.map +1 -1
  78. package/dist/user-avatar.js +22 -6
  79. package/dist/user-avatar.js.map +1 -1
  80. package/dist/utils/duration.d.ts +12 -0
  81. package/dist/utils/duration.d.ts.map +1 -0
  82. package/dist/utils/duration.js +27 -0
  83. package/dist/utils/duration.js.map +1 -0
  84. package/docs/chat-message.md +59 -0
  85. package/docs/data-table.md +63 -0
  86. package/docs/dropdown-button.md +61 -0
  87. package/docs/editable-text.md +51 -0
  88. package/docs/form-select.md +70 -0
  89. package/docs/frame-box.md +43 -0
  90. package/docs/gallery-item-variant.md +37 -0
  91. package/docs/gallery-item.md +47 -0
  92. package/docs/icon-button.md +52 -0
  93. package/docs/live-timer.md +39 -0
  94. package/docs/mcp-evaluation.md +18 -11
  95. package/docs/photo-gallery.md +77 -0
  96. package/docs/popover-panel.md +70 -0
  97. package/docs/status-pill.md +43 -0
  98. package/docs/tile-grid.md +58 -0
  99. package/docs/user-avatar.md +1 -1
  100. package/llms.txt +357 -1
  101. package/package.json +10 -3
package/README.md CHANGED
@@ -44,14 +44,26 @@ import "@f-ewald/components/roman-numeral.js";
44
44
  | `<address-autocomplete>` | [docs/address-autocomplete.md](./docs/address-autocomplete.md) |
45
45
  | `<animate-confetti>` | [docs/animate-confetti.md](./docs/animate-confetti.md) |
46
46
  | `<autocomplete-input>` | [docs/autocomplete-input.md](./docs/autocomplete-input.md) |
47
+ | `<chat-message>` | [docs/chat-message.md](./docs/chat-message.md) |
47
48
  | `<confirm-dialog>` | [docs/confirm-dialog.md](./docs/confirm-dialog.md) |
48
49
  | `<copy-link-button>` | [docs/copy-link-button.md](./docs/copy-link-button.md) |
50
+ | `<data-table>` | [docs/data-table.md](./docs/data-table.md) |
49
51
  | `<distance-value>` | [docs/distance-value.md](./docs/distance-value.md) |
50
52
  | `<distribution-chart>` | [docs/distribution-chart.md](./docs/distribution-chart.md) |
53
+ | `<dropdown-button>` | [docs/dropdown-button.md](./docs/dropdown-button.md) |
54
+ | `<editable-text>` | [docs/editable-text.md](./docs/editable-text.md) |
55
+ | `<form-select>` | [docs/form-select.md](./docs/form-select.md) |
56
+ | `<frame-box>` | [docs/frame-box.md](./docs/frame-box.md) |
57
+ | `<gallery-item>` | [docs/gallery-item.md](./docs/gallery-item.md) |
58
+ | `<gallery-item-variant>` | [docs/gallery-item-variant.md](./docs/gallery-item-variant.md) |
59
+ | `<icon-button>` | [docs/icon-button.md](./docs/icon-button.md) |
60
+ | `<live-timer>` | [docs/live-timer.md](./docs/live-timer.md) |
51
61
  | `<map-circle>` | [docs/map-circle.md](./docs/map-circle.md) |
52
62
  | `<map-pin>` | [docs/map-pin.md](./docs/map-pin.md) |
53
63
  | `<map-point>` | [docs/map-point.md](./docs/map-point.md) |
54
64
  | `<percent-bar-chart>` | [docs/percent-bar-chart.md](./docs/percent-bar-chart.md) |
65
+ | `<photo-gallery>` | [docs/photo-gallery.md](./docs/photo-gallery.md) |
66
+ | `<popover-panel>` | [docs/popover-panel.md](./docs/popover-panel.md) |
55
67
  | `<price-history-chart>` | [docs/price-history-chart.md](./docs/price-history-chart.md) |
56
68
  | `<radio-cards>` | [docs/radio-cards.md](./docs/radio-cards.md) |
57
69
  | `<radio-pills>` | [docs/radio-pills.md](./docs/radio-pills.md) |
@@ -60,6 +72,8 @@ import "@f-ewald/components/roman-numeral.js";
60
72
  | `<roman-numeral>` | [docs/roman-numeral.md](./docs/roman-numeral.md) |
61
73
  | `<slide-panel>` | [docs/slide-panel.md](./docs/slide-panel.md) |
62
74
  | `<stat-meter>` | [docs/stat-meter.md](./docs/stat-meter.md) |
75
+ | `<status-pill>` | [docs/status-pill.md](./docs/status-pill.md) |
76
+ | `<tile-grid>` | [docs/tile-grid.md](./docs/tile-grid.md) |
63
77
  | `<toast-notification>` | [docs/toast-notification.md](./docs/toast-notification.md) |
64
78
  | `<ui-button>` | [docs/ui-button.md](./docs/ui-button.md) |
65
79
  | `<user-avatar>` | [docs/user-avatar.md](./docs/user-avatar.md) |
@@ -91,8 +105,54 @@ Or import the generated stylesheet as a starting point and edit it:
91
105
  import "@f-ewald/components/tokens.css";
92
106
  ```
93
107
 
108
+ ### Dark mode
109
+
110
+ `tokens.css` also ships a dark palette (see `darkTokenValues` in
111
+ [`src/tokens.ts`](./src/tokens.ts)), applied automatically via
112
+ `@media (prefers-color-scheme: dark)`. A consumer can force either mode
113
+ regardless of the OS preference by setting `data-theme="dark"` or
114
+ `data-theme="light"` on `<html>` — that attribute wins in both directions.
115
+ Components need no changes to support this: every token is read via
116
+ `var(--ui-x, fallback)` at its point of use, so it just follows whatever
117
+ `:root` resolves to. (Note: `tokens` — the `:host` stylesheet component
118
+ files import alongside their own `css` block — intentionally declares no
119
+ custom properties itself; an earlier version re-declared them there as
120
+ `--ui-x: var(--ui-x, fallback)`, which computed to the guaranteed-invalid
121
+ value instead of the inherited one, silently discarding whatever `:root`
122
+ set. Don't reintroduce that pattern.)
123
+
94
124
  The full token set is defined in [`src/tokens.ts`](./src/tokens.ts).
95
125
 
126
+ ## MCP server
127
+
128
+ `npm run mcp` (or `node dist/mcp-server.js` after `npm run build`) starts a
129
+ stdio [MCP](https://modelcontextprotocol.io) server exposing the component
130
+ catalog to AI coding assistants, with two tools:
131
+
132
+ - `list_components` — every tag + one-line description.
133
+ - `get_component_docs(tag)` — the full generated Markdown doc for one tag
134
+ (install snippet, usage example, attributes/properties, events, slots,
135
+ CSS custom properties).
136
+
137
+ It's read-only over the same `custom-elements.json`/`docs/*.md` this package
138
+ already generates via `npm run docs` — no separate data source to maintain.
139
+ A consuming project wires it up with a `.mcp.json` at its repo root:
140
+
141
+ ```json
142
+ {
143
+ "mcpServers": {
144
+ "f-ewald-components": {
145
+ "command": "node",
146
+ "args": ["/absolute/path/to/components/dist/mcp-server.js"]
147
+ }
148
+ }
149
+ }
150
+ ```
151
+
152
+ See the "MCP server" section in [`CLAUDE.md`](./CLAUDE.md) for more, and
153
+ [`docs/mcp-evaluation.md`](./docs/mcp-evaluation.md) for why this was built
154
+ now rather than earlier.
155
+
96
156
  ## Playground / development
97
157
 
98
158
  ```bash
@@ -118,6 +178,7 @@ npm run build:demo # static build of the playground, into demo-dist/
118
178
  | `npm run icons` | Regenerate `src/icons.ts` from the Heroicons package. |
119
179
  | `npm run analyze` | Regenerate `custom-elements.json` via the custom-elements-manifest analyzer. |
120
180
  | `npm run docs` | Regenerate the manifest, `docs/*.md`, and `llms.txt`. |
181
+ | `npm run mcp` | Run the MCP server (`dist/mcp-server.js`) directly, for manual testing. |
121
182
  | `npm run test` | Run the Playwright suite against the playground. |
122
183
 
123
184
  ## Contributing