@f-ewald/components 0.5.0 → 0.7.0

package/llms.txt

@@ -104,6 +104,30 @@ Example:
 </script>
 ```
 
+## <chat-message>
+
+One conversation entry in a chat-style activity feed. Tool calls and
+"thinking" traces are variants of this component rather than separate
+ones — they share the same header, collapse behavior, and body card as a
+normal message, just dimmed and collapsible with an always-visible summary.
+
+Import: `import "@f-ewald/components/chat-message.js";`
+
+Properties: `role` (attribute `role`) : ChatMessageRole, default "agent"; `variant` (attribute `variant`) : ChatMessageVariant, default "normal"; `author` (attribute `author`) : string, default ""; `timestamp` (attribute `timestamp`) : string | null, default null; `summary` (attribute `summary`) : string, default ""; `collapsible` (attribute `collapsible`) : boolean, default false; `collapsed` (attribute `collapsed`) : boolean, default false
+Events: `toggle`
+CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size`, `--ui-primary`, `--ui-radius`, `--ui-surface`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<chat-message role="user" author="Freddy" timestamp="2026-07-19T12:00:00Z">
+  Write notes.md containing a haiku.
+</chat-message>
+<chat-message role="agent" variant="tool" collapsible collapsed summary='file_write · {"filename": "notes.md"}'>
+  directory: .
+  filename: notes.md
+</chat-message>
+```
+
 ## <confirm-dialog>
 
 Reusable confirmation dialog: overlay + centered card with a slotted body,
@@ -144,6 +168,40 @@ Example:
 <copy-link-button value="https://example.com/listing/42" label="Copy listing link"></copy-link-button>
 ```
 
+## <data-table>
+
+A generic, presentational table shell: renders a `<thead>` from `columns`
+and one `<tr>` per entry in `rows`, with each cell's content produced by
+`renderCell` (default: plain property lookup on the row object). Knows
+nothing about what a "row" means — callers own the data shape entirely.
+
+Optional `rowHref` makes whole rows clickable (navigating via `location.hash`),
+without hijacking clicks on nested interactive elements (links/buttons) a
+cell's rendered content might contain.
+
+Import: `import "@f-ewald/components/data-table.js";`
+
+Properties: `columns` (JS property only) : DataTableColumn[], default []; `rows` (JS property only) : unknown[], default []; `rowKey` (JS property only) : (row: unknown, index: number) => string | number, default —; `renderCell` (JS property only) : (row: unknown, key: string) => unknown, default —; `rowHref` (JS property only) : ((row: unknown) => string | null) | null, default null
+Events: none
+CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<data-table></data-table>
+<script type="module">
+  const table = document.querySelector("data-table");
+  table.columns = [
+    { key: "title", label: "Title" },
+    { key: "state", label: "State" },
+  ];
+  table.rows = [
+    { id: "tsk_1", title: "Write onboarding docs", state: "Backlog" },
+    { id: "tsk_2", title: "Fix the login bug", state: "Done" },
+  ];
+  table.rowHref = (row) => `#/tasks/${row.id}`;
+</script>
+```
+
 ## <distance-value>
 
 Inline distance display. Renders miles/feet or km/m, switching units at
@@ -188,6 +246,191 @@ Example:
 </script>
 ```
 
