@misoto22/folio 0.0.0 → 0.16.0

package/dist/website/Content/CodePanel.d.ts

@@ -0,0 +1,27 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface ClipboardButtonProps {
+    text?: string;
+    /** Read the current rendered code at activation, when the host owns highlighting. */
+    getText?: () => string;
+    copyLabel: string;
+    copiedLabel: string;
+    className?: string;
+}
+/** Confirms copying only after the browser accepts the clipboard write. */
+declare function ClipboardButton({ text, getText, copyLabel, copiedLabel, className }: ClipboardButtonProps): react.JSX.Element;
+interface CodePanelProps {
+    /** A display label, already mapped from the host highlighter's language id. */
+    languageLabel?: ReactNode;
+    preProps?: HTMLAttributes<HTMLPreElement>;
+    /** False when the host renderer has already supplied an enclosing figure. */
+    framed?: boolean;
+    copyLabel: string;
+    copiedLabel: string;
+    children: ReactNode;
+}
+/** A rendered-code panel for Markdown and MDX, preserving the host's highlighted nodes. */
+declare function CodePanel({ languageLabel, preProps, framed, copyLabel, copiedLabel, children }: CodePanelProps): react.JSX.Element;
+
+export { ClipboardButton, type ClipboardButtonProps, CodePanel, type CodePanelProps };

package/dist/website/Content/CodePanel.js

@@ -0,0 +1,30 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RiCheckLine, RiFileCopyLine } from "@remixicon/react";
+import { useRef } from "react";
+import { Button } from "../../components/Button/Button.js";
+import { cn } from "../../lib/cn.js";
+import { useClipboardCopy } from "../../lib/useClipboardCopy.js";
+function ClipboardButton({ text, getText, copyLabel, copiedLabel, className }) {
+  const { copied, copy } = useClipboardCopy("ClipboardButton");
+  return /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: () => void copy(getText ?? text ?? ""), "aria-label": copied ? copiedLabel : copyLabel, className: cn("folio-clipboard-button", className), children: [
+    copied ? /* @__PURE__ */ jsx(RiCheckLine, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(RiFileCopyLine, { size: 14, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: copied ? copiedLabel : copyLabel })
+  ] });
+}
+function CodePanel({ languageLabel, preProps, framed = true, copyLabel, copiedLabel, children }) {
+  const pre = useRef(null);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-code-panel-head", "data-code-panel-head": true, children: [
+      /* @__PURE__ */ jsx("span", { children: languageLabel }),
+      /* @__PURE__ */ jsx(ClipboardButton, { getText: () => (pre.current?.innerText ?? pre.current?.textContent ?? "").replace(/\n$/, ""), copyLabel, copiedLabel })
+    ] }),
+    /* @__PURE__ */ jsx("pre", { ...preProps, ref: pre, className: cn("folio-code-panel-pre", preProps?.className), tabIndex: 0, children })
+  ] });
+  return framed ? /* @__PURE__ */ jsx("figure", { className: "folio-code-panel", "data-code-panel": true, children: content }) : content;
+}
+export {
+  ClipboardButton,
+  CodePanel
+};
+//# sourceMappingURL=CodePanel.js.map

