@storyshelf/app 0.5.3

package/dist/ui/feedback.mjs

@@ -0,0 +1,341 @@
+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/feedback.tsx
+const badgeBase = css`
+  /* badge */
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.1rem 0.55rem;
+  border-radius: var(--radius-pill);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  line-height: 1.5;
+  border: 1px solid var(--border);
+  background: var(--surface-muted);
+  color: var(--text-secondary);
+  white-space: nowrap;
+`;
+const badgeTones = {
+	neutral: css`
+    /* badge-neutral */
+    ${badgeBase}
+  `,
+	success: css`
+    /* badge-success */
+    ${badgeBase}
+    background: var(--status-approved-bg);
+    color: var(--status-approved-fg);
+    border-color: var(--status-approved-border);
+  `,
+	warning: css`
+    /* badge-warning */
+    ${badgeBase}
+    background: var(--status-new-bg);
+    color: var(--status-new-fg);
+    border-color: var(--status-new-border);
+  `,
+	danger: css`
+    /* badge-danger */
+    ${badgeBase}
+    background: var(--status-rejected-bg);
+    color: var(--status-rejected-fg);
+    border-color: var(--status-rejected-border);
+  `,
+	info: css`
+    /* badge-info */
+    ${badgeBase}
+    background: var(--status-info-bg);
+    color: var(--accent-fg);
+    border-color: var(--status-info-border);
+  `
+};
+/** Status glyph per tone so state never relies on color alone. */
+const toneIcons = {
+	neutral: "info",
+	success: "check-circle",
+	warning: "alert-triangle",
+	danger: "x-circle",
+	info: "info"
+};
+const alertBase = css`
+  /* alert */
+  display: flex;
+  gap: 0.6rem;
+  align-items: flex-start;
+  border-radius: var(--radius);
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--border);
+  background: var(--surface-card);
+  font-size: var(--text-base);
+`;
+const alertTones = {
+	neutral: css`
+    /* alert-neutral */
+    ${alertBase}
+  `,
+	info: css`
+    /* alert-info */
+    ${alertBase}
+    border-color: var(--status-info-border);
+    background: var(--status-info-bg);
+  `,
+	success: css`
+    /* alert-success */
+    ${alertBase}
+    border-color: var(--status-approved-border);
+    background: var(--status-approved-bg);
+  `,
+	warning: css`
+    /* alert-warning */
+    ${alertBase}
+    border-color: var(--status-new-border);
+    background: var(--status-new-bg);
+  `,
+	danger: css`
+    /* alert-danger */
+    ${alertBase}
+    border-color: var(--status-rejected-border);
+    background: var(--status-rejected-bg);
+  `
+};
+const alertIconTones = {
+	neutral: css`
+    /* alert-icon-neutral */
+    margin-top: 0.1rem;
+    color: var(--text-secondary);
+  `,
+	info: css`
+    /* alert-icon-info */
+    margin-top: 0.1rem;
+    color: var(--accent-fg);
+  `,
+	success: css`
+    /* alert-icon-success */
+    margin-top: 0.1rem;
+    color: var(--status-approved);
+  `,
+	warning: css`
+    /* alert-icon-warning */
+    margin-top: 0.1rem;
+    color: var(--status-new);
+  `,
+	danger: css`
+    /* alert-icon-danger */
+    margin-top: 0.1rem;
+    color: var(--status-rejected);
+  `
+};
+const emptyWrap = css`
+  /* empty */
+  text-align: center;
+  padding: 2rem 1rem;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-card);
+`;
+const emptyTitle = css`
+  /* empty-title */
+  margin: 0 0 0.3rem;
+  font-size: 1.05rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+`;
+const emptyDesc = css`
+  /* empty-desc */
+  margin: 0 auto;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  max-width: 50ch;
+`;
+const emptyAction = css`
+  /* empty-action */
+  margin-top: 1rem;
+`;
+const statWrap = css`
+  /* stat */
+  text-align: center;
+  padding: 0.5rem;
+`;
+const statValueBase = css`
+  /* stat-value */
+  font-size: 1.35rem;
+  font-weight: 700;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+`;
+const statValueTones = {
+	neutral: css`
+    /* stat-value-neutral */
+    ${statValueBase}
+  `,
+	success: css`
+    /* stat-value-success */
+    ${statValueBase}
+    color: var(--status-approved);
+  `,
+	warning: css`
+    /* stat-value-warning */
+    ${statValueBase}
+    color: var(--status-new);
+  `
+};
+const statLabel = css`
+  /* stat-label */
+  color: var(--text-secondary);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+`;
+const metaText = css`
+  /* meta */
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+`;
+const metaMono = css`
+  /* meta-mono */
+  ${metaText}
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+`;
+const metaCode = css`
+  /* meta-code */
+  ${metaMono}
+  font-size: 0.85em;
+`;
+const metaPre = css`
+  /* meta-pre */
+  ${metaMono}
+  white-space: pre-wrap;
+  word-break: break-word;
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  overflow: auto;
+`;
+const metaDanger = css`
+  /* meta-danger */
+  ${metaText}
+  color: var(--status-rejected);
+`;
+const metaCenter = css`
+  /* meta-center */
+  ${metaText}
+  text-align: center;
+`;
+/** Small status pill with a color tone. */
+const Badge = ({ tone = "neutral", icon = false, children }) => {
+	return /* @__PURE__ */ jsxs("span", {
+		class: badgeTones[tone],
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			name: toneIcons[tone],
+			size: "sm"
+		}) : null, children]
+	});
+};
+/** Map a build or snapshot status string to its badge tone. */
+function statusTone(status) {
+	if (isSuccessStatus(status)) return "success";
+	if (isDangerStatus(status)) return "danger";
+	if (isWarningStatus(status)) return "warning";
+	if (isInfoStatus(status)) return "info";
+	return "neutral";
+}
+function isSuccessStatus(status) {
+	return status === "approved" || status === "unchanged" || status === "completed";
+}
+function isDangerStatus(status) {
+	return status === "rejected" || status === "failed";
+}
+function isWarningStatus(status) {
+	return status === "changed" || status === "new" || status === "reviewing";
+}
+function isInfoStatus(status) {
+	return status === "capturing" || status === "comparing" || status === "pending" || status === "queued" || status === "running";
+}
+/** Alert banner with an optional title. */
+const Alert = ({ tone = "info", title, children }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: alertTones[tone],
+		role: "alert",
+		children: [/* @__PURE__ */ jsx("span", {
+			class: alertIconTones[tone],
+			children: /* @__PURE__ */ jsx(Icon, { name: toneIcons[tone] })
+		}), /* @__PURE__ */ jsxs("div", { children: [title ? /* @__PURE__ */ jsx("strong", {
+			class: alertTitle,
+			children: title
+		}) : null, /* @__PURE__ */ jsx("div", { children })] })]
+	});
+};
+const alertTitle = css`
+  /* alert-title */
+  display: block;
+  margin-bottom: 0.2rem;
+  font-weight: 650;
+`;
+/** Centered empty state with an optional title and call-to-action. */ const EmptyState = ({ title, description, action }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: emptyWrap,
+		children: [
+			title ? /* @__PURE__ */ jsx("h2", {
+				class: emptyTitle,
+				children: title
+			}) : null,
+			description ? /* @__PURE__ */ jsx("p", {
+				class: emptyDesc,
+				children: description
+			}) : null,
+			action ? /* @__PURE__ */ jsx("div", {
+				class: emptyAction,
+				children: action
+			}) : null
+		]
+	});
+};
+/** Centered statistic value with a label and an optional value tone. */
+const Stat = ({ label, value, tone = "neutral" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		class: statWrap,
+		children: [/* @__PURE__ */ jsx("div", {
+			class: statValueTones[tone],
+			children: String(value)
+		}), /* @__PURE__ */ jsx("div", {
+			class: statLabel,
+			children: label
+		})]
+	});
+};
+/** Muted secondary text for metadata and descriptions (not a form hint). */
+const Meta = ({ as = "p", mono = false, tone = "neutral", center = false, children }) => {
+	const cls = as === "pre" ? metaPre : as === "code" ? metaCode : tone === "danger" ? metaDanger : center ? metaCenter : mono ? metaMono : metaText;
+	if (as === "span") return /* @__PURE__ */ jsx("span", {
+		class: cls,
+		children
+	});
+	if (as === "div") return /* @__PURE__ */ jsx("div", {
+		class: cls,
+		children
+	});
+	if (as === "code") return /* @__PURE__ */ jsx("code", {
+		class: cls,
+		children
+	});
+	if (as === "pre") return /* @__PURE__ */ jsx("pre", {
+		class: cls,
+		children
+	});
+	return /* @__PURE__ */ jsx("p", {
+		class: cls,
+		children
+	});
+};
+//#endregion
+export { Alert, Badge, EmptyState, Meta, Stat, statusTone };
+
+//# sourceMappingURL=feedback.mjs.map

