@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/dist/ui/display.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.js","names":[],"sources":["../../src/ui/display.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\";\nimport { cn } from \"../lib/cn\";\nimport { IconClock } from \"@tabler/icons-react\";\nimport { HintTooltip } from \"./button\";\nimport { Tooltip } from \"./overlay\";\n\n/* ── Badge ─────────────────────────────────────────────────────────────── */\nconst badgeTones = {\n  neutral: \"bg-kit-muted text-kit-fg-2\",\n  outline: \"border border-kit-line bg-kit-control-bg text-kit-fg-2\",\n  accent: \"bg-kit-accent-soft text-kit-accent-fg\",\n  success: \"bg-kit-success-soft text-kit-success-fg\",\n  warning: \"bg-kit-warning-soft text-kit-warning-fg\",\n  danger: \"bg-kit-danger-soft text-kit-danger-fg\",\n  info: \"bg-kit-info-soft text-kit-info-fg\",\n  // --chip-ink: calm in dark (#343437, = selected), not a white slab\n  ink: \"bg-[var(--kit-chip-ink-bg)] text-[var(--kit-chip-ink-fg)]\",\n};\nconst badgeSizes = { sm: \"h-[18px] px-1.5 text-kit-2xs\", md: \"h-5 px-1.5 text-kit-xs\", lg: \"h-6 px-2 text-kit-xs\" };\nexport type BadgeTone = keyof typeof badgeTones;\nexport type BadgeSize = keyof typeof badgeSizes;\n\nexport function badgeVariants({ tone, size }: { tone?: BadgeTone | null; size?: BadgeSize | null } = {}) {\n  return cn(\n    \"inline-flex shrink-0 items-center gap-1 whitespace-nowrap rounded-kit-sm font-medium transition-colors duration-150 ease-out [&_svg]:size-3\",\n    badgeTones[tone ?? \"neutral\"],\n    badgeSizes[size ?? \"md\"],\n  );\n}\n\nexport function Badge({\n  className,\n  tone,\n  size,\n  dot,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement> & { tone?: BadgeTone | null; size?: BadgeSize | null; dot?: boolean }) {\n  return (\n    <span className={cn(badgeVariants({ tone, size }), className)} {...props}>\n      {dot ? <span aria-hidden className=\"size-1.5 rounded-full bg-current\" /> : null}\n      {children}\n    </span>\n  );\n}\n\n/* ── Status pill: the single source for publish states ─────────────────── */\nexport type PublishStatus =\n  | \"published\"\n  | \"draft\"\n  | \"changed\"\n  | \"held\"\n  | \"scheduled\"\n  | \"review\"\n  | \"archived\"\n  | \"error\"\n  | \"building\"\n  | \"live\"\n  | \"offline\";\nexport const statusMap: Record<PublishStatus, { label: string; tone: BadgeTone }> = {\n  published: { label: \"Published\", tone: \"success\" },\n  live: { label: \"Live\", tone: \"success\" },\n  draft: { label: \"Draft\", tone: \"neutral\" },\n  /** D72: still Published; unpublished changes are a fact about it (StatusMark's amber dot), never a status of their own. */\n  changed: { label: \"Published\", tone: \"success\" },\n  /** D53: live, with changes kept as draft (left out of whole-site publishes). */\n  held: { label: \"Published\", tone: \"success\" },\n  scheduled: { label: \"Scheduled\", tone: \"info\" },\n  review: { label: \"In review\", tone: \"info\" },\n  archived: { label: \"Archived\", tone: \"outline\" },\n  error: { label: \"Failed\", tone: \"danger\" },\n  building: { label: \"Building\", tone: \"info\" },\n  offline: { label: \"Offline\", tone: \"neutral\" },\n};\nexport function StatusPill({\n  status,\n  label,\n  tone,\n  className,\n  size = \"md\",\n}: {\n  status: PublishStatus;\n  label?: string;\n  /** Transition prop: live-preview's pre-D72 `pageStatus.ts` keeps its \"Edited\" amber pill. Remove when it adopts D72. */\n  tone?: BadgeTone;\n  className?: string;\n  size?: BadgeSize;\n}) {\n  const s = statusMap[status];\n  return (\n    <Badge tone={tone ?? s.tone} size={size} className={className}>\n      <span\n        aria-hidden\n        data-pulse={status === \"building\" || status === \"live\" ? \"\" : undefined}\n        className={cn(\n          \"size-1.5 rounded-full bg-current\",\n          // V2 pulse-dot: opacity 1 → .45 and scale 1 → .85, 1.8s ease-in-out (keyframe kit-pulse-dot in kit.css)\n          (status === \"building\" || status === \"live\") && \"animate-kit-pulse-dot\",\n        )}\n      />\n      {label ?? s.label}\n    </Badge>\n  );\n}\n\n/* ── Status mark: a row's publish state as a 16px glyph (V2 nav/panes.tsx StatusMark) ── */\nexport type MarkStatus = \"published\" | \"changed\" | \"held\" | \"draft\" | \"scheduled\" | \"review\" | \"archived\";\nconst shortDate = (iso: string) => new Date(iso).toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"short\" });\nexport function StatusMark({ status, at, className }: { status: MarkStatus; at?: string; className?: string }) {\n  const label = `${status === \"changed\" || status === \"held\" ? \"Published, with unpublished changes\" : statusMap[status].label}${at ? ` · Edited ${shortDate(at)}` : \"\"}`;\n  const mark =\n    status === \"published\" ? (\n      <span className=\"size-2 rounded-full bg-kit-success\" />\n    ) : status === \"changed\" || status === \"held\" ? (\n      // still Published; unpublished changes are a fact about it, shown as a small amber dot, never a status of their own\n      <span className=\"relative size-2 rounded-full bg-kit-success\"><span className=\"absolute -right-1 -top-1 size-1.5 rounded-full bg-kit-warning ring-2 ring-kit-surface\" /></span>\n    ) : status === \"scheduled\" ? (\n      <IconClock className=\"size-3 text-kit-info-fg\" stroke={2} />\n    ) : status === \"review\" ? (\n      // §E1.9: In review wears the info tone everywhere (V2 code drew the accent)\n      <span className=\"size-[7px] rotate-45 rounded-[1px] bg-kit-info\" />\n    ) : status === \"archived\" ? (\n      <span className=\"size-2 rounded-kit-xs border border-kit-fg-4\" />\n    ) : (\n      <span className=\"size-2 rounded-full border-[1.5px] border-kit-fg-4\" />\n    );\n  return (\n    <Tooltip content={label}>\n      <span role=\"img\" aria-label={label} className={cn(\"flex size-4 shrink-0 items-center justify-center\", className)}>\n        {mark}\n      </span>\n    </Tooltip>\n  );\n}\n\n/* ── Kbd ───────────────────────────────────────────────────────────────── */\nexport function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {\n  return (\n    <kbd\n      className={cn(\n        \"inline-flex h-5 min-w-5 items-center justify-center rounded-kit-sm border border-[var(--kit-kbd-line)] bg-[var(--kit-kbd)] px-1 font-kit-sans text-kit-2xs font-medium text-kit-fg-2 shadow-[inset_0_-1px_0_var(--kit-kbd-line)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Avatar (used by TrayMeta) ─────────────────────────────────────────── */\n// --kit-avatar-1…10: deep tones with white initials in light, calm lifted tones with dark initials in dark\n// (--kit-avatar-on, ≥ 5:1 both), declared in index.css. colorFor() keeps the light hex as a fallback for a value used outside a kit scope.\nconst AVATAR_LIGHT = [\"#c2410c\", \"#be185d\", \"#7e22ce\", \"#4338ca\", \"#1d4ed8\", \"#047857\", \"#b45309\", \"#0369a1\", \"#a21caf\", \"#6d28d9\"];\nconst avatarPalette = AVATAR_LIGHT.map((hex, i) => `var(--kit-avatar-${i + 1}, ${hex})`);\n/** The person's avatar colour as a CSS value (the light hex is the fallback outside a kit scope). */\nexport function colorFor(seed: string) {\n  let h = 0;\n  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;\n  return avatarPalette[h % avatarPalette.length];\n}\nexport function initials(name: string) {\n  return name\n    .split(/\\s+/)\n    .map((p) => p[0])\n    .slice(0, 2)\n    .join(\"\")\n    .toUpperCase();\n}\n/** How far an Avatar's box-shadow ring reaches past the face (0 without a ring). The Avatar pads itself by this. */\nexport function avatarRingSpread({ ring, ringWidth = 2, ringAccent }: { ring?: string; ringWidth?: number; ringAccent?: string }) {\n  return ring ? ringWidth + (ringAccent ? 1 : 0) : 0;\n}\nexport function Avatar({\n  name,\n  src,\n  size = 24,\n  className,\n  ring,\n  ringWidth = 2,\n  ringAccent,\n  square,\n  status,\n  decorative,\n}: {\n  name: string;\n  /** a11y: true when the person's name is already shown as text next to the avatar */\n  decorative?: boolean;\n  src?: string;\n  size?: number;\n  className?: string;\n  /** separating ring colour, drawn as box-shadow so the image keeps its full size (D34) */\n  ring?: string;\n  ringWidth?: number;\n  /** optional 1px outer ring outside `ring` (e.g. a presence colour) */\n  ringAccent?: string;\n  square?: boolean;\n  status?: \"online\" | \"away\" | \"offline\";\n}) {\n  // The ring is a box-shadow, which paints OUTSIDE the element's box. The wrapper reserves that band with padding, so\n  // the face and ring sit wholly inside the avatar's layout box and a clipping ancestor never shaves them.\n  const spread = avatarRingSpread({ ring, ringWidth, ringAccent });\n  return (\n    <span className=\"relative inline-flex shrink-0\" style={spread ? { padding: spread } : undefined}>\n      <AvatarPrimitive.Root\n        style={{\n          width: size,\n          height: size,\n          boxShadow: ring ? `0 0 0 ${ringWidth}px ${ring}${ringAccent ? `, 0 0 0 ${ringWidth + 1}px ${ringAccent}` : \"\"}` : undefined,\n        }}\n        className={cn(\n          \"inline-flex select-none items-center justify-center overflow-hidden bg-kit-muted\",\n          square ? \"rounded-kit-md\" : \"rounded-full\",\n          className,\n        )}\n      >\n        {src ? <AvatarPrimitive.Image src={src} alt={decorative ? \"\" : name} className=\"size-full object-cover\" /> : null}\n        <AvatarPrimitive.Fallback\n          delay={src ? 300 : undefined}\n          aria-hidden={decorative || undefined}\n          style={{ background: colorFor(name), fontSize: Math.max(9, Math.round(size * 0.4)) }}\n          className=\"flex size-full items-center justify-center font-semibold text-kit-avatar-on\"\n        >\n          {initials(name)}\n        </AvatarPrimitive.Fallback>\n      </AvatarPrimitive.Root>\n      {status ? (\n        <span\n          // inside the box (never -1px outside it), offset past any reserved ring band\n          style={spread ? { right: spread, bottom: spread } : undefined}\n          className={cn(\n            \"absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-kit-surface\",\n            status === \"online\" ? \"bg-kit-success\" : status === \"away\" ? \"bg-kit-warning\" : \"bg-kit-fg-4\",\n          )}\n        />\n      ) : null}\n    </span>\n  );\n}\n\n/**\n * AvatarStack (D34). Same-size faces, 25% overlap, a 2px box-shadow ring in the colour of the surface the stack\n * sits on; first face on top; a +N pill names the rest on hover.\n */\nexport function AvatarStack({\n  people,\n  max = 4,\n  size = 24,\n  ringColor = \"var(--kit-avatar-ring)\",\n  className,\n  label,\n}: {\n  people: { name: string; src?: string; color?: string }[];\n  max?: number;\n  size?: number;\n  ringColor?: string;\n  className?: string;\n  label?: string;\n}) {\n  const shown = people.slice(0, max);\n  const hidden = people.slice(shown.length);\n  const step = Math.round(size * 0.25);\n  const band = avatarRingSpread({ ring: ringColor });\n  const box = size + band * 2;\n  const vars = {\n    \"--stack-ov\": `-${step + band * 2}px`,\n    \"--stack-ov-open\": `-${Math.max(1, Math.round(step * 0.35)) + band * 2}px`,\n  } as React.CSSProperties;\n  const slot =\n    \"relative inline-flex shrink-0 rounded-full transition-[margin,transform] duration-150 ease-out [&:not(:first-child)]:ml-[var(--stack-ov)] group-hover/stack:[&:not(:first-child)]:ml-[var(--stack-ov-open)] hover:!z-30 hover:-translate-y-0.5 motion-reduce:transition-none\";\n  return (\n    <div\n      role=\"group\"\n      aria-label={label ?? `${people.length} ${people.length === 1 ? \"person\" : \"people\"}: ${people.map((p) => p.name).join(\", \")}`}\n      style={vars}\n      className={cn(\"group/stack isolate flex shrink-0 items-center\", className)}\n    >\n      {shown.map((p, i) => (\n        <HintTooltip key={p.name + i} content={p.name}>\n          <span style={{ zIndex: shown.length - i + 1, width: box, height: box }} className={slot}>\n            <Avatar name={p.name} src={p.src} size={size} ring={ringColor} decorative />\n          </span>\n        </HintTooltip>\n      ))}\n      {hidden.length ? (\n        <HintTooltip content={hidden.map((p) => p.name).join(\", \")}>\n          <span style={{ zIndex: 1, width: box, height: box, padding: band }} className={slot}>\n            <span\n              style={{ width: size, height: size, boxShadow: `0 0 0 ${band}px ${ringColor}`, fontSize: Math.max(9, Math.round(size * 0.38)) }}\n              className=\"inline-flex items-center justify-center rounded-full bg-kit-muted font-medium leading-none tabular-nums text-kit-fg-2\"\n            >\n              +{hidden.length}\n            </span>\n          </span>\n        </HintTooltip>\n      ) : null}\n    </div>\n  );\n}\n\n/* ── Card ──────────────────────────────────────────────────────────────── */\nexport function Card({ className, interactive, ...props }: React.HTMLAttributes<HTMLDivElement> & { interactive?: boolean }) {\n  return (\n    <div\n      className={cn(\n        \"rounded-kit-xl border border-kit-line bg-kit-surface\",\n        interactive && \"cursor-pointer transition-[border-color,box-shadow,transform] duration-150 hover:border-kit-line-strong hover:shadow-kit-md\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nexport function CardHeader({\n  title,\n  description,\n  actions,\n  icon,\n  className,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  icon?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex items-start justify-between gap-3 px-4 pt-4\", className)}>\n      <div className=\"flex min-w-0 items-start gap-2.5\">\n        {icon ? <span className=\"mt-0.5 flex text-kit-fg-2 [&_svg]:size-4\">{icon}</span> : null}\n        <div className=\"min-w-0\">\n          <h2 className=\"text-kit-base font-semibold text-kit-fg\">{title}</h2>\n          {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n        </div>\n      </div>\n      {actions ? <div className=\"flex shrink-0 items-center gap-1.5\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/* ── Separator ─────────────────────────────────────────────────────────── */\nexport function Separator({ vertical, className }: { vertical?: boolean; className?: string }) {\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={vertical ? \"vertical\" : undefined}\n      className={cn(vertical ? \"h-4 w-px bg-kit-line\" : \"h-px w-full bg-kit-line\", className)}\n    />\n  );\n}\n\n/* ── Skeleton ──────────────────────────────────────────────────────────── */\n/** V2 .skeleton: a --kit-skeleton → --kit-skeleton-shine sweep (800px wide, 1.6s linear; keyframe kit-shimmer in kit.css). */\nexport function Skeleton({ className }: { className?: string }) {\n  return <div aria-hidden className={cn(\"skeleton rounded-kit-md\", className)} />;\n}\n\n/* ── Empty state ───────────────────────────────────────────────────────── */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  actions,\n  className,\n  compact,\n}: {\n  icon?: React.ReactNode;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  className?: string;\n  compact?: boolean;\n}) {\n  return (\n    // D15: compact = 16px icon (no tile), two lines, one action.\n    <div className={cn(\"flex flex-col items-center justify-center text-center\", compact ? \"gap-2 py-8\" : \"gap-2.5 py-12\", className)}>\n      {icon ? <span className=\"flex text-kit-fg-3 [&_svg]:size-4\">{icon}</span> : null}\n      <div className=\"max-w-sm\">\n        <h2 className=\"text-kit-base font-medium text-kit-fg\">{title}</h2>\n        {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"mt-1 flex flex-wrap items-center justify-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/* ── Page header (inside main surface) ─────────────────────────────────── */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  meta,\n  className,\n  eyebrow,\n  as: Heading = \"h1\",\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  meta?: React.ReactNode;\n  className?: string;\n  eyebrow?: React.ReactNode;\n  /** Heading level: h1 in the app; demos nested in documentation pass a lower level. */\n  as?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n}) {\n  return (\n    <div className={cn(\"flex flex-wrap items-end justify-between gap-x-6 gap-y-3\", className)}>\n      <div className=\"min-w-0\">\n        {eyebrow ? <div className=\"mb-1.5 text-kit-xs font-medium text-kit-fg-3\">{eyebrow}</div> : null}\n        <div className=\"flex items-center gap-2.5\">\n          <Heading className=\"truncate text-kit-xl font-semibold tracking-[-0.015em] text-kit-fg\">{title}</Heading>\n          {meta}\n        </div>\n        {description ? <p className=\"mt-0.5 text-kit-sm text-kit-fg-2\">{description}</p> : null}\n      </div>\n      {actions ? <div className=\"flex shrink-0 flex-wrap items-center gap-2\">{actions}</div> : null}\n    </div>\n  );\n}\n\n/** Section header used inside settings and long pages: title INSIDE the card (founder rule). */\nexport function SettingsSection({\n  title,\n  description,\n  children,\n  footer,\n  className,\n  danger,\n  actions,\n}: {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  danger?: boolean;\n  actions?: React.ReactNode;\n}) {\n  return (\n    <section className={cn(\"overflow-hidden rounded-kit-xl border bg-kit-surface\", danger ? \"border-kit-danger-line\" : \"border-kit-line\", className)}>\n      <div className=\"flex items-start justify-between gap-4 px-5 pt-5\">\n        <div>\n          <h2 className={cn(\"text-kit-base font-semibold\", danger ? \"text-kit-danger-fg\" : \"text-kit-fg\")}>{title}</h2>\n          {description ? <p className=\"mt-0.5 max-w-xl text-kit-sm text-kit-fg-2\">{description}</p> : null}\n        </div>\n        {actions}\n      </div>\n      {children ? <div className=\"flex flex-col gap-4 px-5 pb-5 pt-4\">{children}</div> : <div className=\"h-5\" />}\n      {footer ? (\n        // --subtle-2: half a step between surface and subtle\n        <div className=\"flex items-center justify-between gap-3 border-t border-kit-line bg-[var(--kit-subtle-2)] px-5 py-3 text-kit-sm text-kit-fg-2\">\n          {footer}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\n/* ── Stat ──────────────────────────────────────────────────────────────── */\nexport function Stat({\n  label,\n  value,\n  delta,\n  hint,\n  className,\n}: {\n  label: React.ReactNode;\n  value: React.ReactNode;\n  delta?: { value: string; positive?: boolean };\n  hint?: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"flex flex-col gap-1\", className)}>\n      <span className=\"text-kit-sm text-kit-fg-2\">{label}</span>\n      <div className=\"flex items-baseline gap-2\">\n        <span className=\"text-kit-xl font-semibold tabular-nums tracking-[-0.01em] text-kit-fg\">{value}</span>\n        {delta ? (\n          <span className={cn(\"text-kit-xs font-medium tabular-nums\", delta.positive ? \"text-kit-success-fg\" : \"text-kit-danger-fg\")}>\n            {delta.positive ? \"↑\" : \"↓\"} {delta.value}\n          </span>\n        ) : null}\n      </div>\n      {hint ? <span className=\"text-kit-xs text-kit-fg-3\">{hint}</span> : null}\n    </div>\n  );\n}\n\n/* ── Table (simple, styled) ────────────────────────────────────────────── */\nexport function Table({ className, ...props }: React.TableHTMLAttributes<HTMLTableElement>) {\n  return <table className={cn(\"w-full border-separate border-spacing-0 text-kit-sm\", className)} {...props} />;\n}\nexport function Th({ className, children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {\n  // a11y: an icon/action column header still needs text for screen readers (empty-table-header)\n  const empty = children == null || children === false || children === \"\";\n  return (\n    <th\n      className={cn(\n        \"sticky top-0 z-[1] h-10 border-b border-kit-line bg-kit-surface px-3 text-left text-kit-sm font-normal text-kit-fg-3 first:pl-4 last:pr-4\",\n        className,\n      )}\n      {...props}\n    >\n      {empty ? <span className=\"sr-only\">{props[\"aria-label\"] ?? \"Actions\"}</span> : children}\n    </th>\n  );\n}\nexport function Td({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {\n  return <td className={cn(\"h-14 border-b border-kit-line-subtle px-3 text-kit-fg first:pl-4 last:pr-4\", className)} {...props} />;\n}\nexport function Tr({ className, selected, ...props }: React.HTMLAttributes<HTMLTableRowElement> & { selected?: boolean }) {\n  return (\n    <tr\n      data-selected={selected ? \"true\" : undefined}\n      className={cn(\"group/row transition-colors hover:bg-kit-subtle data-[selected=true]:bg-kit-accent-softer\", className)}\n      {...props}\n    />\n  );\n}\n\n/* ── Dot / live indicator ──────────────────────────────────────────────── */\nconst dotTones = {\n  success: \"bg-kit-success\",\n  warning: \"bg-kit-warning\",\n  danger: \"bg-kit-danger\",\n  neutral: \"bg-kit-fg-4\",\n  accent: \"bg-kit-accent\",\n  info: \"bg-kit-info\",\n};\nexport function Dot({ tone = \"success\", pulse, className }: { tone?: keyof typeof dotTones; pulse?: boolean; className?: string }) {\n  const c = dotTones[tone];\n  return (\n    <span className={cn(\"relative inline-flex size-2 shrink-0\", className)}>\n      {pulse ? <span className={cn(\"absolute inset-0 animate-ping rounded-full opacity-50\", c)} /> : null}\n      <span className={cn(\"relative inline-flex size-2 rounded-full\", c)} />\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/expanded-editor-modal.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ExpandedEditorModal (CPO D49): the ONE surface for "expand this editor": rich-text fields (⤢ in the toolbar / label row)
+ * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px
+ * wide, header = breadcrumb (… › Field) + a quiet meta line (lines, rows) + Done. Esc closes (menus and popovers
+ * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field
+ * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.
+ * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column
+ * shifts left (`data-floating-dock`). Esc closes that panel before the modal.
+ */
+import * as React from "react";
+export interface ExpandedEditorModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** root → current, e.g. ["Alternating feature rows", "Thin walls…", "Body"]; the last one is the title */
+    crumbs: string[];
+    /** quiet right-side line in the header ("12 lines", "6 rows · 4 columns") */
+    meta?: React.ReactNode;
+    /** "reading" centres a ~720px column (rich text); "wide" uses the full dialog width (tables) */
+    layout?: "reading" | "wide";
+    /** where focus lands on open (defaults to the first editable surface) */
+    initialFocus?: () => HTMLElement | null | undefined;
+    /** where focus goes on close when the opener is gone or hidden (e.g. the field's own editor) */
+    returnFocus?: () => HTMLElement | null | undefined;
+    children: React.ReactNode;
+}
+export declare function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout, initialFocus, returnFocus, children }: ExpandedEditorModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/expanded-editor-modal.js