package/dist/website/Content/CodePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Content/CodePanel.tsx"],"sourcesContent":["'use client'\n\nimport { RiCheckLine, RiFileCopyLine } from '@remixicon/react'\nimport { useRef, type HTMLAttributes, type ReactNode } from 'react'\nimport { Button } from '../../components/Button/Button'\nimport { cn } from '../../lib/cn'\nimport { useClipboardCopy } from '../../lib/useClipboardCopy'\n\nexport interface ClipboardButtonProps {\n  text?: string\n  /** Read the current rendered code at activation, when the host owns highlighting. */\n  getText?: () => string\n  copyLabel: string\n  copiedLabel: string\n  className?: string\n}\n\n/** Confirms copying only after the browser accepts the clipboard write. */\nexport function ClipboardButton({ text, getText, copyLabel, copiedLabel, className }: ClipboardButtonProps) {\n  const { copied, copy } = useClipboardCopy('ClipboardButton')\n\n  return (\n    <Button variant=\"ghost\" size=\"sm\" onClick={() => void copy(getText ?? text ?? '')} aria-label={copied ? copiedLabel : copyLabel} className={cn('folio-clipboard-button', className)}>\n      {copied ? <RiCheckLine size={14} aria-hidden=\"true\" /> : <RiFileCopyLine size={14} aria-hidden=\"true\" />}\n      <span aria-live=\"polite\">{copied ? copiedLabel : copyLabel}</span>\n    </Button>\n  )\n}\n\nexport interface CodePanelProps {\n  /** A display label, already mapped from the host highlighter's language id. */\n  languageLabel?: ReactNode\n  preProps?: HTMLAttributes<HTMLPreElement>\n  /** False when the host renderer has already supplied an enclosing figure. */\n  framed?: boolean\n  copyLabel: string\n  copiedLabel: string\n  children: ReactNode\n}\n\n/** A rendered-code panel for Markdown and MDX, preserving the host's highlighted nodes. */\nexport function CodePanel({ languageLabel, preProps, framed = true, copyLabel, copiedLabel, children }: CodePanelProps) {\n  const pre = useRef<HTMLPreElement>(null)\n  const content = <>\n    <div className=\"folio-code-panel-head\" data-code-panel-head>\n      <span>{languageLabel}</span>\n      <ClipboardButton getText={() => (pre.current?.innerText ?? pre.current?.textContent ?? '').replace(/\\n$/, '')} copyLabel={copyLabel} copiedLabel={copiedLabel} />\n    </div>\n    <pre {...preProps} ref={pre} className={cn('folio-code-panel-pre', preProps?.className)} tabIndex={0}>{children}</pre>\n  </>\n\n  return framed ? <figure className=\"folio-code-panel\" data-code-panel>{content}</figure> : content\n}\n"],"mappings":";AAsBI,SAqBc,UApBF,KADZ;AApBJ,SAAS,aAAa,sBAAsB;AAC5C,SAAS,cAAmD;AAC5D,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAY1B,SAAS,gBAAgB,EAAE,MAAM,SAAS,WAAW,aAAa,UAAU,GAAyB;AAC1G,QAAM,EAAE,QAAQ,KAAK,IAAI,iBAAiB,iBAAiB;AAE3D,SACE,qBAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,MAAM,KAAK,KAAK,WAAW,QAAQ,EAAE,GAAG,cAAY,SAAS,cAAc,WAAW,WAAW,GAAG,0BAA0B,SAAS,GAC/K;AAAA,aAAS,oBAAC,eAAY,MAAM,IAAI,eAAY,QAAO,IAAK,oBAAC,kBAAe,MAAM,IAAI,eAAY,QAAO;AAAA,IACtG,oBAAC,UAAK,aAAU,UAAU,mBAAS,cAAc,WAAU;AAAA,KAC7D;AAEJ;AAcO,SAAS,UAAU,EAAE,eAAe,UAAU,SAAS,MAAM,WAAW,aAAa,SAAS,GAAmB;AACtH,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,UAAU,iCACd;AAAA,yBAAC,SAAI,WAAU,yBAAwB,wBAAoB,MACzD;AAAA,0BAAC,UAAM,yBAAc;AAAA,MACrB,oBAAC,mBAAgB,SAAS,OAAO,IAAI,SAAS,aAAa,IAAI,SAAS,eAAe,IAAI,QAAQ,OAAO,EAAE,GAAG,WAAsB,aAA0B;AAAA,OACjK;AAAA,IACA,oBAAC,SAAK,GAAG,UAAU,KAAK,KAAK,WAAW,GAAG,wBAAwB,UAAU,SAAS,GAAG,UAAU,GAAI,UAAS;AAAA,KAClH;AAEA,SAAO,SAAS,oBAAC,YAAO,WAAU,oBAAmB,mBAAe,MAAE,mBAAQ,IAAY;AAC5F;","names":[]}

package/dist/website/Content/Content.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { TableHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+
+interface SequenceStep {
+    n: string;
+    label: string;
+    note?: string;
+    anchor?: boolean;
+    tags?: string[];
+}
+interface StepSequenceSpec {
+    steps: SequenceStep[];
+    caption?: string;
+    label?: string;
+}
+interface StepSequenceProps extends HTMLAttributes<HTMLElement> {
+    spec: StepSequenceSpec;
+}
+/** A process rail whose source order, counters and annotations belong to the host. */
+declare function StepSequence({ spec, className, ...rest }: StepSequenceProps): react.JSX.Element;
+type ContentTableProps = TableHTMLAttributes<HTMLTableElement>;
+/** Keeps a rendered article table intact inside a keyboard-scrollable region. */
+declare function ContentTable({ children, ...props }: ContentTableProps): react.JSX.Element;
+interface ExternalLinkMarkProps {
+    children?: ReactNode;
+}
+declare function ExternalLinkMark({ children }: ExternalLinkMarkProps): react.JSX.Element;
+
+export { ContentTable, type ContentTableProps, ExternalLinkMark, type ExternalLinkMarkProps, type SequenceStep, StepSequence, type StepSequenceProps, type StepSequenceSpec };

package/dist/website/Content/Content.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tag } from "../../components/Tag/Tag.js";
+import { cn } from "../../lib/cn.js";
+import { STEP_RAIL_LIST_CLASS, StepRailItem } from "../../lib/step-rail.js";
+function StepSequence({ spec, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("folio-step-sequence", className), role: "group", "aria-label": spec.label ?? spec.caption, ...rest, children: [
+    /* @__PURE__ */ jsx("div", { role: "list", className: STEP_RAIL_LIST_CLASS, children: spec.steps.map((step, index) => /* @__PURE__ */ jsx(
+      StepRailItem,
+      {
+        as: "div",
+        role: "listitem",
+        "data-anchor": step.anchor || void 0,
+        className: "folio-sequence-step",
+        filled: step.anchor,
+        last: index === spec.steps.length - 1,
+        marker: step.n,
+        markerClassName: "folio-sequence-counter",
+        title: step.label,
+        note: step.note ?? "\xA0",
+        children: step.tags && step.tags.length > 0 && /* @__PURE__ */ jsx("span", { className: "folio-sequence-tags", children: step.tags.map((tag) => /* @__PURE__ */ jsx(Tag, { children: tag }, tag)) })
+      },
+      step.n
+    )) }),
+    spec.caption && /* @__PURE__ */ jsx("div", { className: "folio-sequence-caption", children: spec.caption })
+  ] });
+}
+function ContentTable({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: "folio-content-table", tabIndex: 0, children: /* @__PURE__ */ jsx("table", { ...props, children }) });
+}
+function ExternalLinkMark({ children = "\u2197" }) {
+  return /* @__PURE__ */ jsx("span", { className: "folio-external-link-mark", "aria-hidden": "true", children });
+}
+export {
+  ContentTable,
+  ExternalLinkMark,
+  StepSequence
+};
+//# sourceMappingURL=Content.js.map

