@kerfjs/ui 5.0.0-beta.111 → 5.0.0-beta.112

package/dist/{chunk-VGECEXM6.js → chunk-S3DCRI2M.js}

@@ -20,7 +20,11 @@ var DIALOG_SURFACE_PROTECTED = /* @__PURE__ */ new Set([
   "data-resizable",
   "data-enter-motion",
   "data-exit-motion",
-  "data-light-dismiss"
+  "data-light-dismiss",
+  "data-stack-open",
+  "data-stack-active",
+  "data-stack-position",
+  "data-stack-count"
 ]);
 function DialogSurface({
   id,
@@ -36,6 +40,7 @@ function DialogSurface({
   closeLabel = "Close",
   closeEmphasis = "normal",
   children,
+  stack,
   size = "medium",
   presentation = "modal",
   preferredWidth,
@@ -56,13 +61,18 @@ function DialogSurface({
   className = "",
   slot
 }) {
+  if (stack && (!Number.isInteger(stack.position) || !Number.isInteger(stack.count) || stack.count < 1 || stack.position < 1 || stack.position > stack.count || stack.active && !stack.open))
+    throw new RangeError(
+      "DialogSurface stack needs a valid frontmost active layer"
+    );
   const style = [
     preferredWidth === void 0 ? "" : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,
     viewportGutter === void 0 ? "" : `--_kui-dialog-surface-gutter:${viewportGutter}`,
     maxHeight === void 0 || maxHeight === "viewport" ? "" : `--_kui-dialog-surface-max-height:${maxHeight}`,
     height === void 0 || height === "viewport" ? "" : `--_kui-dialog-surface-height:${height}`,
     footerOffset === void 0 ? "" : `--_kui-dialog-surface-footer-offset:${footerOffset}`,
-    minHeight === void 0 ? "" : `--_kui-dialog-surface-min-height:${minHeight}`
+    minHeight === void 0 ? "" : `--_kui-dialog-surface-min-height:${minHeight}`,
+    stack?.offset === void 0 ? "" : `--_kui-dialog-surface-stack-offset:${stack.offset}`
   ].filter(Boolean).join(";");
   return /* @__PURE__ */ jsxs(
     "dialog",
@@ -74,15 +84,22 @@ function DialogSurface({
       "aria-label": label,
       "aria-labelledby": labelledBy,
       "aria-describedby": describedBy,
+      "aria-modal": stack ? stack.open && stack.active ? "true" : "false" : void 0,
+      "aria-hidden": stack ? stack.open && stack.active ? "false" : "true" : void 0,
+      inert: stack && (!stack.open || !stack.active) ? true : void 0,
       tabindex: -1,
       "data-light-dismiss": lightDismiss ? "" : void 0,
       "data-component": "dialog-surface",
+      "data-stack-open": stack ? String(stack.open) : void 0,
+      "data-stack-active": stack ? String(stack.active) : void 0,
+      "data-stack-position": stack?.position,
+      "data-stack-count": stack?.count,
       "data-size": size,
       "data-presentation": presentation,
       "data-preferred-width": preferredWidth === void 0 ? void 0 : "",
       "data-body-inset": bodyInset,
       "data-footer-inset": footerInset,
-      "data-viewport-gutter": viewportGutter === void 0 ? void 0 : "",
+      "data-viewport-gutter": viewportGutter === void 0 && !stack ? void 0 : "",
       "data-max-height": maxHeight === void 0 ? void 0 : "",
       "data-height": height === void 0 ? void 0 : "",
       "data-body-layout": bodyLayout === "flow" ? void 0 : bodyLayout,
@@ -210,4 +227,4 @@ function PopupSurface({
 
 export { DialogSurface, PopoverDialogSurface, PopupSurface };
 
-//# sourceMappingURL=chunk-VGECEXM6.js.map
+//# sourceMappingURL=chunk-S3DCRI2M.js.map

package/dist/chunk-S3DCRI2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/surface-scaffold/surface-scaffold.tsx"],"names":[],"mappings":"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","file":"chunk-S3DCRI2M.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n  syncDialogStack,\n  wireDialogStack,\n} from './internal/dialog-surface-controller.js';\n\nexport type DialogSurfaceSize = 'small' | 'medium' | 'large';\n/**\n * How the dialog is presented: `modal` (default) centered on the screen,\n * `side-sheet` against the inline end, `fullscreen`, or `bottom-sheet`\n * attached to the bottom edge (square bottom corners, safe-area and\n * virtual-keyboard clearance, optionally user-resizable).\n */\nexport type DialogSurfacePresentation =\n  'modal' | 'side-sheet' | 'fullscreen' | 'bottom-sheet';\n/**\n * How a bottom sheet appears or leaves: `slide` (default) moves the panel in\n * from, or out to, the bottom edge; `standard` keeps the dialog's\n * scale-and-fade. Both honor `prefers-reduced-motion`.\n */\nexport type DialogSurfaceSheetMotion = 'slide' | 'standard';\nexport type SurfaceInset = 'none' | 'compact' | 'comfortable';\nexport type DialogSurfaceMaxHeight = CssLength | 'viewport';\n/** A definite modal height: a length or the full viewport, minus both gutters. */\nexport type DialogSurfaceHeight = CssLength | 'viewport';\n/**\n * How the dialog body lays out its children: `flow` (default) scrolls ordinary\n * content in the body; `fill` gives one child the body's whole height and\n * lets it own scrolling (a SplitView, a Pane, an editor); `fill-last` stacks\n * the leading children at their natural height and gives the last child the\n * remaining height to own its scrolling (a heading and notices above a\n * scrolling transcript).\n */\nexport type DialogSurfaceBodyLayout = 'flow' | 'fill' | 'fill-last';\n/**\n * Where the dialog footer sits: `docked` (default) below the body, or\n * `floating` over the body's block end, inset from the panel's inline and\n * block-end edges on a transparent background (a chat composer).\n */\nexport type DialogSurfaceFooterPresentation = 'docked' | 'floating';\n/**\n * Where the dialog header sits: `docked` (default) above the body, or\n * `floating` over the body's block-start edge on the translucent chrome\n * material, so content scrolls visibly beneath the title bar.\n */\nexport type DialogSurfaceHeaderPresentation = 'docked' | 'floating';\n\n/** The built-in close control's visual weight; `normal` keeps the default. */\nexport type DialogSurfaceCloseEmphasis = 'normal' | 'quiet';\n\n/**\n * Application `data-*` identity on the DialogSurface root, such as\n * `data-key`; the surface's own configuration attributes stay protected.\n */\nexport type DialogSurfaceRootAttributes = Readonly<\n  Record<`data-${string}`, string | undefined>\n>;\n\nconst DIALOG_SURFACE_PROTECTED = new Set([\n  'data-component',\n  'data-size',\n  'data-presentation',\n  'data-preferred-width',\n  'data-body-inset',\n  'data-footer-inset',\n  'data-viewport-gutter',\n  'data-max-height',\n  'data-height',\n  'data-body-layout',\n  'data-footer-presentation',\n  'data-header-presentation',\n  'data-min-height',\n  'data-resizable',\n  'data-enter-motion',\n  'data-exit-motion',\n  'data-light-dismiss',\n  'data-stack-open',\n  'data-stack-active',\n  'data-stack-position',\n  'data-stack-count',\n]);\n\n/**\n * The dialog's accessible name: its `label` text (also the default title), or\n * the id of an element that names it, such as a `heading` ToolbarText.\n */\nexport type DialogSurfaceName =\n  { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type DialogSurfaceProps = DialogSurfaceName & DialogSurfaceOptions;\n\n/** Controlled state of one native modal layer inside a `wireDialogStack` root. */\nexport interface DialogSurfaceStack {\n  /** Whether this layer belongs in the native top layer. */\n  open: boolean;\n  /** The one frontmost open layer; it owns modal focus and accessibility. */\n  active: boolean;\n  /** One-based order from the back to the front. */\n  position: number;\n  /** Number of layers in the stack, including closed layers still rendered. */\n  count: number;\n  /** Optional vertical offset for an inactive layer; omitted on phones. */\n  offset?: CssLength;\n}\n\nexport interface DialogSurfaceOptions {\n  /** The dialog's id, for `openDialog(document.getElementById(id))`. */\n  id?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as the `heading` ToolbarText's `descriptionId` or app-owned summary\n   * copy in the body; rendered as `aria-describedby` on the `<dialog>`.\n   */\n  describedBy?: string;\n  /**\n   * An alert dialog: a confirmation that interrupts the person to report\n   * something urgent or ask before a destructive action (\"Delete this\n   * topic?\"). Renders `role=\"alertdialog\"` on the `<dialog>`; set\n   * `describedBy` to the element holding the message, and leave\n   * `lightDismiss` off so the person answers it.\n   */\n  alert?: boolean;\n  /** The body content. */\n  children: KerfUiContent;\n  /** Controlled modal stack state; call `wireDialogStack` on the containing root. */\n  stack?: DialogSurfaceStack;\n  /**\n   * Header title content in place of the `label` text, such as an xl\n   * `ToolbarText` with a description. The dialog keeps its `label` (or\n   * `labelledBy`) name.\n   */\n  heading?: KerfUiContent;\n  /** Controls before the close button in the header. */\n  headerActions?: KerfUiContent;\n  /** The footer, below the body (or floating over it); usually its buttons. */\n  footer?: KerfUiContent;\n  /**\n   * Render no header: no title and no close button. The content then owns its\n   * heading and a way to close (an element with `data-dialog-close`).\n   */\n  withoutHeader?: boolean;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** The close button's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Soften the built-in close control without changing its 40px target. */\n  closeEmphasis?: DialogSurfaceCloseEmphasis;\n  size?: DialogSurfaceSize;\n  presentation?: DialogSurfacePresentation;\n  /** Modal preferred width. Takes precedence over size, within the viewport cap. */\n  preferredWidth?: CssLength;\n  bodyInset?: SurfaceInset;\n  footerInset?: SurfaceInset;\n  /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */\n  viewportGutter?: CssLength;\n  /**\n   * Modal height cap, bounded by the dynamic viewport minus both gutters. On a\n   * bottom sheet, the cap (and the resize ceiling), bounded by the dynamic\n   * viewport minus the top safe area and one gutter.\n   */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /**\n   * Modal definite height, bounded the same way, so a filling child has a\n   * height to fill. Takes precedence over `maxHeight`. On a bottom sheet, the\n   * height it opens at (the visible height above the safe area or keyboard).\n   */\n  height?: DialogSurfaceHeight;\n  /**\n   * A resizable bottom sheet's resize floor (default 160px), the visible\n   * height above the safe area or keyboard.\n   */\n  minHeight?: CssLength;\n  /**\n   * Let the person resize a bottom sheet by its top grabber (drag, or the\n   * arrow, Page Up/Down, Home and End keys) between `minHeight` and the\n   * sheet's cap. Needs the `/register` entry; each opening starts at `height`\n   * (or the content height). Ignored by other presentations.\n   */\n  resizable?: boolean;\n  /** How a bottom sheet appears (default `slide` up from the bottom edge). */\n  enterMotion?: DialogSurfaceSheetMotion;\n  /** How a bottom sheet is dismissed (default `slide` down off the bottom edge). */\n  exitMotion?: DialogSurfaceSheetMotion;\n  /**\n   * Body layout (default `flow`); `fill` lets one child own the body and\n   * `fill-last` stacks fixed rows above one filling last child.\n   */\n  bodyLayout?: DialogSurfaceBodyLayout;\n  /**\n   * Header placement (default `docked`); `floating` lays the dialog's header\n   * (its title and close control) over the body's block-start edge on the\n   * translucent chrome material (`--kui-chrome-material-raised`, opaque under\n   * `prefers-reduced-transparency`, increased contrast, forced colors, or\n   * without `backdrop-filter`). The `/register` entry measures the header;\n   * the body reserves that height before its own inset, so its first content\n   * rests below the title bar. A `fill`/`fill-last` child that is the body's\n   * only child and opts into block-start `scrollClearance` (a `List` or\n   * `Pane`) takes the clearance inside its own scroll area instead, published\n   * as `--kui-scroll-clearance-block-start`, so its content scrolls visibly\n   * beneath the header. Unmeasured (without the register), the header stays\n   * docked. Keep header text in the normal text color: quiet text can fall\n   * below AA over the content passing beneath it.\n   */\n  headerPresentation?: DialogSurfaceHeaderPresentation;\n  /**\n   * Footer placement (default `docked`); `floating` lays the footer over the\n   * body's block end. The body reserves the footer's measured height so its\n   * last content is never hidden beneath it. A `fill`/`fill-last` child that\n   * opts into block-end `scrollClearance` (a `List` or `Pane`) takes that\n   * clearance inside its own scroll area instead, published as\n   * `--kui-scroll-clearance-block-end`, so its content scrolls visibly beneath\n   * the transparent footer.\n   */\n  footerPresentation?: DialogSurfaceFooterPresentation;\n  /**\n   * A floating footer's clearance from the panel's inline and block-end edges\n   * (default the 16px container inset). Choose a phone value such as\n   * `remify(8)` from `deviceClass()`; the scaffold adds no breakpoint.\n   */\n  footerOffset?: CssLength;\n  /**\n   * Safe `data-*` identity on the root. Give sibling dialogs distinct\n   * `data-key`s so a re-render morphs each surface into itself instead of\n   * reusing one dialog's element for another (structurally identical roots\n   * are otherwise matched by position).\n   */\n  rootAttributes?: DialogSurfaceRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/**\n * A modal dialog: a native `<dialog>` with Kerf's header, body, and footer\n * chrome, sized and presented by its props. Render it closed, then open it\n * with `openDialog()` and close it with `closeDialog()`, the close button, an\n * element with `data-dialog-close`, Escape, or (with `lightDismiss`) a press\n * on the backdrop. Import `@kerfjs/ui/surface-scaffold/register` for the\n * floating header and footer measurement, the bottom sheet's keyboard\n * clearance and grabber, and re-render resilience while open.\n */\nexport function DialogSurface({\n  id,\n  label,\n  labelledBy,\n  describedBy,\n  alert = false,\n  heading,\n  headerActions,\n  footer,\n  withoutHeader = false,\n  lightDismiss = false,\n  closeLabel = 'Close',\n  closeEmphasis = 'normal',\n  children,\n  stack,\n  size = 'medium',\n  presentation = 'modal',\n  preferredWidth,\n  bodyInset = 'compact',\n  footerInset = 'comfortable',\n  viewportGutter,\n  maxHeight,\n  height,\n  minHeight,\n  resizable = false,\n  enterMotion = 'slide',\n  exitMotion = 'slide',\n  bodyLayout = 'flow',\n  headerPresentation = 'docked',\n  footerPresentation = 'docked',\n  footerOffset,\n  rootAttributes = {},\n  className = '',\n  slot,\n}: DialogSurfaceProps) {\n  if (\n    stack &&\n    (!Number.isInteger(stack.position) ||\n      !Number.isInteger(stack.count) ||\n      stack.count < 1 ||\n      stack.position < 1 ||\n      stack.position > stack.count ||\n      (stack.active && !stack.open))\n  )\n    throw new RangeError(\n      'DialogSurface stack needs a valid frontmost active layer',\n    );\n  const style = [\n    preferredWidth === undefined\n      ? ''\n      : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,\n    viewportGutter === undefined\n      ? ''\n      : `--_kui-dialog-surface-gutter:${viewportGutter}`,\n    maxHeight === undefined || maxHeight === 'viewport'\n      ? ''\n      : `--_kui-dialog-surface-max-height:${maxHeight}`,\n    height === undefined || height === 'viewport'\n      ? ''\n      : `--_kui-dialog-surface-height:${height}`,\n    footerOffset === undefined\n      ? ''\n      : `--_kui-dialog-surface-footer-offset:${footerOffset}`,\n    minHeight === undefined\n      ? ''\n      : `--_kui-dialog-surface-min-height:${minHeight}`,\n    stack?.offset === undefined\n      ? ''\n      : `--_kui-dialog-surface-stack-offset:${stack.offset}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <dialog\n      {...filterDataAttributes(rootAttributes, DIALOG_SURFACE_PROTECTED)}\n      id={id}\n      class={`kui-dialog-surface ${className}`.trim()}\n      role={alert ? 'alertdialog' : undefined}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      aria-modal={\n        stack ? (stack.open && stack.active ? 'true' : 'false') : undefined\n      }\n      aria-hidden={\n        stack ? (stack.open && stack.active ? 'false' : 'true') : undefined\n      }\n      inert={stack && (!stack.open || !stack.active) ? true : undefined}\n      tabindex={-1}\n      data-light-dismiss={lightDismiss ? '' : undefined}\n      data-component=\"dialog-surface\"\n      data-stack-open={stack ? String(stack.open) : undefined}\n      data-stack-active={stack ? String(stack.active) : undefined}\n      data-stack-position={stack?.position}\n      data-stack-count={stack?.count}\n      data-size={size}\n      data-presentation={presentation}\n      data-preferred-width={preferredWidth === undefined ? undefined : ''}\n      data-body-inset={bodyInset}\n      data-footer-inset={footerInset}\n      data-viewport-gutter={\n        viewportGutter === undefined && !stack ? undefined : ''\n      }\n      data-max-height={maxHeight === undefined ? undefined : ''}\n      data-height={height === undefined ? undefined : ''}\n      data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n      data-header-presentation={\n        headerPresentation === 'floating' ? 'floating' : undefined\n      }\n      data-footer-presentation={\n        footerPresentation === 'floating' ? 'floating' : undefined\n      }\n      data-min-height={minHeight === undefined ? undefined : ''}\n      data-resizable={resizable ? '' : undefined}\n      data-enter-motion={enterMotion === 'slide' ? undefined : enterMotion}\n      data-exit-motion={exitMotion === 'slide' ? undefined : exitMotion}\n      style={style || undefined}\n      slot={slot}\n    >\n      {withoutHeader ? null : (\n        <header class=\"kui-dialog-surface__header\">\n          {heading === undefined ? (\n            <h2 class=\"kui-dialog-surface__title\">{label}</h2>\n          ) : (\n            <div class=\"kui-dialog-surface__title\">{heading}</div>\n          )}\n          <div class=\"kui-dialog-surface__header-actions\">\n            {headerActions}\n            <button\n              type=\"button\"\n              class=\"kui-dialog-surface__close\"\n              aria-label={closeLabel}\n              data-emphasis={closeEmphasis === 'quiet' ? 'quiet' : undefined}\n              data-dialog-close=\"\"\n            >\n              <LucideIcon\n                icon={X}\n                name=\"x\"\n                size={closeEmphasis === 'quiet' ? 'm' : 'l'}\n              />\n            </button>\n          </div>\n        </header>\n      )}\n      {presentation === 'bottom-sheet' && resizable ? (\n        <div\n          class=\"kui-dialog-surface__sheet-handle\"\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          aria-label=\"Resize sheet\"\n          tabindex={0}\n        />\n      ) : null}\n      <div class=\"kui-dialog-surface__body\">{children}</div>\n      {footer === undefined ? null : (\n        <footer class=\"kui-dialog-surface__footer\">{footer}</footer>\n      )}\n      {/* Where kerfjs/overlay hosts a popover or tooltip opened inside the\n          modal dialog, so it stays interactive above the inert page. */}\n      <div data-kerf-overlay-host data-morph-skip style=\"display:contents\" />\n    </dialog>\n  );\n}\n\n/** Where a PopoverDialogSurface appears: the top layer, or in flow. */\nexport type PopoverDialogSurfacePresentation = 'overlay' | 'embedded';\n\n/** Application `data-*` metadata on the surface root. */\nexport type PopoverDialogSurfaceDataAttributes = Readonly<\n  Record<`data-${string}`, string>\n>;\n\ntype PopoverDialogSurfaceName =\n  { label: string; labelledBy?: never } | { label?: never; labelledBy: string };\n\nexport type PopoverDialogSurfaceProps = PopoverDialogSurfaceName & {\n  /** The root id: what an opening control's `popovertarget` names. */\n  id?: string;\n  /**\n   * Id of the element whose text is the dialog's accessible description,\n   * such as a title `ToolbarText`'s `descriptionId`; rendered as\n   * `aria-describedby` on the `role=\"dialog\"` root.\n   */\n  describedBy?: string;\n  children: KerfUiContent;\n  /**\n   * `overlay` (default) is a native `popover=\"auto\"` in the top layer:\n   * non-modal, light dismiss (Escape or a press outside), nothing inert.\n   * `embedded` renders the same surface in flow for a catalog or inline use.\n   */\n  presentation?: PopoverDialogSurfacePresentation;\n  /** Preferred width preset: 400px, 560px (default), or 800px. */\n  size?: DialogSurfaceSize;\n  /** Preferred width; takes precedence over `size`, within the viewport cap. */\n  preferredWidth?: CssLength;\n  /** Definite height, bounded by the dynamic viewport minus both gutters. */\n  height?: DialogSurfaceHeight;\n  /** Height cap, bounded the same way, for a surface that sizes to content. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Edge clearance on each side of the viewport (default 16px). */\n  viewportGutter?: CssLength;\n  /**\n   * Body layout (default `flow`); `fill` lets one child own the surface and\n   * `fill-last` stacks fixed rows above one filling last child.\n   */\n  bodyLayout?: DialogSurfaceBodyLayout;\n  rootAttributes?: PopoverDialogSurfaceDataAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n};\n\nconst POPOVER_DIALOG_PROTECTED = new Set([\n  'data-component',\n  'data-presentation',\n  'data-size',\n  'data-height',\n  'data-max-height',\n  'data-body-layout',\n]);\n\n/**\n * A non-modal dialog surface on the native Popover API: Kerf's dialog chrome,\n * viewport-bounded size, and single-child fill without application CSS.\n * Open it with a `popovertarget` control or `showPopover()`; it light\n * dismisses and leaves the page interactive. Use `DialogSurface` when the\n * task must block the page.\n */\nexport function PopoverDialogSurface({\n  id,\n  children,\n  label,\n  labelledBy,\n  describedBy,\n  presentation = 'overlay',\n  size = 'medium',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  bodyLayout = 'flow',\n  rootAttributes = {},\n  className = '',\n  slot,\n}: PopoverDialogSurfaceProps) {\n  const style = [\n    preferredWidth === undefined\n      ? ''\n      : `--_kui-popover-dialog-surface-preferred-width:${preferredWidth}`,\n    viewportGutter === undefined\n      ? ''\n      : `--_kui-popover-dialog-surface-gutter:${viewportGutter}`,\n    height === undefined || height === 'viewport'\n      ? ''\n      : `--_kui-popover-dialog-surface-height:${height}`,\n    maxHeight === undefined || maxHeight === 'viewport'\n      ? ''\n      : `--_kui-popover-dialog-surface-max-height:${maxHeight}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <section\n      {...filterDataAttributes(rootAttributes, POPOVER_DIALOG_PROTECTED)}\n      id={id}\n      class={`kui-popover-dialog-surface ${className}`.trim()}\n      data-component=\"popover-dialog-surface\"\n      data-presentation={presentation}\n      data-size={size}\n      data-height={height === undefined ? undefined : ''}\n      data-max-height={maxHeight === undefined ? undefined : ''}\n      data-body-layout={bodyLayout === 'flow' ? undefined : bodyLayout}\n      popover={presentation === 'overlay' ? 'auto' : undefined}\n      role=\"dialog\"\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      aria-describedby={describedBy}\n      style={style || undefined}\n      slot={slot}\n    >\n      {children}\n    </section>\n  );\n}\n\nexport type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';\n\nexport interface PopupSurfaceProps {\n  children: KerfUiContent;\n  inset?: PopupSurfaceInset;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */\nexport function PopupSurface({\n  children,\n  inset = 'standard',\n  className = '',\n  slot,\n}: PopupSurfaceProps) {\n  return (\n    <span\n      class={`kui-popup-surface ${className}`.trim()}\n      data-component=\"popup-surface\"\n      data-inset={inset}\n      slot={slot}\n    >\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/chunk-V6N3YLTM.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/components/surfaces/editor-frame/editor-frame.tsx
+var unsafeStyleValue = /[;{}<>"'\\]|\p{Cc}/u;
+function styleValue(value, prop) {
+  const trimmed = value.trim();
+  if (!trimmed || unsafeStyleValue.test(trimmed))
+    throw new TypeError(`EditorFrame ${prop} requires one CSS length.`);
+  return trimmed;
+}
+function EditorFrame({
+  toolbar,
+  children,
+  mode,
+  appearance = "framed",
+  inset = "padded",
+  expanded = false,
+  height,
+  maxWidth,
+  sourceHeight,
+  sourceAutosize = false,
+  label,
+  rootAttributes = {},
+  slot
+}) {
+  const style = [
+    height === void 0 ? "" : `--_kui-editor-frame-height:${styleValue(height, "height")}`,
+    maxWidth === void 0 ? "" : `--_kui-editor-frame-max-width:${styleValue(maxWidth, "maxWidth")}`,
+    sourceHeight === void 0 ? "" : `--_kui-editor-frame-source-height:${styleValue(sourceHeight, "sourceHeight")}`
+  ].filter(Boolean).join(";");
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...rootAttributes,
+      class: "kui-editor-frame",
+      "data-component": "editor-frame",
+      "data-mode": mode,
+      "data-appearance": appearance,
+      "data-inset": inset,
+      "data-expanded": String(expanded),
+      "data-source-autosize": String(sourceAutosize),
+      role: label ? "region" : void 0,
+      "aria-label": label,
+      style: style || void 0,
+      slot,
+      children: [
+        toolbar === void 0 ? null : /* @__PURE__ */ jsx("div", { class: "kui-editor-frame__toolbar", children: toolbar }),
+        /* @__PURE__ */ jsx("div", { class: "kui-editor-frame__surface", children })
+      ]
+    }
+  );
+}
+
+export { EditorFrame };
+
+//# sourceMappingURL=chunk-V6N3YLTM.js.map

package/dist/chunk-V6N3YLTM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/editor-frame/editor-frame.tsx"],"names":[],"mappings":";;;AAGA,IAAM,gBAAA,GAAmB,qBAAA;AAEzB,SAAS,UAAA,CAAW,OAAkB,IAAA,EAAsB;AAC1D,EAAA,MAAM,OAAA,GAAU,MAAM,IAAA,EAAK;AAC3B,EAAA,IAAI,CAAC,OAAA,IAAW,gBAAA,CAAiB,IAAA,CAAK,OAAO,CAAA;AAC3C,IAAA,MAAM,IAAI,SAAA,CAAU,CAAA,YAAA,EAAe,IAAI,CAAA,yBAAA,CAA2B,CAAA;AACpE,EAAA,OAAO,OAAA;AACT;AAsCO,SAAS,WAAA,CAAY;AAAA,EAC1B,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,QAAA;AAAA,EACR,QAAA,GAAW,KAAA;AAAA,EACX,MAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,KAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,WAAW,MAAA,GACP,EAAA,GACA,8BAA8B,UAAA,CAAW,MAAA,EAAQ,QAAQ,CAAC,CAAA,CAAA;AAAA,IAC9D,aAAa,MAAA,GACT,EAAA,GACA,iCAAiC,UAAA,CAAW,QAAA,EAAU,UAAU,CAAC,CAAA,CAAA;AAAA,IACrE,iBAAiB,MAAA,GACb,EAAA,GACA,qCAAqC,UAAA,CAAW,YAAA,EAAc,cAAc,CAAC,CAAA;AAAA,GACnF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,KAAA,EAAM,kBAAA;AAAA,MACN,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,MAC9B,sBAAA,EAAsB,OAAO,cAAc,CAAA;AAAA,MAC3C,IAAA,EAAM,QAAQ,QAAA,GAAW,MAAA;AAAA,MACzB,YAAA,EAAY,KAAA;AAAA,MACZ,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,KAAY,SAAY,IAAA,mBACvB,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,6BAA6B,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAElD,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAAA,EAA6B,QAAA,EAAS;AAAA;AAAA;AAAA,GACnD;AAEJ","file":"chunk-V6N3YLTM.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\nconst unsafeStyleValue = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction styleValue(value: CssLength, prop: string): string {\n  const trimmed = value.trim();\n  if (!trimmed || unsafeStyleValue.test(trimmed))\n    throw new TypeError(`EditorFrame ${prop} requires one CSS length.`);\n  return trimmed;\n}\n\nexport type EditorFrameMode = 'source' | 'preview';\nexport type EditorFrameAppearance = 'framed' | 'embedded';\nexport type EditorFrameInset = 'padded' | 'flush';\n\nexport interface EditorFrameProps {\n  /** A Toolbar or other fixed controls above the writing surface. */\n  toolbar?: KerfUiContent;\n  /** A native textarea in source mode, or rendered content in preview mode. */\n  children: KerfUiContent;\n  mode: EditorFrameMode;\n  /** Framed fixed-height card (default) or unframed content within a host. */\n  appearance?: EditorFrameAppearance;\n  /** Remove the writing surface inset when the host owns the text column. */\n  inset?: EditorFrameInset;\n  /** Fill the viewport inset as a raised editor overlay. */\n  expanded?: boolean;\n  /** Framed block size; defaults to 320px. Ignored while expanded or embedded. */\n  height?: CssLength;\n  /** Maximum framed inline size; defaults to 672px. */\n  maxWidth?: CssLength;\n  /** Embedded source height restored by the app. */\n  sourceHeight?: CssLength;\n  /** Let an embedded native textarea grow with its content. */\n  sourceAutosize?: boolean;\n  /** Name a distinct editor region for assistive technology. */\n  label?: string;\n  /** App-owned root identity for delegation or a stable morph key. */\n  rootAttributes?: Readonly<Record<`data-${string}`, string | undefined>>;\n  slot?: string;\n}\n\n/**\n * A fixed toolbar over one writing surface. Source mode gives a native\n * textarea the scrollport; preview mode scrolls the surface around rendered\n * content. The app owns editing, draft restoration, and preview actions.\n */\nexport function EditorFrame({\n  toolbar,\n  children,\n  mode,\n  appearance = 'framed',\n  inset = 'padded',\n  expanded = false,\n  height,\n  maxWidth,\n  sourceHeight,\n  sourceAutosize = false,\n  label,\n  rootAttributes = {},\n  slot,\n}: EditorFrameProps) {\n  const style = [\n    height === undefined\n      ? ''\n      : `--_kui-editor-frame-height:${styleValue(height, 'height')}`,\n    maxWidth === undefined\n      ? ''\n      : `--_kui-editor-frame-max-width:${styleValue(maxWidth, 'maxWidth')}`,\n    sourceHeight === undefined\n      ? ''\n      : `--_kui-editor-frame-source-height:${styleValue(sourceHeight, 'sourceHeight')}`,\n  ]\n    .filter(Boolean)\n    .join(';');\n  return (\n    <section\n      {...rootAttributes}\n      class=\"kui-editor-frame\"\n      data-component=\"editor-frame\"\n      data-mode={mode}\n      data-appearance={appearance}\n      data-inset={inset}\n      data-expanded={String(expanded)}\n      data-source-autosize={String(sourceAutosize)}\n      role={label ? 'region' : undefined}\n      aria-label={label}\n      style={style || undefined}\n      slot={slot}\n    >\n      {toolbar === undefined ? null : (\n        <div class=\"kui-editor-frame__toolbar\">{toolbar}</div>\n      )}\n      <div class=\"kui-editor-frame__surface\">{children}</div>\n    </section>\n  );\n}\n"]}

package/dist/content-item.d.ts

@@ -38,6 +38,8 @@ interface ContentItemMedia {
     blurredSrc?: string;
     /** Shared BackdropImage blur behavior; use instead of `blurredSrc`. */
     blur?: BackdropImageBlur;
+    /** Skip offscreen media painting in long feeds while retaining card geometry. */
+    deferOffscreen?: boolean;
     /** Color the image dissolves into and the card body continues on. */
     fadeTo?: CssColor;
     /** Content layered over the image, including native controls. */

package/dist/content-item.js

@@ -1,4 +1,4 @@
-export { ContentItem } from './chunk-WD6KABEU.js';
+export { ContentItem } from './chunk-3KFMLOTH.js';
 
 
 

package/dist/editor-frame.d.ts

@@ -0,0 +1,41 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+
+type EditorFrameMode = 'source' | 'preview';
+type EditorFrameAppearance = 'framed' | 'embedded';
+type EditorFrameInset = 'padded' | 'flush';
+interface EditorFrameProps {
+    /** A Toolbar or other fixed controls above the writing surface. */
+    toolbar?: KerfUiContent;
+    /** A native textarea in source mode, or rendered content in preview mode. */
+    children: KerfUiContent;
+    mode: EditorFrameMode;
+    /** Framed fixed-height card (default) or unframed content within a host. */
+    appearance?: EditorFrameAppearance;
+    /** Remove the writing surface inset when the host owns the text column. */
+    inset?: EditorFrameInset;
+    /** Fill the viewport inset as a raised editor overlay. */
+    expanded?: boolean;
+    /** Framed block size; defaults to 320px. Ignored while expanded or embedded. */
+    height?: CssLength;
+    /** Maximum framed inline size; defaults to 672px. */
+    maxWidth?: CssLength;
+    /** Embedded source height restored by the app. */
+    sourceHeight?: CssLength;
+    /** Let an embedded native textarea grow with its content. */
+    sourceAutosize?: boolean;
+    /** Name a distinct editor region for assistive technology. */
+    label?: string;
+    /** App-owned root identity for delegation or a stable morph key. */
+    rootAttributes?: Readonly<Record<`data-${string}`, string | undefined>>;
+    slot?: string;
+}
+/**
+ * A fixed toolbar over one writing surface. Source mode gives a native
+ * textarea the scrollport; preview mode scrolls the surface around rendered
+ * content. The app owns editing, draft restoration, and preview actions.
+ */
+declare function EditorFrame({ toolbar, children, mode, appearance, inset, expanded, height, maxWidth, sourceHeight, sourceAutosize, label, rootAttributes, slot, }: EditorFrameProps): kerfjs.SafeHtml;
+
+export { EditorFrame, type EditorFrameAppearance, type EditorFrameInset, type EditorFrameMode, type EditorFrameProps };

package/dist/editor-frame.js

@@ -0,0 +1,3 @@
+export { EditorFrame } from './chunk-V6N3YLTM.js';
+
+//# sourceMappingURL=editor-frame.js.map

package/dist/editor-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"editor-frame.js"}

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js
 export { ListInsetText, ListInsetTextProps } from './list-inset-text.js';
 export { ListItem, ListItemLink, ListItemLinkProps, ListItemProps } from './list-item.js';
 export { SummaryRow, SummaryRowListEdge, SummaryRowPresentation, SummaryRowProps } from './summary-row.js';
+export { ValuePreview, ValuePreviewProps } from './value-preview.js';
 export { ValueTable, ValueTablePresentation, ValueTableProps, ValueTableRow, ValueTableRowProps, ValueTableStackBelow } from './value-table.js';
 export { AnchoredSurfaceOptions, AnchoredSurfacePoint, openAnchoredSurface, openAnchoredSurfaceAt } from './anchored-surface.js';
 export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
@@ -60,6 +61,7 @@ export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reor
 export { TabBarItem, TabBarItemNameOverflow, TabBarItemPresentation, TabBarItemProps, TabBarItemSize } from './tab-bar-item.js';
 export { BackdropImage, BackdropImageFit, BackdropImageParallax, BackdropImagePosition, BackdropImageProps, BackdropImageRepeat, BackdropImageScrim, BackdropImageSingleProps, BackdropImageTiledProps } from './backdrop-image.js';
 export { ContentItem, ContentItemAppearance, ContentItemBubble, ContentItemFrame, ContentItemMedia, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
+export { EditorFrame, EditorFrameAppearance, EditorFrameInset, EditorFrameMode, EditorFrameProps } from './editor-frame.js';
 export { SunkenPanel, SunkenPanelProps, SunkenPanelShape, ensureSunkenTexture } from './sunken-panel.js';
 export { DialogCloseSource, DialogRequestCloseDetail, DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceFooterPresentation, DialogSurfaceHeaderPresentation, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceName, DialogSurfaceOptions, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSheetMotion, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset, closeDialog, openDialog } from './surface-scaffold.js';
 export { wireOverlaySheets } from './wire-overlay-sheets.js';

package/dist/index.js

@@ -1,45 +1,47 @@
+export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
 export { reorderTabs, wireTabBars } from './chunk-T74YB76U.js';
+export { wireSearchFields } from './chunk-UMNHJSIO.js';
 export { wireTextFields } from './chunk-KC6WUSNS.js';
-export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
+export { fileMatchesAccept, wireFilePickers } from './chunk-KK3S5OTW.js';
+export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
 export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
 export { wireMessageComposers } from './chunk-HTERKONR.js';
 export { wireOverlaySheets } from './chunk-4RECPEHI.js';
 export { wireResizableRegions } from './chunk-GS2QD3N7.js';
-export { wireSearchFields } from './chunk-UMNHJSIO.js';
+export { wireScrollDividers } from './chunk-OZ6X76G5.js';
+
+export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
 export { readChoiceChips, wireChoiceChips } from './chunk-K57NINLH.js';
 export { wireComboboxes } from './chunk-MVKHSAKE.js';
 export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
-export { fileMatchesAccept, wireFilePickers } from './chunk-KK3S5OTW.js';
-export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
+export { TextField } from './chunk-36HVQ72F.js';
+export { ValuePreview } from './chunk-F653O57X.js';
 export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
-
-export { wireScrollDividers } from './chunk-OZ6X76G5.js';
-export { wireCheckboxes } from './chunk-CNM6ZWP2.js';
+export { SunkenPanel } from './chunk-D5RGM3XA.js';
 export { TabBarItem } from './chunk-ZCDRLN3B.js';
 export { TabBar } from './chunk-7AK5I7U7.js';
-export { TextField } from './chunk-36HVQ72F.js';
+export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
 export { Spacer } from './chunk-YMUIQRWK.js';
 export { SplitButton } from './chunk-TI2GV36S.js';
 export { StateBanner } from './chunk-2FW7D4IG.js';
-export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
-export { SunkenPanel } from './chunk-D5RGM3XA.js';
+export { SummaryRow } from './chunk-K67XBCHG.js';
+export { RadioGroup } from './chunk-OHPYT2BH.js';
 export { createSearchFieldModel } from './chunk-CIAUILRR.js';
 export { SegmentedControl } from './chunk-LZUUUHNH.js';
 export { Select } from './chunk-ZX2QQJXD.js';
 
-export { applySelection, isApplePlatform, selectionGesture } from './chunk-GXSX6Q6O.js';
 export { MessageComposer } from './chunk-4OV272LF.js';
-export { RadioGroup } from './chunk-OHPYT2BH.js';
-export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-VGECEXM6.js';
-export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+export { ListActionRow } from './chunk-2J7XKAZX.js';
+export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-S3DCRI2M.js';
+export { closeDialog, openDialog } from './chunk-3OP66VXU.js';
 
+export { EditorFrame } from './chunk-V6N3YLTM.js';
 export { EmptyState } from './chunk-B53PS2LE.js';
 export { FileDropZone, FilePickerTrigger } from './chunk-KDQZ3E5C.js';
 export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
 export { Grid } from './chunk-KCS6NJ3O.js';
 
-export { ListActionRow } from './chunk-JCCN3U6X.js';
-export { ContentItem } from './chunk-WD6KABEU.js';
+export { ContentItem } from './chunk-3KFMLOTH.js';
 export { ContentSwap } from './chunk-EIET4QLK.js';
 export { CornerStatus } from './chunk-G3J7JDP6.js';
 export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
@@ -48,24 +50,25 @@ export { ChoiceChips } from './chunk-ITUQC4FW.js';
 export { ColumnTrack } from './chunk-QYMJHS4K.js';
 export { Combobox } from './chunk-BKUMG2KB.js';
 export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
-export { BackdropImage } from './chunk-SOBRGH7T.js';
+export { BackdropImage } from './chunk-5CLMV5YU.js';
 export { Button } from './chunk-PS24PVR6.js';
 export { Switch } from './chunk-LTBVP6VN.js';
 export { Row } from './chunk-AMIHGFLP.js';
 export { SearchField, placeSearchFieldCaret, readSearchField } from './chunk-VEME3D7K.js';
+export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
+
+
 export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
 export { ToolbarText } from './chunk-EKHDLBRP.js';
 export { ListHeader } from './chunk-NR6O74ST.js';
 export { FieldLabel, Text } from './chunk-7K6U6FCN.js';
 export { ListInsetControl } from './chunk-AN5IWMTM.js';
 export { ListInsetText } from './chunk-S4Y3YTAI.js';
-export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
-export { FloatingToolbar } from './chunk-S3ECMF23.js';
-export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-OQP3PFKQ.js';
-
+export { ListItem, ListItemLink } from './chunk-3WWX2O4G.js';
 
 
 export { Skeleton } from './chunk-CVD5IZGB.js';
+export { FloatingToolbar } from './chunk-S3ECMF23.js';
 export { DisclosureArrow } from './chunk-TKNVL53O.js';
 export { ToolbarActionLink, ToolbarControlGroup } from './chunk-5J6Z4BWY.js';
 export { Toolbar } from './chunk-ZN7KUMPY.js';

package/dist/list-action-row.js

@@ -1,4 +1,5 @@
-export { ListActionRow } from './chunk-JCCN3U6X.js';
+export { ListActionRow } from './chunk-2J7XKAZX.js';
+
 
 
 

package/dist/list-detail-dialog.js

@@ -1,6 +1,6 @@
 import { SplitView } from './chunk-ETFP7HAR.js';
-import { DialogSurface } from './chunk-VGECEXM6.js';
-export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+import { DialogSurface } from './chunk-S3DCRI2M.js';
+export { closeDialog, openDialog } from './chunk-3OP66VXU.js';
 
 
 

package/dist/list-item.js

@@ -1,4 +1,5 @@
-export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
+export { ListItem, ListItemLink } from './chunk-3WWX2O4G.js';
+
 
 
 

package/dist/styles/backdrop-image.css

@@ -65,6 +65,12 @@
   view-timeline: --kui-backdrop-image block;
 }
 
+/* Dense feeds can skip offscreen image painting without changing the height
+   reserved by the hero's aspect ratio or the containing card body. */
+.kui-backdrop-image[data-defer-offscreen="true"] .kui-backdrop-image__hero {
+  content-visibility: auto;
+}
+
 .kui-backdrop-image[data-aspect-ratio="true"] .kui-backdrop-image__hero {
   min-height: 0;
   aspect-ratio: var(--_kui-backdrop-image-ratio);

package/dist/styles/components/actions/popup-menu/popup-menu.css

@@ -402,7 +402,7 @@
   > .kui-popup-menu {
   margin: -2px;
 }
-.kui-toolbar-control-group:is([data-single="true"], [data-content="mixed"])
+.kui-toolbar-control-group[data-content="mixed"]
   > .kui-popup-menu
   > .kui-popup-menu__trigger {
   min-width: max-content;

package/dist/styles/components/collections/summary-row/summary-row.css

@@ -1,4 +1,4 @@
-/* A selectable summary: a full-width option on the base surface, a container
+/* A summary surface: a full-width option or static group on the base surface, a container
    for its own compaction, with a hairline divider below each list row. */
 .kui-summary-row {
   --_kui-summary-row-rail: transparent;
@@ -18,7 +18,7 @@
   border-radius: 0;
   color: var(--kui-color-text);
   background: var(--kui-color-surface);
-  cursor: pointer;
+  cursor: default;
   outline: none;
   container-type: inline-size;
   user-select: none;
@@ -47,7 +47,11 @@
   contain-intrinsic-size: auto 4.5rem;
 }
 
-.kui-summary-row:hover {
+.kui-summary-row[role="option"] {
+  cursor: pointer;
+}
+
+.kui-summary-row[role="option"]:hover {
   border-color: var(--kui-color-brand-border-normal);
 }
 

package/dist/styles/components/data-display/value-preview/value-preview.css

@@ -0,0 +1,18 @@
+.kui-value-preview {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--_kui-value-preview-min-height, 3rem);
+  max-height: var(--_kui-value-preview-max-height, 6rem);
+  overflow: auto;
+  color: var(--kui-color-text);
+  font-size: var(--kui-font-xs);
+  line-height: 1.4;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.kui-value-preview:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}

package/dist/styles/components/surfaces/backdrop-image/backdrop-image.css

@@ -65,6 +65,12 @@
   view-timeline: --kui-backdrop-image block;
 }
 
+/* Dense feeds can skip offscreen image painting without changing the height
+   reserved by the hero's aspect ratio or the containing card body. */
+.kui-backdrop-image[data-defer-offscreen="true"] .kui-backdrop-image__hero {
+  content-visibility: auto;
+}
+
 .kui-backdrop-image[data-aspect-ratio="true"] .kui-backdrop-image__hero {
   min-height: 0;
   aspect-ratio: var(--_kui-backdrop-image-ratio);

package/dist/styles/components/surfaces/editor-frame/editor-frame.css

@@ -0,0 +1,121 @@
+.kui-editor-frame {
+  display: flex;
+  width: min(100%, var(--_kui-editor-frame-max-width, 42rem));
+  height: var(--_kui-editor-frame-height, 20rem);
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  color: var(--kui-color-neutral-on-normal);
+  background: var(--kui-color-surface);
+  flex-direction: column;
+}
+
+.kui-editor-frame__toolbar {
+  flex: none;
+}
+
+.kui-editor-frame__surface {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  padding: 1rem;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.kui-editor-frame[data-mode="source"] > .kui-editor-frame__surface {
+  overflow: hidden;
+}
+
+.kui-editor-frame[data-mode="preview"] > .kui-editor-frame__surface {
+  overflow: auto;
+}
+
+.kui-editor-frame[data-mode="source"] > .kui-editor-frame__surface > textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: 0;
+  overflow: auto;
+  border: 0;
+  outline: 0;
+  color: inherit;
+  background: transparent;
+  flex: 1 1 auto;
+  font: inherit;
+  line-height: 1.6;
+  resize: none;
+}
+
+.kui-editor-frame[data-inset="flush"] > .kui-editor-frame__surface {
+  padding: 0;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not([data-expanded="true"]) {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not([data-expanded="true"])
+  > .kui-editor-frame__surface {
+  min-height: 3rem;
+  padding: 0.75rem;
+  overflow: visible;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-inset="flush"]
+  > .kui-editor-frame__surface {
+  padding: 0;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-mode="source"]
+  > .kui-editor-frame__surface
+  > textarea {
+  height: var(--_kui-editor-frame-source-height, auto);
+  min-height: 3rem;
+  padding: 0;
+  overflow: auto;
+  flex: none;
+  resize: vertical;
+}
+
+.kui-editor-frame[data-appearance="embedded"]:not(
+    [data-expanded="true"]
+  )[data-mode="source"][data-source-autosize="true"]
+  > .kui-editor-frame__surface
+  > textarea {
+  field-sizing: content;
+  resize: none;
+}
+
+@supports not (field-sizing: content) {
+  .kui-editor-frame[data-appearance="embedded"]:not(
+      [data-expanded="true"]
+    )[data-mode="source"][data-source-autosize="true"]
+    > .kui-editor-frame__surface
+    > textarea {
+    resize: vertical;
+  }
+}
+
+.kui-editor-frame[data-expanded="true"] {
+  position: fixed;
+  z-index: 40;
+  inset: 2rem;
+  width: auto;
+  height: auto;
+  box-shadow: var(--kui-shadow-l);
+}