@forgeax/interface 0.4.1

package/dist/package/browser/components/TopBar/publish-options.js

@@ -0,0 +1,28 @@
+// Single source of truth for the Publish dropdown's option metadata.
+//
+// The same list drives three surfaces so their wording can never drift:
+//   1. dropdown item `title` tooltip      → doc.what
+//   2. dropdown item subtitle (mi-sub)    → doc.when
+//   3. first-run coach-mark onboarding    → doc.what + doc.when + hint
+//
+// Copy lives in i18n under `topbar.package.doc.<id>.*`; this file only owns the
+// structural metadata (order, DOM anchor id, gray/coming-soon flag).
+/** Ordered as they appear in the dropdown. `gray` items render but the tour skips them. */
+export const PUBLISH_OPTIONS = [
+    { id: 'web', kind: 'target', place: 'left' },
+    { id: 'windows', kind: 'target', place: 'left' },
+    { id: 'macos', kind: 'target', place: 'left' },
+    { id: 'android', kind: 'target', place: 'left' },
+    { id: 'ios', kind: 'target', place: 'left' },
+    { id: 'cloud', kind: 'target', place: 'left', gray: true },
+    { id: 'engine', kind: 'option', place: 'left' },
+    { id: 'history', kind: 'tool', place: 'left' },
+    { id: 'clean', kind: 'tool', place: 'left' },
+];
+/** Resolve the what/when copy for an option from i18n (falls back to empty). */
+export function publishDoc(t, id) {
+    return {
+        what: t(`topbar.package.doc.${id}.what`),
+        when: t(`topbar.package.doc.${id}.when`),
+    };
+}

package/dist/package/browser/components/TourOverlay/TourOverlay.css