package/dist/website/Content/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/website/Content/Content.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, TableHTMLAttributes } from 'react'\nimport { Tag } from '../../components/Tag/Tag'\nimport { cn } from '../../lib/cn'\nimport { STEP_RAIL_LIST_CLASS, StepRailItem } from '../../lib/step-rail'\n\nexport interface SequenceStep {\n  n: string\n  label: string\n  note?: string\n  anchor?: boolean\n  tags?: string[]\n}\n\nexport interface StepSequenceSpec {\n  steps: SequenceStep[]\n  caption?: string\n  label?: string\n}\n\nexport interface StepSequenceProps extends HTMLAttributes<HTMLElement> {\n  spec: StepSequenceSpec\n}\n\n/** A process rail whose source order, counters and annotations belong to the host. */\nexport function StepSequence({ spec, className, ...rest }: StepSequenceProps) {\n  return (\n    <figure className={cn('folio-step-sequence', className)} role=\"group\" aria-label={spec.label ?? spec.caption} {...rest}>\n      {/* The core rail, carried as ARIA roles rather than <ol>/<li>: inside\n          article prose a real list takes the article's indent and item spacing.\n          The anchor is filled but not announced as `aria-current` \\u2014 hosts use it\n          for emphasis (a terminal step, a preflight), not for progress. */}\n      <div role=\"list\" className={STEP_RAIL_LIST_CLASS}>\n        {spec.steps.map((step, index) => (\n          <StepRailItem\n            as=\"div\"\n            role=\"listitem\"\n            key={step.n}\n            data-anchor={step.anchor || undefined}\n            className=\"folio-sequence-step\"\n            filled={step.anchor}\n            last={index === spec.steps.length - 1}\n            marker={step.n}\n            markerClassName=\"folio-sequence-counter\"\n            title={step.label}\n            note={step.note ?? '\\u00a0'}\n          >\n            {step.tags && step.tags.length > 0 && <span className=\"folio-sequence-tags\">{step.tags.map((tag) => <Tag key={tag}>{tag}</Tag>)}</span>}\n          </StepRailItem>\n        ))}\n      </div>\n      {spec.caption && <div className=\"folio-sequence-caption\">{spec.caption}</div>}\n    </figure>\n  )\n}\n\nexport type ContentTableProps = TableHTMLAttributes<HTMLTableElement>\n\n/** Keeps a rendered article table intact inside a keyboard-scrollable region. */\nexport function ContentTable({ children, ...props }: ContentTableProps) {\n  return <div className=\"folio-content-table\" tabIndex={0}><table {...props}>{children}</table></div>\n}\n\nexport interface ExternalLinkMarkProps {\n  children?: ReactNode\n}\n\nexport function ExternalLinkMark({ children = '↗' }: ExternalLinkMarkProps) {\n  return <span className=\"folio-external-link-mark\" aria-hidden=\"true\">{children}</span>\n}\n"],"mappings":"AA0BI,SAoB4G,KApB5G;AAzBJ,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,sBAAsB,oBAAoB;AAqB5C,SAAS,aAAa,EAAE,MAAM,WAAW,GAAG,KAAK,GAAsB;AAC5E,SACE,qBAAC,YAAO,WAAW,GAAG,uBAAuB,SAAS,GAAG,MAAK,SAAQ,cAAY,KAAK,SAAS,KAAK,SAAU,GAAG,MAKhH;AAAA,wBAAC,SAAI,MAAK,QAAO,WAAW,sBACzB,eAAK,MAAM,IAAI,CAAC,MAAM,UACrB;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,MAAK;AAAA,QAEL,eAAa,KAAK,UAAU;AAAA,QAC5B,WAAU;AAAA,QACV,QAAQ,KAAK;AAAA,QACb,MAAM,UAAU,KAAK,MAAM,SAAS;AAAA,QACpC,QAAQ,KAAK;AAAA,QACb,iBAAgB;AAAA,QAChB,OAAO,KAAK;AAAA,QACZ,MAAM,KAAK,QAAQ;AAAA,QAElB,eAAK,QAAQ,KAAK,KAAK,SAAS,KAAK,oBAAC,UAAK,WAAU,uBAAuB,eAAK,KAAK,IAAI,CAAC,QAAQ,oBAAC,OAAe,iBAAN,GAAU,CAAM,GAAE;AAAA;AAAA,MAV3H,KAAK;AAAA,IAWZ,CACD,GACH;AAAA,IACC,KAAK,WAAW,oBAAC,SAAI,WAAU,0BAA0B,eAAK,SAAQ;AAAA,KACzE;AAEJ;AAKO,SAAS,aAAa,EAAE,UAAU,GAAG,MAAM,GAAsB;AACtE,SAAO,oBAAC,SAAI,WAAU,uBAAsB,UAAU,GAAG,8BAAC,WAAO,GAAG,OAAQ,UAAS,GAAQ;AAC/F;AAMO,SAAS,iBAAiB,EAAE,WAAW,SAAI,GAA0B;AAC1E,SAAO,oBAAC,UAAK,WAAU,4BAA2B,eAAY,QAAQ,UAAS;AACjF;","names":[]}

