@qoretechnologies/reqraft 0.10.20 → 0.10.26

package/dist/components/supportTicket/ReferencePicker.d.ts

@@ -0,0 +1,87 @@
+import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
+import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
+import { ReactNode } from 'react';
+import { IInterfaceReference } from './meta';
+/**
+ * One interface in the list. A bare string is the name and nothing else — the common
+ * case, and what a host that has only names can keep passing. The object form adds the
+ * two things a name alone can't disambiguate: a `description` second line (what the
+ * thing is for, an owning group, a path) and a `badge` (a version, a run count, a
+ * status tag). Search reads both the name and the description, since both are on screen.
+ */
+export interface IReferencePickerItem {
+    /** the interface name — this is what gets stored on the reference */
+    name: string;
+    /** a muted second line under the name */
+    description?: string;
+    /** trailing badge, before the add/remove icon */
+    badge?: TReqoreBadge | TReqoreBadge[];
+}
+export type TReferencePickerItem = string | IReferencePickerItem;
+/** `auto` picks `stacked` from the picker's own measured width. */
+export type TReferencePickerLayout = 'auto' | 'columns' | 'stacked';
+/** `auto` lifts into a modal on a phone-sized viewport, when `onClose` is given. */
+export type TReferencePickerPresentation = 'auto' | 'inline' | 'modal';
+export interface IReferencePickerProps {
+    /** the interface kinds listed down the left pane */
+    kinds: string[];
+    /** the kind whose interfaces `items` holds */
+    kind: string;
+    onKindChange: (kind: string) => void;
+    /**
+     * The selected kind's interfaces — bare names, or objects carrying a description
+     * and a badge. Fetching is the host's job; it knows where they come from and how
+     * to cache them.
+     */
+    items: TReferencePickerItem[];
+    /** `items` is still being fetched, so the right pane shows a spinner rather than
+     *  claiming the kind is empty */
+    loading?: boolean;
+    /**
+     * The host's fetch for this kind failed. Shown in place of the list, because an
+     * empty pane would otherwise read as "this instance has no workflows" — which is a
+     * different and much more alarming statement than "we couldn't ask".
+     */
+    error?: string;
+    /** Retry the failed fetch. The error state is pressable when given. */
+    onRetry?: () => void;
+    /** Already-picked references. Anything of the current kind that is already picked
+     *  renders selected in place — never removed from the list. */
+    picked?: IInterfaceReference[];
+    onAdd: (reference: IInterfaceReference) => void;
+    /** Un-pick a reference from inside the picker. Without it a picked row still shows
+     *  as picked, it just can't be toggled back off here. */
+    onRemove?: (reference: IInterfaceReference) => void;
+    /** the whole picker is inert (e.g. a reply is in flight) */
+    disabled?: boolean;
+    /** Per-kind icon. Consumers with their own icon vocabulary (the IDE) pass one; the
+     *  built-in per-kind default is used when omitted. */
+    resolveInterfaceIcon?: (kind: string) => IReqoreIconName;
+    /**
+     * Per-kind reading name — "Value maps" for `value-map`. The kind id is a wire value
+     * and never reaches the user; this is what does. Search matches both, so typing
+     * either the id or the label finds the kind. Defaults to the built-in Qorus
+     * vocabulary.
+     */
+    resolveKindLabel?: (kind: string) => string;
+    /** the underline / selected-kind colour. Defaults to the support surfaces' violet. */
+    accent?: string;
+    /** shown above the panes — the composer's picked-reference chips, typically */
+    header?: ReactNode;
+    /**
+     * Dismiss the picker. Required for the modal presentation (a modal with no way out
+     * is a trap); the inline presentation ignores it, since the host's own toggle is
+     * what closes the picker there.
+     */
+    onClose?: () => void;
+    /** Modal heading. */
+    title?: string;
+    /** How the panes arrange. `auto` (default) stacks below `STACK_BREAKPOINT` of the
+     *  picker's own width; the explicit values are what stories pin. */
+    layout?: TReferencePickerLayout;
+    /** Where the picker renders. `auto` (default) goes to a modal on a phone-sized
+     *  viewport when `onClose` is given, and stays inline otherwise. */
+    presentation?: TReferencePickerPresentation;
+}
+export declare const ReferencePicker: ({ kinds, kind, onKindChange, items, loading, error, onRetry, picked, onAdd, onRemove, disabled, resolveInterfaceIcon, resolveKindLabel, accent, header, onClose, title, layout, presentation, }: IReferencePickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReferencePicker.d.ts.map

package/dist/components/supportTicket/ReferencePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferencePicker.d.ts","sourceRoot":"","sources":["../../../src/components/supportTicket/ReferencePicker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAC5E,OAAO,EAAE,SAAS,EAA6C,MAAM,OAAO,CAAC;AAG7E,OAAO,EAGL,mBAAmB,EACpB,MAAM,QAAQ,CAAC;AA6JhB;;;;;;GAMG;AACH,MAAM,WAAW,oBAAoB;IACnC,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,KAAK,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;CACvC;AAED,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,oBAAoB,CAAC;AAEjE,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;AACpE,oFAAoF;AACpF,MAAM,MAAM,4BAA4B,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvE,MAAM,WAAW,qBAAqB;IACpC,oDAAoD;IACpD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;;OAIG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;IAC9B;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;mEAC+D;IAC/D,MAAM,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,EAAE,CAAC,SAAS,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChD;6DACyD;IACzD,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACpD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;0DACsD;IACtD,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,eAAe,CAAC;IACzD;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IAC5C,sFAAsF;IACtF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;wEACoE;IACpE,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;wEACoE;IACpE,YAAY,CAAC,EAAE,4BAA4B,CAAC;CAC7C;AAoDD,eAAO,MAAM,eAAe,oMAoBzB,qBAAqB,4CA0OvB,CAAC"}

package/dist/components/supportTicket/ReferencePicker.js

@@ -0,0 +1,295 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReferencePicker = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var reqore_1 = require("@qoretechnologies/reqore");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var scrollbar_1 = require("../../helpers/scrollbar");
+var meta_1 = require("./meta");
+/*
+ * The interface browser: kinds on one side, the selected kind's interfaces on the
+ * other, and one search field that scopes both. Sits above a ticket composer, toggled
+ * by the composer's "Reference interfaces" action.
+ *
+ * The host owns the data. Which kinds exist and what lives under one are questions only
+ * the surrounding app can answer — the IDE lists them off the customer's live instance,
+ * a story hands over fixtures — so this component takes `kinds` and the selected kind's
+ * `items` and does the rest: selection, search, and turning a click into a reference.
+ * Nothing here fetches; `kind` is the only contract, and the host maps it onto whatever
+ * transport it has.
+ *
+ * Three rules the layout follows, in order of how often they bite:
+ *
+ * - Search filters the kind list down to what matches, and keeps ONE extra row: the
+ *   selected kind, dimmed, when the query doesn't match it. That row is what stops the
+ *   right-hand results outliving the kind they belong to — without it you'd see three
+ *   interfaces and no way to tell what they were. Everything else goes, because a match
+ *   that survives only by scrolling past nine dimmed rows isn't a match the user found.
+ * - A picked interface STAYS in the list, selected. Dropping it on pick was a
+ *   disappearing act with no undo inside the picker; now the row toggles.
+ * - Below `STACK_BREAKPOINT` of its OWN width — not the viewport's, since this thing
+ *   lives inside composers and drawers — the two panes collapse into one column and the
+ *   selected kind's interfaces render directly beneath it. On a phone it goes further
+ *   and lifts into a modal, because inline it would own the whole screen.
+ */
+/** How tall the panes get before they scroll: side by side, stacked, and in the modal. */
+var COLUMNS_MAX_HEIGHT = '220px';
+var STACKED_MAX_HEIGHT = '280px';
+var MODAL_MAX_HEIGHT = '60vh';
+var KIND_PANE_WIDTH = 150;
+/** Container width (not viewport) below which the panes stack into one column. */
+var STACK_BREAKPOINT = 420;
+var BORDER = 'rgba(123, 104, 238, 0.25)';
+/*
+ * Marks the selected kind when the search doesn't match it — it's only still on the
+ * list to say what the interfaces on the right are. Quiet, but pickable.
+ */
+var DIMMED_CLASS = 'reqore-reference-picker-dimmed';
+/*
+ * Marks an already-referenced row. Reqore paints `selected` purely through styled
+ * props — no class, no aria state — so "is this row picked" is unobservable from the
+ * outside without a marker of our own. Stable, so a host can style on it too.
+ */
+var PICKED_CLASS = 'reqore-reference-picker-picked';
+/*
+ * A scroll pane with the thin, unobtrusive scrollbar the Qonsole surfaces use
+ * (transparent track, translucent rounded thumb) rather than the raw browser one.
+ * webkit-only, like those surfaces: setting `scrollbar-width` as well would let
+ * Chromium override this custom 6px with its own, wider, "thin".
+ */
+var Pane = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  max-height: ", ";\n  overflow-y: auto;\n  padding: 4px;\n\n  ", "\n"], ["\n  ", "\n  max-height: ", ";\n  overflow-y: auto;\n  padding: 4px;\n\n  ", "\n"])), function (_a) {
+    var $right = _a.$right;
+    return $right
+        ? 'flex: 1; min-width: 0;'
+        : "width: ".concat(KIND_PANE_WIDTH, "px; flex: none; border-right: 1px solid ").concat(BORDER, ";");
+}, function (_a) {
+    var $maxHeight = _a.$maxHeight;
+    return $maxHeight;
+}, scrollbar_1.thinScrollbar);
+/** The stacked counterpart of `Pane` — one column, so one scroll region. */
+var Stack = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-height: ", ";\n  overflow-y: auto;\n  padding: 4px;\n\n  ", "\n"], ["\n  max-height: ", ";\n  overflow-y: auto;\n  padding: 4px;\n\n  ", "\n"])), function (_a) {
+    var $maxHeight = _a.$maxHeight;
+    return $maxHeight;
+}, scrollbar_1.thinScrollbar);
+/*
+ * The selected kind's interfaces once the panes have collapsed. The indent and the
+ * rule are the only things left saying "these belong to the row above" — in the
+ * two-pane layout the divider between the panes says it.
+ */
+var Nested = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 2px 0 4px 10px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n"], ["\n  margin: 2px 0 4px 10px;\n  padding-left: 8px;\n  border-left: 1px solid ", ";\n"])), BORDER);
+var Frame = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  overflow: hidden;\n\n  /* Rows the search doesn't match. Set here rather than per row so the rule is\n     stated once, and on the row itself (not a wrapper) so it can't disturb the\n     menu's own flex layout. */\n  .", " {\n    opacity: 0.35;\n  }\n"], ["\n  ", "\n  overflow: hidden;\n\n  /* Rows the search doesn't match. Set here rather than per row so the rule is\n     stated once, and on the row itself (not a wrapper) so it can't disturb the\n     menu's own flex layout. */\n  .", " {\n    opacity: 0.35;\n  }\n"])), function (_a) {
+    var $bare = _a.$bare;
+    return ($bare ? '' : "border: 1px solid ".concat(BORDER, "; border-radius: 8px;"));
+}, DIMMED_CLASS);
+var Panes = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+/*
+ * An underline search field. The input itself is borderless (`flat transparent`) and
+ * this wrapper carries the single bottom border, so the search reads as a line rather
+ * than a full grey box — including on focus, where Reqore's default is a 2px outline
+ * around the whole control. Suppressing that outline and brightening the underline
+ * instead keeps a focus cue without the box. The selector is scoped under this wrapper,
+ * so it outranks Reqore's without `!important`.
+ *
+ * `$active` (the field has a query) holds the underline at full accent, so a filtered
+ * list is legible as filtered at a glance — the same signal `intent='info'` carries on
+ * a plain filter control, spoken in this surface's own accent.
+ */
+var Search = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 6px 4px 4px;\n  border-bottom: 1px solid\n    ", ";\n  transition: border-color 0.15s ease-out;\n\n  .reqore-control-wrapper:focus-within {\n    outline: none;\n  }\n  &:focus-within {\n    border-bottom-color: ", ";\n  }\n"], ["\n  padding: 6px 4px 4px;\n  border-bottom: 1px solid\n    ", ";\n  transition: border-color 0.15s ease-out;\n\n  .reqore-control-wrapper:focus-within {\n    outline: none;\n  }\n  &:focus-within {\n    border-bottom-color: ", ";\n  }\n"])), function (_a) {
+    var $accent = _a.$accent, $active = _a.$active;
+    return ($active ? $accent : "".concat($accent, "80"));
+}, function (_a) {
+    var $accent = _a.$accent;
+    return $accent;
+});
+var Note = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  opacity: 0.4;\n  padding: 8px 6px;\n  font-size: 12px;\n"], ["\n  opacity: 0.4;\n  padding: 8px 6px;\n  font-size: 12px;\n"])));
+var DEFAULT_ACCENT = '#762f7e';
+/*
+ * How a picked row reads: `info`, tinted rather than filled.
+ *
+ * Two Reqore details make this less obvious than `selected` + `intent`:
+ *
+ * - `selected` becomes `active` on the button, and the active branch paints a solid
+ *   background from the intent while ignoring `minimal` and `transparent` outright.
+ *   So `selected` can't be softened — it has to go, and `minimal` carries the state.
+ * - `ReqoreMenuItem` sets `transparent` on every row, and `transparent` short-circuits
+ *   `minimal`'s tint to nothing. Turning it off for picked rows is what lets the tint
+ *   land, and it's only spread when the row IS picked — a `transparent: undefined` on
+ *   the others would override the menu item's own default and flatten them all.
+ *
+ * The point of the tint: a solid blue bar is too much weight for "this one's already
+ * in your list". The rows still up for choosing are what the user is reading, and they
+ * should stay the loudest thing in the pane.
+ */
+var pickedItemProps = function (isPicked) {
+    return isPicked ? { intent: 'info', minimal: true, transparent: false } : {};
+};
+/**
+ * Watches an element's own width, because the viewport's is the wrong question for
+ * anything that lives inside a composer, a drawer or a side panel — those stay narrow
+ * on a 2560px screen. A callback ref rather than `useRef` so the observer attaches the
+ * moment the node mounts; a ref that never gets attached silently reports "wide"
+ * forever, which is exactly the bug this is meant to catch.
+ */
+var useIsNarrow = function (enabled) {
+    var _a = (0, react_1.useState)(null), node = _a[0], setNode = _a[1];
+    var _b = (0, react_1.useState)(false), narrow = _b[0], setNarrow = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (!enabled || !node || typeof ResizeObserver === 'undefined') {
+            return undefined;
+        }
+        var observer = new ResizeObserver(function (_a) {
+            var entry = _a[0];
+            setNarrow(entry.contentRect.width < STACK_BREAKPOINT);
+        });
+        observer.observe(node);
+        return function () { return observer.disconnect(); };
+    }, [enabled, node]);
+    return [setNode, narrow];
+};
+/** Phone-sized viewport. Its own media query rather than reqore's `isMobile`, which
+ *  is pinned to `false` under NODE_ENV=test and so never fires in a story run. */
+var usePhoneViewport = function (enabled) {
+    var _a = (0, react_1.useState)(false), phone = _a[0], setPhone = _a[1];
+    (0, react_1.useEffect)(function () {
+        if (!enabled || typeof window === 'undefined' || !window.matchMedia) {
+            return undefined;
+        }
+        var query = window.matchMedia('(max-width: 480px)');
+        var sync = function () { return setPhone(query.matches); };
+        sync();
+        query.addEventListener('change', sync);
+        return function () { return query.removeEventListener('change', sync); };
+    }, [enabled]);
+    return phone;
+};
+var ReferencePicker = function (_a) {
+    var kinds = _a.kinds, kind = _a.kind, onKindChange = _a.onKindChange, items = _a.items, loading = _a.loading, error = _a.error, onRetry = _a.onRetry, picked = _a.picked, onAdd = _a.onAdd, onRemove = _a.onRemove, disabled = _a.disabled, _b = _a.resolveInterfaceIcon, resolveInterfaceIcon = _b === void 0 ? meta_1.defaultInterfaceIcon : _b, _c = _a.resolveKindLabel, resolveKindLabel = _c === void 0 ? meta_1.defaultInterfaceKindLabel : _c, _d = _a.accent, accent = _d === void 0 ? DEFAULT_ACCENT : _d, header = _a.header, onClose = _a.onClose, _e = _a.title, title = _e === void 0 ? 'Reference interfaces' : _e, _f = _a.layout, layout = _f === void 0 ? 'auto' : _f, _g = _a.presentation, presentation = _g === void 0 ? 'auto' : _g;
+    var _h = (0, react_1.useState)(''), query = _h[0], setQuery = _h[1];
+    var needle = query.trim().toLowerCase();
+    var _j = useIsNarrow(layout === 'auto'), frameRef = _j[0], narrow = _j[1];
+    var phone = usePhoneViewport(presentation === 'auto');
+    var asModal = presentation === 'modal' || (presentation === 'auto' && phone && !!onClose);
+    var stacked = layout === 'stacked' || (layout === 'auto' && narrow);
+    var label = resolveKindLabel(kind);
+    /* A kind matches on its id or its reading name, so "value map" and `value-map`
+     * both find it. */
+    var matchesKind = (0, react_1.useCallback)(function (candidate) {
+        return !needle ||
+            candidate.toLowerCase().includes(needle) ||
+            resolveKindLabel(candidate).toLowerCase().includes(needle);
+    }, [needle, resolveKindLabel]);
+    /* The matches, plus the selected kind whether or not it matched — it keeps its
+     * natural position rather than jumping to the top, so the list a user is reading
+     * doesn't reorder under them mid-keystroke. */
+    var visibleKinds = (0, react_1.useMemo)(function () { return kinds.filter(function (candidate) { return candidate === kind || matchesKind(candidate); }); }, [kinds, kind, matchesKind]);
+    var pickedNames = (0, react_1.useMemo)(function () {
+        return new Set((picked !== null && picked !== void 0 ? picked : [])
+            .filter(function (reference) { return reference.interface_kind === kind; })
+            .map(function (reference) { return reference.interface_name; }));
+    }, [picked, kind]);
+    /** One shape from here down, whichever of the two the host passed. */
+    var normalizedItems = (0, react_1.useMemo)(function () { return items.map(function (item) { return (typeof item === 'string' ? { name: item } : item); }); }, [items]);
+    /*
+     * The interfaces the search leaves standing. When the KIND itself matches
+     * ("workflow"), its interfaces all stay — you searched for the kind, so you want to
+     * see what's in it. Otherwise the name and the description are both fair game,
+     * because both are text the user can see.
+     */
+    var visibleItems = (0, react_1.useMemo)(function () {
+        var kindMatches = matchesKind(kind);
+        return normalizedItems.filter(function (item) {
+            var _a;
+            return !needle ||
+                kindMatches ||
+                item.name.toLowerCase().includes(needle) ||
+                !!((_a = item.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(needle));
+        });
+    }, [normalizedItems, kind, needle, matchesKind]);
+    /* Drives the "…but other types do" hint: with the kind list now always on screen,
+     * an empty result is only puzzling when the answer is sitting in another row. */
+    var otherKindsMatch = (0, react_1.useMemo)(function () { return !!needle && kinds.some(function (candidate) { return candidate !== kind && matchesKind(candidate); }); }, [kinds, kind, needle, matchesKind]);
+    var toggle = function (name) {
+        var reference = { interface_kind: kind, interface_name: name };
+        if (pickedNames.has(name)) {
+            onRemove === null || onRemove === void 0 ? void 0 : onRemove(reference);
+        }
+        else {
+            onAdd(reference);
+        }
+    };
+    var emptyNote = function () {
+        if (!needle) {
+            return "No ".concat(label.toLowerCase(), " on this instance");
+        }
+        return otherKindsMatch
+            ? "No ".concat(label.toLowerCase(), " match \u201C").concat(query.trim(), "\u201D \u2014 other types do")
+            : "Nothing matches \u201C".concat(query.trim(), "\u201D");
+    };
+    /* Both panes are `ReqoreMenu`s of `ReqoreMenuItem`s — a vertical selectable list is
+       exactly what Menu is, so the selection (`selected`), the left-icon + right-icon,
+       and the item chrome come from reqore rather than hand-styled buttons. The wrappers
+       still own the scroll and the layout; the menus render transparent inside them.
+       Only menu items go inside a `ReqoreMenu`: it clones every child with its own props,
+       so a spinner or a note nested in one would be handed props it can't take. */
+    var kindItems = visibleKinds.map(function (option) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuItem, { className: matchesKind(option) ? undefined : DIMMED_CLASS, icon: resolveInterfaceIcon(option), label: resolveKindLabel(option), selected: option === kind, disabled: disabled, onClick: function () { return onKindChange(option); } }, option)); });
+    var interfaces = (function () {
+        if (error) {
+            return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenu, { transparent: true, flat: true, padded: false, width: '100%', size: 'small', children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuItem, { icon: 'ErrorWarningLine', rightIcon: onRetry ? 'RefreshLine' : undefined, intent: 'danger', label: "Couldn't load ".concat(label.toLowerCase()), 
+                    /* the specific failure is the tooltip — the pane states the outcome */
+                    tooltip: error, onClick: onRetry }) }));
+        }
+        if (loading) {
+            return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreSpinner, { iconColor: 'info', size: 'small', centered: true, children: ["Loading ", label.toLowerCase(), "\u2026"] }));
+        }
+        if (!visibleItems.length) {
+            return (0, jsx_runtime_1.jsx)(Note, { children: emptyNote() });
+        }
+        return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenu, { transparent: true, flat: true, padded: false, width: '100%', size: 'small', children: visibleItems.map(function (_a) {
+                var name = _a.name, description = _a.description, badge = _a.badge;
+                var isPicked = pickedNames.has(name);
+                var removable = isPicked && !!onRemove;
+                return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuItem, __assign({ className: isPicked ? PICKED_CLASS : undefined, icon: resolveInterfaceIcon(kind), rightIcon: isPicked ? 'CheckLine' : 'AddLine', label: name, description: description, badge: badge, disabled: disabled, tooltip: isPicked
+                        ? removable
+                            ? "Remove \u201C".concat(name, "\u201D")
+                            : "\u201C".concat(name, "\u201D is already referenced")
+                        : "Reference \u201C".concat(name, "\u201D"), onClick: !isPicked || removable ? function () { return toggle(name); } : undefined }, pickedItemProps(isPicked)), name));
+            }) }));
+    })();
+    var maxHeight = asModal
+        ? MODAL_MAX_HEIGHT
+        : stacked
+            ? STACKED_MAX_HEIGHT
+            : COLUMNS_MAX_HEIGHT;
+    /* Stacked: one column, with the selected kind's interfaces spliced in directly
+       under its row. A kind the host hasn't listed puts them at the end rather than
+       dropping them. */
+    var selectedIndex = visibleKinds.indexOf(kind);
+    var splitAt = selectedIndex === -1 ? visibleKinds.length : selectedIndex + 1;
+    var body = ((0, jsx_runtime_1.jsxs)(Frame, { ref: frameRef, "$bare": asModal, children: [header, (0, jsx_runtime_1.jsx)(Search, { "$accent": accent, "$active": !!needle, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreInput, { value: query, onChange: function (event) { return setQuery(event.target.value); }, placeholder: 'Search types and interfaces\u2026', icon: 'SearchLine', minimal: true, flat: true, transparent: true, fluid: true, disabled: disabled, onClearClick: query ? function () { return setQuery(''); } : undefined }) }), stacked ? ((0, jsx_runtime_1.jsxs)(Stack, { "$maxHeight": maxHeight, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenu, { transparent: true, flat: true, padded: false, width: '100%', size: 'small', children: kindItems.slice(0, splitAt) }), (0, jsx_runtime_1.jsx)(Nested, { children: interfaces }), splitAt < kindItems.length ? ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenu, { transparent: true, flat: true, padded: false, width: '100%', size: 'small', children: kindItems.slice(splitAt) })) : null] })) : ((0, jsx_runtime_1.jsxs)(Panes, { children: [(0, jsx_runtime_1.jsx)(Pane, { "$maxHeight": maxHeight, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenu, { transparent: true, flat: true, padded: false, width: '100%', size: 'small', children: kindItems }) }), (0, jsx_runtime_1.jsx)(Pane, { "$right": true, "$maxHeight": maxHeight, children: interfaces })] }))] }));
+    if (!asModal) {
+        return body;
+    }
+    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreModal, { isOpen: true, icon: 'LinksLine', label: title, width: '100%', blur: 3, onClose: onClose, children: body }));
+};
+exports.ReferencePicker = ReferencePicker;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=ReferencePicker.js.map