@@ -0,0 +1,140 @@
+import { cn } from "../lib/cn.js";
+import { KIT_SCOPE } from "./surfaces.js";
+import { MODAL_LAYER } from "./tooltip-root.js";
+import { Button } from "./button.js";
+import { FLOATING_LAYER, Tooltip } from "./overlay.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region src/ui/expanded-editor-modal.tsx
+/**
+* ExpandedEditorModal (CPO D49): the ONE surface for "expand this editor": rich-text fields (⤢ in the toolbar / label row)
+* and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px
+* wide, header = breadcrumb (… › Field) + a quiet meta line (lines, rows) + Done. Esc closes (menus and popovers
+* inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field
+* underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.
+* D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column
+* shifts left (`data-floating-dock`). Esc closes that panel before the modal.
+*/
+/** Elements inside the editor that own Escape while open (a cell with a draft, a floating layer). Menus and listboxes
+*  count only while they are OPEN popups: a list the editor always renders (tags, a static picker) never blocks Escape. */
+var OWNS_ESCAPE = `[data-cell-editing],${FLOATING_LAYER}`;
+var LIST = "[role=menu],[role=listbox]";
+/** An open popup: Base UI marks it data-open, Radix data-state=open; otherwise its controller says aria-expanded. */
+function isOpenList(el) {
+	if (el.matches("[data-open],[data-state=open]")) return true;
+	return !!el.id && !!document.querySelector(`[aria-controls~="${CSS.escape(el.id)}"][aria-expanded=true]`);
+}
+var openListIn = (root) => !!root && Array.from(root.querySelectorAll(LIST)).some(isOpenList);
+function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = "reading", initialFocus, returnFocus, children }) {
+	const title = crumbs[crumbs.length - 1] ?? "Editor";
+	const parents = crumbs.slice(0, -1);
+	const body = React.useRef(null);
+	const opener = React.useRef(null);
+	React.useLayoutEffect(() => {
+		if (open) opener.current = document.activeElement;
+	}, [open]);
+	const change = (next, details) => {
+		if (!next && details.reason === "outside-press") {
+			const t = details.event.target;
+			if (t instanceof Element && t.closest("[data-floating-layer]")) return details.cancel();
+		}
+		if (!next && details.reason === "escape-key") {
+			const e = details.event;
+			const t = e.target instanceof Element ? e.target : null;
+			const list = t?.closest(LIST);
+			const inner = openListIn(body.current) || Array.from(document.querySelectorAll("[data-floating-layer]")).some(openListIn);
+			if (e.defaultPrevented || t?.closest(OWNS_ESCAPE) || list && isOpenList(list) || inner) return details.cancel();
+			const panel = body.current?.parentElement?.querySelector("[data-floating-panel]");
+			if (panel) {
+				details.cancel();
+				e.bcmsPanelHandled = true;
+				panel.dispatchEvent(new CustomEvent("floatingpanel:escape"));
+				return;
+			}
+		}
+		onOpenChange(next);
+	};
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange: change,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, {
+			...KIT_SCOPE,
+			className: "fixed inset-0 z-[var(--kit-z-expanded,70)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in"
+		}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+			...KIT_SCOPE,
+			[MODAL_LAYER]: "",
+			"aria-describedby": void 0,
+			initialFocus: () => {
+				requestAnimationFrame(() => requestAnimationFrame(() => {
+					(initialFocus?.() ?? body.current?.querySelector("[contenteditable=true], [data-cell], input, textarea"))?.focus({ preventScroll: true });
+				}));
+				return body.current;
+			},
+			finalFocus: () => {
+				const o = opener.current;
+				const target = o && o.isConnected && o !== document.body && o.getClientRects().length ? o : returnFocus?.() ?? o;
+				requestAnimationFrame(() => target?.focus({ preventScroll: true }));
+				return false;
+			},
+			onKeyDown: (e) => {
+				if (e.key !== "Escape" && e.key !== "F6") e.stopPropagation();
+			},
+			"data-expanded-editor": "",
+			className: cn("fixed inset-4 z-[calc(var(--kit-z-expanded,70)_+_1)] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10", "data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]", "data-[open]:animate-kit-pop-in"),
+			children: [/* @__PURE__ */ jsxs("header", {
+				className: "flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3",
+				children: [
+					/* @__PURE__ */ jsxs("nav", {
+						"aria-label": "Field path",
+						className: "flex min-w-0 flex-1 items-center gap-1 text-kit-sm",
+						children: [parents.map((c, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+							content: c,
+							side: "bottom",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "max-w-[220px] truncate text-kit-fg-3",
+								children: c
+							})
+						}), /* @__PURE__ */ jsx(IconChevronRight, {
+							className: "size-3 shrink-0 text-kit-fg-4",
+							stroke: 1.5,
+							"aria-hidden": true
+						})] }, `${c}-${i}`)), /* @__PURE__ */ jsx(Dialog.Title, {
+							render: /* @__PURE__ */ jsx("span", { "aria-current": "location" }),
+							className: "min-w-0 truncate font-medium text-kit-fg",
+							children: title
+						})]
+					}),
+					meta ? /* @__PURE__ */ jsx("span", {
+						className: "hidden shrink-0 text-kit-xs tabular-nums text-kit-fg-3 sm:inline",
+						children: meta
+					}) : null,
+					/* @__PURE__ */ jsx(Dialog.Close, {
+						render: /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "primary"
+						}),
+						children: "Done"
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				ref: body,
+				tabIndex: -1,
+				"data-expanded-body": "",
+				className: "min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none",
+				children: layout === "reading" ? /* @__PURE__ */ jsx("div", {
+					className: "mx-auto w-full max-w-[720px] px-6 py-8 sm:px-10",
+					children
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex h-full min-h-0 flex-col p-4",
+					children
+				})
+			})]
+		})] })
+	});
+}
+//#endregion
+export { ExpandedEditorModal };
+
+//# sourceMappingURL=expanded-editor-modal.js.map

