@kortix/ui 0.0.0-stage → 0.14.3

package/dist/components/ui/user-avatar.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from './avatar.js';
+import { cn } from '../../lib/utils.js';
+import { AVATAR_INK, avatarFill } from '../../_vendor/kortix-shared.js';
+import * as React from 'react';
+function initialsFromIdentity(name, email) {
+    const source = (name || '').trim();
+    if (source) {
+        const parts = source.split(/\s+/).filter(Boolean);
+        const first = parts[0]?.[0] ?? '';
+        const second = parts.length > 1 ? parts[parts.length - 1]?.[0] : '';
+        const out = (first + second).toUpperCase();
+        if (out)
+            return out;
+    }
+    const local = email.split('@')[0] ?? email;
+    const segments = local.split(/[._-]+/).filter(Boolean);
+    const first = segments[0]?.[0] ?? local[0] ?? '?';
+    const second = segments[1]?.[0] ?? '';
+    return (first + second).toUpperCase();
+}
+/**
+ * `text` goes on the fallback itself: the primitive's fallback sets its own
+ * `text-sm`, which beat a size class on the root. Two initials at 14px
+ * semibold filled the 22px `sm` tile edge to edge and overflowed an 18px one.
+ * `xs` and `sm` hold ONE initial, as EntityAvatar does: `text-xs` (13px) is
+ * the floor of the type scale, and two letters at 13px still fill an 18px tile.
+ */
+const SIZE_MAP = {
+    xs: { box: 'size-5', text: 'text-xs', initials: 1 },
+    sm: { box: 'size-6', text: 'text-xs', initials: 1 },
+    md: { box: 'size-8', text: 'text-xs', initials: 2 },
+    lg: { box: 'size-10', text: 'text-sm', initials: 2 },
+    xl: { box: 'size-14', text: 'text-base', initials: 2 },
+};
+export function UserAvatar({ email, name, avatarUrl, size = 'md', variant = 'default', className, ring = false, }) {
+    const sizes = SIZE_MAP[size] ?? SIZE_MAP.md;
+    const initials = React.useMemo(() => initialsFromIdentity(name ?? undefined, email || '').slice(0, sizes.initials), [name, email, sizes.initials]);
+    // Avatar v2: a solid fill keyed on the email, so a rename keeps the colour.
+    const fill = avatarFill(email || name || '');
+    return (_jsxs(Avatar, { className: cn(sizes.box, 'shrink-0 overflow-hidden rounded-sm p-0 font-medium', ring && 'ring-background ring-2', 
+        // A photo keeps an edge on a light page: a 1px inset hairline over it.
+        avatarUrl &&
+            'after:ring-border after:pointer-events-none after:absolute after:inset-0 after:rounded-sm after:ring-1 after:ring-inset', variant === 'primary' && 'bg-primary text-primary-foreground', className), children: [avatarUrl ? _jsx(AvatarImage, { src: avatarUrl, alt: name || email }) : null, _jsx(AvatarFallback, { className: cn('rounded-sm font-medium', sizes.text), style: { backgroundColor: fill, color: AVATAR_INK }, children: initials || '?' })] }));
+}

package/dist/hooks/use-debounce.d.ts

@@ -0,0 +1,4 @@
+export declare const useDebounce: <T>(value: T, delay: number) => {
+    debouncedValue: T;
+    isLoading: boolean;
+};

package/dist/hooks/use-debounce.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useState } from 'react';
+export const useDebounce = (value, delay) => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    const [isLoading, setIsLoading] = useState(false);
+    useEffect(() => {
+        setIsLoading(true);
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+            setIsLoading(false);
+        }, delay);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return { debouncedValue, isLoading };
+};

package/dist/hooks/use-is-dark.d.ts

@@ -0,0 +1,2 @@
+/** True while the page renders the dark theme. Replaces next-themes inside @kortix/ui. */
+export declare function useIsDark(): boolean;

package/dist/hooks/use-is-dark.js

