@storyshelf/app 0.5.3

package/dist/ui/forms.mjs

@@ -0,0 +1,291 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { Icon } from "./icons/icon.mjs";
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+//#region src/ui/forms.tsx
+const fieldWrap = css`
+  /* field */
+  display: grid;
+  gap: var(--space-1);
+  /* Don't stretch rows when a neighbouring field is taller (hint text). */
+  align-content: start;
+  margin-bottom: var(--space-4);
+`;
+const fieldWrapInline = css`
+  /* field-inline */
+  ${fieldWrap}
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: 0;
+`;
+const fieldLabel = css`
+  /* field-label */
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: var(--text-sm);
+  & span[aria-hidden] {
+    color: var(--status-rejected);
+  }
+`;
+const fieldInput = css`
+  /* field-input */
+  width: 100%;
+  min-height: 40px;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--surface-card);
+  color: var(--text-primary);
+  font: inherit;
+  font-size: var(--text-base);
+  box-shadow: var(--shadow);
+  transition:
+    border-color var(--dur-fast) var(--ease),
+    box-shadow var(--dur-fast) var(--ease);
+  &::placeholder {
+    color: var(--text-muted);
+  }
+  &:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border));
+  }
+  &:focus {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
+  }
+  &:disabled {
+    background: var(--surface-muted);
+    color: var(--text-secondary);
+    cursor: not-allowed;
+  }
+`;
+const fieldInputError = css`
+  /* field-input-error */
+  ${fieldInput}
+  border-color: var(--status-rejected);
+  &:focus {
+    border-color: var(--status-rejected);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-rejected) 25%, transparent);
+  }
+`;
+const fieldTextarea = css`
+  /* field-textarea */
+  ${fieldInput}
+  resize: vertical;
+  min-height: 5.5rem;
+  line-height: var(--leading-normal);
+`;
+const fieldTextareaError = css`
+  /* field-textarea-error */
+  ${fieldInputError}
+  resize: vertical;
+  min-height: 5.5rem;
+  line-height: var(--leading-normal);
+`;
+const fieldHint = css`
+  /* field-hint */
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: var(--text-sm);
+`;
+const fieldError = css`
+  /* field-error */
+  display: flex;
+  gap: var(--space-1);
+  align-items: flex-start;
+  margin: 0;
+  color: var(--status-rejected-fg);
+  font-size: var(--text-sm);
+  font-weight: 600;
+`;
+const formActions = css`
+  /* form-actions */
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: center;
+  margin-top: var(--space-4);
+`;
+const formActionsEnd = css`
+  /* form-actions-end */
+  ${formActions}
+  justify-content: flex-end;
+`;
+const formActionsSplit = css`
+  /* form-actions-split */
+  ${formActions}
+  justify-content: space-between;
+`;
+/** Row of form buttons: primary action first; `align="end"` right-aligns, `"split"` spreads. */
+const FormActions = ({ align = "start", children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		class: align === "end" ? formActionsEnd : align === "split" ? formActionsSplit : formActions,
+		children
+	});
+};
+function fieldDescribedBy(name, error, hint) {
+	if (error) return `${name}-error`;
+	if (hint) return `${name}-hint`;
+}
+const FieldAssistant = ({ name, error, hint }) => {
+	if (error) return /* @__PURE__ */ jsxs("p", {
+		class: fieldError,
+		id: `${name}-error`,
+		role: "alert",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "x-circle",
+			size: "sm"
+		}), /* @__PURE__ */ jsx("span", { children: error })]
+	});
+	if (hint) return /* @__PURE__ */ jsx("p", {
+		class: fieldHint,
+		id: `${name}-hint`,
+		children: hint
+	});
+	return null;
+};
+/** Labeled text input with error and hint states. */
+const Field = ({ label, name, type = "text", value, placeholder, required, disabled, autofocus, pattern, min, max, step, layout = "stack", error, hint, autocomplete }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: layout === "inline" ? fieldWrapInline : fieldWrap,
+		children: [
+			/* @__PURE__ */ jsxs("label", {
+				class: fieldLabel,
+				for: name,
+				children: [label, required ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: " *"
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				class: error ? fieldInputError : fieldInput,
+				id: name,
+				name,
+				type,
+				value,
+				placeholder,
+				required,
+				disabled,
+				autofocus,
+				pattern,
+				min,
+				max,
+				step,
+				"aria-invalid": error ? "true" : void 0,
+				"aria-describedby": fieldDescribedBy(name, error, hint),
+				autocomplete
+			}),
+			/* @__PURE__ */ jsx(FieldAssistant, {
+				name,
+				error,
+				hint
+			})
+		]
+	});
+};
+const checkLabel = css`
+  /* check-label */
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  font-weight: 500;
+  font-size: var(--text-base);
+  cursor: pointer;
+`;
+const checkInput = css`
+  /* check-input */
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--accent);
+  flex: none;
+`;
+/** Inline checkbox row with an optional hint. */
+const CheckField = ({ label, name, value, checked, disabled, hint }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: fieldWrap,
+		children: [/* @__PURE__ */ jsxs("label", {
+			class: checkLabel,
+			for: name,
+			children: [/* @__PURE__ */ jsx("input", {
+				class: checkInput,
+				type: "checkbox",
+				id: name,
+				name,
+				value,
+				checked,
+				disabled
+			}), label]
+		}), hint ? /* @__PURE__ */ jsx("p", {
+			class: fieldHint,
+			id: `${name}-hint`,
+			children: hint
+		}) : null]
+	});
+};
+/** Labeled textarea with error and hint states. */
+const TextareaField = ({ label, name, value, placeholder, rows = 3, required, hint, error }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: fieldWrap,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				class: fieldLabel,
+				for: name,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				class: error ? fieldTextareaError : fieldTextarea,
+				id: name,
+				name,
+				placeholder,
+				rows,
+				required,
+				"aria-invalid": error ? "true" : void 0,
+				"aria-describedby": fieldDescribedBy(name, error, hint),
+				children: value
+			}),
+			/* @__PURE__ */ jsx(FieldAssistant, {
+				name,
+				error,
+				hint
+			})
+		]
+	});
+};
+/** Labeled select dropdown with an optional hint. */
+const SelectField = ({ label, name, value, options, hint, disabled, required, layout = "stack" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: layout === "inline" ? fieldWrapInline : fieldWrap,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				class: fieldLabel,
+				for: name,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("select", {
+				class: fieldInput,
+				id: name,
+				name,
+				disabled,
+				required,
+				"aria-describedby": hint ? `${name}-hint` : void 0,
+				children: options.map((opt) => /* @__PURE__ */ jsx("option", {
+					value: opt.value,
+					selected: opt.value === value,
+					children: opt.label
+				}))
+			}),
+			hint ? /* @__PURE__ */ jsx("p", {
+				class: fieldHint,
+				id: `${name}-hint`,
+				children: hint
+			}) : null
+		]
+	});
+};
+//#endregion
+export { CheckField, Field, FormActions, SelectField, TextareaField };
+
+//# sourceMappingURL=forms.mjs.map

package/dist/ui/forms.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"forms.mjs","names":[],"sources":["../../src/ui/forms.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Icon } from \"./icons/icon.tsx\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype FieldLayout = \"stack\" | \"inline\";\n\nconst fieldWrap = css`\n  /* field */\n  display: grid;\n  gap: var(--space-1);\n  /* Don't stretch rows when a neighbouring field is taller (hint text). */\n  align-content: start;\n  margin-bottom: var(--space-4);\n`;\n\nconst fieldWrapInline = css`\n  /* field-inline */\n  ${fieldWrap}\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  gap: var(--space-2);\n  margin-bottom: 0;\n`;\n\nconst fieldLabel = css`\n  /* field-label */\n  color: var(--text-primary);\n  font-weight: 600;\n  font-size: var(--text-sm);\n  & span[aria-hidden] {\n    color: var(--status-rejected);\n  }\n`;\n\nconst fieldInput = css`\n  /* field-input */\n  width: 100%;\n  min-height: 40px;\n  padding: 0.5rem 0.75rem;\n  border-radius: var(--radius);\n  border: 1px solid var(--border);\n  background: var(--surface-card);\n  color: var(--text-primary);\n  font: inherit;\n  font-size: var(--text-base);\n  box-shadow: var(--shadow);\n  transition:\n    border-color var(--dur-fast) var(--ease),\n    box-shadow var(--dur-fast) var(--ease);\n  &::placeholder {\n    color: var(--text-muted);\n  }\n  &:hover:not(:disabled) {\n    border-color: color-mix(in srgb, var(--text-secondary) 45%, var(--border));\n  }\n  &:focus {\n    outline: none;\n    border-color: var(--ring);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);\n  }\n  &:disabled {\n    background: var(--surface-muted);\n    color: var(--text-secondary);\n    cursor: not-allowed;\n  }\n`;\n\nconst fieldInputError = css`\n  /* field-input-error */\n  ${fieldInput}\n  border-color: var(--status-rejected);\n  &:focus {\n    border-color: var(--status-rejected);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-rejected) 25%, transparent);\n  }\n`;\n\nconst fieldTextarea = css`\n  /* field-textarea */\n  ${fieldInput}\n  resize: vertical;\n  min-height: 5.5rem;\n  line-height: var(--leading-normal);\n`;\n\nconst fieldTextareaError = css`\n  /* field-textarea-error */\n  ${fieldInputError}\n  resize: vertical;\n  min-height: 5.5rem;\n  line-height: var(--leading-normal);\n`;\n\nconst fieldHint = css`\n  /* field-hint */\n  margin: 0;\n  color: var(--text-secondary);\n  font-size: var(--text-sm);\n`;\n\nconst fieldError = css`\n  /* field-error */\n  display: flex;\n  gap: var(--space-1);\n  align-items: flex-start;\n  margin: 0;\n  color: var(--status-rejected-fg);\n  font-size: var(--text-sm);\n  font-weight: 600;\n`;\n\nconst formActions = css`\n  /* form-actions */\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  align-items: center;\n  margin-top: var(--space-4);\n`;\n\nconst formActionsEnd = css`\n  /* form-actions-end */\n  ${formActions}\n  justify-content: flex-end;\n`;\n\nconst formActionsSplit = css`\n  /* form-actions-split */\n  ${formActions}\n  justify-content: space-between;\n`;\n\n/** Row of form buttons: primary action first; `align=\"end\"` right-aligns, `\"split\"` spreads. */\nexport const FormActions: FC<{ align?: \"start\" | \"end\" | \"split\"; children?: unknown }> = ({\n  align = \"start\",\n  children,\n}) => {\n  const cls = align === \"end\" ? formActionsEnd : align === \"split\" ? formActionsSplit : formActions;\n  return <div class={cls}>{children}</div>;\n};\n\nfunction fieldDescribedBy(\n  name: string,\n  error: string | undefined,\n  hint: string | undefined,\n): string | undefined {\n  if (error) {\n    return `${name}-error`;\n  }\n  if (hint) {\n    return `${name}-hint`;\n  }\n  return undefined;\n}\n\n// eslint-disable-next-line promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString>\nconst FieldAssistant: FC<{ name: string; error: string | undefined; hint: string | undefined }> = ({\n  name,\n  error,\n  hint,\n}) => {\n  if (error) {\n    return (\n      <p class={fieldError} id={`${name}-error`} role=\"alert\">\n        <Icon name=\"x-circle\" size=\"sm\" />\n        <span>{error}</span>\n      </p>\n    );\n  }\n  if (hint) {\n    return (\n      <p class={fieldHint} id={`${name}-hint`}>\n        {hint}\n      </p>\n    );\n  }\n  return null;\n};\n\n/** Labeled text input with error and hint states. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Field: FC<{\n  label: string;\n  name: string;\n  type?: string;\n  value?: string;\n  placeholder?: string;\n  required?: boolean;\n  disabled?: boolean;\n  autofocus?: boolean;\n  pattern?: string;\n  min?: string;\n  max?: string;\n  step?: string;\n  layout?: FieldLayout;\n  error?: string;\n  hint?: string;\n  autocomplete?: string;\n}> = ({\n  label,\n  name,\n  type = \"text\",\n  value,\n  placeholder,\n  required,\n  disabled,\n  autofocus,\n  pattern,\n  min,\n  max,\n  step,\n  layout = \"stack\",\n  error,\n  hint,\n  autocomplete,\n}) => {\n  return (\n    <div class={layout === \"inline\" ? fieldWrapInline : fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n        {required ? <span aria-hidden=\"true\"> *</span> : null}\n      </label>\n      <input\n        class={error ? fieldInputError : fieldInput}\n        id={name}\n        name={name}\n        type={type}\n        value={value}\n        placeholder={placeholder}\n        required={required}\n        disabled={disabled}\n        autofocus={autofocus}\n        pattern={pattern}\n        min={min}\n        max={max}\n        step={step}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={fieldDescribedBy(name, error, hint)}\n        autocomplete={autocomplete}\n      />\n      <FieldAssistant name={name} error={error} hint={hint} />\n    </div>\n  );\n};\n\nconst checkLabel = css`\n  /* check-label */\n  display: flex;\n  gap: var(--space-2);\n  align-items: center;\n  font-weight: 500;\n  font-size: var(--text-base);\n  cursor: pointer;\n`;\n\nconst checkInput = css`\n  /* check-input */\n  width: 1rem;\n  height: 1rem;\n  accent-color: var(--accent);\n  flex: none;\n`;\n\n/** Inline checkbox row with an optional hint. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const CheckField: FC<{\n  label: unknown;\n  name: string;\n  value?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  hint?: string;\n}> = ({ label, name, value, checked, disabled, hint }) => {\n  return (\n    <div class={fieldWrap}>\n      <label class={checkLabel} for={name}>\n        <input\n          class={checkInput}\n          type=\"checkbox\"\n          id={name}\n          name={name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n        />\n        {label}\n      </label>\n      {hint ? (\n        <p class={fieldHint} id={`${name}-hint`}>\n          {hint}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n\n/** Labeled textarea with error and hint states. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const TextareaField: FC<{\n  label: string;\n  name: string;\n  value?: string;\n  placeholder?: string;\n  rows?: number;\n  required?: boolean;\n  hint?: string;\n  error?: string;\n}> = ({ label, name, value, placeholder, rows = 3, required, hint, error }) => {\n  return (\n    <div class={fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n      </label>\n      <textarea\n        class={error ? fieldTextareaError : fieldTextarea}\n        id={name}\n        name={name}\n        placeholder={placeholder}\n        rows={rows}\n        required={required}\n        aria-invalid={error ? \"true\" : undefined}\n        aria-describedby={fieldDescribedBy(name, error, hint)}\n      >\n        {value}\n      </textarea>\n      <FieldAssistant name={name} error={error} hint={hint} />\n    </div>\n  );\n};\n\n/** Labeled select dropdown with an optional hint. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const SelectField: FC<{\n  label: string;\n  name: string;\n  value?: string;\n  options: { value: string; label: string }[];\n  hint?: string;\n  disabled?: boolean;\n  required?: boolean;\n  layout?: FieldLayout;\n}> = ({ label, name, value, options, hint, disabled, required, layout = \"stack\" }) => {\n  return (\n    <div class={layout === \"inline\" ? fieldWrapInline : fieldWrap}>\n      <label class={fieldLabel} for={name}>\n        {label}\n      </label>\n      <select\n        class={fieldInput}\n        id={name}\n        name={name}\n        disabled={disabled}\n        required={required}\n        aria-describedby={hint ? `${name}-hint` : undefined}\n      >\n        {options.map((opt) => (\n          <option value={opt.value} selected={opt.value === value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n      {hint ? (\n        <p class={fieldHint} id={`${name}-hint`}>\n          {hint}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAQA,MAAM,YAAY,GAAG;;;;;;;;AASrB,MAAM,kBAAkB,GAAG;;IAEvB,UAAU;;;;;;AAOd,MAAM,aAAa,GAAG;;;;;;;;;AAUtB,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCtB,MAAM,kBAAkB,GAAG;;IAEvB,WAAW;;;;;;;AAQf,MAAM,gBAAgB,GAAG;;IAErB,WAAW;;;;;AAMf,MAAM,qBAAqB,GAAG;;IAE1B,gBAAgB;;;;;AAMpB,MAAM,YAAY,GAAG;;;;;;AAOrB,MAAM,aAAa,GAAG;;;;;;;;;;AAWtB,MAAM,cAAc,GAAG;;;;;;;;AASvB,MAAM,iBAAiB,GAAG;;IAEtB,YAAY;;;AAIhB,MAAM,mBAAmB,GAAG;;IAExB,YAAY;;;;AAKhB,MAAa,eAA8E,EACzF,QAAQ,SACR,eACI;CAEJ,OAAO,oBAAC,OAAD;EAAK,OADA,UAAU,QAAQ,iBAAiB,UAAU,UAAU,mBAAmB;EAC7D;CAAc,CAAA;AACzC;AAEA,SAAS,iBACP,MACA,OACA,MACoB;CACpB,IAAI,OACF,OAAO,GAAG,KAAK;CAEjB,IAAI,MACF,OAAO,GAAG,KAAK;AAGnB;AAGA,MAAM,kBAA6F,EACjG,MACA,OACA,WACI;CACJ,IAAI,OACF,OACE,qBAAC,KAAD;EAAG,OAAO;EAAY,IAAI,GAAG,KAAK;EAAS,MAAK;EAAhD,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAW,MAAK;EAAM,CAAA,GACjC,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,CAClB;;CAGP,IAAI,MACF,OACE,oBAAC,KAAD;EAAG,OAAO;EAAW,IAAI,GAAG,KAAK;EAC9B,UAAA;CACA,CAAA;CAGP,OAAO;AACT;;AAIA,MAAa,SAiBP,EACJ,OACA,MACA,OAAO,QACP,OACA,aACA,UACA,UACA,WACA,SACA,KACA,KACA,MACA,SAAS,SACT,OACA,MACA,mBACI;CACJ,OACE,qBAAC,OAAD;EAAK,OAAO,WAAW,WAAW,kBAAkB;EAApD,UAAA;GACE,qBAAC,SAAD;IAAO,OAAO;IAAY,KAAK;IAA/B,UAAA,CACG,OACA,WAAW,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAQ,CAAA,IAAI,IAC5C;;GACP,oBAAC,SAAD;IACE,OAAO,QAAQ,kBAAkB;IACjC,IAAI;IACE;IACA;IACC;IACM;IACH;IACA;IACC;IACF;IACJ;IACA;IACC;IACN,gBAAc,QAAQ,SAAS,KAAA;IAC/B,oBAAkB,iBAAiB,MAAM,OAAO,IAAI;IACtC;GACf,CAAA;GACD,oBAAC,gBAAD;IAAsB;IAAa;IAAa;GAAO,CAAA;EACpD;;AAET;AAEA,MAAM,aAAa,GAAG;;;;;;;;;AAUtB,MAAM,aAAa,GAAG;;;;;;;;AAUtB,MAAa,cAOP,EAAE,OAAO,MAAM,OAAO,SAAS,UAAU,WAAW;CACxD,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA,CACE,qBAAC,SAAD;GAAO,OAAO;GAAY,KAAK;GAA/B,UAAA,CACE,oBAAC,SAAD;IACE,OAAO;IACP,MAAK;IACL,IAAI;IACE;IACC;IACE;IACC;GACX,CAAA,GACA,KACI;EACN,CAAA,GAAA,OACC,oBAAC,KAAD;GAAG,OAAO;GAAW,IAAI,GAAG,KAAK;GAC9B,UAAA;EACA,CAAA,IACD,IACD;;AAET;;AAIA,MAAa,iBASP,EAAE,OAAO,MAAM,OAAO,aAAa,OAAO,GAAG,UAAU,MAAM,YAAY;CAC7E,OACE,qBAAC,OAAD;EAAK,OAAO;EAAZ,UAAA;GACE,oBAAC,SAAD;IAAO,OAAO;IAAY,KAAK;IAC5B,UAAA;GACI,CAAA;GACP,oBAAC,YAAD;IACE,OAAO,QAAQ,qBAAqB;IACpC,IAAI;IACE;IACO;IACP;IACI;IACV,gBAAc,QAAQ,SAAS,KAAA;IAC/B,oBAAkB,iBAAiB,MAAM,OAAO,IAAI;IAEnD,UAAA;GACO,CAAA;GACV,oBAAC,gBAAD;IAAsB;IAAa;IAAa;GAAO,CAAA;EACpD;;AAET;;AAIA,MAAa,eASP,EAAE,OAAO,MAAM,OAAO,SAAS,MAAM,UAAU,UAAU,SAAS,cAAc;CACpF,OACE,qBAAC,OAAD;EAAK,OAAO,WAAW,WAAW,kBAAkB;EAApD,UAAA;GACE,oBAAC,SAAD;IAAO,OAAO;IAAY,KAAK;IAC5B,UAAA;GACI,CAAA;GACP,oBAAC,UAAD;IACE,OAAO;IACP,IAAI;IACE;IACI;IACA;IACV,oBAAkB,OAAO,GAAG,KAAK,SAAS,KAAA;IAEzC,UAAA,QAAQ,KAAK,QACZ,oBAAC,UAAD;KAAQ,OAAO,IAAI;KAAO,UAAU,IAAI,UAAU;KAC/C,UAAA,IAAI;IACC,CAAA,CACT;GACK,CAAA;GACP,OACC,oBAAC,KAAD;IAAG,OAAO;IAAW,IAAI,GAAG,KAAK;IAC9B,UAAA;GACA,CAAA,IACD;EACD;;AAET"}