package/dist/components/supportTicket/ReferencePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReferencePicker.js","sourceRoot":"","sources":["../../../src/components/supportTicket/ReferencePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/supportTicket/TicketHeader.d.ts

@@ -0,0 +1,86 @@
+import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
+import { TReqoreEffectColor } from '@qoretechnologies/reqore/dist/components/Effect';
+import { ReactNode } from 'react';
+/**
+ * The height a tab item needs to sit on the rail's rhythm.
+ *
+ * Exported because the tab strip below the header has to match it and there is no
+ * Reqore prop for a tab's height: `size` sets it, and `padded` governs the items'
+ * horizontal edges, not the strip's. The height must go on the ITEM, never on the
+ * list — both of a tab's own surfaces are keyed to the item's box (the active marker
+ * is an inset shadow on its bottom edge, the hover wash fills it), so padding the
+ * list leaves the item floating in a taller strip: the marker lifts off the hairline
+ * and reads as a doubled line, and the wash reads as a floating box.
+ *
+ * This belongs in Reqore as a tab-height option rather than as a CSS rule each
+ * consumer re-applies. Until it exists, `TicketTabsFrame` is the single copy.
+ */
+export declare const TICKET_RAIL_ROW_HEIGHT: number;
+/** The ticket number, set in mono so it reads as an identifier, not a heading. Exported
+ *  so the staff drawer (which puts the number in the drawer's own title, not the rail)
+ *  renders it identically rather than re-declaring the same span. */
+export declare const TicketMonoId: any;
+/**
+ * A person: initials disc, then the name, on one baseline.
+ *
+ * One wrapper for every person in the rail — the assignee, the customer, the author.
+ * They were visibly different before: one went through a nested control group inside
+ * a button (its own gap and alignment) while another used a plain flex row, so the
+ * two drifted apart every time either was touched. The only difference left is that
+ * some of them are pressable.
+ */
+export declare const TicketPersonValue: any;
+/** Initials disc for a person. */
+export declare const TicketAvatar: any;
+/**
+ * Up to two initials from a handle ("nick.m@acme.io" → "NM"). Falls back to "?" so a
+ * handle made entirely of separators still renders a disc rather than an empty circle.
+ */
+export declare const ticketInitials: (name: string) => string;
+/**
+ * Wraps a ticket surface's tab strip so it joins the header rail's rhythm.
+ *
+ * See `TICKET_RAIL_ROW_HEIGHT` for why the height goes on the item and not the list.
+ */
+export declare const TicketTabsFrame: any;
+export declare const TICKET_TAB_ALIGN: {
+    readonly textAlign: "center";
+    readonly iconsAlign: "center";
+};
+/**
+ * A tab's count pill. The active tab's carries the accent; the rest stay neutral, so
+ * the strip reads as one selected item rather than several competing chips. Returns
+ * `undefined` for an empty count — a tab with nothing in it shows no badge at all.
+ */
+export declare const ticketTabBadge: (count: number, isActive: boolean, accent?: {
+    color: TReqoreEffectColor;
+    glow: TReqoreEffectColor;
+}) => TReqoreBadge | undefined;
+export interface ITicketHeaderProperty {
+    label: string;
+    /** plain text, a chip row, or a control — the row aligns all three the same way */
+    value: ReactNode;
+    /** Drop the row. Lets a caller keep one list and vary it by viewer role, rather
+     *  than building a different array per branch. Defaults to shown. */
+    when?: boolean;
+}
+export interface ITicketHeaderProps {
+    /** Omit when the surrounding dialog already carries the subject — the staff drawer
+     *  puts it in the drawer's own label, the customer's modal puts it here. */
+    subject?: string;
+    /** the ticket's number, e.g. `#1001` */
+    reference?: string;
+    properties: ITicketHeaderProperty[];
+    /** padding around the rail, matching the surface's own pane padding */
+    padding?: number;
+    className?: string;
+}
+export declare const TicketHeader: ({ subject, reference, properties, padding, className, }: ITicketHeaderProps) => import("react/jsx-runtime").JSX.Element;
+/** A rail value that is plain text rather than a control — sized to match the rest. */
+export declare const TicketHeaderText: ({ children, muted, tooltip, }: {
+    children: ReactNode;
+    /** for an absent value ("Unassigned", "None") */
+    muted?: boolean;
+    tooltip?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TicketHeader.d.ts.map

package/dist/components/supportTicket/TicketHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TicketHeader.d.ts","sourceRoot":"","sources":["../../../src/components/supportTicket/TicketHeader.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,iDAAiD,CAAC;AAC/E,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AAErF,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBlC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB,QAA0C,CAAC;AAE9E;;qEAEqE;AACrE,eAAO,MAAM,YAAY,KAIxB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,KAY7B,CAAC;AAEF,kCAAkC;AAClC,eAAO,MAAM,YAAY,KAaxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,SAAU,MAAM,KAAG,MAM1B,CAAC;AAErB;;;;GAIG;AACH,eAAO,MAAM,eAAe,KAc3B,CAAC;AAWF,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,cAAc,UAClB,MAAM,YACH,OAAO,WACR;IAAE,KAAK,EAAE,kBAAkB,CAAC;IAAC,IAAI,EAAE,kBAAkB,CAAA;CAAE,KAC/D,YAAY,GAAG,SAQjB,CAAC;AAEF,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,mFAAmF;IACnF,KAAK,EAAE,SAAS,CAAC;IACjB;yEACqE;IACrE,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC;gFAC4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,qBAAqB,EAAE,CAAC;IACpC,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,4DAMtB,kBAAkB,4CA2CpB,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,kCAI1B;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,4CAIA,CAAC"}