@@ -0,0 +1,27 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+function subscribe(onChange) {
+    const observer = new MutationObserver(onChange);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    const media = window.matchMedia?.(DARK_QUERY);
+    media?.addEventListener('change', onChange);
+    return () => {
+        observer.disconnect();
+        media?.removeEventListener('change', onChange);
+    };
+}
+/** `<html class="dark">` wins, then `class="light"`, then the OS preference. */
+function getSnapshot() {
+    const classes = document.documentElement.classList;
+    if (classes.contains('dark'))
+        return true;
+    if (classes.contains('light'))
+        return false;
+    return window.matchMedia?.(DARK_QUERY).matches ?? false;
+}
+const getServerSnapshot = () => false;
+/** True while the page renders the dark theme. Replaces next-themes inside @kortix/ui. */
+export function useIsDark() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,2 @@
+export declare const MOBILE_BREAKPOINT = 768;
+export declare function useIsMobile(): boolean;

package/dist/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}

package/dist/hooks/use-proximity-hover.d.ts

@@ -0,0 +1,52 @@
+import { type Dispatch, type RefObject, type SetStateAction } from 'react';
+export interface ItemRect {
+    top: number;
+    height: number;
+    left: number;
+    width: number;
+}
+interface UseProximityHoverOptions {
+    /**
+     * Which direction to resolve the nearest item along.
+     *   "y"  — vertical lists (default): closest by top/height
+     *   "x"  — horizontal strips: closest by left/width
+     *   "xy" — 2-D grids: closest card across both rows AND columns,
+     *          measured by Euclidean distance to each item's center
+     */
+    axis?: 'x' | 'y' | 'xy';
+}
+interface UseProximityHoverReturn {
+    activeIndex: number | null;
+    setActiveIndex: Dispatch<SetStateAction<number | null>>;
+    itemRects: ItemRect[];
+    /**
+     * True once every registered item has been measured and no remeasure is
+     * pending, i.e. `itemRects` describes the current item set. Gate absolutely
+     * positioned overlays on it: an overlay that mounts against a rect a later
+     * pass still corrects animates from the wrong place to the right one, which
+     * reads as the highlight sliding in from another row.
+     */
+    isMeasured: boolean;
+    sessionRef: RefObject<number>;
+    handlers: {
+        onMouseMove: (e: React.MouseEvent) => void;
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    };
+    registerItem: (index: number, element: HTMLElement | null) => void;
+    /**
+     * Invalidates the published rects and runs the hook's coalesced measurement
+     * pass again, holding `isMeasured` false until it settles. Reach for it when
+     * something other than item registration invalidates layout — a popup that
+     * stays mounted between opens keeps its items registered, so nothing else
+     * would notice that its rects were taken while it was hidden.
+     */
+    remeasure: () => void;
+    measureItems: () => void;
+}
+export declare function pickNearestItem(rects: ItemRect[], axis: 'x' | 'y' | 'xy', pointer: {
+    x: number;
+    y: number;
+}, container: HTMLElement, containerRect: DOMRect): number | null;
+export declare function useProximityHover<T extends HTMLElement>(containerRef: RefObject<T | null>, options?: UseProximityHoverOptions): UseProximityHoverReturn;
+export {};

package/dist/hooks/use-proximity-hover.js

