@fivepixels-js/react 0.1.6 → 0.2.0

package/dist/components/overlay/TargetHighlights.js

@@ -1,7 +1,15 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { TARGET_COLOR } from "../../constants/report.js";
-function highlightPresenceKey(type) {
-    return `hover-${type}`;
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FEEDBACK_HIGHLIGHT } from "../../constants/report.js";
+import { PickTargetCompareChip } from "./PickTargetCompareChip.js";
+import { PickTargetHoverTooltip } from "./PickTargetHoverTooltip.js";
+const HOVER_HIGHLIGHT_KEY = "hover-active";
+const SELECTION_HIGHLIGHT_KEY = "selection-active";
+const ACTIVE_MARKER_HIGHLIGHT_KEY = "marker-active";
+function highlightLabel(target) {
+    if (target.isTagged) {
+        return `${target.type} · ${target.id}`;
+    }
+    return `suggested · ${target.suggestedReportId ?? target.id}`;
 }
 function HighlightBox({ target, showLabel }) {
     return (_jsx("div", { className: "fivepixels-target-highlight pointer-events-none fixed box-border", style: {
@@ -9,16 +17,12 @@ function HighlightBox({ target, showLabel }) {
             top: target.rect.top,
             width: target.rect.width,
             height: target.rect.height,
-            outline: `2px solid #0ed1b4`,
-            backgroundColor: "#0ed1b41c",
-        }, children: showLabel ? (_jsxs("span", { className: "absolute left-0 top-0 -translate-y-full px-1 py-0.5 font-[var(--coding-font)] text-[12px] font-medium text-white", style: { backgroundColor: TARGET_COLOR[target.type] }, children: [target.type, " \u00B7 ", target.id] })) : null }));
+            borderRadius: target.boxStyle?.borderRadius ?? "0",
+            boxShadow: `0 0 0 2px ${FEEDBACK_HIGHLIGHT.outline}`,
+            backgroundColor: FEEDBACK_HIGHLIGHT.surface,
+        }, children: showLabel ? (_jsx("span", { className: "fivepixels-target-highlight__label absolute left-0 top-0 -translate-y-full px-1 py-0.5 font-[var(--coding-font)] text-[12px] font-medium text-white", style: { backgroundColor: FEEDBACK_HIGHLIGHT.label }, children: highlightLabel(target) })) : null }));
 }
-export function TargetHighlights({ hoveredTarget, previewTargets = [], selectedTarget }) {
-    return (_jsxs(_Fragment, { children: [previewTargets.map((target) => (_jsx(HighlightBox, { target: target, showLabel: true }, `${target.type}-${target.id}`))), hoveredTarget ? (_jsx(HighlightBox, { target: hoveredTarget, showLabel: true }, highlightPresenceKey(hoveredTarget.type))) : null, selectedTarget ? (_jsx("div", { className: "pointer-events-none fixed box-border rounded-sm", style: {
-                    left: selectedTarget.rect.left,
-                    top: selectedTarget.rect.top,
-                    width: selectedTarget.rect.width,
-                    height: selectedTarget.rect.height,
-                } })) : null] }));
+export function TargetHighlights({ hoveredTarget, selectedTarget = null, showHoverInspect = false, showSelectionHighlight = false, showPickProbeCompare = false, previewTargets = [], markerPreviewTargets = [], activeMarkerTarget, }) {
+    return (_jsxs(_Fragment, { children: [previewTargets.map((target) => (_jsx(HighlightBox, { target: target, showLabel: true }, `preview-${target.type}-${target.id}`))), markerPreviewTargets.map((target) => (_jsx(HighlightBox, { target: target, showLabel: true }, `marker-preview-${target.id}`))), showHoverInspect && hoveredTarget ? (_jsxs(_Fragment, { children: [_jsx(HighlightBox, { target: hoveredTarget }, HOVER_HIGHLIGHT_KEY), _jsx(PickTargetHoverTooltip, { target: hoveredTarget })] })) : null, showSelectionHighlight && selectedTarget ? (_jsxs(_Fragment, { children: [_jsx(HighlightBox, { target: selectedTarget }, SELECTION_HIGHLIGHT_KEY), showPickProbeCompare ? _jsx(PickTargetCompareChip, { target: selectedTarget }) : null] })) : null, activeMarkerTarget ? (_jsx(HighlightBox, { target: activeMarkerTarget, showLabel: true }, ACTIVE_MARKER_HIGHLIGHT_KEY)) : null] }));
 }
 //# sourceMappingURL=TargetHighlights.js.map

package/dist/components/overlay/TargetHighlights.js.map

@@ -1 +1 @@
-{"version":3,"file":"TargetHighlights.js","sourceRoot":"","sources":["../../../src/components/overlay/TargetHighlights.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAUrD,SAAS,oBAAoB,CAAC,IAAsB;IAChD,OAAO,SAAS,IAAI,EAAE,CAAC;AAC3B,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmD;IACxF,OAAO,CACH,cACI,SAAS,EAAC,kEAAkE,EAC5E,KAAK,EAAE;YACH,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI;YACtB,GAAG,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG;YACpB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;YACxB,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM;YAC1B,OAAO,EAAE,mBAAmB;YAC5B,eAAe,EAAE,WAAW;SAC/B,YAEA,SAAS,CAAC,CAAC,CAAC,CACT,gBACI,SAAS,EAAC,kHAAkH,EAC5H,KAAK,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,aAEpD,MAAM,CAAC,IAAI,cAAK,MAAM,CAAC,EAAE,IACvB,CACV,CAAC,CAAC,CAAC,IAAI,GACN,CACT,CAAC;AACN,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAE,aAAa,EAAE,cAAc,GAAG,EAAE,EAAE,cAAc,EAAyB;IAC1G,OAAO,CACH,8BACK,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,KAAC,YAAY,IAET,MAAM,EAAE,MAAM,EACd,SAAS,UAFJ,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,EAAE,EAAE,CAGpC,CACL,CAAC,EAED,aAAa,CAAC,CAAC,CAAC,CACb,KAAC,YAAY,IAET,MAAM,EAAE,aAAa,EACrB,SAAS,UAFJ,oBAAoB,CAAC,aAAa,CAAC,IAAI,CAAC,CAG/C,CACL,CAAC,CAAC,CAAC,IAAI,EAEP,cAAc,CAAC,CAAC,CAAC,CACd,cACI,SAAS,EAAC,iDAAiD,EAC3D,KAAK,EAAE;oBACH,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,IAAI;oBAC9B,GAAG,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG;oBAC5B,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK;oBAChC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,MAAM;iBACrC,GACH,CACL,CAAC,CAAC,CAAC,IAAI,IACT,CACN,CAAC;AACN,CAAC"}
+{"version":3,"file":"TargetHighlights.js","sourceRoot":"","sources":["../../../src/components/overlay/TargetHighlights.tsx"],"names":[],"mappings":"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"}

package/dist/components/panel/AppearanceThemePicker.d.ts

@@ -0,0 +1,15 @@
+import type { ReportAppearance } from "../../types/report.js";
+type AppearanceThemeOption = {
+    value: ReportAppearance;
+    label: string;
+};
+type AppearanceThemePickerProps = {
+    options: readonly AppearanceThemeOption[];
+    value: ReportAppearance;
+    onChange: (value: ReportAppearance) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+};
+export declare function AppearanceThemePicker({ options, value, onChange, disabled, ariaLabel }: AppearanceThemePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AppearanceThemePicker.d.ts.map

package/dist/components/panel/AppearanceThemePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceThemePicker.d.ts","sourceRoot":"","sources":["../../../src/components/panel/AppearanceThemePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,KAAK,qBAAqB,GAAG;IACzB,KAAK,EAAE,gBAAgB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAC9B,OAAO,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC1C,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CAqE1H"}

package/dist/components/panel/AppearanceThemePicker.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { CheckIcon } from "../../components/icons/Icons.js";
+import { ThemePreviewSkeleton } from "./ThemePreviewSkeleton.js";
+export function AppearanceThemePicker({ options, value, onChange, disabled = false, ariaLabel }) {
+    const handleKeyDown = useCallback((event, index) => {
+        if (disabled) {
+            return;
+        }
+        let nextIndex = null;
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            nextIndex = (index + 1) % options.length;
+        }
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            nextIndex = (index - 1 + options.length) % options.length;
+        }
+        if (nextIndex === null) {
+            return;
+        }
+        event.preventDefault();
+        onChange(options[nextIndex].value);
+    }, [disabled, onChange, options]);
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: "grid grid-cols-3 gap-[6px]", children: options.map((option, index) => {
+            const active = option.value === value;
+            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": active, disabled: disabled, onClick: () => onChange(option.value), onKeyDown: (event) => handleKeyDown(event, index), className: `group relative flex flex-col items-center gap-[5px] rounded-[8px] p-[4px] transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${active
+                    ? "ring-2 ring-[var(--adaptive-blue500)] ring-offset-1 ring-offset-[var(--adaptive-black50)]"
+                    : "ring-1 ring-[var(--adaptive-black200)] hover:ring-[var(--adaptive-black300)]"}`, children: [_jsxs("div", { className: "relative aspect-[4/3] w-full overflow-hidden rounded-[5px] bg-[var(--adaptive-black100)]", children: [_jsx(ThemePreviewSkeleton, { variant: option.value }), active ? (_jsx("span", { className: "absolute right-[3px] bottom-[3px] flex h-[14px] w-[14px] items-center justify-center rounded-full bg-[var(--adaptive-blue500)] text-white shadow-[0_1px_2px_rgba(15,23,42,0.2)]", children: _jsx(CheckIcon, { className: "h-[9px] w-[9px]" }) })) : null] }), _jsx("span", { className: `w-full truncate text-center text-[10px] leading-[1.2] ${active ? "font-semibold text-[var(--adaptive-blue500)]" : "font-medium text-[var(--adaptive-black600)] group-hover:text-[var(--adaptive-black800)]"}`, children: option.label })] }, option.value));
+        }) }));
+}
+//# sourceMappingURL=AppearanceThemePicker.js.map

package/dist/components/panel/AppearanceThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceThemePicker.js","sourceRoot":"","sources":["../../../src/components/panel/AppearanceThemePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAsB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAejE,MAAM,UAAU,qBAAqB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAA8B;IACvH,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAuC,EAAE,KAAa,EAAE,EAAE;QACvD,IAAI,QAAQ,EAAE,CAAC;YACX,OAAO;QACX,CAAC;QAED,IAAI,SAAS,GAAkB,IAAI,CAAC;QAEpC,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YAC1D,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;QAC7C,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YAC9D,SAAS,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC;QAC9D,CAAC;QAED,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YACrB,OAAO;QACX,CAAC;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAE,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC,EACD,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,CAChC,CAAC;IAEF,OAAO,CACH,cACI,IAAI,EAAC,YAAY,gBACL,SAAS,EACrB,SAAS,EAAC,4BAA4B,YAErC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAC3B,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC;YAEtC,OAAO,CACH,kBAEI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,MAAM,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,EACjD,SAAS,EAAE,+IACP,MAAM;oBACF,CAAC,CAAC,2FAA2F;oBAC7F,CAAC,CAAC,8EACV,EAAE,aAEF,eAAK,SAAS,EAAC,0FAA0F,aACrG,KAAC,oBAAoB,IAAC,OAAO,EAAE,MAAM,CAAC,KAAK,GAAI,EAC9C,MAAM,CAAC,CAAC,CAAC,CACN,eAAM,SAAS,EAAC,iLAAiL,YAC7L,KAAC,SAAS,IAAC,SAAS,EAAC,iBAAiB,GAAG,GACtC,CACV,CAAC,CAAC,CAAC,IAAI,IACN,EACN,eACI,SAAS,EAAE,yDACP,MAAM,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,yFAC9D,EAAE,YAED,MAAM,CAAC,KAAK,GACV,KA3BF,MAAM,CAAC,KAAK,CA4BZ,CACZ,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/panel/DiscreteScaleDial.d.ts

@@ -0,0 +1,10 @@
+type DiscreteScaleDialProps<T extends string> = {
+    values: readonly T[];
+    value: T;
+    onChange: (value: T) => void;
+    labels: Record<T, string>;
+    ariaLabel: string;
+};
+export declare function DiscreteScaleDial<T extends string>({ values, value, onChange, labels, ariaLabel }: DiscreteScaleDialProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DiscreteScaleDial.d.ts.map

package/dist/components/panel/DiscreteScaleDial.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscreteScaleDial.d.ts","sourceRoot":"","sources":["../../../src/components/panel/DiscreteScaleDial.tsx"],"names":[],"mappings":"AAAA,KAAK,sBAAsB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC5C,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC;IACrB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CA0C5H"}

package/dist/components/panel/DiscreteScaleDial.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DiscreteScaleDial({ values, value, onChange, labels, ariaLabel }) {
+    const index = Math.max(0, values.indexOf(value));
+    return (_jsxs("div", { className: "flex flex-col gap-[6px]", children: [_jsx("input", { type: "range", min: 0, max: values.length - 1, step: 1, value: index, "aria-label": ariaLabel, onChange: (event) => {
+                    const next = values[Number(event.target.value)];
+                    if (next) {
+                        onChange(next);
+                    }
+                }, className: "h-[4px] w-full cursor-pointer appearance-none rounded-full bg-[var(--adaptive-black200)] accent-[var(--adaptive-blue500)]" }), _jsx("div", { className: "grid gap-[4px]", style: { gridTemplateColumns: `repeat(${values.length}, minmax(0, 1fr))` }, children: values.map((scale) => {
+                    const active = scale === value;
+                    return (_jsx("span", { className: `text-center text-[10px] leading-[1.2] ${active ? "font-semibold text-[var(--adaptive-blue500)]" : "font-medium text-[var(--adaptive-black500)]"}`, children: labels[scale] }, scale));
+                }) })] }));
+}
+//# sourceMappingURL=DiscreteScaleDial.js.map

package/dist/components/panel/DiscreteScaleDial.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscreteScaleDial.js","sourceRoot":"","sources":["../../../src/components/panel/DiscreteScaleDial.tsx"],"names":[],"mappings":";AAQA,MAAM,UAAU,iBAAiB,CAAmB,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAA6B;IACzH,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAEjD,OAAO,CACH,eAAK,SAAS,EAAC,yBAAyB,aACpC,gBACI,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,EACtB,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,KAAK,gBACA,SAAS,EACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;oBAEhD,IAAI,IAAI,EAAE,CAAC;wBACP,QAAQ,CAAC,IAAI,CAAC,CAAC;oBACnB,CAAC;gBACL,CAAC,EACD,SAAS,EAAC,2HAA2H,GACvI,EACF,cACI,SAAS,EAAC,gBAAgB,EAC1B,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,MAAM,CAAC,MAAM,mBAAmB,EAAE,YAEzE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBAClB,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC;oBAE/B,OAAO,CACH,eAEI,SAAS,EAAE,yCACP,MAAM,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,6CAC9D,EAAE,YAED,MAAM,CAAC,KAAK,CAAC,IALT,KAAK,CAMP,CACV,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/panel/DraftProbeSummaryBanner.d.ts

@@ -0,0 +1,2 @@
+export declare function DraftProbeSummaryBanner(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DraftProbeSummaryBanner.d.ts.map

package/dist/components/panel/DraftProbeSummaryBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraftProbeSummaryBanner.d.ts","sourceRoot":"","sources":["../../../src/components/panel/DraftProbeSummaryBanner.tsx"],"names":[],"mappings":"AAEA,wBAAgB,uBAAuB,mDAyBtC"}

package/dist/components/panel/DraftProbeSummaryBanner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReport } from "../../providers/reportContext.js";
+export function DraftProbeSummaryBanner() {
+    const { savedProbeEdits, appendSavedProbeSummaryAsNewDraftCase, messages } = useReport();
+    if (Object.keys(savedProbeEdits).length === 0) {
+        return null;
+    }
+    return (_jsxs("section", { className: "flex items-center gap-[8px] border-b border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-surface-muted)] px-[12px] py-[8px]", "data-fivepixels-interactive": "", children: [_jsx("p", { className: "min-w-0 flex-1 text-[11px] font-medium leading-[1.4] text-[var(--adaptive-text-secondary)]", children: messages.composer.probeSummaryPrompt }), _jsx("button", { type: "button", "data-fivepixels-interactive": "", onClick: () => appendSavedProbeSummaryAsNewDraftCase(), className: "shrink-0 rounded-[8px] bg-[var(--adaptive-blue500)] px-[10px] py-[4px] text-[11px] font-semibold text-white", children: messages.composer.probeSummaryApply })] }));
+}
+//# sourceMappingURL=DraftProbeSummaryBanner.js.map

package/dist/components/panel/DraftProbeSummaryBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraftProbeSummaryBanner.js","sourceRoot":"","sources":["../../../src/components/panel/DraftProbeSummaryBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,MAAM,UAAU,uBAAuB;IACnC,MAAM,EAAE,eAAe,EAAE,qCAAqC,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,CAAC;IAEzF,IAAI,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CACH,mBACI,SAAS,EAAC,mIAAmI,iCACjH,EAAE,aAE9B,YAAG,SAAS,EAAC,4FAA4F,YACpG,QAAQ,CAAC,QAAQ,CAAC,kBAAkB,GACrC,EACJ,iBACI,IAAI,EAAC,QAAQ,iCACe,EAAE,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,qCAAqC,EAAE,EACtD,SAAS,EAAC,6GAA6G,YAEtH,QAAQ,CAAC,QAAQ,CAAC,iBAAiB,GAC/B,IACH,CACb,CAAC;AACN,CAAC"}

package/dist/components/panel/FeedbackActivityHeatmap.d.ts

@@ -0,0 +1,2 @@
+export declare function FeedbackActivityHeatmap(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FeedbackActivityHeatmap.d.ts.map

package/dist/components/panel/FeedbackActivityHeatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackActivityHeatmap.d.ts","sourceRoot":"","sources":["../../../src/components/panel/FeedbackActivityHeatmap.tsx"],"names":[],"mappings":"AAgFA,wBAAgB,uBAAuB,4CAgVtC"}

package/dist/components/panel/FeedbackActivityHeatmap.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useActivitySummary } from "../../hooks/useActivitySummary.js";
+import { useReport } from "../../providers/reportContext.js";
+import { formatDateOnly } from "../../utils/format.js";
+import { buildHeatmapGrid, formatHeatmapMonthLabel, formatShortMonthLabel, getHeatmapCellDelay, getHeatmapEntranceDuration, getYearEntranceDuration, getYearMonthCellDelay, resolveHeatmapLevel, } from "../../utils/heatmapActivity.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../components/icons/Icons.js";
+import { HoverTooltip } from "../../components/ui/HoverTooltip.js";
+const HEATMAP_CELL_SIZE_PX = 10;
+const HEATMAP_YEAR_CELL_SIZE_PX = 18;
+const HEATMAP_CELL_GAP_PX = 3;
+const HEATMAP_YEAR_CELL_GAP_PX = 4;
+const HEATMAP_ANIMATION_STAGGER_MS = 24;
+const HEATMAP_ANIMATION_DURATION_MS = 320;
+function formatMessage(template, values) {
+    return Object.entries(values).reduce((message, [key, value]) => message.replace(new RegExp(`\\{${key}\\}`, "g"), String(value)), template);
+}
+function HeatmapToggleGroup({ label, value, options, onChange, }) {
+    return (_jsx("div", { className: "flex flex-wrap gap-[4px]", role: "group", "aria-label": label, children: options.map((option) => (_jsx("button", { type: "button", "aria-pressed": value === option.value, onClick: () => onChange(option.value), className: `rounded-[6px] px-[6px] py-[2px] text-[11px] font-[600] ${value === option.value
+                ? "bg-[var(--adaptive-black200)] text-[var(--adaptive-black900)]"
+                : "text-[var(--adaptive-black500)] hover:bg-[var(--adaptive-black100)]"}`, children: option.label }, option.value))) }));
+}
+function heatmapLevelClassName(level) {
+    switch (level) {
+        case 1:
+            return "bg-[var(--adaptive-blue200)]";
+        case 2:
+            return "bg-[var(--adaptive-blue300)]";
+        case 3:
+            return "bg-[var(--adaptive-blue400)]";
+        case 4:
+            return "bg-[var(--adaptive-blue500)]";
+        default:
+            return "bg-[var(--adaptive-black200)]";
+    }
+}
+export function FeedbackActivityHeatmap() {
+    const { reports, currentPageReports, currentPathname, listScope, setListScope, setFilters, panelTab, openPanelTab, sessionActor, canListAllFeedback, onActivitySummary, locale, messages, } = useReport();
+    const [viewMode, setViewMode] = useState("daily");
+    const [actorScope, setActorScope] = useState("team");
+    const [metric, setMetric] = useState("created");
+    const [selectedYear, setSelectedYear] = useState(() => new Date().getFullYear());
+    const [drillDownMonth, setDrillDownMonth] = useState(null);
+    const [playEntrance, setPlayEntrance] = useState(true);
+    const currentYear = new Date().getFullYear();
+    const canGoNextYear = selectedYear < currentYear;
+    const sourceReports = listScope === "all" ? reports : currentPageReports;
+    const summaryParams = useMemo(() => ({
+        year: selectedYear,
+        pathname: currentPathname,
+        listScope,
+        actorScope,
+        metric,
+        actorName: sessionActor?.name ?? null,
+    }), [actorScope, currentPathname, listScope, metric, selectedYear, sessionActor?.name]);
+    const { summary: yearSummary } = useActivitySummary({
+        reports: sourceReports,
+        params: summaryParams,
+        onActivitySummary,
+    });
+    const yearBuckets = useMemo(() => {
+        const bucketMap = new Map(yearSummary.buckets.map((bucket) => [bucket.dateKey, bucket.count]));
+        const buckets = Array.from({ length: 12 }, (_, monthIndex) => {
+            const monthKey = `${selectedYear}-${String(monthIndex + 1).padStart(2, "0")}`;
+            return {
+                monthKey,
+                monthIndex,
+                count: bucketMap.get(monthKey) ?? 0,
+            };
+        });
+        const maxCount = Math.max(0, ...buckets.map((bucket) => bucket.count));
+        return { buckets, maxCount, totalCount: yearSummary.totalCount };
+    }, [selectedYear, yearSummary.buckets, yearSummary.totalCount]);
+    const monthHeatmap = useMemo(() => drillDownMonth
+        ? buildHeatmapGrid(sourceReports, {
+            monthKey: drillDownMonth,
+            actorScope,
+            metric,
+            viewMode,
+            actorName: sessionActor?.name ?? null,
+        })
+        : null, [actorScope, drillDownMonth, metric, sessionActor?.name, sourceReports, viewMode]);
+    useEffect(() => {
+        setPlayEntrance(true);
+        const maxDelay = drillDownMonth
+            ? getHeatmapEntranceDuration(monthHeatmap?.totalWeeks ?? 0, HEATMAP_ANIMATION_STAGGER_MS, HEATMAP_ANIMATION_DURATION_MS)
+            : getYearEntranceDuration(HEATMAP_ANIMATION_STAGGER_MS, HEATMAP_ANIMATION_DURATION_MS);
+        const timer = window.setTimeout(() => setPlayEntrance(false), maxDelay + 80);
+        return () => window.clearTimeout(timer);
+    }, [actorScope, drillDownMonth, listScope, metric, monthHeatmap?.totalWeeks, selectedYear, viewMode]);
+    const handleDayCellClick = (dateKey) => {
+        setFilters((current) => ({ ...current, dateKey }));
+        if (panelTab !== "feedback-list") {
+            openPanelTab("feedback-list");
+        }
+    };
+    const heatmapMessages = messages.activityHeatmap;
+    return (_jsxs("section", { className: "border-b border-[var(--adaptive-black200)] bg-[var(--adaptive-black50)] px-[16px] py-[12px]", children: [_jsxs("div", { className: "mb-[10px] flex items-start justify-between gap-[8px]", children: [_jsx("p", { className: "text-[13px] font-[700] text-[var(--adaptive-black900)]", children: heatmapMessages.title }), drillDownMonth ? (_jsx(HeatmapToggleGroup, { label: heatmapMessages.viewModeAriaLabel, value: viewMode, onChange: setViewMode, options: [
+                            { value: "daily", label: heatmapMessages.viewDaily },
+                            { value: "weekly", label: heatmapMessages.viewWeekly },
+                            { value: "cumulative", label: heatmapMessages.viewCumulative },
+                        ] })) : null] }), _jsxs("div", { className: "mb-[10px] flex flex-col gap-[8px]", children: [_jsx(HeatmapToggleGroup, { label: heatmapMessages.actorAriaLabel, value: actorScope, onChange: setActorScope, options: [
+                            { value: "team", label: heatmapMessages.actorTeam },
+                            { value: "me", label: heatmapMessages.actorMe },
+                        ] }), _jsxs("div", { className: "flex flex-wrap items-center gap-[8px]", children: [_jsx(HeatmapToggleGroup, { label: heatmapMessages.metricAriaLabel, value: metric, onChange: setMetric, options: [
+                                    { value: "created", label: heatmapMessages.metricCreated },
+                                    { value: "activity", label: heatmapMessages.metricActivity },
+                                ] }), canListAllFeedback ? (_jsx(HeatmapToggleGroup, { label: heatmapMessages.scopeAriaLabel, value: listScope, onChange: setListScope, options: [
+                                    { value: "current", label: heatmapMessages.scopeCurrentPage },
+                                    { value: "all", label: heatmapMessages.scopeAllPages },
+                                ] })) : null, drillDownMonth ? (_jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsx("button", { type: "button", onClick: () => setDrillDownMonth(null), className: "rounded-[6px] px-[6px] py-[2px] text-[11px] font-[600] text-[var(--adaptive-blue500)] hover:bg-[var(--adaptive-black100)]", children: heatmapMessages.backToYear }), _jsx("p", { className: "text-[11px] font-[700] text-[var(--adaptive-black900)]", children: formatHeatmapMonthLabel(drillDownMonth, locale) })] })) : (_jsxs("nav", { className: "flex items-center gap-[2px]", "aria-label": heatmapMessages.yearNavAriaLabel, children: [_jsx("button", { type: "button", "aria-label": heatmapMessages.prevYear, onClick: () => setSelectedYear((current) => current - 1), className: "flex h-[22px] w-[22px] items-center justify-center rounded-[6px] text-[var(--adaptive-black500)] hover:bg-[var(--adaptive-black100)] hover:text-[var(--adaptive-black900)]", children: _jsx(ChevronLeftIcon, { className: "h-3.5 w-3.5" }) }), _jsx("p", { className: "min-w-[56px] px-[4px] text-center text-[11px] font-[700] text-[var(--adaptive-black900)]", children: selectedYear }), _jsx("button", { type: "button", "aria-label": heatmapMessages.nextYear, disabled: !canGoNextYear, onClick: () => {
+                                            if (canGoNextYear) {
+                                                setSelectedYear((current) => current + 1);
+                                            }
+                                        }, className: "flex h-[22px] w-[22px] items-center justify-center rounded-[6px] text-[var(--adaptive-black500)] hover:bg-[var(--adaptive-black100)] hover:text-[var(--adaptive-black900)] disabled:cursor-not-allowed disabled:opacity-35", children: _jsx(ChevronRightIcon, { className: "h-3.5 w-3.5" }) })] }))] })] }), _jsx("div", { className: "pb-[4px]", children: drillDownMonth && monthHeatmap ? (_jsx("div", { style: {
+                        display: "grid",
+                        gridTemplateRows: `repeat(7, ${HEATMAP_CELL_SIZE_PX}px)`,
+                        gridTemplateColumns: `repeat(${monthHeatmap.totalWeeks}, ${HEATMAP_CELL_SIZE_PX}px)`,
+                        gap: `${HEATMAP_CELL_GAP_PX}px`,
+                    }, children: monthHeatmap.cells.map((cell, index) => {
+                        const level = resolveHeatmapLevel(cell.count, monthHeatmap.maxCount);
+                        const delay = playEntrance ? getHeatmapCellDelay(cell.weekIndex, cell.dayOfWeek, monthHeatmap.totalWeeks, HEATMAP_ANIMATION_STAGGER_MS) : 0;
+                        const labelDate = cell.dateKey ? formatDateOnly(`${cell.dateKey}T12:00:00`, locale) : "";
+                        const tooltipLabel = cell.dateKey
+                            ? cell.count > 0
+                                ? formatMessage(heatmapMessages.cellTooltip, { date: labelDate, count: cell.count })
+                                : formatMessage(heatmapMessages.cellTooltipEmpty, { date: labelDate })
+                            : "";
+                        const ariaLabel = cell.dateKey
+                            ? formatMessage(heatmapMessages.cellAriaLabel, { date: labelDate, count: cell.count })
+                            : undefined;
+                        const button = (_jsx("button", { type: "button", disabled: !cell.inRange || !cell.dateKey, "aria-label": ariaLabel, onClick: () => {
+                                if (cell.dateKey && cell.inRange) {
+                                    handleDayCellClick(cell.dateKey);
+                                }
+                            }, className: `${playEntrance ? "fivepixels-heatmap-dot" : ""} rounded-[2px] ${cell.inRange
+                                ? `${heatmapLevelClassName(level)} cursor-pointer hover:ring-1 hover:ring-[var(--adaptive-blue300)]`
+                                : "pointer-events-none bg-[var(--adaptive-black200)] opacity-35"}`, style: {
+                                gridColumn: cell.weekIndex + 1,
+                                gridRow: cell.dayOfWeek + 1,
+                                width: HEATMAP_CELL_SIZE_PX,
+                                height: HEATMAP_CELL_SIZE_PX,
+                                animationDelay: `${delay}ms`,
+                            } }, `${cell.weekIndex}-${cell.dayOfWeek}-${index}`));
+                        if (!cell.inRange || !cell.dateKey || !tooltipLabel) {
+                            return button;
+                        }
+                        return (_jsx(HoverTooltip, { label: tooltipLabel, className: "contents", children: button }, `${cell.weekIndex}-${cell.dayOfWeek}-${index}`));
+                    }) })) : (_jsxs("div", { children: [_jsx("div", { style: {
+                                display: "grid",
+                                gridTemplateColumns: `repeat(12, ${HEATMAP_YEAR_CELL_SIZE_PX}px)`,
+                                gap: `${HEATMAP_YEAR_CELL_GAP_PX}px`,
+                            }, children: yearBuckets.buckets.map((bucket) => {
+                                const level = resolveHeatmapLevel(bucket.count, yearBuckets.maxCount);
+                                const delay = playEntrance ? getYearMonthCellDelay(bucket.monthIndex, HEATMAP_ANIMATION_STAGGER_MS) : 0;
+                                const monthLabel = formatShortMonthLabel(bucket.monthIndex, locale);
+                                const tooltipLabel = bucket.count > 0
+                                    ? formatMessage(heatmapMessages.monthBucketTooltip, { month: monthLabel, count: bucket.count })
+                                    : formatMessage(heatmapMessages.monthBucketTooltipEmpty, { month: monthLabel });
+                                const ariaLabel = formatMessage(heatmapMessages.monthBucketAriaLabel, { month: monthLabel, count: bucket.count });
+                                const button = (_jsx("button", { type: "button", "aria-label": ariaLabel, onClick: () => setDrillDownMonth(bucket.monthKey), className: `${playEntrance ? "fivepixels-heatmap-dot" : ""} rounded-[3px] ${heatmapLevelClassName(level)} cursor-pointer hover:ring-1 hover:ring-[var(--adaptive-blue300)]`, style: {
+                                        width: HEATMAP_YEAR_CELL_SIZE_PX,
+                                        height: HEATMAP_YEAR_CELL_SIZE_PX,
+                                        animationDelay: `${delay}ms`,
+                                    } }, bucket.monthKey));
+                                return (_jsx(HoverTooltip, { label: tooltipLabel, className: "contents", children: button }, bucket.monthKey));
+                            }) }), _jsx("div", { className: "mt-[6px] grid", style: {
+                                gridTemplateColumns: `repeat(12, ${HEATMAP_YEAR_CELL_SIZE_PX}px)`,
+                                gap: `${HEATMAP_YEAR_CELL_GAP_PX}px`,
+                            }, children: yearBuckets.buckets.map((bucket) => (_jsx("span", { className: "text-center text-[10px] text-[var(--adaptive-black500)]", style: { width: HEATMAP_YEAR_CELL_SIZE_PX }, children: formatShortMonthLabel(bucket.monthIndex, locale) }, `${bucket.monthKey}-label`))) })] })) }), _jsxs("div", { className: "mt-[8px] flex items-center justify-between gap-[8px] text-[10px] text-[var(--adaptive-black500)]", children: [_jsxs("div", { className: "flex items-center gap-[4px]", children: [_jsx("span", { children: heatmapMessages.legendLess }), _jsx("span", { className: "h-[10px] w-[10px] rounded-[2px] bg-[var(--adaptive-black200)]" }), _jsx("span", { className: "h-[10px] w-[10px] rounded-[2px] bg-[var(--adaptive-blue200)]" }), _jsx("span", { className: "h-[10px] w-[10px] rounded-[2px] bg-[var(--adaptive-blue300)]" }), _jsx("span", { className: "h-[10px] w-[10px] rounded-[2px] bg-[var(--adaptive-blue400)]" }), _jsx("span", { className: "h-[10px] w-[10px] rounded-[2px] bg-[var(--adaptive-blue500)]" }), _jsx("span", { children: heatmapMessages.legendMore })] }), _jsx("p", { children: formatMessage(heatmapMessages.totalCount, { count: drillDownMonth && monthHeatmap ? monthHeatmap.totalCount : yearBuckets.totalCount }) })] })] }));
+}
+//# sourceMappingURL=FeedbackActivityHeatmap.js.map

package/dist/components/panel/FeedbackActivityHeatmap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackActivityHeatmap.js","sourceRoot":"","sources":["../../../src/components/panel/FeedbackActivityHeatmap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EACH,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,EACnB,0BAA0B,EAC1B,uBAAuB,EACvB,qBAAqB,EACrB,mBAAmB,GACtB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAChC,MAAM,yBAAyB,GAAG,EAAE,CAAC;AACrC,MAAM,mBAAmB,GAAG,CAAC,CAAC;AAC9B,MAAM,wBAAwB,GAAG,CAAC,CAAC;AACnC,MAAM,4BAA4B,GAAG,EAAE,CAAC;AACxC,MAAM,6BAA6B,GAAG,GAAG,CAAC;AAE1C,SAAS,aAAa,CAAC,QAAgB,EAAE,MAAuC;IAC5E,OAAO,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,MAAM,GAAG,KAAK,EAAE,GAAG,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC/I,CAAC;AAED,SAAS,kBAAkB,CAAmB,EAC1C,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,GAMX;IACG,OAAO,CACH,cACI,SAAS,EAAC,0BAA0B,EACpC,IAAI,EAAC,OAAO,gBACA,KAAK,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACrB,iBAEI,IAAI,EAAC,QAAQ,kBACC,KAAK,KAAK,MAAM,CAAC,KAAK,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EACrC,SAAS,EAAE,0DACP,KAAK,KAAK,MAAM,CAAC,KAAK;gBAClB,CAAC,CAAC,+DAA+D;gBACjE,CAAC,CAAC,qEACV,EAAE,YAED,MAAM,CAAC,KAAK,IAVR,MAAM,CAAC,KAAK,CAWZ,CACZ,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAa;IACxC,QAAQ,KAAK,EAAE,CAAC;QACZ,KAAK,CAAC;YACF,OAAO,8BAA8B,CAAC;QAC1C,KAAK,CAAC;YACF,OAAO,8BAA8B,CAAC;QAC1C,KAAK,CAAC;YACF,OAAO,8BAA8B,CAAC;QAC1C,KAAK,CAAC;YACF,OAAO,8BAA8B,CAAC;QAC1C;YACI,OAAO,+BAA+B,CAAC;IAC/C,CAAC;AACL,CAAC;AAED,MAAM,UAAU,uBAAuB;IACnC,MAAM,EACF,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,SAAS,EACT,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,MAAM,EACN,QAAQ,GACX,GAAG,SAAS,EAAE,CAAC;IAChB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAkB,OAAO,CAAC,CAAC;IACnE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAoB,MAAM,CAAC,CAAC;IACxE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAgB,SAAS,CAAC,CAAC;IAC/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;IACjF,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEvD,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7C,MAAM,aAAa,GAAG,YAAY,GAAG,WAAW,CAAC;IAEjD,MAAM,aAAa,GAAG,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;IACzE,MAAM,aAAa,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE,eAAe;QACzB,SAAS;QACT,UAAU;QACV,MAAM;QACN,SAAS,EAAE,YAAY,EAAE,IAAI,IAAI,IAAI;KACxC,CAAC,EACF,CAAC,UAAU,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,CACrF,CAAC;IACF,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,kBAAkB,CAAC;QAChD,OAAO,EAAE,aAAa;QACtB,MAAM,EAAE,aAAa;QACrB,iBAAiB;KACpB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC/F,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE;YACzD,MAAM,QAAQ,GAAG,GAAG,YAAY,IAAI,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;YAE9E,OAAO;gBACH,QAAQ;gBACR,UAAU;gBACV,KAAK,EAAE,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC;aACtC,CAAC;QACN,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAEvE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE,CAAC;IACrE,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC,OAAO,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAEhE,MAAM,YAAY,GAAG,OAAO,CACxB,GAAG,EAAE,CACD,cAAc;QACV,CAAC,CAAC,gBAAgB,CAAC,aAAa,EAAE;YAC5B,QAAQ,EAAE,cAAc;YACxB,UAAU;YACV,MAAM;YACN,QAAQ;YACR,SAAS,EAAE,YAAY,EAAE,IAAI,IAAI,IAAI;SACxC,CAAC;QACJ,CAAC,CAAC,IAAI,EACd,CAAC,UAAU,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,CAAC,CACpF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,QAAQ,GAAG,cAAc;YAC3B,CAAC,CAAC,0BAA0B,CAAC,YAAY,EAAE,UAAU,IAAI,CAAC,EAAE,4BAA4B,EAAE,6BAA6B,CAAC;YACxH,CAAC,CAAC,uBAAuB,CAAC,4BAA4B,EAAE,6BAA6B,CAAC,CAAC;QAC3F,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,GAAG,EAAE,CAAC,CAAC;QAE7E,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtG,MAAM,kBAAkB,GAAG,CAAC,OAAe,EAAE,EAAE;QAC3C,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QAEnD,IAAI,QAAQ,KAAK,eAAe,EAAE,CAAC;YAC/B,YAAY,CAAC,eAAe,CAAC,CAAC;QAClC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC;IAEjD,OAAO,CACH,mBAAS,SAAS,EAAC,6FAA6F,aAC5G,eAAK,SAAS,EAAC,sDAAsD,aACjE,YAAG,SAAS,EAAC,wDAAwD,YAAE,eAAe,CAAC,KAAK,GAAK,EAChG,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,kBAAkB,IACf,KAAK,EAAE,eAAe,CAAC,iBAAiB,EACxC,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,WAAW,EACrB,OAAO,EAAE;4BACL,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE;4BACpD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,CAAC,UAAU,EAAE;4BACtD,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,CAAC,cAAc,EAAE;yBACjE,GACH,CACL,CAAC,CAAC,CAAC,IAAI,IACN,EAEN,eAAK,SAAS,EAAC,mCAAmC,aAC9C,KAAC,kBAAkB,IACf,KAAK,EAAE,eAAe,CAAC,cAAc,EACrC,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE;4BACL,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,SAAS,EAAE;4BACnD,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,CAAC,OAAO,EAAE;yBAClD,GACH,EAEF,eAAK,SAAS,EAAC,uCAAuC,aAClD,KAAC,kBAAkB,IACf,KAAK,EAAE,eAAe,CAAC,eAAe,EACtC,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE;oCACL,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,CAAC,aAAa,EAAE;oCAC1D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,CAAC,cAAc,EAAE;iCAC/D,GACH,EAED,kBAAkB,CAAC,CAAC,CAAC,CAClB,KAAC,kBAAkB,IACf,KAAK,EAAE,eAAe,CAAC,cAAc,EACrC,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE;oCACL,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,eAAe,CAAC,gBAAgB,EAAE;oCAC7D,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,eAAe,CAAC,aAAa,EAAE;iCACzD,GACH,CACL,CAAC,CAAC,CAAC,IAAI,EAEP,cAAc,CAAC,CAAC,CAAC,CACd,eAAK,SAAS,EAAC,6BAA6B,aACxC,iBACI,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EACtC,SAAS,EAAC,2HAA2H,YAEpI,eAAe,CAAC,UAAU,GACtB,EACT,YAAG,SAAS,EAAC,wDAAwD,YAAE,uBAAuB,CAAC,cAAc,EAAE,MAAM,CAAC,GAAK,IACzH,CACT,CAAC,CAAC,CAAC,CACA,eACI,SAAS,EAAC,6BAA6B,gBAC3B,eAAe,CAAC,gBAAgB,aAE5C,iBACI,IAAI,EAAC,QAAQ,gBACD,eAAe,CAAC,QAAQ,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC,EACxD,SAAS,EAAC,4KAA4K,YAEtL,KAAC,eAAe,IAAC,SAAS,EAAC,aAAa,GAAG,GACtC,EAET,YAAG,SAAS,EAAC,0FAA0F,YAAE,YAAY,GAAK,EAE1H,iBACI,IAAI,EAAC,QAAQ,gBACD,eAAe,CAAC,QAAQ,EACpC,QAAQ,EAAE,CAAC,aAAa,EACxB,OAAO,EAAE,GAAG,EAAE;4CACV,IAAI,aAAa,EAAE,CAAC;gDAChB,eAAe,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;4CAC9C,CAAC;wCACL,CAAC,EACD,SAAS,EAAC,4NAA4N,YAEtO,KAAC,gBAAgB,IAAC,SAAS,EAAC,aAAa,GAAG,GACvC,IACP,CACT,IACC,IACJ,EAEN,cAAK,SAAS,EAAC,UAAU,YACpB,cAAc,IAAI,YAAY,CAAC,CAAC,CAAC,CAC9B,cACI,KAAK,EAAE;wBACH,OAAO,EAAE,MAAM;wBACf,gBAAgB,EAAE,aAAa,oBAAoB,KAAK;wBACxD,mBAAmB,EAAE,UAAU,YAAY,CAAC,UAAU,KAAK,oBAAoB,KAAK;wBACpF,GAAG,EAAE,GAAG,mBAAmB,IAAI;qBAClC,YAEA,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACpC,MAAM,KAAK,GAAG,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;wBACrE,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,UAAU,EAAE,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC5I,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,OAAO,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;wBACzF,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO;4BAC7B,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC;gCACZ,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gCACpF,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,gBAAgB,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4BAC1E,CAAC,CAAC,EAAE,CAAC;wBACT,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO;4BAC1B,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;4BACtF,CAAC,CAAC,SAAS,CAAC;wBAEhB,MAAM,MAAM,GAAG,CACX,iBAEI,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,gBAC5B,SAAS,EACrB,OAAO,EAAE,GAAG,EAAE;gCACV,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;oCAC/B,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gCACrC,CAAC;4BACL,CAAC,EACD,SAAS,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,kBACtD,IAAI,CAAC,OAAO;gCACR,CAAC,CAAC,GAAG,qBAAqB,CAAC,KAAK,CAAC,mEAAmE;gCACpG,CAAC,CAAC,8DACV,EAAE,EACF,KAAK,EAAE;gCACH,UAAU,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC;gCAC9B,OAAO,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC;gCAC3B,KAAK,EAAE,oBAAoB;gCAC3B,MAAM,EAAE,oBAAoB;gCAC5B,cAAc,EAAE,GAAG,KAAK,IAAI;6BAC/B,IApBI,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,EAAE,CAqBrD,CACL,CAAC;wBAEF,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,YAAY,EAAE,CAAC;4BAClD,OAAO,MAAM,CAAC;wBAClB,CAAC;wBAED,OAAO,CACH,KAAC,YAAY,IAET,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,UAAU,YAEnB,MAAM,IAJF,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,EAAE,CAKxC,CAClB,CAAC;oBACN,CAAC,CAAC,GACA,CACT,CAAC,CAAC,CAAC,CACA,0BACI,cACI,KAAK,EAAE;gCACH,OAAO,EAAE,MAAM;gCACf,mBAAmB,EAAE,cAAc,yBAAyB,KAAK;gCACjE,GAAG,EAAE,GAAG,wBAAwB,IAAI;6BACvC,YAEA,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;gCAChC,MAAM,KAAK,GAAG,mBAAmB,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;gCACtE,MAAM,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,MAAM,CAAC,UAAU,EAAE,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gCACxG,MAAM,UAAU,GAAG,qBAAqB,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;gCACpE,MAAM,YAAY,GACd,MAAM,CAAC,KAAK,GAAG,CAAC;oCACZ,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,kBAAkB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;oCAC/F,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;gCACxF,MAAM,SAAS,GAAG,aAAa,CAAC,eAAe,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;gCAElH,MAAM,MAAM,GAAG,CACX,iBAEI,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,QAAQ,CAAC,EACjD,SAAS,EAAE,GAAG,YAAY,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,kBAAkB,qBAAqB,CAAC,KAAK,CAAC,mEAAmE,EAC3K,KAAK,EAAE;wCACH,KAAK,EAAE,yBAAyB;wCAChC,MAAM,EAAE,yBAAyB;wCACjC,cAAc,EAAE,GAAG,KAAK,IAAI;qCAC/B,IATI,MAAM,CAAC,QAAQ,CAUtB,CACL,CAAC;gCAEF,OAAO,CACH,KAAC,YAAY,IAET,KAAK,EAAE,YAAY,EACnB,SAAS,EAAC,UAAU,YAEnB,MAAM,IAJF,MAAM,CAAC,QAAQ,CAKT,CAClB,CAAC;4BACN,CAAC,CAAC,GACA,EAEN,cACI,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE;gCACH,mBAAmB,EAAE,cAAc,yBAAyB,KAAK;gCACjE,GAAG,EAAE,GAAG,wBAAwB,IAAI;6BACvC,YAEA,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACjC,eAEI,SAAS,EAAC,yDAAyD,EACnE,KAAK,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,YAE1C,qBAAqB,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,IAJ5C,GAAG,MAAM,CAAC,QAAQ,QAAQ,CAK5B,CACV,CAAC,GACA,IACJ,CACT,GACC,EAEN,eAAK,SAAS,EAAC,kGAAkG,aAC7G,eAAK,SAAS,EAAC,6BAA6B,aACxC,yBAAO,eAAe,CAAC,UAAU,GAAQ,EACzC,eAAM,SAAS,EAAC,+DAA+D,GAAG,EAClF,eAAM,SAAS,EAAC,8DAA8D,GAAG,EACjF,eAAM,SAAS,EAAC,8DAA8D,GAAG,EACjF,eAAM,SAAS,EAAC,8DAA8D,GAAG,EACjF,eAAM,SAAS,EAAC,8DAA8D,GAAG,EACjF,yBAAO,eAAe,CAAC,UAAU,GAAQ,IACvC,EACN,sBAAI,aAAa,CAAC,eAAe,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,cAAc,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC,GAAK,IAC9I,IACA,CACb,CAAC;AACN,CAAC"}

package/dist/components/panel/HexColorField.d.ts

@@ -0,0 +1,9 @@
+type HexColorFieldProps = {
+    label: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+};
+export declare function HexColorField({ label, value, onChange, placeholder }: HexColorFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HexColorField.d.ts.map

package/dist/components/panel/HexColorField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HexColorField.d.ts","sourceRoot":"","sources":["../../../src/components/panel/HexColorField.tsx"],"names":[],"mappings":"AAGA,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAsB,EAAE,EAAE,kBAAkB,2CAwDnG"}

package/dist/components/panel/HexColorField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { displayToHex, getHexColorPreview, hexToColorInputValue, hexToDisplay, sanitizeHexDisplayInput } from "../../utils/hexColor.js";
+export function HexColorField({ label, value, onChange, placeholder = "ededed" }) {
+    const colorInputRef = useRef(null);
+    const [displayValue, setDisplayValue] = useState(() => hexToDisplay(value));
+    const preview = getHexColorPreview(value);
+    useEffect(() => {
+        setDisplayValue(hexToDisplay(value));
+    }, [value]);
+    const commitDisplayValue = (raw) => {
+        const sanitized = sanitizeHexDisplayInput(raw);
+        setDisplayValue(sanitized);
+        if (sanitized.length === 6) {
+            const hex = displayToHex(sanitized);
+            if (hex) {
+                onChange(hex);
+            }
+        }
+    };
+    return (_jsxs("label", { className: "flex flex-col gap-[4px] text-[11px]", children: [_jsx("span", { className: "font-medium text-[var(--adaptive-black500)]", children: label }), _jsxs("div", { className: "flex items-center gap-[6px]", children: [_jsxs("button", { type: "button", onClick: () => colorInputRef.current?.click(), className: "relative h-[30px] w-[30px] shrink-0 overflow-hidden rounded-[8px] border border-[var(--adaptive-border-subtle)]", "aria-label": label, children: [_jsx("span", { className: "absolute inset-0", style: { backgroundColor: preview ?? "transparent" }, "aria-hidden": true }), _jsx("input", { ref: colorInputRef, type: "color", value: hexToColorInputValue(value), onChange: (event) => onChange(event.target.value), className: "absolute inset-0 h-full w-full cursor-pointer opacity-0", tabIndex: -1 })] }), _jsx("input", { type: "text", value: displayValue, onChange: (event) => commitDisplayValue(event.target.value), placeholder: placeholder, className: "min-w-0 flex-1 rounded-[8px] border border-[var(--adaptive-border-subtle)] bg-[var(--adaptive-black50)] px-[8px] py-[6px] font-[var(--coding-font)] text-[12px] uppercase text-[var(--adaptive-black900)] outline-none focus:border-[var(--adaptive-blue500)]" })] })] }));
+}
+//# sourceMappingURL=HexColorField.js.map

package/dist/components/panel/HexColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HexColorField.js","sourceRoot":"","sources":["../../../src/components/panel/HexColorField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AASpI,MAAM,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAG,QAAQ,EAAsB;IAChG,MAAM,aAAa,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5E,MAAM,OAAO,GAAG,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACX,eAAe,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,EAAE;QACvC,MAAM,SAAS,GAAG,uBAAuB,CAAC,GAAG,CAAC,CAAC;QAC/C,eAAe,CAAC,SAAS,CAAC,CAAC;QAE3B,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,MAAM,GAAG,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;YAEpC,IAAI,GAAG,EAAE,CAAC;gBACN,QAAQ,CAAC,GAAG,CAAC,CAAC;YAClB,CAAC;QACL,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,iBAAO,SAAS,EAAC,qCAAqC,aAClD,eAAM,SAAS,EAAC,6CAA6C,YAAE,KAAK,GAAQ,EAC5E,eAAK,SAAS,EAAC,6BAA6B,aACxC,kBACI,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,EAC7C,SAAS,EAAC,iHAAiH,gBAC/G,KAAK,aAEjB,eACI,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,EAAE,eAAe,EAAE,OAAO,IAAI,aAAa,EAAE,wBAEtD,EACF,gBACI,GAAG,EAAE,aAAa,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,oBAAoB,CAAC,KAAK,CAAC,EAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACjD,SAAS,EAAC,yDAAyD,EACnE,QAAQ,EAAE,CAAC,CAAC,GACd,IACG,EACT,gBACI,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC3D,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,+PAA+P,GAC3Q,IACA,IACF,CACX,CAAC;AACN,CAAC"}

package/dist/components/panel/MarkerShapePicker.d.ts

@@ -0,0 +1,10 @@
+import type { MarkerShape } from "../../constants/markerAppearance.js";
+type MarkerShapePickerProps = {
+    value: MarkerShape;
+    onChange: (value: MarkerShape) => void;
+    labels: Record<MarkerShape, string>;
+    ariaLabel: string;
+};
+export declare function MarkerShapePicker({ value, onChange, labels, ariaLabel }: MarkerShapePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MarkerShapePicker.d.ts.map

package/dist/components/panel/MarkerShapePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerShapePicker.d.ts","sourceRoot":"","sources":["../../../src/components/panel/MarkerShapePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAInE,KAAK,sBAAsB,GAAG;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACpC,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAuBF,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,sBAAsB,2CA6C/F"}

package/dist/components/panel/MarkerShapePicker.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MARKER_SHAPE_VALUES } from "../../constants/markerAppearance.js";
+import { CheckIcon } from "../../components/icons/Icons.js";
+function ShapePreview({ shape }) {
+    if (shape === "square") {
+        return _jsx("span", { className: "block h-[14px] w-[14px] rounded-[3px] bg-[var(--adaptive-blue500)]" });
+    }
+    if (shape === "pill") {
+        return _jsx("span", { className: "block h-[10px] w-[18px] rounded-full bg-[var(--adaptive-blue500)]" });
+    }
+    if (shape === "pin") {
+        return (_jsx("span", { className: "block h-[16px] w-[12px] bg-[var(--adaptive-blue500)]", style: { clipPath: "polygon(50% 100%, 6% 42%, 6% 8%, 94% 8%, 94% 42%)" } }));
+    }
+    return _jsx("span", { className: "block h-[14px] w-[14px] rounded-full bg-[var(--adaptive-blue500)]" });
+}
+export function MarkerShapePicker({ value, onChange, labels, ariaLabel }) {
+    return (_jsx("div", { role: "radiogroup", "aria-label": ariaLabel, className: "grid grid-cols-4 gap-[6px]", children: MARKER_SHAPE_VALUES.map((shape) => {
+            const active = shape === value;
+            return (_jsxs("button", { type: "button", role: "radio", "aria-checked": active, onClick: () => onChange(shape), className: `group relative flex flex-col items-center gap-[5px] rounded-[8px] p-[4px] transition-colors ${active
+                    ? "ring-2 ring-[var(--adaptive-blue500)] ring-offset-1 ring-offset-[var(--adaptive-black50)]"
+                    : "ring-1 ring-[var(--adaptive-black200)] hover:ring-[var(--adaptive-black300)]"}`, children: [_jsxs("div", { className: "relative flex h-[28px] w-full items-center justify-center rounded-[5px] bg-[var(--adaptive-black100)]", children: [_jsx(ShapePreview, { shape: shape }), active ? (_jsx("span", { className: "absolute right-[2px] bottom-[2px] flex h-[12px] w-[12px] items-center justify-center rounded-full bg-[var(--adaptive-blue500)] text-white", children: _jsx(CheckIcon, { className: "h-[7px] w-[7px]" }) })) : null] }), _jsx("span", { className: `w-full truncate text-center text-[9px] leading-[1.2] ${active
+                            ? "font-semibold text-[var(--adaptive-blue500)]"
+                            : "font-medium text-[var(--adaptive-black600)] group-hover:text-[var(--adaptive-black800)]"}`, children: labels[shape] })] }, shape));
+        }) }));
+}
+//# sourceMappingURL=MarkerShapePicker.js.map

package/dist/components/panel/MarkerShapePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkerShapePicker.js","sourceRoot":"","sources":["../../../src/components/panel/MarkerShapePicker.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AASxD,SAAS,YAAY,CAAC,EAAE,KAAK,EAA0B;IACnD,IAAI,KAAK,KAAK,QAAQ,EAAE,CAAC;QACrB,OAAO,eAAM,SAAS,EAAC,oEAAoE,GAAG,CAAC;IACnG,CAAC;IAED,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;QACnB,OAAO,eAAM,SAAS,EAAC,mEAAmE,GAAG,CAAC;IAClG,CAAC;IAED,IAAI,KAAK,KAAK,KAAK,EAAE,CAAC;QAClB,OAAO,CACH,eACI,SAAS,EAAC,sDAAsD,EAChE,KAAK,EAAE,EAAE,QAAQ,EAAE,mDAAmD,EAAE,GAC1E,CACL,CAAC;IACN,CAAC;IAED,OAAO,eAAM,SAAS,EAAC,mEAAmE,GAAG,CAAC;AAClG,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAA0B;IAC5F,OAAO,CACH,cACI,IAAI,EAAC,YAAY,gBACL,SAAS,EACrB,SAAS,EAAC,4BAA4B,YAErC,mBAAmB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,KAAK,KAAK,KAAK,CAAC;YAE/B,OAAO,CACH,kBAEI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,MAAM,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,SAAS,EAAE,+FACP,MAAM;oBACF,CAAC,CAAC,2FAA2F;oBAC7F,CAAC,CAAC,8EACV,EAAE,aAEF,eAAK,SAAS,EAAC,uGAAuG,aAClH,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,EAC7B,MAAM,CAAC,CAAC,CAAC,CACN,eAAM,SAAS,EAAC,2IAA2I,YACvJ,KAAC,SAAS,IAAC,SAAS,EAAC,iBAAiB,GAAG,GACtC,CACV,CAAC,CAAC,CAAC,IAAI,IACN,EACN,eACI,SAAS,EAAE,wDACP,MAAM;4BACF,CAAC,CAAC,8CAA8C;4BAChD,CAAC,CAAC,yFACV,EAAE,YAED,MAAM,CAAC,KAAK,CAAC,GACX,KA3BF,KAAK,CA4BL,CACZ,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/panel/PanelDropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelDropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/panel/PanelDropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKzG,KAAK,sBAAsB,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC;AAqEF,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAe,EAAE,EAAE,sBAAsB,2CAoG7H;AAED,KAAK,0BAA0B,GAAG;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,MAAc,EAAE,QAAgB,EAAE,QAAQ,EAAE,EAAE,0BAA0B,2CAaxH"}
+{"version":3,"file":"PanelDropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/panel/PanelDropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtH,KAAK,sBAAsB,GAAG;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC;AAiFF,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAe,EAAE,EAAE,sBAAsB,2CAqG7H;AAED,KAAK,0BAA0B,GAAG;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EAAE,OAAO,EAAE,MAAc,EAAE,QAAgB,EAAE,QAAQ,EAAE,EAAE,0BAA0B,2CAaxH"}

package/dist/components/panel/PanelDropdownMenu.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-const MENU_GAP = 6;
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+const MENU_GAP = 0;
+// const MENU_GAP = 6;
 const VIEWPORT_PADDING = 8;
 function computeDropdownPlacement(triggerRect, menuWidth, menuHeight, preferredAlign) {
     const viewportWidth = window.innerWidth;
@@ -10,17 +11,17 @@ function computeDropdownPlacement(triggerRect, menuWidth, menuHeight, preferredA
     const fitsAbove = menuHeight + MENU_GAP <= spaceAbove;
     const fitsBelow = menuHeight + MENU_GAP <= spaceBelow;
     let vertical;
-    if (fitsAbove && !fitsBelow) {
-        vertical = "top";
-    }
-    else if (!fitsAbove && fitsBelow) {
+    if (fitsBelow && !fitsAbove) {
         vertical = "bottom";
     }
-    else if (fitsAbove && fitsBelow) {
+    else if (!fitsBelow && fitsAbove) {
         vertical = "top";
     }
+    else if (fitsAbove && fitsBelow) {
+        vertical = "bottom";
+    }
     else {
-        vertical = spaceAbove >= spaceBelow ? "top" : "bottom";
+        vertical = spaceBelow >= spaceAbove ? "bottom" : "top";
     }
     const viewportTop = vertical === "top" ? triggerRect.top - menuHeight - MENU_GAP : triggerRect.bottom + MENU_GAP;
     const alignRightLeft = triggerRect.right - menuWidth;
@@ -61,11 +62,20 @@ function toRelativePlacement(viewportPlacement, rootRect) {
         left: viewportPlacement.left - rootRect.left,
     };
 }
+function isSamePlacement(current, next) {
+    if (current === next) {
+        return true;
+    }
+    if (!current || !next) {
+        return false;
+    }
+    return current.top === next.top && current.left === next.left;
+}
 export function PanelDropdownMenu({ open, onClose, trigger, children, menuClassName, align = "right" }) {
     const rootRef = useRef(null);
     const menuRef = useRef(null);
     const [menuPlacement, setMenuPlacement] = useState(null);
-    const updateMenuPlacement = () => {
+    const updateMenuPlacement = useCallback(() => {
         const root = rootRef.current;
         const menu = menuRef.current;
         if (!root || !menu) {
@@ -75,11 +85,12 @@ export function PanelDropdownMenu({ open, onClose, trigger, children, menuClassN
         const triggerRect = rootRect;
         const menuRect = menu.getBoundingClientRect();
         const viewportPlacement = computeDropdownPlacement(triggerRect, menuRect.width, menuRect.height, align);
-        setMenuPlacement(toRelativePlacement(viewportPlacement, rootRect));
-    };
+        const nextPlacement = toRelativePlacement(viewportPlacement, rootRect);
+        setMenuPlacement((current) => (isSamePlacement(current, nextPlacement) ? current : nextPlacement));
+    }, [align]);
     useLayoutEffect(() => {
         if (!open) {
-            setMenuPlacement(null);
+            setMenuPlacement((current) => (current === null ? current : null));
             return;
         }
         updateMenuPlacement();
@@ -97,7 +108,7 @@ export function PanelDropdownMenu({ open, onClose, trigger, children, menuClassN
             window.removeEventListener("scroll", updateMenuPlacement, true);
             resizeObserver?.disconnect();
         };
-    }, [align, open, children]);
+    }, [open, updateMenuPlacement]);
     useEffect(() => {
         if (!open) {
             return;
@@ -124,7 +135,7 @@ export function PanelDropdownMenu({ open, onClose, trigger, children, menuClassN
             left: 0,
             visibility: "hidden",
         };
-    return (_jsxs("div", { ref: rootRef, className: "relative shrink-0", children: [trigger, open ? (_jsx("div", { ref: menuRef, role: "menu", style: menuStyle, className: `absolute z-[20] min-w-[120px] overflow-hidden rounded-[12px] border border-[var(--adaptive-black200)] bg-[var(--adaptive-black50)] shadow-[0_0_100px_rgba(0,0,0,0.2)] ${menuClassName ?? ""}`, children: children })) : null] }));
+    return (_jsxs("div", { ref: rootRef, className: "relative shrink-0 h-[inherit]", children: [trigger, open ? (_jsx("div", { ref: menuRef, role: "menu", style: menuStyle, className: `${open ? "border-[#f6562f]" : ""} absolute z-[20] min-w-[120px] overflow-hidden bg-[var(--adaptive-black50)] border shadow-[0_0_100px_rgba(0,0,0,0.2)] ${menuClassName ?? ""}`, children: children })) : null] }));
 }
 export function PanelDropdownMenuItem({ onClick, active = false, disabled = false, children }) {
     return (_jsx("button", { type: "button", role: "menuitem", disabled: disabled, onClick: onClick, "aria-pressed": active, className: `flex w-full px-[12px] py-[8px] text-left text-[12px] font-semibold disabled:cursor-not-allowed disabled:opacity-50 ${active ? "bg-[var(--adaptive-black100)] text-[var(--adaptive-black900)]" : "text-[var(--adaptive-black800)] hover:bg-[var(--adaptive-black100)]"}`, children: children }));