+## <dropdown-button>
+
+A primary-styled button with a label and chevron that opens an anchored
+menu of actions — essentially `form-select` minus "current value"
+semantics: a menu, not a select. Use for a set of mutually exclusive
+next-step actions (e.g. a failed task's Retry / Close / Backlog).
+
+Import: `import "@f-ewald/components/dropdown-button.js";`
+
+Properties: `label` (attribute `label`) : string, default ""; `options` (JS property only) : DropdownOption[], default []; `disabled` (attribute `disabled`) : boolean, default false
+Events: `select`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-primary-hover`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`
+
+Example:
+```html
+<dropdown-button label="Resolve…"></dropdown-button>
+<script type="module">
+  const dropdown = document.querySelector("dropdown-button");
+  dropdown.options = [
+    { value: "retry", label: "Retry" },
+    { value: "close", label: "Close" },
+    { value: "backlog", label: "Backlog" },
+  ];
+  dropdown.addEventListener("select", (e) => console.log(e.detail.value));
+</script>
+```
+
+## <editable-text>
+
+Jira/GitHub-style click-to-edit text: a display span that turns into an
+`<input>` (or auto-growing `<textarea>` when `multiline`) on click. The
+input/textarea inherits the host's font, so a title wrapped in an `<h1>`
+edits at title size.
+
+Import: `import "@f-ewald/components/editable-text.js";`
+
+Properties: `value` (attribute `value`) : string, default ""; `multiline` (attribute `multiline`) : boolean, default false; `placeholder` (attribute `placeholder`) : string, default ""; `readonly` (attribute `readonly`) : boolean, default false; `label` (attribute `label`) : string, default ""
+Events: `change`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text-muted`
+
+Example:
+```html
+<editable-text value="Write the quarterly report" label="Title"></editable-text>
+<editable-text multiline placeholder="Add a description…" label="Description"></editable-text>
+```
+
+## <form-select>
+
+A styled dropdown select: a trigger button showing the current option's
+label, opening a listbox popover on click. Drop-in generic replacement for
+a native `<select>` wherever consistent cross-browser styling and a
+`change` event carrying `{ value }` are wanted (e.g. a task's status
+picker).
+
+The trigger fills its host's width (`justify-content: space-between`
+pushes the chevron to the far edge), but the host itself stays
+`display: inline-block` — so usages that never size the host (a filter
+bar, a status picker) keep shrink-to-fit auto-width unchanged. To make an
+instance full-width, size the host itself: `form-select { width: 100%; }`.
+
+Import: `import "@f-ewald/components/form-select.js";`
+
+Properties: `options` (JS property only) : SelectOption[], default []; `value` (attribute `value`) : string, default ""; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
+Events: `change`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-primary`, `--ui-radius-sm`, `--ui-shadow`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<form-select label="Task state"></form-select>
+<script type="module">
+  const select = document.querySelector("form-select");
+  select.options = [
+    { value: "open", label: "Open" },
+    { value: "in_progress", label: "In progress" },
+    { value: "done", label: "Done" },
+  ];
+  select.value = "open";
+  select.addEventListener("change", (e) => console.log(e.detail.value));
+</script>
+```
+
+## <frame-box>
+
+A titled frame around a slot: a gray border with a small uppercase,
+muted label overlapping the top edge (fieldset/legend-style). Generic —
+the label text is entirely up to the consumer (e.g. "Debug" to visually
+fence off dev-only chrome from the product UI).
+
+Import: `import "@f-ewald/components/frame-box.js";`
+
+Properties: `label` (attribute `label`) : string, default ""
+Events: none
+CSS custom properties: `--ui-border`, `--ui-radius-sm`, `--ui-surface`, `--ui-text-muted`
+
+Example:
+```html
+<frame-box label="Debug">
+  Framed content goes here.
+</frame-box>
+```
+
+## <gallery-item>
+
+Declarative image metadata consumed by a parent `photo-gallery`.
+
+Import: `import "@f-ewald/components/gallery-item.js";`
+
+Properties: `src` (attribute `src`) : string, default ""; `alt` (attribute `alt`) : string, default ""; `caption` (attribute `caption`) : string | undefined, default —; `variants` (JS property only) : GalleryItemVariant[], default —
+Events: none
+CSS custom properties: none
+
+Example:
+```html
+<gallery-item
+  src="/photos/coast.jpg"
+  alt="Rocky California coastline"
+  caption="California coast"
+>
+  <gallery-item-variant
+    media="(max-width: 640px)"
+    srcset="/photos/coast-portrait.jpg"
+  ></gallery-item-variant>
+</gallery-item>
+```
+
+## <gallery-item-variant>
+
+Responsive image source metadata for a parent `gallery-item`.
+
+Import: `import "@f-ewald/components/gallery-item-variant.js";`
+
+Properties: `media` (attribute `media`) : string | undefined, default —; `srcset` (attribute `srcset`) : string, default ""
+Events: none
+CSS custom properties: none
+
+Example:
+```html
+<gallery-item-variant
+  media="(max-width: 640px)"
+  srcset="/photos/coast-portrait.jpg"
+></gallery-item-variant>
+```
+
+## <icon-button>
+
+A borderless button wrapping a passed-in icon, with a rounded
+hover-highlight background. Use for a low-emphasis affordance next to
+content it acts on (e.g. an "Edit" pencil at the end of a table row)
+where a bordered `ui-button` would be too heavy.
+
+Import: `import "@f-ewald/components/icon-button.js";`
+
+Properties: `icon` (JS property only) : TemplateResult | null, default null; `label` (attribute `label`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
+Events: `click`
+CSS custom properties: `--ui-focus-ring`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<icon-button label="Edit"></icon-button>
+<script type="module">
+  import { iconPencil } from "@f-ewald/components/icons.js";
+  const btn = document.querySelector("icon-button");
+  btn.icon = iconPencil(16);
+  btn.addEventListener("click", () => console.log("edit clicked"));
+</script>
+```
+
+## <live-timer>
+
+Per-second ticking count-up timer, e.g. a live "running for 12s" or
+"Sleeping for 3 seconds" indicator. Renders nothing while `since` is unset
+or unparseable.
+
+Import: `import "@f-ewald/components/live-timer.js";`
+
+Properties: `since` (attribute `since`) : string | null, default null; `format` (attribute `format`) : DurationFormat, default "seconds"; `prefix` (attribute `prefix`) : string, default ""; `suffix` (attribute `suffix`) : string, default ""
+Events: none
+CSS custom properties: none
+
+Example:
+```html
+<live-timer since="2026-07-19T12:00:00Z" prefix="Sleeping for "></live-timer>
+<live-timer since="2026-07-19T12:00:00Z" format="compact" prefix="running for "></live-timer>
+```
+
 ## <map-circle>
 
 A plain circular map marker: a light-to-dark gradient fill with a white
@@ -273,6 +516,72 @@ Example:
 </script>
 ```
 
+## <photo-gallery>
+
+Responsive, accessible image carousel composed from declarative
+`gallery-item` children.
+
+Import: `import "@f-ewald/components/photo-gallery.js";`
+
+Properties: `currentIndex` (attribute `current-index`) : number, default 0; `delay` (attribute `delay`) : number, default 0; `showControls` (attribute `show-controls`) : boolean, default true; `showCounter` (attribute `show-counter`) : boolean, default false; `showIndicators` (attribute `show-indicators`) : boolean, default false; `showAutoplayControl` (attribute `show-autoplay-control`) : boolean, default true; `paused` (attribute `paused`) : boolean, default false; `aspectRatio` (attribute `aspect-ratio`) : string, default "16 / 9"; `objectFit` (attribute `object-fit`) : PhotoGalleryObjectFit, default "cover"
+Events: `slide-change`
+CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-overlay`, `--ui-primary`, `--ui-radius`, `--ui-radius-sm`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<photo-gallery delay="5000" show-counter show-indicators>
+  <gallery-item
+    src="/photos/coast.jpg"
+    alt="Rocky California coastline"
+    caption="California coast"
+  >
+    <gallery-item-variant
+      media="(max-width: 640px)"
+      srcset="/photos/coast-portrait.jpg"
+    ></gallery-item-variant>
+  </gallery-item>
+  <gallery-item src="/photos/bridge.jpg" alt="Golden Gate Bridge"></gallery-item>
+</photo-gallery>
+<script type="module">
+  document.querySelector("photo-gallery").addEventListener("slide-change", (event) => {
+    console.log(event.detail.currentIndex);
+  });
+</script>
+```
+
+## <popover-panel>
+
+Generic anchored popover shell: a floating card positioned relative to its
+nearest `position: relative` ancestor (place it next to its trigger button
+inside such a wrapper), as opposed to `slide-panel`'s fixed screen-edge
+drawer. Closes on outside click or Escape. Header chrome and close button
+match `slide-panel`'s API (`heading`, `panel-close`) so either can be
+swapped in for the other with no consumer-side changes beyond the wrapper.
+
+Set `centered` to render as a screen-centered modal with a translucent
+backdrop instead of the default anchored placement.
+
+Import: `import "@f-ewald/components/popover-panel.js";`
+
+Properties: `open` (attribute `open`) : boolean, default false; `heading` (attribute `heading`) : string, default ""; `centered` (attribute `centered`) : boolean, default false
+Events: `panel-close`
+CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size`, `--ui-radius`, `--ui-radius-sm`, `--ui-shadow-lg`, `--ui-surface`, `--ui-surface-muted`, `--ui-text`, `--ui-text-muted`
+
+Example:
+```html
+<div style="position: relative; display: inline-block;">
+  <button id="new-task-btn">New task</button>
+  <popover-panel heading="New task">
+    Popover body content goes here.
+  </popover-panel>
+</div>
+<script type="module">
+  const popover = document.querySelector("popover-panel");
+  document.querySelector("#new-task-btn").addEventListener("click", () => (popover.open = true));
+  popover.addEventListener("panel-close", () => (popover.open = false));
+</script>
+```
+
 ## <price-history-chart>
 
 D3-powered SVG line chart for property price history.
@@ -447,6 +756,53 @@ Example:
 <stat-meter label="GPU" percent="88" color="#dc2626"></stat-meter>
 ```
 
+## <status-pill>
+
+Small colored status pill, optionally with a spinning icon — for task/run
+states ("Open", "Blocked", "Done") and live-activity indicators ("Running").
+
+Import: `import "@f-ewald/components/status-pill.js";`
+
+Properties: `label` (attribute `label`) : string, default ""; `color` (attribute `color`) : StatusPillColor, default "neutral"; `spinner` (attribute `spinner`) : boolean, default false
+Events: none
+CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-primary`, `--ui-success`, `--ui-text-muted`
+
+Example:
+```html
+<status-pill label="Running" color="primary" spinner></status-pill>
+<status-pill label="Blocked" color="danger"></status-pill>
+```
+
+## <tile-grid>
+
+A generic, presentational grid shell: renders one bordered card per entry
+in `items`, with each tile's content produced by `renderTile` (default:
+stringify). Knows nothing about what an "item" means — callers own the
+data shape entirely. Modeled directly on `data-table`'s headless pattern.
+
+Optional `itemHref` makes whole tiles clickable (navigating via
+`location.hash`), without hijacking clicks on nested interactive elements
+(links/buttons) a tile's rendered content might contain.
+
+Import: `import "@f-ewald/components/tile-grid.js";`
+
+Properties: `items` (JS property only) : unknown[], default []; `itemKey` (JS property only) : (item: unknown, index: number) => string | number, default —; `renderTile` (JS property only) : (item: unknown) => unknown, default —; `itemHref` (JS property only) : ((item: unknown) => string | null) | null, default null
+Events: none
+CSS custom properties: `--ui-border`, `--ui-font`, `--ui-font-size-sm`, `--ui-radius`, `--ui-surface-muted`, `--ui-text`
+
+Example:
+```html
+<tile-grid></tile-grid>
+<script type="module">
+  const grid = document.querySelector("tile-grid");
+  grid.items = [
+    { name: "notes.txt" },
+    { name: "photo.jpg" },
+  ];
+  grid.renderTile = (item) => item.name;
+</script>
+```
+
 ## <toast-notification>
 
 Fixed-position stack of dismissible notifications, anchored top-right