package/dist/ui/feedback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.mjs","names":[],"sources":["../../src/ui/feedback.tsx"],"sourcesContent":["import type { FC } from \"hono/jsx\";\nimport { css } from \"./css.ts\";\nimport { Icon } from \"./icons/icon.tsx\";\nimport type { IconName } from \"./icons/paths.ts\";\n\n/* eslint-disable promise-function-async -- Hono JSX components return HtmlEscapedString | Promise<HtmlEscapedString> */\n\ntype BadgeTone = \"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\";\ntype StatTone = \"neutral\" | \"success\" | \"warning\";\n\nconst badgeBase = css`\n  /* badge */\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  padding: 0.1rem 0.55rem;\n  border-radius: var(--radius-pill);\n  font-size: var(--text-xs);\n  font-weight: 600;\n  line-height: 1.5;\n  border: 1px solid var(--border);\n  background: var(--surface-muted);\n  color: var(--text-secondary);\n  white-space: nowrap;\n`;\n\nconst badgeTones: Record<BadgeTone, Promise<string>> = {\n  neutral: css`\n    /* badge-neutral */\n    ${badgeBase}\n  `,\n  success: css`\n    /* badge-success */\n    ${badgeBase}\n    background: var(--status-approved-bg);\n    color: var(--status-approved-fg);\n    border-color: var(--status-approved-border);\n  `,\n  warning: css`\n    /* badge-warning */\n    ${badgeBase}\n    background: var(--status-new-bg);\n    color: var(--status-new-fg);\n    border-color: var(--status-new-border);\n  `,\n  danger: css`\n    /* badge-danger */\n    ${badgeBase}\n    background: var(--status-rejected-bg);\n    color: var(--status-rejected-fg);\n    border-color: var(--status-rejected-border);\n  `,\n  info: css`\n    /* badge-info */\n    ${badgeBase}\n    background: var(--status-info-bg);\n    color: var(--accent-fg);\n    border-color: var(--status-info-border);\n  `,\n};\n\n/** Status glyph per tone so state never relies on color alone. */\nconst toneIcons: Record<BadgeTone, IconName> = {\n  neutral: \"info\",\n  success: \"check-circle\",\n  warning: \"alert-triangle\",\n  danger: \"x-circle\",\n  info: \"info\",\n};\n\nconst alertBase = css`\n  /* alert */\n  display: flex;\n  gap: 0.6rem;\n  align-items: flex-start;\n  border-radius: var(--radius);\n  padding: 0.75rem 0.9rem;\n  border: 1px solid var(--border);\n  background: var(--surface-card);\n  font-size: var(--text-base);\n`;\n\nconst alertTones: Record<BadgeTone, Promise<string>> = {\n  neutral: css`\n    /* alert-neutral */\n    ${alertBase}\n  `,\n  info: css`\n    /* alert-info */\n    ${alertBase}\n    border-color: var(--status-info-border);\n    background: var(--status-info-bg);\n  `,\n  success: css`\n    /* alert-success */\n    ${alertBase}\n    border-color: var(--status-approved-border);\n    background: var(--status-approved-bg);\n  `,\n  warning: css`\n    /* alert-warning */\n    ${alertBase}\n    border-color: var(--status-new-border);\n    background: var(--status-new-bg);\n  `,\n  danger: css`\n    /* alert-danger */\n    ${alertBase}\n    border-color: var(--status-rejected-border);\n    background: var(--status-rejected-bg);\n  `,\n};\n\nconst alertIconTones: Record<BadgeTone, Promise<string>> = {\n  neutral: css`\n    /* alert-icon-neutral */\n    margin-top: 0.1rem;\n    color: var(--text-secondary);\n  `,\n  info: css`\n    /* alert-icon-info */\n    margin-top: 0.1rem;\n    color: var(--accent-fg);\n  `,\n  success: css`\n    /* alert-icon-success */\n    margin-top: 0.1rem;\n    color: var(--status-approved);\n  `,\n  warning: css`\n    /* alert-icon-warning */\n    margin-top: 0.1rem;\n    color: var(--status-new);\n  `,\n  danger: css`\n    /* alert-icon-danger */\n    margin-top: 0.1rem;\n    color: var(--status-rejected);\n  `,\n};\n\nconst emptyWrap = css`\n  /* empty */\n  text-align: center;\n  padding: 2rem 1rem;\n  border: 1px dashed var(--border);\n  border-radius: var(--radius);\n  background: var(--surface-card);\n`;\n\nconst emptyTitle = css`\n  /* empty-title */\n  margin: 0 0 0.3rem;\n  font-size: 1.05rem;\n  font-weight: 650;\n  letter-spacing: -0.01em;\n`;\n\nconst emptyDesc = css`\n  /* empty-desc */\n  margin: 0 auto;\n  color: var(--text-secondary);\n  font-size: 0.875rem;\n  max-width: 50ch;\n`;\n\nconst emptyAction = css`\n  /* empty-action */\n  margin-top: 1rem;\n`;\n\nconst statWrap = css`\n  /* stat */\n  text-align: center;\n  padding: 0.5rem;\n`;\n\nconst statValueBase = css`\n  /* stat-value */\n  font-size: 1.35rem;\n  font-weight: 700;\n  line-height: 1.1;\n  font-variant-numeric: tabular-nums;\n`;\n\nconst statValueTones: Record<StatTone, Promise<string>> = {\n  neutral: css`\n    /* stat-value-neutral */\n    ${statValueBase}\n  `,\n  success: css`\n    /* stat-value-success */\n    ${statValueBase}\n    color: var(--status-approved);\n  `,\n  warning: css`\n    /* stat-value-warning */\n    ${statValueBase}\n    color: var(--status-new);\n  `,\n};\n\nconst statLabel = css`\n  /* stat-label */\n  color: var(--text-secondary);\n  font-size: 0.72rem;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n`;\n\nconst metaText = css`\n  /* meta */\n  margin: 0;\n  color: var(--text-secondary);\n  font-size: 0.82rem;\n`;\n\nconst metaMono = css`\n  /* meta-mono */\n  ${metaText}\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n`;\n\nconst metaCode = css`\n  /* meta-code */\n  ${metaMono}\n  font-size: 0.85em;\n`;\n\nconst metaPre = css`\n  /* meta-pre */\n  ${metaMono}\n  white-space: pre-wrap;\n  word-break: break-word;\n  background: var(--surface-card);\n  border: 1px solid var(--border);\n  border-radius: var(--radius-sm);\n  padding: 0.75rem;\n  font-size: 0.8rem;\n  overflow: auto;\n`;\n\nconst metaDanger = css`\n  /* meta-danger */\n  ${metaText}\n  color: var(--status-rejected);\n`;\n\nconst metaCenter = css`\n  /* meta-center */\n  ${metaText}\n  text-align: center;\n`;\n\ntype MetaAs = \"p\" | \"span\" | \"div\" | \"code\" | \"pre\";\ntype MetaTone = \"neutral\" | \"danger\";\n\n/** Small status pill with a color tone. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Badge: FC<{ tone?: BadgeTone; icon?: boolean; children?: unknown }> = ({\n  tone = \"neutral\",\n  icon = false,\n  children,\n}) => {\n  return (\n    <span class={badgeTones[tone]}>\n      {icon ? <Icon name={toneIcons[tone]} size=\"sm\" /> : null}\n      {children}\n    </span>\n  );\n};\n\n/** Map a build or snapshot status string to its badge tone. */\nexport function statusTone(status: string): BadgeTone {\n  if (isSuccessStatus(status)) {\n    return \"success\";\n  }\n  if (isDangerStatus(status)) {\n    return \"danger\";\n  }\n  if (isWarningStatus(status)) {\n    return \"warning\";\n  }\n  if (isInfoStatus(status)) {\n    return \"info\";\n  }\n  return \"neutral\";\n}\n\nfunction isSuccessStatus(status: string): boolean {\n  return status === \"approved\" || status === \"unchanged\" || status === \"completed\";\n}\n\nfunction isDangerStatus(status: string): boolean {\n  return status === \"rejected\" || status === \"failed\";\n}\n\nfunction isWarningStatus(status: string): boolean {\n  return status === \"changed\" || status === \"new\" || status === \"reviewing\";\n}\n\nfunction isInfoStatus(status: string): boolean {\n  return (\n    status === \"capturing\" ||\n    status === \"comparing\" ||\n    status === \"pending\" ||\n    status === \"queued\" ||\n    status === \"running\"\n  );\n}\n\n/** Alert banner with an optional title. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Alert: FC<{ tone?: BadgeTone; title?: string; children?: unknown }> = ({\n  tone = \"info\",\n  title,\n  children,\n}) => {\n  return (\n    <div class={alertTones[tone]} role=\"alert\">\n      <span class={alertIconTones[tone]}>\n        <Icon name={toneIcons[tone]} />\n      </span>\n      <div>\n        {title ? <strong class={alertTitle}>{title}</strong> : null}\n        <div>{children}</div>\n      </div>\n    </div>\n  );\n};\n\nconst alertTitle = css`\n  /* alert-title */\n  display: block;\n  margin-bottom: 0.2rem;\n  font-weight: 650;\n`;\n\n/** Centered empty state with an optional title and call-to-action. */ // eslint-disable-next-line promise-function-async -- JSX component return type\nexport const EmptyState: FC<{ title?: string; description?: string; action?: unknown }> = ({\n  title,\n  description,\n  action,\n}) => {\n  return (\n    <div class={emptyWrap}>\n      {title ? <h2 class={emptyTitle}>{title}</h2> : null}\n      {description ? <p class={emptyDesc}>{description}</p> : null}\n      {action ? <div class={emptyAction}>{action}</div> : null}\n    </div>\n  );\n};\n\n/** Centered statistic value with a label and an optional value tone. */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Stat: FC<{ label: string; value: string | number; tone?: StatTone }> = ({\n  label,\n  value,\n  tone = \"neutral\",\n}) => {\n  return (\n    <div class={statWrap}>\n      <div class={statValueTones[tone]}>{String(value)}</div>\n      <div class={statLabel}>{label}</div>\n    </div>\n  );\n};\n\n/** Muted secondary text for metadata and descriptions (not a form hint). */\n// eslint-disable-next-line promise-function-async -- JSX component return type\nexport const Meta: FC<{\n  as?: MetaAs;\n  mono?: boolean;\n  tone?: MetaTone;\n  center?: boolean;\n  children?: unknown;\n}> = ({ as = \"p\", mono = false, tone = \"neutral\", center = false, children }) => {\n  const cls =\n    as === \"pre\"\n      ? metaPre\n      : as === \"code\"\n        ? metaCode\n        : tone === \"danger\"\n          ? metaDanger\n          : center\n            ? metaCenter\n            : mono\n              ? metaMono\n              : metaText;\n  if (as === \"span\") {\n    return <span class={cls}>{children}</span>;\n  }\n  if (as === \"div\") {\n    return <div class={cls}>{children}</div>;\n  }\n  if (as === \"code\") {\n    return <code class={cls}>{children}</code>;\n  }\n  if (as === \"pre\") {\n    return <pre class={cls}>{children}</pre>;\n  }\n  return <p class={cls}>{children}</p>;\n};\n"],"mappings":"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"}