package/dist/ui/expanded-editor-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded-editor-modal.js","names":[],"sources":["../../src/ui/expanded-editor-modal.tsx"],"sourcesContent":["/**\n * ExpandedEditorModal (CPO D49): the ONE surface for \"expand this editor\": rich-text fields (⤢ in the toolbar / label row)\n * and the table editor's Full screen. A focused dialog over a dimmed app: inset 32 to 48px from the viewport, at most 1100px\n * wide, header = breadcrumb (… › Field) + a quiet meta line (lines, rows) + Done. Esc closes (menus and popovers\n * inside close first), focus is trapped and returns to whatever opened it. The body edits the SAME value as the field\n * underneath, so both stay in sync. Inline editors stay in place; only expanded editors open here.\n * D54: a component's properties panel opens INSIDE this modal; docked, it takes the right 340px and the reading column\n * shifts left (`data-floating-dock`). Esc closes that panel before the modal.\n */\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport { FLOATING_LAYER, Tooltip } from \"./overlay\";\nimport { KIT_SCOPE } from \"./surfaces\";\nimport { MODAL_LAYER } from \"./tooltip-root\";\n\nexport interface ExpandedEditorModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** root → current, e.g. [\"Alternating feature rows\", \"Thin walls…\", \"Body\"]; the last one is the title */\n  crumbs: string[];\n  /** quiet right-side line in the header (\"12 lines\", \"6 rows · 4 columns\") */\n  meta?: React.ReactNode;\n  /** \"reading\" centres a ~720px column (rich text); \"wide\" uses the full dialog width (tables) */\n  layout?: \"reading\" | \"wide\";\n  /** where focus lands on open (defaults to the first editable surface) */\n  initialFocus?: () => HTMLElement | null | undefined;\n  /** where focus goes on close when the opener is gone or hidden (e.g. the field's own editor) */\n  returnFocus?: () => HTMLElement | null | undefined;\n  children: React.ReactNode;\n}\n\n/** Elements inside the editor that own Escape while open (a cell with a draft, a floating layer). Menus and listboxes\n *  count only while they are OPEN popups: a list the editor always renders (tags, a static picker) never blocks Escape. */\nconst OWNS_ESCAPE = `[data-cell-editing],${FLOATING_LAYER}`;\nconst LIST = \"[role=menu],[role=listbox]\";\n\n/** An open popup: Base UI marks it data-open, Radix data-state=open; otherwise its controller says aria-expanded. */\nfunction isOpenList(el: Element) {\n  if (el.matches(\"[data-open],[data-state=open]\")) return true;\n  return !!el.id && !!document.querySelector(`[aria-controls~=\"${CSS.escape(el.id)}\"][aria-expanded=true]`);\n}\nconst openListIn = (root: ParentNode | null | undefined) => !!root && Array.from(root.querySelectorAll(LIST)).some(isOpenList);\n\nexport function ExpandedEditorModal({ open, onOpenChange, crumbs, meta, layout = \"reading\", initialFocus, returnFocus, children }: ExpandedEditorModalProps) {\n  const title = crumbs[crumbs.length - 1] ?? \"Editor\";\n  const parents = crumbs.slice(0, -1);\n  const body = React.useRef<HTMLDivElement>(null);\n  const opener = React.useRef<HTMLElement | null>(null);\n  React.useLayoutEffect(() => {\n    if (open) opener.current = document.activeElement as HTMLElement | null;\n  }, [open]);\n\n  const change = (next: boolean, details: DialogPrimitive.Root.ChangeEventDetails) => {\n    if (!next && details.reason === \"outside-press\") {\n      // the editor's own floating layers (selection toolbar, slash menu) are portalled to <body>, outside this dialog:\n      // clicks there belong to the editor, so they never close the modal\n      const t = details.event.target;\n      if (t instanceof Element && t.closest(FLOATING_LAYER)) return details.cancel();\n    }\n    if (!next && details.reason === \"escape-key\") {\n      const e = details.event;\n      const t = e.target instanceof Element ? e.target : null;\n      // an open slash menu / block picker inside the editor, or a floating menu over it, closes first\n      const list = t?.closest(LIST);\n      const inner = openListIn(body.current) || Array.from(document.querySelectorAll(FLOATING_LAYER)).some(openListIn);\n      if (e.defaultPrevented || t?.closest(OWNS_ESCAPE) || (list && isOpenList(list)) || inner) return details.cancel();\n      // then a component's properties panel open in here (D54): it closes, the modal stays\n      const panel = body.current?.parentElement?.querySelector(\"[data-floating-panel]\");\n      if (panel) {\n        details.cancel();\n        (e as KeyboardEvent & { bcmsPanelHandled?: boolean }).bcmsPanelHandled = true;\n        panel.dispatchEvent(new CustomEvent(\"floatingpanel:escape\"));\n        return;\n      }\n    }\n    onOpenChange(next);\n  };\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={change}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Backdrop\n          {...KIT_SCOPE}\n          className=\"fixed inset-0 z-[var(--kit-z-expanded,70)] bg-kit-overlay backdrop-blur-[2px] data-[open]:animate-kit-fade-in\"\n        />\n        <DialogPrimitive.Popup\n          {...KIT_SCOPE}\n          {...{ [MODAL_LAYER]: \"\" }}\n          aria-describedby={undefined}\n          initialFocus={() => {\n            // focus lands INSIDE at once (so the trap has a home), then moves to the editor once it has mounted.\n            // Base UI focuses the returned element in a frame of its own, so the editor waits one frame longer.\n            requestAnimationFrame(() =>\n              requestAnimationFrame(() => {\n                const el = initialFocus?.() ?? body.current?.querySelector<HTMLElement>(\"[contenteditable=true], [data-cell], input, textarea\");\n                el?.focus({ preventScroll: true });\n              }),\n            );\n            return body.current;\n          }}\n          finalFocus={() => {\n            // back to whatever opened it, or, when that is gone or hidden, to the host's fallback (the field itself)\n            const o = opener.current;\n            const target = o && o.isConnected && o !== document.body && o.getClientRects().length ? o : (returnFocus?.() ?? o);\n            requestAnimationFrame(() => target?.focus({ preventScroll: true }));\n            return false;\n          }}\n          // keys typed in the editor never reach the app behind it (canvas shortcuts, form Esc); F6 still moves to a panel\n          onKeyDown={(e) => {\n            if (e.key !== \"Escape\" && e.key !== \"F6\") e.stopPropagation();\n          }}\n          data-expanded-editor=\"\"\n          className={cn(\n            \"fixed inset-4 z-[calc(var(--kit-z-expanded,70)_+_1)] mx-auto flex max-w-[1100px] flex-col overflow-hidden rounded-kit-xl border border-kit-floating-line bg-kit-surface-raised text-kit-fg shadow-kit-xl outline-none sm:inset-8 lg:inset-x-12 lg:inset-y-10\",\n            \"data-[floating-dock=right]:[&>[data-expanded-body]]:pr-[340px]\",\n            \"data-[open]:animate-kit-pop-in\",\n          )}\n        >\n          <header className=\"flex h-12 shrink-0 items-center gap-2 border-b border-kit-line pl-4 pr-3\">\n            <nav aria-label=\"Field path\" className=\"flex min-w-0 flex-1 items-center gap-1 text-kit-sm\">\n              {parents.map((c, i) => (\n                <React.Fragment key={`${c}-${i}`}>\n                  <Tooltip content={c} side=\"bottom\">\n                    <span className=\"max-w-[220px] truncate text-kit-fg-3\">{c}</span>\n                  </Tooltip>\n                  <IconChevronRight className=\"size-3 shrink-0 text-kit-fg-4\" stroke={1.5} aria-hidden />\n                </React.Fragment>\n              ))}\n              {/* the field title names the dialog (\"Body\"), not the nav's \"Field path\" */}\n              <DialogPrimitive.Title render={<span aria-current=\"location\" />} className=\"min-w-0 truncate font-medium text-kit-fg\">\n                {title}\n              </DialogPrimitive.Title>\n            </nav>\n            {meta ? <span className=\"hidden shrink-0 text-kit-xs tabular-nums text-kit-fg-3 sm:inline\">{meta}</span> : null}\n            <DialogPrimitive.Close render={<Button size=\"sm\" variant=\"primary\" />}>Done</DialogPrimitive.Close>\n          </header>\n          <div ref={body} tabIndex={-1} data-expanded-body=\"\" className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain outline-none\">\n            {layout === \"reading\" ? (\n              <div className=\"mx-auto w-full max-w-[720px] px-6 py-8 sm:px-10\">{children}</div>\n            ) : (\n              <div className=\"flex h-full min-h-0 flex-col p-4\">{children}</div>\n            )}\n          </div>\n        </DialogPrimitive.Popup>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/ui/field-context.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export declare const FieldIdContext: React.Context<string | undefined>;
+export declare function useFieldId(): string | undefined;
+export declare const FieldLabelledByContext: React.Context<string | undefined>;
+export declare function useFieldLabelledBy(): string | undefined;
+export declare const FieldDescribedByContext: React.Context<string | undefined>;
+export declare function useFieldDescribedBy(): string | undefined;
+export declare const FieldLabelForContext: React.Context<{
+    htmlFor: string;
+    labelId: string;
+} | undefined>;
+export declare function useLabelFor(id: string | undefined): string | undefined;