package/dist/ui/icons/icon.mjs

@@ -0,0 +1,53 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "../css.mjs";
+import { iconHref } from "./sprite.mjs";
+import { jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/icons/icon.tsx
+const iconBase = css`
+  /* icon */
+  flex: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vertical-align: -0.2em;
+`;
+const iconSizes = {
+	sm: css`
+  /* icon-sm */
+  ${iconBase}
+  width: 0.875rem;
+  height: 0.875rem;
+`,
+	md: iconBase,
+	lg: css`
+  /* icon-lg */
+  ${iconBase}
+  width: 1.5rem;
+  height: 1.5rem;
+`
+};
+/**
+* Decorative icon from the cached sprite. Pass `label` when the icon is the
+* only content of a control; otherwise it is hidden from assistive tech.
+*/
+const Icon = ({ name, size = "md", label }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		class: iconSizes[size],
+		viewBox: "0 0 24 24",
+		"aria-hidden": label ? void 0 : "true",
+		role: label ? "img" : void 0,
+		"aria-label": label,
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("use", { href: iconHref(name) })
+	});
+};
+//#endregion
+export { Icon };
+
+//# sourceMappingURL=icon.mjs.map

package/dist/ui/icons/icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.mjs","names":[],"sources":["../../../src/ui/icons/icon.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"../css.ts\";\nimport type { IconName } from \"./paths.ts\";\nimport { iconHref } from \"./sprite.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype IconSize = \"sm\" | \"md\" | \"lg\";\n\nconst iconBase = css`\n  /* icon */\n  flex: none;\n  width: 1.125rem;\n  height: 1.125rem;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 2;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  vertical-align: -0.2em;\n`;\n\nconst iconSm = css`\n  /* icon-sm */\n  ${iconBase}\n  width: 0.875rem;\n  height: 0.875rem;\n`;\n\nconst iconLg = css`\n  /* icon-lg */\n  ${iconBase}\n  width: 1.5rem;\n  height: 1.5rem;\n`;\n\nconst iconSizes: Record<IconSize, Promise<string>> = { sm: iconSm, md: iconBase, lg: iconLg };\n\n/**\n * Decorative icon from the cached sprite. Pass `label` when the icon is the\n * only content of a control; otherwise it is hidden from assistive tech.\n */\nexport const Icon: FC<{ name: IconName; size?: IconSize; label?: string }> = ({\n  name,\n  size = \"md\",\n  label,\n}) => {\n  return (\n    <svg\n      class={iconSizes[size]}\n      viewBox=\"0 0 24 24\"\n      aria-hidden={label ? undefined : \"true\"}\n      role={label ? \"img\" : undefined}\n      aria-label={label}\n      focusable=\"false\"\n    >\n      <use href={iconHref(name)} />\n    </svg>\n  );\n};\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,GAAG;;;;;;;;;;;;AA2BpB,MAAM,YAA+C;CAAE,IAAI,GAdzC;;IAEd,SAAS;;;;CAYsD,IAAI;CAAU,IAAI,GAPnE;;IAEd,SAAS;;;;AAK+E;;;;;AAM5F,MAAa,QAAiE,EAC5E,MACA,OAAO,MACP,YACI;CACJ,OACE,oBAAC,OAAD;EACE,OAAO,UAAU;EACjB,SAAQ;EACR,eAAa,QAAQ,KAAA,IAAY;EACjC,MAAM,QAAQ,QAAQ,KAAA;EACtB,cAAY;EACZ,WAAU;EAEV,UAAA,oBAAC,OAAD,EAAK,MAAM,SAAS,IAAI,EAAI,CAAA;CACzB,CAAA;AAET"}