package/dist/ui/filter-input.mjs

@@ -0,0 +1,58 @@
+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/filter-input.tsx
+const filterWrap = css`
+  /* filter-input */
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: min(100%, 260px);
+  & svg {
+    position: absolute;
+    left: 0.65rem;
+    color: var(--text-muted);
+    pointer-events: none;
+  }
+  & input {
+    width: 100%;
+    min-height: 36px;
+    padding: 0.35rem 0.7rem 0.35rem 2rem;
+    background: var(--surface-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    font: inherit;
+    font-size: var(--text-base);
+  }
+  & input::placeholder {
+    color: var(--text-muted);
+  }
+`;
+/**
+* Client-side filter box. Matches its text against `data-filter-text` on
+* elements marked `data-filter-item` inside the nearest `[data-filter-scope]`
+* (or the whole page). Pair with a `data-filter-empty` element to show a
+* "no matches" message.
+*/
+const FilterInput = ({ label, placeholder = "Filter…" }) => {
+	return /* @__PURE__ */ jsxs("label", {
+		class: filterWrap,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "search",
+			size: "sm"
+		}), /* @__PURE__ */ jsx("input", {
+			type: "search",
+			"data-filter-input": true,
+			"aria-label": label,
+			placeholder
+		})]
+	});
+};
+//#endregion
+export { FilterInput };
+
+//# sourceMappingURL=filter-input.mjs.map

