@intentface/ui 0.0.0 → 0.7.0

package/dist/tabs/tabs.js

@@ -0,0 +1,458 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, Fragment, use, useCallback, useId, useMemo, useState } from "react";
+import { createChangeEventDetails } from "../internal/change-event-details.js";
+import { step } from "../internal/collection.js";
+import { useIsomorphicLayoutEffect } from "../internal/iso-layout-effect.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+import { createTabsStore, TabsStoreContext, useTabsContextStore, useTabsStore } from "./store.js";
+/**
+ * `direction` would otherwise emit `data-direction` — the default derivation
+ * lowercases rather than kebab-cases — and `none` is not worth an attribute.
+ */
+const PART_ATTRIBUTES = {
+    direction: (value) => value === "none" ? null : { "data-activation-direction": value },
+};
+const selectValue = (tabs) => tabs.value;
+const selectDirection = (tabs) => tabs.direction;
+const selectHasViewport = (tabs) => tabs.hasViewport;
+const selectItems = (tabs) => tabs.items;
+const TabsConfigContext = createContext(null);
+const useTabsConfig = () => {
+    const config = use(TabsConfigContext);
+    if (!config)
+        throw new Error("Tabs parts must be used within <Tabs.Root>");
+    return config;
+};
+const TabsListContext = createContext(null);
+const TabsItemContext = createContext(null);
+/**
+ * Disabled cascades: the Root disables everything, an Item disables its own
+ * entry, and a part can disable just itself.
+ */
+const useDisabled = (own = false) => {
+    const { disabled: rootDisabled } = useTabsConfig();
+    const item = use(TabsItemContext);
+    return rootDisabled || (item?.disabled ?? false) || own;
+};
+/** The enclosing item's value, if there is one. Does not insist on it. */
+const useOptionalItemValue = (explicit) => explicit ?? use(TabsItemContext)?.value ?? null;
+const useItemValue = (explicit) => {
+    const inherited = use(TabsItemContext)?.value ?? null;
+    const value = explicit ?? inherited;
+    if (value === null || value === undefined) {
+        throw new Error("Tabs parts need a `value`, either their own or from <Tabs.Trigger>");
+    }
+    return value;
+};
+const usePartState = (store, orientation, disabled = false) => ({
+    orientation,
+    disabled,
+    empty: useTabsStore(store, selectValue) === null,
+    direction: useTabsStore(store, selectDirection),
+});
+/**
+ * True while a text field should keep an arrow key for itself: there is a
+ * selection, Shift is held, or the caret has not yet reached the end it is
+ * travelling towards.
+ */
+const ownsTheArrowKeys = (event, forward, backward) => {
+    const target = event.target;
+    if (!target || !(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
+        return false;
+    }
+    if (target.disabled)
+        return false;
+    const { selectionStart, selectionEnd, value } = target;
+    if (selectionStart === null || event.shiftKey || selectionStart !== selectionEnd)
+        return true;
+    if (event.key !== backward && selectionStart < value.length)
+        return true;
+    if (event.key !== forward && selectionStart > 0)
+        return true;
+    return false;
+};
+const tabId = (store, value) => `${store.baseId}-tab-${value}`;
+const viewportId = (store) => `${store.baseId}-viewport`;
+/**
+ * The provider and container. Owns the item order, the selection and the
+ * roving focus, so every other part reads rather than holds state.
+ * Renders a `<div>` element.
+ */
+export const TabsRoot = ({ defaultValue, value, onValueChange, defaultItems, items, onItemsChange, selectOnClose, store: storeProp, orientation = "horizontal", loop = true, activateOnFocus = false, disabled = false, dismissOnEscape = true, className, render, style, ...elementProps }) => {
+    const baseId = useId();
+    const [store] = useState(() => {
+        const created = storeProp ?? createTabsStore();
+        // Before anything has subscribed, so no notify and no write-back.
+        created.hydrate({ items: items ?? defaultItems, value: value ?? defaultValue });
+        created.baseId = baseId;
+        return created;
+    });
+    // Latest-ref bridges, written during render: idempotent, and current before
+    // any event handler can read them.
+    store.selectOnCloseRef.current = selectOnClose;
+    store.orientationRef.current = orientation;
+    store.valueControlledRef.current = value !== undefined;
+    store.itemsControlledRef.current = items !== undefined;
+    store.onValueChangeRef.current = onValueChange;
+    store.onItemsChangeRef.current = onItemsChange;
+    // Before paint, so a controlled change never shows the old state first.
+    useIsomorphicLayoutEffect(() => {
+        if (value !== undefined)
+            store.commitValue(value);
+    }, [value, store]);
+    useIsomorphicLayoutEffect(() => {
+        if (items !== undefined)
+            store.commitItems(items);
+    }, [items, store]);
+    useIsomorphicLayoutEffect(() => {
+        if (!dismissOnEscape)
+            return;
+        const handleKeyDown = (event) => {
+            const { value } = store.getSnapshot();
+            // The window hears Escape last, so one handled inside (a composer stopping) is spent.
+            if (event.key !== "Escape" || event.defaultPrevented || value === null)
+                return;
+            event.preventDefault();
+            // From inside the popup, focus would drop to the body as it closes; it goes back to the tab.
+            const fromPopup = store.popupRef.current?.contains(document.activeElement) ?? false;
+            store.selectWithDetails(null, createChangeEventDetails("escape-key", event));
+            if (fromPopup)
+                store.elements.get(value)?.focus();
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [dismissOnEscape, store]);
+    const config = useMemo(() => ({ orientation, loop, activateOnFocus, disabled }), [orientation, loop, activateOnFocus, disabled]);
+    // Nothing hover started outlives the strip.
+    const releaseHoverOnUnmount = useCallback(() => () => store.hover.release(), [store]);
+    const element = useRenderElement("div", { className, render, style }, {
+        state: usePartState(store, orientation),
+        stateAttributesMapping: PART_ATTRIBUTES,
+        ref: releaseHoverOnUnmount,
+        props: [{ "data-tabs": "" }, elementProps],
+    });
+    return (_jsx(TabsStoreContext, { value: store, children: _jsx(TabsConfigContext, { value: config, children: element }) }));
+};
+/**
+ * The strip. A `toolbar` of disclosures rather than a `tablist`, because a
+ * tablist may hold only tabs and must always have one selected.
+ * Renders a `<div>` element.
+ */
+export const TabsList = ({ children, className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const { orientation, loop, activateOnFocus } = useTabsConfig();
+    const items = useTabsStore(store, selectItems);
+    const value = useTabsStore(store, selectValue);
+    // Which tab the roving tabindex sits on. Follows the open tab until the
+    // arrows move it somewhere else, which is what manual activation means.
+    const [highlighted, setHighlighted] = useState(null);
+    // Validated against `items`, not trusted: closing the focused tab with no
+    // `selectOnClose` policy leaves nothing to focus, so no `onFocus` fires to
+    // re-seed this. A stale id would leave every trigger at `tabIndex: -1` and
+    // the strip unreachable from the keyboard.
+    const live = highlighted !== null && items.includes(highlighted) ? highlighted : null;
+    const current = live ?? value ?? items[0] ?? null;
+    const listContext = useMemo(() => ({ highlighted: current, setHighlighted }), [current]);
+    const handleKeyDown = (event) => {
+        const forward = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+        const backward = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        // A text field inside the strip — renaming a tab in place — owns its own
+        // arrow keys until the caret reaches the end it is heading for. Without
+        // this the roving focus steals them and the caret never moves.
+        if (ownsTheArrowKeys(event, forward, backward))
+            return;
+        const next = event.key === forward
+            ? step(items, current, 1, { loop })
+            : event.key === backward
+                ? step(items, current, -1, { loop })
+                : event.key === "Home"
+                    ? (items[0] ?? null)
+                    : event.key === "End"
+                        ? (items[items.length - 1] ?? null)
+                        : undefined;
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        if (next === null)
+            return;
+        setHighlighted(next);
+        const element = store.elements.get(next);
+        element?.focus();
+        if (!activateOnFocus)
+            return;
+        store.selectWithDetails(next, createChangeEventDetails("list-navigation", event.nativeEvent, element));
+    };
+    const element = useRenderElement("div", { className, render, style }, {
+        state: usePartState(store, orientation),
+        stateAttributesMapping: PART_ATTRIBUTES,
+        props: [
+            {
+                "data-tabs-list": "",
+                role: "toolbar",
+                "aria-orientation": orientation,
+                onKeyDown: handleKeyDown,
+            },
+            elementProps,
+            {
+                children: typeof children === "function"
+                    ? items.map((value, index) => (_jsx(Fragment, { children: children(value, index) }, value)))
+                    : children,
+            },
+        ],
+    });
+    return _jsx(TabsListContext, { value: listContext, children: element });
+};
+/**
+ * A tab: the whole pill, and the thing you press.
+ *
+ * It is a `div` with `role="button"` rather than a `<button>`, so that a close
+ * button can live inside it. That nesting is what Linear does and it is what
+ * makes the entire pill a click target, but it is not free: `role="button"`
+ * has children-presentational in ARIA, so `axe` reports `nested-interactive`
+ * and the suite suppresses that one rule with a note. A real `<button>` would
+ * be worse — the HTML parser closes an outer button when it meets an inner
+ * one, so server-rendered markup would come back reshaped and hydration would
+ * mismatch.
+ *
+ * The price of not being a native button is that activation is ours to
+ * implement: Enter and Space, by hand.
+ *
+ * One part, two situations, decided by where it sits rather than by a prop:
+ *
+ * - **Inside a `Tabs.List`** it is one of the collection, joins the roving
+ *   focus, and selects. `Delete` closes it.
+ * - **Outside one** it takes an explicit value, keeps its own tab stop, and
+ *   toggles — a panel with no tab behind it, opened anchored to the button
+ *   that owns it and promoted to a real tab only when you call `open()`.
+ *
+ * With `openOnHover`, leaving closes the tab again unless the mouse heads into
+ * the popup. A press on the tab, or a press or focus inside the popup, keeps it.
+ */
+export const TabsTrigger = ({ value: explicitValue, disabled: ownDisabled, openOnHover = false, openDelay = 50, closeDelay = 50, className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const { orientation, disabled: rootDisabled } = useTabsConfig();
+    const list = use(TabsListContext);
+    const inList = list !== null;
+    const value = useItemValue(explicitValue);
+    const disabled = rootDisabled || (ownDisabled ?? false);
+    const selected = useTabsStore(store, selectValue) === value;
+    const hasViewport = useTabsStore(store, selectHasViewport);
+    const context = useMemo(() => ({ value, disabled }), [value, disabled]);
+    const hovers = openOnHover && !disabled;
+    const ref = useCallback((element) => {
+        // The same element is both the focus target and what a floating surface
+        // lines up with, now that the pill and the button are one thing.
+        store.registerElement(value, element);
+        store.registerAnchor(value, element);
+        const unregisterHover = element && hovers ? store.hover.register(element) : undefined;
+        return () => {
+            store.registerElement(value, null);
+            store.registerAnchor(value, null);
+            unregisterHover?.();
+        };
+    }, [store, value, hovers]);
+    useIsomorphicLayoutEffect(() => {
+        store.registerDisabled(value, disabled);
+        return () => store.registerDisabled(value, false);
+    }, [store, value, disabled]);
+    const activate = (event) => {
+        if (disabled)
+            return;
+        // A press on a tab the mouse opened keeps it open, rather than toggling it shut.
+        const hoverOpened = store.hover.owns(value);
+        store.hover.claim();
+        store.selectWithDetails(!inList && selected && !hoverOpened ? null : value, createChangeEventDetails("trigger-press", event.nativeEvent, event.currentTarget));
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            // A div does not do this for us.
+            event.preventDefault();
+            activate(event);
+            return;
+        }
+        // Delete closes a tab — the keyboard equivalent of the × beside it.
+        if (!inList || disabled)
+            return;
+        if (event.key !== "Delete" && event.key !== "Backspace")
+            return;
+        event.preventDefault();
+        closeAndRefocus(store, value, createChangeEventDetails("keyboard", event.nativeEvent, event.currentTarget));
+    };
+    const element = useRenderElement("div", { className, render, style }, {
+        state: { ...usePartState(store, orientation, disabled), selected },
+        stateAttributesMapping: PART_ATTRIBUTES,
+        ref,
+        props: [
+            {
+                "data-tabs-trigger": "",
+                role: "button",
+                id: tabId(store, value),
+                "aria-expanded": selected,
+                // Only claim a viewport that is really in the document.
+                "aria-controls": hasViewport ? viewportId(store) : undefined,
+                "aria-disabled": disabled || undefined,
+                tabIndex: inList ? (list.highlighted === value ? 0 : -1) : 0,
+                onClick: activate,
+                onFocus: inList ? () => list.setHighlighted(value) : undefined,
+                onKeyDown: handleKeyDown,
+                ...(hovers && {
+                    onPointerEnter: (event) => store.hover.enterTab({ value, openDelay, closeDelay }, event),
+                    onPointerMove: store.hover.moveOnTab,
+                    onPointerLeave: store.hover.leaveTab,
+                }),
+            },
+            elementProps,
+        ],
+    });
+    return _jsx(TabsItemContext, { value: context, children: element });
+};
+/**
+ * Close, then put focus somewhere deliberate.
+ *
+ * The store commits synchronously, so the tab that takes over is already known
+ * by the time this reads it back — and focus moves there before React unmounts
+ * the tab that was closed. Left alone, focus would fall to the body.
+ */
+const closeAndRefocus = (store, value, eventDetails) => {
+    store.closeWithDetails(value, eventDetails);
+    if (eventDetails.isCanceled)
+        return;
+    const successor = store.getSnapshot().value;
+    if (successor)
+        store.elements.get(successor)?.focus();
+};
+/**
+ * A decorative mark inside a trigger.
+ *
+ * `aria-hidden`, deliberately: the trigger already has an accessible name, and
+ * an icon that repeats it only makes the announcement longer. It carries the
+ * part state too, so the mark can respond to its tab being open without the
+ * consumer reaching for a group selector.
+ */
+export const TabsIcon = ({ value: explicitValue, className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const { orientation } = useTabsConfig();
+    const value = useOptionalItemValue(explicitValue);
+    const disabled = useDisabled();
+    const selected = useTabsStore(store, selectValue) === value && value !== null;
+    return useRenderElement("span", { className, render, style }, {
+        state: { ...usePartState(store, orientation, disabled), selected },
+        stateAttributesMapping: PART_ATTRIBUTES,
+        props: [{ "data-tabs-icon": "", "aria-hidden": true }, elementProps],
+    });
+};
+/**
+ * The trailing slot inside a tab — where the close button lives.
+ *
+ * Its own part rather than a div of yours for one reason: a tab narrow enough
+ * to truncate has nowhere to put a control. Give this `position: absolute` and
+ * a background that fades to the tab's own colour, and the label runs the full
+ * width and disappears under it instead of colliding with it. A flex box with
+ * padding then centres whatever is inside.
+ *
+ * All of that is your CSS. What the part supplies is the element and the
+ * trigger's state on it — `data-selected` above all, since the fade has to end
+ * in whatever colour the tab currently is.
+ */
+export const TabsAction = ({ value: explicitValue, className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const { orientation } = useTabsConfig();
+    const value = useOptionalItemValue(explicitValue);
+    const disabled = useDisabled();
+    const selected = useTabsStore(store, selectValue) === value && value !== null;
+    return useRenderElement("div", { className, render, style }, {
+        state: { ...usePartState(store, orientation, disabled), selected },
+        stateAttributesMapping: PART_ATTRIBUTES,
+        props: [{ "data-tabs-action": "" }, elementProps],
+    });
+};
+/**
+ * The × inside a tab.
+ *
+ * Also a `div` with `role="button"`, for the same reason its parent is. It
+ * keeps out of the roving order — arrowing along a strip should walk tabs, not
+ * alternate between each tab and its close button — so the keyboard route to
+ * closing is `Delete` on the tab itself. Every event it handles stops there:
+ * nested inside the trigger, anything that escaped would open the tab on its
+ * way out of closing it.
+ */
+export const TabsClose = ({ value: explicitValue, disabled: ownDisabled, className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const { orientation } = useTabsConfig();
+    const disabled = useDisabled(ownDisabled);
+    const value = useItemValue(explicitValue);
+    const selected = useTabsStore(store, selectValue) === value;
+    const close = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        if (disabled)
+            return;
+        closeAndRefocus(store, value, createChangeEventDetails("close-press", event.nativeEvent, event.currentTarget));
+    };
+    return useRenderElement("div", { className, render, style }, {
+        state: { ...usePartState(store, orientation, disabled), selected },
+        stateAttributesMapping: PART_ATTRIBUTES,
+        props: [
+            {
+                "data-tabs-close": "",
+                role: "button",
+                "aria-disabled": disabled || undefined,
+                tabIndex: -1,
+                onClick: close,
+                onKeyDown: (event) => {
+                    if (event.key !== "Enter" && event.key !== " ")
+                        return;
+                    close(event);
+                },
+            },
+            elementProps,
+        ],
+    });
+};
+/**
+ * The one box that shows a tab's content.
+ *
+ * There is no per-tab element and nothing mounts or unmounts as you switch —
+ * the same box stays put and re-renders its children for whichever value is
+ * open. That is what makes a floating surface simply move rather than tear
+ * itself down, and it is why nothing here needs overlaying or a mount flag.
+ *
+ * The corollary, and it is deliberate: nothing off-screen exists. A tab you
+ * are not looking at has no component, so anything that must keep running
+ * while you are elsewhere — a reply still streaming — belongs in a store
+ * rather than in the panel's own state.
+ */
+export const TabsViewport = ({ children, className, render, style, ...elementProps }) => {
+    const store = useTabsContextStore();
+    const { orientation } = useTabsConfig();
+    const value = useTabsStore(store, selectValue);
+    // A trigger only claims a viewport that is really in the document.
+    useIsomorphicLayoutEffect(() => {
+        store.registerViewport(true);
+        return () => store.registerViewport(false);
+    }, [store]);
+    return useRenderElement("div", { className, render, style }, {
+        state: { ...usePartState(store, orientation), value },
+        stateAttributesMapping: {
+            ...PART_ATTRIBUTES,
+            // The open tab's id is not a styling hook; keep it out of the DOM.
+            value: () => null,
+        },
+        props: [
+            {
+                "data-tabs-viewport": "",
+                id: viewportId(store),
+                // A bare div maps to the `generic` role, whose name is prohibited, so
+                // `aria-labelledby` on one is discarded. `group` is the lightest role
+                // that accepts a name without claiming the tabpanel semantics this
+                // widget deliberately does not have.
+                role: value === null ? undefined : "group",
+                // Named by whichever tab is open, so the box is not anonymous.
+                "aria-labelledby": value === null ? undefined : tabId(store, value),
+            },
+            elementProps,
+            { children: value === null ? null : children?.(value) },
+        ],
+    });
+};

package/dist/thread/geometry.d.ts

@@ -0,0 +1,23 @@
+export declare const prefersReducedMotion: () => boolean;
+export declare const resolveScrollBehavior: (behavior: ScrollBehavior) => ScrollBehavior;
+export declare const scrollContainerTo: (el: HTMLElement, top: number, behavior: ScrollBehavior) => void;
+export type ViewportBox = {
+    width: number;
+    height: number;
+};
+export declare const readViewportBox: (el: HTMLElement | null) => ViewportBox;
+export declare const sameViewportBox: (a: ViewportBox, b: ViewportBox) => boolean;
+export declare const wasPrepended: (mutations: MutationRecord[], previousFirst: Element | null, content: HTMLElement) => boolean;
+export declare const DEFAULT_BOTTOM_OFFSET = 128;
+export declare const DOCK_SELECTOR = "[data-thread-composer]";
+export declare const queryDock: (root: HTMLElement) => HTMLElement | null;
+/**
+ * Height (px) to reserve at the bottom for the dock: its top edge down to the
+ * root's bottom, plus the content gap. Measured against the root's bottom
+ * rather than the slot's own height, so a dock that floats above the bottom
+ * edge still reserves the space beneath it. Parts that must NOT reserve space
+ * — the command-list / ask-user panel, the scroll button — are positioned out
+ * of the slot's flow. Returns null when the slot isn't mounted yet.
+ */
+export declare const measureDockInset: (root: HTMLElement) => number | null;
+export declare const measureTopInset: (root: HTMLElement) => number;

package/dist/thread/geometry.js

@@ -0,0 +1,48 @@
+// Pure DOM geometry + measurement for the thread scroll subsystem. No React —
+// unit-testable with stubbed elements/rects.
+// Queried per call, not cached — the OS setting can change mid-session and
+// none of these scrolls are hot paths. Guarded for non-DOM (pure-test) callers.
+export const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+// "smooth" downgrades to "auto" under prefers-reduced-motion — deliberate
+// movements still happen, they just don't animate.
+export const resolveScrollBehavior = (behavior) => behavior === "smooth" && prefersReducedMotion() ? "auto" : behavior;
+// Single place that performs the scroll, so callers just choose the behavior:
+// 'instant' for jumps that must not animate, 'smooth' for deliberate movements.
+export const scrollContainerTo = (el, top, behavior) => {
+    el.scrollTo({ top, behavior: resolveScrollBehavior(behavior) });
+};
+export const readViewportBox = (el) => el ? { width: el.clientWidth, height: el.clientHeight } : { width: 0, height: 0 };
+export const sameViewportBox = (a, b) => a.width === b.width && a.height === b.height;
+// A prepend = rows were added, nothing removed, and the previously-first row
+// is still connected but no longer first (older history loading in above).
+export const wasPrepended = (mutations, previousFirst, content) => previousFirst?.isConnected === true &&
+    content.firstElementChild !== previousFirst &&
+    mutations.some((m) => m.addedNodes.length > 0) &&
+    mutations.every((m) => m.removedNodes.length === 0);
+// Fallback (px) until the composer is measured.
+export const DEFAULT_BOTTOM_OFFSET = 128;
+// Breathing room between the last line of content and the composer dock. The
+// bottom overlay spans it in the styled layer.
+const COMPOSER_GAP = 32;
+// The dock is the Thread.Composer slot — the one element the thread reserves
+// space for. Null until it mounts.
+export const DOCK_SELECTOR = "[data-thread-composer]";
+export const queryDock = (root) => root.querySelector(DOCK_SELECTOR);
+/**
+ * Height (px) to reserve at the bottom for the dock: its top edge down to the
+ * root's bottom, plus the content gap. Measured against the root's bottom
+ * rather than the slot's own height, so a dock that floats above the bottom
+ * edge still reserves the space beneath it. Parts that must NOT reserve space
+ * — the command-list / ask-user panel, the scroll button — are positioned out
+ * of the slot's flow. Returns null when the slot isn't mounted yet.
+ */
+export const measureDockInset = (root) => {
+    const dock = queryDock(root);
+    if (!dock)
+        return null;
+    const dockTop = dock.getBoundingClientRect().top;
+    return Math.round(root.getBoundingClientRect().bottom - dockTop + COMPOSER_GAP);
+};
+// Top inset reserved by the top overlay, measured straight off the rendered
+// element (px) — no getComputedStyle / rem→px conversion. 0 if no top overlay.
+export const measureTopInset = (root) => root.querySelector('[data-thread-overlay="top"]')?.getBoundingClientRect().height ?? 0;

package/dist/thread/index.d.ts

@@ -0,0 +1,4 @@
+export * as Thread from "./index.parts.js";
+export type { ThreadVisibilityState } from "./stores.js";
+export type { ThreadAutoScrollMode, ThreadComposerProps, ThreadContentProps, ThreadOverlayProps, ThreadOverlayState, ThreadPlaceholderProps, ThreadRootProps, ThreadScrollToMessageOptions, ThreadViewportProps, } from "./thread.js";
+export { useThread, useThreadVisibility } from "./thread.js";

package/dist/thread/index.js

@@ -0,0 +1,3 @@
+// Public surface of @intentface/ui/thread. No directive — see index.parts.ts.
+export * as Thread from "./index.parts.js";
+export { useThread, useThreadVisibility } from "./thread.js";

package/dist/thread/index.parts.d.ts

@@ -0,0 +1 @@
+export { ThreadComposer as Composer, ThreadContent as Content, ThreadOverlay as Overlay, ThreadPlaceholder as Placeholder, ThreadRoot as Root, ThreadViewport as Viewport, } from "./thread.js";

package/dist/thread/index.parts.js

@@ -0,0 +1,5 @@
+// Part names for the `Thread` namespace. Deliberately carries no
+// "use client" directive: this module and index.ts must stay server-resolvable
+// so a React Server Component can reach Thread.Root and its siblings
+// through them. The directive lives one level down, on thread.tsx.
+export { ThreadComposer as Composer, ThreadContent as Content, ThreadOverlay as Overlay, ThreadPlaceholder as Placeholder, ThreadRoot as Root, ThreadViewport as Viewport, } from "./thread.js";

package/dist/thread/stores.d.ts

@@ -0,0 +1,21 @@
+export declare const createEdgeStore: () => {
+    getSnapshot: () => boolean;
+    setSnapshot: (next: boolean) => void;
+    subscribe: (listener: () => void) => () => void;
+};
+export type EdgeStore = ReturnType<typeof createEdgeStore>;
+export type ThreadVisibilityState = {
+    /** data-message-id values intersecting the viewport, in document order. */
+    visibleMessageIds: string[];
+    /** The topmost visible row — the one being read. */
+    currentMessageId: string | null;
+};
+export declare const EMPTY_VISIBILITY: ThreadVisibilityState;
+export declare const visibilityStatesEqual: (a: ThreadVisibilityState, b: ThreadVisibilityState) => boolean;
+export declare const createVisibilityStore: () => {
+    getSnapshot: () => ThreadVisibilityState;
+    hasListeners: () => boolean;
+    setSnapshot: (next: ThreadVisibilityState) => void;
+    subscribe: (listener: () => void, onFirstSubscribe: () => void, onLastUnsubscribe: () => void) => () => void;
+};
+export type VisibilityStore = ReturnType<typeof createVisibilityStore>;

package/dist/thread/stores.js

@@ -0,0 +1,63 @@
+// Scroll-edge + visibility stores for the thread. External (hand-rolled
+// useSyncExternalStore stores) so a change re-renders only the components that
+// read it, never the Thread tree — the context value stays referentially stable
+// for the thread's lifetime. Pure; no React, no DOM.
+// One boolean store per edge (top / bottom). Two independent stores rather than
+// a single { atTop, atBottom } snapshot, so a flip at one edge never notifies
+// the other's readers.
+export const createEdgeStore = () => {
+    let snapshot = true;
+    const listeners = new Set();
+    return {
+        getSnapshot: () => snapshot,
+        setSnapshot: (next) => {
+            if (snapshot === next)
+                return;
+            snapshot = next;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+export const EMPTY_VISIBILITY = {
+    visibleMessageIds: [],
+    currentMessageId: null,
+};
+export const visibilityStatesEqual = (a, b) => a.currentMessageId === b.currentMessageId &&
+    a.visibleMessageIds.length === b.visibleMessageIds.length &&
+    a.visibleMessageIds.every((id, index) => id === b.visibleMessageIds[index]);
+// Which data-message-id rows intersect the viewport. Lazy + ref-counted: the
+// observers behind it exist only while at least one useThreadVisibility
+// subscriber is mounted, so unsubscribed threads pay nothing.
+export const createVisibilityStore = () => {
+    let snapshot = EMPTY_VISIBILITY;
+    const listeners = new Set();
+    return {
+        getSnapshot: () => snapshot,
+        hasListeners: () => listeners.size > 0,
+        setSnapshot: (next) => {
+            if (visibilityStatesEqual(snapshot, next))
+                return;
+            snapshot = next;
+            for (const listener of listeners)
+                listener();
+        },
+        subscribe: (listener, onFirstSubscribe, onLastUnsubscribe) => {
+            const wasEmpty = listeners.size === 0;
+            listeners.add(listener);
+            if (wasEmpty)
+                onFirstSubscribe();
+            return () => {
+                listeners.delete(listener);
+                if (listeners.size === 0)
+                    onLastUnsubscribe();
+            };
+        },
+    };
+};