@intentface/chat 0.1.0

package/dist/steps/steps.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Headless steps timeline — a recursive disclosure tree. Every node is the
+// same part (Item = a Collapsible; Trigger/Panel scope to the nearest Item by
+// nesting), so timelines nest arbitrarily: a panel can contain further items.
+// State surfaces as data attributes only: data-status per item, data-open /
+// data-closed from the disclosure, and data-nested on items that sit inside
+// another item (for rail/connector styling; sibling facts are CSS's job via
+// :last-child / :only-child). Icons, connectors, markdown, and all classes
+// belong to the styled layer; tool derivation belongs to the app layer.
+import { createContext, use } from "react";
+import { Collapsible } from "../internal/collapsible.js";
+import { useRenderElement } from "../internal/render/useRenderElement.js";
+// Visually-hidden-but-announced (screen-reader-only) default for Steps.Status.
+const visuallyHiddenStyle = {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    margin: -1,
+    padding: 0,
+    overflow: "hidden",
+    clipPath: "inset(50%)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+export const StepsRoot = ({ className, render, style, ...elementProps }) => useRenderElement("div", { className, render, style }, { props: [{ "data-steps": "" }, elementProps] });
+StepsRoot.displayName = "Steps";
+// ---------------------------------------------------------------------------
+// Item — one disclosure node. Presence-nested: items inside another item
+// carry data-nested.
+// ---------------------------------------------------------------------------
+// True inside any Item, so deeper items can surface data-nested.
+const NestedContext = createContext(false);
+// Status inherited by Icon / Label from the nearest Item.
+const StepStatusContext = createContext(null);
+const useStepStatus = (status) => {
+    const inherited = use(StepStatusContext);
+    return status ?? inherited ?? "complete";
+};
+export const StepsItem = ({ status = "complete", defaultOpen, ...props }) => {
+    const isNested = use(NestedContext);
+    return (_jsx(NestedContext, { value: true, children: _jsx(StepStatusContext, { value: status, children: _jsx(Collapsible, { defaultOpen: defaultOpen ?? status === "active", "aria-current": status === "active" ? "step" : undefined, "data-steps-item": "", "data-status": status, "data-nested": isNested || undefined, ...props }) }) }));
+};
+StepsItem.displayName = "StepsItem";
+export const StepsTrigger = (props) => (_jsx(Collapsible.Trigger, { "data-steps-trigger": "", ...props }));
+StepsTrigger.displayName = "StepsTrigger";
+export const StepsPanel = (props) => (_jsx(Collapsible.Panel, { "data-steps-panel": "", ...props }));
+StepsPanel.displayName = "StepsPanel";
+export const StepsIcon = ({ status, className, render, style, ...elementProps }) => {
+    const resolvedStatus = useStepStatus(status);
+    return useRenderElement("span", { className, render, style }, {
+        state: { status: resolvedStatus },
+        props: [{ "data-steps-icon": "", "aria-hidden": true }, elementProps],
+    });
+};
+StepsIcon.displayName = "StepsIcon";
+export const StepsLabel = ({ status, className, render, style, ...elementProps }) => {
+    const resolvedStatus = useStepStatus(status);
+    return useRenderElement("span", { className, render, style }, {
+        state: { status: resolvedStatus },
+        props: [{ "data-steps-label": "" }, elementProps],
+    });
+};
+StepsLabel.displayName = "StepsLabel";
+export const StepsStatus = ({ status, children, className, render, style, ...elementProps }) => {
+    const resolvedStatus = useStepStatus(status);
+    return useRenderElement("span", { className, render, style }, {
+        state: { status: resolvedStatus },
+        props: [
+            {
+                "data-steps-status": "",
+                style: visuallyHiddenStyle,
+                children: children ?? resolvedStatus,
+            },
+            elementProps,
+        ],
+    });
+};
+StepsStatus.displayName = "StepsStatus";

package/dist/thread/geometry.d.ts

@@ -0,0 +1,18 @@
+export declare const prefersReducedMotion: () => boolean;
+export declare const resolveScrollBehavior: (behavior: ScrollBehavior) => ScrollBehavior;
+export declare const scrollContainerTo: (el: HTMLElement, top: number, behavior: ScrollBehavior) => void;
+export declare const wasPrepended: (mutations: MutationRecord[], previousFirst: Element | null, content: HTMLElement) => boolean;
+export declare const DEFAULT_BOTTOM_OFFSET = 128;
+export declare const DEFAULT_DOCK_SELECTOR = "[data-composer-context-window], [data-composer-container]";
+export declare const queryDockParts: (root: HTMLElement, dockSelector: string) => Element[];
+/**
+ * Height (px) to reserve at the bottom for the dock parts matching
+ * `dockSelector` — but NOT the command-list / ask-user panel. The dock is
+ * bottom-anchored, so it sits in a fixed region while the panel grows upward
+ * above it. The inset is measured from a single reference — the bottom-most
+ * match's top to the root's bottom — not a sum of matches, so a taller part
+ * stacked above must fit within COMPOSER_GAP. Returns null when no dock is
+ * mounted yet.
+ */
+export declare const measureDockInset: (root: HTMLElement, dockSelector: string) => number | null;
+export declare const measureTopInset: (root: HTMLElement) => number;

package/dist/thread/geometry.js

@@ -0,0 +1,59 @@
+// 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) });
+};
+// 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;
+export const DEFAULT_DOCK_SELECTOR = "[data-composer-context-window], [data-composer-container]";
+// `dockSelector` is public API, so it may be an invalid selector string.
+// Degrade to "no dock parts" rather than letting querySelectorAll throw a
+// SyntaxError inside the layout effect (which would crash the render).
+export const queryDockParts = (root, dockSelector) => {
+    try {
+        return [...root.querySelectorAll(dockSelector)];
+    }
+    catch {
+        return [];
+    }
+};
+/**
+ * Height (px) to reserve at the bottom for the dock parts matching
+ * `dockSelector` — but NOT the command-list / ask-user panel. The dock is
+ * bottom-anchored, so it sits in a fixed region while the panel grows upward
+ * above it. The inset is measured from a single reference — the bottom-most
+ * match's top to the root's bottom — not a sum of matches, so a taller part
+ * stacked above must fit within COMPOSER_GAP. Returns null when no dock is
+ * mounted yet.
+ */
+export const measureDockInset = (root, dockSelector) => {
+    let dockTop = null;
+    for (const part of queryDockParts(root, dockSelector)) {
+        const top = part.getBoundingClientRect().top;
+        if (dockTop === null || top > dockTop)
+            dockTop = top;
+    }
+    if (dockTop === null)
+        return null;
+    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/chat/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();
+            };
+        },
+    };
+};