package/dist/ui/filter-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-input.mjs","names":[],"sources":["../../src/ui/filter-input.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\nconst filterWrap = css`\n  /* filter-input */\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  min-width: min(100%, 260px);\n  & svg {\n    position: absolute;\n    left: 0.65rem;\n    color: var(--text-muted);\n    pointer-events: none;\n  }\n  & input {\n    width: 100%;\n    min-height: 36px;\n    padding: 0.35rem 0.7rem 0.35rem 2rem;\n    background: var(--surface-card);\n    color: var(--text-primary);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n    font: inherit;\n    font-size: var(--text-base);\n  }\n  & input::placeholder {\n    color: var(--text-muted);\n  }\n`;\n\n/**\n * Client-side filter box. Matches its text against `data-filter-text` on\n * elements marked `data-filter-item` inside the nearest `[data-filter-scope]`\n * (or the whole page). Pair with a `data-filter-empty` element to show a\n * \"no matches\" message.\n */\nexport const FilterInput: FC<{ label: string; placeholder?: string }> = ({\n  label,\n  placeholder = \"Filter…\",\n}) => {\n  return (\n    <label class={filterWrap}>\n      <Icon name=\"search\" size=\"sm\" />\n      <input type=\"search\" data-filter-input aria-label={label} placeholder={placeholder} />\n    </label>\n  );\n};\n"],"mappings":";;;;;;;AAMA,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCtB,MAAa,eAA4D,EACvE,OACA,cAAc,gBACV;CACJ,OACE,qBAAC,SAAD;EAAO,OAAO;EAAd,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAS,MAAK;EAAM,CAAA,GAC/B,oBAAC,SAAD;GAAO,MAAK;GAAS,qBAAA;GAAkB,cAAY;GAAoB;EAAc,CAAA,CAChF;;AAEX"}