@igstack/app-catalog-frontend-core 6.10.3 → 6.12.0

package/dist/esm/modules/communityTools/ui/PinButton.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Loader2, Star } from "lucide-react";
+import { useState, useEffect } from "react";
+import { cn } from "../../../lib/utils.js";
+const BUSY_AFTER_MS = 400;
+function PinButton({
+  pinned,
+  name,
+  onToggle,
+  labelled = false,
+  small = false,
+  busy = false
+}) {
+  const [slow, setSlow] = useState(false);
+  useEffect(() => {
+    if (!busy) return;
+    const timer = setTimeout(() => setSlow(true), BUSY_AFTER_MS);
+    return () => {
+      clearTimeout(timer);
+      setSlow(false);
+    };
+  }, [busy]);
+  const showBusy = busy && slow;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": "pin-button",
+      "aria-pressed": pinned,
+      "aria-busy": showBusy || void 0,
+      "aria-label": `Pin ${name}`,
+      onClick: (e) => {
+        e.stopPropagation();
+        onToggle();
+      },
+      className: cn(
+        "relative z-10 inline-flex shrink-0 items-center justify-center rounded-[9px] transition-colors",
+        "hover:bg-accent hover:text-amber-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+        labelled ? cn(
+          "h-10 gap-[7px] rounded-[10px] border px-3.5 text-[13.5px] font-bold whitespace-nowrap",
+          pinned ? "border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300" : "border-border bg-card text-foreground"
+        ) : cn(
+          "text-muted-foreground",
+          small ? "size-8 rounded-lg focus-visible:outline-offset-0" : "size-[34px]"
+        )
+      ),
+      children: [
+        showBusy ? /* @__PURE__ */ jsx(
+          Loader2,
+          {
+            "aria-hidden": "true",
+            className: cn("animate-spin", labelled ? "size-4" : "size-[18px]")
+          }
+        ) : /* @__PURE__ */ jsx(
+          Star,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              labelled ? "size-4" : small ? "size-[15px]" : "size-[18px]",
+              pinned && "fill-amber-400 text-amber-600"
+            )
+          }
+        ),
+        labelled && (pinned ? "Pinned" : "Pin")
+      ]
+    }
+  );
+}
+export {
+  PinButton
+};
+//# sourceMappingURL=PinButton.js.map