package/dist/thread/thread.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode, type RefObject } from "react";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+import { type ThreadVisibilityState } from "./stores.js";
+export type { ThreadVisibilityState } from "./stores.js";
+export type ThreadScrollToMessageOptions = {
+    /** Viewport edge (or center) to align the row to; scrollIntoView's block. */
+    align?: "start" | "center" | "end" | "nearest";
+    behavior?: ScrollBehavior;
+};
+/**
+ * Public thread surface. Subscribes to the scroll edges, so call it where
+ * isAtTop / isAtBottom are actually read (e.g. a scroll button or a load-older
+ * trigger); the commands and refs are stable and never cause re-renders.
+ */
+export declare const useThread: () => {
+    isAtTop: boolean;
+    isAtBottom: boolean;
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    scrollToTop: (behavior?: ScrollBehavior) => void;
+    scrollToMessage: (messageId: string, options?: ThreadScrollToMessageOptions) => boolean;
+    scrollRef: RefObject<HTMLDivElement | null>;
+    contentRef: RefObject<HTMLDivElement | null>;
+};
+/**
+ * Which data-message-id rows are in view, plus the topmost one (the row being
+ * read). Subscribing lazily spins up the tracking observers; when the last
+ * subscriber unmounts they are torn down, so unused threads pay nothing.
+ */
+export declare const useThreadVisibility: () => ThreadVisibilityState;
+export type ThreadAutoScrollMode = "off" | "bottom" | "jump" | "follow";
+export type ThreadRootProps = PrimitiveProps<"div"> & {
+    children?: ReactNode;
+    autoScroll?: ThreadAutoScrollMode;
+    /**
+     * Hold the reading position when rows are prepended (history pagination).
+     * Opt-in: enabling it attaches a passive scroll listener to keep the anchor
+     * current, so leave it off unless older content actually loads in above.
+     */
+    preserveScrollOnPrepend?: boolean;
+    /**
+     * CSS selector for the bottom-docked parts the thread reserves space for.
+     * Every match is observed for resize, but the reserved inset is measured
+     * from a single reference — the bottom-most match's top edge, not a sum of
+     * matches — so a taller part stacked above it must fit within the content
+     * gap. Must be a valid CSS selector. Defaults to the styled composer's dock
+     * slots.
+     */
+    dockSelector?: string;
+};
+export declare const ThreadRoot: ({ autoScroll, preserveScrollOnPrepend, dockSelector, className, render, style, ...elementProps }: ThreadRootProps) => import("react").JSX.Element;
+export type ThreadOverlayState = {
+    /** Which edge this overlay marks, surfaced as data-thread-overlay. */
+    direction: "top" | "bottom";
+};
+export type ThreadOverlayProps = PrimitiveProps<"div", ThreadOverlayState> & {
+    direction: "top" | "bottom";
+};
+export declare const ThreadOverlay: import("react").MemoExoticComponent<({ direction, className, render, style, ...elementProps }: ThreadOverlayProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>>;
+export type ThreadViewportProps = PrimitiveProps<"div">;
+export declare const ThreadViewport: ({ className, render, style, ...elementProps }: ThreadViewportProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadContentProps = PrimitiveProps<"div">;
+export declare const ThreadContent: ({ className, render, style, ...elementProps }: ThreadContentProps) => import("react").JSX.Element;
+export type ThreadComposerProps = PrimitiveProps<"div">;
+export declare const ThreadComposer: ({ className, render, style, ...elementProps }: ThreadComposerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ThreadPlaceholderProps = PrimitiveProps<"div">;
+export declare const ThreadPlaceholder: ({ className, render, style, ...elementProps }: ThreadPlaceholderProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;