@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/comments/CommentComposer.js

@@ -0,0 +1,207 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { DropdownMenu } from "../overlay/DropdownMenu.js";
+import { MentionTextarea } from "./MentionTextarea.js";
+import { toneToBadgeTone } from "./comment-utils.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiArrowUp } from "../icons/components/UiArrowUp.js";
+const FACET_DOT_CLASS = {
+  neutral: "bg-muted-foreground",
+  success: "bg-green-500",
+  danger: "bg-red-500",
+  warning: "bg-yellow-500",
+  info: "bg-blue-500"
+};
+function FacetPicker({
+  facet,
+  value,
+  onChange
+}) {
+  const selected = facet.options.find((o) => o.value === value);
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      align: "left",
+      menuClassName: "min-w-[150px]",
+      trigger: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          role: "button",
+          tabIndex: 0,
+          className: cn(
+            "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors",
+            selected ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/60"
+          ),
+          children: [
+            selected ? selected.label : facet.label,
+            selected && /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "presentation",
+                className: "ml-0.5 cursor-pointer hover:text-foreground",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onChange(void 0);
+                },
+                children: "×"
+              }
+            )
+          ]
+        }
+      ),
+      children: (close) => /* @__PURE__ */ jsx("div", { className: "py-1", children: facet.options.map((option) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(option.value === value ? void 0 : option.value);
+            close();
+          },
+          className: cn(
+            "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+            option.value === value && "bg-muted font-semibold"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "inline-block size-2 rounded-full",
+                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)]
+                )
+              }
+            ),
+            option.label
+          ]
+        },
+        option.value
+      )) })
+    }
+  );
+}
+function CommentComposer({
+  config,
+  anchor,
+  collapsible = true,
+  autoFocus = false,
+  placeholder = "Add a comment…",
+  onCreate,
+  onMention
+}) {
+  const [open, setOpen] = useState(!collapsible || autoFocus);
+  const [body, setBody] = useState("");
+  const [facets, setFacets] = useState({});
+  const mentionsRef = useRef(/* @__PURE__ */ new Map());
+  const inputRef = useRef(null);
+  function reset() {
+    setBody("");
+    setFacets({});
+    mentionsRef.current.clear();
+  }
+  function setFacet(key, value) {
+    setFacets((prev) => {
+      if (value === void 0) {
+        const { [key]: _drop, ...rest } = prev;
+        return rest;
+      }
+      return { ...prev, [key]: value };
+    });
+  }
+  async function submit() {
+    const text = body.trim();
+    if (!text) return;
+    const mentions = [...mentionsRef.current.values()].filter(
+      (m) => body.toLowerCase().includes(`@${m.name.toLowerCase()}`)
+    );
+    await (onCreate == null ? void 0 : onCreate({
+      body: text,
+      anchor: anchor ?? null,
+      ...Object.keys(facets).length > 0 ? { facets } : {},
+      ...mentions.length > 0 ? { mentions } : {}
+    }));
+    for (const mention of mentions) onMention == null ? void 0 : onMention(mention, { body: text });
+    reset();
+    if (collapsible) setOpen(false);
+  }
+  if (!open && body.trim().length === 0) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(true),
+        className: "w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40",
+        children: placeholder
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "comment-compose-box",
+      className: "relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md",
+      children: [
+        /* @__PURE__ */ jsx(
+          MentionTextarea,
+          {
+            ref: inputRef,
+            value: body,
+            onChange: setBody,
+            mentionables: config.mentionables ?? [],
+            onMentionSelect: (m) => mentionsRef.current.set(m.id, m),
+            onSubmit: () => void submit(),
+            onCancel: () => {
+              reset();
+              if (collapsible) setOpen(false);
+            },
+            placeholder,
+            autoFocus: autoFocus || open,
+            "data-testid": "comment-compose-input",
+            className: "min-h-[48px] pr-10"
+          }
+        ),
+        collapsible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              reset();
+              setOpen(false);
+            },
+            "aria-label": "Close composer",
+            className: "absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-xs" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-3 bottom-2.5 flex items-center gap-1.5", children: [
+          (config.facets ?? []).map((facet) => /* @__PURE__ */ jsx(
+            FacetPicker,
+            {
+              facet,
+              value: facets[facet.key],
+              onChange: (value) => setFacet(facet.key, value)
+            },
+            facet.key
+          )),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-testid": "comment-compose-send",
+              "aria-label": "Post comment",
+              onClick: () => void submit(),
+              disabled: !body.trim(),
+              className: "ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+              children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowUp, className: "text-xs" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CommentComposer
+};
+//# sourceMappingURL=CommentComposer.js.map

