@danxbot/ui 3.9.0 → 3.10.0

package/dist/types/components/InlineEdit.d.ts

@@ -0,0 +1,141 @@
+import { type Ref } from "react";
+import { useRender } from "@base-ui/react/use-render";
+/**
+ * The caller's refusal of a value, with the reason that will be shown.
+ *
+ * ONE OBJECT RATHER THAN TWO LOOSE RETURNS — `false` plus a separate message
+ * prop, say — because those two can disagree: a refusal with no sentence beside
+ * it is the mute rejection this whole component exists to prevent, and a
+ * sentence with nothing refusing it is a lie. This library already settled that
+ * shape three times over: `StatusOption.refusal`, `KanbanLane.refusal` and
+ * `SettingRow.readOnly: { reason }`.
+ *
+ * Written for the person who typed it — "a demand with this name already
+ * exists", not "invalid". It is the only thing they will see.
+ */
+export interface InlineEditRefusal {
+    refusal: string;
+}
+/**
+ * What `onCommit` may report. Returning nothing accepts the value.
+ *
+ * A REFUSAL IS NOT AN EXCEPTION, and keeping the two apart is the point: a
+ * refusal is the caller's rule saying no (shown as its own sentence, the field
+ * stays open for a correction), while a thrown error or a rejected promise is
+ * the save FAILING (shown as `failureMessage`, the same text kept, retryable).
+ * Folding them together would put a stack trace's message in front of an
+ * end user, or bury a real outage as a validation note.
+ */
+export type InlineEditOutcome = void | InlineEditRefusal;
+export interface InlineEditProps {
+    /**
+     * The committed value. Controlled — this component never holds the truth,
+     * it only holds the draft while somebody is typing one.
+     */
+    value: string;
+    /**
+     * Commit a new value. Called ONLY when the text actually differs from
+     * `value`; see the module comment.
+     *
+     * May return a promise, in which case the field stays open and pending until
+     * it settles. Resolve/return `{ refusal }` to reject the value with a reason;
+     * throw or reject to report that the save itself failed.
+     *
+     * A SERVER'S 422 IS A REFUSAL, NOT A FAILURE — catch it and resolve to
+     * `{ refusal: <what the server said> }`. A duplicate name is the caller's
+     * rule being applied by the only party who can check it, and it reads to the
+     * person exactly like the local one; a rejected promise means the write did
+     * not happen for a reason nobody can act on by retyping.
+     */
+    onCommit: (value: string) => InlineEditOutcome | Promise<InlineEditOutcome>;
+    /**
+     * The refusals that are knowable WITHOUT a request. Return the reason, or
+     * `null` to accept.
+     *
+     * Runs after the unchanged check and before `onCommit`, so a value that fails
+     * here never reaches the network — which is the whole point of it being
+     * separate: emptiness and length are decidable locally, uniqueness is not,
+     * and a client that guesses at the second one drifts from the server.
+     *
+     * A BARE STRING RATHER THAN `{ refusal }`, unlike `onCommit`'s return, and
+     * the difference is not an inconsistency: `onCommit` has to say WHICH of
+     * accepted-or-refused happened, so the reason needs a name to sit under.
+     * Everything this function returns is the reason, which is the same position
+     * `StatusOption.refusal` and `KanbanLane.refusal` are already a bare string
+     * in. An empty string throws, for the reason those do.
+     *
+     * It is shown through exactly the same channel a refusal from `onCommit` is —
+     * the person is not told where in the stack their name was turned down.
+     */
+    validate?: (value: string) => string | null;
+    /**
+     * The accessible name, in BOTH modes. REQUIRED — see the module comment on
+     * why a control that renames itself mid-interaction is the defect this
+     * prevents.
+     *
+     * Name the FIELD ("Demand title"), not the action ("Edit") and not the
+     * current value: it is read in a list of controls where the value is
+     * announced separately.
+     */
+    label: string;
+    /**
+     * What the display shows in place of a blank value, and the field's
+     * placeholder.
+     *
+     * A WORD, not an em-dash, and not nothing: a display whose entire content is
+     * punctuation has no name worth announcing, and one whose content is empty
+     * collapses to a few pixels — a control that cannot be hit. See
+     * `scripts/probe-card-header.mjs` for the zero-width family this belongs to.
+     */
+    placeholder?: string;
+    /** Box ramp. Matches `Input`'s names; see the recipe on why not its padding. */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Edit as a `<textarea>` that grows with its content.
+     *
+     * THE COMMIT KEY MOVES, because Enter has to insert a newline. Enter is a
+     * newline, Cmd/Ctrl+Enter commits, Escape still cancels and blur still
+     * commits. Nothing else changes.
+     */
+    multiline?: boolean;
+    /**
+     * This value cannot be edited at all, AND WHY — a different fact from a
+     * value being refused, and it belongs on a different prop. `{ reason }`
+     * matches `SettingRow.readOnly`; there is no boolean form, because a control
+     * that refuses in silence is indistinguishable from one that is broken.
+     *
+     * The display stays focusable and `aria-disabled`, carrying the reason as
+     * its description and in a tooltip, so it can be asked.
+     */
+    readOnly?: {
+        reason: string;
+    };
+    /**
+     * What is shown when the commit REJECTS. Deliberately not the error's own
+     * message: that text is written for a log, and this one is read by whoever
+     * just typed a name.
+     *
+     * @default "Could not save. Your text is still here — press Enter to try again."
+     */
+    failureMessage?: string;
+    /**
+     * The rejected error, handed on so it can be logged or reported. Without
+     * this the exception is swallowed entirely, which is the silent failure this
+     * library treats as a defect rather than as tidiness.
+     */
+    onError?: (error: unknown) => void;
+    /**
+     * Render the DISPLAY as a different element. See the module comment: the
+     * rendered element is given `role="button"`, which replaces its own role.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Applied to BOTH forms, and there is only one of these on purpose. Anything
+     * that changes one box's geometry has to change the other's, or the control
+     * jumps on click — a second `fieldClassName` would make that jump one prop
+     * away at all times.
+     */
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+export declare function InlineEdit({ value, onCommit, validate, label, placeholder, size, multiline, readOnly, failureMessage, onError, render, className, ref, }: InlineEditProps): import("react").JSX.Element;

package/dist/types/components/Table.d.ts

@@ -54,8 +54,16 @@ export interface DataTableProps<TData> {
      * styling the table picked — `cn` is tailwind-merge, and the last conflicting
      * utility wins. That is deliberate: a tint that loses to the zebra fill is a
      * tint nobody sees. It also means a background handed over here REPLACES the
-     * row's hover fill, so pass the hover with it (`bg-warning-subtle
-     * hover:bg-warning-subtle-hover`) if the row should still respond.
+     * row's hover fill, so pass the hover with it (`bg-danger-subtle
+     * hover:bg-danger-subtle-hover`) if the row should still respond.
+     *
+     * THAT EXAMPLE USED TO NAME `warning`, WHICH HAS NO HOVER STEP. `-subtle`
+     * exists for every semantic family; `-subtle-hover` exists for `accent` and
+     * `danger` only. A consumer following the old wording got a hover class that
+     * compiled to nothing — no rule, no fill, no error anywhere, which is the
+     * same silent-nothing failure the theme bridge in `postbuild-css.mjs` exists
+     * to prevent one level up. Pick a family that has the step, or supply the
+     * hover colour yourself. `token-parity.test.ts` now sweeps this docblock.
      *
      * `index` is the row's position in `data`, not on the current page — the same
      * number `getRowId` receives, so the two never disagree about which row is

package/dist/types/components/Toggle.d.ts

@@ -64,10 +64,31 @@ export declare function Toolbar({ className, children, ref, ...props }: ToolbarP
 export declare function ToolbarSeparator({ className }: {
     className?: string;
 }): import("react").JSX.Element;
-export interface ToolbarButtonProps extends Omit<BaseToolbar.Button.Props, "className" | "nativeButton">, Pick<ButtonProps, "variant" | "size" | "iconOnly"> {
+type ToolbarButtonBase = Omit<BaseToolbar.Button.Props, "className" | "nativeButton" | "render"> & {
     className?: string;
     ref?: Ref<HTMLButtonElement>;
-}
+};
+/**
+ * TWO FORMS, AND THE TYPE REFUSES TO MIX THEM.
+ *
+ * Either this renders its own `<button>` and wears `buttonVariants` — in which
+ * case `variant` / `size` / `iconOnly` choose which row of that table — or it
+ * renders somebody else's control through `render`, in which case that control
+ * already carries a variant table and this one must not add a second. The two
+ * are mutually exclusive rather than merely discouraged, because a `render`
+ * plus a `size` is not a preference somebody expressed: it is two size classes
+ * in one attribute with no rule for which wins. See `ToolbarButton`'s own doc
+ * for the measurement.
+ */
+export type ToolbarButtonProps = (ToolbarButtonBase & Pick<ButtonProps, "variant" | "size" | "iconOnly"> & {
+    /** The styled form owns the element, so there is nothing to render into. */
+    render?: undefined;
+}) | (ToolbarButtonBase & {
+    render: NonNullable<BaseToolbar.Button.Props["render"]>;
+    variant?: never;
+    size?: never;
+    iconOnly?: never;
+});
 /**
  * A button that is part of the toolbar's rotation.
  *
@@ -85,8 +106,23 @@ export interface ToolbarButtonProps extends Omit<BaseToolbar.Button.Props, "clas
  * ANYTHING ALREADY BUILT ON `Button` GOES IN THROUGH `render`, which is what
  * keeps this from becoming a second button component:
  * `<ToolbarButton render={<IconButton icon={…} label="Bold" />} />` registers
- * exactly the same, keeps the tooltip and the `disabledReason`, and never
- * duplicates a variant table.
+ * exactly the same and keeps the tooltip and the `disabledReason`.
+ *
+ * THAT PATH APPLIES NO VARIANT TABLE AT ALL, and the type enforces it —
+ * `variant`, `size` and `iconOnly` are not accepted beside `render`. Base UI's
+ * render slot CONCATENATES `className`; it does not run `cn`. So a recipe
+ * applied here landed in the same attribute as the rendered component's own,
+ * and which one won was decided by Tailwind's emission order rather than by
+ * either component. It measured fine while the two happened to agree — a
+ * default `render={<IconButton/>}` came out 36×36, identical to a standalone
+ * one, while carrying both `aspect-square` and `px-3.5` — and broke visibly the
+ * moment they disagreed: `<ToolbarButton size="lg" render={<IconButton
+ * size="sm" …/>} />` carried `h-control-lg` AND `h-control-sm` and rendered
+ * 48 × 36 with 24px of padding, a squashed oval neither component asked for.
+ *
+ * Unrepresentable beats documented, and it is free to do NOW: nothing has
+ * adopted the pair yet, so narrowing the type costs nothing that removing the
+ * props after adoption would have cost.
  */
 export declare function ToolbarButton({ variant, size, iconOnly, className, children, ref, ...props }: ToolbarButtonProps): import("react").JSX.Element;
 export interface ToolbarInputProps extends Omit<InputProps, "ref">, Pick<BaseToolbar.Input.Props, "focusableWhenDisabled"> {

package/dist/types/components/chat/Attachment.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode, type Ref } from "react";
 import type { ChatFile } from "./types";
+import type { IconName } from "../Icon";
 export type AttachmentLayout = "tile" | "row";
 export interface AttachmentProps {
     file: ChatFile;
@@ -24,6 +25,13 @@ export interface AttachmentProps {
      * It goes inside the cluster, above the full-card preview trigger — rendered
      * anywhere else it would sit UNDER that trigger and never receive a click.
      * Keep it to a control or two: this is a corner of a tile, not a menu bar.
+     *
+     * FILL IT WITH `AttachmentAction`, which is exported for exactly this. The
+     * built-in download and remove are that component, so anything else lands in
+     * the cluster at a different size and, on a tile, without the hover fade the
+     * two beside it have. Any node is accepted — the slot has no opinion — but
+     * "matches the built-ins" is a real requirement and there is no way to hit it
+     * by hand. Pass `tinted` when `layout` is `"tile"`.
      */
     action?: ReactNode;
     onRemove?: (file: ChatFile) => void;
@@ -36,6 +44,45 @@ export interface AttachmentProps {
     ref?: Ref<HTMLDivElement>;
 }
 export declare function Attachment({ file, layout, meta, action, onRemove, onPreview, onDownload, selected, disabled, className, ref, }: AttachmentProps): import("react").JSX.Element;
+export interface AttachmentActionProps {
+    icon: IconName;
+    /** The accessible name AND the tooltip. Include the file: "Extract report.pdf". */
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    /**
+     * On a tile the buttons sit over imagery, so they need their own ground —
+     * and they FADE IN on hover rather than sitting permanently over the picture.
+     *
+     * Pass `layout === "tile"`. Getting it wrong is not a style preference: a
+     * tinted control on a row is dark-on-dark, and an untinted one on a tile is
+     * a grey glyph over an arbitrary photograph.
+     */
+    tinted?: boolean;
+}
+/**
+ * One control in an attachment's action cluster.
+ *
+ * THE CONTROL `Attachment.action` IS MEANT TO BE FILLED WITH, and until now it
+ * was module-private — so the slot existed with nothing in the library that
+ * fits it. A consumer's own `IconButton` is a different size and a different
+ * resting state, and on a tile it does not fade in on `group-hover/attachment`
+ * with the built-in download and remove beside it, so the one control the
+ * consumer added was the one that looked wrong.
+ *
+ * It is deliberately NOT `IconButton`: `size-6` rather than a control height,
+ * no ripple, no `disabledReason`, and a tinted variant that only means anything
+ * inside `.group/attachment`. That is a corner-of-a-tile control, not a general
+ * one, and generalising it would give the cluster two different buttons again.
+ *
+ *   <Attachment
+ *     file={file}
+ *     layout="tile"
+ *     action={<AttachmentAction icon="sparkles" label={`Extract ${file.name}`}
+ *                               onClick={() => extract(file)} tinted />}
+ *   />
+ */
+export declare function AttachmentAction({ icon, label, onClick, disabled, tinted, }: AttachmentActionProps): import("react").JSX.Element;
 export interface AttachmentPreviewProps {
     file: ChatFile | null;
     onOpenChange: (open: boolean) => void;

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export { Skeleton, SkeletonText, LoadingOverlay, type SkeletonProps, type Skelet
 export { ErrorBoundary } from "./components/ErrorBoundary";
 export { Field, FieldSet, type FieldProps, type FieldSetProps } from "./components/Field";
 export { Input, Textarea, type InputProps, type TextareaProps } from "./components/Input";
+export { InlineEdit, type InlineEditProps, type InlineEditRefusal, type InlineEditOutcome, } from "./components/InlineEdit";
 export { SecretField, type SecretFieldProps, type SecretValue } from "./components/SecretField";
 export { SettingRow, SettingGroup, type SettingRowProps, type SettingGroupProps, type SettingRowControlRenderProps, } from "./components/SettingRow";
 export { ConnectionCard, type ConnectionCardProps, type ConnectionHealth, } from "./components/ConnectionCard";
@@ -85,7 +86,7 @@ export { Message, MessagePartView, ToolCall, ChatMarker, type MessageProps, type
 export { MessageScroller, type MessageScrollerProps, } from "./components/chat/MessageScroller";
 export { Composer, type ComposerProps } from "./components/chat/Composer";
 export { Markdown, CodeBlock, type MarkdownProps, type CodeBlockProps } from "./components/chat/Markdown";
-export { Attachment, AttachmentList, AttachmentPreview, type AttachmentProps, type AttachmentListProps, type AttachmentPreviewProps, type AttachmentLayout, } from "./components/chat/Attachment";
+export { Attachment, AttachmentAction, AttachmentList, AttachmentPreview, type AttachmentProps, type AttachmentActionProps, type AttachmentListProps, type AttachmentPreviewProps, type AttachmentLayout, } from "./components/chat/Attachment";
 export { ModelSelector, type ModelSelectorProps, type ChatModel, } from "./components/chat/ModelSelector";
 export { EffortControl, DEFAULT_EFFORT_LEVELS, type EffortControlProps, type EffortLevel, } from "./components/chat/EffortControl";
 export { ContextMeter, ChatStatus, type ContextMeterProps, type ContextSegment, type UsageLimit, type ChatStatusProps, } from "./components/chat/ContextMeter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",
@@ -66,14 +66,14 @@
     "build:types": "tsc -p tsconfig.build.json",
     "build:demo": "vite build",
     "build": "npm run build:lib && npm run build:demo",
-    "verify": "npm run typecheck && npm run test && npm run build && npm run typecheck:previews && npm run audit:previews && npm run audit:visual-stale",
+    "verify": "npm run typecheck && npm run build && npm run test && npm run typecheck:previews && npm run audit:previews && npm run audit:visual-stale",
     "audit:visual-stale": "node scripts/audit-visual-stale.mjs",
     "preview": "vite preview",
     "preview:built": "vite preview --outDir demo-dist --port 5801 --strictPort",
     "gates": "npm run shoot && npm run a11y && node scripts/shoot-overlays.mjs && npm run probe",
     "a11y": "node scripts/a11y-scan.mjs",
     "shoot": "node scripts/shoot.mjs",
-    "probe": "node scripts/probe-scale.mjs && node scripts/probe-switch.mjs && node scripts/probe-slider.mjs && node scripts/probe-panel.mjs && node scripts/probe-popover-width.mjs && node scripts/probe-api.mjs && node scripts/probe-api-live.mjs && node scripts/probe-tabs-overflow.mjs && node scripts/probe-stat-row.mjs && node scripts/probe-packaging.mjs && node scripts/probe-containment.mjs && node scripts/probe-shell.mjs && node scripts/probe-card-header.mjs",
+    "probe": "node scripts/probe-scale.mjs && node scripts/probe-switch.mjs && node scripts/probe-slider.mjs && node scripts/probe-panel.mjs && node scripts/probe-popover-width.mjs && node scripts/probe-api.mjs && node scripts/probe-api-live.mjs && node scripts/probe-tabs-overflow.mjs && node scripts/probe-stat-row.mjs && node scripts/probe-packaging.mjs && node scripts/probe-containment.mjs && node scripts/probe-shell.mjs && node scripts/probe-card-header.mjs && node scripts/probe-inline-edit.mjs",
     "sync": "node scripts/sync.mjs",
     "visual": "node scripts/visual-docker.mjs",
     "visual:update": "node scripts/visual-docker.mjs --update-snapshots",