@starci/grammar 0.13.0 → 0.14.0

package/dist/common/styles.css

@@ -327,15 +327,6 @@
         overflow-wrap: anywhere;
     }
 
-    /* Loading header (knowledge STATE-8): the same ranks and sizes, the copy drawn as Skeleton text, the action as a footprint. */
-    .starci-core-section-skeleton-title > .starci-core-skeleton-group { inline-size: min(60%, 20rem); }
-    .starci-core-section-skeleton-title .starci-core-skeleton { block-size: 1em; }
-    .starci-core-section-skeleton-description > .starci-core-skeleton-group { inline-size: min(90%, 28rem); }
-    .starci-core-section-skeleton-meta > .starci-core-skeleton-group { inline-size: 6rem; }
-    .starci-core-section-skeleton-meta .starci-core-skeleton { block-size: 0.75rem; }
-    .starci-core-section-skeleton-action { display: block; inline-size: 6rem; block-size: 2.5rem; }
-    .starci-core-section-skeleton-action > .starci-core-skeleton { block-size: 100%; aspect-ratio: auto; }
-
     /*
      * Keyboard-reachable scroll owners (VerticalScrollRegion / HorizontalScrollRegion when focusable,
      * the Rail body, fenced code and Markdown table frames) draw the same inset focus ring the chat
@@ -1233,6 +1224,11 @@
         margin-block-end: 0 !important;
     }
 
+    /* A label edit resizes the selected tab; the indicator tracks it without the vendor width animation. */
+    .starci-core-tabs-frame[data-grammar-tabs-measuring="true"] .starci-core-tabs .tabs__indicator {
+        transition-property: none;
+    }
+
     .starci-core-tab-content {
         display: flex;
         min-width: 0;
@@ -2818,6 +2814,18 @@
         flex: 1 1 0%;
     }
 
+    /*
+     * Dividers are full bleed (DNA-COMMON-DIVIDER-FULL-BLEED): a horizontal hairline placed in a card's content region
+     * runs from card edge to card edge, through the content inset, never inset from them; the content above and below
+     * it keeps the card inset from the rule.
+     */
+    .starci-core-surface-content > .starci-core-divider-bare:not([data-grammar-divider-orientation="vertical"]) {
+        align-self: stretch;
+        inline-size: auto !important;
+        margin-inline: calc(-1 * var(--starci-core-surface-inset, 1rem)) !important;
+        margin-block: var(--starci-core-surface-inset, 1rem);
+    }
+
     /* A vertical hairline between touching columns of one joined surface: it fills the row, whatever its height. */
     .starci-core-divider-bare[data-grammar-divider-orientation="vertical"] {
         align-self: stretch;
@@ -2850,6 +2858,25 @@
         overflow-x: auto;
     }
 
+    /* A disabled control wrapped by Tooltip: a focusable box that takes the control's own inline size. */
+    .starci-core-tooltip-disabled-trigger {
+        display: inline-flex;
+        max-inline-size: 100%;
+    }
+
+    /*
+     * The wrapper takes the keyboard focus ring (the disabled control is faded, so a ring on it would fade too); it takes
+     * the vendor Button's radius, so the ring follows the button's shape instead of drawing a square round a pill.
+     */
+    .starci-core-tooltip-disabled-trigger:has(> [data-component="Button"]) {
+        border-radius: calc(var(--radius) * 3);
+    }
+
+    .starci-core-tooltip-disabled-trigger:has(> [data-component="Button"][data-width="fill"]) {
+        display: flex;
+        inline-size: 100%;
+    }
+
     /* --- Pinned action bar (0.6.0): the narrow-screen page command, sticky at the bottom edge. --- */
     .starci-core-pinned-action-bar {
         position: sticky;
@@ -2864,6 +2891,29 @@
         color: var(--surface-foreground, CanvasText);
     }
 
