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

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

@@ -0,0 +1,115 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { screenshotUrl } from "./FeedRow.js";
+const MIN_MARGIN = 420;
+const FIRST_SHOW_MS = 300;
+const GAP = 12;
+function MarginPreview({
+  list,
+  tools,
+  disabled
+}) {
+  var _a;
+  const [slug, setSlug] = useState(null);
+  const [box, setBox] = useState(null);
+  const rowRef = useRef(null);
+  const [canHover] = useState(
+    () => typeof window !== "undefined" && window.matchMedia("(hover: hover) and (pointer: fine)").matches
+  );
+  useEffect(() => {
+    const scroller = list == null ? void 0 : list.closest("[data-preview-scroller]");
+    const column = list == null ? void 0 : list.closest("[data-preview-column]");
+    if (!list || !scroller || !column || !canHover || disabled) return;
+    let timer;
+    let shown = false;
+    const place = () => {
+      const row = rowRef.current;
+      if (!(row == null ? void 0 : row.isConnected)) return null;
+      const area = scroller.getBoundingClientRect();
+      const margin = column.getBoundingClientRect().left - area.left;
+      if (margin < MIN_MARGIN) return null;
+      const width = margin - 2 * GAP;
+      const height = Math.round(width * 10 / 16);
+      const top = Math.max(
+        area.top,
+        Math.min(
+          row.getBoundingClientRect().top,
+          window.innerHeight - height - GAP
+        )
+      );
+      return { left: area.left + GAP, top, width, height };
+    };
+    const show = () => {
+      var _a2;
+      shown = true;
+      setSlug(((_a2 = rowRef.current) == null ? void 0 : _a2.dataset["slug"]) ?? null);
+      setBox(place());
+    };
+    const hide = () => {
+      clearTimeout(timer);
+      shown = false;
+      rowRef.current = null;
+      setSlug(null);
+      setBox(null);
+    };
+    const enter = (target) => {
+      const row = target instanceof Element ? target.closest('[data-testid="feed-row"]') : null;
+      if (!row || row === rowRef.current) return;
+      rowRef.current = row;
+      clearTimeout(timer);
+      if (shown) show();
+      else timer = setTimeout(show, FIRST_SHOW_MS);
+    };
+    const onPointerOver = (e) => enter(e.target);
+    const onFocusIn = (e) => enter(e.target);
+    const onFocusOut = (e) => {
+      if (!list.contains(e.relatedTarget)) hide();
+    };
+    const follow = () => {
+      if (shown) setBox(place());
+    };
+    list.addEventListener("pointerover", onPointerOver);
+    list.addEventListener("pointerleave", hide);
+    list.addEventListener("focusin", onFocusIn);
+    list.addEventListener("focusout", onFocusOut);
+    scroller.addEventListener("scroll", follow, { passive: true });
+    window.addEventListener("resize", follow);
+    return () => {
+      hide();
+      list.removeEventListener("pointerover", onPointerOver);
+      list.removeEventListener("pointerleave", hide);
+      list.removeEventListener("focusin", onFocusIn);
+      list.removeEventListener("focusout", onFocusOut);
+      scroller.removeEventListener("scroll", follow);
+      window.removeEventListener("resize", follow);
+    };
+  }, [list, canHover, disabled]);
+  const shot = (_a = tools.find((t) => t.slug === slug)) == null ? void 0 : _a.screenshotId;
+  if (disabled || !box || !shot) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-testid": "margin-preview",
+      className: "pointer-events-none fixed top-0 z-20 overflow-hidden rounded-[14px] border border-border bg-muted shadow-lg transition-transform duration-[120ms] ease-out",
+      style: {
+        left: box.left,
+        width: box.width,
+        height: box.height,
+        transform: `translateY(${box.top}px)`
+      },
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: screenshotUrl(shot, 1280),
+          alt: "",
+          className: "size-full object-cover object-left-top"
+        }
+      )
+    }
+  );
+}
+export {
+  MarginPreview
+};
+//# sourceMappingURL=MarginPreview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarginPreview.js","sources":["../../../../../src/modules/communityTools/ui/MarginPreview.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { useEffect, useRef, useState } from 'react'\nimport { screenshotUrl } from './FeedRow'\n\n/** Less free margin than this beside the column and there is no preview. */\nconst MIN_MARGIN = 420\n/** Hover or focus this long before the first preview shows. */\nconst FIRST_SHOW_MS = 300\nconst GAP = 12\n\ninterface Box {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\n/**\n * The hovered or focused row's screenshot, big, in the empty margin left of\n * the feed: one reused panel whose top lines up with the row's, moved up only\n * as far as it takes to stay in the window. The first one waits a moment;\n * moving to another row swaps it at once. Nothing on a narrow window, on a\n * touch screen, or while a dialog is open.\n */\nexport function MarginPreview({\n  list,\n  tools,\n  disabled,\n}: {\n  /**\n   * The element the rows are in; hover and focus are read off it. Inside it\n   * sits `[data-preview-column]`, the centred column whose left margin holds\n   * the preview, inside `[data-preview-scroller]`.\n   */\n  list: HTMLElement | null\n  tools: CommunityTool[]\n  disabled: boolean\n}) {\n  const [slug, setSlug] = useState<string | null>(null)\n  const [box, setBox] = useState<Box | null>(null)\n  const rowRef = useRef<HTMLElement | null>(null)\n  const [canHover] = useState(\n    () =>\n      typeof window !== 'undefined' &&\n      window.matchMedia('(hover: hover) and (pointer: fine)').matches,\n  )\n\n  useEffect(() => {\n    const scroller = list?.closest<HTMLElement>('[data-preview-scroller]')\n    const column = list?.closest<HTMLElement>('[data-preview-column]')\n    if (!list || !scroller || !column || !canHover || disabled) return\n    let timer: ReturnType<typeof setTimeout> | undefined\n    let shown = false\n\n    const place = (): Box | null => {\n      const row = rowRef.current\n      if (!row?.isConnected) return null\n      const area = scroller.getBoundingClientRect()\n      const margin = column.getBoundingClientRect().left - area.left\n      if (margin < MIN_MARGIN) return null\n      const width = margin - 2 * GAP\n      const height = Math.round((width * 10) / 16)\n      const top = Math.max(\n        area.top,\n        Math.min(\n          row.getBoundingClientRect().top,\n          window.innerHeight - height - GAP,\n        ),\n      )\n      return { left: area.left + GAP, top, width, height }\n    }\n    const show = () => {\n      shown = true\n      setSlug(rowRef.current?.dataset['slug'] ?? null)\n      setBox(place())\n    }\n    const hide = () => {\n      clearTimeout(timer)\n      shown = false\n      rowRef.current = null\n      setSlug(null)\n      setBox(null)\n    }\n    const enter = (target: EventTarget | null) => {\n      const row =\n        target instanceof Element\n          ? target.closest<HTMLElement>('[data-testid=\"feed-row\"]')\n          : null\n      if (!row || row === rowRef.current) return\n      rowRef.current = row\n      clearTimeout(timer)\n      if (shown) show()\n      else timer = setTimeout(show, FIRST_SHOW_MS)\n    }\n    const onPointerOver = (e: PointerEvent) => enter(e.target)\n    const onFocusIn = (e: FocusEvent) => enter(e.target)\n    const onFocusOut = (e: FocusEvent) => {\n      if (!list.contains(e.relatedTarget as Node | null)) hide()\n    }\n    // Scrolling under a still-hovered row keeps the panel on it.\n    const follow = () => {\n      if (shown) setBox(place())\n    }\n\n    list.addEventListener('pointerover', onPointerOver)\n    list.addEventListener('pointerleave', hide)\n    list.addEventListener('focusin', onFocusIn)\n    list.addEventListener('focusout', onFocusOut)\n    scroller.addEventListener('scroll', follow, { passive: true })\n    window.addEventListener('resize', follow)\n    return () => {\n      hide()\n      list.removeEventListener('pointerover', onPointerOver)\n      list.removeEventListener('pointerleave', hide)\n      list.removeEventListener('focusin', onFocusIn)\n      list.removeEventListener('focusout', onFocusOut)\n      scroller.removeEventListener('scroll', follow)\n      window.removeEventListener('resize', follow)\n    }\n  }, [list, canHover, disabled])\n\n  const shot = tools.find((t) => t.slug === slug)?.screenshotId\n  if (disabled || !box || !shot) return null\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid=\"margin-preview\"\n      className=\"pointer-events-none fixed top-0 z-20 overflow-hidden rounded-[14px] border border-border bg-muted shadow-lg transition-transform duration-[120ms] ease-out\"\n      style={{\n        left: box.left,\n        width: box.width,\n        height: box.height,\n        transform: `translateY(${box.top}px)`,\n      }}\n    >\n      <img\n        src={screenshotUrl(shot, 1280)}\n        alt=\"\"\n        className=\"size-full object-cover object-left-top\"\n      />\n    </div>\n  )\n}\n"],"names":["_a"],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+import { CommunityTool } from '@igstack/app-catalog-shared-core';
+/**
+ * The visitor's pinned tools, in the order they arranged them. Native drag and
+ * drop moves a tile; `onReorder` gets the whole new order. Nothing at all
+ * shows until there is a pin: the star on every row is the way in.
+ */
+export declare function MyToolsShelf({ pins, isLoading, onUnpin, onReorder, }: {
+    pins: CommunityTool[];
+    isLoading: boolean;
+    onUnpin: (tool: CommunityTool) => void;
+    onReorder: (slugs: string[]) => void;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Skeleton } from "../../../ui/skeleton.js";
+import { ShelfTile } from "./ShelfTile.js";
+const GRID = "grid grid-cols-2 gap-3.5 md:grid-cols-4";
+function moved(items, from, to) {
+  const next = [...items];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
+}
+function ShelfSkeleton() {
+  return /* @__PURE__ */ jsx("div", { "data-testid": "shelf-skeleton", "aria-busy": "true", className: GRID, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "overflow-hidden rounded-[14px] border border-border bg-card",
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[16/9.5] rounded-none" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 px-3 py-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-2/3" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-2/5" })
+        ] })
+      ]
+    },
+    i
+  )) });
+}
+function MyToolsShelf({
+  pins,
+  isLoading,
+  onUnpin,
+  onReorder
+}) {
+  const [dragFrom, setDragFrom] = useState(null);
+  const move = (from, to) => {
+    if (to < 0 || to >= pins.length || from === to) return;
+    onReorder(moved(pins, from, to).map((t) => t.slug));
+  };
+  if (!isLoading && pins.length === 0) return null;
+  let body;
+  if (isLoading) {
+    body = /* @__PURE__ */ jsx(ShelfSkeleton, {});
+  } else {
+    body = /* @__PURE__ */ jsx("div", { className: GRID, children: pins.map((tool, index) => /* @__PURE__ */ jsx(
+      ShelfTile,
+      {
+        tool,
+        dragging: dragFrom === index,
+        onUnpin: () => onUnpin(tool),
+        onMove: (step) => move(index, index + step),
+        dragProps: {
+          onDragStart: (e) => {
+            e.dataTransfer.effectAllowed = "move";
+            setDragFrom(index);
+          },
+          onDragOver: (e) => {
+            if (dragFrom !== null) e.preventDefault();
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            if (dragFrom !== null) move(dragFrom, index);
+            setDragFrom(null);
+          },
+          onDragEnd: () => setDragFrom(null)
+        }
+      },
+      tool.slug
+    )) });
+  }
+  return /* @__PURE__ */ jsxs("section", { "aria-labelledby": "my-tools-heading", "data-testid": "my-tools", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-baseline gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "h2",
+        {
+          id: "my-tools-heading",
+          className: "font-serif text-[19px] font-semibold",
+          children: "My tools"
+        }
+      ),
+      pins.length > 1 && /* @__PURE__ */ jsx("span", { className: "text-[12.5px] font-medium text-muted-foreground", children: "Drag to reorder" })
+    ] }),
+    body
+  ] });
+}
+export {
+  MyToolsShelf
+};
+//# sourceMappingURL=MyToolsShelf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MyToolsShelf.js","sources":["../../../../../src/modules/communityTools/ui/MyToolsShelf.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { useState } from 'react'\nimport { Skeleton } from '~/ui/skeleton'\nimport { ShelfTile } from './ShelfTile'\n\nconst GRID = 'grid grid-cols-2 gap-3.5 md:grid-cols-4'\n\nfunction moved<T>(items: T[], from: number, to: number): T[] {\n  const next = [...items]\n  const [item] = next.splice(from, 1)\n  next.splice(to, 0, item!)\n  return next\n}\n\n/** Same size as the real shelf, so nothing jumps when the pins arrive. */\nfunction ShelfSkeleton() {\n  return (\n    <div data-testid=\"shelf-skeleton\" aria-busy=\"true\" className={GRID}>\n      {[0, 1, 2, 3].map((i) => (\n        <div\n          key={i}\n          className=\"overflow-hidden rounded-[14px] border border-border bg-card\"\n        >\n          <Skeleton className=\"aspect-[16/9.5] rounded-none\" />\n          <div className=\"flex flex-col gap-1.5 px-3 py-3\">\n            <Skeleton className=\"h-2.5 w-2/3\" />\n            <Skeleton className=\"h-2.5 w-2/5\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/**\n * The visitor's pinned tools, in the order they arranged them. Native drag and\n * drop moves a tile; `onReorder` gets the whole new order. Nothing at all\n * shows until there is a pin: the star on every row is the way in.\n */\nexport function MyToolsShelf({\n  pins,\n  isLoading,\n  onUnpin,\n  onReorder,\n}: {\n  pins: CommunityTool[]\n  isLoading: boolean\n  onUnpin: (tool: CommunityTool) => void\n  onReorder: (slugs: string[]) => void\n}) {\n  const [dragFrom, setDragFrom] = useState<number | null>(null)\n\n  const move = (from: number, to: number) => {\n    if (to < 0 || to >= pins.length || from === to) return\n    onReorder(moved(pins, from, to).map((t) => t.slug))\n  }\n\n  if (!isLoading && pins.length === 0) return null\n\n  let body: React.ReactNode\n  if (isLoading) {\n    body = <ShelfSkeleton />\n  } else {\n    body = (\n      <div className={GRID}>\n        {pins.map((tool, index) => (\n          <ShelfTile\n            key={tool.slug}\n            tool={tool}\n            dragging={dragFrom === index}\n            onUnpin={() => onUnpin(tool)}\n            onMove={(step) => move(index, index + step)}\n            dragProps={{\n              onDragStart: (e) => {\n                e.dataTransfer.effectAllowed = 'move'\n                setDragFrom(index)\n              },\n              onDragOver: (e) => {\n                if (dragFrom !== null) e.preventDefault()\n              },\n              onDrop: (e) => {\n                e.preventDefault()\n                if (dragFrom !== null) move(dragFrom, index)\n                setDragFrom(null)\n              },\n              onDragEnd: () => setDragFrom(null),\n            }}\n          />\n        ))}\n      </div>\n    )\n  }\n\n  return (\n    <section aria-labelledby=\"my-tools-heading\" data-testid=\"my-tools\">\n      <div className=\"mb-3 flex items-baseline gap-3\">\n        <h2\n          id=\"my-tools-heading\"\n          className=\"font-serif text-[19px] font-semibold\"\n        >\n          My tools\n        </h2>\n        {pins.length > 1 && (\n          <span className=\"text-[12.5px] font-medium text-muted-foreground\">\n            Drag to reorder\n          </span>\n        )}\n      </div>\n      {body}\n    </section>\n  )\n}\n"],"names":[],"mappings":";;;;AAKA,MAAM,OAAO;AAEb,SAAS,MAAS,OAAY,MAAc,IAAiB;AAC3D,QAAM,OAAO,CAAC,GAAG,KAAK;AACtB,QAAM,CAAC,IAAI,IAAI,KAAK,OAAO,MAAM,CAAC;AAClC,OAAK,OAAO,IAAI,GAAG,IAAK;AACxB,SAAO;AACT;AAGA,SAAS,gBAAgB;AACvB,6BACG,OAAA,EAAI,eAAY,kBAAiB,aAAU,QAAO,WAAW,MAC3D,UAAA,CAAC,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACjB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAS,WAAU,+BAAA,CAA+B;AAAA,QACnD,qBAAC,OAAA,EAAI,WAAU,mCACb,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAS,WAAU,cAAA,CAAc;AAAA,UAClC,oBAAC,UAAA,EAAS,WAAU,cAAA,CAAc;AAAA,QAAA,EAAA,CACpC;AAAA,MAAA;AAAA,IAAA;AAAA,IAPK;AAAA,EAAA,CASR,GACH;AAEJ;AAOO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAE5D,QAAM,OAAO,CAAC,MAAc,OAAe;AACzC,QAAI,KAAK,KAAK,MAAM,KAAK,UAAU,SAAS,GAAI;AAChD,cAAU,MAAM,MAAM,MAAM,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAAA,EACpD;AAEA,MAAI,CAAC,aAAa,KAAK,WAAW,EAAG,QAAO;AAE5C,MAAI;AACJ,MAAI,WAAW;AACb,+BAAQ,eAAA,EAAc;AAAA,EACxB,OAAO;AACL,WACE,oBAAC,SAAI,WAAW,MACb,eAAK,IAAI,CAAC,MAAM,UACf;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACA,UAAU,aAAa;AAAA,QACvB,SAAS,MAAM,QAAQ,IAAI;AAAA,QAC3B,QAAQ,CAAC,SAAS,KAAK,OAAO,QAAQ,IAAI;AAAA,QAC1C,WAAW;AAAA,UACT,aAAa,CAAC,MAAM;AAClB,cAAE,aAAa,gBAAgB;AAC/B,wBAAY,KAAK;AAAA,UACnB;AAAA,UACA,YAAY,CAAC,MAAM;AACjB,gBAAI,aAAa,KAAM,GAAE,eAAA;AAAA,UAC3B;AAAA,UACA,QAAQ,CAAC,MAAM;AACb,cAAE,eAAA;AACF,gBAAI,aAAa,KAAM,MAAK,UAAU,KAAK;AAC3C,wBAAY,IAAI;AAAA,UAClB;AAAA,UACA,WAAW,MAAM,YAAY,IAAI;AAAA,QAAA;AAAA,MACnC;AAAA,MAnBK,KAAK;AAAA,IAAA,CAqBb,GACH;AAAA,EAEJ;AAEA,SACE,qBAAC,WAAA,EAAQ,mBAAgB,oBAAmB,eAAY,YACtD,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,WAAU;AAAA,UACX,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGA,KAAK,SAAS,yBACZ,QAAA,EAAK,WAAU,mDAAkD,UAAA,kBAAA,CAElE;AAAA,IAAA,GAEJ;AAAA,IACC;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,56 @@
+import { Person } from '@igstack/app-catalog-backend-core';
+import { PersonRef } from '@igstack/app-catalog-shared-core';
+export declare const FIELD_BOX = "flex min-h-10 w-full items-center gap-2 rounded-[10px] border border-border bg-card px-3 text-sm transition-[box-shadow,border-color] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/30";
+export declare const FIELD_BAD = "border-destructive ring-[3px] ring-destructive/15 focus-within:border-destructive focus-within:ring-destructive/15";
+export interface SuggestChip {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+}
+export interface SuggestOption {
+    key: string;
+    label: string;
+    sub?: string;
+    icon?: React.ReactNode;
+    /** The typed text is exactly this option, so Enter takes it unasked. */
+    exact?: boolean;
+}
+/**
+ * Chips with a text box that suggests what to add. ↑↓ move through the
+ * suggestions, Enter adds one (or hands the typed text to `onEnterText`),
+ * Backspace in an empty box takes the last chip off, Esc closes the list.
+ * With `textFirst`, nothing is highlighted until an arrow moves onto a
+ * suggestion: Enter adds the typed text, or the option it exactly names.
+ */
+export declare function SuggestInput({ id, chips, onRemove, placeholder, suggest, onPick, onEnterText, invalid, describedBy, disabled, atLimit, textFirst, }: {
+    id: string;
+    chips: SuggestChip[];
+    onRemove: (key: string) => void;
+    placeholder: string;
+    /** What to offer for the text typed so far. */
+    suggest: (query: string) => SuggestOption[];
+    onPick: (key: string) => void;
+    /** Enter with no suggestion chosen; return true when the text was used. */
+    onEnterText?: (text: string) => boolean;
+    invalid?: boolean;
+    describedBy?: string;
+    disabled?: boolean;
+    /** Nothing more can be added; chips can still come off. */
+    atLimit?: boolean;
+    textFirst?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function personName(person: Person): string;
+/**
+ * Owners from the person directory, searched by name or email, and people it
+ * does not know, by name: chips, remove.
+ */
+export declare function OwnerPicker({ id, persons, value, onChange, invalid, describedBy, disabled, }: {
+    id: string;
+    persons: Person[];
+    /** In the order they were added; `slug` is null outside the directory. */
+    value: PersonRef[];
+    onChange: (owners: PersonRef[]) => void;
+    invalid?: boolean;
+    describedBy?: string;
+    disabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,245 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X, Search } from "lucide-react";
+import { useId, useState } from "react";
+import { cn } from "../../../lib/utils.js";
+import { highlightMatches } from "../../../util/highlightMatches.js";
+import { PersonAvatar } from "./FeedRow.js";
+const FIELD_BOX = "flex min-h-10 w-full items-center gap-2 rounded-[10px] border border-border bg-card px-3 text-sm transition-[box-shadow,border-color] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/30";
+const FIELD_BAD = "border-destructive ring-[3px] ring-destructive/15 focus-within:border-destructive focus-within:ring-destructive/15";
+function SuggestInput({
+  id,
+  chips,
+  onRemove,
+  placeholder,
+  suggest,
+  onPick,
+  onEnterText,
+  invalid,
+  describedBy,
+  disabled,
+  atLimit,
+  textFirst = false
+}) {
+  const listId = useId();
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const [open, setOpen] = useState(false);
+  const [moved, setMoved] = useState(false);
+  const options = query.trim() ? suggest(query.trim()) : [];
+  const shown = open && options.length > 0;
+  const activeIndex = textFirst && !moved ? -1 : Math.min(active, options.length - 1);
+  const optionId = (i) => `${listId}-${i}`;
+  const pick = (key) => {
+    onPick(key);
+    setQuery("");
+    setActive(0);
+    setMoved(false);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!shown) {
+        setOpen(true);
+        return;
+      }
+      const step = e.key === "ArrowDown" ? 1 : -1;
+      setActive(Math.min(options.length - 1, Math.max(0, activeIndex + step)));
+      setMoved(true);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const option = !shown ? void 0 : activeIndex >= 0 ? options[activeIndex] : options.find((o) => o.exact);
+      if (option) pick(option.key);
+      else if (query.trim() && (onEnterText == null ? void 0 : onEnterText(query))) setQuery("");
+    } else if (e.key === "Backspace" && !query && chips.length > 0) {
+      onRemove(chips[chips.length - 1].key);
+    } else if (e.key === "Escape" && shown) {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          FIELD_BOX,
+          "flex-wrap gap-1.5 px-2 py-[5px]",
+          invalid && FIELD_BAD
+        ),
+        children: [
+          chips.map((chip) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-testid": "picker-chip",
+              className: "inline-flex h-7 items-center gap-1.5 rounded-full bg-secondary pr-1 pl-[3px] text-[13px] font-semibold",
+              children: [
+                chip.icon,
+                /* @__PURE__ */ jsx("span", { "data-testid": "picker-chip-label", children: chip.label }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${chip.label}`,
+                    disabled,
+                    onClick: () => onRemove(chip.key),
+                    className: "inline-flex size-5 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring",
+                    children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3" })
+                  }
+                )
+              ]
+            },
+            chip.key
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              type: "text",
+              role: "combobox",
+              autoComplete: "off",
+              "aria-expanded": shown,
+              "aria-controls": shown ? listId : void 0,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": shown && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": describedBy,
+              disabled: disabled || atLimit,
+              placeholder,
+              value: query,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setActive(0);
+                setMoved(false);
+                setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              onBlur: () => setOpen(false),
+              onKeyDown,
+              className: "h-7 min-w-32 flex-1 bg-transparent px-1 outline-none placeholder:text-muted-foreground"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Search,
+            {
+              "aria-hidden": "true",
+              className: "size-4 text-muted-foreground/70"
+            }
+          )
+        ]
+      }
+    ),
+    shown && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: listId,
+        role: "listbox",
+        className: "absolute inset-x-0 top-full z-10 mt-0.5 flex flex-col rounded-[10px] border border-border bg-card p-1 shadow-lg",
+        children: options.map((option, i) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            id: optionId(i),
+            role: "option",
+            "aria-selected": i === activeIndex,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => pick(option.key),
+            onMouseEnter: () => setActive(i),
+            className: cn(
+              "flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-[7px] text-[13.5px] hover:bg-accent",
+              i === activeIndex && "bg-accent"
+            ),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs("span", { className: "flex flex-col leading-tight", children: [
+                /* @__PURE__ */ jsx("b", { className: "font-semibold", children: highlightMatches(option.label, query.trim()) }),
+                option.sub && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.sub })
+              ] })
+            ]
+          },
+          option.key
+        ))
+      }
+    )
+  ] });
+}
+function personName(person) {
+  return `${person.firstName} ${person.lastName}`.trim() || person.slug;
+}
+const MAX_OWNERS = 5;
+const MAX_SUGGESTIONS = 6;
+const OWNER_NAME_MAX = 80;
+const NAMED = "named:";
+function ownerKey(owner) {
+  return owner.slug ?? `${NAMED}${owner.name}`;
+}
+function OwnerPicker({
+  id,
+  persons,
+  value,
+  onChange,
+  invalid,
+  describedBy,
+  disabled
+}) {
+  const full = value.length >= MAX_OWNERS;
+  const taken = new Set(value.map(ownerKey));
+  return /* @__PURE__ */ jsx(
+    SuggestInput,
+    {
+      id,
+      chips: value.map((owner) => ({
+        key: ownerKey(owner),
+        label: owner.name,
+        icon: /* @__PURE__ */ jsx(PersonAvatar, { name: owner.name })
+      })),
+      onRemove: (key) => onChange(value.filter((o) => ownerKey(o) !== key)),
+      placeholder: full ? "Five owners at most" : "Add a person",
+      disabled,
+      atLimit: full,
+      invalid,
+      describedBy,
+      suggest: (query) => {
+        const words = query.toLowerCase().split(/\s+/);
+        const people = persons.filter((p) => !taken.has(p.slug)).filter((p) => {
+          const text = `${personName(p)} ${p.email ?? p.slug}`.toLowerCase();
+          return words.every((w) => text.includes(w));
+        }).slice(0, MAX_SUGGESTIONS).map((p) => ({
+          key: p.slug,
+          label: personName(p),
+          sub: p.email ?? p.slug,
+          icon: /* @__PURE__ */ jsx(PersonAvatar, { name: personName(p) })
+        }));
+        const name = query.trim().slice(0, OWNER_NAME_MAX);
+        const known = people.some(
+          (p) => p.label.toLowerCase() === name.toLowerCase()
+        );
+        if (known || taken.has(`${NAMED}${name}`)) return people;
+        return [
+          ...people,
+          {
+            key: `${NAMED}${name}`,
+            label: `Add “${name}”`,
+            sub: "Not in the people list",
+            icon: /* @__PURE__ */ jsx(PersonAvatar, { name })
+          }
+        ];
+      },
+      onPick: (key) => {
+        if (key.startsWith(NAMED)) {
+          onChange([...value, { slug: null, name: key.slice(NAMED.length) }]);
+          return;
+        }
+        const person = persons.find((p) => p.slug === key);
+        if (person)
+          onChange([...value, { slug: key, name: personName(person) }]);
+      }
+    }
+  );
+}
+export {
+  FIELD_BAD,
+  FIELD_BOX,
+  OwnerPicker,
+  SuggestInput,
+  personName
+};
+//# sourceMappingURL=OwnerPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OwnerPicker.js","sources":["../../../../../src/modules/communityTools/ui/OwnerPicker.tsx"],"sourcesContent":["import type { Person } from '@igstack/app-catalog-backend-core'\nimport type { PersonRef } from '@igstack/app-catalog-shared-core'\nimport { Search, X } from 'lucide-react'\nimport { useId, useState } from 'react'\nimport { cn } from '~/lib/utils'\nimport { highlightMatches } from '~/util/highlightMatches'\nimport { PersonAvatar } from './FeedRow'\n\nexport const FIELD_BOX =\n  'flex min-h-10 w-full items-center gap-2 rounded-[10px] border border-border bg-card px-3 text-sm transition-[box-shadow,border-color] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/30'\n\nexport const FIELD_BAD =\n  'border-destructive ring-[3px] ring-destructive/15 focus-within:border-destructive focus-within:ring-destructive/15'\n\nexport interface SuggestChip {\n  key: string\n  label: string\n  icon?: React.ReactNode\n}\n\nexport interface SuggestOption {\n  key: string\n  label: string\n  sub?: string\n  icon?: React.ReactNode\n  /** The typed text is exactly this option, so Enter takes it unasked. */\n  exact?: boolean\n}\n\n/**\n * Chips with a text box that suggests what to add. ↑↓ move through the\n * suggestions, Enter adds one (or hands the typed text to `onEnterText`),\n * Backspace in an empty box takes the last chip off, Esc closes the list.\n * With `textFirst`, nothing is highlighted until an arrow moves onto a\n * suggestion: Enter adds the typed text, or the option it exactly names.\n */\nexport function SuggestInput({\n  id,\n  chips,\n  onRemove,\n  placeholder,\n  suggest,\n  onPick,\n  onEnterText,\n  invalid,\n  describedBy,\n  disabled,\n  atLimit,\n  textFirst = false,\n}: {\n  id: string\n  chips: SuggestChip[]\n  onRemove: (key: string) => void\n  placeholder: string\n  /** What to offer for the text typed so far. */\n  suggest: (query: string) => SuggestOption[]\n  onPick: (key: string) => void\n  /** Enter with no suggestion chosen; return true when the text was used. */\n  onEnterText?: (text: string) => boolean\n  invalid?: boolean\n  describedBy?: string\n  disabled?: boolean\n  /** Nothing more can be added; chips can still come off. */\n  atLimit?: boolean\n  textFirst?: boolean\n}) {\n  const listId = useId()\n  const [query, setQuery] = useState('')\n  const [active, setActive] = useState(0)\n  const [open, setOpen] = useState(false)\n  // An arrow moved the highlight since the text last changed.\n  const [moved, setMoved] = useState(false)\n  const options = query.trim() ? suggest(query.trim()) : []\n  const shown = open && options.length > 0\n  const activeIndex =\n    textFirst && !moved ? -1 : Math.min(active, options.length - 1)\n  const optionId = (i: number) => `${listId}-${i}`\n\n  const pick = (key: string) => {\n    onPick(key)\n    setQuery('')\n    setActive(0)\n    setMoved(false)\n  }\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      e.preventDefault()\n      // After Esc the list is shut; an arrow brings it back.\n      if (!shown) {\n        setOpen(true)\n        return\n      }\n      const step = e.key === 'ArrowDown' ? 1 : -1\n      setActive(Math.min(options.length - 1, Math.max(0, activeIndex + step)))\n      setMoved(true)\n    } else if (e.key === 'Enter') {\n      // Never submits the form: Enter here means \"add this\".\n      e.preventDefault()\n      const option = !shown\n        ? undefined\n        : activeIndex >= 0\n          ? options[activeIndex]\n          : options.find((o) => o.exact)\n      if (option) pick(option.key)\n      else if (query.trim() && onEnterText?.(query)) setQuery('')\n    } else if (e.key === 'Backspace' && !query && chips.length > 0) {\n      onRemove(chips[chips.length - 1]!.key)\n    } else if (e.key === 'Escape' && shown) {\n      // The dialog leaves an open list's Escape to it (see ToolFormDialog).\n      e.preventDefault()\n      setOpen(false)\n    }\n  }\n\n  return (\n    <div className=\"relative\">\n      <div\n        className={cn(\n          FIELD_BOX,\n          'flex-wrap gap-1.5 px-2 py-[5px]',\n          invalid && FIELD_BAD,\n        )}\n      >\n        {chips.map((chip) => (\n          <span\n            key={chip.key}\n            data-testid=\"picker-chip\"\n            className=\"inline-flex h-7 items-center gap-1.5 rounded-full bg-secondary pr-1 pl-[3px] text-[13px] font-semibold\"\n          >\n            {chip.icon}\n            <span data-testid=\"picker-chip-label\">{chip.label}</span>\n            <button\n              type=\"button\"\n              aria-label={`Remove ${chip.label}`}\n              disabled={disabled}\n              onClick={() => onRemove(chip.key)}\n              className=\"inline-flex size-5 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring\"\n            >\n              <X aria-hidden=\"true\" className=\"size-3\" />\n            </button>\n          </span>\n        ))}\n        <input\n          id={id}\n          type=\"text\"\n          role=\"combobox\"\n          autoComplete=\"off\"\n          aria-expanded={shown}\n          aria-controls={shown ? listId : undefined}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={\n            shown && activeIndex >= 0 ? optionId(activeIndex) : undefined\n          }\n          aria-invalid={invalid || undefined}\n          aria-describedby={describedBy}\n          disabled={disabled || atLimit}\n          placeholder={placeholder}\n          value={query}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setActive(0)\n            setMoved(false)\n            setOpen(true)\n          }}\n          onFocus={() => setOpen(true)}\n          onBlur={() => setOpen(false)}\n          onKeyDown={onKeyDown}\n          className=\"h-7 min-w-32 flex-1 bg-transparent px-1 outline-none placeholder:text-muted-foreground\"\n        />\n        <Search\n          aria-hidden=\"true\"\n          className=\"size-4 text-muted-foreground/70\"\n        />\n      </div>\n      {shown && (\n        <ul\n          id={listId}\n          role=\"listbox\"\n          className=\"absolute inset-x-0 top-full z-10 mt-0.5 flex flex-col rounded-[10px] border border-border bg-card p-1 shadow-lg\"\n        >\n          {options.map((option, i) => (\n            <li\n              key={option.key}\n              id={optionId(i)}\n              role=\"option\"\n              aria-selected={i === activeIndex}\n              // Keeps the caret in the box, so the next one can be typed at once.\n              onMouseDown={(e) => e.preventDefault()}\n              onClick={() => pick(option.key)}\n              onMouseEnter={() => setActive(i)}\n              className={cn(\n                'flex cursor-pointer items-center gap-2.5 rounded-lg px-2 py-[7px] text-[13.5px] hover:bg-accent',\n                i === activeIndex && 'bg-accent',\n              )}\n            >\n              {option.icon}\n              <span className=\"flex flex-col leading-tight\">\n                <b className=\"font-semibold\">\n                  {highlightMatches(option.label, query.trim())}\n                </b>\n                {option.sub && (\n                  <span className=\"text-xs text-muted-foreground\">\n                    {option.sub}\n                  </span>\n                )}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nexport function personName(person: Person): string {\n  return `${person.firstName} ${person.lastName}`.trim() || person.slug\n}\n\nconst MAX_OWNERS = 5\nconst MAX_SUGGESTIONS = 6\nconst OWNER_NAME_MAX = 80\n/** The option that adds the typed text as an owner outside the directory. */\nconst NAMED = 'named:'\n\nfunction ownerKey(owner: PersonRef): string {\n  return owner.slug ?? `${NAMED}${owner.name}`\n}\n\n/**\n * Owners from the person directory, searched by name or email, and people it\n * does not know, by name: chips, remove.\n */\nexport function OwnerPicker({\n  id,\n  persons,\n  value,\n  onChange,\n  invalid,\n  describedBy,\n  disabled,\n}: {\n  id: string\n  persons: Person[]\n  /** In the order they were added; `slug` is null outside the directory. */\n  value: PersonRef[]\n  onChange: (owners: PersonRef[]) => void\n  invalid?: boolean\n  describedBy?: string\n  disabled?: boolean\n}) {\n  const full = value.length >= MAX_OWNERS\n  const taken = new Set(value.map(ownerKey))\n\n  return (\n    <SuggestInput\n      id={id}\n      chips={value.map((owner) => ({\n        key: ownerKey(owner),\n        label: owner.name,\n        icon: <PersonAvatar name={owner.name} />,\n      }))}\n      onRemove={(key) => onChange(value.filter((o) => ownerKey(o) !== key))}\n      placeholder={full ? 'Five owners at most' : 'Add a person'}\n      disabled={disabled}\n      atLimit={full}\n      invalid={invalid}\n      describedBy={describedBy}\n      suggest={(query) => {\n        const words = query.toLowerCase().split(/\\s+/)\n        const people = persons\n          .filter((p) => !taken.has(p.slug))\n          .filter((p) => {\n            const text = `${personName(p)} ${p.email ?? p.slug}`.toLowerCase()\n            return words.every((w) => text.includes(w))\n          })\n          .slice(0, MAX_SUGGESTIONS)\n          .map((p) => ({\n            key: p.slug,\n            label: personName(p),\n            sub: p.email ?? p.slug,\n            icon: <PersonAvatar name={personName(p)} />,\n          }))\n        // Someone the directory does not know is still someone to ask.\n        const name = query.trim().slice(0, OWNER_NAME_MAX)\n        const known = people.some(\n          (p) => p.label.toLowerCase() === name.toLowerCase(),\n        )\n        if (known || taken.has(`${NAMED}${name}`)) return people\n        return [\n          ...people,\n          {\n            key: `${NAMED}${name}`,\n            label: `Add “${name}”`,\n            sub: 'Not in the people list',\n            icon: <PersonAvatar name={name} />,\n          },\n        ]\n      }}\n      onPick={(key) => {\n        if (key.startsWith(NAMED)) {\n          onChange([...value, { slug: null, name: key.slice(NAMED.length) }])\n          return\n        }\n        const person = persons.find((p) => p.slug === key)\n        if (person)\n          onChange([...value, { slug: key, name: personName(person) }])\n      }}\n    />\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+/**
+ * The star on rows, tiles and the card: pins the tool to My tools, or takes it
+ * off. The card's is `labelled`, a bordered button that says Pin or Pinned;
+ * a feed row's is `small`, a 32 px target in its meta line.
+ */
+export declare function PinButton({ pinned, name, onToggle, labelled, small, busy, }: {
+    pinned: boolean;
+    name: string;
+    onToggle: () => void;
+    labelled?: boolean;
+    small?: boolean;
+    /** The pin is being saved; the star shows the state it will have. */
+    busy?: boolean;
+}): import("react/jsx-runtime").JSX.Element;