@@ -0,0 +1,232 @@
+'use client';
+import { useCallback, useEffect, useRef, useState, } from 'react';
+/**
+ * How many frames the coalesced remeasure retries while the registered items
+ * still have no layout box. A popup can be in the DOM one frame before it is
+ * laid out; retrying beats publishing zeroed rects, and the cap keeps a list
+ * that stays hidden for good from spinning frames forever.
+ */
+const measurementAttempts = 3;
+// ── 2-D grid path ──────────────────────────────────────────
+// When items wrap into rows and columns, a single-axis nearest
+// pick can't tell which card the cursor is closest to. Resolve
+// by Euclidean distance to each item's center, and prefer any
+// item the cursor is actually inside (point-in-rect).
+export function pickNearestItem(rects, axis, pointer, container, containerRect) {
+    let closestIndex = null;
+    let closestDistance = Infinity;
+    let containingIndex = null;
+    // Convert content-relative rects to viewport coords using live scroll
+    const scrollX = container.scrollLeft;
+    const scrollY = container.scrollTop;
+    const borderX = container.clientLeft;
+    const borderY = container.clientTop;
+    // Item rects are layout values (offset*); the container's bounding rect
+    // reflects any cumulative ancestor transform: scale. Compute the scale
+    // factor so we can map layout coords into the same visual viewport
+    // space the mouse cursor lives in.
+    // Map layout coords into visual/viewport space, accounting for any
+    // cumulative ancestor transform: scale (see the single-axis note
+    // below). X and Y scale independently.
+    const scaleX = container.offsetWidth > 0 ? containerRect.width / container.offsetWidth : 1;
+    const scaleY = container.offsetHeight > 0 ? containerRect.height / container.offsetHeight : 1;
+    for (let index = 0; index < rects.length; index++) {
+        const r = rects[index];
+        if (!r)
+            continue;
+        const left = containerRect.left + (borderX + r.left - scrollX) * scaleX;
+        const top = containerRect.top + (borderY + r.top - scrollY) * scaleY;
+        const width = r.width * scaleX;
+        const height = r.height * scaleY;
+        if ((axis === 'y' || (pointer.x >= left && pointer.x <= left + width)) &&
+            (axis === 'x' || (pointer.y >= top && pointer.y <= top + height))) {
+            containingIndex = index;
+        }
+        const dx = pointer.x - (left + width / 2);
+        const dy = pointer.y - (top + height / 2);
+        const distance = axis === 'xy' ? Math.hypot(dx, dy) : Math.abs(axis === 'x' ? dx : dy);
+        if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = index;
+        }
+    }
+    return containingIndex ?? closestIndex;
+}
+export function useProximityHover(containerRef, options = {}) {
+    const { axis = 'y' } = options;
+    const itemsRef = useRef(new Map());
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [itemRects, setItemRects] = useState([]);
+    const [isMeasured, setIsMeasured] = useState(false);
+    const itemRectsRef = useRef([]);
+    const sessionRef = useRef(0);
+    const rafIdRef = useRef(null);
+    const remeasureRafIdRef = useRef(null);
+    /**
+     * Publishes a rect for every registered item. Returns false when the
+     * measurement could not be completed (no container, or an item without a
+     * layout box) — nothing is published in that case, so the last complete
+     * measurement stands instead of being overwritten with zeroes.
+     */
+    const runMeasurement = useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return false;
+        const rects = [];
+        let everyItemHasLayout = true;
+        itemsRef.current.forEach((element, index) => {
+            // An element inside a display:none / not-yet-laid-out popup has no
+            // offsetParent and reports every offset as 0. Publishing that would pin
+            // overlays to the top of the list, so treat the whole pass as
+            // incomplete. A boxless element is the only case: `position: fixed`
+            // items also have no offsetParent but do have a size.
+            const hasLayoutBox = element.offsetParent !== null || element.offsetWidth > 0 || element.offsetHeight > 0;
+            if (!hasLayoutBox) {
+                everyItemHasLayout = false;
+                return;
+            }
+            // Use offset* instead of getBoundingClientRect so measurements are
+            // unaffected by CSS transforms (e.g. scaleY animation on the parent
+            // motion.div). offsetTop/offsetLeft are layout values relative to the
+            // offsetParent (the scroll container), matching the coordinate space
+            // used by `position: absolute` children.
+            rects[index] = {
+                top: element.offsetTop,
+                height: element.offsetHeight,
+                left: element.offsetLeft,
+                width: element.offsetWidth,
+            };
+        });
+        if (!everyItemHasLayout)
+            return false;
+        // Skip the state update when nothing moved (a cheap top/left/width/height
+        // compare) so redundant remeasures don't churn re-renders.
+        const prev = itemRectsRef.current;
+        let changed = prev.length !== rects.length;
+        for (let i = 0; !changed && i < rects.length; i++) {
+            const p = prev[i];
+            const r = rects[i];
+            if (p === r)
+                continue; // both undefined (sparse slot)
+            changed =
+                !p ||
+                    !r ||
+                    p.top !== r.top ||
+                    p.left !== r.left ||
+                    p.width !== r.width ||
+                    p.height !== r.height;
+        }
+        if (changed) {
+            itemRectsRef.current = rects;
+            setItemRects(rects);
+        }
+        return true;
+    }, [containerRef]);
+    const measureItems = useCallback(() => {
+        runMeasurement();
+    }, [runMeasurement]);
+    /**
+     * The hook's single measurement pass: coalesces every trigger (item
+     * registration, container resize) into one remeasure on the next frame and
+     * is the only place readiness is reported, so `isMeasured` can never turn
+     * true while another pass is still queued.
+     */
+    const scheduleMeasurement = useCallback((attemptsLeft) => {
+        if (remeasureRafIdRef.current !== null) {
+            cancelAnimationFrame(remeasureRafIdRef.current);
+        }
+        remeasureRafIdRef.current = requestAnimationFrame(() => {
+            remeasureRafIdRef.current = null;
+            if (runMeasurement()) {
+                setIsMeasured(true);
+            }
+            else if (attemptsLeft > 1) {
+                scheduleMeasurement(attemptsLeft - 1);
+            }
+        });
+    }, [runMeasurement]);
+    const remeasure = useCallback(() => {
+        // Readiness drops first: until the pass below settles, the published rects
+        // may not describe what is on screen, and an overlay positioned from them
+        // would be corrected after mounting — which animates as a slide.
+        setIsMeasured(false);
+        scheduleMeasurement(measurementAttempts);
+    }, [scheduleMeasurement]);
+    const registerItem = useCallback((index, element) => {
+        if (element) {
+            itemsRef.current.set(index, element);
+        }
+        else {
+            itemsRef.current.delete(index);
+        }
+        // Coalesce rapid register/unregister calls (e.g. when an AnimatePresence
+        // remounts a list of rows) into a single remeasure on the next frame,
+        // so consumers don't have to manually call measureItems after the
+        // container's children swap.
+        remeasure();
+    }, [remeasure]);
+    const handleMouseMove = useCallback((e) => {
+        const mouseX = e.clientX;
+        const mouseY = e.clientY;
+        if (rafIdRef.current !== null) {
+            cancelAnimationFrame(rafIdRef.current);
+        }
+        rafIdRef.current = requestAnimationFrame(() => {
+            rafIdRef.current = null;
+            const container = containerRef.current;
+            if (!container)
+                return;
+            const containerRect = container.getBoundingClientRect();
+            setActiveIndex(pickNearestItem(itemRectsRef.current, axis, { x: mouseX, y: mouseY }, container, containerRect));
+        });
+    }, [axis, containerRef]);
+    const handleMouseEnter = useCallback(() => {
+        sessionRef.current += 1;
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        if (rafIdRef.current !== null) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+        setActiveIndex(null);
+    }, []);
+    // Remeasure when the container resizes — a reflow moves items even though
+    // the registered set is unchanged, which would otherwise leave itemRects
+    // stale. Coalesced through the same rAF as register/unregister. Readiness is
+    // deliberately not dropped: the item set is unchanged, so the published rects
+    // stay usable, and hiding overlays on every reflow would flicker them.
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => scheduleMeasurement(measurementAttempts));
+        ro.observe(container);
+        return () => ro.disconnect();
+    }, [containerRef, scheduleMeasurement]);
+    // Clean up rAF on unmount
+    useEffect(() => {
+        return () => {
+            if (rafIdRef.current !== null) {
+                cancelAnimationFrame(rafIdRef.current);
+            }
+            if (remeasureRafIdRef.current !== null) {
+                cancelAnimationFrame(remeasureRafIdRef.current);
+            }
+        };
+    }, []);
+    return {
+        activeIndex,
+        setActiveIndex,
+        itemRects,
+        isMeasured,
+        sessionRef,
+        handlers: {
+            onMouseMove: handleMouseMove,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+        },
+        registerItem,
+        remeasure,
+        measureItems,
+    };
+}