package/dist/ui/icons/paths.mjs

@@ -0,0 +1,61 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+//#region src/ui/icons/paths.ts
+/**
+* Icon set: inner SVG markup per icon on a 24x24 grid, stroke-based
+* (Lucide-style, ISC). Add an icon here and it is in the sprite and the
+* `IconName` union automatically.
+*/
+const ICON_PATHS = {
+	check: "<path d=\"M20 6 9 17l-5-5\"/>",
+	x: "<path d=\"M18 6 6 18M6 6l12 12\"/>",
+	plus: "<path d=\"M5 12h14M12 5v14\"/>",
+	"chevron-down": "<path d=\"m6 9 6 6 6-6\"/>",
+	"chevron-up": "<path d=\"m18 15-6-6-6 6\"/>",
+	"chevron-right": "<path d=\"m9 18 6-6-6-6\"/>",
+	"chevron-left": "<path d=\"m15 18-6-6 6-6\"/>",
+	"chevrons-left": "<path d=\"m11 17-5-5 5-5M18 17l-5-5 5-5\"/>",
+	"arrow-right": "<path d=\"M5 12h14M12 5l7 7-7 7\"/>",
+	folder: "<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/>",
+	layers: "<path d=\"m12 2 10 5-10 5L2 7zM2 17l10 5 10-5M2 12l10 5 10-5\"/>",
+	image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"/>",
+	"git-branch": "<path d=\"M6 3v12\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M18 9a9 9 0 0 1-9 9\"/>",
+	"git-commit": "<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M3 12h6M15 12h6\"/>",
+	activity: "<path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"/>",
+	tag: "<path d=\"M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z\"/><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>",
+	settings: "<path d=\"M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.3a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.8l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.3a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.3a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.8v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.3a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>",
+	users: "<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8\"/>",
+	user: "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>",
+	key: "<path d=\"m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3\"/><circle cx=\"7.5\" cy=\"15.5\" r=\"5.5\"/>",
+	bell: "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0\"/>",
+	webhook: "<path d=\"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2M9 17l3.13-5.78c.53-.97.43-2.22-.26-3.07a4 4 0 1 1 6.58-4.2c.38.6.58 1.3.57 2M6 17a4 4 0 0 1 6-3.5\"/><path d=\"M12 17h6a2 2 0 1 1 0 4\"/>",
+	code: "<path d=\"m16 18 6-6-6-6M8 6l-6 6 6 6\"/>",
+	terminal: "<path d=\"m4 17 6-6-6-6M12 19h8\"/>",
+	shield: "<path d=\"M20 13c0 5-3.5 7.5-7.7 8.9a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z\"/>",
+	search: "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>",
+	sun: "<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4\"/>",
+	moon: "<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>",
+	monitor: "<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><path d=\"M8 21h8M12 17v4\"/>",
+	menu: "<path d=\"M4 6h16M4 12h16M4 18h16\"/>",
+	"more-horizontal": "<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>",
+	"log-out": "<path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9\"/>",
+	"external-link": "<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>",
+	copy: "<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>",
+	"check-circle": "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>",
+	"x-circle": "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6M9 9l6 6\"/>",
+	"alert-triangle": "<path d=\"m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3M12 9v4M12 17h.01\"/>",
+	info: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/>",
+	clock: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/>",
+	loader: "<path d=\"M21 12a9 9 0 1 1-6.2-8.6\"/>",
+	"message-square": "<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>",
+	columns: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M12 3v18\"/>",
+	maximize: "<path d=\"M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3\"/>",
+	"zoom-in": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3M11 8v6M8 11h6\"/>",
+	book: "<path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"/>",
+	server: "<rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\"/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 6h.01M6 18h.01\"/>"
+};
+//#endregion
+export { ICON_PATHS };
+
+//# sourceMappingURL=paths.mjs.map

