@stll/ui 0.65.1 → 0.67.0

package/dist/kanban/sortable-interactions.d.ts

@@ -3,7 +3,6 @@ import { AutoScrollActivator, AutoScrollOptions, CollisionDetection, DndContextP
 import { Button } from "../components/button.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { useSortable } from "@dnd-kit/sortable";
-//#region src/kanban/sortable-interactions.d.ts
 export declare const KANBAN_MOUSE_ACTIVATION_DISTANCE = 8;
 /** Above sticky board chrome, below app-level floating surfaces. */
 export declare const KANBAN_DRAG_OVERLAY_Z_INDEX = 75;
@@ -141,5 +140,4 @@ export type KanbanCardDragSurfaceProps = {
 } & Omit<React$1.ComponentProps<"div">, "ref">;
 /** A whole-card drag activator that preserves descendant controls and scrolling. */
 export declare const KanbanCardDragSurface: ({ bindings, className, ...props }: KanbanCardDragSurfaceProps) => React$1.JSX.Element;
-//#endregion
 export { KANBAN_BOARD_COLLISION_DETECTION, type KanbanCellVirtualNavigation, type KanbanSortableCellPosition, type KanbanVirtualScrollRequest, kanbanKeyboardCoordinates };

package/dist/kanban/sortable-interactions.js

@@ -1,8 +1,8 @@
 "use client";
+import { Button } from "../components/button.js";
 import { GripVerticalIcon } from "../icons.js";
-import { cn } from "../lib/utils.js";
 import "../lib/overlay-layer.js";
-import { Button } from "../components/button.js";
+import { cn } from "../lib/utils.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DROP_TARGET_TYPES, clearKanbanKeyboardTarget, getKanbanKeyboardTargetState, isKanbanDropSettled, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { isActiveTouchChange } from "./touch-identity.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,7 +10,7 @@ import * as React$1 from "react";
 import { createPortal } from "react-dom";
 import { AutoScrollActivator, DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { useSortable } from "@dnd-kit/sortable";
-//#region src/kanban/sortable-interactions.tsx
+// src/kanban/sortable-interactions.tsx
 const KANBAN_MOUSE_ACTIVATION_DISTANCE = 8;
 /** Above sticky board chrome, below app-level floating surfaces. */
 const KANBAN_DRAG_OVERLAY_Z_INDEX = 75;
@@ -499,5 +499,4 @@ const KanbanCardDragSurface = ({ bindings, className, ...props }) => {
 		ref: setActivatorNodeRef
 	});
 };