@@ -0,0 +1,122 @@
+/* TourOverlay — coach-mark guided tour over the live shell. The scrim is a
+   single full-viewport layer with a bright outline ring tracking the current
+   anchor; the coach card floats next to it. Tokens mirror the onboarding
+   prototype (accent = brand lime). */
+
+.tour-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-toplevel, 99999);
+  pointer-events: none;
+}
+
+/* Dim scrim with an optional rectangular hole punched out over the anchor
+   (clip-path). The ring is only the bright outline — it must not paint another
+   full-viewport dim, or the hole would look black again. */
+.tour-scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  pointer-events: auto;
+  animation: tour-fade-in 0.15s ease-out;
+}
+
+/* Bright outline only — no box-shadow dim (scrim owns the dim + hole). */
+.tour-ring {
+  position: absolute;
+  border-radius: 8px;
+  outline: 2px solid var(--primary, #d4ff48);
+  pointer-events: none;
+  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
+}
+
+/* Invisible click catcher over the spotlight hole (scrim is clipped away there). */
+.tour-hole-sink {
+  position: absolute;
+  border-radius: 8px;
+  pointer-events: auto;
+}
+
+.tour-coach {
+  position: absolute;
+  z-index: 1;
+  max-width: 260px;
+  background: var(--bg-1, #191919);
+  border: 1px solid var(--primary, #d4ff48);
+  border-radius: 10px;
+  padding: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+  pointer-events: auto;
+  animation: tour-fade-in 0.15s ease-out;
+}
+
+.tour-coach-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.tour-coach-count {
+  flex-shrink: 0;
+  font-size: 11px;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: rgba(212, 255, 72, 0.14);
+  color: var(--primary, #d4ff48);
+  border: 1px solid rgba(212, 255, 72, 0.35);
+  font-variant-numeric: tabular-nums;
+}
+
+.tour-coach-anchor {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #fff);
+}
+
+.tour-coach-body {
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text-secondary, rgba(255, 255, 255, 0.62));
+  margin-bottom: 10px;
+}
+
+.tour-coach-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tour-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  border-radius: 7px;
+  font-size: 12.5px;
+  font-weight: 500;
+  border: 1px solid var(--border, #404040);
+  background: transparent;
+  color: var(--text-primary, #fff);
+  cursor: pointer;
+}
+.tour-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.tour-btn-ghost { border-color: transparent; color: var(--text-mute, rgba(255, 255, 255, 0.4)); }
+.tour-btn-ghost:hover:not(:disabled) { color: var(--text-secondary, rgba(255, 255, 255, 0.62)); }
+.tour-btn-primary {
+  background: var(--primary, #d4ff48);
+  color: var(--color-text-on-bright-primary, #000000);
+  border: none;
+  font-weight: 500;
+}
+.tour-btn-primary:hover:not(:disabled),
+.tour-btn-primary:active:not(:disabled),
+.tour-btn-primary:focus-visible:not(:disabled) {
+  background: var(--color-brand-primary-hover, var(--primary, #d4ff48));
+  color: var(--color-text-on-bright-primary, #000000);
+}
+
+@keyframes tour-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/dist/package/browser/components/TourOverlay/TourOverlay.d.ts

@@ -0,0 +1,26 @@
+import './TourOverlay.css';
+export interface TourStep {
+    /** Matches a `data-tour-id="<id>"` attribute somewhere in the shell. An array
+     *  highlights the UNION of several anchors' rects — e.g. a multi-panel region
+     *  like the left column (hierarchy + inspector) reads as one box. */
+    anchorId: string | string[];
+    /** Bold heading of the coach card. */
+    anchor: string;
+    /** Body copy. */
+    body: string;
+}
+export interface TourOverlayProps {
+    steps: TourStep[];
+    stepIndex: number;
+    onStepChange: (next: number) => void;
+    /** Called when the user finishes the last step or skips. `completed` is true
+     *  only when advancing past the final step. */
+    onClose: (completed: boolean) => void;
+    labels: {
+        prev: string;
+        skip: string;
+        next: string;
+        done: string;
+    };
+}
+export declare function TourOverlay({ steps, stepIndex, onStepChange, onClose, labels }: TourOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/package/browser/components/TourOverlay/TourOverlay.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// TourOverlay — a reusable coach-mark tour that highlights live shell elements
+// by their `data-tour-id` attribute. Business-agnostic: the caller supplies the
+// step list + copy; this component owns geometry, keyboard a11y, and focus.
+//
+// Anchor registry: elements opt in by rendering `data-tour-id="<id>"`. The
+// overlay resolves each step's anchor with `querySelector`, tracks its
+// bounding rect (recomputed on resize/scroll), paints a highlight ring, and
+// floats the coach card on the side with the most room. Missing anchor →
+// the card centers and the ring hides (tour still advances).
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createRestartableTimeoutTaskLifecycle, installViewportResizeObservation, installViewportScrollObservation, } from '@forgeax/app-shell/react';
+import './TourOverlay.css';
+const RING_PAD = 4;
+const RING_OUTLINE = 2;
+const COACH_GAP = 12;
+const COACH_W = 260;
+const COACH_H_EST = 150;
+const VIEWPORT_PAD = 12;
+function readOneRect(anchorId) {
+    const el = document.querySelector(`[data-tour-id="${CSS.escape(anchorId)}"]`);
+    if (!el)
+        return null;
+    // Panel anchors are out-of-flow zero-size markers (see panelRegistry.tourWrap):
+    // their own rect is empty, so measure the parent — the dockview content box
+    // that IS the panel's area. Other anchors (topbar regions, composer) are real
+    // elements measured directly.
+    const target = el.hasAttribute('data-tour-anchor-parent') ? el.parentElement : el;
+    if (!target)
+        return null;
+    const r = target.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0)
+        return null;
+    return { top: r.top, left: r.left, width: r.width, height: r.height };
+}
+/** Bounding union of one or more anchors' rects. Missing / zero-size anchors are
+ *  skipped, so a region spans whatever anchors are present (the left column =
+ *  hierarchy + inspector highlights as a single box even if one is momentarily
+ *  unlaid-out). Returns null only when NONE resolve — the coach then centers. */
+function readAnchorRect(anchorIds) {
+    let top = Infinity;
+    let left = Infinity;
+    let right = -Infinity;
+    let bottom = -Infinity;
+    let found = false;
+    for (const id of anchorIds) {
+        const r = readOneRect(id);
+        if (!r)
+            continue;
+        found = true;
+        top = Math.min(top, r.top);
+        left = Math.min(left, r.left);
+        right = Math.max(right, r.left + r.width);
+        bottom = Math.max(bottom, r.top + r.height);
+    }
+    if (!found)
+        return null;
+    return { top, left, width: right - left, height: bottom - top };
+}
+/** Ring box = anchor grown by RING_PAD, then clamped inside the viewport. The
+ *  2px outline is painted OUTSIDE the box, so when an anchor hugs a viewport edge
+ *  the raw ring (anchor - RING_PAD) spills off-screen and that side of the
+ *  highlight disappears. Clamp each edge to keep the whole ring (incl. outline)
+ *  visible. */
+function ringBox(anchor) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const min = RING_OUTLINE;
+    const top = Math.max(min, anchor.top - RING_PAD);
+    const left = Math.max(min, anchor.left - RING_PAD);
+    const bottom = Math.min(vh - min, anchor.top + anchor.height + RING_PAD);
+    const right = Math.min(vw - min, anchor.left + anchor.width + RING_PAD);
+    return { top, left, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
+}
+/** Choose a coach position (below → above → right → left → centered) that fits
+ *  the viewport, then clamp inside it. `coachH` is the MEASURED card height (see
+ *  the caller's layout effect) — using the real height, not a fixed estimate, is
+ *  what makes a tall card flip cleanly ABOVE a bottom-edge anchor (e.g. the
+ *  footer) instead of overflowing off-screen. */
+function coachPosition(anchor, coachH) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (!anchor) {
+        return { top: Math.max(VIEWPORT_PAD, vh / 2 - coachH / 2), left: vw / 2 - COACH_W / 2 };
+    }
+    const belowTop = anchor.top + anchor.height + COACH_GAP;
+    const aboveTop = anchor.top - coachH - COACH_GAP;
+    let top;
+    let left;
+    if (belowTop + coachH <= vh - VIEWPORT_PAD) {
+        top = belowTop;
+        left = anchor.left + anchor.width / 2 - COACH_W / 2;
+    }
+    else if (aboveTop >= VIEWPORT_PAD) {
+        top = aboveTop;
+        left = anchor.left + anchor.width / 2 - COACH_W / 2;
+    }
+    else if (anchor.left + anchor.width + COACH_GAP + COACH_W <= vw - VIEWPORT_PAD) {
+        top = anchor.top;
+        left = anchor.left + anchor.width + COACH_GAP;
+    }
+    else {
+        top = anchor.top;
+        left = anchor.left - COACH_W - COACH_GAP;
+    }
+    top = Math.min(Math.max(VIEWPORT_PAD, top), vh - coachH - VIEWPORT_PAD);
+    left = Math.min(Math.max(VIEWPORT_PAD, left), vw - COACH_W - VIEWPORT_PAD);
+    return { top, left };
+}
+export function TourOverlay({ steps, stepIndex, onStepChange, onClose, labels }) {
+    const step = steps[stepIndex];
+    // Anchor id is the ONLY stable identity of a step: `steps`/`step` are rebuilt
+    // (new object refs) on every parent render because their copy comes from the
+    // i18n `t()` closure. Keying effects on the object would re-run them every
+    // render and reset the retry timer before it can fire — so key on this string.
+    // Stable string identity for effects: `steps`/`step` get new object refs on
+    // every parent render (i18n t() closure), and an array anchorId would be a new
+    // ref too — so key on the joined id string and rebuild the id list from it.
+    const anchorKey = Array.isArray(step?.anchorId)
+        ? step.anchorId.join('|')
+        : (step?.anchorId ?? '');
+    const [anchorRect, setAnchorRect] = useState(null);
+    // Measured coach-card height. Body copy varies per step (short "chat" vs long
+    // "footer"), so a fixed estimate mis-clamps a tall card at a bottom-edge
+    // anchor. Seed with the estimate, then correct to the real height below.
+    const [coachH, setCoachH] = useState(COACH_H_EST);
+    const coachRef = useRef(null);
+    const isLast = stepIndex >= steps.length - 1;
+    const isFirst = stepIndex <= 0;
+    const recompute = useCallback(() => {
+        if (!anchorKey)
+            return;
+        setAnchorRect(readAnchorRect(anchorKey.split('|')));
+    }, [anchorKey]);
+    // Measure the current step's anchor, RETRYING until it has a real rect. The
+    // dockview panels (sidebar/preview/chat) lay out asynchronously after mount,
+    // so a one-shot measure on step 0 lands before the panel has a size → null →
+    // no ring (the classic "first step doesn't highlight" bug). Poll briefly until
+    // a non-zero rect appears, then stop; give up after ~1.2s (anchor genuinely
+    // absent → coach just centers).
+    useLayoutEffect(() => {
+        if (!anchorKey)
+            return;
+        let attempts = 0;
+        const retry = createRestartableTimeoutTaskLifecycle({ delayMs: 60, task: tick });
+        function tick() {
+            const rect = readAnchorRect(anchorKey.split('|'));
+            setAnchorRect(rect);
+            attempts += 1;
+            if (rect || attempts >= 20)
+                return;
+            retry.schedule();
+        }
+        tick();
+        return () => retry.dispose();
+    }, [anchorKey]);
+    // Measure the card's real height after it renders (before paint), so the next
+    // layout pass positions/clamps it with the true height. Only sets on change →
+    // converges in one extra pass (position doesn't affect the card's height).
+    useLayoutEffect(() => {
+        const h = coachRef.current?.offsetHeight ?? 0;
+        if (h > 0 && h !== coachH)
+            setCoachH(h);
+    }, [stepIndex, anchorRect, step?.body, coachH]);
+    useEffect(() => {
+        const onWin = () => recompute();
+        const disposeViewportResizeObservation = installViewportResizeObservation({
+            target: window,
+            onResize: onWin,
+        });
+        const disposeViewportScrollObservation = installViewportScrollObservation({
+            target: window,
+            onScroll: onWin,
+        });
+        return () => {
+            disposeViewportScrollObservation();
+            disposeViewportResizeObservation();
+        };
+    }, [recompute]);
+    const goNext = useCallback(() => {
+        if (isLast)
+            onClose(true);
+        else
+            onStepChange(stepIndex + 1);
+    }, [isLast, onClose, onStepChange, stepIndex]);
+    const goPrev = useCallback(() => {
+        if (!isFirst)
+            onStepChange(stepIndex - 1);
+    }, [isFirst, onStepChange, stepIndex]);
+    // Keyboard a11y: Esc skips, arrows/Enter navigate. Focus the coach on mount /
+    // step change so screen readers announce the new content and Tab is trapped.
+    useEffect(() => {
+        coachRef.current?.focus();
+    }, [stepIndex]);
+    if (!step)
+        return null;
+    const coach = coachPosition(anchorRect, coachH);
+    const ring = anchorRect ? ringBox(anchorRect) : null;
+    // evenodd polygon: full viewport minus the ring rect → dim everywhere except
+    // the highlighted panel (which stays undimmed).
+    const scrimClip = ring
+        ? `polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, ${ring.left}px ${ring.top}px, ${ring.left}px ${ring.top + ring.height}px, ${ring.left + ring.width}px ${ring.top + ring.height}px, ${ring.left + ring.width}px ${ring.top}px, ${ring.left}px ${ring.top}px)`
+        : undefined;
+    return (_jsxs("div", { className: "tour-root", role: "dialog", "aria-modal": "true", "aria-label": step.anchor, children: [_jsx("div", { className: "tour-scrim", style: scrimClip ? { clipPath: scrimClip } : undefined, onClick: (e) => e.stopPropagation() }), ring && (_jsxs(_Fragment, { children: [_jsx("div", { className: "tour-hole-sink", style: { top: ring.top, left: ring.left, width: ring.width, height: ring.height }, onClick: (e) => e.stopPropagation() }), _jsx("div", { className: "tour-ring", style: { top: ring.top, left: ring.left, width: ring.width, height: ring.height } })] })), _jsxs("div", { className: "tour-coach", ref: coachRef, tabIndex: -1, onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        e.preventDefault();
+                        onClose(false);
+                    }
+                    else if (e.key === 'ArrowRight' || e.key === 'Enter') {
+                        e.preventDefault();
+                        goNext();
+                    }
+                    else if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        goPrev();
+                    }
+                    else if (e.key === 'Tab') {
+                        const focusables = coachRef.current?.querySelectorAll('button:not(:disabled)');
+                        if (!focusables || focusables.length === 0)
+                            return;
+                        const first = focusables[0];
+                        const last = focusables[focusables.length - 1];
+                        if (e.shiftKey && document.activeElement === first) {
+                            e.preventDefault();
+                            last.focus();
+                        }
+                        else if (!e.shiftKey && document.activeElement === last) {
+                            e.preventDefault();
+                            first.focus();
+                        }
+                    }
+                }, style: { top: coach.top, left: coach.left, width: COACH_W }, children: [_jsxs("div", { className: "tour-coach-head", children: [_jsxs("span", { className: "tour-coach-count", children: [stepIndex + 1, " / ", steps.length] }), _jsx("span", { className: "tour-coach-anchor", children: step.anchor })] }), _jsx("div", { className: "tour-coach-body", children: step.body }), _jsxs("div", { className: "tour-coach-actions", children: [_jsx("button", { type: "button", className: "tour-btn tour-btn-ghost", onClick: goPrev, disabled: isFirst, children: labels.prev }), _jsx("div", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "tour-btn tour-btn-ghost", onClick: () => onClose(false), children: labels.skip }), _jsx("button", { type: "button", className: "tour-btn tour-btn-primary", onClick: goNext, children: isLast ? labels.done : labels.next })] })] })] }));
+}

package/dist/package/browser/components/TourOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { TourOverlay } from './TourOverlay';
+export type { TourStep, TourOverlayProps } from './TourOverlay';

package/dist/package/browser/components/TourOverlay/index.js

@@ -0,0 +1 @@
+export { TourOverlay } from './TourOverlay';

package/dist/package/browser/components/ownership.d.ts

@@ -0,0 +1,7 @@
+export declare const COMPONENT_OWNERSHIP: {
+    readonly source: "forgeax-interface";
+    readonly genericDestination: "@forgeax/app-shell";
+    readonly productOwner: "forgeax-ide";
+    readonly status: "migration-inventory";
+    readonly rule: "generic shell primitives migrate; domain UI stays with its product owner";
+};

package/dist/package/browser/components/ownership.js

@@ -0,0 +1,7 @@
+export const COMPONENT_OWNERSHIP = {
+    source: 'forgeax-interface',
+    genericDestination: '@forgeax/app-shell',
+    productOwner: 'forgeax-ide',
+    status: 'migration-inventory',
+    rule: 'generic shell primitives migrate; domain UI stays with its product owner',
+};

package/dist/package/browser/components/ui/SearchableMenu.css

@@ -0,0 +1,143 @@
+/* UE-style searchable tool menu: dense rows, dark raised panel, search first. */
+.fx-searchable-menu {
+  width: 360px;
+  max-width: calc(100vw - 16px);
+  overflow: hidden;
+  padding: 6px 0 6px 6px !important;
+  border: 1px solid var(--color-border-default) !important;
+  border-radius: 6px !important;
+  background: var(--color-background-floating) !important;
+  color: var(--color-text-primary);
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55) !important;
+}
+
+.fx-searchable-menu__command {
+  gap: 0;
+  background: transparent !important;
+}
+
+.fx-searchable-menu__command [cmdk-input-wrapper] {
+  height: 30px;
+  gap: 7px;
+  margin: 0 6px 5px 0;
+  padding: 0 9px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 15px;
+  background: var(--color-background-canvas);
+  color: var(--color-text-tertiary);
+}
+
+.fx-searchable-menu__command [cmdk-input-wrapper]:focus-within {
+  border-color: var(--color-border-strong);
+  box-shadow: inset 0 0 0 1px var(--color-divider-default);
+}
+
+.fx-searchable-menu__command [cmdk-input-wrapper] > svg {
+  width: 14px;
+  height: 14px;
+}
+
+.fx-searchable-menu__input {
+  box-sizing: border-box;
+  height: 28px !important;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  outline: none !important;
+  box-shadow: none !important;
+  font-family: var(--font-sans);
+  font-size: 12px !important;
+  color: var(--color-text-primary) !important;
+}
+
+.fx-searchable-menu__list {
+  width: auto;
+  max-height: min(520px, calc(100vh - 100px)) !important;
+  margin-right: 0;
+  padding: 0 !important;
+}
+
+.fx-searchable-menu__group {
+  padding: 0 6px 0 0 !important;
+}
+
+.fx-searchable-menu__group [cmdk-group-heading] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 20px;
+  padding: 0 3px !important;
+  color: var(--color-text-tertiary) !important;
+  font-family: var(--font-sans);
+  font-size: 9px !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.08em !important;
+  text-transform: uppercase;
+}
+
+.fx-searchable-menu__group [cmdk-group-heading]::after {
+  content: '';
+  flex: 1 1 auto;
+  height: 1px;
+  background: var(--color-divider-default);
+}
+
+.fx-searchable-menu__item {
+  min-height: 28px;
+  gap: 8px !important;
+  padding: 4px 7px !important;
+  border-radius: 3px !important;
+  color: var(--color-text-primary);
+  font-family: var(--font-sans);
+  font-size: 12px !important;
+}
+
+.fx-searchable-menu__item[data-selected='true'] {
+  background: var(--color-interaction-selected-neutral) !important;
+  color: var(--color-text-primary) !important;
+}
+
+.fx-searchable-menu__icon {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+  color: var(--color-text-secondary);
+}
+
+.fx-searchable-menu__content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.fx-searchable-menu__label {
+  min-width: 0;
+  overflow: hidden;
+  flex: 1 1 auto;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fx-searchable-menu__description {
+  display: none;
+}
+
+.fx-searchable-menu__empty {
+  padding: 24px 8px !important;
+  color: var(--color-text-tertiary) !important;
+  font-size: 11px !important;
+}
+
+.fx-searchable-menu__separator {
+  margin: 3px 2px !important;
+  background: var(--color-divider-default) !important;
+}
+
+.fx-searchable-menu__footer {
+  margin: 5px 0 -6px -6px;
+  padding: 6px 9px;
+  border-top: 1px solid var(--color-divider-default);
+  color: var(--color-text-tertiary);
+  font-size: 9px;
+}

package/dist/package/browser/components/ui/SearchableMenu.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+import './SearchableMenu.css';
+export interface SearchableMenuItem {
+    id: string;
+    label: string;
+    description?: string;
+    keywords?: readonly string[];
+    group?: string;
+    icon?: ComponentType<{
+        className?: string;
+        'aria-hidden'?: boolean;
+    }>;
+    disabled?: boolean;
+}
+interface SearchableMenuProps {
+    trigger: ReactElement;
+    items: readonly SearchableMenuItem[];
+    onSelect: (item: SearchableMenuItem) => void;
+    searchPlaceholder: string;
+    emptyText: string;
+    ariaLabel: string;
+    className?: string;
+    footer?: ReactNode;
+}
+/**
+ * Shared UE-style searchable anchored menu. Popover owns focus/escape/collision;
+ * cmdk owns filtering and keyboard selection. Domain callers only provide data.
+ */
+export declare function SearchableMenu({ trigger, items, onSelect, searchPlaceholder, emptyText, ariaLabel, className, footer, }: SearchableMenuProps): ReactElement;
+export {};

package/dist/package/browser/components/ui/SearchableMenu.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { cn } from '../../lib/utils';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+// Component-owned UE menu skin; kept beside the reusable interaction primitive.
+import './SearchableMenu.css';
+/**
+ * Shared UE-style searchable anchored menu. Popover owns focus/escape/collision;
+ * cmdk owns filtering and keyboard selection. Domain callers only provide data.
+ */
+export function SearchableMenu({ trigger, items, onSelect, searchPlaceholder, emptyText, ariaLabel, className, footer, }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const groups = useMemo(() => {
+        const grouped = new Map();
+        for (const item of items) {
+            const key = item.group ?? '';
+            const group = grouped.get(key);
+            if (group)
+                group.push(item);
+            else
+                grouped.set(key, [item]);
+        }
+        return [...grouped.entries()];
+    }, [items]);
+    const changeOpen = (next) => {
+        setOpen(next);
+        if (!next)
+            setQuery('');
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: changeOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverContent, { align: "start", sideOffset: 4, className: cn('fx-searchable-menu', className), children: _jsxs(Command, { className: "fx-searchable-menu__command", label: ariaLabel, children: [_jsx(CommandInput, { autoFocus: true, className: "fx-searchable-menu__input", value: query, onValueChange: setQuery, placeholder: searchPlaceholder }), _jsxs(CommandList, { className: "fx-searchable-menu__list", children: [_jsx(CommandEmpty, { className: "fx-searchable-menu__empty", children: emptyText }), groups.map(([group, groupItems], groupIndex) => (_jsxs("div", { children: [groupIndex > 0 && _jsx(CommandSeparator, { className: "fx-searchable-menu__separator" }), _jsx(CommandGroup, { className: "fx-searchable-menu__group", heading: group || undefined, children: groupItems.map((item) => {
+                                                const Icon = item.icon;
+                                                const value = [item.label, item.id, ...(item.keywords ?? [])].join(' ');
+                                                return (_jsxs(CommandItem, { className: "fx-searchable-menu__item", value: value, disabled: item.disabled, onSelect: () => {
+                                                        onSelect(item);
+                                                        changeOpen(false);
+                                                    }, children: [Icon && _jsx(Icon, { className: "fx-searchable-menu__icon", "aria-hidden": true }), _jsxs("span", { className: "fx-searchable-menu__content", children: [_jsx("span", { className: "fx-searchable-menu__label", children: item.label }), item.description && (_jsx("span", { className: "fx-searchable-menu__description", children: item.description }))] })] }, item.id));
+                                            }) })] }, group || '__default')))] }), footer && _jsx("div", { className: "fx-searchable-menu__footer", children: footer })] }) })] }));
+}

package/dist/package/browser/components/ui/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };