@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/map.d.ts

@@ -0,0 +1,101 @@
+import * as MapLibreGL from 'maplibre-gl';
+import type { MarkerOptions, PopupOptions } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { type ReactNode } from 'react';
+/**
+ * `compact: false` keeps the attribution expanded at every width. Collapsed, it is
+ * an "i" button whose glyph is a black background image, invisible on a dark
+ * basemap, and the tile license (OpenStreetMap and the style provider) requires
+ * the text to be visible.
+ */
+declare const MAP_DEFAULTS: {
+    renderWorldCopies: false;
+    attributionControl: {
+        compact: false;
+    };
+};
+type Theme = 'light' | 'dark';
+type MapStyleOption = string | MapLibreGL.StyleSpecification;
+type MapContextValue = {
+    map: MapLibreGL.Map | null;
+    isLoaded: boolean;
+};
+declare function useMap(): MapContextValue;
+type MapProps = {
+    children?: ReactNode;
+    /** Additional CSS classes for the map container */
+    className?: string;
+    /** The app's resolved theme; picks `styles.light` or `styles.dark`. */
+    theme: Theme;
+    /** Basemap style per theme. There is no default basemap. */
+    styles: {
+        light: MapStyleOption;
+        dark: MapStyleOption;
+    };
+    /** Shown in place of the map when its style fails to load. Without it the failed map is blank, never a spinner. */
+    fallback?: ReactNode;
+} & Omit<MapLibreGL.MapOptions, 'container' | 'style'>;
+type MapEvents = {
+    on(type: string, listener: () => void): unknown;
+    off(type: string, listener: () => void): unknown;
+};
+/**
+ * Wires the load gates. An `error` before the first `style.load` means the style (or the worker)
+ * failed, so `load` never comes: report `fail` so the spinner does not stay forever. A tile error
+ * after the style loaded still ends in `load` (an errored tile counts as loaded), so it is ignored.
+ */
+declare function watchMapLoad(map: MapEvents, gates: {
+    load: () => void;
+    styleLoad: () => void;
+    fail: () => void;
+}): () => void;
+declare function Map({ children, className, theme, styles, fallback, ...props }: MapProps): import("react").JSX.Element;
+type MapMarkerProps = {
+    /** Longitude coordinate for marker position */
+    longitude: number;
+    /** Latitude coordinate for marker position */
+    latitude: number;
+    /** Accessible name of the marker element (MapLibre makes a marker with a popup focusable). */
+    label?: string;
+    /** Marker subcomponents (MarkerContent, MarkerPopup) */
+    children: ReactNode;
+} & Omit<MarkerOptions, 'element'>;
+declare function MapMarker({ longitude, latitude, label, children, ...markerOptions }: MapMarkerProps): import("react").JSX.Element;
+type MarkerContentProps = {
+    /** Custom marker content. Defaults to an ink dot if not provided */
+    children?: ReactNode;
+    /** Additional CSS classes for the marker container */
+    className?: string;
+};
+declare function MarkerContent({ children, className }: MarkerContentProps): import("react").ReactPortal;
+type MarkerPopupProps = {
+    /** Popup content */
+    children: ReactNode;
+    /** Additional CSS classes for the popup container */
+    className?: string;
+} & Omit<PopupOptions, 'className' | 'closeButton'>;
+declare function MarkerPopup({ children, className, ...popupOptions }: MarkerPopupProps): import("react").ReactPortal;
+type MapControlsProps = {
+    /** Accessible names of the zoom buttons, translated by the caller. */
+    labels: {
+        zoomIn: string;
+        zoomOut: string;
+    };
+    /** Additional CSS classes for the controls container */
+    className?: string;
+};
+/** Zoom in and out, bottom right, above the attribution. */
+declare function MapControls({ labels, className }: MapControlsProps): import("react").JSX.Element;
+type MapRouteProps = {
+    /** The route as [longitude, latitude] pairs, at least two. */
+    coordinates: [number, number][];
+    /** Line color. MapLibre paints it, so it must be a color MapLibre parses (hex or rgb), not a CSS variable. */
+    color: string;
+    /** Line width in pixels (default: 3) */
+    width?: number;
+    /** Line opacity from 0 to 1 (default: 0.8) */
+    opacity?: number;
+};
+declare function MapRoute({ coordinates, color, width, opacity }: MapRouteProps): null;
+export { Map, MAP_DEFAULTS, MapControls, watchMapLoad, MapMarker, MapRoute, MarkerContent, MarkerPopup, useMap };
+export type { MapControlsProps, MapMarkerProps, MapProps, MapRouteProps, MapStyleOption, MarkerContentProps, MarkerPopupProps };