package/dist/ui/icons/paths.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"paths.mjs","names":[],"sources":["../../../src/ui/icons/paths.ts"],"sourcesContent":["/**\n * Icon set: inner SVG markup per icon on a 24x24 grid, stroke-based\n * (Lucide-style, ISC). Add an icon here and it is in the sprite and the\n * `IconName` union automatically.\n */\nexport const ICON_PATHS = {\n  check: '<path d=\"M20 6 9 17l-5-5\"/>',\n  x: '<path d=\"M18 6 6 18M6 6l12 12\"/>',\n  plus: '<path d=\"M5 12h14M12 5v14\"/>',\n  \"chevron-down\": '<path d=\"m6 9 6 6 6-6\"/>',\n  \"chevron-up\": '<path d=\"m18 15-6-6-6 6\"/>',\n  \"chevron-right\": '<path d=\"m9 18 6-6-6-6\"/>',\n  \"chevron-left\": '<path d=\"m15 18-6-6 6-6\"/>',\n  \"chevrons-left\": '<path d=\"m11 17-5-5 5-5M18 17l-5-5 5-5\"/>',\n  \"arrow-right\": '<path d=\"M5 12h14M12 5l7 7-7 7\"/>',\n  folder:\n    '<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/>',\n  layers: '<path d=\"m12 2 10 5-10 5L2 7zM2 17l10 5 10-5M2 12l10 5 10-5\"/>',\n  image:\n    '<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"/>',\n  \"git-branch\":\n    '<path d=\"M6 3v12\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/><path d=\"M18 9a9 9 0 0 1-9 9\"/>',\n  \"git-commit\": '<circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M3 12h6M15 12h6\"/>',\n  activity: '<path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"/>',\n  tag: '<path d=\"M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z\"/><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"/>',\n  settings:\n    '<path d=\"M12.2 2h-.4a2 2 0 0 0-2 2v.2a2 2 0 0 1-1 1.7l-.4.3a2 2 0 0 1-2 0l-.2-.1a2 2 0 0 0-2.7.7l-.2.4a2 2 0 0 0 .7 2.7l.2.1a2 2 0 0 1 1 1.7v.5a2 2 0 0 1-1 1.8l-.2.1a2 2 0 0 0-.7 2.7l.2.4a2 2 0 0 0 2.7.7l.2-.1a2 2 0 0 1 2 0l.4.3a2 2 0 0 1 1 1.7v.2a2 2 0 0 0 2 2h.4a2 2 0 0 0 2-2v-.2a2 2 0 0 1 1-1.7l.4-.3a2 2 0 0 1 2 0l.2.1a2 2 0 0 0 2.7-.7l.2-.4a2 2 0 0 0-.7-2.7l-.2-.1a2 2 0 0 1-1-1.8v-.5a2 2 0 0 1 1-1.7l.2-.1a2 2 0 0 0 .7-2.7l-.2-.4a2 2 0 0 0-2.7-.7l-.2.1a2 2 0 0 1-2 0l-.4-.3a2 2 0 0 1-1-1.7V4a2 2 0 0 0-2-2z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>',\n  users:\n    '<path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/><path d=\"M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8\"/>',\n  user: '<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>',\n  key: '<path d=\"m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3\"/><circle cx=\"7.5\" cy=\"15.5\" r=\"5.5\"/>',\n  bell: '<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0\"/>',\n  webhook:\n    '<path d=\"M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2M9 17l3.13-5.78c.53-.97.43-2.22-.26-3.07a4 4 0 1 1 6.58-4.2c.38.6.58 1.3.57 2M6 17a4 4 0 0 1 6-3.5\"/><path d=\"M12 17h6a2 2 0 1 1 0 4\"/>',\n  code: '<path d=\"m16 18 6-6-6-6M8 6l-6 6 6 6\"/>',\n  terminal: '<path d=\"m4 17 6-6-6-6M12 19h8\"/>',\n  shield:\n    '<path d=\"M20 13c0 5-3.5 7.5-7.7 8.9a1 1 0 0 1-.6 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.2-2.7a1.2 1.2 0 0 1 1.6 0C14.5 3.8 17 5 19 5a1 1 0 0 1 1 1z\"/>',\n  search: '<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>',\n  sun: '<circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4\"/>',\n  moon: '<path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\"/>',\n  monitor: '<rect width=\"20\" height=\"14\" x=\"2\" y=\"3\" rx=\"2\"/><path d=\"M8 21h8M12 17v4\"/>',\n  menu: '<path d=\"M4 6h16M4 12h16M4 18h16\"/>',\n  \"more-horizontal\":\n    '<circle cx=\"12\" cy=\"12\" r=\"1\"/><circle cx=\"19\" cy=\"12\" r=\"1\"/><circle cx=\"5\" cy=\"12\" r=\"1\"/>',\n  \"log-out\": '<path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9\"/>',\n  \"external-link\":\n    '<path d=\"M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"/>',\n  copy: '<rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\"/><path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\"/>',\n  \"check-circle\": '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m9 12 2 2 4-4\"/>',\n  \"x-circle\": '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6M9 9l6 6\"/>',\n  \"alert-triangle\":\n    '<path d=\"m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3M12 9v4M12 17h.01\"/>',\n  info: '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4M12 8h.01\"/>',\n  clock: '<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/>',\n  loader: '<path d=\"M21 12a9 9 0 1 1-6.2-8.6\"/>',\n  \"message-square\": '<path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"/>',\n  columns: '<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M12 3v18\"/>',\n  maximize:\n    '<path d=\"M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3\"/>',\n  \"zoom-in\": '<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3M11 8v6M8 11h6\"/>',\n  book: '<path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20\"/>',\n  server:\n    '<rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\"/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\"/><path d=\"M6 6h.01M6 18h.01\"/>',\n} as const;\n\n/** Every icon name available in the sprite. */\nexport type IconName = keyof typeof ICON_PATHS;\n"],"mappings":";;;;;;;;;AAKA,MAAa,aAAa;CACxB,OAAO;CACP,GAAG;CACH,MAAM;CACN,gBAAgB;CAChB,cAAc;CACd,iBAAiB;CACjB,gBAAgB;CAChB,iBAAiB;CACjB,eAAe;CACf,QACE;CACF,QAAQ;CACR,OACE;CACF,cACE;CACF,cAAc;CACd,UAAU;CACV,KAAK;CACL,UACE;CACF,OACE;CACF,MAAM;CACN,KAAK;CACL,MAAM;CACN,SACE;CACF,MAAM;CACN,UAAU;CACV,QACE;CACF,QAAQ;CACR,KAAK;CACL,MAAM;CACN,SAAS;CACT,MAAM;CACN,mBACE;CACF,WAAW;CACX,iBACE;CACF,MAAM;CACN,gBAAgB;CAChB,YAAY;CACZ,kBACE;CACF,MAAM;CACN,OAAO;CACP,QAAQ;CACR,kBAAkB;CAClB,SAAS;CACT,UACE;CACF,WAAW;CACX,MAAM;CACN,QACE;AACJ"}

package/dist/ui/icons/sprite.mjs

@@ -0,0 +1,26 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { ICON_PATHS } from "./paths.mjs";
+import { createHash } from "node:crypto";
+//#region src/ui/icons/sprite.ts
+/** Assembled `<svg>` sprite of `<symbol id="i-<name>">` entries. */
+function buildSprite(paths = ICON_PATHS) {
+	return `<svg xmlns="http://www.w3.org/2000/svg">${Object.entries(paths).toSorted(([a], [b]) => a.localeCompare(b)).map(([name, body]) => `<symbol id="i-${name}" viewBox="0 0 24 24">${body}</symbol>`).join("")}</svg>`;
+}
+/** Short content digest, used in asset URLs so a changed icon set busts caches. */
+function contentHash(content) {
+	return createHash("sha256").update(content).digest("hex").slice(0, 10);
+}
+/** The icon sprite and its content-addressed URL (computed once at load). */
+const iconSprite = buildSprite();
+const iconSpriteHash = contentHash(iconSprite);
+const iconSpriteHref = `/assets/icons-${iconSpriteHash}.svg`;
+/** URL of one icon inside the cached sprite (`<use href>` target). */
+function iconHref(name) {
+	return `${iconSpriteHref}#i-${name}`;
+}
+//#endregion
+export { buildSprite, contentHash, iconHref, iconSprite, iconSpriteHash, iconSpriteHref };
+
+//# sourceMappingURL=sprite.mjs.map