package/dist/website/Conversation/Conversation.d.ts

@@ -0,0 +1,193 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, Ref, ReactElement, PointerEvent, ButtonHTMLAttributes, CSSProperties } from 'react';
+import { DescriptionListItem } from '../../components/DescriptionList/DescriptionList.js';
+
+interface ConversationLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    evidence: ReactNode;
+}
+/** A reading-width conversation with a separate, sticky evidence rail. */
+declare function ConversationLayout({ evidence, children, className, ...rest }: ConversationLayoutProps): react.JSX.Element;
+interface ConversationFactsProps extends HTMLAttributes<HTMLDListElement> {
+    items: DescriptionListItem[];
+}
+declare function ConversationFacts({ items, className, ...rest }: ConversationFactsProps): react.JSX.Element;
+interface ConversationSuggestion {
+    id: string;
+    label: string;
+    onSelect: () => void;
+    disabled?: boolean;
+    /** Compact docks may omit longer suggestions on small viewports. */
+    wideOnly?: boolean;
+}
+interface ConversationSuggestionsProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    items: ConversationSuggestion[];
+}
+declare function ConversationSuggestions({ label, items, className, ...rest }: ConversationSuggestionsProps): react.JSX.Element;
+interface ConversationControl {
+    id: string;
+    label: string;
+    kind?: 'expand' | 'collapse' | 'reset';
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface ConversationThreadProps extends HTMLAttributes<HTMLElement> {
+    label: string;
+    intro?: {
+        title: ReactNode;
+        description: ReactNode;
+        suggestionsLabel: string;
+        suggestions: ConversationSuggestion[];
+    };
+    summary?: ReactNode;
+    controls?: ConversationControl[];
+    composer: ReactNode;
+    proposal?: ReactNode;
+    hasTurns: boolean;
+}
+/** Host owns turns and folding; this composition owns their hierarchy and controls. */
+declare function ConversationThread({ label, intro, summary, controls, composer, proposal, hasTurns, children, className, ...rest }: ConversationThreadProps): react.JSX.Element;
+interface ConversationLogProps extends HTMLAttributes<HTMLDivElement> {
+    compact?: boolean;
+}
+declare function ConversationLog({ compact, className, ...rest }: ConversationLogProps): react.JSX.Element;
+interface QuestionComposerProps extends Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+    id: string;
+    label: string;
+    hideLabel?: boolean;
+    value: string;
+    onValueChange: (value: string) => void;
+    onSubmit: () => void;
+    inputRef?: Ref<HTMLInputElement>;
+    placeholder?: string;
+    maxLength?: number;
+    disabled?: boolean;
+    submitDisabled?: boolean;
+    pending?: boolean;
+    submitLabel: string;
+    hint?: ReactNode;
+    hideHint?: boolean;
+    counter?: ReactNode;
+    actions?: ReactNode;
+    compact?: boolean;
+}
+/** A controlled, labelled composer. Request limits and sending remain host concerns. */
+declare function QuestionComposer({ id, label, hideLabel, value, onValueChange, onSubmit, inputRef, placeholder, maxLength, disabled, submitDisabled, pending, submitLabel, hint, hideHint, counter, actions, compact, className, ...rest }: QuestionComposerProps): react.JSX.Element;
+interface ConversationTurnProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title: ReactNode;
+    metadata?: ReactNode;
+    expanded: boolean;
+    onToggle: () => void;
+    bodyId: string;
+    preview?: ReactNode;
+}
+declare function ConversationTurn({ title, metadata, expanded, onToggle, bodyId, preview, children, className, ...rest }: ConversationTurnProps): react.JSX.Element;
+interface ConversationQuoteProps extends HTMLAttributes<HTMLElement> {
+    label: string;
+    compact?: boolean;
+}
+declare function ConversationQuote({ label, compact, children, className, ...rest }: ConversationQuoteProps): react.JSX.Element;
+interface ConversationAnswerProps extends HTMLAttributes<HTMLDivElement> {
+    question: ReactNode;
+    questionLabel: string;
+    quote?: ReactNode;
+}
+declare function ConversationAnswer({ question, questionLabel, quote, children, className, ...rest }: ConversationAnswerProps): react.JSX.Element;
+/** Trusted React nodes from the host's sanitized answer parser, never raw model HTML. */
+declare function ConversationProse({ className, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+/** Model-generated headings are prose labels, so they do not alter the page outline. */
+declare function ConversationAnswerHeading({ lead, className, ...rest }: HTMLAttributes<HTMLParagraphElement> & {
+    lead?: boolean;
+}): react.JSX.Element;
+declare function StreamingCaret(): react.JSX.Element;
+interface ConversationSource {
+    id: string;
+    index: string;
+    title: ReactNode;
+    detail?: ReactNode;
+    kind: ReactNode;
+    highlighted?: boolean;
+    link: ReactElement<{
+        children?: ReactNode;
+    }>;
+}
+interface ConversationSourcesProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    count: ReactNode;
+    items: ConversationSource[];
+}
+declare function ConversationSources({ label, count, items, className, ...rest }: ConversationSourcesProps): react.JSX.Element | null;
+interface ActionProposalProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    destination: ReactNode;
+    detail?: ReactNode;
+    approveLabel: string;
+    dismissLabel: string;
+    onApprove: () => void;
+    onDismiss: () => void;
+    approvalAttributes?: Record<`data-${string}`, string>;
+}
+declare function ActionProposal({ label, destination, detail, approveLabel, dismissLabel, onApprove, onDismiss, approvalAttributes, className, ...rest }: ActionProposalProps): react.JSX.Element;
+interface ConversationLauncherProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    visible: boolean;
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+declare function ConversationLauncher({ visible, buttonRef, className, children, ...rest }: ConversationLauncherProps): react.JSX.Element;
+type ConversationDockCorner = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+interface ConversationDockProps extends HTMLAttributes<HTMLElement> {
+    label: string;
+    open: boolean;
+    card: boolean;
+    corner: ConversationDockCorner;
+    dragging?: boolean;
+    moving?: boolean;
+    panelRef?: Ref<HTMLElement>;
+    logRef?: Ref<HTMLDivElement>;
+    roomLink: ReactElement;
+    closeLabel: string;
+    onClose: () => void;
+    onHeaderPointerDown?: (event: PointerEvent<HTMLElement>) => void;
+    handles?: ReactNode;
+    proposal?: ReactNode;
+    notice?: ReactNode;
+    composer: ReactNode;
+}
+/** The host supplies placement, dismissal and stream state; the dock draws them. */
+declare function ConversationDock({ label, open, card, corner, dragging, moving, panelRef, logRef, roomLink, closeLabel, onClose, onHeaderPointerDown, handles, proposal, notice, composer, children, className, ...rest }: ConversationDockProps): react.JSX.Element;
+interface ConversationDockWelcomeProps extends HTMLAttributes<HTMLDivElement> {
+    lead: ReactNode;
+    suggestionsLabel: string;
+    suggestions: ConversationSuggestion[];
+}
+declare function ConversationDockWelcome({ lead, suggestionsLabel, suggestions, className, ...rest }: ConversationDockWelcomeProps): react.JSX.Element;
+interface ConversationResizeHandleProps {
+    axis: 'size-vertical' | 'size-horizontal';
+    side: 'top' | 'bottom' | 'left' | 'right';
+    label: string;
+    dragging: boolean;
+    onStart: (axis: 'size-vertical' | 'size-horizontal', event: PointerEvent<HTMLElement>) => void;
+    onNudge: (axis: 'size-vertical' | 'size-horizontal', delta: number) => void;
+}
+/** Keyboard equivalents for the host's pointer resize controller. */
+declare function ConversationResizeHandle({ axis, side, label, dragging, onStart, onNudge }: ConversationResizeHandleProps): react.JSX.Element;
+interface SelectionToolbarAction {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface SelectionToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+    actions: SelectionToolbarAction[];
+    floating: boolean;
+    toolbarRef?: Ref<HTMLDivElement>;
+    style?: CSSProperties;
+}
+/** Selection actions with a real toolbar's single tab stop and arrow navigation. */
+declare function SelectionToolbar({ label, actions, floating, toolbarRef, className, ...rest }: SelectionToolbarProps): react.JSX.Element;
+/** A router link keeps its own destination and behavior inside a standard action. */
+declare function ConversationRoomLink({ children }: {
+    children: ReactElement;
+}): react.JSX.Element;
+
+export { ActionProposal, type ActionProposalProps, ConversationAnswer, ConversationAnswerHeading, type ConversationAnswerProps, type ConversationControl, ConversationDock, type ConversationDockCorner, type ConversationDockProps, ConversationDockWelcome, type ConversationDockWelcomeProps, ConversationFacts, type ConversationFactsProps, ConversationLauncher, type ConversationLauncherProps, ConversationLayout, type ConversationLayoutProps, ConversationLog, type ConversationLogProps, ConversationProse, ConversationQuote, type ConversationQuoteProps, ConversationResizeHandle, type ConversationResizeHandleProps, ConversationRoomLink, type ConversationSource, ConversationSources, type ConversationSourcesProps, type ConversationSuggestion, ConversationSuggestions, type ConversationSuggestionsProps, ConversationThread, type ConversationThreadProps, ConversationTurn, type ConversationTurnProps, QuestionComposer, type QuestionComposerProps, SelectionToolbar, type SelectionToolbarAction, type SelectionToolbarProps, StreamingCaret };