package/dist/icons/close.d.ts

@@ -0,0 +1,2 @@
+import { XIcon } from '@phosphor-icons/react';
+export declare const Close: ({ className, ...props }: React.ComponentProps<typeof XIcon>) => import("react").JSX.Element;

package/dist/icons/close.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+import { XIcon } from '@phosphor-icons/react';
+export const Close = ({ className, ...props }) => {
+    return _jsx(XIcon, { className: cn('size-4 stroke-1', className), ...props });
+};

package/dist/icons/copy.d.ts

@@ -0,0 +1,3 @@
+export declare const Copy: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/icons/copy.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+export const Copy = ({ className }) => {
+    return (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", className: cn('size-4', className), children: _jsx("path", { d: "M12.67 10.67C12.67 9.96 12.67 9.46 12.64 9.08C12.61 8.8 12.58 8.61 12.52 8.46L12.47 8.33C12.31 8.03 12.08 7.78 11.79 7.6L11.67 7.53C11.51 7.45 11.3 7.39 10.92 7.36C10.54 7.33 10.04 7.33 9.33 7.33H6.5C5.79 7.33 5.3 7.33 4.91 7.36C4.63 7.39 4.44 7.42 4.3 7.48L4.17 7.53C3.86 7.69 3.61 7.92 3.44 8.21L3.37 8.33C3.28 8.49 3.23 8.7 3.2 9.08C3.17 9.46 3.17 9.96 3.17 10.67V13.5C3.17 14.21 3.17 14.7 3.2 15.09C3.23 15.46 3.28 15.68 3.37 15.83L3.44 15.96C3.61 16.25 3.86 16.48 4.17 16.63L4.3 16.69C4.44 16.74 4.63 16.78 4.91 16.8C5.3 16.83 5.79 16.84 6.5 16.84H9.33C10.04 16.84 10.54 16.83 10.92 16.8C11.3 16.77 11.51 16.72 11.67 16.63L11.79 16.56C12.08 16.39 12.31 16.14 12.47 15.83L12.52 15.7C12.58 15.56 12.61 15.37 12.64 15.09C12.67 14.7 12.67 14.21 12.67 13.5V10.67ZM14 12.67C14.45 12.66 14.8 12.66 15.09 12.64C15.46 12.61 15.68 12.55 15.83 12.47L15.96 12.4C16.25 12.22 16.48 11.97 16.63 11.67L16.69 11.54C16.74 11.39 16.78 11.2 16.8 10.92C16.83 10.54 16.84 10.04 16.84 9.33V6.5C16.84 5.79 16.83 5.3 16.8 4.91C16.78 4.63 16.74 4.44 16.69 4.3L16.63 4.17C16.48 3.86 16.25 3.61 15.96 3.44L15.83 3.37C15.68 3.28 15.46 3.23 15.09 3.2C14.7 3.17 14.21 3.17 13.5 3.17H10.67C9.96 3.17 9.46 3.17 9.08 3.2C8.8 3.22 8.61 3.26 8.46 3.31L8.33 3.37C8.03 3.52 7.78 3.75 7.6 4.04L7.53 4.17C7.45 4.32 7.39 4.54 7.36 4.91C7.34 5.2 7.34 5.55 7.33 6H9.33C10.02 6 10.58 6 11.03 6.04C11.49 6.08 11.89 6.15 12.27 6.35L12.49 6.47C12.98 6.77 13.39 7.21 13.65 7.73L13.72 7.87C13.86 8.21 13.93 8.57 13.96 8.97C14 9.42 14 9.98 14 10.67V12.67ZM18.17 9.33C18.17 10.02 18.17 10.58 18.13 11.03C18.1 11.43 18.03 11.79 17.89 12.13L17.82 12.27C17.55 12.79 17.15 13.23 16.66 13.53L16.44 13.65C16.06 13.85 15.65 13.92 15.2 13.96C14.86 13.99 14.46 13.99 14 14C13.99 14.46 13.99 14.86 13.96 15.2C13.93 15.6 13.86 15.96 13.72 16.29L13.65 16.44C13.39 16.96 12.98 17.39 12.49 17.7L12.27 17.82C11.89 18.01 11.49 18.09 11.03 18.13C10.58 18.17 10.02 18.17 9.33 18.17H6.5C5.81 18.17 5.25 18.17 4.8 18.13C4.4 18.1 4.04 18.03 3.71 17.89L3.56 17.82C3.04 17.55 2.61 17.15 2.3 16.66L2.18 16.44C1.99 16.06 1.91 15.65 1.87 15.2C1.83 14.75 1.83 14.19 1.83 13.5V10.67C1.83 9.98 1.83 9.42 1.87 8.97C1.91 8.51 1.99 8.11 2.18 7.73L2.3 7.51C2.61 7.02 3.04 6.61 3.56 6.35L3.71 6.28C4.04 6.14 4.4 6.07 4.8 6.04C5.14 6.01 5.54 6.01 6 6C6.01 5.54 6.01 5.14 6.04 4.8C6.08 4.35 6.15 3.94 6.35 3.56L6.47 3.34C6.77 2.85 7.21 2.45 7.73 2.18L7.87 2.11C8.21 1.97 8.57 1.9 8.97 1.87C9.42 1.83 9.98 1.83 10.67 1.83H13.5C14.19 1.83 14.75 1.83 15.2 1.87C15.65 1.91 16.06 1.99 16.44 2.18L16.66 2.3C17.15 2.61 17.55 3.04 17.82 3.56L17.89 3.71C18.03 4.04 18.1 4.4 18.13 4.8C18.17 5.25 18.17 5.81 18.17 6.5V9.33Z" }) }));
+};

package/dist/icons/sidebar-toggle.d.ts

@@ -0,0 +1,13 @@
+type SidebarToggleProps = React.SVGProps<SVGSVGElement> & {
+    /** Flip horizontally so the filled column sits on the right (right-side panels). */
+    mirrored?: boolean;
+};
+/**
+ * A rounded panel frame split by a divider, drawn as strokes so the weight is
+ * one number. 2.25 viewBox units is ~1.5px at the default 16px — the fill
+ * outline this replaced was 1.77 units (~1.2px) and read as hairline next to
+ * the Phosphor icons around it. The frame spans 21 × 19 of the 24 box (was
+ * 20 × 17.7), so the glyph fills its square like its neighbours do.
+ */
+export declare const SidebarToggle: ({ className, mirrored, ...props }: SidebarToggleProps) => import("react").JSX.Element;
+export {};

package/dist/icons/sidebar-toggle.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+/**
+ * A rounded panel frame split by a divider, drawn as strokes so the weight is
+ * one number. 2.25 viewBox units is ~1.5px at the default 16px — the fill
+ * outline this replaced was 1.77 units (~1.2px) and read as hairline next to
+ * the Phosphor icons around it. The frame spans 21 × 19 of the 24 box (was
+ * 20 × 17.7), so the glyph fills its square like its neighbours do.
+ */
+export const SidebarToggle = ({ className, mirrored, ...props }) => {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", "aria-hidden": "true", className: cn('size-4', mirrored && '-scale-x-100', className), ...props, children: [_jsx("rect", { x: "2.625", y: "3.625", width: "18.75", height: "16.75", rx: "4" }), _jsx("path", { d: "M9.25 3.625v16.75" })] }));
+};

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { cn } from './lib/utils.js';
+export { UiProvider, defaultChatStrings, defaultUiStrings, useUiBrand, useUiLink, useUiStrings, type UiBrand, type UiLinkComponent, type UiLinkProps, type ChatStrings, type UiStrings, type UiStringsInput, type UseUiBrand, } from './providers/ui-provider.js';
+export { useIsDark } from './hooks/use-is-dark.js';
+export { Button, buttonVariants, type ButtonProps, } from './components/ui/button.js';
+export { Badge, badgeVariants, } from './components/ui/badge.js';
+export { Card, CardAction, CardButton, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardHeader, CardImage, CardMedia, CardTitle, type CardButtonProps, type CardButtonSize, type CardButtonVariant, type CardGroupProps, type CardLogo, type CardProps, } from './components/ui/card.js';
+export { Separator, } from './components/ui/separator.js';
+export { Skeleton, } from './components/ui/skeleton.js';
+export { Input, inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, type InputProps, } from './components/ui/input.js';
+export { useAutosizeTextArea, Textarea, type AutosizeTextAreaRef, type AutosizeTextAreaProps, } from './components/ui/textarea.js';
+export { Label, } from './components/ui/label.js';
+export { Checkbox, type CheckboxProps, type CheckboxVariant, } from './components/ui/checkbox.js';
+export { Switch, type SwitchProps, } from './components/ui/switch.js';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type SelectTriggerProps, } from './components/ui/select.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './components/ui/dialog.js';
+export { Modal, ModalBody, ModalClose, ModalContent, ModalContentInner, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, } from './components/ui/modal.js';
+export { Hint, type HintProps } from './components/ui/hint.js';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from './components/ui/popover.js';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './components/ui/tooltip.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from './components/ui/dropdown-menu.js';
+export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, type TabsListType, type TabsSize, type TabsTriggerSize, type TabsTriggerVariant, type TabsUnderlineSize, } from './components/ui/tabs.js';
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, bubbleVariants, } from './components/ui/bubble.js';
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, } from './components/ui/message.js';
+export { Marker, MarkerContent, MarkerIcon, markerVariants, } from './components/ui/marker.js';

