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

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

@@ -0,0 +1,260 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { CornerDownLeft, Eye, ExternalLink, PanelRight, Globe } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { highlightTokens } from "../../../util/highlightMatches.js";
+import { timeAgo } from "../timeAgo.js";
+import { LifecycleBadge, UnreviewedBadge } from "./LifecycleBadge.js";
+import { LikeButton } from "./LikeButton.js";
+import { PinButton } from "./PinButton.js";
+function screenshotUrl(id, size) {
+  return `/api/screenshots/${id}?size=${size}`;
+}
+function ToolThumb({
+  tool,
+  size,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-center overflow-hidden border border-border bg-muted text-muted-foreground",
+        className
+      ),
+      children: tool.screenshotId ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: screenshotUrl(tool.screenshotId, size),
+          alt: "",
+          loading: "lazy",
+          className: "size-full object-cover object-left-top"
+        }
+      ) : /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: "size-1/4 min-w-4" })
+    }
+  );
+}
+const AVATAR_TONES = [
+  "bg-orange-200",
+  "bg-sky-200",
+  "bg-lime-200",
+  "bg-amber-200",
+  "bg-rose-200",
+  "bg-violet-200"
+];
+function PersonAvatar({ name }) {
+  const initials = name.split(/\s+/).slice(0, 2).map((w) => w.charAt(0).toUpperCase()).join("");
+  let hash = 0;
+  for (const ch of name) hash = hash * 31 + ch.charCodeAt(0) | 0;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "inline-flex size-[22px] shrink-0 items-center justify-center rounded-full text-[9.5px] font-extrabold text-stone-700",
+        AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length]
+      ),
+      children: initials
+    }
+  );
+}
+const FIELD_LABELS = {
+  name: "name",
+  summary: "summary",
+  description: "how to use",
+  owner: "author",
+  address: "address",
+  tag: "tag"
+};
+const ROW_THUMB = "h-[150px] w-[240px] rounded-[10px]";
+const PANEL = "w-[120px]";
+function FeedRow({
+  tool,
+  rank,
+  sort,
+  tokens,
+  matched,
+  selected = false,
+  optionId,
+  pinned,
+  pinBusy,
+  onTogglePin,
+  onToggleLike
+}) {
+  const archived = tool.lifecycle.state === "archived";
+  const cell = optionId ? "gridcell" : void 0;
+  const owners = tool.owners.map((o) => o.name).join(", ");
+  const dated = sort === "newest" ? `Added ${timeAgo(tool.createdAt)}` : sort === "updated" && tool.siteUpdatedAt ? `Updated ${timeAgo(tool.siteUpdatedAt)}` : null;
+  const address = tool.url.replace(/^https?:\/\//, "").replace(/\/$/, "");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "feed-row",
+      "data-slug": tool.slug,
+      "data-selected": selected || void 0,
+      role: optionId ? "row" : void 0,
+      className: cn(
+        "group/row relative flex min-h-[176px] items-center overflow-hidden rounded-[14px] border bg-card transition-[border-color,box-shadow]",
+        selected ? "border-primary ring-[3px] ring-primary/20" : "border-border hover:border-primary/35 hover:shadow-sm has-[:focus-visible]:border-primary/35",
+        archived && "opacity-55"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: optionId,
+            role: cell,
+            "aria-selected": optionId ? selected : void 0,
+            className: "flex min-w-0 flex-1 items-center gap-4 self-stretch py-3 pl-3",
+            children: [
+              rank !== void 0 && /* @__PURE__ */ jsx("span", { className: "w-[26px] shrink-0 text-center font-serif text-[22px] font-semibold text-muted-foreground/70", children: rank }),
+              /* @__PURE__ */ jsx(ToolThumb, { tool, size: 512, className: ROW_THUMB }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 self-start pt-5 pr-6 pb-[52px]", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-[15.5px] font-extrabold", children: [
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: tool.url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      "data-site": true,
+                      "data-testid": "feed-row-name",
+                      "aria-label": `${tool.name}, opens ${tool.host} in a new tab`,
+                      className: cn(
+                        "truncate decoration-1 underline-offset-[3px] after:absolute after:inset-y-0 after:left-0 after:right-[120px] after:z-[1] after:rounded-l-[13px] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-[3px] focus-visible:after:outline-ring",
+                        "group-hover/row:underline group-has-[[data-details]:hover]/row:no-underline",
+                        archived && "text-muted-foreground"
+                      ),
+                      children: highlightTokens(tool.name, tokens)
+                    }
+                  ),
+                  selected && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11.5px] font-bold text-primary", children: [
+                    /* @__PURE__ */ jsx(CornerDownLeft, { "aria-hidden": "true", className: "size-3" }),
+                    "Enter opens site"
+                  ] }),
+                  /* @__PURE__ */ jsx(LifecycleBadge, { lifecycle: tool.lifecycle }),
+                  !tool.reviewed && /* @__PURE__ */ jsx(UnreviewedBadge, {})
+                ] }),
+                tool.summary && /* @__PURE__ */ jsx("div", { className: "mt-1 line-clamp-2 text-foreground/75", children: highlightTokens(tool.summary, tokens) }),
+                matched && matched.length > 0 && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-testid": "match-reason",
+                    className: "mt-1 text-xs font-semibold text-muted-foreground",
+                    children: [
+                      "Matched: ",
+                      matched.map((f) => FIELD_LABELS[f]).join(", ")
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "pointer-events-none absolute right-[120px] bottom-0 z-[2] flex h-12 items-center gap-4",
+                    rank !== void 0 ? "left-[310px]" : "left-[268px]"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-[13px] font-semibold whitespace-nowrap text-foreground/75 [&>*]:shrink-0", children: [
+                      tool.owners[0] && /* @__PURE__ */ jsx(PersonAvatar, { name: tool.owners[0].name }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-testid": "feed-row-owner",
+                          className: "mr-1 min-w-0 !shrink truncate",
+                          children: highlightTokens(owners, tokens)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "pointer-events-auto -mr-1 flex items-center", children: [
+                        /* @__PURE__ */ jsx(
+                          PinButton,
+                          {
+                            small: true,
+                            pinned,
+                            busy: pinBusy,
+                            name: tool.name,
+                            onToggle: onTogglePin
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(LikeButton, { tool, onToggle: onToggleLike })
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          "data-testid": "feed-row-views",
+                          className: "inline-flex items-center gap-1 text-muted-foreground",
+                          children: [
+                            /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true", className: "size-[15px]" }),
+                            tool.views30d,
+                            /* @__PURE__ */ jsx("span", { className: "sr-only", children: " views this month" })
+                          ]
+                        }
+                      ),
+                      dated && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "·" }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-testid": "feed-row-date",
+                            className: "text-muted-foreground",
+                            children: dated
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        "data-testid": "feed-row-address",
+                        className: cn(
+                          "flex h-full min-w-[150px] flex-1 items-center justify-end gap-1.5 px-4 font-mono text-[12.5px] text-muted-foreground opacity-0 transition-opacity",
+                          "group-hover/row:text-foreground group-hover/row:opacity-100 group-has-[[data-site]:focus-visible]/row:opacity-100 group-has-[[data-details]:hover]/row:opacity-0 [@media(hover:none)]:opacity-100",
+                          selected && "opacity-100"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: address }),
+                          /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-3.5 shrink-0" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { role: cell, className: "flex self-stretch", children: /* @__PURE__ */ jsx(
+          Link,
+          {
+            to: "/community/$slug",
+            params: { slug: tool.slug },
+            search: (prev) => prev,
+            "data-details": true,
+            "aria-label": `Details for ${tool.name}`,
+            className: cn(
+              PANEL,
+              "relative z-[2] flex flex-none flex-col items-center justify-center gap-1.5 border-l border-border/55 text-[13.5px] font-extrabold text-muted-foreground transition-colors",
+              "group-hover/row:border-border group-hover/row:bg-primary/[0.025] group-has-[:focus-visible]/row:bg-primary/[0.025]",
+              "hover:!border-primary/30 hover:!bg-primary/12 hover:text-foreground",
+              "focus-visible:rounded-r-[13px] focus-visible:!bg-primary/12 focus-visible:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-[3px] focus-visible:outline-ring"
+            ),
+            children: /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center gap-1.5 opacity-0 transition-opacity group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 [@media(hover:none)]:opacity-100", children: [
+              /* @__PURE__ */ jsx(PanelRight, { "aria-hidden": "true", className: "size-[18px]" }),
+              /* @__PURE__ */ jsx("span", { children: "Details" })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  FeedRow,
+  PersonAvatar,
+  ROW_THUMB,
+  ToolThumb,
+  screenshotUrl
+};
+//# sourceMappingURL=FeedRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedRow.js","sources":["../../../../../src/modules/communityTools/ui/FeedRow.tsx"],"sourcesContent":["import type {\n  CommunityTool,\n  FeedSort,\n  MatchField,\n} from '@igstack/app-catalog-shared-core'\nimport { Link } from '@tanstack/react-router'\nimport {\n  CornerDownLeft,\n  ExternalLink,\n  Eye,\n  Globe,\n  PanelRight,\n} from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { highlightTokens } from '~/util/highlightMatches'\nimport { timeAgo } from '../timeAgo'\nimport { LifecycleBadge, UnreviewedBadge } from './LifecycleBadge'\nimport { LikeButton } from './LikeButton'\nimport { PinButton } from './PinButton'\n\nexport function screenshotUrl(id: string, size: number): string {\n  return `/api/screenshots/${id}?size=${size}`\n}\n\n/** The tool's screenshot, cropped to its top-left, or a globe when there is none. */\nexport function ToolThumb({\n  tool,\n  size,\n  className,\n}: {\n  tool: CommunityTool\n  size: number\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex shrink-0 items-center justify-center overflow-hidden border border-border bg-muted text-muted-foreground',\n        className,\n      )}\n    >\n      {tool.screenshotId ? (\n        <img\n          src={screenshotUrl(tool.screenshotId, size)}\n          alt=\"\"\n          loading=\"lazy\"\n          className=\"size-full object-cover object-left-top\"\n        />\n      ) : (\n        <Globe aria-hidden=\"true\" className=\"size-1/4 min-w-4\" />\n      )}\n    </div>\n  )\n}\n\nconst AVATAR_TONES = [\n  'bg-orange-200',\n  'bg-sky-200',\n  'bg-lime-200',\n  'bg-amber-200',\n  'bg-rose-200',\n  'bg-violet-200',\n]\n\nexport function PersonAvatar({ name }: { name: string }) {\n  const initials = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w.charAt(0).toUpperCase())\n    .join('')\n  let hash = 0\n  for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) | 0\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        'inline-flex size-[22px] shrink-0 items-center justify-center rounded-full text-[9.5px] font-extrabold text-stone-700',\n        AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length],\n      )}\n    >\n      {initials}\n    </span>\n  )\n}\n\nconst FIELD_LABELS: Record<MatchField, string> = {\n  name: 'name',\n  summary: 'summary',\n  description: 'how to use',\n  owner: 'author',\n  address: 'address',\n  tag: 'tag',\n}\n\nexport interface FeedRowProps {\n  tool: CommunityTool\n  /** Shown in the ranked feed; search results have no rank. */\n  rank?: number\n  /** A date sort shows its date on the row. */\n  sort: FeedSort\n  tokens: string[]\n  /** Set while searching: which fields the query hit. */\n  matched?: MatchField[]\n  selected?: boolean\n  /**\n   * Set while searching: the row is a row of the results grid, and this is the\n   * id of its main cell, the one the search box points at.\n   */\n  optionId?: string\n  pinned: boolean\n  /** Its pin is being saved. */\n  pinBusy?: boolean\n  onTogglePin: () => void\n  onToggleLike: () => void\n}\n\n/** The feed row's thumbnail: big enough to read the page title in its top left. */\nexport const ROW_THUMB = 'h-[150px] w-[240px] rounded-[10px]'\n\n/** The Details panel's width, reserved at rest so nothing moves when it shows. */\nconst PANEL = 'w-[120px]'\n\n/**\n * One tool in the feed or the search results. Everything left of the end\n * panel (rank, picture, name, summary, meta) is one link that opens the site\n * in a new tab; the 120 px panel opens the card. The star sits in the meta\n * line as its own target, above that link. The bottom strip shows the address\n * the big click goes to, on hover or focus only.\n */\nexport function FeedRow({\n  tool,\n  rank,\n  sort,\n  tokens,\n  matched,\n  selected = false,\n  optionId,\n  pinned,\n  pinBusy,\n  onTogglePin,\n  onToggleLike,\n}: FeedRowProps) {\n  const archived = tool.lifecycle.state === 'archived'\n  const cell = optionId ? 'gridcell' : undefined\n  const owners = tool.owners.map((o) => o.name).join(', ')\n  const dated =\n    sort === 'newest'\n      ? `Added ${timeAgo(tool.createdAt)}`\n      : sort === 'updated' && tool.siteUpdatedAt\n        ? `Updated ${timeAgo(tool.siteUpdatedAt)}`\n        : null\n  const address = tool.url.replace(/^https?:\\/\\//, '').replace(/\\/$/, '')\n\n  return (\n    <div\n      data-testid=\"feed-row\"\n      data-slug={tool.slug}\n      data-selected={selected || undefined}\n      role={optionId ? 'row' : undefined}\n      className={cn(\n        'group/row relative flex min-h-[176px] items-center overflow-hidden rounded-[14px] border bg-card transition-[border-color,box-shadow]',\n        selected\n          ? 'border-primary ring-[3px] ring-primary/20'\n          : 'border-border hover:border-primary/35 hover:shadow-sm has-[:focus-visible]:border-primary/35',\n        archived && 'opacity-55',\n      )}\n    >\n      {/* Two cells while searching: the site, and the card. A grid rather\n          than a listbox, because an option's content is presentational and\n          would hide the link and the star. */}\n      <div\n        id={optionId}\n        role={cell}\n        aria-selected={optionId ? selected : undefined}\n        className=\"flex min-w-0 flex-1 items-center gap-4 self-stretch py-3 pl-3\"\n      >\n        {rank !== undefined && (\n          <span className=\"w-[26px] shrink-0 text-center font-serif text-[22px] font-semibold text-muted-foreground/70\">\n            {rank}\n          </span>\n        )}\n        <ToolThumb tool={tool} size={512} className={ROW_THUMB} />\n        <div className=\"min-w-0 flex-1 self-start pt-5 pr-6 pb-[52px]\">\n          <div className=\"flex items-center gap-2.5 text-[15.5px] font-extrabold\">\n            <a\n              href={tool.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              data-site\n              data-testid=\"feed-row-name\"\n              aria-label={`${tool.name}, opens ${tool.host} in a new tab`}\n              className={cn(\n                'truncate decoration-1 underline-offset-[3px] after:absolute after:inset-y-0 after:left-0 after:right-[120px] after:z-[1] after:rounded-l-[13px] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-[3px] focus-visible:after:outline-ring',\n                'group-hover/row:underline group-has-[[data-details]:hover]/row:no-underline',\n                archived && 'text-muted-foreground',\n              )}\n            >\n              {highlightTokens(tool.name, tokens)}\n            </a>\n            {selected && (\n              <span className=\"inline-flex shrink-0 items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11.5px] font-bold text-primary\">\n                <CornerDownLeft aria-hidden=\"true\" className=\"size-3\" />\n                Enter opens site\n              </span>\n            )}\n            <LifecycleBadge lifecycle={tool.lifecycle} />\n            {!tool.reviewed && <UnreviewedBadge />}\n          </div>\n          {tool.summary && (\n            <div className=\"mt-1 line-clamp-2 text-foreground/75\">\n              {highlightTokens(tool.summary, tokens)}\n            </div>\n          )}\n          {matched && matched.length > 0 && (\n            <div\n              data-testid=\"match-reason\"\n              className=\"mt-1 text-xs font-semibold text-muted-foreground\"\n            >\n              Matched: {matched.map((f) => FIELD_LABELS[f]).join(', ')}\n            </div>\n          )}\n        </div>\n        {/* Meta on the left, the address on the right, flush to the panel.\n            The address keeps 150 px; a long author list gives way first.\n            Clicks fall through to the row link, except on star and like. */}\n        <div\n          className={cn(\n            'pointer-events-none absolute right-[120px] bottom-0 z-[2] flex h-12 items-center gap-4',\n            rank !== undefined ? 'left-[310px]' : 'left-[268px]',\n          )}\n        >\n          <div className=\"flex min-w-0 items-center gap-1.5 text-[13px] font-semibold whitespace-nowrap text-foreground/75 [&>*]:shrink-0\">\n            {tool.owners[0] && <PersonAvatar name={tool.owners[0].name} />}\n            <span\n              data-testid=\"feed-row-owner\"\n              className=\"mr-1 min-w-0 !shrink truncate\"\n            >\n              {highlightTokens(owners, tokens)}\n            </span>\n            <span className=\"pointer-events-auto -mr-1 flex items-center\">\n              <PinButton\n                small\n                pinned={pinned}\n                busy={pinBusy}\n                name={tool.name}\n                onToggle={onTogglePin}\n              />\n              <LikeButton tool={tool} onToggle={onToggleLike} />\n            </span>\n            <span\n              data-testid=\"feed-row-views\"\n              className=\"inline-flex items-center gap-1 text-muted-foreground\"\n            >\n              <Eye aria-hidden=\"true\" className=\"size-[15px]\" />\n              {tool.views30d}\n              <span className=\"sr-only\"> views this month</span>\n            </span>\n            {dated && (\n              <>\n                <span aria-hidden=\"true\" className=\"text-muted-foreground\">\n                  ·\n                </span>\n                <span\n                  data-testid=\"feed-row-date\"\n                  className=\"text-muted-foreground\"\n                >\n                  {dated}\n                </span>\n              </>\n            )}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            data-testid=\"feed-row-address\"\n            className={cn(\n              'flex h-full min-w-[150px] flex-1 items-center justify-end gap-1.5 px-4 font-mono text-[12.5px] text-muted-foreground opacity-0 transition-opacity',\n              'group-hover/row:text-foreground group-hover/row:opacity-100 group-has-[[data-site]:focus-visible]/row:opacity-100 group-has-[[data-details]:hover]/row:opacity-0 [@media(hover:none)]:opacity-100',\n              selected && 'opacity-100',\n            )}\n          >\n            <span className=\"min-w-0 truncate\">{address}</span>\n            <ExternalLink aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n          </div>\n        </div>\n      </div>\n      <div role={cell} className=\"flex self-stretch\">\n        <Link\n          to=\"/community/$slug\"\n          params={{ slug: tool.slug }}\n          search={(prev) => prev}\n          data-details\n          aria-label={`Details for ${tool.name}`}\n          className={cn(\n            PANEL,\n            'relative z-[2] flex flex-none flex-col items-center justify-center gap-1.5 border-l border-border/55 text-[13.5px] font-extrabold text-muted-foreground transition-colors',\n            'group-hover/row:border-border group-hover/row:bg-primary/[0.025] group-has-[:focus-visible]/row:bg-primary/[0.025]',\n            'hover:!border-primary/30 hover:!bg-primary/12 hover:text-foreground',\n            'focus-visible:rounded-r-[13px] focus-visible:!bg-primary/12 focus-visible:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-[3px] focus-visible:outline-ring',\n          )}\n        >\n          {/* Shown on hover or focus; always where nothing hovers. */}\n          <span className=\"flex flex-col items-center gap-1.5 opacity-0 transition-opacity group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 [@media(hover:none)]:opacity-100\">\n            <PanelRight aria-hidden=\"true\" className=\"size-[18px]\" />\n            <span>Details</span>\n          </span>\n        </Link>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,17 @@
+import { FeedSort, SortDir } from '@igstack/app-catalog-shared-core';
+export declare const SORT_OPTIONS: {
+    value: FeedSort;
+    label: string;
+}[];
+/** The feed's heading, saying the order it is in. */
+export declare function feedHeading(sort: FeedSort, dir: SortDir): string;
+/**
+ * Segmented control above the feed. Choosing a sort starts it descending;
+ * choosing the active one again flips the direction. Arrow keys move between
+ * segments.
+ */
+export declare function FeedSortControl({ sort, dir, onChange, }: {
+    sort: FeedSort;
+    dir: SortDir;
+    onChange: (sort: FeedSort, dir: SortDir) => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { useRef } from "react";
+import { cn } from "../../../lib/utils.js";
+const SORT_OPTIONS = [
+  { value: "liked", label: "Most liked" },
+  { value: "popular", label: "Popular" },
+  { value: "newest", label: "Newest" },
+  { value: "updated", label: "Recently updated" }
+];
+const HEADINGS = {
+  liked: { desc: "Most liked", asc: "Least liked" },
+  popular: { desc: "Most opened", asc: "Least opened" },
+  newest: { desc: "Newest", asc: "Oldest" },
+  updated: { desc: "Recently updated", asc: "Longest unchanged" }
+};
+function feedHeading(sort, dir) {
+  return HEADINGS[sort][dir];
+}
+const DIR_LABEL = {
+  desc: "descending",
+  asc: "ascending"
+};
+function FeedSortControl({
+  sort,
+  dir,
+  onChange
+}) {
+  var _a;
+  const buttonsRef = useRef([]);
+  const label = ((_a = SORT_OPTIONS.find((o) => o.value === sort)) == null ? void 0 : _a.label) ?? sort;
+  const onKeyDown = (e, index) => {
+    var _a2;
+    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0) return;
+    e.preventDefault();
+    const next = (index + step + SORT_OPTIONS.length) % SORT_OPTIONS.length;
+    onChange(SORT_OPTIONS[next].value, "desc");
+    (_a2 = buttonsRef.current[next]) == null ? void 0 : _a2.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": `Sort by ${label}, ${DIR_LABEL[dir]}`,
+      "data-testid": "feed-sort",
+      className: "inline-flex gap-0.5 rounded-[10px] bg-muted p-[3px] text-[13px] font-semibold",
+      children: SORT_OPTIONS.map((option, index) => {
+        const on = option.value === sort;
+        const Arrow = dir === "desc" ? ArrowDown : ArrowUp;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (el) => {
+              buttonsRef.current[index] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": on,
+            "aria-label": on ? `${option.label}, ${DIR_LABEL[dir]}` : option.label,
+            tabIndex: on ? 0 : -1,
+            onClick: () => onChange(option.value, on && dir === "desc" ? "asc" : "desc"),
+            onKeyDown: (e) => onKeyDown(e, index),
+            className: cn(
+              "inline-flex items-center gap-1 rounded-lg px-3 py-[5px] transition-colors focus-visible:outline-2 focus-visible:outline-ring",
+              on ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: [
+              option.label,
+              on && /* @__PURE__ */ jsx(Arrow, { "aria-hidden": "true", className: "size-3.5" })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+export {
+  FeedSortControl,
+  SORT_OPTIONS,
+  feedHeading
+};
+//# sourceMappingURL=FeedSortControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedSortControl.js","sources":["../../../../../src/modules/communityTools/ui/FeedSortControl.tsx"],"sourcesContent":["import type { FeedSort, SortDir } from '@igstack/app-catalog-shared-core'\nimport { ArrowDown, ArrowUp } from 'lucide-react'\nimport { useRef } from 'react'\nimport { cn } from '~/lib/utils'\n\nexport const SORT_OPTIONS: { value: FeedSort; label: string }[] = [\n  { value: 'liked', label: 'Most liked' },\n  { value: 'popular', label: 'Popular' },\n  { value: 'newest', label: 'Newest' },\n  { value: 'updated', label: 'Recently updated' },\n]\n\nconst HEADINGS: Record<FeedSort, Record<SortDir, string>> = {\n  liked: { desc: 'Most liked', asc: 'Least liked' },\n  popular: { desc: 'Most opened', asc: 'Least opened' },\n  newest: { desc: 'Newest', asc: 'Oldest' },\n  updated: { desc: 'Recently updated', asc: 'Longest unchanged' },\n}\n\n/** The feed's heading, saying the order it is in. */\nexport function feedHeading(sort: FeedSort, dir: SortDir): string {\n  return HEADINGS[sort][dir]\n}\n\nconst DIR_LABEL: Record<SortDir, string> = {\n  desc: 'descending',\n  asc: 'ascending',\n}\n\n/**\n * Segmented control above the feed. Choosing a sort starts it descending;\n * choosing the active one again flips the direction. Arrow keys move between\n * segments.\n */\nexport function FeedSortControl({\n  sort,\n  dir,\n  onChange,\n}: {\n  sort: FeedSort\n  dir: SortDir\n  onChange: (sort: FeedSort, dir: SortDir) => void\n}) {\n  const buttonsRef = useRef<(HTMLButtonElement | null)[]>([])\n  const label = SORT_OPTIONS.find((o) => o.value === sort)?.label ?? sort\n\n  const onKeyDown = (e: React.KeyboardEvent, index: number) => {\n    const step = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0\n    if (step === 0) return\n    e.preventDefault()\n    const next = (index + step + SORT_OPTIONS.length) % SORT_OPTIONS.length\n    onChange(SORT_OPTIONS[next]!.value, 'desc')\n    buttonsRef.current[next]?.focus()\n  }\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={`Sort by ${label}, ${DIR_LABEL[dir]}`}\n      data-testid=\"feed-sort\"\n      className=\"inline-flex gap-0.5 rounded-[10px] bg-muted p-[3px] text-[13px] font-semibold\"\n    >\n      {SORT_OPTIONS.map((option, index) => {\n        const on = option.value === sort\n        const Arrow = dir === 'desc' ? ArrowDown : ArrowUp\n        return (\n          <button\n            key={option.value}\n            ref={(el) => {\n              buttonsRef.current[index] = el\n            }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={on}\n            aria-label={\n              on ? `${option.label}, ${DIR_LABEL[dir]}` : option.label\n            }\n            tabIndex={on ? 0 : -1}\n            onClick={() =>\n              onChange(option.value, on && dir === 'desc' ? 'asc' : 'desc')\n            }\n            onKeyDown={(e) => onKeyDown(e, index)}\n            className={cn(\n              'inline-flex items-center gap-1 rounded-lg px-3 py-[5px] transition-colors focus-visible:outline-2 focus-visible:outline-ring',\n              on\n                ? 'bg-card text-foreground shadow-sm'\n                : 'text-muted-foreground hover:text-foreground',\n            )}\n          >\n            {option.label}\n            {on && <Arrow aria-hidden=\"true\" className=\"size-3.5\" />}\n          </button>\n        )\n      })}\n    </div>\n  )\n}\n"],"names":["_a"],"mappings":";;;;AAKO,MAAM,eAAqD;AAAA,EAChE,EAAE,OAAO,SAAS,OAAO,aAAA;AAAA,EACzB,EAAE,OAAO,WAAW,OAAO,UAAA;AAAA,EAC3B,EAAE,OAAO,UAAU,OAAO,SAAA;AAAA,EAC1B,EAAE,OAAO,WAAW,OAAO,mBAAA;AAC7B;AAEA,MAAM,WAAsD;AAAA,EAC1D,OAAO,EAAE,MAAM,cAAc,KAAK,cAAA;AAAA,EAClC,SAAS,EAAE,MAAM,eAAe,KAAK,eAAA;AAAA,EACrC,QAAQ,EAAE,MAAM,UAAU,KAAK,SAAA;AAAA,EAC/B,SAAS,EAAE,MAAM,oBAAoB,KAAK,oBAAA;AAC5C;AAGO,SAAS,YAAY,MAAgB,KAAsB;AAChE,SAAO,SAAS,IAAI,EAAE,GAAG;AAC3B;AAEA,MAAM,YAAqC;AAAA,EACzC,MAAM;AAAA,EACN,KAAK;AACP;AAOO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAIG;;AACD,QAAM,aAAa,OAAqC,EAAE;AAC1D,QAAM,UAAQ,kBAAa,KAAK,CAAC,MAAM,EAAE,UAAU,IAAI,MAAzC,mBAA4C,UAAS;AAEnE,QAAM,YAAY,CAAC,GAAwB,UAAkB;;AAC3D,UAAM,OAAO,EAAE,QAAQ,eAAe,IAAI,EAAE,QAAQ,cAAc,KAAK;AACvE,QAAI,SAAS,EAAG;AAChB,MAAE,eAAA;AACF,UAAM,QAAQ,QAAQ,OAAO,aAAa,UAAU,aAAa;AACjE,aAAS,aAAa,IAAI,EAAG,OAAO,MAAM;AAC1C,KAAAA,MAAA,WAAW,QAAQ,IAAI,MAAvB,gBAAAA,IAA0B;AAAA,EAC5B;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,WAAW,KAAK,KAAK,UAAU,GAAG,CAAC;AAAA,MAC/C,eAAY;AAAA,MACZ,WAAU;AAAA,MAET,UAAA,aAAa,IAAI,CAAC,QAAQ,UAAU;AACnC,cAAM,KAAK,OAAO,UAAU;AAC5B,cAAM,QAAQ,QAAQ,SAAS,YAAY;AAC3C,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,OAAO;AACX,yBAAW,QAAQ,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,cACE,KAAK,GAAG,OAAO,KAAK,KAAK,UAAU,GAAG,CAAC,KAAK,OAAO;AAAA,YAErD,UAAU,KAAK,IAAI;AAAA,YACnB,SAAS,MACP,SAAS,OAAO,OAAO,MAAM,QAAQ,SAAS,QAAQ,MAAM;AAAA,YAE9D,WAAW,CAAC,MAAM,UAAU,GAAG,KAAK;AAAA,YACpC,WAAW;AAAA,cACT;AAAA,cACA,KACI,sCACA;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,cAAA,OAAO;AAAA,cACP,MAAM,oBAAC,OAAA,EAAM,eAAY,QAAO,WAAU,WAAA,CAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAvBjD,OAAO;AAAA,QAAA;AAAA,MA0BlB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -0,0 +1,7 @@
+import { Lifecycle } from '@igstack/app-catalog-shared-core';
+/** Next to the name on rows, tiles and the card. An active tool shows nothing. */
+export declare function LifecycleBadge({ lifecycle }: {
+    lifecycle: Lifecycle;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Live since it was published, but no admin has looked at it yet. */
+export declare function UnreviewedBadge(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { AlertTriangle, Archive } from "lucide-react";
+const PILL = "inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-px text-[11.5px] font-bold";
+function LifecycleBadge({ lifecycle }) {
+  if (lifecycle.state === "not-working") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-testid": "lifecycle-badge",
+        className: `${PILL} border-amber-300 bg-amber-100 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300`,
+        children: [
+          /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": "true", className: "size-3" }),
+          "Not working · ",
+          lifecycle.days,
+          " ",
+          lifecycle.days === 1 ? "day" : "days"
+        ]
+      }
+    );
+  }
+  if (lifecycle.state === "archived") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-testid": "lifecycle-badge",
+        className: `${PILL} border-border bg-muted text-muted-foreground`,
+        children: [
+          /* @__PURE__ */ jsx(Archive, { "aria-hidden": "true", className: "size-3" }),
+          "Archived"
+        ]
+      }
+    );
+  }
+  return null;
+}
+function UnreviewedBadge() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": "unreviewed-badge",
+      className: `${PILL} border-primary/25 bg-primary/10 text-primary`,
+      children: "New · not reviewed"
+    }
+  );
+}
+export {
+  LifecycleBadge,
+  UnreviewedBadge
+};
+//# sourceMappingURL=LifecycleBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LifecycleBadge.js","sources":["../../../../../src/modules/communityTools/ui/LifecycleBadge.tsx"],"sourcesContent":["import type { Lifecycle } from '@igstack/app-catalog-shared-core'\nimport { AlertTriangle, Archive } from 'lucide-react'\n\nconst PILL =\n  'inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-px text-[11.5px] font-bold'\n\n/** Next to the name on rows, tiles and the card. An active tool shows nothing. */\nexport function LifecycleBadge({ lifecycle }: { lifecycle: Lifecycle }) {\n  if (lifecycle.state === 'not-working') {\n    return (\n      <span\n        data-testid=\"lifecycle-badge\"\n        className={`${PILL} border-amber-300 bg-amber-100 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300`}\n      >\n        <AlertTriangle aria-hidden=\"true\" className=\"size-3\" />\n        Not working · {lifecycle.days} {lifecycle.days === 1 ? 'day' : 'days'}\n      </span>\n    )\n  }\n  if (lifecycle.state === 'archived') {\n    return (\n      <span\n        data-testid=\"lifecycle-badge\"\n        className={`${PILL} border-border bg-muted text-muted-foreground`}\n      >\n        <Archive aria-hidden=\"true\" className=\"size-3\" />\n        Archived\n      </span>\n    )\n  }\n  return null\n}\n\n/** Live since it was published, but no admin has looked at it yet. */\nexport function UnreviewedBadge() {\n  return (\n    <span\n      data-testid=\"unreviewed-badge\"\n      className={`${PILL} border-primary/25 bg-primary/10 text-primary`}\n    >\n      New · not reviewed\n    </span>\n  )\n}\n"],"names":[],"mappings":";;AAGA,MAAM,OACJ;AAGK,SAAS,eAAe,EAAE,aAAuC;AACtE,MAAI,UAAU,UAAU,eAAe;AACrC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW,GAAG,IAAI;AAAA,QAElB,UAAA;AAAA,UAAA,oBAAC,eAAA,EAAc,eAAY,QAAO,WAAU,UAAS;AAAA,UAAE;AAAA,UACxC,UAAU;AAAA,UAAK;AAAA,UAAE,UAAU,SAAS,IAAI,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrE;AACA,MAAI,UAAU,UAAU,YAAY;AAClC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAW,GAAG,IAAI;AAAA,QAElB,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAQ,eAAY,QAAO,WAAU,UAAS;AAAA,UAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIvD;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB;AAChC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW,GAAG,IAAI;AAAA,MACnB,UAAA;AAAA,IAAA;AAAA,EAAA;AAIL;"}

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

@@ -0,0 +1,9 @@
+import { CommunityTool } from '@igstack/app-catalog-shared-core';
+/**
+ * A thumb and the count, filled in the brand colour once I liked it; hover or
+ * focus says who liked it.
+ */
+export declare function LikeButton({ tool, onToggle, }: {
+    tool: Pick<CommunityTool, 'name' | 'likes' | 'likedByMe' | 'likedBy'>;
+    onToggle: () => void;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ThumbsUp } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../../../ui/tooltip.js";
+import { likedByText } from "../likedBy.js";
+function LikeButton({
+  tool,
+  onToggle
+}) {
+  const { name, likes, likedByMe } = tool;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-testid": "like-button",
+        "aria-pressed": likedByMe,
+        "aria-label": `Like ${name}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggle();
+        },
+        className: cn(
+          "relative z-10 inline-flex h-8 min-w-8 items-center justify-center gap-1 rounded-lg px-1.5 transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring",
+          likedByMe ? "text-foreground" : "text-muted-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            ThumbsUp,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-[15px]",
+                likedByMe && "fill-primary/85 stroke-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { "data-testid": "like-count", children: likes })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        "data-testid": "liked-by",
+        sideOffset: 8,
+        className: "max-w-[300px] rounded-[10px] px-2.5 py-[7px] text-[12.5px] leading-[1.4] font-semibold",
+        children: likedByText(tool)
+      }
+    )
+  ] });
+}
+export {
+  LikeButton
+};
+//# sourceMappingURL=LikeButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LikeButton.js","sources":["../../../../../src/modules/communityTools/ui/LikeButton.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { ThumbsUp } from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/tooltip'\nimport { likedByText } from '../likedBy'\n\n/**\n * A thumb and the count, filled in the brand colour once I liked it; hover or\n * focus says who liked it.\n */\nexport function LikeButton({\n  tool,\n  onToggle,\n}: {\n  tool: Pick<CommunityTool, 'name' | 'likes' | 'likedByMe' | 'likedBy'>\n  onToggle: () => void\n}) {\n  const { name, likes, likedByMe } = tool\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <button\n          type=\"button\"\n          data-testid=\"like-button\"\n          aria-pressed={likedByMe}\n          // One name; aria-pressed says whether it is liked.\n          aria-label={`Like ${name}`}\n          onClick={(e) => {\n            e.stopPropagation()\n            onToggle()\n          }}\n          className={cn(\n            'relative z-10 inline-flex h-8 min-w-8 items-center justify-center gap-1 rounded-lg px-1.5 transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-ring',\n            likedByMe ? 'text-foreground' : 'text-muted-foreground',\n          )}\n        >\n          <ThumbsUp\n            aria-hidden=\"true\"\n            className={cn(\n              'size-[15px]',\n              likedByMe && 'fill-primary/85 stroke-foreground',\n            )}\n          />\n          <span data-testid=\"like-count\">{likes}</span>\n        </button>\n      </TooltipTrigger>\n      <TooltipContent\n        data-testid=\"liked-by\"\n        sideOffset={8}\n        className=\"max-w-[300px] rounded-[10px] px-2.5 py-[7px] text-[12.5px] leading-[1.4] font-semibold\"\n      >\n        {likedByText(tool)}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,QAAM,EAAE,MAAM,OAAO,UAAA,IAAc;AACnC,8BACG,SAAA,EACC,UAAA;AAAA,IAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,gBAAc;AAAA,QAEd,cAAY,QAAQ,IAAI;AAAA,QACxB,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,mBAAA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,YAAY,oBAAoB;AAAA,QAAA;AAAA,QAGlC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW;AAAA,gBACT;AAAA,gBACA,aAAa;AAAA,cAAA;AAAA,YACf;AAAA,UAAA;AAAA,UAEF,oBAAC,QAAA,EAAK,eAAY,cAAc,UAAA,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE1C;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,YAAY;AAAA,QACZ,WAAU;AAAA,QAET,sBAAY,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EACnB,GACF;AAEJ;"}

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

@@ -0,0 +1,18 @@
+import { CommunityTool } from '@igstack/app-catalog-shared-core';
+/**
+ * The hovered or focused row's screenshot, big, in the empty margin left of
+ * the feed: one reused panel whose top lines up with the row's, moved up only
+ * as far as it takes to stay in the window. The first one waits a moment;
+ * moving to another row swaps it at once. Nothing on a narrow window, on a
+ * touch screen, or while a dialog is open.
+ */
+export declare function MarginPreview({ list, tools, disabled, }: {
+    /**
+     * The element the rows are in; hover and focus are read off it. Inside it
+     * sits `[data-preview-column]`, the centred column whose left margin holds
+     * the preview, inside `[data-preview-scroller]`.
+     */
+    list: HTMLElement | null;
+    tools: CommunityTool[];
+    disabled: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;