@@ -514,7 +870,7 @@ circle.
 
 Import: `import "@f-ewald/components/user-avatar.js";`
 
-Properties: `src` (attribute `src`) : string | null, default null; `name` (attribute `name`) : string | null, default null; `size` (attribute `size`) : number, default 32
+Properties: `src` (attribute `src`) : string | null, default null; `name` (attribute `name`) : string | null, default null; `size` (attribute `size`) : string | number, default 32
 Events: none
 CSS custom properties: `--ui-font`, `--ui-primary`
 

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@f-ewald/components",
   "private": false,
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A collection of universally usable web components for various tasks.",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "bin": {
+    "f-ewald-components-mcp": "dist/mcp-server.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -31,11 +34,12 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && tsc && node scripts/generate-tokens-css.mjs",
+    "build": "rm -rf dist && tsc && node scripts/generate-tokens-css.mjs && chmod +x dist/mcp-server.js",
     "build:demo": "vite build",
     "analyze": "cem analyze --litelement --globs \"src/**/*.ts\"",
     "docs": "npm run analyze && node scripts/generate-docs.mjs",
     "icons": "node scripts/generate-icons.mjs",
+    "mcp": "node dist/mcp-server.js",
     "test": "playwright test",
     "prepublishOnly": "npm run build && npm run docs && npm run test"
   },
@@ -45,10 +49,12 @@
   "author": "Friedrich Ewald",
   "license": "BSD-3-Clause",
   "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "lit": "^3.3.3"
+    "lit": "^3.3.3",
+    "zod": "^4.4.3"
   },
   "publishConfig": {
     "access": "public"
@@ -61,6 +67,7 @@
     "@types/d3-array": "^3.2.2",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
+    "@types/node": "^26.1.1",
     "heroicons": "^2.2.0",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",