-//#endregion
 export { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, kanbanKeyboardCoordinates, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/sortable-interactions.logic.d.ts

@@ -1,5 +1,4 @@
 import { CollisionDetection, KeyboardCoordinateGetter, SensorContext, UniqueIdentifier } from "@dnd-kit/core";
-//#region src/kanban/sortable-interactions.logic.d.ts
 export declare const KANBAN_DROP_TARGET_TYPES: {
   readonly CELL: "kanban-cell";
   readonly ITEM: "kanban-item";
@@ -75,5 +74,4 @@ type GetKeyboardTargetOptions = {
 export declare const getKanbanKeyboardTarget: ({ activeId, cells, currentCellId, currentOverId, direction }: GetKeyboardTargetOptions) => UniqueIdentifier | undefined;
 /** Ordered two-dimensional navigation over item and empty-cell targets. */
 export declare const kanbanKeyboardCoordinates: KeyboardCoordinateGetter;
-//#endregion
 export {};

package/dist/kanban/sortable-interactions.logic.js

@@ -1,5 +1,5 @@
 import { closestCorners, getFirstCollision, pointerWithin } from "@dnd-kit/core";
-//#region src/kanban/sortable-interactions.logic.ts
+// src/kanban/sortable-interactions.logic.ts
 const KANBAN_DROP_TARGET_TYPES = {
 	CELL: "kanban-cell",
 	ITEM: "kanban-item"
@@ -206,5 +206,4 @@ const kanbanKeyboardCoordinates = (event, { active, context }) => {
 		y: targetRect.top
 	};
 };
-//#endregion
 export { KANBAN_BOARD_COLLISION_DETECTION, KANBAN_DROP_TARGET_TYPES, clearKanbanKeyboardTarget, getKanbanKeyboardTarget, getKanbanKeyboardTargetState, isKanbanCellDropData, isKanbanDropSettled, kanbanKeyboardCoordinates };

package/dist/kanban/sticky-lane.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from "react";
-//#region src/kanban/sticky-lane.d.ts
 /**
  * A lane's controls while its cells scroll.
  *
@@ -70,5 +69,4 @@ export type KanbanCollapsedBandCaptionProps = {
  * A host rendering its own collapsed cell composes this inside that cell.
  */
 export declare const KanbanCollapsedBandCaption: ({ className, label, meta }: KanbanCollapsedBandCaptionProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/kanban/sticky-lane.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/kanban/sticky-lane.tsx
+// src/kanban/sticky-lane.tsx
 /**
 * A lane's controls while its cells scroll.
 *
@@ -66,5 +66,4 @@ const KanbanCollapsedBandCaption = ({ className, label, meta }) => /* @__PURE__
 		children: meta
 	})]
 });
-//#endregion
 export { KANBAN_CARD_STICKY_TOP_CLASS, KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_CLASS, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption, resolveKanbanCardStickyTop };

package/dist/kanban/subgroup-board.d.ts

@@ -2,7 +2,6 @@ import { KanbanBandToggleActivation } from "./column-band-header.js";
 import { KanbanBoardCell, KanbanBoardColumn, KanbanBoardMatrix } from "./matrix.js";
 import { KanbanColumnBand, KanbanGroup } from "./grouping.js";
 import { ReactNode, Ref } from "react";
-//#region src/kanban/subgroup-board.d.ts
 export type KanbanSubgroupColumnHeaderContext = {
   column: KanbanBoardColumn;
   count: number;
@@ -154,5 +153,4 @@ export type KanbanSubgroupBoardProps<TRow> = {
  * folded band costs no vertical space.
  */
 export declare const KanbanSubgroupBoard: <TRow>({ scrollRef, matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderLaneColumnSummary, renderLaneColumnAction, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/kanban/subgroup-board.js

@@ -1,15 +1,15 @@
+import { DirectionalIcon } from "../components/directional-icon.js";
 import { ChevronDownIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
-import { DirectionalIcon } from "../components/directional-icon.js";
-import { KANBAN_STICKY_TOP_CLASS, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption } from "./sticky-lane.js";
-import { KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS } from "./layout-tokens.js";
+import { createBandPeekController } from "./band-peek.js";
 import { KanbanColumnBandHeader } from "./column-band-header.js";
 import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_CLASS, resolveKanbanColumnBands } from "./column-bands.js";
 import { KANBAN_CARD_DRAG_MIME } from "./drag-interactions.js";
-import { createBandPeekController } from "./band-peek.js";
+import { KANBAN_CHROME_TOGGLE_COARSE_TARGET_CLASS } from "./layout-tokens.js";
+import { KANBAN_STICKY_TOP_CLASS, KANBAN_STICKY_TOP_VAR, KanbanCollapsedBandCaption } from "./sticky-lane.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-//#region src/kanban/subgroup-board.tsx
+// src/kanban/subgroup-board.tsx
 /**
 * How far a lane's own pinned row reaches: its identity line over the line of
 * per-column summaries, each fixed at the chrome row height.
@@ -443,5 +443,4 @@ const FoldedBandSlot = ({ band, children, className, peek }) => {
 		children
 	});
 };
-//#endregion
 export { KanbanSubgroupBoard };

package/dist/kanban/touch-identity.d.ts

@@ -1,8 +1,6 @@
-//#region src/kanban/touch-identity.d.ts
 type ActiveTouchChangeOptions = {
   activeTouchIdentifier: number | null;
   changedTouchIdentifiers: readonly number[];
 };
 export declare const isActiveTouchChange: ({ activeTouchIdentifier, changedTouchIdentifiers }: ActiveTouchChangeOptions) => boolean;
-//#endregion
 export {};

package/dist/kanban/touch-identity.js

@@ -1,4 +1,3 @@
-//#region src/kanban/touch-identity.ts
+// src/kanban/touch-identity.ts
 const isActiveTouchChange = ({ activeTouchIdentifier, changedTouchIdentifiers }) => activeTouchIdentifier === null || changedTouchIdentifiers.includes(activeTouchIdentifier);
-//#endregion
 export { isActiveTouchChange };

package/dist/kanban/virtual-cell.d.ts

@@ -3,7 +3,6 @@ import { OptionColor } from "../lib/option-color.js";
 import { SortableContextProps, SortingStrategy } from "@dnd-kit/sortable";
 import { UniqueIdentifier } from "@dnd-kit/core";
 import { UseKanbanDropTargetOptions } from "./sortable-interactions.js";
-//#region src/kanban/virtual-cell.d.ts
 export declare const KANBAN_VIRTUAL_CELL_PAGINATION: {
   readonly NONE: "none";
   readonly CURSOR: "cursor";
@@ -71,5 +70,4 @@ export type KanbanVirtualCellProps<TRow> = {
   className?: string | undefined;
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-export declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, accent, footer, footerPlacement, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
-//#endregion
+export declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, accent, footer, footerPlacement, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;

package/dist/kanban/virtual-cell.js

@@ -1,13 +1,13 @@
+import { resolveOptionColor } from "../lib/option-color.js";
 import { cn } from "../lib/utils.js";
-import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_CLASS, resolveKanbanCardStickyTop } from "./sticky-lane.js";
 import { useKanbanDropTarget } from "./sortable-interactions.js";
-import { resolveOptionColor } from "../lib/option-color.js";
+import { KANBAN_CARD_STICKY_TOP_VAR, KANBAN_STICKY_TOP_CLASS, resolveKanbanCardStickyTop } from "./sticky-lane.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useRef, useState } from "react";
 import { useDndContext } from "@dnd-kit/core";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
-//#region src/kanban/virtual-cell.tsx
+// src/kanban/virtual-cell.tsx
 const DEFAULT_ESTIMATE_SIZE_PX = 128;
 const DEFAULT_OVERSCAN = 8;
 const DEFAULT_LOAD_MORE_THRESHOLD_PX = 200;
@@ -181,5 +181,4 @@ function resolveKanbanCellAppearance({ accent, active, backgroundColor }) {
 		hasAccent: accentVariants !== void 0
 	};
 }
-//#endregion
 export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell };

package/dist/lib/button-disposition.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/lib/button-disposition.d.ts
 /**
  * How a button expresses "unavailable".
  *
@@ -59,5 +58,4 @@ export declare const blockDisabledActivation: (event: BlockableEvent) => void;
 export declare const blockDisabledKeyActivation: (event: BlockableEvent & {
   key: string;
 }) => void;
-//#endregion
 export {};

package/dist/lib/button-disposition.js

@@ -1,5 +1,5 @@
 import { hasTooltipContent } from "./tooltip-content.js";
-//#region src/lib/button-disposition.ts
+// src/lib/button-disposition.ts
 /**
 * How a button expresses "unavailable".
 *
@@ -48,5 +48,4 @@ const blockDisabledKeyActivation = (event) => {
 	event.preventBaseUIHandler?.();
 	if (event.key !== "Tab") event.preventDefault();
 };
-//#endregion
 export { BUTTON_DISPOSITION, blockDisabledActivation, blockDisabledKeyActivation, resolveButtonDisposition };

package/dist/lib/control-size.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/control-size.d.ts
 declare const CONTROL_SIZE: Readonly<{
   readonly sm: "sm";
   readonly default: "default";
@@ -6,5 +5,4 @@ declare const CONTROL_SIZE: Readonly<{
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
 declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
-//#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };

package/dist/lib/control-size.js

@@ -1,9 +1,8 @@
-//#region src/lib/control-size.ts
+// src/lib/control-size.ts
 const CONTROL_SIZE = Object.freeze({
 	sm: "sm",
 	default: "default",
 	lg: "lg"
 });
 const CONTROL_SIZES = Object.freeze(Object.values(CONTROL_SIZE));
-//#endregion
 export { CONTROL_SIZE, CONTROL_SIZES };

package/dist/lib/field-trigger.d.ts

@@ -1,9 +1,7 @@
-//#region src/lib/field-trigger.d.ts
 /**
  * The bordered box of a button that opens a picker inside a form (a select
  * trigger, a date field). One string so every popup-backed field shares the
  * input metric, focus ring, invalid and disabled treatment, and the 44px
  * coarse-pointer hit area.
  */
-export declare const FIELD_TRIGGER_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none";
-//#endregion
+export declare const FIELD_TRIGGER_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none";

package/dist/lib/field-trigger.js

@@ -1,4 +1,4 @@
-//#region src/lib/field-trigger.ts
+// src/lib/field-trigger.ts
 /**
 * The bordered box of a button that opens a picker inside a form (a select
 * trigger, a date field). One string so every popup-backed field shares the
@@ -6,5 +6,4 @@
 * coarse-pointer hit area.
 */
 const FIELD_TRIGGER_CLASS_NAME = "border-input bg-background text-foreground ring-ring/24 focus-visible:border-ring aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 dark:bg-input/32 dark:aria-invalid:ring-destructive/24 relative inline-flex min-h-9 w-full min-w-36 items-center justify-center gap-2 rounded-lg border px-[calc(--spacing(3)-1px)] text-start text-base shadow-xs/5 outline-none select-none not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm dark:not-data-disabled:not-focus-visible:not-aria-invalid:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [[data-disabled],:focus-visible,[aria-invalid],[data-pressed]]:shadow-none";
-//#endregion
 export { FIELD_TRIGGER_CLASS_NAME };

package/dist/lib/file-picker.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/file-picker.d.ts
 type PickedFiles = [File, ...File[]];
 type OpenFilePickerOptions = {
   accept?: string | undefined;
@@ -16,5 +15,4 @@ type OpenFilePickerOptions = {
  * `onPick` runs only with at least one file.
  */
 declare const openFilePicker: ({ accept, multiple, onPick }: OpenFilePickerOptions) => void;
-//#endregion
 export { type OpenFilePickerOptions, openFilePicker };

package/dist/lib/file-picker.js

@@ -1,4 +1,4 @@
-//#region src/lib/file-picker.ts
+// src/lib/file-picker.ts
 /**
 * Opens the browser's file chooser without an `<input type="file">` in the
 * component tree, so no surface carries a hidden input, a ref, or the
@@ -25,5 +25,4 @@ const openFilePicker = ({ accept, multiple = false, onPick }) => {
 	document.body.append(input);
 	input.click();
 };
-//#endregion
 export { openFilePicker };

package/dist/lib/initials.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/initials.d.ts
 /**
  * Extract up to two uppercase initials from a display name.
  *
@@ -11,5 +10,4 @@
  *   "王小明" → "王小"
  * - Null / empty: "?"
  */
-export declare const getInitials: (name: string | null) => string;
-//#endregion
+export declare const getInitials: (name: string | null) => string;

package/dist/lib/initials.js

@@ -1,4 +1,4 @@
-//#region src/lib/initials.ts
+// src/lib/initials.ts
 /**
 * Extract up to two uppercase initials from a display name.
 *
@@ -23,5 +23,4 @@ const getInitials = (name) => {
 	}
 	return trimmed.slice(0, 2).toUpperCase();
 };
-//#endregion
 export { getInitials };

package/dist/lib/inline-reorder.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/inline-reorder.d.ts
 /**
  * Reordering for a horizontal row of items (tabs, chips) dragged with
  * pragmatic drag and drop. Edges match the hitbox package's `Edge`, so a
@@ -16,5 +15,4 @@ type ReorderInlineIdsParams = {
 };
 /** The new order, or null when the drop leaves the order unchanged. */
 export declare const reorderInlineIds: ({ ids, draggedId, targetId, position }: ReorderInlineIdsParams) => string[] | null;
-//#endregion
 export {};

package/dist/lib/inline-reorder.js

@@ -1,4 +1,4 @@
-//#region src/lib/inline-reorder.ts
+// src/lib/inline-reorder.ts
 const toInlineDropPosition = (edge, direction) => {
 	if (edge !== "left" && edge !== "right") return null;
 	return (direction === "rtl" ? edge === "left" : edge === "right") ? "after" : "before";
@@ -11,5 +11,4 @@ const reorderInlineIds = ({ ids, draggedId, targetId, position }) => {
 	reordered.splice(position === "after" ? targetIndex + 1 : targetIndex, 0, draggedId);
 	return reordered.every((id, index) => id === ids[index]) ? null : reordered;
 };
-//#endregion
 export { reorderInlineIds, toInlineDropPosition };

package/dist/lib/matter-colors.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties } from "react";
-//#region src/lib/matter-colors.d.ts
 export declare const MATTER_SWATCHES: readonly ["--option-blue", "--option-emerald", "--option-amber", "--option-violet", "--option-red", "--option-cyan", "--option-orange", "--option-teal"];
 export declare const getMatterSwatch: (id: string) => "--option-amber" | "--option-blue" | "--option-cyan" | "--option-emerald" | "--option-orange" | "--option-red" | "--option-teal" | "--option-violet";
 export declare const getMatterColor: (id: string) => string;
@@ -35,5 +34,4 @@ export type MatterChromeStyle = CSSProperties & {
 };
 /** The tint variables a matter-scoped subtree paints its chrome and panes from. */
 export declare const matterChromeStyle: (color: string | null) => MatterChromeStyle;
-//#endregion
 export {};

package/dist/lib/matter-colors.js

@@ -1,4 +1,4 @@
-//#region src/lib/matter-colors.ts
+// src/lib/matter-colors.ts
 const DEFAULT_MATTER_SWATCH = "--option-blue";
 const MATTER_SWATCHES = [
 	DEFAULT_MATTER_SWATCH,
@@ -61,5 +61,4 @@ const matterChromeStyle = (color) => ({
 	"--matter-background-tint": matterTint(color, MATTER_TINT_GROUND.content),
 	"--matter-sidebar-tint": matterTint(color, MATTER_TINT_GROUND.chrome)
 });
-//#endregion
 export { MATTER_SWATCHES, MATTER_TINT_GROUND, getMatterColor, getMatterPickerColor, getMatterSwatch, matterChromeStyle, matterTint, resolveMatterColor, toStoredMatterColor };

package/dist/lib/menu-row.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/menu-row.d.ts
 /**
  * One row metric for a menu list: a 32px row for a fine pointer that grows to
  * the 44px touch target DESIGN.md asks for under a coarse one, an 8px inset,
@@ -10,5 +9,4 @@
  * constant, so a list that mixes a button row with a highlightable command row
  * cannot drift into two densities.
  */
-export declare const MENU_ROW_CLASS_NAME = "min-h-8 w-full min-w-0 justify-start gap-2 px-2 py-1 pointer-coarse:min-h-11 text-start text-sm sm:text-sm [&_[data-slot=checkbox]]:size-4 [&_[data-slot=checkbox]_svg]:size-3 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-4";
-//#endregion
+export declare const MENU_ROW_CLASS_NAME = "min-h-8 w-full min-w-0 justify-start gap-2 px-2 py-1 pointer-coarse:min-h-11 text-start text-sm sm:text-sm [&_[data-slot=checkbox]]:size-4 [&_[data-slot=checkbox]_svg]:size-3 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-4";

package/dist/lib/menu-row.js

@@ -1,4 +1,4 @@
-//#region src/lib/menu-row.ts
+// src/lib/menu-row.ts
 /**
 * One row metric for a menu list: a 32px row for a fine pointer that grows to
 * the 44px touch target DESIGN.md asks for under a coarse one, an 8px inset,
@@ -11,5 +11,4 @@
 * cannot drift into two densities.
 */
 const MENU_ROW_CLASS_NAME = "min-h-8 w-full min-w-0 justify-start gap-2 px-2 py-1 pointer-coarse:min-h-11 text-start text-sm sm:text-sm [&_[data-slot=checkbox]]:size-4 [&_[data-slot=checkbox]_svg]:size-3 [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-4";
-//#endregion
 export { MENU_ROW_CLASS_NAME };

package/dist/lib/native-context-menu.d.ts

@@ -0,0 +1,24 @@
+/** Why a right-click keeps the native menu, or null when stella may take it. */
+export type NativeContextMenuReason = "editable" | "link" | "selection" | "shift";
+type ContextMenuEventLike = {
+  readonly shiftKey: boolean;
+  readonly target: EventTarget | null;
+};
+/** The element is, or sits inside, text the user can edit. */
+export declare const isEditableContextMenuTarget: (element: Element) => boolean;
+/** The element is, or sits inside, a link with a destination. */
+export declare const isLinkContextMenuTarget: (element: Element) => boolean;
+/** A non-empty text selection covers the element. */
+export declare const isSelectedTextContextMenuTarget: (element: Element) => boolean;
+/**
+ * Why this right-click keeps the browser's menu on an object, or null when
+ * the object's own actions open instead.
+ */
+export declare const nativeContextMenuReason: (event: ContextMenuEventLike) => NativeContextMenuReason | null;
+/**
+ * The narrower rule a desktop webview applies to a right-click nothing in the
+ * page handled: only editable or selected text keeps a (text) menu, since
+ * the webview's native menu elsewhere offers browser items such as reload.
+ */
+export declare const nativeTextContextMenuReason: (event: Pick<ContextMenuEventLike, "target">) => Extract<NativeContextMenuReason, "editable" | "selection"> | null;
+export {};

package/dist/lib/native-context-menu.js

@@ -0,0 +1,85 @@
+// src/lib/native-context-menu.ts
+/** Input types whose value is text a user edits; the others are controls. */
+const NON_TEXT_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"button",
+	"checkbox",
+	"color",
+	"file",
+	"hidden",
+	"image",
+	"radio",
+	"range",
+	"reset",
+	"submit"
+]);
+/** The element a right-click landed on; a text node answers for its parent. */
+const elementOf = (target) => {
+	if (target instanceof Element) return target;
+	if (target instanceof Node) return target.parentElement;
+	return null;
+};
+/**
+* What a `contenteditable` value means under the HTML standard: its keywords
+* match ASCII case-insensitively, the empty string means "true", and an
+* invalid value inherits from the parent.
+*/
+const contentEditableState = (value) => {
+	if (value === null) return "inherit";
+	switch (value.toLowerCase()) {
+		case "":
+		case "true":
+		case "plaintext-only": return "editable";
+		case "false": return "not-editable";
+		default: return "inherit";
+	}
+};
+/** The element is, or sits inside, text the user can edit. */
+const isEditableContextMenuTarget = (element) => {
+	const field = element.closest("input, textarea");
+	if (field !== null) {
+		const type = field.getAttribute("type")?.toLowerCase() ?? "text";
+		if (field.tagName.toLowerCase() === "textarea") return true;
+		return !NON_TEXT_INPUT_TYPES.has(type);
+	}
+	for (let current = element.closest("[contenteditable]"); current !== null; current = current.parentElement?.closest("[contenteditable]") ?? null) {
+		const state = contentEditableState(current.getAttribute("contenteditable"));
+		if (state !== "inherit") return state === "editable";
+	}
+	return false;
+};
+/** The element is, or sits inside, a link with a destination. */
+const isLinkContextMenuTarget = (element) => element.closest("a[href]") !== null;
+/** A non-empty text selection covers the element. */
+const isSelectedTextContextMenuTarget = (element) => {
+	const selection = element.ownerDocument.defaultView?.getSelection() ?? null;
+	if (selection === null || selection.isCollapsed) return false;
+	if (selection.toString().trim() === "") return false;
+	for (let index = 0; index < selection.rangeCount; index += 1) if (selection.getRangeAt(index).intersectsNode(element)) return true;
+	return false;
+};
+/**
+* Why this right-click keeps the browser's menu on an object, or null when
+* the object's own actions open instead.
+*/
+const nativeContextMenuReason = (event) => {
+	if (event.shiftKey) return "shift";
+	const element = elementOf(event.target);
+	if (element === null) return null;
+	if (isEditableContextMenuTarget(element)) return "editable";
+	if (isSelectedTextContextMenuTarget(element)) return "selection";
+	if (isLinkContextMenuTarget(element)) return "link";
+	return null;
+};
+/**
+* The narrower rule a desktop webview applies to a right-click nothing in the
+* page handled: only editable or selected text keeps a (text) menu, since
+* the webview's native menu elsewhere offers browser items such as reload.
+*/
+const nativeTextContextMenuReason = (event) => {
+	const element = elementOf(event.target);
+	if (element === null) return null;
+	if (isEditableContextMenuTarget(element)) return "editable";
+	if (isSelectedTextContextMenuTarget(element)) return "selection";
+	return null;
+};
+export { isEditableContextMenuTarget, isLinkContextMenuTarget, isSelectedTextContextMenuTarget, nativeContextMenuReason, nativeTextContextMenuReason };

package/dist/lib/option-color.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/option-color.d.ts
 /**
  * The kit's colour token for user-chosen option colours.
  *
@@ -23,5 +22,4 @@ export declare const emptyColor: ColorVariants;
 /** Resolve any OptionColor (named or hex) to CSS color variants. */
 export declare const resolveOptionColor: (color: OptionColor) => ColorVariants;
 /** The 16 named preset color keys. */
-export declare const optionColors: readonly OptionColor[];
-//#endregion
+export declare const optionColors: readonly OptionColor[];

package/dist/lib/option-color.js

@@ -1,4 +1,4 @@
-//#region src/lib/option-color.ts
+// src/lib/option-color.ts
 /** Named preset colors with CSS variable references. */
 const NAMED_COLORS = Object.freeze([
 	"red",
@@ -55,5 +55,4 @@ const resolveOptionColor = (color) => {
 };
 /** The 16 named preset color keys. */
 const optionColors = NAMED_COLORS;
-//#endregion
 export { emptyColor, optionColors, resolveOptionColor };

package/dist/lib/overlay-layer.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/overlay-layer.d.ts
 export declare const BOARD_DRAG_OVERLAY_Z_INDEX = 75;
 /**
  * The shell's own sticky chrome: its top bar, and anything else the shell pins
@@ -45,5 +44,4 @@ export type OverlayLayer = keyof typeof OVERLAY_LAYER_CLASS_NAMES;
  * viewport edge once `shift()` has to move a popup that is wider than its
  * anchor, which reads as a clipped surface rather than a repositioned one.
  */
-export declare const OVERLAY_COLLISION_PADDING = 8;
-//#endregion
+export declare const OVERLAY_COLLISION_PADDING = 8;

package/dist/lib/overlay-layer.js

@@ -1,4 +1,4 @@
-//#region src/lib/overlay-layer.ts
+// src/lib/overlay-layer.ts
 const BOARD_DRAG_OVERLAY_Z_INDEX = 75;
 /**
 * The shell's own sticky chrome: its top bar, and anything else the shell pins
@@ -45,5 +45,4 @@ const OVERLAY_LAYER_CLASS_NAMES = {
 * anchor, which reads as a clipped surface rather than a repositioned one.
 */
 const OVERLAY_COLLISION_PADDING = 8;
-//#endregion
 export { BOARD_DRAG_OVERLAY_Z_INDEX, OVERLAY_COLLISION_PADDING, OVERLAY_LAYER_CLASS_NAMES, SHELL_CHROME_LAYER_CLASS_NAME };

package/dist/lib/panel-inset.d.ts

@@ -1,4 +1,3 @@
-//#region src/lib/panel-inset.d.ts
 /** Shared geometry contract between docked chrome and document side panels. */
 export declare const DOCUMENT_PANEL_BOTTOM_INSET = "--document-panel-bottom-inset";
 export declare const DOCUMENT_PANEL_SAFE_BOTTOM = "max(env(safe-area-inset-bottom, 0px), var(--document-panel-bottom-inset, 0px))";
@@ -7,5 +6,4 @@ export declare const DOCUMENT_PANEL_SAFE_BOTTOM = "max(env(safe-area-inset-botto
  * callback ref owns observation and cleanup, so growing composer/thread chrome
  * changes every descendant panel without screen-specific padding estimates.
  */
-export declare const publishDocumentPanelInset: (element: HTMLDivElement | null) => (() => void) | undefined;
-//#endregion
+export declare const publishDocumentPanelInset: (element: HTMLDivElement | null) => (() => void) | undefined;

package/dist/lib/panel-inset.js

@@ -1,4 +1,4 @@
-//#region src/lib/panel-inset.ts
+// src/lib/panel-inset.ts
 /** Shared geometry contract between docked chrome and document side panels. */
 const DOCUMENT_PANEL_BOTTOM_INSET = "--document-panel-bottom-inset";
 const DOCUMENT_PANEL_SAFE_BOTTOM = "max(env(safe-area-inset-bottom, 0px), var(--document-panel-bottom-inset, 0px))";
@@ -29,5 +29,4 @@ const publishDocumentPanelInset = (element) => {
 		host.style.removeProperty(DOCUMENT_PANEL_BOTTOM_INSET);
 	};
 };
-//#endregion
 export { DOCUMENT_PANEL_BOTTOM_INSET, DOCUMENT_PANEL_SAFE_BOTTOM, publishDocumentPanelInset };

package/dist/lib/positioner-sizing.d.ts

@@ -1,4 +1,2 @@
-//#region src/lib/positioner-sizing.d.ts
 export declare const CONTENT_SIZED_POSITIONER_CLASS_NAME = "w-max max-w-(--available-width)";
-export declare const IN_FLOW_POPUP_CLASS_NAME = "relative!";
-//#endregion
+export declare const IN_FLOW_POPUP_CLASS_NAME = "relative!";

package/dist/lib/positioner-sizing.js

@@ -1,5 +1,4 @@
-//#region src/lib/positioner-sizing.ts
+// src/lib/positioner-sizing.ts
 const CONTENT_SIZED_POSITIONER_CLASS_NAME = "w-max max-w-(--available-width)";
 const IN_FLOW_POPUP_CLASS_NAME = "relative!";
-//#endregion
 export { CONTENT_SIZED_POSITIONER_CLASS_NAME, IN_FLOW_POPUP_CLASS_NAME };

package/dist/lib/renders-nothing.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+/**
+ * Whether React draws nothing for this node: `null`, `undefined`, a boolean,
+ * an empty string, or a list of only such nodes. A slot that sits empty
+ * (an `icon=""`, a `{flag && value}` that came out `true`, an empty `.map`)
+ * is then treated as absent rather than given a box.
+ */
+export declare function rendersNothing(node: ReactNode): boolean;

package/dist/lib/renders-nothing.js

@@ -0,0 +1,14 @@
+// src/lib/renders-nothing.ts
+/**
+* Whether React draws nothing for this node: `null`, `undefined`, a boolean,
+* an empty string, or a list of only such nodes. A slot that sits empty
+* (an `icon=""`, a `{flag && value}` that came out `true`, an empty `.map`)
+* is then treated as absent rather than given a box.
+*/
+function rendersNothing(node) {
+	if (node === null || node === void 0 || typeof node === "boolean") return true;
+	if (typeof node === "string") return node === "";
+	if (Array.isArray(node)) return node.every((child) => rendersNothing(child));
+	return false;
+}
+export { rendersNothing };