package/dist/components/ui/map.js

@@ -0,0 +1,257 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * mapcn (https://mapcn.dev, `@mapcn/map`) on MapLibre GL, trimmed to the parts
+ * Kortix uses: Map, MapMarker, MarkerContent, MarkerPopup, MapRoute, MapControls.
+ * Changes from upstream:
+ * - No default basemap. Upstream falls back to CARTO, whose commercial use needs
+ *   an enterprise license; every caller passes `styles`.
+ * - The MapLibre worker loads from this origin (`/maplibre/`, copied out of
+ *   node_modules by `scripts/viewer-wasm.mjs`), not from unpkg.
+ * - Phosphor icons and the Kortix `Loading` spinner; token colors only; labels
+ *   come from the caller so they can be translated.
+ * - Removed: the theme auto-detection (callers pass `theme`), the controlled
+ *   viewport, projection, tooltips, labels, standalone popups, route progress,
+ *   arcs, GeoJSON, clusters, and the compass, locate and fullscreen controls.
+ */
+import { MinusIcon, PlusIcon } from '@phosphor-icons/react';
+import * as MapLibreGL from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import Loading from './loading.js';
+import { cn } from '../../lib/utils.js';
+/** Same-origin copy of `maplibre-gl/dist/maplibre-gl-worker.mjs` (it imports `./maplibre-gl-shared.mjs` beside it). */
+const WORKER_URL = '/maplibre/maplibre-gl-worker.mjs';
+if (typeof window !== 'undefined' && !MapLibreGL.getWorkerUrl()) {
+    MapLibreGL.setWorkerUrl(WORKER_URL);
+}
+/**
+ * `compact: false` keeps the attribution expanded at every width. Collapsed, it is
+ * an "i" button whose glyph is a black background image, invisible on a dark
+ * basemap, and the tile license (OpenStreetMap and the style provider) requires
+ * the text to be visible.
+ */
+const MAP_DEFAULTS = {
+    renderWorldCopies: false,
+    attributionControl: { compact: false },
+};
+// Prevent equivalent inline style objects from triggering a full map style reload.
+function useStableValue(value) {
+    const key = useMemo(() => JSON.stringify(value) ?? '', [value]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useMemo(() => value, [key]);
+}
+const MapContext = createContext(null);
+function useMap() {
+    const context = useContext(MapContext);
+    if (!context) {
+        throw new Error('useMap must be used within a Map component');
+    }
+    return context;
+}
+/**
+ * MapLibre's stylesheet is unlayered, so it beats Tailwind's layered utilities:
+ * these overrides need `!`. Popups draw their own surface (MarkerPopup); the
+ * attribution takes the app's surface tokens.
+ */
+const MAPLIBRE_OVERRIDES = cn('[&_.maplibregl-popup-content]:rounded-none! [&_.maplibregl-popup-content]:bg-transparent! [&_.maplibregl-popup-content]:p-0! [&_.maplibregl-popup-content]:shadow-none!', '[&_.maplibregl-popup-tip]:hidden!', '[&_.maplibregl-ctrl-attrib]:bg-background! [&_.maplibregl-ctrl-attrib]:text-muted-foreground! [&_.maplibregl-ctrl-attrib]:border-border! [&_.maplibregl-ctrl-attrib]:rounded-md! [&_.maplibregl-ctrl-attrib]:border!', '[&_.maplibregl-ctrl-attrib_a]:text-muted-foreground! [&_.maplibregl-ctrl-attrib_a:hover]:text-foreground!');
+/**
+ * Wires the load gates. An `error` before the first `style.load` means the style (or the worker)
+ * failed, so `load` never comes: report `fail` so the spinner does not stay forever. A tile error
+ * after the style loaded still ends in `load` (an errored tile counts as loaded), so it is ignored.
+ */
+function watchMapLoad(map, gates) {
+    let styled = false;
+    const styleLoad = () => {
+        styled = true;
+        gates.styleLoad();
+    };
+    const error = () => {
+        if (!styled)
+            gates.fail();
+    };
+    map.on('load', gates.load);
+    map.on('style.load', styleLoad);
+    map.on('error', error);
+    return () => {
+        map.off('load', gates.load);
+        map.off('style.load', styleLoad);
+        map.off('error', error);
+    };
+}
+function Map({ children, className, theme, styles, fallback, ...props }) {
+    const containerRef = useRef(null);
+    const [mapInstance, setMapInstance] = useState(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [isStyleLoaded, setIsStyleLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const currentStyleRef = useRef(null);
+    const stableStyles = useStableValue(styles);
+    // Initialize the map
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const initialStyle = theme === 'dark' ? stableStyles.dark : stableStyles.light;
+        currentStyleRef.current = initialStyle;
+        const map = new MapLibreGL.Map({
+            container: containerRef.current,
+            style: initialStyle,
+            ...MAP_DEFAULTS,
+            ...props,
+        });
+        const unwatch = watchMapLoad(map, {
+            load: () => setIsLoaded(true),
+            styleLoad: () => setIsStyleLoaded(true),
+            fail: () => setFailed(true),
+        });
+        setMapInstance(map);
+        return () => {
+            unwatch();
+            map.remove();
+            setIsLoaded(false);
+            setIsStyleLoaded(false);
+            setMapInstance(null);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Theme change: close the gate so layer children (MapRoute) re-add on the
+    // incoming style once `style.load` fires. Full reload (no diff) so
+    // `style.load` fires deterministically; a diff would leave the gate closed.
+    useEffect(() => {
+        if (!mapInstance)
+            return;
+        const newStyle = theme === 'dark' ? stableStyles.dark : stableStyles.light;
+        if (currentStyleRef.current === newStyle)
+            return;
+        currentStyleRef.current = newStyle;
+        setIsStyleLoaded(false);
+        mapInstance.setStyle(newStyle, { diff: false });
+    }, [mapInstance, theme, stableStyles]);
+    const contextValue = useMemo(() => ({ map: mapInstance, isLoaded: isLoaded && isStyleLoaded }), [mapInstance, isLoaded, isStyleLoaded]);
+    return (_jsx(MapContext.Provider, { value: contextValue, children: _jsxs("div", { ref: containerRef, className: cn('relative h-full w-full', MAPLIBRE_OVERRIDES, className), children: [failed ? (_jsx("div", { className: "bg-background absolute inset-0 z-10 overflow-auto", children: fallback })) : (!isLoaded && (_jsx("div", { className: "bg-background absolute inset-0 z-10 flex items-center justify-center", children: _jsx(Loading, {}) }))), mapInstance && !failed && children] }) }));
+}
+const MarkerContext = createContext(null);
+function useMarkerContext() {
+    const context = useContext(MarkerContext);
+    if (!context) {
+        throw new Error('Marker components must be used within MapMarker');
+    }
+    return context;
+}
+function MapMarker({ longitude, latitude, label, children, ...markerOptions }) {
+    const { map } = useMap();
+    const marker = useMemo(() => new MapLibreGL.Marker({ ...markerOptions, element: document.createElement('div') }).setLngLat([longitude, latitude]), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    useEffect(() => {
+        if (label)
+            marker.getElement().setAttribute('aria-label', label);
+    }, [marker, label]);
+    useEffect(() => {
+        if (!map)
+            return;
+        marker.addTo(map);
+        return () => {
+            marker.remove();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [map]);
+    useEffect(() => {
+        const current = marker.getLngLat();
+        if (current.lng !== longitude || current.lat !== latitude) {
+            marker.setLngLat([longitude, latitude]);
+        }
+    }, [marker, longitude, latitude]);
+    return _jsx(MarkerContext.Provider, { value: { marker, map }, children: children });
+}
+function MarkerContent({ children, className }) {
+    const { marker } = useMarkerContext();
+    return createPortal(_jsx("div", { className: cn('relative cursor-pointer', className), children: children || _jsx(DefaultMarkerIcon, {}) }), marker.getElement());
+}
+function DefaultMarkerIcon() {
+    return _jsx("div", { className: "bg-foreground border-background relative size-4 rounded-full border-2 shadow-md" });
+}
+function MarkerPopup({ children, className, ...popupOptions }) {
+    const { marker, map } = useMarkerContext();
+    const container = useMemo(() => document.createElement('div'), []);
+    const popup = useMemo(() => new MapLibreGL.Popup({ offset: 16, ...popupOptions, closeButton: false }).setMaxWidth('none').setDOMContent(container), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    useEffect(() => {
+        if (!map)
+            return;
+        popup.setDOMContent(container);
+        marker.setPopup(popup);
+        return () => {
+            marker.setPopup(null);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [map]);
+    // A popup opens on a click, a few times per answer: it appears at once, like the app's menus.
+    return createPortal(_jsx("div", { className: cn('bg-popover text-popover-foreground relative max-w-62 rounded-md border p-3 shadow-md', className), children: children }), container);
+}
+function ControlButton({ onClick, label, children }) {
+    return (_jsx("button", { onClick: onClick, "aria-label": label, title: label, type: "button", className: cn('text-foreground hover:bg-muted duration-fast flex size-8 items-center justify-center transition-colors', 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset'), children: children }));
+}
+/** Zoom in and out, bottom right, above the attribution. */
+function MapControls({ labels, className }) {
+    const { map } = useMap();
+    // MapLibre camera durations are milliseconds, and MapLibre drops them to 0 under prefers-reduced-motion.
+    const zoomIn = useCallback(() => map?.zoomTo(map.getZoom() + 1, { duration: 200 }), [map]); // audit:allow MapLibre ms, not motion/react seconds
+    const zoomOut = useCallback(() => map?.zoomTo(map.getZoom() - 1, { duration: 200 }), [map]); // audit:allow MapLibre ms, not motion/react seconds
+    return (_jsx("div", { className: cn('absolute right-2 bottom-10 z-10', className), children: _jsxs("div", { className: "border-border bg-background divide-border flex flex-col divide-y overflow-hidden rounded-md border shadow-sm", children: [_jsx(ControlButton, { onClick: zoomIn, label: labels.zoomIn, children: _jsx(PlusIcon, { className: "size-4" }) }), _jsx(ControlButton, { onClick: zoomOut, label: labels.zoomOut, children: _jsx(MinusIcon, { className: "size-4" }) })] }) }));
+}
+function MapRoute({ coordinates, color, width = 3, opacity = 0.8 }) {
+    const { map, isLoaded } = useMap();
+    const id = useId();
+    const sourceId = `route-source-${id}`;
+    const layerId = `route-layer-${id}`;
+    // Add source and layer once the style is loaded, and again after each style swap.
+    useEffect(() => {
+        if (!isLoaded || !map)
+            return;
+        map.addSource(sourceId, {
+            type: 'geojson',
+            data: { type: 'Feature', properties: {}, geometry: { type: 'LineString', coordinates: [] } },
+        });
+        map.addLayer({
+            id: layerId,
+            type: 'line',
+            source: sourceId,
+            layout: { 'line-join': 'round', 'line-cap': 'round' },
+            paint: { 'line-color': color, 'line-width': width, 'line-opacity': opacity },
+        });
+        return () => {
+            try {
+                if (map.getLayer(layerId))
+                    map.removeLayer(layerId);
+                if (map.getSource(sourceId))
+                    map.removeSource(sourceId);
+            }
+            catch {
+                // The map was removed with its style.
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLoaded, map]);
+    useEffect(() => {
+        if (!isLoaded || !map)
+            return;
+        const source = map.getSource(sourceId);
+        source?.setData({
+            type: 'Feature',
+            properties: {},
+            geometry: { type: 'LineString', coordinates },
+        });
+    }, [isLoaded, map, coordinates, sourceId]);
+    useEffect(() => {
+        if (!isLoaded || !map || !map.getLayer(layerId))
+            return;
+        map.setPaintProperty(layerId, 'line-color', color);
+        map.setPaintProperty(layerId, 'line-width', width);
+        map.setPaintProperty(layerId, 'line-opacity', opacity);
+    }, [isLoaded, map, layerId, color, width, opacity]);
+    return null;
+}
+export { Map, MAP_DEFAULTS, MapControls, watchMapLoad, MapMarker, MapRoute, MarkerContent, MarkerPopup, useMap };

package/dist/components/ui/marker.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * Marker: an inline conversation note (a status update, a system note, a
+ * "working" row, a labeled separator). `default` is inline, `border` is a row
+ * with a bottom hairline, `separator` centers the label between two rules.
+ */
+declare const markerVariants: (props?: ({
+    variant?: "separator" | "default" | "border" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Marker({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof markerVariants>): React.JSX.Element;
+declare function MarkerIcon({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function MarkerContent({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/ui/marker.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils.js';
+/**
+ * Marker: an inline conversation note (a status update, a system note, a
+ * "working" row, a labeled separator). `default` is inline, `border` is a row
+ * with a bottom hairline, `separator` centers the label between two rules.
+ */
+const markerVariants = cva('text-muted-foreground flex items-center gap-1.5 text-xs', {
+    variants: {
+        variant: {
+            default: '',
+            border: 'border-border border-b pb-2',
+            separator: "justify-center before:bg-border after:bg-border before:h-px before:flex-1 before:content-[''] after:h-px after:flex-1 after:content-['']",
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function Marker({ className, variant, ...props }) {
+    return _jsx("div", { "data-slot": "marker", className: cn(markerVariants({ variant }), className), ...props });
+}
+function MarkerIcon({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "marker-icon", "aria-hidden": "true", className: cn('inline-flex shrink-0 items-center [&_svg]:size-3.5', className), ...props }));
+}
+function MarkerContent({ className, ...props }) {
+    return _jsx("span", { "data-slot": "marker-content", className: cn('min-w-0 truncate', className), ...props });
+}
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/ui/menu-recipe.d.ts

@@ -0,0 +1,102 @@
+/**
+ * ONE recipe for every row in every menu.
+ *
+ * `dropdown-menu.tsx` used to own this. Its four row components — Item,
+ * SubTrigger, CheckboxItem and RadioItem — had each hardcoded their own
+ * spacing, radius, focus colour and type, drifted apart, and been reconciled
+ * into a single recipe. `context-menu.tsx` was still running the stock shadcn
+ * styling, so the same menu rendered two different ways depending on whether
+ * you reached it by click or by right-click:
+ *
+ *   dropdown Item   rounded-md  px-2.5 py-1.5  focus:bg-primary/10  text-foreground/80
+ *   context  Item   rounded-sm  px-2   py-1.5  focus:bg-accent      (inherited colour)
+ *
+ * Duplicating the recipe into the second file would recreate exactly the drift
+ * the first file's comment describes. It lives here instead, imported by both.
+ *
+ * A menu row is a row regardless of what opened it, so there is deliberately
+ * no per-menu escape hatch in this module. Anything that genuinely differs
+ * between the two menus — panel width, transform origin, scroll behaviour —
+ * stays in the component file that owns it.
+ */
+export type MenuRowSize = 'sm' | 'md' | 'lg';
+export type MenuRowTone = 'default' | 'destructive';
+/** Leading/trailing slot for an icon or a check. Same width as a row icon. */
+export declare const MENU_INDICATOR = "flex size-4 shrink-0 items-center justify-center";
+/** The check glyph inside `MENU_INDICATOR` — a notch lighter than an icon. */
+export declare const MENU_INDICATOR_ICON = "text-muted-foreground size-3.5";
+/** `px-2` + slot + `gap-2`: where a label starts when a slot precedes it. */
+export declare const MENU_INSET = "pl-8";
+/** The same offset on the trailing side, for a row with a trailing check. */
+export declare const MENU_INSET_END = "pr-8";
+/** `className` last so a caller can still override any of it. */
+export declare function menuRow(size: MenuRowSize, tone: MenuRowTone, className?: string): string;
+/**
+ * The floating surface. Every panel that opens over the page wears it:
+ * `DropdownMenuContent` / `SubContent`, `ContextMenuContent` / `SubContent`,
+ * `SelectContent`, `PopoverContent`.
+ *
+ * They are the same object — a hairline-bordered card lifted off the canvas —
+ * and they had four different descriptions of it:
+ *
+ *   dropdown  bg-background  radius calc(--radius+0.2rem)  shadow-lg  p-1
+ *   context   bg-popover     radius --radius-md            shadow-md  p-1
+ *   select    bg-background  radius calc(--radius+0.2rem)  shadow-lg  p-1  + hover:text-foreground
+ *   popover   bg-popover     radius --radius-lg            (none)     p-4
+ *
+ * `bg-popover` is the resolved answer. In light mode `--popover` and
+ * `--background` are both `oklch(1 0 0)`, so nothing moves; in dark mode
+ * `--popover` is `oklch(0.1913)` against a `oklch(0.1398)` canvas, and
+ * `globals.css` describes it as "top surface, separated by hairline + shadow" —
+ * which is this element's entire job. On `bg-background` a dark-mode dropdown
+ * was the same colour as the page behind it.
+ *
+ * Popover also had no shadow at all, so it sat flat on the canvas while the
+ * menus lifted. `shadow-lg` for all of them.
+ *
+ * Four things are deliberately absent, because each is dictated by what the
+ * panel holds rather than by what it is:
+ *
+ * - **Padding.** A list of rows uses `p-1` (see `MENU_PANEL`); a popover holds
+ *   prose and controls and uses `p-4`.
+ * - **Width.** Every menu call site passes its own (`w-40`, `w-48`, `w-64`),
+ *   and `width` and `min-width` are separate tailwind-merge groups, so a shared
+ *   `min-w-[14rem]` would survive and silently override a caller's `w-40`.
+ * - **Overflow.** A context menu's root panel scrolls; the rest clip. `overflow`,
+ *   `overflow-x` and `overflow-y` are three separate tailwind-merge groups, so a
+ *   shared `overflow-hidden` would survive alongside a later `overflow-y-auto`
+ *   and the winner would come down to Tailwind's generated property order.
+ * - **Transform origin.** Anchored panels scale out of their trigger, and the
+ *   Radix variable that carries it is named per primitive.
+ *
+ * No `hover:text-foreground` here either — select had it. On the panel it
+ * recoloured every row at once whenever the pointer entered, fighting the
+ * per-row hover the rows define themselves. Colour is a row concern.
+ */
+/**
+ * The surface itself — colour, hairline, radius, elevation. No motion.
+ *
+ * Split out from the motion classes so a panel that must appear INSTANTLY can
+ * take the surface without inheriting the enter/exit animation. A submenu is
+ * the case that needs it: it opens under a pointer that is already travelling
+ * toward its first row, so the 150ms `animate-in` is 150ms of the row sliding
+ * away from the cursor.
+ */
+export declare const FLOATING_PANEL_SURFACE = "bg-popover text-popover-foreground border-border rounded-lg border shadow-md";
+/** Enter/exit for panels that appear away from the pointer's path. */
+export declare const FLOATING_PANEL_MOTION = "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ease-out";
+export declare const FLOATING_PANEL: string;
+/** The floating surface holding a list of rows: dropdown, context menu, select. */
+export declare const MENU_PANEL: string;
+/**
+ * `MENU_PANEL` with no enter/exit animation — paints on the same frame it
+ * mounts. Every dropdown panel (root and submenu) and every select list uses
+ * it, and `PopoverContent` takes `FLOATING_PANEL_SURFACE` for the same reason.
+ * The animated `MENU_PANEL` / `FLOATING_PANEL` remain for the context menu and
+ * the animated hover card.
+ */
+export declare const MENU_PANEL_STATIC: string;
+/** Group label: `px-2` matches every row, so labels and rows share a left edge. */
+export declare const MENU_LABEL = "text-muted-foreground px-2 py-1 text-xs font-medium tracking-normal";
+export declare const MENU_SEPARATOR = "bg-border -mx-1.5 my-1 h-px";
+export declare const MENU_SHORTCUT = "ml-auto text-xs tracking-widest opacity-60";

package/dist/components/ui/menu-recipe.js

@@ -0,0 +1,129 @@
+import { cn } from '../../lib/utils.js';
+/**
+ * Row geometry — the one grid every row in every menu sits on.
+ *
+ *   | px-2 | slot (size-4) | gap-2 | label …            | slot | px-2 |
+ *
+ * Only HEIGHT changes between sizes. Padding, gap, type and the icon slot are
+ * fixed, so a label starts on the same x in every row type and every size: a
+ * plain row with a leading icon, an `inset` row, a checkbox row, a left-radio
+ * row. `min-h` (not a fixed `h`) sets the height so a row with a description
+ * still grows; `py` only matters once content outgrows it.
+ *
+ *   sm  min-h-8   ≈ 29px   menus (default)
+ *   md  min-h-9   ≈ 33px   one step roomier — matches the `sm` Input height
+ *   lg  min-h-10  ≈ 37px   touch-first lists
+ */
+const MENU_ROW_SIZE = {
+    sm: 'min-h-8 py-[0.275rem]',
+    md: 'min-h-9 py-1.5',
+    lg: 'min-h-10 py-2',
+};
+/** Leading/trailing slot for an icon or a check. Same width as a row icon. */
+export const MENU_INDICATOR = 'flex size-4 shrink-0 items-center justify-center';
+/** The check glyph inside `MENU_INDICATOR` — a notch lighter than an icon. */
+export const MENU_INDICATOR_ICON = 'text-muted-foreground size-3.5';
+/** `px-2` + slot + `gap-2`: where a label starts when a slot precedes it. */
+export const MENU_INSET = 'pl-8';
+/** The same offset on the trailing side, for a row with a trailing check. */
+export const MENU_INSET_END = 'pr-8';
+/**
+ * `transition-colors`, not `transition-all`: a hover highlight only needs its
+ * background and text to move, and 150ms keeps the highlight under the cursor
+ * rather than trailing it.
+ */
+/**
+ * `rounded-sm` (6px) is concentric with the panel: `rounded-lg` (10px) minus
+ * its `p-1` inset. `[&_svg:not([class*='size-'])]` defaults a bare icon to the
+ * slot size without overriding an explicit one — the old `[&_svg]:size-4`
+ * out-ranked every `size-3.5` check and caret, so they all rendered at 16px
+ * inside 14px boxes.
+ */
+const MENU_ROW_BASE = "relative flex w-full items-center gap-2 rounded-sm px-2 text-sm font-medium outline-none select-none transition-colors duration-150 ease-out data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+/**
+ * Keyboard focus and pointer hover resolve to the same treatment on purpose —
+ * Radix marks the keyboard-focused row `data-highlighted`, and a row you
+ * arrowed onto should look exactly like a row you hovered.
+ */
+/**
+ * Keyboard focus and pointer hover resolve to the same treatment on purpose —
+ * Radix marks the keyboard-focused row `data-highlighted`, and a row you
+ * arrowed onto should look exactly like a row you hovered.
+ */
+const MENU_ROW_TONE = {
+    default: 'text-foreground/80 hover:bg-primary/10 hover:text-foreground focus:bg-primary/10 focus:text-foreground data-highlighted:bg-primary/10 data-highlighted:text-foreground data-[state=open]:bg-primary/10 data-[state=open]:text-foreground',
+    destructive: 'text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive',
+};
+/** `className` last so a caller can still override any of it. */
+export function menuRow(size, tone, className) {
+    return cn(MENU_ROW_BASE, MENU_ROW_SIZE[size], MENU_ROW_TONE[tone], className);
+}
+/**
+ * The floating surface. Every panel that opens over the page wears it:
+ * `DropdownMenuContent` / `SubContent`, `ContextMenuContent` / `SubContent`,
+ * `SelectContent`, `PopoverContent`.
+ *
+ * They are the same object — a hairline-bordered card lifted off the canvas —
+ * and they had four different descriptions of it:
+ *
+ *   dropdown  bg-background  radius calc(--radius+0.2rem)  shadow-lg  p-1
+ *   context   bg-popover     radius --radius-md            shadow-md  p-1
+ *   select    bg-background  radius calc(--radius+0.2rem)  shadow-lg  p-1  + hover:text-foreground
+ *   popover   bg-popover     radius --radius-lg            (none)     p-4
+ *
+ * `bg-popover` is the resolved answer. In light mode `--popover` and
+ * `--background` are both `oklch(1 0 0)`, so nothing moves; in dark mode
+ * `--popover` is `oklch(0.1913)` against a `oklch(0.1398)` canvas, and
+ * `globals.css` describes it as "top surface, separated by hairline + shadow" —
+ * which is this element's entire job. On `bg-background` a dark-mode dropdown
+ * was the same colour as the page behind it.
+ *
+ * Popover also had no shadow at all, so it sat flat on the canvas while the
+ * menus lifted. `shadow-lg` for all of them.
+ *
+ * Four things are deliberately absent, because each is dictated by what the
+ * panel holds rather than by what it is:
+ *
+ * - **Padding.** A list of rows uses `p-1` (see `MENU_PANEL`); a popover holds
+ *   prose and controls and uses `p-4`.
+ * - **Width.** Every menu call site passes its own (`w-40`, `w-48`, `w-64`),
+ *   and `width` and `min-width` are separate tailwind-merge groups, so a shared
+ *   `min-w-[14rem]` would survive and silently override a caller's `w-40`.
+ * - **Overflow.** A context menu's root panel scrolls; the rest clip. `overflow`,
+ *   `overflow-x` and `overflow-y` are three separate tailwind-merge groups, so a
+ *   shared `overflow-hidden` would survive alongside a later `overflow-y-auto`
+ *   and the winner would come down to Tailwind's generated property order.
+ * - **Transform origin.** Anchored panels scale out of their trigger, and the
+ *   Radix variable that carries it is named per primitive.
+ *
+ * No `hover:text-foreground` here either — select had it. On the panel it
+ * recoloured every row at once whenever the pointer entered, fighting the
+ * per-row hover the rows define themselves. Colour is a row concern.
+ */
+/**
+ * The surface itself — colour, hairline, radius, elevation. No motion.
+ *
+ * Split out from the motion classes so a panel that must appear INSTANTLY can
+ * take the surface without inheriting the enter/exit animation. A submenu is
+ * the case that needs it: it opens under a pointer that is already travelling
+ * toward its first row, so the 150ms `animate-in` is 150ms of the row sliding
+ * away from the cursor.
+ */
+export const FLOATING_PANEL_SURFACE = 'bg-popover text-popover-foreground border-border rounded-lg border shadow-md';
+/** Enter/exit for panels that appear away from the pointer's path. */
+export const FLOATING_PANEL_MOTION = 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ease-out';
+export const FLOATING_PANEL = cn(FLOATING_PANEL_SURFACE, FLOATING_PANEL_MOTION);
+/** The floating surface holding a list of rows: dropdown, context menu, select. */
+export const MENU_PANEL = cn(FLOATING_PANEL, 'p-1');
+/**
+ * `MENU_PANEL` with no enter/exit animation — paints on the same frame it
+ * mounts. Every dropdown panel (root and submenu) and every select list uses
+ * it, and `PopoverContent` takes `FLOATING_PANEL_SURFACE` for the same reason.
+ * The animated `MENU_PANEL` / `FLOATING_PANEL` remain for the context menu and
+ * the animated hover card.
+ */
+export const MENU_PANEL_STATIC = cn(FLOATING_PANEL_SURFACE, 'p-1 py-[0.25rem]');
+/** Group label: `px-2` matches every row, so labels and rows share a left edge. */
+export const MENU_LABEL = 'text-muted-foreground px-2 py-1 text-xs font-medium tracking-normal';
+export const MENU_SEPARATOR = 'bg-border -mx-1.5 my-1 h-px';
+export const MENU_SHORTCUT = 'ml-auto text-xs tracking-widest opacity-60';