package/dist/comments/CommentComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentComposer.js","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput) => void | Promise<void>;\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit() {\n    const text = body.trim();\n    if (!text) return;\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    await onCreate?.({\n      body: text,\n      anchor: anchor ?? null,\n      ...(Object.keys(facets).length > 0 ? { facets } : {}),\n      ...(mentions.length > 0 ? { mentions } : {}),\n    });\n    for (const mention of mentions) onMention?.(mention, { body: text });\n    reset();\n    if (collapsible) setOpen(false);\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        autoFocus={autoFocus || open}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-testid=\"comment-compose-send\"\n          aria-label=\"Post comment\"\n          onClick={() => void submit()}\n          disabled={!body.trim()}\n          className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n        >\n          <Icon icon={UiArrowUp} className=\"text-xs\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/comments/CommentFilterBar.cjs

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const DropdownMenu = require("../overlay/DropdownMenu.cjs");
+const Icon = require("../data/Icon.cjs");
+const commentUtils = require("./comment-utils.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
+function toggleInSet(set, value) {
+  const next = new Set(set);
+  if (next.has(value)) next.delete(value);
+  else next.add(value);
+  return next;
+}
+function StatusToggle({
+  value,
+  active,
+  config,
+  count,
+  onClick
+}) {
+  const cfg = commentUtils.resolveStatusConfig(config, value);
+  if (!cfg) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": active,
+      className: utils.cn(
+        "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors",
+        active ? "border-primary bg-primary/10 text-foreground" : "border-border bg-background text-muted-foreground hover:text-foreground"
+      ),
+      children: [
+        cfg.icon && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            ...typeof cfg.icon === "string" ? { name: cfg.icon } : { icon: cfg.icon },
+            className: "text-[10px]"
+          }
+        ),
+        cfg.label,
+        count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: count })
+      ]
+    }
+  );
+}
+function FacetFilter({
+  facet,
+  selected,
+  onChange
+}) {
+  const label = selected.size > 0 ? `${facet.label} (${selected.size})` : facet.label;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DropdownMenu.DropdownMenu,
+    {
+      label,
+      size: "sm",
+      variant: selected.size > 0 ? "secondary" : "outline",
+      menuClassName: "min-w-[170px]",
+      children: () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: facet.options.map((option) => {
+        const checked = selected.has(option.value);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(toggleInSet(selected, option.value)),
+            className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: utils.cn(
+                    "inline-flex size-3.5 items-center justify-center rounded border",
+                    checked ? "border-primary bg-primary text-primary-foreground" : "border-border"
+                  ),
+                  children: checked && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiCheck.UiCheck, className: "text-[9px]" })
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        );
+      }) })
+    }
+  );
+}
+function CommentFilterBar({
+  config,
+  filters,
+  onChange,
+  statusCounts
+}) {
+  function setStatuses(next) {
+    onChange({ ...filters, statuses: next });
+  }
+  function setFacet(key, next) {
+    onChange({ ...filters, facets: { ...filters.facets, [key]: next } });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-wrap items-center gap-1.5",
+      "data-testid": "comment-filter-bar",
+      children: [
+        config.statuses.map((status) => /* @__PURE__ */ jsxRuntime.jsx(
+          StatusToggle,
+          {
+            value: status.value,
+            active: filters.statuses.has(status.value),
+            config,
+            ...(statusCounts == null ? void 0 : statusCounts[status.value]) !== void 0 ? { count: statusCounts[status.value] } : {},
+            onClick: () => setStatuses(toggleInSet(filters.statuses, status.value))
+          },
+          status.value
+        )),
+        (config.facets ?? []).map((facet) => /* @__PURE__ */ jsxRuntime.jsx(
+          FacetFilter,
+          {
+            facet,
+            selected: filters.facets[facet.key] ?? /* @__PURE__ */ new Set(),
+            onChange: (next) => setFacet(facet.key, next)
+          },
+          facet.key
+        )),
+        commentUtils.hasActiveFilters(filters) && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange({ statuses: /* @__PURE__ */ new Set(), facets: {}, authorKind: "all" }),
+            className: "inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiClose.UiClose, className: "text-[10px]" }),
+              " Clear"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+exports.CommentFilterBar = CommentFilterBar;
+//# sourceMappingURL=CommentFilterBar.cjs.map

package/dist/comments/CommentFilterBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentFilterBar.cjs","sources":["../../src/comments/CommentFilterBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose } from \"../icons\";\nimport { hasActiveFilters, resolveStatusConfig } from \"./comment-utils\";\nimport type {\n  CommentConfig,\n  CommentFacet,\n  CommentFilters,\n} from \"./comment-types\";\n\nexport type CommentFilterBarProps = {\n  config: CommentConfig;\n  filters: CommentFilters;\n  onChange: (filters: CommentFilters) => void;\n  /** Optional per-status counts shown on the toggles. */\n  statusCounts?: Record<string, number>;\n};\n\nfunction toggleInSet(set: Set<string>, value: string): Set<string> {\n  const next = new Set(set);\n  if (next.has(value)) next.delete(value);\n  else next.add(value);\n  return next;\n}\n\nfunction StatusToggle({\n  value,\n  active,\n  config,\n  count,\n  onClick,\n}: {\n  value: string;\n  active: boolean;\n  config: CommentConfig;\n  count?: number;\n  onClick: () => void;\n}) {\n  const cfg = resolveStatusConfig(config, value);\n  if (!cfg) return null;\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={active}\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors\",\n        active\n          ? \"border-primary bg-primary/10 text-foreground\"\n          : \"border-border bg-background text-muted-foreground hover:text-foreground\",\n      )}\n    >\n      {cfg.icon && (\n        <Icon\n          {...(typeof cfg.icon === \"string\"\n            ? { name: cfg.icon }\n            : { icon: cfg.icon })}\n          className=\"text-[10px]\"\n        />\n      )}\n      {cfg.label}\n      {count !== undefined && (\n        <span className=\"text-muted-foreground\">{count}</span>\n      )}\n    </button>\n  );\n}\n\nfunction FacetFilter({\n  facet,\n  selected,\n  onChange,\n}: {\n  facet: CommentFacet;\n  selected: Set<string>;\n  onChange: (next: Set<string>) => void;\n}) {\n  const label =\n    selected.size > 0 ? `${facet.label} (${selected.size})` : facet.label;\n  return (\n    <DropdownMenu\n      label={label}\n      size=\"sm\"\n      variant={selected.size > 0 ? \"secondary\" : \"outline\"}\n      menuClassName=\"min-w-[170px]\"\n    >\n      {() => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => {\n            const checked = selected.has(option.value);\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => onChange(toggleInSet(selected, option.value))}\n                className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n              >\n                <span\n                  className={cn(\n                    \"inline-flex size-3.5 items-center justify-center rounded border\",\n                    checked\n                      ? \"border-primary bg-primary text-primary-foreground\"\n                      : \"border-border\",\n                  )}\n                >\n                  {checked && <Icon icon={UiCheck} className=\"text-[9px]\" />}\n                </span>\n                {option.label}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * Filter controls for a comment list: status toggle pills, a multi-select per\n * configured facet, and a clear action. Fully controlled via `filters` /\n * `onChange`; pair with `applyCommentFilters` to filter the data.\n */\nexport function CommentFilterBar({\n  config,\n  filters,\n  onChange,\n  statusCounts,\n}: CommentFilterBarProps) {\n  function setStatuses(next: Set<string>) {\n    onChange({ ...filters, statuses: next });\n  }\n  function setFacet(key: string, next: Set<string>) {\n    onChange({ ...filters, facets: { ...filters.facets, [key]: next } });\n  }\n\n  return (\n    <div\n      className=\"flex flex-wrap items-center gap-1.5\"\n      data-testid=\"comment-filter-bar\"\n    >\n      {config.statuses.map((status) => (\n        <StatusToggle\n          key={status.value}\n          value={status.value}\n          active={filters.statuses.has(status.value)}\n          config={config}\n          {...(statusCounts?.[status.value] !== undefined\n            ? { count: statusCounts[status.value] }\n            : {})}\n          onClick={() =>\n            setStatuses(toggleInSet(filters.statuses, status.value))\n          }\n        />\n      ))}\n      {(config.facets ?? []).map((facet) => (\n        <FacetFilter\n          key={facet.key}\n          facet={facet}\n          selected={filters.facets[facet.key] ?? new Set()}\n          onChange={(next) => setFacet(facet.key, next)}\n        />\n      ))}\n      {hasActiveFilters(filters) && (\n        <button\n          type=\"button\"\n          onClick={() =>\n            onChange({ statuses: new Set(), facets: {}, authorKind: \"all\" })\n          }\n          className=\"inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-[10px]\" /> Clear\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":["resolveStatusConfig","jsxs","cn","jsx","Icon","DropdownMenu","UiCheck","hasActiveFilters","UiClose"],"mappings":"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"}

package/dist/comments/CommentFilterBar.d.ts

@@ -0,0 +1,15 @@
+import { CommentConfig, CommentFilters } from './comment-types';
+export type CommentFilterBarProps = {
+    config: CommentConfig;
+    filters: CommentFilters;
+    onChange: (filters: CommentFilters) => void;
+    /** Optional per-status counts shown on the toggles. */
+    statusCounts?: Record<string, number>;
+};
+/**
+ * Filter controls for a comment list: status toggle pills, a multi-select per
+ * configured facet, and a clear action. Fully controlled via `filters` /
+ * `onChange`; pair with `applyCommentFilters` to filter the data.
+ */
+export declare function CommentFilterBar({ config, filters, onChange, statusCounts, }: CommentFilterBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CommentFilterBar.d.ts.map

package/dist/comments/CommentFilterBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentFilterBar.d.ts","sourceRoot":"","sources":["../../src/comments/CommentFilterBar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,aAAa,EAEb,cAAc,EACf,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAC;IAC5C,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACvC,CAAC;AAqGF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,YAAY,GACb,EAAE,qBAAqB,2CAgDvB"}

package/dist/comments/CommentFilterBar.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { DropdownMenu } from "../overlay/DropdownMenu.js";
+import { Icon } from "../data/Icon.js";
+import { hasActiveFilters, resolveStatusConfig } from "./comment-utils.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+function toggleInSet(set, value) {
+  const next = new Set(set);
+  if (next.has(value)) next.delete(value);
+  else next.add(value);
+  return next;
+}
+function StatusToggle({
+  value,
+  active,
+  config,
+  count,
+  onClick
+}) {
+  const cfg = resolveStatusConfig(config, value);
+  if (!cfg) return null;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-pressed": active,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors",
+        active ? "border-primary bg-primary/10 text-foreground" : "border-border bg-background text-muted-foreground hover:text-foreground"
+      ),
+      children: [
+        cfg.icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            ...typeof cfg.icon === "string" ? { name: cfg.icon } : { icon: cfg.icon },
+            className: "text-[10px]"
+          }
+        ),
+        cfg.label,
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: count })
+      ]
+    }
+  );
+}
+function FacetFilter({
+  facet,
+  selected,
+  onChange
+}) {
+  const label = selected.size > 0 ? `${facet.label} (${selected.size})` : facet.label;
+  return /* @__PURE__ */ jsx(
+    DropdownMenu,
+    {
+      label,
+      size: "sm",
+      variant: selected.size > 0 ? "secondary" : "outline",
+      menuClassName: "min-w-[170px]",
+      children: () => /* @__PURE__ */ jsx("div", { className: "py-1", children: facet.options.map((option) => {
+        const checked = selected.has(option.value);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(toggleInSet(selected, option.value)),
+            className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground",
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex size-3.5 items-center justify-center rounded border",
+                    checked ? "border-primary bg-primary text-primary-foreground" : "border-border"
+                  ),
+                  children: checked && /* @__PURE__ */ jsx(Icon, { icon: UiCheck, className: "text-[9px]" })
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        );
+      }) })
+    }
+  );
+}
+function CommentFilterBar({
+  config,
+  filters,
+  onChange,
+  statusCounts
+}) {
+  function setStatuses(next) {
+    onChange({ ...filters, statuses: next });
+  }
+  function setFacet(key, next) {
+    onChange({ ...filters, facets: { ...filters.facets, [key]: next } });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-wrap items-center gap-1.5",
+      "data-testid": "comment-filter-bar",
+      children: [
+        config.statuses.map((status) => /* @__PURE__ */ jsx(
+          StatusToggle,
+          {
+            value: status.value,
+            active: filters.statuses.has(status.value),
+            config,
+            ...(statusCounts == null ? void 0 : statusCounts[status.value]) !== void 0 ? { count: statusCounts[status.value] } : {},
+            onClick: () => setStatuses(toggleInSet(filters.statuses, status.value))
+          },
+          status.value
+        )),
+        (config.facets ?? []).map((facet) => /* @__PURE__ */ jsx(
+          FacetFilter,
+          {
+            facet,
+            selected: filters.facets[facet.key] ?? /* @__PURE__ */ new Set(),
+            onChange: (next) => setFacet(facet.key, next)
+          },
+          facet.key
+        )),
+        hasActiveFilters(filters) && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange({ statuses: /* @__PURE__ */ new Set(), facets: {}, authorKind: "all" }),
+            className: "inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: UiClose, className: "text-[10px]" }),
+              " Clear"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CommentFilterBar
+};
+//# sourceMappingURL=CommentFilterBar.js.map

package/dist/comments/CommentFilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentFilterBar.js","sources":["../../src/comments/CommentFilterBar.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose } from \"../icons\";\nimport { hasActiveFilters, resolveStatusConfig } from \"./comment-utils\";\nimport type {\n  CommentConfig,\n  CommentFacet,\n  CommentFilters,\n} from \"./comment-types\";\n\nexport type CommentFilterBarProps = {\n  config: CommentConfig;\n  filters: CommentFilters;\n  onChange: (filters: CommentFilters) => void;\n  /** Optional per-status counts shown on the toggles. */\n  statusCounts?: Record<string, number>;\n};\n\nfunction toggleInSet(set: Set<string>, value: string): Set<string> {\n  const next = new Set(set);\n  if (next.has(value)) next.delete(value);\n  else next.add(value);\n  return next;\n}\n\nfunction StatusToggle({\n  value,\n  active,\n  config,\n  count,\n  onClick,\n}: {\n  value: string;\n  active: boolean;\n  config: CommentConfig;\n  count?: number;\n  onClick: () => void;\n}) {\n  const cfg = resolveStatusConfig(config, value);\n  if (!cfg) return null;\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={active}\n      className={cn(\n        \"inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors\",\n        active\n          ? \"border-primary bg-primary/10 text-foreground\"\n          : \"border-border bg-background text-muted-foreground hover:text-foreground\",\n      )}\n    >\n      {cfg.icon && (\n        <Icon\n          {...(typeof cfg.icon === \"string\"\n            ? { name: cfg.icon }\n            : { icon: cfg.icon })}\n          className=\"text-[10px]\"\n        />\n      )}\n      {cfg.label}\n      {count !== undefined && (\n        <span className=\"text-muted-foreground\">{count}</span>\n      )}\n    </button>\n  );\n}\n\nfunction FacetFilter({\n  facet,\n  selected,\n  onChange,\n}: {\n  facet: CommentFacet;\n  selected: Set<string>;\n  onChange: (next: Set<string>) => void;\n}) {\n  const label =\n    selected.size > 0 ? `${facet.label} (${selected.size})` : facet.label;\n  return (\n    <DropdownMenu\n      label={label}\n      size=\"sm\"\n      variant={selected.size > 0 ? \"secondary\" : \"outline\"}\n      menuClassName=\"min-w-[170px]\"\n    >\n      {() => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => {\n            const checked = selected.has(option.value);\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                onClick={() => onChange(toggleInSet(selected, option.value))}\n                className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\"\n              >\n                <span\n                  className={cn(\n                    \"inline-flex size-3.5 items-center justify-center rounded border\",\n                    checked\n                      ? \"border-primary bg-primary text-primary-foreground\"\n                      : \"border-border\",\n                  )}\n                >\n                  {checked && <Icon icon={UiCheck} className=\"text-[9px]\" />}\n                </span>\n                {option.label}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * Filter controls for a comment list: status toggle pills, a multi-select per\n * configured facet, and a clear action. Fully controlled via `filters` /\n * `onChange`; pair with `applyCommentFilters` to filter the data.\n */\nexport function CommentFilterBar({\n  config,\n  filters,\n  onChange,\n  statusCounts,\n}: CommentFilterBarProps) {\n  function setStatuses(next: Set<string>) {\n    onChange({ ...filters, statuses: next });\n  }\n  function setFacet(key: string, next: Set<string>) {\n    onChange({ ...filters, facets: { ...filters.facets, [key]: next } });\n  }\n\n  return (\n    <div\n      className=\"flex flex-wrap items-center gap-1.5\"\n      data-testid=\"comment-filter-bar\"\n    >\n      {config.statuses.map((status) => (\n        <StatusToggle\n          key={status.value}\n          value={status.value}\n          active={filters.statuses.has(status.value)}\n          config={config}\n          {...(statusCounts?.[status.value] !== undefined\n            ? { count: statusCounts[status.value] }\n            : {})}\n          onClick={() =>\n            setStatuses(toggleInSet(filters.statuses, status.value))\n          }\n        />\n      ))}\n      {(config.facets ?? []).map((facet) => (\n        <FacetFilter\n          key={facet.key}\n          facet={facet}\n          selected={filters.facets[facet.key] ?? new Set()}\n          onChange={(next) => setFacet(facet.key, next)}\n        />\n      ))}\n      {hasActiveFilters(filters) && (\n        <button\n          type=\"button\"\n          onClick={() =>\n            onChange({ statuses: new Set(), facets: {}, authorKind: \"all\" })\n          }\n          className=\"inline-flex items-center gap-1 rounded-full px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-[10px]\" /> Clear\n        </button>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}