package/dist/index.js

@@ -0,0 +1,33 @@
+// @kortix/ui root barrel: light core primitives only (Radix, cva, motion).
+// Heavy or app-shaped modules are reachable only through their own subpath,
+// never from here: charts ('@kortix/ui/chart'), maps ('@kortix/ui/map'), grids
+// ('@kortix/ui/data-grid'), mermaid, emoji data ('@kortix/ui/emoji-picker'),
+// toasts ('@kortix/ui/toast', sonner) and the session UI ('@kortix/ui/chat').
+// Names are explicit (no `export *`): src/skill.test.ts checks that the
+// kortix-ui skill lists every one.
+export { cn } from './lib/utils.js';
+export { UiProvider, defaultChatStrings, defaultUiStrings, useUiBrand, useUiLink, useUiStrings, } from './providers/ui-provider.js';
+export { useIsDark } from './hooks/use-is-dark.js';
+export { Button, buttonVariants, } from './components/ui/button.js';
+export { Badge, badgeVariants, } from './components/ui/badge.js';
+export { Card, CardAction, CardButton, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardHeader, CardImage, CardMedia, CardTitle, } from './components/ui/card.js';
+export { Separator, } from './components/ui/separator.js';
+export { Skeleton, } from './components/ui/skeleton.js';
+export { Input, inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTransitionClasses, } from './components/ui/input.js';
+export { useAutosizeTextArea, Textarea, } from './components/ui/textarea.js';
+export { Label, } from './components/ui/label.js';
+export { Checkbox, } from './components/ui/checkbox.js';
+export { Switch, } from './components/ui/switch.js';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './components/ui/select.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './components/ui/dialog.js';
+export { Modal, ModalBody, ModalClose, ModalContent, ModalContentInner, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, } from './components/ui/modal.js';
+export { Hint } from './components/ui/hint.js';
+// Dialog and Tooltip are the primitives Modal and Hint build on. Feature code
+// uses Modal and Hint (the kortix-ui skill, section 3); both carry @deprecated.
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from './components/ui/popover.js';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './components/ui/tooltip.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from './components/ui/dropdown-menu.js';
+export { FilterBar, FilterBarItem, Tabs, TabsContent, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact, tabsTriggerHeightVariants, tabsTriggerPaddingVariants, tabsTriggerTextVariants, } from './components/ui/tabs.js';
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions, bubbleVariants, } from './components/ui/bubble.js';
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, } from './components/ui/message.js';
+export { Marker, MarkerContent, MarkerIcon, markerVariants, } from './components/ui/marker.js';