package/dist/ui/icons/sprite.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sprite.mjs","names":[],"sources":["../../../src/ui/icons/sprite.ts"],"sourcesContent":["import { createHash } from \"node:crypto\";\nimport { ICON_PATHS, type IconName } from \"./paths.ts\";\n\n/** Assembled `<svg>` sprite of `<symbol id=\"i-<name>\">` entries. */\nexport function buildSprite(paths: Record<string, string> = ICON_PATHS): string {\n  const symbols = Object.entries(paths)\n    .toSorted(([a], [b]) => a.localeCompare(b))\n    .map(([name, body]) => `<symbol id=\"i-${name}\" viewBox=\"0 0 24 24\">${body}</symbol>`)\n    .join(\"\");\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\">${symbols}</svg>`;\n}\n\n/** Short content digest, used in asset URLs so a changed icon set busts caches. */\nexport function contentHash(content: string): string {\n  return createHash(\"sha256\").update(content).digest(\"hex\").slice(0, 10);\n}\n\n/** The icon sprite and its content-addressed URL (computed once at load). */\nexport const iconSprite = buildSprite();\nexport const iconSpriteHash = contentHash(iconSprite);\nexport const iconSpriteHref = `/assets/icons-${iconSpriteHash}.svg`;\n\n/** URL of one icon inside the cached sprite (`<use href>` target). */\nexport function iconHref(name: IconName): string {\n  return `${iconSpriteHref}#i-${name}`;\n}\n"],"mappings":";;;;;;;AAIA,SAAgB,YAAY,QAAgC,YAAoB;CAK9E,OAAO,2CAJS,OAAO,QAAQ,KAAK,CAAC,CAClC,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,CAC1C,KAAK,CAAC,MAAM,UAAU,iBAAiB,KAAK,wBAAwB,KAAK,UAAU,CAAC,CACpF,KAAK,EACgD,EAAE;AAC5D;;AAGA,SAAgB,YAAY,SAAyB;CACnD,OAAO,WAAW,QAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,GAAG,EAAE;AACvE;;AAGA,MAAa,aAAa,YAAY;AACtC,MAAa,iBAAiB,YAAY,UAAU;AACpD,MAAa,iBAAiB,iBAAiB,eAAe;;AAG9D,SAAgB,SAAS,MAAwB;CAC/C,OAAO,GAAG,eAAe,KAAK;AAChC"}