+    /* A summary bar lays the summary beside its actions and lets the actions drop below it when they do not fit. */
+    .starci-core-pinned-action-bar[data-grammar-pinned-layout="summary"] {
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+    }
+
+    .starci-core-pinned-action-bar-summary {
+        min-width: 0;
+        flex: 1 1 12rem;
+        overflow-wrap: anywhere;
+    }
+
+    .starci-core-pinned-action-bar-actions {
+        display: flex;
+        flex: 0 1 auto;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 0.5rem;
+    }
+
     @media (min-width: 48rem) {
         .starci-core-pinned-action-bar[data-grammar-pinned-visibility="narrow"] {
             display: none;
@@ -2895,22 +2945,14 @@
         height: 1rem;
     }
 
+    /* The resting glyph keeps the usage box of the glyph it stands for (skeleton parity); the size comes from data-usage. */
     .starci-core-icon-skeleton {
         display: inline-block;
-        width: 1.25rem !important;
-        height: 1.25rem !important;
         flex: none;
         border-radius: var(--starci-core-pill-radius, 999px) !important;
     }
 
     /* --- Icon button: a HeroUI `Button` worn as a circle. --- */
-    .starci-core-control-size .starci-core-field-skeleton-control {
-        box-sizing: border-box;
-        block-size: var(--starci-core-control-min-size, 2.5rem) !important;
-        min-block-size: var(--starci-core-control-min-size, 2.5rem) !important;
-        max-block-size: var(--starci-core-control-min-size, 2.5rem) !important;
-    }
-
     /*
      * Owner ruling `control-height-40`: one control height, 2.5rem (40px, HeroUI's own h-10), is the default of every
      * standalone control. `md` and `control` are the same square circle in both axes (the vendor's md:h-9 desktop step
@@ -3184,16 +3226,6 @@
         font-size: 0.75rem;
     }
 
-    .starci-core-input-resting-label {
-        width: 33.333333% !important;
-        height: 1rem !important;
-    }
-
-    .starci-core-input-resting-control {
-        width: 100% !important;
-        height: 2.5rem !important;
-    }
-
     /* --- Heading: the FONT rank each level stamps, drawn from the family's own sheet. --- */
     /*
      * `Heading` renders through the vendor's `Typography.Heading`, which sizes `.typography--h1`
@@ -3315,19 +3347,32 @@
         line-clamp: 2;
     }
 
-    /* The resting line keeps its size geometry and hides its copy; no tone is visible to claim. */
+    /*
+     * Skeleton parity: the loading line IS the ready line (same element, display, size and overflow), so its box never
+     * moves. Nothing in it is painted; the shimmer bar wraps the copy as a measured placeholder, one line box tall per
+     * line (`vertical-align: top` keeps the bar from growing the line box), or takes the size's default width when no
+     * copy was passed. The start content keeps its place, unseen.
+     */
     .starci-core-text[data-loading="true"] {
-        display: inline-block;
-        max-width: 100%;
-        border-radius: var(--radius, 0.25rem);
         color: transparent;
         user-select: none;
     }
 
-    .starci-core-text[data-loading="true"][data-size="xs"] { width: 2.5rem; }
-    .starci-core-text[data-loading="true"][data-size="sm"] { width: 3rem; }
-    .starci-core-text[data-loading="true"][data-size="md"] { width: 10rem; }
-    .starci-core-text[data-loading="true"][data-size="metric-lead"] { width: 10rem; }
+    .starci-core-text[data-loading="true"] > :not(.starci-core-text-skeleton) { visibility: hidden; }
+
+    .starci-core-text-skeleton {
+        display: inline-block;
+        max-inline-size: 100%;
+        vertical-align: top;
+        border-radius: var(--radius, 0.25rem);
+    }
+
+    .starci-core-text[data-overflow="clamp-2"] > .starci-core-text-skeleton { max-block-size: 2lh; }
+    .starci-core-text[data-overflow="truncate"] > .starci-core-text-skeleton { white-space: nowrap; }
+
+    .starci-core-text[data-size="xs"] > .starci-core-text-skeleton[data-empty="true"] { inline-size: 2.5rem; }
+    .starci-core-text[data-size="sm"] > .starci-core-text-skeleton[data-empty="true"] { inline-size: 3rem; }
+    .starci-core-text:is([data-size="md"], [data-size="metric-lead"]) > .starci-core-text-skeleton[data-empty="true"] { inline-size: 10rem; }
 
     /* --- Text action: one recipe, eight appearances, selected by data attributes. --- */
     /*
@@ -3449,14 +3494,19 @@
         text-decoration-line: none;
     }
 
-    .starci-core-text-action-resting {
-        display: inline-flex;
-        width: 4rem;
-        flex: none;
+    /*
+     * A loading TextAction (skeleton parity): the same recipe on an inert span keeps the ready box; the label is a measured
+     * placeholder inside the shimmer bar and the start/end content keep their places, unseen.
+     */
+    .starci-core-text-action[data-loading="true"] {
         color: transparent;
+        text-decoration-line: none;
         user-select: none;
     }
 
+    .starci-core-text-action-resting { border-radius: var(--radius, 0.25rem); }
+    .starci-core-text-action-placeholder { display: contents; visibility: hidden; }
+
     /*
      * --- Button: full width ---
      *
@@ -3486,13 +3536,146 @@
         }
     }
 
-    /* Badge isDot: HeroUI's Chip dot (`<CircleFill width={6} />`), a 6px solid circle in the tone colour. */
-    .starci-core-badge-dot {
+    /*
+     * StatusDot: three variants (text chip, echo, static) share ONE dot-size token and one tone set. The text
+     * chip is HeroUI's soft Chip, so its padding, height and type are the vendor's per size (sm 4px/20px,
+     * md 8px+2px/24px, lg 12px+4px/28px). The dot-to-text gap is gap-1 (0.25rem): the Chip's own gap-0.5
+     * (0.125rem) plus the 0.125rem the dot adds after itself; no vendor property is overridden.
+     */
+    .grammar-common-root {
+        --starci-core-status-dot-size: 6px;
+    }
+
+    .starci-core-status-dot-mark {
+        --starci-core-status-dot-color: var(--muted, GrayText);
+        position: relative;
         display: inline-block;
-        width: 6px;
-        height: 6px;
+        width: var(--starci-core-status-dot-size);
+        height: var(--starci-core-status-dot-size);
         flex: none;
-        color: inherit;
+        border-radius: 999px;
+        background: var(--starci-core-status-dot-color);
+        /* The tone's light stop: the tone eased toward the surface. */
+        --starci-core-status-dot-light: color-mix(in oklab, var(--starci-core-status-dot-color) 40%, var(--surface, Canvas));
+    }
+
+    .starci-core-status-dot-mark[data-tone="accent"] { --starci-core-status-dot-color: var(--accent, Highlight); }
+    .starci-core-status-dot-mark[data-tone="success"] { --starci-core-status-dot-color: var(--success, CanvasText); }
+    .starci-core-status-dot-mark[data-tone="warning"] { --starci-core-status-dot-color: var(--warning, CanvasText); }
+    .starci-core-status-dot-mark[data-tone="danger"] { --starci-core-status-dot-color: var(--danger, CanvasText); }
+
+    .starci-core-status-dot-chip > .starci-core-status-dot-mark {
+        margin-inline-end: 0.125rem;
+    }
+
+    .starci-core-status-dot-label {
+        display: inline-block;
+    }
+
+    .starci-core-status-dot-label::first-letter {
+        text-transform: uppercase;
+    }
+
+    /* Dot only (static and echo): a small focusable target, so the ring has room and the Tooltip has a trigger. */
+    .starci-core-status-dot:not(.starci-core-status-dot-chip) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.25rem;
+        border-radius: 999px;
+    }
+
+    /* The echo is a ring outside the dot (a box-shadow, no fill), so the dot keeps its full tone under it. */
+    .starci-core-status-dot-mark[data-echo="true"]::after {
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        box-shadow: 0 0 0 1.5px var(--starci-core-status-dot-light);
+        content: "";
+        animation: starci-core-status-dot-echo 1.6s ease-out infinite;
+    }
+
+    @keyframes starci-core-status-dot-echo {
+        from { opacity: 1; transform: scale(1); }
+        to { opacity: 0; transform: scale(2.6); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .starci-core-status-dot-mark[data-echo="true"]::after {
+            display: none;
+            animation: none;
+        }
+    }
+
+    /* Badge muted: the content carries the muted ink on HeroUI's transparent tertiary Chip. */
+    .starci-core-badge-muted {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.125rem;
+        color: var(--muted, GrayText);
+    }
+
+    /* Text: monospace and tabular figures, opted into. */
+    .starci-core-text[data-mono="true"] {
+        font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    }
+
+    .starci-core-text[data-tabular="true"] {
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* Code: inline code on a soft plate, the size of the line around it. */
+    .starci-core-code {
+        padding: 0.125em 0.375em;
+        border-radius: 0.375rem;
+        background: var(--default, var(--surface-secondary, Canvas));
+        color: var(--foreground, CanvasText);
+        font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+        font-size: 0.875em;
+        overflow-wrap: anywhere;
+    }
+
+    /*
+     * Terminal: a dark monospace log tail; dark in both themes (a console reads dark). Its colours are family tokens
+     * (`--terminal-background`, `--terminal-foreground`, `--terminal-title-foreground`); bare Common inverts the
+     * system colours.
+     */
+    .starci-core-terminal {
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        overflow: hidden;
+        border-radius: 0.75rem;
+        background: var(--terminal-background, CanvasText);
+        color: var(--terminal-foreground, Canvas);
+    }
+
+    .starci-core-terminal-title {
+        padding: 0.5rem 0.75rem;
+        border-block-end: 1px solid color-mix(in srgb, var(--terminal-foreground, Canvas) 14%, transparent);
+        color: var(--terminal-title-foreground, var(--terminal-foreground, Canvas));
+        font-size: 0.75rem;
+        font-weight: 500;
+    }
+
+    .starci-core-terminal-log {
+        max-height: 16rem;
+        min-height: 4rem;
+        overflow: auto;
+        padding: 0.5rem 0.75rem;
+        font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+        font-size: 0.8125rem;
+        line-height: 1.25rem;
+    }
+
+    .starci-core-terminal-log:focus-visible {
+        outline: 2px solid var(--focus, Highlight);
+        outline-offset: -2px;
+    }
+
+    .starci-core-terminal-line {
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
     }
 
 
@@ -3619,7 +3802,7 @@
 
     /* Loading bubble (knowledge STATE-8): the face on its side with two Skeleton lines; a thread alternates sides. */
     .starci-core-chat-bubble-skeleton-body { inline-size: min(18rem, 70vw); white-space: normal; }
-    .starci-core-chat-bubble-skeleton-body .starci-core-skeleton { block-size: 0.875rem; }
+    .starci-core-chat-bubble-skeleton-body .starci-core-skeleton { --starci-core-skeleton-line: 0.875rem; }
     .starci-core-chat-bubble-thread { display: flex; min-width: 0; flex-direction: column; gap: 1rem; }
 
     @media (forced-colors: active) {

package/dist/core/branch/ComboBox/index.d.ts

@@ -23,12 +23,12 @@ export type ComboBoxProps = FieldControlProps & {
     readonly menuTrigger?: "input" | "focus" | "manual";
     /** Defaults to `secondary` inside a Grammar surface and `primary` outside (ANATOMY-2 case-1). */
     readonly variant?: "primary" | "secondary";
+    /** Initial unresolved content (knowledge STATE-8): the same anatomy, inert, its control painted as a Skeleton. */
+    readonly isSkeleton?: boolean;
 };
 /**
- * Type to filter a list, then pick (combobox / autocomplete).
- *
- * The vendor owns the combobox role, `aria-expanded`, `aria-activedescendant`, arrow/Enter/Escape
- * handling and the "contains" filter. Pending keeps the input editable and marks the list busy.
+ * Skeleton parity (knowledge STATE-8): `isSkeleton` renders the ready anatomy at the same props inside
+ * `FieldSkeletonScope` (inert, `aria-busy`, control box painted as a Skeleton), so the loading field keeps the ready box.
  */
-export declare const ComboBox: ({ id, options, placeholder, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, emptyState, isPending, menuTrigger, variant: requestedVariant, ...field }: ComboBoxProps) => import("react").JSX.Element;
+export declare const ComboBox: ({ isSkeleton, ...props }: ComboBoxProps) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/core/branch/ComboBox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/ComboBox/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAOH,KAAK,iBAAiB,EACzB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEjE,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC5C,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IAC3C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,kEAAkE;IAClE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,8FAA8F;IAC9F,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B,oDAAoD;IACpD,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,kGAAkG;IAClG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,iGAAiG;IACjG,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAC7C,CAAA;AAcD;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,4MAgBtB,aAAa,gCA8Df,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/ComboBox/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EASH,KAAK,iBAAiB,EACzB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEjE,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG;IAC5C,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IAC3C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvD,kEAAkE;IAClE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IACnC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,8FAA8F;IAC9F,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAA;IAC/B,oDAAoD;IACpD,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,kGAAkG;IAClG,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;IACnD,iGAAiG;IACjG,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IAC1C,kHAAkH;IAClH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAcD;;;GAGG;AACH,eAAO,MAAM,QAAQ,GAAI,0BAAkC,aAAa,gCAEpC,CAAA"}

package/dist/core/branch/ComboBox/index.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useFieldVariant } from "../../surfaceContext.js";
 import { ComboBox as HeroComboBox, Input as HeroInput, ListBox as HeroListBox, Spinner as HeroSpinner, } from "@heroui/react";
 import { useState } from "react";
-import { FieldDescription, FieldErrorText, FieldLabel, fieldVariantAttributes, useGrammarPortal, vendorFieldProps, } from "../../primitive/Field/index.js";
+import { FieldDescription, FieldErrorText, FieldLabel, FieldSkeletonScope, loadingFieldProps, fieldVariantAttributes, useGrammarPortal, vendorFieldProps, } from "../../primitive/Field/index.js";
 import { ListOptions } from "../Select/index.js";
 /*
  * Consumer hook: `starci-core-combo-box` names this control's root for a consumer or family
@@ -15,13 +15,20 @@ import { ListOptions } from "../Select/index.js";
  * paint Common leaves as it is. No shipped sheet paints them; the Grammar name lets a consumer or
  * family select those parts without reaching for vendor class names.
  */
+/**
+ * Skeleton parity (knowledge STATE-8): `isSkeleton` renders the ready anatomy at the same props inside
+ * `FieldSkeletonScope` (inert, `aria-busy`, control box painted as a Skeleton), so the loading field keeps the ready box.
+ */
+export const ComboBox = ({ isSkeleton = false, ...props }) => isSkeleton
+    ? _jsx(FieldSkeletonScope, { component: "ComboBox", children: _jsx(ComboBoxControl, { ...loadingFieldProps(props) }) })
+    : _jsx(ComboBoxControl, { ...props });
 /**
  * Type to filter a list, then pick (combobox / autocomplete).
  *
  * The vendor owns the combobox role, `aria-expanded`, `aria-activedescendant`, arrow/Enter/Escape
  * handling and the "contains" filter. Pending keeps the input editable and marks the list busy.
  */
-export const ComboBox = ({ id, options, placeholder, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue = false, emptyState, isPending = false, menuTrigger = "input", variant: requestedVariant, ...field }) => {
+const ComboBoxControl = ({ id, options, placeholder, value, defaultValue, onValueChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue = false, emptyState, isPending = false, menuTrigger = "input", variant: requestedVariant, ...field }) => {
     const variant = useFieldVariant(requestedVariant);
     const { anchor, portalProps } = useGrammarPortal();
     const [chosen, setChosen] = useState(defaultValue ?? null);

package/dist/core/branch/ComboBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/branch/ComboBox/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/branch/ComboBox/index.tsx"],"names":[],"mappings":"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"}

package/dist/core/branch/DataTable/index.d.ts

@@ -1,11 +1,23 @@
 import { type DragEventHandler, type ReactNode } from "react";
-export type DataTableColumn = {
+export type DataTableColumn<Row extends DataTableRow = DataTableRow> = {
     readonly id: string;
     readonly label: string;
     /** The column that names each row for assistive technology. Defaults to the first column. */
     readonly isRowHeader?: boolean;
     readonly allowsSorting?: boolean;
     readonly align?: "start" | "end";
+    /**
+     * Narrow-width mode. A `low` column leaves the header below the table's `collapseBelow` width and its value joins the
+     * row as stacked secondary text (its label, then its cell) under the first `high` column's content. Default `high`.
+     */
+    readonly priority?: "high" | "low";
+    /**
+     * Makes every cell of the column an editor: the render returns a Select, NumberField, TagGroup or other field for the row.
+     * The editor owns its keys and focus. Arrow keys, Enter, Space and typing stay inside it, Tab moves through the cell's fields
+     * and Escape returns focus to the cell. A table with an editor column leaves the grid's arrow-key cell navigation for
+     * cell-to-cell Tab and arrow movement from the cell itself (React Aria's `tab` keyboard behaviour), so editors work.
+     */
+    readonly editor?: (row: Row) => ReactNode;
 };
 export type DataTableSort = {
     readonly columnId: string;
@@ -13,6 +25,8 @@ export type DataTableSort = {
 };
 export type DataTableRow = {
     readonly id: string;
+    /** A destination: the whole row becomes a link target, so a click or Enter on the row navigates through the app's router. */
+    readonly href?: string;
 };
 /** Cell effects belong to the caller; the table owns cell semantics, focus and activation. */
 export type DataTableCellInteraction = {
@@ -25,7 +39,7 @@ export type DataTableCellInteraction = {
 export type DataTableProps<Row extends DataTableRow> = {
     /** Names the table, e.g. "Invoices". */
     readonly label: string;
-    readonly columns: ReadonlyArray<DataTableColumn>;
+    readonly columns: ReadonlyArray<DataTableColumn<Row>>;
     readonly rows: ReadonlyArray<Row>;
     readonly renderCell: (row: Row, columnId: string) => ReactNode;
     /** Optional cell actions and native drop events. An actionable cell receives arrow-key focus itself. */
@@ -54,7 +68,10 @@ export type DataTableProps<Row extends DataTableRow> = {
     readonly stickyHeader?: boolean;
     /** Bounds the body so the table owns vertical scroll, e.g. "24rem". */
     readonly maxBlockSize?: string;
+    /** Runs when a row is activated (click, Enter), alongside a row `href` when both are given. */
     readonly onRowAction?: (id: string) => void;
+    /** Container inline size in px below which `low` priority columns collapse into the row. Default 640. */
+    readonly collapseBelow?: number;
     readonly className?: string;
 };
 /**
@@ -63,5 +80,5 @@ export type DataTableProps<Row extends DataTableRow> = {
  * horizontal scroll so a wide table never widens a 360px page.
  * Contract: scroll LAYOUT-3, grid FOCUS-2 STATE-1, row FOCUS-1, empty STATE-3.
  */
-export declare const DataTable: <Row extends DataTableRow>({ label, columns, rows, renderCell, getCellInteraction, sort, onSortChange, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel, selectRowLabel, isLoading, loadingContent, loadingRows, emptyContent, stickyHeader, maxBlockSize, onRowAction, className, }: DataTableProps<Row>) => import("react").JSX.Element;
+export declare const DataTable: <Row extends DataTableRow>({ label, columns, rows, renderCell, getCellInteraction, sort, onSortChange, selectionMode, selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel, selectRowLabel, isLoading, loadingContent, loadingRows, emptyContent, stickyHeader, maxBlockSize, onRowAction, collapseBelow, className, }: DataTableProps<Row>) => import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/core/branch/DataTable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/DataTable/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/branch/DataTable/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmD,KAAK,gBAAgB,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKnJ,MAAM,MAAM,eAAe,CAAC,GAAG,SAAS,YAAY,GAAG,YAAY,IAAI;IACnE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,6FAA6F;IAC7F,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAChC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IAClC;;;;;OAKG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,SAAS,CAAA;CAC5C,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,SAAS,EAAE,WAAW,GAAG,YAAY,CAAA;CACjD,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACvB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,6HAA6H;IAC7H,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,8FAA8F;AAC9F,MAAM,MAAM,wBAAwB,GAAG;IACnC,6FAA6F;IAC7F,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,QAAQ,CAAC,UAAU,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACtD,QAAQ,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;IACvD,QAAQ,CAAC,MAAM,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA;CACrD,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,YAAY,IAAI;IACnD,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,aAAa,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;IACrD,QAAQ,CAAC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IACjC,QAAQ,CAAC,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAA;IAC9D,wGAAwG;IACxG,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,wBAAwB,GAAG,SAAS,CAAA;IAClG,6FAA6F;IAC7F,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,CAAA;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IACrD,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;IACvD,QAAQ,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,KAAK,CAAA;IACpD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,KAAK,CAAA;IAC3D,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,KAAK,KAAK,IAAI,CAAA;IACzE,+EAA+E;IAC/E,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,MAAM,CAAA;IAC9C;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,uFAAuF;IACvF,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAA;IACnC,iEAAiE;IACjE,QAAQ,CAAC,YAAY,EAAE,SAAS,CAAA;IAChC,mFAAmF;IACnF,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAA;IAC/B,uEAAuE;IACvE,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,+FAA+F;IAC/F,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,yGAAyG;IACzG,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAC9B,CAAA;AA+FD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,GAAG,SAAS,YAAY,EAAE,2SAuBjD,cAAc,CAAC,GAAG,CAAC,gCA0KrB,CAAA"}

package/dist/core/branch/DataTable/index.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Checkbox as HeroCheckbox, Table as HeroTable } from "@heroui/react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Skeleton } from "../../primitive/Skeleton/index.js";
 import { navigationClassName } from "../../navigationClassNames.js";
 import { ButtonPlacementProvider } from "../../buttonIntent.js";
@@ -21,6 +21,20 @@ const isNestedCellControl = (target, cell) => {
     const control = target.closest(CELL_CONTROL_SELECTOR);
     return control !== null && control !== cell && cell.contains(control);
 };
+const DEFAULT_COLLAPSE_BELOW = 640;
+// An editor owns its pointer and key gestures; they must not select the row, run its action or follow its link.
+const stopEditorPress = (event) => event.stopPropagation();
+const EditorHost = ({ children }) => (_jsx("div", { className: "starci-core-data-table-editor", "data-grammar-cell-editor": "true", onClick: stopEditorPress, onPointerDown: stopEditorPress, onPointerUp: stopEditorPress, onMouseDown: stopEditorPress, onKeyDown: (event) => {
+        if (event.key !== "Escape")
+            return;
+        const cell = event.currentTarget.closest("[role='gridcell']");
+        if (cell === null)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        cell.focus();
+    }, children: children }));
+const CellBody = ({ row, column, renderBody, collapsed, renderCell }) => (_jsxs(_Fragment, { children: [renderBody(row, column), collapsed.length === 0 ? null : (_jsx("div", { className: "starci-core-data-table-secondary", "data-grammar-table-secondary": "true", children: collapsed.map((hidden) => (_jsxs("div", { className: "starci-core-data-table-secondary-item", "data-grammar-table-secondary-column": hidden.id, children: [_jsx("span", { className: "starci-core-data-table-secondary-label", children: hidden.label }), _jsx("span", { className: "starci-core-data-table-secondary-value", children: hidden.editor === undefined ? renderCell(row, hidden.id) : _jsx(EditorHost, { children: hidden.editor(row) }) })] }, hidden.id))) }))] }));
 const toSortDescriptor = (sort) => ({ column: sort.columnId, direction: sort.direction });
 const toIds = (selection) => selection === "all" ? "all" : [...selection].map(String);
 const toSelection = (ids) => ids === "all" ? "all" : new Set(ids);
@@ -37,8 +51,31 @@ const SelectionCheckbox = ({ label }) => (_jsx(HeroCheckbox, { className: "starc
  * horizontal scroll so a wide table never widens a 360px page.
  * Contract: scroll LAYOUT-3, grid FOCUS-2 STATE-1, row FOCUS-1, empty STATE-3.
  */
-export const DataTable = ({ label, columns, rows, renderCell, getCellInteraction, sort, onSortChange, selectionMode = "none", selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel, selectRowLabel, isLoading = false, loadingContent, loadingRows = 3, emptyContent, stickyHeader = false, maxBlockSize, onRowAction, className, }) => {
-    const rowHeaderId = columns.find((column) => column.isRowHeader)?.id ?? columns[0]?.id;
+export const DataTable = ({ label, columns, rows, renderCell, getCellInteraction, sort, onSortChange, selectionMode = "none", selectedIds, defaultSelectedIds, onSelectionChange, selectAllLabel, selectRowLabel, isLoading = false, loadingContent, loadingRows = 3, emptyContent, stickyHeader = false, maxBlockSize, onRowAction, collapseBelow = DEFAULT_COLLAPSE_BELOW, className, }) => {
+    const scrollRef = useRef(null);
+    const [width, setWidth] = useState(null);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (element === null)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry !== undefined)
+                setWidth(entry.contentRect.width);
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const hasHigh = columns.some((column) => column.priority !== "low");
+    const narrow = hasHigh && width !== null && width < collapseBelow;
+    const collapsed = narrow ? columns.filter((column) => column.priority === "low") : [];
+    const shown = narrow ? columns.filter((column) => column.priority !== "low") : columns;
+    const rowHeaderId = shown.find((column) => column.isRowHeader)?.id ?? shown[0]?.id;
+    const hostColumnId = rowHeaderId;
+    const hasEditors = columns.some((column) => column.editor !== undefined);
+    const renderBody = (row, column) => column.editor === undefined
+        ? renderCell(row, column.id)
+        : _jsx(EditorHost, { children: column.editor(row) });
     const multiple = selectionMode === "multiple";
     // Selection is always held here so every row can expose its own `data-grammar-selected`.
     const [uncontrolledSelection, setUncontrolledSelection] = useState(defaultSelectedIds ?? []);
@@ -68,18 +105,18 @@ export const DataTable = ({ label, columns, rows, renderCell, getCellInteraction
         if (!event.repeat)
             action();
     };
-    return (_jsx(HeroTable, { "aria-busy": isLoading || undefined, className: navigationClassName("starci-core-data-table", className), "data-component": "DataTable", "data-tier": "branch", "data-grammar-table-state": state, "data-grammar-table-sticky": stickyHeader ? "true" : "false", "data-grammar-table-bounded": maxBlockSize === undefined ? "false" : "true", children: _jsx(HeroTable.ScrollContainer, { className: "starci-core-data-table-scroll", "data-contract": "LAYOUT-3", "data-grammar-table-scroll": "true", style: scrollStyle, onKeyDownCapture: onCellKeyDown, children: _jsxs(HeroTable.Content, { "aria-label": label, ...(getCellInteraction === undefined ? {} : { keyboardNavigationBehavior: "arrow" }), className: "starci-core-data-table-content", "data-contract": "FOCUS-2 STATE-1", selectionMode: isSkeleton ? "none" : selectionMode, ...(sort === undefined ? {} : { sortDescriptor: toSortDescriptor(sort) }), ...(onSortChange === undefined ? {} : {
+    return (_jsx(HeroTable, { "aria-busy": isLoading || undefined, className: navigationClassName("starci-core-data-table", className), "data-component": "DataTable", "data-tier": "branch", "data-grammar-table-state": state, "data-grammar-table-sticky": stickyHeader ? "true" : "false", "data-grammar-table-bounded": maxBlockSize === undefined ? "false" : "true", "data-grammar-table-narrow": narrow ? "true" : "false", "data-grammar-table-editors": hasEditors ? "true" : "false", children: _jsx(HeroTable.ScrollContainer, { ref: scrollRef, className: "starci-core-data-table-scroll", "data-contract": "LAYOUT-3", "data-grammar-table-scroll": "true", style: scrollStyle, onKeyDownCapture: onCellKeyDown, children: _jsxs(HeroTable.Content, { "aria-label": label, ...(hasEditors ? { keyboardNavigationBehavior: "tab" } : getCellInteraction === undefined ? {} : { keyboardNavigationBehavior: "arrow" }), className: "starci-core-data-table-content", "data-contract": "FOCUS-2 STATE-1", selectionMode: isSkeleton ? "none" : selectionMode, ...(sort === undefined ? {} : { sortDescriptor: toSortDescriptor(sort) }), ...(onSortChange === undefined ? {} : {
                     onSortChange: (descriptor) => onSortChange({ columnId: String(descriptor.column), direction: descriptor.direction }),
                 }), selectedKeys: toSelection(selection), onSelectionChange: (next) => {
                     const ids = toIds(next);
                     if (selectedIds === undefined)
                         setUncontrolledSelection(ids);
                     onSelectionChange?.(ids);
-                }, ...(onRowAction === undefined ? {} : { onRowAction: (key) => onRowAction(String(key)) }), children: [_jsxs(HeroTable.Header, { className: "starci-core-data-table-header", children: [multiple ? (_jsx(HeroTable.Column, { className: "starci-core-data-table-column", "data-grammar-table-selection": "true", id: SELECTION_COLUMN, children: _jsx(SelectionCheckbox, { label: selectAllLabel }) })) : null, columns.map((column) => (_jsx(HeroTable.Column, { id: column.id, allowsSorting: column.allowsSorting === true, className: "starci-core-data-table-column", "data-grammar-table-align": column.align ?? "start", isRowHeader: column.id === rowHeaderId, textValue: column.label, children: ({ sortDirection }) => column.allowsSorting === true
+                }, ...(onRowAction === undefined ? {} : { onRowAction: (key) => onRowAction(String(key)) }), children: [_jsxs(HeroTable.Header, { className: "starci-core-data-table-header", children: [multiple ? (_jsx(HeroTable.Column, { className: "starci-core-data-table-column", "data-grammar-table-selection": "true", id: SELECTION_COLUMN, children: _jsx(SelectionCheckbox, { label: selectAllLabel }) })) : null, shown.map((column) => (_jsx(HeroTable.Column, { id: column.id, allowsSorting: column.allowsSorting === true, className: "starci-core-data-table-column", "data-grammar-table-align": column.align ?? "start", isRowHeader: column.id === rowHeaderId, textValue: column.label, children: ({ sortDirection }) => column.allowsSorting === true
                                     ? _jsx(HeroTable.SortableColumnHeader, { className: "starci-core-data-table-sort", ...(sortDirection === undefined ? {} : { sortDirection }), children: column.label })
                                     : column.label }, column.id)))] }), _jsxs(HeroTable.Body, { className: "starci-core-data-table-body", renderEmptyState: () => isLoading
                             ? _jsx("div", { className: "starci-core-data-table-placeholder", "data-grammar-table-loading": "true", role: "status", children: loadingContent })
-                            : _jsx("div", { className: "starci-core-data-table-placeholder", "data-contract": "STATE-3", "data-grammar-table-empty": "true", children: emptyContent }), children: [skeletonRows.map((row) => (_jsxs(HeroTable.Row, { id: row.id, ref: hideFromAssistiveTechnology, className: "starci-core-data-table-row", "data-grammar-table-row": "true", "data-grammar-skeleton": "true", "data-grammar-selected": "false", children: [multiple ? _jsx(HeroTable.Cell, { className: "starci-core-data-table-cell", "data-grammar-table-selection": "true", children: null }) : null, columns.map((column) => (_jsx(HeroTable.Cell, { className: "starci-core-data-table-cell", "data-grammar-table-align": column.align ?? "start", children: _jsx(Skeleton, { shape: "text" }) }, column.id)))] }, row.id))), visibleRows.map((row) => (_jsxs(HeroTable.Row, { id: row.id, className: "starci-core-data-table-row", "data-contract": "FOCUS-1", "data-grammar-table-row": "true", "data-grammar-selected": selectionMode !== "none" && isRowSelected(row.id) ? "true" : "false", children: [multiple ? (_jsx(HeroTable.Cell, { className: "starci-core-data-table-cell", "data-grammar-table-selection": "true", children: _jsx(SelectionCheckbox, { label: selectRowLabel?.(row) }) })) : null, columns.map((column) => {
+                            : _jsx("div", { className: "starci-core-data-table-placeholder", "data-contract": "STATE-3", "data-grammar-table-empty": "true", children: emptyContent }), children: [skeletonRows.map((row) => (_jsxs(HeroTable.Row, { id: row.id, ref: hideFromAssistiveTechnology, className: "starci-core-data-table-row", "data-grammar-table-row": "true", "data-grammar-skeleton": "true", "data-grammar-selected": "false", children: [multiple ? _jsx(HeroTable.Cell, { className: "starci-core-data-table-cell", "data-grammar-table-selection": "true", children: null }) : null, shown.map((column) => (_jsx(HeroTable.Cell, { className: "starci-core-data-table-cell", "data-grammar-table-align": column.align ?? "start", children: _jsx(Skeleton, { shape: "text" }) }, column.id)))] }, row.id))), visibleRows.map((row) => (_jsxs(HeroTable.Row, { id: row.id, className: "starci-core-data-table-row", "data-contract": "FOCUS-1", "data-grammar-table-row": "true", ...(row.href === undefined ? {} : { href: row.href }), "data-grammar-table-row-link": row.href === undefined ? "false" : "true", "data-grammar-selected": selectionMode !== "none" && isRowSelected(row.id) ? "true" : "false", children: [multiple ? (_jsx(HeroTable.Cell, { className: "starci-core-data-table-cell", "data-grammar-table-selection": "true", children: _jsx(SelectionCheckbox, { label: selectRowLabel?.(row) }) })) : null, shown.map((column) => {
                                         const interaction = getCellInteraction?.(row, column.id);
                                         return _jsx(HeroTable.Cell, { className: "starci-core-data-table-cell", "data-grammar-table-align": column.align ?? "start", "data-grammar-cell-interaction": interaction === undefined ? "false" : "true", "data-grammar-row-id": row.id, "data-grammar-column-id": column.id, ...(interaction?.onAction === undefined ? {} : {
                                                 focusMode: "cell",
@@ -90,7 +127,7 @@ export const DataTable = ({ label, columns, rows, renderCell, getCellInteraction
                                                     event.stopPropagation();
                                                     interaction.onAction?.();
                                                 },
-                                            }), children: _jsx(ButtonPlacementProvider, { placement: "item", children: interaction === undefined ? renderCell(row, column.id) : (_jsx("div", { className: "starci-core-data-table-cell-content", ...(interaction.onDragOver === undefined ? {} : { onDragOver: interaction.onDragOver }), ...(interaction.onDragLeave === undefined ? {} : { onDragLeave: interaction.onDragLeave }), ...(interaction.onDrop === undefined ? {} : { onDrop: interaction.onDrop }), children: renderCell(row, column.id) })) }) }, column.id);
+                                            }), children: _jsx(ButtonPlacementProvider, { placement: "item", children: interaction === undefined ? _jsx(CellBody, { row: row, column: column, renderBody: renderBody, collapsed: column.id === hostColumnId ? collapsed : [], renderCell: renderCell }) : (_jsx("div", { className: "starci-core-data-table-cell-content", ...(interaction.onDragOver === undefined ? {} : { onDragOver: interaction.onDragOver }), ...(interaction.onDragLeave === undefined ? {} : { onDragLeave: interaction.onDragLeave }), ...(interaction.onDrop === undefined ? {} : { onDrop: interaction.onDrop }), children: _jsx(CellBody, { row: row, column: column, renderBody: renderBody, collapsed: column.id === hostColumnId ? collapsed : [], renderCell: renderCell }) })) }) }, column.id);
                                     })] }, row.id)))] })] }) }) }));
 };
 //# sourceMappingURL=index.js.map