package/dist/lib/dotmatrix-core.d.ts

@@ -0,0 +1,113 @@
+import type { CSSProperties } from 'react';
+type MatrixPattern = 'diamond' | 'full' | 'outline' | 'rose' | 'cross' | 'rings';
+type DotShape = 'circle' | 'square' | 'diamond' | 'hearts';
+export type DotMatrixPhase = 'idle' | 'collapse' | 'hoverRipple' | 'loadingRipple';
+type DotMatrixColorPreset = 'solid-theme' | 'solid-mint' | 'grad-sunset' | 'grad-ocean' | 'grad-neon' | 'grad-aurora' | 'grad-fire' | 'grad-prism';
+export interface DotMatrixCommonProps {
+    size?: number;
+    dotSize?: number;
+    /** Multiplies `size` and `dotSize` together. `1` is the component's own base. */
+    scale?: number;
+    color?: string;
+    colorPreset?: DotMatrixColorPreset;
+    speed?: number;
+    ariaLabel?: string;
+    className?: string;
+    pattern?: MatrixPattern;
+    muted?: boolean;
+    /**
+     * Adds a glow on dots from opacity 0.6 (weakest) through 1 (strongest), after remapping.
+     */
+    bloom?: boolean;
+    /** Uniform glow on every active dot (0…1); slightly wider falloff than selective `bloom`. */
+    halo?: number;
+    animated?: boolean;
+    hoverAnimated?: boolean;
+    dotClassName?: string;
+    dotShape?: DotShape;
+    opacityBase?: number;
+    opacityMid?: number;
+    opacityPeak?: number;
+    cellPadding?: number;
+    boxSize?: number;
+    minSize?: number;
+}
+interface DotAnimationContext {
+    index: number;
+    row: number;
+    col: number;
+    distanceFromCenter: number;
+    angleFromCenter: number;
+    radiusNormalized: number;
+    manhattanDistance: number;
+    phase: DotMatrixPhase;
+    isActive: boolean;
+    reducedMotion: boolean;
+}
+interface DotAnimationState {
+    className?: string;
+    style?: CSSProperties;
+}
+export type DotAnimationResolver = (ctx: DotAnimationContext) => DotAnimationState;
+export declare function cx(...values: Array<string | undefined | null | false>): string;
+export declare const MATRIX_SIZE = 5;
+export declare function rowMajorIndex(row: number, col: number): number;
+export declare function distanceFromCenter(index: number): number;
+export declare function rowDistance(index: number): number;
+export declare function manhattanDistance(index: number): number;
+export declare function trBlPathNormFromIndex(index: number): number;
+export declare function spiralInwardNormFromIndex(index: number): number;
+export declare function spiralInwardOrderValue(index: number): number;
+export declare function outerRingClockwiseOrderValue(index: number): number;
+export declare function outerRingClockwiseNormFromIndex(index: number): number;
+export declare function middleRingAntiClockwiseOrderValue(index: number): number;
+export declare function middleRingAntiClockwiseNormFromIndex(index: number): number;
+export declare function diagonalSnakeOrderValue(index: number): number;
+export declare function diagonalSnakeNormFromIndex(index: number): number;
+export declare function isWithinCircularMask(row: number, col: number): boolean;
+interface DotMatrixBaseProps extends DotMatrixCommonProps {
+    phase: DotMatrixPhase;
+    reducedMotion?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    animationResolver?: DotAnimationResolver;
+}
+export declare function DotMatrixBase({ scale: scaleProp, size: sizeProp, dotSize: dotSizeProp, color, colorPreset, speed, ariaLabel, className, pattern, dotShape, muted, bloom, halo, dotClassName, phase, reducedMotion, onMouseEnter, onMouseLeave, animationResolver, opacityBase, opacityMid, opacityPeak, cellPadding, boxSize, minSize, }: DotMatrixBaseProps): import("react").JSX.Element;
+type DiagonalWave3Direction = 'tr-bl' | 'tl-br' | 'br-tl' | 'bl-tr';
+export declare function snakePath3NormFromIndex(index: number): number;
+export declare function snakePath3OrderValue(index: number): number;
+export declare function outerRingClockwise3OrderValue(index: number): number;
+export declare function outerRingClockwise3NormFromIndex(index: number): number;
+export declare function isCenterCell3(row: number, col: number): boolean;
+export declare function rowWave3NormFromRow(row: number): number;
+export declare function colWave3NormFromCol(col: number): number;
+export declare function colWave3NormFromColReverse(col: number): number;
+export declare function wave3PathOpacityFromNorm(norm: number, base?: number, mid?: number, peak?: number): number;
+type DiagonalWave3ComponentProps = DotMatrixCommonProps;
+export declare function createDiagonalWave3Component(displayName: string, direction: DiagonalWave3Direction): {
+    ({ pattern, animated, hoverAnimated, speed, ...rest }: DiagonalWave3ComponentProps): import("react").JSX.Element;
+    displayName: string;
+};
+type Dotm3x3ComponentProps = DotMatrixCommonProps;
+export declare function createDotm3x3Component(displayName: string, animationResolver: DotAnimationResolver, defaultSpeed?: number): {
+    ({ pattern, dotShape, animated, hoverAnimated, speed, ...rest }: Dotm3x3ComponentProps): import("react").JSX.Element;
+    displayName: string;
+};
+export declare function createDotm5x5Component(displayName: string, makeResolver: (cycle: number, reducedMotion: boolean) => DotAnimationResolver, config: {
+    speed: number;
+    size?: number;
+    dotSize?: number;
+    cycleMsBase?: number;
+    steps?: number;
+    idleStep?: number;
+    lockedPattern?: MatrixPattern;
+}): {
+    ({ pattern, animated, hoverAnimated, speed, size, dotSize, ...rest }: DotMatrixCommonProps): import("react").JSX.Element;
+    displayName: string;
+};
+type GlyphSpin3ComponentProps = DotMatrixCommonProps;
+export declare function createGlyphSpin3Component(displayName: string, glyph: readonly number[], defaultSpeed?: number): {
+    ({ speed, pattern, dotShape, animated, hoverAnimated, ...rest }: GlyphSpin3ComponentProps): import("react").JSX.Element;
+    displayName: string;
+};
+export {};