package/dist/ui/kbd.mjs

@@ -0,0 +1,33 @@
+import "node:path";
+import "node:url";
+import.meta.url;
+import { css } from "./css.mjs";
+import { Fragment, jsx } from "hono/jsx/jsx-runtime";
+//#region src/ui/kbd.tsx
+const kbdKey = css`
+  /* kbd */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.4rem;
+  padding: 0.05rem 0.35rem;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.3;
+`;
+/** Keyboard key chip: one key, or a sequence given as an array. */
+const Kbd = ({ keys }) => {
+	return /* @__PURE__ */ jsx(Fragment, { children: (Array.isArray(keys) ? keys : [keys]).map((key, index) => /* @__PURE__ */ jsx("kbd", {
+		class: kbdKey,
+		children: key
+	}, String(index))) });
+};
+//#endregion
+export { Kbd };
+
+//# sourceMappingURL=kbd.mjs.map

package/dist/ui/kbd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.mjs","names":[],"sources":["../../src/ui/kbd.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\nconst kbdKey = css`\n  /* kbd */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 1.4rem;\n  padding: 0.05rem 0.35rem;\n  border: 1px solid var(--border);\n  border-bottom-width: 2px;\n  border-radius: var(--radius-sm);\n  background: var(--surface-muted);\n  color: var(--text-secondary);\n  font-family: var(--font-mono);\n  font-size: var(--text-xs);\n  line-height: 1.3;\n`;\n\n/** Keyboard key chip: one key, or a sequence given as an array. */\nexport const Kbd: FC<{ keys: string | string[] }> = ({ keys }) => {\n  const list = Array.isArray(keys) ? keys : [keys];\n  return (\n    <>\n      {list.map((key, index) => (\n        <kbd key={String(index)} class={kbdKey}>\n          {key}\n        </kbd>\n      ))}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAKA,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;AAkBlB,MAAa,OAAwC,EAAE,WAAW;CAEhE,OACE,oBAAA,UAAA,EAAA,WAFW,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,EAAA,CAGrC,KAAK,KAAK,UACd,oBAAC,OAAD;EAAyB,OAAO;EAC7B,UAAA;CACE,GAFK,OAAO,KAAK,CAEjB,CACN,EACD,CAAA;AAEN"}