package/dist/ui/field-context.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+//#region src/ui/field-context.ts
+var FieldIdContext = React.createContext(void 0);
+function useFieldId() {
+	return React.useContext(FieldIdContext);
+}
+var FieldLabelledByContext = React.createContext(void 0);
+function useFieldLabelledBy() {
+	return React.useContext(FieldLabelledByContext);
+}
+var FieldDescribedByContext = React.createContext(void 0);
+function useFieldDescribedBy() {
+	return React.useContext(FieldDescribedByContext);
+}
+var FieldLabelForContext = React.createContext(void 0);
+function useLabelFor(id) {
+	const ctx = React.useContext(FieldLabelForContext);
+	return ctx && id && ctx.htmlFor === id ? ctx.labelId : void 0;
+}
+//#endregion
+export { FieldDescribedByContext, FieldIdContext, FieldLabelForContext, FieldLabelledByContext, useFieldDescribedBy, useFieldId, useFieldLabelledBy, useLabelFor };
+
+//# sourceMappingURL=field-context.js.map

package/dist/ui/field-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-context.js","names":[],"sources":["../../src/ui/field-context.ts"],"sourcesContent":["import * as React from \"react\";\n\n/* The Field wrapper (input.tsx) publishes its label wiring here, so controls in other files (Switch, Select) can read it\n   without importing input.tsx. V2 keeps these contexts inside ui/input.tsx; input.tsx should import them from this file. */\n\nexport const FieldIdContext = React.createContext<string | undefined>(undefined);\nexport function useFieldId() {\n  return React.useContext(FieldIdContext);\n}\n\nexport const FieldLabelledByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldLabelledBy() {\n  return React.useContext(FieldLabelledByContext);\n}\n\nexport const FieldDescribedByContext = React.createContext<string | undefined>(undefined);\nexport function useFieldDescribedBy() {\n  return React.useContext(FieldDescribedByContext);\n}\n\n/* `<label for>` without a <label> element. V2 draws no label on an inline-list row, so the row publishes its sr-only\n   name here and the kit control whose id is `htmlFor` (Input, Textarea, Select, Switch, Checkbox) points its\n   aria-labelledby at `labelId`, unless the control carries its own aria-label / aria-labelledby. */\nexport const FieldLabelForContext = React.createContext<{ htmlFor: string; labelId: string } | undefined>(undefined);\nexport function useLabelFor(id: string | undefined) {\n  const ctx = React.useContext(FieldLabelForContext);\n  return ctx && id && ctx.htmlFor === id ? ctx.labelId : undefined;\n}\n"],"mappings":";;AAKA,IAAa,iBAAiB,MAAM,cAAkC,KAAA,CAAS;AAC/E,SAAgB,aAAa;CAC3B,OAAO,MAAM,WAAW,cAAc;AACxC;AAEA,IAAa,yBAAyB,MAAM,cAAkC,KAAA,CAAS;AACvF,SAAgB,qBAAqB;CACnC,OAAO,MAAM,WAAW,sBAAsB;AAChD;AAEA,IAAa,0BAA0B,MAAM,cAAkC,KAAA,CAAS;AACxF,SAAgB,sBAAsB;CACpC,OAAO,MAAM,WAAW,uBAAuB;AACjD;AAKA,IAAa,uBAAuB,MAAM,cAAgE,KAAA,CAAS;AACnH,SAAgB,YAAY,IAAwB;CAClD,MAAM,MAAM,MAAM,WAAW,oBAAoB;CACjD,OAAO,OAAO,MAAM,IAAI,YAAY,KAAK,IAAI,UAAU,KAAA;AACzD"}