package/dist/esm/modules/communityTools/ui/PinButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinButton.js","sources":["../../../../../src/modules/communityTools/ui/PinButton.tsx"],"sourcesContent":["import { Loader2, Star } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport { cn } from '~/lib/utils'\n\n/** A save quicker than this shows no spinner at all: the star already moved. */\nconst BUSY_AFTER_MS = 400\n\n/**\n * The star on rows, tiles and the card: pins the tool to My tools, or takes it\n * off. The card's is `labelled`, a bordered button that says Pin or Pinned;\n * a feed row's is `small`, a 32 px target in its meta line.\n */\nexport function PinButton({\n  pinned,\n  name,\n  onToggle,\n  labelled = false,\n  small = false,\n  busy = false,\n}: {\n  pinned: boolean\n  name: string\n  onToggle: () => void\n  labelled?: boolean\n  small?: boolean\n  /** The pin is being saved; the star shows the state it will have. */\n  busy?: boolean\n}) {\n  const [slow, setSlow] = useState(false)\n  useEffect(() => {\n    if (!busy) return\n    const timer = setTimeout(() => setSlow(true), BUSY_AFTER_MS)\n    return () => {\n      clearTimeout(timer)\n      setSlow(false)\n    }\n  }, [busy])\n  const showBusy = busy && slow\n\n  return (\n    <button\n      type=\"button\"\n      data-testid=\"pin-button\"\n      aria-pressed={pinned}\n      aria-busy={showBusy || undefined}\n      // One name; aria-pressed says whether it is pinned.\n      aria-label={`Pin ${name}`}\n      onClick={(e) => {\n        e.stopPropagation()\n        onToggle()\n      }}\n      className={cn(\n        'relative z-10 inline-flex shrink-0 items-center justify-center rounded-[9px] transition-colors',\n        'hover:bg-accent hover:text-amber-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n        labelled\n          ? cn(\n              'h-10 gap-[7px] rounded-[10px] border px-3.5 text-[13.5px] font-bold whitespace-nowrap',\n              pinned\n                ? 'border-amber-300 bg-amber-50 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300'\n                : 'border-border bg-card text-foreground',\n            )\n          : cn(\n              'text-muted-foreground',\n              small\n                ? 'size-8 rounded-lg focus-visible:outline-offset-0'\n                : 'size-[34px]',\n            ),\n      )}\n    >\n      {showBusy ? (\n        <Loader2\n          aria-hidden=\"true\"\n          className={cn('animate-spin', labelled ? 'size-4' : 'size-[18px]')}\n        />\n      ) : (\n        <Star\n          aria-hidden=\"true\"\n          className={cn(\n            labelled ? 'size-4' : small ? 'size-[15px]' : 'size-[18px]',\n            pinned && 'fill-amber-400 text-amber-600',\n          )}\n        />\n      )}\n      {labelled && (pinned ? 'Pinned' : 'Pin')}\n    </button>\n  )\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,gBAAgB;AAOf,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AACT,GAQG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,WAAW,MAAM,QAAQ,IAAI,GAAG,aAAa;AAC3D,WAAO,MAAM;AACX,mBAAa,KAAK;AAClB,cAAQ,KAAK;AAAA,IACf;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT,QAAM,WAAW,QAAQ;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,gBAAc;AAAA,MACd,aAAW,YAAY;AAAA,MAEvB,cAAY,OAAO,IAAI;AAAA,MACvB,SAAS,CAAC,MAAM;AACd,UAAE,gBAAA;AACF,iBAAA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,WACI;AAAA,UACE;AAAA,UACA,SACI,4GACA;AAAA,QAAA,IAEN;AAAA,UACE;AAAA,UACA,QACI,qDACA;AAAA,QAAA;AAAA,MACN;AAAA,MAGL,UAAA;AAAA,QAAA,WACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW,GAAG,gBAAgB,WAAW,WAAW,aAAa;AAAA,UAAA;AAAA,QAAA,IAGnE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT,WAAW,WAAW,QAAQ,gBAAgB;AAAA,cAC9C,UAAU;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAGH,aAAa,SAAS,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

package/dist/esm/modules/communityTools/ui/ShelfTile.d.ts

@@ -0,0 +1,13 @@
+import { CommunityTool } from '@igstack/app-catalog-shared-core';
+/**
+ * A pinned tool: screenshot first, then name and author. A click opens the
+ * site. Drag the tile, or press Alt+↑/↓ on it, to move it.
+ */
+export declare function ShelfTile({ tool, dragging, onUnpin, onMove, dragProps, }: {
+    tool: CommunityTool;
+    dragging: boolean;
+    onUnpin: () => void;
+    /** -1 moves it one place earlier, +1 one place later. */
+    onMove: (step: -1 | 1) => void;
+    dragProps: React.HTMLAttributes<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/communityTools/ui/ShelfTile.js

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ExternalLink, GripVertical } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { ToolThumb, PersonAvatar } from "./FeedRow.js";
+import { PinButton } from "./PinButton.js";
+function ShelfTile({
+  tool,
+  dragging,
+  onUnpin,
+  onMove,
+  dragProps
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "shelf-tile",
+      draggable: true,
+      ...dragProps,
+      className: cn(
+        "group relative overflow-hidden rounded-[14px] border border-border bg-card transition-[border-color,box-shadow]",
+        "hover:border-primary/40 hover:shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30",
+        dragging && "opacity-40"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: tool.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown",
+            onKeyDown: (e) => {
+              if (!e.altKey) return;
+              if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                e.preventDefault();
+                onMove(e.key === "ArrowUp" ? -1 : 1);
+              }
+            },
+            className: "block focus-visible:outline-none",
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "relative block aspect-[16/9.5] border-b border-border", children: [
+                /* @__PURE__ */ jsx(ToolThumb, { tool, size: 512, className: "size-full border-0" }),
+                /* @__PURE__ */ jsxs("span", { className: "absolute right-2.5 bottom-2.5 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: [
+                  /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-4" }),
+                  "Open site"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "block py-2.5 pr-12 pl-3", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-testid": "shelf-tile-name",
+                    className: "block truncate text-sm font-bold",
+                    children: tool.name
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { className: "mt-0.5 flex min-w-0 items-center gap-1.5 text-[12.5px] font-medium text-muted-foreground", children: [
+                  tool.owners[0] && /* @__PURE__ */ jsx(PersonAvatar, { name: tool.owners[0].name }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: tool.owners.map((o) => o.name).join(", ") })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute top-2 right-2 inline-flex size-7 cursor-grab items-center justify-center rounded-md bg-card/90 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100",
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute right-2 bottom-2", children: /* @__PURE__ */ jsx(PinButton, { pinned: true, name: tool.name, onToggle: onUnpin }) })
+      ]
+    }
+  );
+}
+export {
+  ShelfTile
+};
+//# sourceMappingURL=ShelfTile.js.map

package/dist/esm/modules/communityTools/ui/ShelfTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShelfTile.js","sources":["../../../../../src/modules/communityTools/ui/ShelfTile.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { ExternalLink, GripVertical } from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { PersonAvatar, ToolThumb } from './FeedRow'\nimport { PinButton } from './PinButton'\n\n/**\n * A pinned tool: screenshot first, then name and author. A click opens the\n * site. Drag the tile, or press Alt+↑/↓ on it, to move it.\n */\nexport function ShelfTile({\n  tool,\n  dragging,\n  onUnpin,\n  onMove,\n  dragProps,\n}: {\n  tool: CommunityTool\n  dragging: boolean\n  onUnpin: () => void\n  /** -1 moves it one place earlier, +1 one place later. */\n  onMove: (step: -1 | 1) => void\n  dragProps: React.HTMLAttributes<HTMLDivElement>\n}) {\n  return (\n    <div\n      data-testid=\"shelf-tile\"\n      draggable\n      {...dragProps}\n      className={cn(\n        'group relative overflow-hidden rounded-[14px] border border-border bg-card transition-[border-color,box-shadow]',\n        'hover:border-primary/40 hover:shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30',\n        dragging && 'opacity-40',\n      )}\n    >\n      <a\n        href={tool.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n        onKeyDown={(e) => {\n          if (!e.altKey) return\n          if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n            e.preventDefault()\n            onMove(e.key === 'ArrowUp' ? -1 : 1)\n          }\n        }}\n        className=\"block focus-visible:outline-none\"\n      >\n        <span className=\"relative block aspect-[16/9.5] border-b border-border\">\n          <ToolThumb tool={tool} size={512} className=\"size-full border-0\" />\n          <span className=\"absolute right-2.5 bottom-2.5 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100\">\n            <ExternalLink aria-hidden=\"true\" className=\"size-4\" />\n            Open site\n          </span>\n        </span>\n        <span className=\"block py-2.5 pr-12 pl-3\">\n          <span\n            data-testid=\"shelf-tile-name\"\n            className=\"block truncate text-sm font-bold\"\n          >\n            {tool.name}\n          </span>\n          <span className=\"mt-0.5 flex min-w-0 items-center gap-1.5 text-[12.5px] font-medium text-muted-foreground\">\n            {tool.owners[0] && <PersonAvatar name={tool.owners[0].name} />}\n            <span className=\"truncate\">\n              {tool.owners.map((o) => o.name).join(', ')}\n            </span>\n          </span>\n        </span>\n      </a>\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute top-2 right-2 inline-flex size-7 cursor-grab items-center justify-center rounded-md bg-card/90 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\"\n      >\n        <GripVertical className=\"size-4\" />\n      </span>\n      <div className=\"absolute right-2 bottom-2\">\n        <PinButton pinned name={tool.name} onToggle={onUnpin} />\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,KAAK;AAAA,YACX,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,qBAAkB;AAAA,YAClB,WAAW,CAAC,MAAM;AAChB,kBAAI,CAAC,EAAE,OAAQ;AACf,kBAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,kBAAE,eAAA;AACF,uBAAO,EAAE,QAAQ,YAAY,KAAK,CAAC;AAAA,cACrC;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,qBAAC,QAAA,EAAK,WAAU,yDACd,UAAA;AAAA,gBAAA,oBAAC,WAAA,EAAU,MAAY,MAAM,KAAK,WAAU,sBAAqB;AAAA,gBACjE,qBAAC,QAAA,EAAK,WAAU,iPACd,UAAA;AAAA,kBAAA,oBAAC,cAAA,EAAa,eAAY,QAAO,WAAU,UAAS;AAAA,kBAAE;AAAA,gBAAA,EAAA,CAExD;AAAA,cAAA,GACF;AAAA,cACA,qBAAC,QAAA,EAAK,WAAU,2BACd,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,WAAU;AAAA,oBAET,UAAA,KAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAER,qBAAC,QAAA,EAAK,WAAU,4FACb,UAAA;AAAA,kBAAA,KAAK,OAAO,CAAC,KAAK,oBAAC,cAAA,EAAa,MAAM,KAAK,OAAO,CAAC,EAAE,KAAA,CAAM;AAAA,kBAC5D,oBAAC,QAAA,EAAK,WAAU,YACb,eAAK,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,EAAA,CAC3C;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV,UAAA,oBAAC,cAAA,EAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnC,oBAAC,OAAA,EAAI,WAAU,6BACb,UAAA,oBAAC,WAAA,EAAU,QAAM,MAAC,MAAM,KAAK,MAAM,UAAU,SAAS,EAAA,CACxD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/modules/communityTools/ui/TagPicker.d.ts

@@ -0,0 +1,21 @@
+import { Resource } from '@igstack/app-catalog-backend-core';
+import { CommunityTag } from '@igstack/app-catalog-shared-core';
+/**
+ * App tags, picked from the catalog's own apps so they always resolve, and
+ * topic words, suggested from the tags already in use so they converge. One
+ * box offers both. Enter adds the typed text as a topic, unless it is exactly
+ * an app's name or abbreviation, or an arrow chose a suggestion.
+ */
+export declare function TagPicker({ id, apps, knownTopics, value, onChange, onTooLong, describedBy, disabled, }: {
+    id: string;
+    /** The official apps (no sub-resources). */
+    apps: Resource[];
+    /** Every topic some tool already carries. */
+    knownTopics: string[];
+    value: CommunityTag[];
+    onChange: (tags: CommunityTag[]) => void;
+    /** A typed topic over the length cap; the form says so next to the field. */
+    onTooLong: () => void;
+    describedBy?: string;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/communityTools/ui/TagPicker.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { normalizeTopic, TAG_VALUE_MAX } from "@igstack/app-catalog-shared-core";
+import { AppWindow, Hash } from "lucide-react";
+import { SuggestInput } from "./OwnerPicker.js";
+import { tagKey } from "./TagRow.js";
+const MAX_TAGS = 8;
+const MAX_SUGGESTIONS = 6;
+function TagPicker({
+  id,
+  apps,
+  knownTopics,
+  value,
+  onChange,
+  onTooLong,
+  describedBy,
+  disabled
+}) {
+  const appName = (slug) => {
+    var _a;
+    return ((_a = apps.find((a) => a.slug === slug)) == null ? void 0 : _a.displayName) ?? slug;
+  };
+  const has = (tag) => value.some((t) => tagKey(t) === tagKey(tag));
+  const add = (tag) => {
+    if (!has(tag)) onChange([...value, tag]);
+  };
+  return /* @__PURE__ */ jsx(
+    SuggestInput,
+    {
+      id,
+      chips: value.map((tag) => ({
+        key: tagKey(tag),
+        label: tag.kind === "app" ? appName(tag.value) : tag.value,
+        icon: tag.kind === "app" ? /* @__PURE__ */ jsx(AppWindow, { "aria-hidden": "true", className: "ml-1 size-3.5" }) : /* @__PURE__ */ jsx(Hash, { "aria-hidden": "true", className: "ml-1 size-3.5" })
+      })),
+      onRemove: (key) => onChange(value.filter((t) => tagKey(t) !== key)),
+      placeholder: value.length >= MAX_TAGS ? "Eight tags at most" : "An app it is for, or a topic word",
+      atLimit: value.length >= MAX_TAGS,
+      disabled,
+      describedBy,
+      textFirst: true,
+      suggest: (query) => {
+        const q = query.toLowerCase();
+        const topic = normalizeTopic(query);
+        const appOptions = apps.filter(
+          (a) => {
+            var _a;
+            return a.displayName.toLowerCase().includes(q) || ((_a = a.abbreviation) == null ? void 0 : _a.toLowerCase().includes(q));
+          }
+        ).filter((a) => !has({ kind: "app", value: a.slug })).slice(0, MAX_SUGGESTIONS).map((a) => {
+          var _a;
+          return {
+            key: `app:${a.slug}`,
+            label: a.displayName,
+            sub: a.abbreviation ? `App · ${a.abbreviation}` : "App",
+            icon: /* @__PURE__ */ jsx(AppWindow, { "aria-hidden": "true", className: "size-4" }),
+            exact: a.displayName.toLowerCase() === q || ((_a = a.abbreviation) == null ? void 0 : _a.toLowerCase()) === q
+          };
+        });
+        const topicOptions = knownTopics.filter((t) => t.includes(topic)).filter((t) => !has({ kind: "topic", value: t })).slice(0, MAX_SUGGESTIONS).map((t) => ({
+          key: `topic:${t}`,
+          label: t,
+          sub: "Topic in use",
+          icon: /* @__PURE__ */ jsx(Hash, { "aria-hidden": "true", className: "size-4" })
+        }));
+        return [...appOptions, ...topicOptions];
+      },
+      onPick: (key) => {
+        const [kind, ...rest] = key.split(":");
+        add({ kind, value: rest.join(":") });
+      },
+      onEnterText: (text) => {
+        const topic = normalizeTopic(text);
+        if (!topic) return false;
+        if (topic.length > TAG_VALUE_MAX) {
+          onTooLong();
+          return false;
+        }
+        add({ kind: "topic", value: topic });
+        return true;
+      }
+    }
+  );
+}
+export {
+  TagPicker
+};
+//# sourceMappingURL=TagPicker.js.map

package/dist/esm/modules/communityTools/ui/TagPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagPicker.js","sources":["../../../../../src/modules/communityTools/ui/TagPicker.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport type { CommunityTag } from '@igstack/app-catalog-shared-core'\nimport { TAG_VALUE_MAX, normalizeTopic } from '@igstack/app-catalog-shared-core'\nimport { AppWindow, Hash } from 'lucide-react'\nimport { SuggestInput } from './OwnerPicker'\nimport { tagKey } from './TagRow'\n\nconst MAX_TAGS = 8\nconst MAX_SUGGESTIONS = 6\n\n/**\n * App tags, picked from the catalog's own apps so they always resolve, and\n * topic words, suggested from the tags already in use so they converge. One\n * box offers both. Enter adds the typed text as a topic, unless it is exactly\n * an app's name or abbreviation, or an arrow chose a suggestion.\n */\nexport function TagPicker({\n  id,\n  apps,\n  knownTopics,\n  value,\n  onChange,\n  onTooLong,\n  describedBy,\n  disabled,\n}: {\n  id: string\n  /** The official apps (no sub-resources). */\n  apps: Resource[]\n  /** Every topic some tool already carries. */\n  knownTopics: string[]\n  value: CommunityTag[]\n  onChange: (tags: CommunityTag[]) => void\n  /** A typed topic over the length cap; the form says so next to the field. */\n  onTooLong: () => void\n  describedBy?: string\n  disabled?: boolean\n}) {\n  const appName = (slug: string) =>\n    apps.find((a) => a.slug === slug)?.displayName ?? slug\n  const has = (tag: CommunityTag) =>\n    value.some((t) => tagKey(t) === tagKey(tag))\n  const add = (tag: CommunityTag) => {\n    if (!has(tag)) onChange([...value, tag])\n  }\n\n  return (\n    <SuggestInput\n      id={id}\n      chips={value.map((tag) => ({\n        key: tagKey(tag),\n        label: tag.kind === 'app' ? appName(tag.value) : tag.value,\n        icon:\n          tag.kind === 'app' ? (\n            <AppWindow aria-hidden=\"true\" className=\"ml-1 size-3.5\" />\n          ) : (\n            <Hash aria-hidden=\"true\" className=\"ml-1 size-3.5\" />\n          ),\n      }))}\n      onRemove={(key) => onChange(value.filter((t) => tagKey(t) !== key))}\n      placeholder={\n        value.length >= MAX_TAGS\n          ? 'Eight tags at most'\n          : 'An app it is for, or a topic word'\n      }\n      atLimit={value.length >= MAX_TAGS}\n      disabled={disabled}\n      describedBy={describedBy}\n      textFirst\n      suggest={(query) => {\n        const q = query.toLowerCase()\n        const topic = normalizeTopic(query)\n        const appOptions = apps\n          .filter(\n            (a) =>\n              a.displayName.toLowerCase().includes(q) ||\n              a.abbreviation?.toLowerCase().includes(q),\n          )\n          .filter((a) => !has({ kind: 'app', value: a.slug }))\n          .slice(0, MAX_SUGGESTIONS)\n          .map((a) => ({\n            key: `app:${a.slug}`,\n            label: a.displayName,\n            sub: a.abbreviation ? `App · ${a.abbreviation}` : 'App',\n            icon: <AppWindow aria-hidden=\"true\" className=\"size-4\" />,\n            exact:\n              a.displayName.toLowerCase() === q ||\n              a.abbreviation?.toLowerCase() === q,\n          }))\n        const topicOptions = knownTopics\n          .filter((t) => t.includes(topic))\n          .filter((t) => !has({ kind: 'topic', value: t }))\n          .slice(0, MAX_SUGGESTIONS)\n          .map((t) => ({\n            key: `topic:${t}`,\n            label: t,\n            sub: 'Topic in use',\n            icon: <Hash aria-hidden=\"true\" className=\"size-4\" />,\n          }))\n        return [...appOptions, ...topicOptions]\n      }}\n      onPick={(key) => {\n        const [kind, ...rest] = key.split(':')\n        add({ kind: kind as CommunityTag['kind'], value: rest.join(':') })\n      }}\n      onEnterText={(text) => {\n        const topic = normalizeTopic(text)\n        if (!topic) return false\n        if (topic.length > TAG_VALUE_MAX) {\n          onTooLong()\n          return false\n        }\n        add({ kind: 'topic', value: topic })\n        return true\n      }}\n    />\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/communityTools/ui/TagRow.d.ts

@@ -0,0 +1,22 @@
+import { CommunityTag, CommunityTool } from '@igstack/app-catalog-shared-core';
+/** A tag as it travels in `?tag=`: `topic:sandbox`, `app:order-service`. */
+export declare function tagKey(tag: CommunityTag): string;
+/** An app tag reads as the app's name; a topic tag as its word. */
+export declare function tagLabel(tag: CommunityTag, appNames: Record<string, string>): string;
+export declare function TagChip({ label, active, count, onClick, }: {
+    label: string;
+    active?: boolean;
+    count?: number;
+    onClick: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * The most-used tags above the feed, as a way in for someone who does not know
+ * what to search for. The chosen tag stays in the row even when it is not a top
+ * one, so the filter can always be cleared where it is shown.
+ */
+export declare function TagRow({ tools, activeTag, appNames, onChoose, }: {
+    tools: CommunityTool[];
+    activeTag: string | undefined;
+    appNames: Record<string, string>;
+    onChoose: (tag: string | undefined) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/modules/communityTools/ui/TagRow.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+function tagKey(tag) {
+  return `${tag.kind}:${tag.value}`;
+}
+function tagLabel(tag, appNames) {
+  return tag.kind === "app" ? appNames[tag.value] ?? tag.value : tag.value;
+}
+const TOP_TAGS = 8;
+function TagChip({
+  label,
+  active = false,
+  count,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": "tool-tag",
+      "aria-pressed": active,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      className: cn(
+        "relative z-10 inline-flex h-6 items-center gap-1 rounded-full border px-2.5 text-xs font-semibold transition-colors",
+        "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
+        active ? "border-primary/40 bg-accent text-accent-foreground" : "border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground"
+      ),
+      children: [
+        label,
+        count !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-bold text-muted-foreground/70", children: count }),
+        active && /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3" })
+      ]
+    }
+  );
+}
+function TagRow({
+  tools,
+  activeTag,
+  appNames,
+  onChoose
+}) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const tool of tools) {
+    for (const tag of tool.tags) {
+      const key = tagKey(tag);
+      const entry = counts.get(key) ?? { tag, count: 0 };
+      entry.count += 1;
+      counts.set(key, entry);
+    }
+  }
+  const ranked = [...counts.values()].sort(
+    (a, b) => b.count - a.count || tagLabel(a.tag, appNames).localeCompare(tagLabel(b.tag, appNames))
+  );
+  const shown = ranked.slice(0, TOP_TAGS);
+  const active = activeTag ? counts.get(activeTag) : void 0;
+  if (active && !shown.includes(active)) shown.push(active);
+  if (shown.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "tag-row",
+      "aria-label": "Popular tags",
+      role: "group",
+      className: "mb-3 flex flex-wrap items-center gap-1.5",
+      children: shown.map(({ tag, count }) => {
+        const key = tagKey(tag);
+        const on = key === activeTag;
+        return /* @__PURE__ */ jsx(
+          TagChip,
+          {
+            label: tagLabel(tag, appNames),
+            count,
+            active: on,
+            onClick: () => onChoose(on ? void 0 : key)
+          },
+          key
+        );
+      })
+    }
+  );
+}
+export {
+  TagChip,
+  TagRow,
+  tagKey,
+  tagLabel
+};
+//# sourceMappingURL=TagRow.js.map

package/dist/esm/modules/communityTools/ui/TagRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagRow.js","sources":["../../../../../src/modules/communityTools/ui/TagRow.tsx"],"sourcesContent":["import type {\n  CommunityTag,\n  CommunityTool,\n} from '@igstack/app-catalog-shared-core'\nimport { X } from 'lucide-react'\nimport { cn } from '~/lib/utils'\n\n/** A tag as it travels in `?tag=`: `topic:sandbox`, `app:order-service`. */\nexport function tagKey(tag: CommunityTag): string {\n  return `${tag.kind}:${tag.value}`\n}\n\n/** An app tag reads as the app's name; a topic tag as its word. */\nexport function tagLabel(\n  tag: CommunityTag,\n  appNames: Record<string, string>,\n): string {\n  return tag.kind === 'app' ? (appNames[tag.value] ?? tag.value) : tag.value\n}\n\nconst TOP_TAGS = 8\n\nexport function TagChip({\n  label,\n  active = false,\n  count,\n  onClick,\n}: {\n  label: string\n  active?: boolean\n  count?: number\n  onClick: () => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      data-testid=\"tool-tag\"\n      aria-pressed={active}\n      onClick={(e) => {\n        e.stopPropagation()\n        onClick()\n      }}\n      className={cn(\n        'relative z-10 inline-flex h-6 items-center gap-1 rounded-full border px-2.5 text-xs font-semibold transition-colors',\n        'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring',\n        active\n          ? 'border-primary/40 bg-accent text-accent-foreground'\n          : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:text-foreground',\n      )}\n    >\n      {label}\n      {count !== undefined && (\n        <span className=\"font-bold text-muted-foreground/70\">{count}</span>\n      )}\n      {active && <X aria-hidden=\"true\" className=\"size-3\" />}\n    </button>\n  )\n}\n\n/**\n * The most-used tags above the feed, as a way in for someone who does not know\n * what to search for. The chosen tag stays in the row even when it is not a top\n * one, so the filter can always be cleared where it is shown.\n */\nexport function TagRow({\n  tools,\n  activeTag,\n  appNames,\n  onChoose,\n}: {\n  tools: CommunityTool[]\n  activeTag: string | undefined\n  appNames: Record<string, string>\n  onChoose: (tag: string | undefined) => void\n}) {\n  const counts = new Map<string, { tag: CommunityTag; count: number }>()\n  for (const tool of tools) {\n    for (const tag of tool.tags) {\n      const key = tagKey(tag)\n      const entry = counts.get(key) ?? { tag, count: 0 }\n      entry.count += 1\n      counts.set(key, entry)\n    }\n  }\n  const ranked = [...counts.values()].sort(\n    (a, b) =>\n      b.count - a.count ||\n      tagLabel(a.tag, appNames).localeCompare(tagLabel(b.tag, appNames)),\n  )\n  const shown = ranked.slice(0, TOP_TAGS)\n  const active = activeTag ? counts.get(activeTag) : undefined\n  if (active && !shown.includes(active)) shown.push(active)\n\n  if (shown.length === 0) return null\n\n  return (\n    <div\n      data-testid=\"tag-row\"\n      aria-label=\"Popular tags\"\n      role=\"group\"\n      className=\"mb-3 flex flex-wrap items-center gap-1.5\"\n    >\n      {shown.map(({ tag, count }) => {\n        const key = tagKey(tag)\n        const on = key === activeTag\n        return (\n          <TagChip\n            key={key}\n            label={tagLabel(tag, appNames)}\n            count={count}\n            active={on}\n            onClick={() => onChoose(on ? undefined : key)}\n          />\n        )\n      })}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAQO,SAAS,OAAO,KAA2B;AAChD,SAAO,GAAG,IAAI,IAAI,IAAI,IAAI,KAAK;AACjC;AAGO,SAAS,SACd,KACA,UACQ;AACR,SAAO,IAAI,SAAS,QAAS,SAAS,IAAI,KAAK,KAAK,IAAI,QAAS,IAAI;AACvE;AAEA,MAAM,WAAW;AAEV,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAKG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,gBAAc;AAAA,MACd,SAAS,CAAC,MAAM;AACd,UAAE,gBAAA;AACF,gBAAA;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,SACI,uDACA;AAAA,MAAA;AAAA,MAGL,UAAA;AAAA,QAAA;AAAA,QACA,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,sCAAsC,UAAA,OAAM;AAAA,QAE7D,UAAU,oBAAC,GAAA,EAAE,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1D;AAOO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,6BAAa,IAAA;AACnB,aAAW,QAAQ,OAAO;AACxB,eAAW,OAAO,KAAK,MAAM;AAC3B,YAAM,MAAM,OAAO,GAAG;AACtB,YAAM,QAAQ,OAAO,IAAI,GAAG,KAAK,EAAE,KAAK,OAAO,EAAA;AAC/C,YAAM,SAAS;AACf,aAAO,IAAI,KAAK,KAAK;AAAA,IACvB;AAAA,EACF;AACA,QAAM,SAAS,CAAC,GAAG,OAAO,OAAA,CAAQ,EAAE;AAAA,IAClC,CAAC,GAAG,MACF,EAAE,QAAQ,EAAE,SACZ,SAAS,EAAE,KAAK,QAAQ,EAAE,cAAc,SAAS,EAAE,KAAK,QAAQ,CAAC;AAAA,EAAA;AAErE,QAAM,QAAQ,OAAO,MAAM,GAAG,QAAQ;AACtC,QAAM,SAAS,YAAY,OAAO,IAAI,SAAS,IAAI;AACnD,MAAI,UAAU,CAAC,MAAM,SAAS,MAAM,EAAG,OAAM,KAAK,MAAM;AAExD,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAU;AAAA,MAET,gBAAM,IAAI,CAAC,EAAE,KAAK,YAAY;AAC7B,cAAM,MAAM,OAAO,GAAG;AACtB,cAAM,KAAK,QAAQ;AACnB,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,SAAS,KAAK,QAAQ;AAAA,YAC7B;AAAA,YACA,QAAQ;AAAA,YACR,SAAS,MAAM,SAAS,KAAK,SAAY,GAAG;AAAA,UAAA;AAAA,UAJvC;AAAA,QAAA;AAAA,MAOX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/modules/communityTools/ui/Toast.d.ts

@@ -0,0 +1,19 @@
+export interface ToastMessage {
+    /** Changes for every new toast, so the same text twice still restarts the timer. */
+    id: number;
+    tone: 'info' | 'ok' | 'error';
+    text: React.ReactNode;
+    action?: {
+        label: string;
+        run: () => void;
+    };
+}
+/**
+ * One toast at a time, bottom-centre. It leaves after 5 s unless the pointer or
+ * focus is on it. The live region is always mounted, so the first toast is
+ * announced too; an error is an alert.
+ */
+export declare function Toast({ toast, onDismiss, }: {
+    toast: ToastMessage | null;
+    onDismiss: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/communityTools/ui/Toast.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, Check, Star, X } from "lucide-react";
+import { useState, useEffect } from "react";
+import { cn } from "../../../lib/utils.js";
+const SHOW_MS = 5e3;
+const ICONS = { info: Star, ok: Check, error: AlertTriangle };
+function Toast({
+  toast,
+  onDismiss
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": "polite",
+      className: "pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center px-4",
+      children: toast && /* @__PURE__ */ jsx(ToastBody, { toast, onDismiss }, toast.id)
+    }
+  );
+}
+function ToastBody({
+  toast,
+  onDismiss
+}) {
+  const [held, setHeld] = useState(false);
+  useEffect(() => {
+    if (held) return;
+    const timer = setTimeout(onDismiss, SHOW_MS);
+    return () => clearTimeout(timer);
+  }, [held, onDismiss]);
+  const Icon = ICONS[toast.tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "toast",
+      role: toast.tone === "error" ? "alert" : "status",
+      onMouseEnter: () => setHeld(true),
+      onMouseLeave: () => setHeld(false),
+      onFocus: () => setHeld(true),
+      onBlur: () => setHeld(false),
+      className: cn(
+        "pointer-events-auto inline-flex max-w-full items-center gap-2.5 rounded-xl py-2.5 pr-2.5 pl-3.5 text-sm font-semibold shadow-lg",
+        toast.tone === "error" ? "bg-destructive text-white" : "bg-foreground text-background"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-4 shrink-0",
+              toast.tone === "info" && "fill-amber-400 text-amber-400",
+              toast.tone === "ok" && "text-green-400"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: toast.text }),
+        toast.action && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              var _a;
+              (_a = toast.action) == null ? void 0 : _a.run();
+              onDismiss();
+            },
+            className: "rounded-md px-2 py-1 font-bold underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-current",
+            children: toast.action.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: onDismiss,
+            className: "rounded-md p-1 opacity-70 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-current",
+            children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Toast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/esm/modules/communityTools/ui/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../../../src/modules/communityTools/ui/Toast.tsx"],"sourcesContent":["import { AlertTriangle, Check, Star, X } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport { cn } from '~/lib/utils'\n\nexport interface ToastMessage {\n  /** Changes for every new toast, so the same text twice still restarts the timer. */\n  id: number\n  tone: 'info' | 'ok' | 'error'\n  text: React.ReactNode\n  action?: { label: string; run: () => void }\n}\n\nconst SHOW_MS = 5000\n\nconst ICONS = { info: Star, ok: Check, error: AlertTriangle } as const\n\n/**\n * One toast at a time, bottom-centre. It leaves after 5 s unless the pointer or\n * focus is on it. The live region is always mounted, so the first toast is\n * announced too; an error is an alert.\n */\nexport function Toast({\n  toast,\n  onDismiss,\n}: {\n  toast: ToastMessage | null\n  onDismiss: () => void\n}) {\n  return (\n    <div\n      aria-live=\"polite\"\n      className=\"pointer-events-none fixed inset-x-0 bottom-6 z-50 flex justify-center px-4\"\n    >\n      {toast && (\n        <ToastBody key={toast.id} toast={toast} onDismiss={onDismiss} />\n      )}\n    </div>\n  )\n}\n\n/** Keyed by toast id, so a new toast starts un-held with a fresh timer. */\nfunction ToastBody({\n  toast,\n  onDismiss,\n}: {\n  toast: ToastMessage\n  onDismiss: () => void\n}) {\n  const [held, setHeld] = useState(false)\n\n  useEffect(() => {\n    if (held) return\n    const timer = setTimeout(onDismiss, SHOW_MS)\n    return () => clearTimeout(timer)\n  }, [held, onDismiss])\n\n  const Icon = ICONS[toast.tone]\n\n  return (\n    <div\n      data-testid=\"toast\"\n      role={toast.tone === 'error' ? 'alert' : 'status'}\n      onMouseEnter={() => setHeld(true)}\n      onMouseLeave={() => setHeld(false)}\n      onFocus={() => setHeld(true)}\n      onBlur={() => setHeld(false)}\n      className={cn(\n        'pointer-events-auto inline-flex max-w-full items-center gap-2.5 rounded-xl py-2.5 pr-2.5 pl-3.5 text-sm font-semibold shadow-lg',\n        toast.tone === 'error'\n          ? 'bg-destructive text-white'\n          : 'bg-foreground text-background',\n      )}\n    >\n      <Icon\n        aria-hidden=\"true\"\n        className={cn(\n          'size-4 shrink-0',\n          toast.tone === 'info' && 'fill-amber-400 text-amber-400',\n          toast.tone === 'ok' && 'text-green-400',\n        )}\n      />\n      <span>{toast.text}</span>\n      {toast.action && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            toast.action?.run()\n            onDismiss()\n          }}\n          className=\"rounded-md px-2 py-1 font-bold underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-current\"\n        >\n          {toast.action.label}\n        </button>\n      )}\n      <button\n        type=\"button\"\n        aria-label=\"Dismiss\"\n        onClick={onDismiss}\n        className=\"rounded-md p-1 opacity-70 hover:opacity-100 focus-visible:outline-2 focus-visible:outline-current\"\n      >\n        <X aria-hidden=\"true\" className=\"size-4\" />\n      </button>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAYA,MAAM,UAAU;AAEhB,MAAM,QAAQ,EAAE,MAAM,MAAM,IAAI,OAAO,OAAO,cAAA;AAOvC,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AACF,GAGG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MAET,mBACC,oBAAC,WAAA,EAAyB,OAAc,UAAA,GAAxB,MAAM,EAAwC;AAAA,IAAA;AAAA,EAAA;AAItE;AAGA,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,QAAI,KAAM;AACV,UAAM,QAAQ,WAAW,WAAW,OAAO;AAC3C,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,MAAM,SAAS,CAAC;AAEpB,QAAM,OAAO,MAAM,MAAM,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,MAAM,MAAM,SAAS,UAAU,UAAU;AAAA,MACzC,cAAc,MAAM,QAAQ,IAAI;AAAA,MAChC,cAAc,MAAM,QAAQ,KAAK;AAAA,MACjC,SAAS,MAAM,QAAQ,IAAI;AAAA,MAC3B,QAAQ,MAAM,QAAQ,KAAK;AAAA,MAC3B,WAAW;AAAA,QACT;AAAA,QACA,MAAM,SAAS,UACX,8BACA;AAAA,MAAA;AAAA,MAGN,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,MAAM,SAAS,UAAU;AAAA,cACzB,MAAM,SAAS,QAAQ;AAAA,YAAA;AAAA,UACzB;AAAA,QAAA;AAAA,QAEF,oBAAC,QAAA,EAAM,UAAA,MAAM,KAAA,CAAK;AAAA,QACjB,MAAM,UACL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;;AACb,0BAAM,WAAN,mBAAc;AACd,wBAAA;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAET,gBAAM,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAGlB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA,oBAAC,GAAA,EAAE,eAAY,QAAO,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3C;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/modules/communityTools/ui/ToolCard.d.ts

@@ -0,0 +1,22 @@
+import { CommunityTool } from '@igstack/app-catalog-shared-core';
+export interface ToolCardProps {
+    slug: string;
+    /** The list the card was opened from, in its order: ←/→ step through it. */
+    siblings: string[];
+    onClose: () => void;
+    onNavigate: (slug: string) => void;
+    pinned: boolean;
+    /** Its pin is being saved. */
+    pinBusy?: boolean;
+    onTogglePin: (tool: CommunityTool) => void;
+    /** Display names of official apps by slug, for app tags. */
+    appNames: Record<string, string>;
+    /** A tag chip on the card: close it and filter the feed to that tag. */
+    onChooseTag: (tag: string) => void;
+}
+/**
+ * A community tool over the Community page, in the official card's shell: no
+ * tabs, one scroll. Title and screenshot to recognise it, how to use it, who
+ * to ask, and the comments.
+ */
+export declare function ToolCard({ slug, siblings, onClose, onNavigate, pinned, pinBusy, onTogglePin, appNames, onChooseTag, }: ToolCardProps): import("react/jsx-runtime").JSX.Element;