package/dist/website/Conversation/Conversation.js

@@ -0,0 +1,252 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { RiArrowRightLine, RiArrowRightUpLine, RiArrowDownSLine, RiArrowRightSLine, RiRestartLine, RiSparklingLine, RiCloseLine, RiChat3Line } from "@remixicon/react";
+import { cn } from "../../lib/cn.js";
+import { replaceSlotContent, resolveSlotElement } from "../../lib/slot-content.js";
+import { Article } from "../../components/Article/Article.js";
+import { Button } from "../../components/Button/Button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/Collapsible/Collapsible.js";
+import { DescriptionList } from "../../components/DescriptionList/DescriptionList.js";
+import { Field } from "../../components/Field/Field.js";
+import { Heading } from "../../components/Heading/Heading.js";
+import { Input } from "../../components/Input/Input.js";
+import { Text } from "../../components/Text/Text.js";
+function ConversationLayout({ evidence, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-conversation-layout", className), ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: "folio-conversation-layout__evidence", children: evidence })
+  ] });
+}
+function ConversationFacts({ items, className, ...rest }) {
+  return /* @__PURE__ */ jsx(DescriptionList, { items, layout: "stacked", divided: false, className: cn("folio-conversation-facts", className), ...rest });
+}
+function ConversationSuggestions({ label, items, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-conversation-suggestions", className), ...rest, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: label }),
+    /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsx("li", { "data-wide-only": item.wideOnly || void 0, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "folio-conversation-suggestions__action", disabled: item.disabled, onClick: item.onSelect, children: [
+      /* @__PURE__ */ jsx("span", { children: item.label }),
+      /* @__PURE__ */ jsx(RiArrowRightLine, { size: 16, "aria-hidden": true })
+    ] }) }, item.id)) })
+  ] });
+}
+function ConversationThread({ label, intro, summary, controls = [], composer, proposal, hasTurns, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("section", { "aria-label": label, className: cn("folio-conversation-thread", className), ...rest, children: [
+    intro && /* @__PURE__ */ jsxs("div", { className: "folio-conversation-thread__intro", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, children: intro.title }),
+      /* @__PURE__ */ jsx(Text, { className: "mt-5", children: intro.description }),
+      /* @__PURE__ */ jsx(ConversationSuggestions, { label: intro.suggestionsLabel, items: intro.suggestions })
+    ] }),
+    hasTurns && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "folio-conversation-thread__controls", children: [
+        /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: summary }),
+        /* @__PURE__ */ jsx("div", { children: controls.map((control) => {
+          const Icon = control.kind === "reset" ? RiRestartLine : control.kind === "expand" ? RiArrowDownSLine : RiArrowRightSLine;
+          return /* @__PURE__ */ jsxs(Button, { variant: "ghost", disabled: control.disabled, onClick: control.onSelect, children: [
+            /* @__PURE__ */ jsx(Icon, { size: 14, "aria-hidden": true }),
+            control.label
+          ] }, control.id);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(ConversationLog, { children })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-conversation-thread__composer", "data-sticky": hasTurns || void 0, children: [
+      proposal && /* @__PURE__ */ jsx("div", { className: "folio-conversation-thread__proposal", children: proposal }),
+      composer
+    ] })
+  ] });
+}
+function ConversationLog({ compact, className, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { role: "log", "aria-live": "polite", className: cn("folio-conversation-log", className), "data-compact": compact || void 0, ...rest });
+}
+function QuestionComposer({ id, label, hideLabel, value, onValueChange, onSubmit, inputRef, placeholder, maxLength, disabled, submitDisabled, pending, submitLabel, hint, hideHint, counter, actions, compact, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("form", { autoComplete: "off", className: cn("folio-question-composer", className), "data-compact": compact || void 0, onSubmit: (event) => {
+    event.preventDefault();
+    onSubmit();
+  }, ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-question-composer__row", children: [
+      /* @__PURE__ */ jsx(Field, { htmlFor: id, label: /* @__PURE__ */ jsx("span", { className: hideLabel ? "sr-only" : void 0, children: label }), className: "folio-question-composer__field", children: /* @__PURE__ */ jsx(Input, { ref: inputRef, id, name: "question", value, onChange: (event) => onValueChange(event.target.value), placeholder, maxLength, disabled }) }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", loading: pending, disabled: submitDisabled, keycap: compact ? void 0 : "\u21B5", children: submitLabel })
+    ] }),
+    (hint || counter || actions) && /* @__PURE__ */ jsxs("div", { className: "folio-question-composer__footer", children: [
+      hint && /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", className: hideHint ? "sr-only" : void 0, children: hint }),
+      counter != null && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", className: "folio-question-composer__counter", children: counter }),
+      actions
+    ] })
+  ] });
+}
+function ConversationTurn({ title, metadata, expanded, onToggle, bodyId, preview, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("article", { className: cn("folio-conversation-turn", className), ...rest, children: [
+    metadata,
+    /* @__PURE__ */ jsxs(Collapsible, { open: expanded, onOpenChange: onToggle, children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: "sub", children: /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "folio-conversation-turn__toggle", "aria-controls": bodyId, children: [
+        /* @__PURE__ */ jsx("span", { children: title }),
+        /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, "aria-hidden": true })
+      ] }) }) }),
+      !expanded && /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", className: "folio-conversation-turn__preview", children: preview }),
+      /* @__PURE__ */ jsx(CollapsibleContent, { id: bodyId, children: /* @__PURE__ */ jsx("div", { className: "folio-conversation-turn__body", children }) })
+    ] })
+  ] });
+}
+function ConversationQuote({ label, compact, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("figure", { className: cn("folio-conversation-quote", className), "data-compact": compact || void 0, ...rest, children: [
+    /* @__PURE__ */ jsx(Text, { as: "figcaption", size: "xs", tone: "muted", children: label }),
+    /* @__PURE__ */ jsx("blockquote", { children })
+  ] });
+}
+function ConversationAnswer({ question, questionLabel, quote, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-conversation-answer", className), ...rest, children: [
+    quote,
+    /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: questionLabel }),
+    /* @__PURE__ */ jsx(Text, { tone: "strong", size: "lead", className: "folio-conversation-answer__question", children: question }),
+    children
+  ] });
+}
+function ConversationProse({ className, ...rest }) {
+  return /* @__PURE__ */ jsx(Article, { as: "div", className: cn("folio-conversation-prose", className), ...rest });
+}
+function ConversationAnswerHeading({ lead, className, ...rest }) {
+  return /* @__PURE__ */ jsx("p", { className: cn("folio-conversation-prose__heading", className), "data-lead": lead || void 0, ...rest });
+}
+function StreamingCaret() {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "folio-conversation-caret" });
+}
+function ConversationSources({ label, count, items, className, ...rest }) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-conversation-sources", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "folio-conversation-sources__header", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: label }),
+      /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: count })
+    ] }),
+    /* @__PURE__ */ jsx("ul", { children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", className: "folio-conversation-sources__link", "data-highlighted": item.highlighted || void 0, children: replaceSlotContent(item.link, /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", "aria-hidden": true, children: item.index }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx(Text, { as: "span", size: "sm", tone: "strong", children: item.title }),
+        item.detail && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: item.detail })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", children: item.kind })
+    ] })) }) }, item.id)) })
+  ] });
+}
+function ActionProposal({ label, destination, detail, approveLabel, dismissLabel, onApprove, onDismiss, approvalAttributes, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": label, className: cn("folio-action-proposal", className), ...rest, children: [
+    /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "folio-action-proposal__actions", children: [
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "folio-action-proposal__action", "aria-label": approveLabel, onClick: onApprove, ...approvalAttributes, children: [
+        /* @__PURE__ */ jsx("span", { children: destination }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          detail && /* @__PURE__ */ jsx(Text, { as: "span", size: "xs", tone: "muted", className: "folio-action-proposal__detail", children: detail }),
+          /* @__PURE__ */ jsx(RiArrowRightLine, { size: 16, "aria-hidden": true })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "folio-action-proposal__action", onClick: onDismiss, children: [
+        dismissLabel,
+        /* @__PURE__ */ jsx(RiCloseLine, { size: 16, "aria-hidden": true })
+      ] })
+    ] })
+  ] });
+}
+function ConversationLauncher({ visible, buttonRef, className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", className: cn("folio-conversation-launcher", className), children: /* @__PURE__ */ jsxs("button", { ref: buttonRef, inert: !visible, "data-revealed": visible, ...rest, children: [
+    /* @__PURE__ */ jsx(RiChat3Line, { size: 18, "aria-hidden": true }),
+    children
+  ] }) });
+}
+function ConversationDock({ label, open, card, corner, dragging, moving, panelRef, logRef, roomLink, closeLabel, onClose, onHeaderPointerDown, handles, proposal, notice, composer, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    open && !card && /* @__PURE__ */ jsx("div", { className: "folio-conversation-dock__scrim", "aria-hidden": true, onClick: onClose }),
+    /* @__PURE__ */ jsxs("aside", { ref: panelRef, "aria-label": label, inert: !open, "data-open": open, "data-card": card, "data-corner": corner, "data-dragging": dragging || void 0, "data-moving": moving || void 0, className: cn("folio-conversation-dock", className), ...rest, children: [
+      handles,
+      /* @__PURE__ */ jsxs("header", { onPointerDown: onHeaderPointerDown, className: "folio-conversation-dock__header", children: [
+        /* @__PURE__ */ jsxs(Text, { as: "span", size: "xs", tone: "muted", children: [
+          /* @__PURE__ */ jsx(RiSparklingLine, { size: 14, "aria-hidden": true }),
+          label
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", children: roomLink }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", iconOnly: true, "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx(RiArrowDownSLine, { size: 16, "aria-hidden": true }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { ref: logRef, className: "folio-conversation-dock__log", children }),
+      proposal && /* @__PURE__ */ jsx("div", { className: "folio-conversation-dock__proposal", children: proposal }),
+      notice && /* @__PURE__ */ jsx(Text, { role: "status", size: "xs", className: "folio-conversation-dock__notice", children: notice }),
+      /* @__PURE__ */ jsx("div", { className: "folio-conversation-dock__composer", children: composer })
+    ] })
+  ] });
+}
+function ConversationDockWelcome({ lead, suggestionsLabel, suggestions, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("folio-conversation-dock-welcome", className), ...rest, children: [
+    /* @__PURE__ */ jsx(Text, { size: "lead", tone: "strong", children: lead }),
+    /* @__PURE__ */ jsx(ConversationSuggestions, { label: suggestionsLabel, items: suggestions })
+  ] });
+}
+function ConversationResizeHandle({ axis, side, label, dragging, onStart, onNudge }) {
+  const growKey = { top: "ArrowUp", bottom: "ArrowDown", left: "ArrowLeft", right: "ArrowRight" }[side];
+  const shrinkKey = { top: "ArrowDown", bottom: "ArrowUp", left: "ArrowRight", right: "ArrowLeft" }[side];
+  return /* @__PURE__ */ jsx("div", { role: "separator", "aria-orientation": axis === "size-vertical" ? "horizontal" : "vertical", "aria-label": label, tabIndex: 0, "data-side": side, "data-dragging": dragging || void 0, className: "folio-conversation-resize", onPointerDown: (event) => onStart(axis, event), onKeyDown: (event) => {
+    if (event.key === growKey) onNudge(axis, 32);
+    else if (event.key === shrinkKey) onNudge(axis, -32);
+    else return;
+    event.preventDefault();
+  } });
+}
+function SelectionToolbar({ label, actions, floating, toolbarRef, className, ...rest }) {
+  const [activeId, setActiveId] = useState(null);
+  const controls = useRef([]);
+  const enabled = actions.map((action, index) => action.disabled ? -1 : index).filter((index) => index !== -1);
+  const selected = actions.findIndex((action) => action.id === activeId && !action.disabled);
+  const activeIndex = selected >= 0 ? selected : enabled[0] ?? -1;
+  return /* @__PURE__ */ jsx("div", { ref: toolbarRef, role: "toolbar", "aria-label": label, "data-folio-animated": true, "data-floating": floating, className: cn("folio-selection-toolbar", className), ...rest, onKeyDown: (event) => {
+    rest.onKeyDown?.(event);
+    if (event.defaultPrevented || enabled.length === 0) return;
+    const current = controls.current.findIndex((control) => control === document.activeElement);
+    const position = enabled.indexOf(current);
+    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+    const forward = rtl ? "ArrowLeft" : "ArrowRight";
+    const backward = rtl ? "ArrowRight" : "ArrowLeft";
+    let next;
+    if (event.key === "Home") next = enabled[0];
+    else if (event.key === "End") next = enabled[enabled.length - 1];
+    else if (event.key === forward) next = enabled[(position + 1) % enabled.length];
+    else if (event.key === backward) next = enabled[(position - 1 + enabled.length) % enabled.length];
+    else return;
+    if (next === void 0) return;
+    const nextAction = actions[next];
+    if (!nextAction) return;
+    event.preventDefault();
+    setActiveId(nextAction.id);
+    controls.current[next]?.focus();
+  }, children: actions.map((action, index) => /* @__PURE__ */ jsx(Button, { asChild: true, variant: "secondary", children: /* @__PURE__ */ jsx("button", { ref: (node) => {
+    controls.current[index] = node;
+  }, type: "button", tabIndex: index === activeIndex ? 0 : -1, disabled: action.disabled, onFocus: () => setActiveId(action.id), onClick: action.onSelect, children: action.label }) }, action.id)) });
+}
+function ConversationRoomLink({ children }) {
+  const link = resolveSlotElement(children);
+  return /* @__PURE__ */ jsx(Button, { asChild: true, variant: "ghost", className: "mt-5", children: replaceSlotContent(link, /* @__PURE__ */ jsxs(Fragment, { children: [
+    link.props.children,
+    /* @__PURE__ */ jsx(RiArrowRightUpLine, { size: 14, "aria-hidden": true })
+  ] })) });
+}
+export {
+  ActionProposal,
+  ConversationAnswer,
+  ConversationAnswerHeading,
+  ConversationDock,
+  ConversationDockWelcome,
+  ConversationFacts,
+  ConversationLauncher,
+  ConversationLayout,
+  ConversationLog,
+  ConversationProse,
+  ConversationQuote,
+  ConversationResizeHandle,
+  ConversationRoomLink,
+  ConversationSources,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTurn,
+  QuestionComposer,
+  SelectionToolbar,
+  StreamingCaret
+};
+//# sourceMappingURL=Conversation.js.map