package/dist/ui/floating-panel.d.ts

@@ -0,0 +1,152 @@
+/**
+ * FloatingPanel (CPO D54): ONE primitive for every non-modal window over the work surface. It owns drag, magnetic snap,
+ * resize and "remember where I put it"; the ⌘J assistant (D30) and the component properties panel both use it.
+ *
+ *   geometry      track() · snapRect() · <SnapGuides> · <ResizeEdges> (4 edges + 4 corners) · <ResizeGrip> (keyboard)
+ *                 (the low-level pieces, shared with the assistant's floating window)
+ *   <FloatingPanel>  a small properties window anchored to the thing it edits:
+ *     float  (≥768 with a mouse) docks in the editor column's right gutter (≥356px), else the left gutter, else it
+ *            overlays the right edge; avoids a floating assistant, the Publish tray and the 56px navbar. While docked
+ *            it follows the anchor's top (sticky between 72px from the top and 16px from the bottom); once dragged it
+ *            stays where it was put. 340 × auto (≤560), resizable 300×240 … 520 × (viewport − 96). Header = drag
+ *            handle; double-click resets it to its docked default. Side, offset and size persist per user and per
+ *            width bucket (≥1280 · 768–1279).
+ *     side   (768–1279 on touch) a 340px right sheet, no scrim.
+ *     sheet  (<768) a bottom sheet, 50% or 90% tall; drag the grabber down to close.
+ *     modal  inside a D49 ExpandedEditorModal (`container`): docked into the modal's right 340px (the reading column
+ *            shifts left), or over the modal's edge when it is narrow.
+ *   Non-modal: `role="dialog"` + `aria-modal="false"`, no focus trap, outside clicks never close it. Esc closes (menus,
+ *   pickers and field drafts first), F6 moves focus between the panel and `focusBack()`. Marked `data-floating-layer`.
+ *   Layering: canvas toolbars < panel 52 (= the D30 window) < sheets 55 < dialogs 60 < menus 80 < tooltips 90.
+ */
+import * as React from "react";
+import { type MotionValue } from "framer-motion";
+export declare const NAV = 56;
+export declare const SNAP = 16;
+export declare const EDGE = 16;
+export declare const Z_FLOAT = "z-[var(--kit-z-float,52)]";
+export declare const EASE: readonly [0.32, 0.72, 0, 1];
+export type Rect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** Where a window may sit and how big it may get. `top` is the smallest y (under the navbar), `pad` the inset elsewhere. */
+export interface Bounds {
+    minW: number;
+    minH: number;
+    maxW: () => number;
+    maxH: () => number;
+    top: number;
+    pad: number;
+}
+/** Magnetic lines in viewport px: `v` = x positions (left/right edges snap to them), `h` = y positions. */
+export interface SnapLines {
+    v: number[];
+    h: number[];
+}
+/** 1px guide lines to draw (viewport px). */
+export interface Guides {
+    v: number[];
+    h: number[];
+}
+export declare const NO_GUIDES: Guides;
+export interface Geom {
+    x: MotionValue<number>;
+    y: MotionValue<number>;
+    w: MotionValue<number>;
+    h: MotionValue<number>;
+}
+export declare const vw: () => number;
+export declare const vh: () => number;
+export declare const clampN: (n: number, lo: number, hi: number) => number;
+export declare function fitRect(g: Rect, b: Bounds): Rect;
+/** Clamp to the viewport, then pull any edge within SNAP px of a line onto it (the nearest wins). */
+export declare function snapRect(x: number, y: number, w: number, h: number, lines: SnapLines, b: Bounds): {
+    x: number;
+    y: number;
+    g: Guides;
+};
+/** Runs a pointer drag on window-level listeners (works from any handle, survives leaving the element). */
+export declare function track(e: React.PointerEvent, onMove: (dx: number, dy: number) => void, onEnd: (moved: boolean) => void, cursor?: string): void;
+/** Magnetic guides: a 1px hairline along each line the window is snapped to. */
+export declare function SnapGuides({ guides }: {
+    guides: Guides;
+}): import("react/jsx-runtime").JSX.Element;
+export type ResizeDir = "n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se";
+/** Resize from 4 edges and 4 corners. `onStart` runs before the first read (e.g. turn an auto height into a number). */
+export declare function ResizeEdges({ geom, bounds, onStart, onEnd }: {
+    geom: Geom;
+    bounds: Bounds;
+    onStart?: () => void;
+    onEnd: (dir: ResizeDir) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** Keyboard resize: a focusable grip (role="separator"). ←/→ width, ↑/↓ height (±16, Shift ±64); grows toward the open side. */
+export declare function ResizeGrip({ geom, bounds, label, onStart, onEnd, className }: {
+    geom: Geom;
+    bounds: Bounds;
+    label: string;
+    onStart?: () => void;
+    onEnd: () => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface PanelPref {
+    side?: "left" | "right";
+    /** set once the person drags it: the panel stays here instead of following its anchor */
+    pos?: {
+        x: number;
+        y: number;
+    };
+    w?: number;
+    /** set once the person resizes the height; otherwise the height follows the content */
+    h?: number;
+}
+interface PanelPrefState {
+    prefs: Record<string, PanelPref>;
+    patch: (key: string, p: Partial<PanelPref> | null) => void;
+}
+/** Read the remembered placements with a selector; `useFloatingPanelPrefs.getState()` for imperative reads and writes. */
+export declare function useFloatingPanelPrefs<T>(select: (s: PanelPrefState) => T): T;
+export declare namespace useFloatingPanelPrefs {
+    var getState: () => PanelPrefState;
+}
+export type WidthBucket = "wide" | "mid";
+export type PanelMode = "float" | "side" | "sheet" | "modal";
+/** How a panel presents at this width and pointer: float · side (tablet touch) · sheet (phones) · modal (inside a D49 modal). */
+export declare function usePanelMode(inModal?: boolean): PanelMode;
+export declare const PANEL_W = 340;
+export interface FloatingPanelHandle {
+    dock: (side: "left" | "right") => void;
+    /** back to the docked default (position and size) */
+    reset: () => void;
+    /** keyboard move / resize: arrows ±16 (Shift ±64), Enter commits, Esc cancels */
+    keyboard: (mode: "move" | "resize") => void;
+    /** a polite announcement from the panel's own live region */
+    announce: (text: string) => void;
+    el: () => HTMLElement | null;
+}
+export interface FloatingPanelProps {
+    /** remembered placement key (one per kind of panel) */
+    id: string;
+    /** id of the element that names the panel (the header title) */
+    labelledBy: string;
+    /** the thing it edits: the panel follows it and docks beside its column (`[data-rt-editor]`) */
+    anchor: HTMLElement | null;
+    /** render inside this element instead of <body> (the D49 modal) */
+    container?: HTMLElement | null;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    /** bottom-sheet footer (Done) */
+    sheetFooter?: React.ReactNode;
+    onClose: () => void;
+    /** F6 / Esc: where focus goes back to (the card) */
+    focusBack?: () => void;
+    /** a refill (another component picked while open): no entrance animation */
+    instant?: boolean;
+    bodyClassName?: string;
+    /** keys anywhere in the panel, before its own handling (⌘Z joins the host's undo) */
+    onPanelKeyDown?: (e: KeyboardEvent) => void;
+}
+export declare const FloatingPanel: React.ForwardRefExoticComponent<FloatingPanelProps & React.RefAttributes<FloatingPanelHandle>>;
+export {};