@wrongstack/tui 0.307.1 → 0.308.1

package/dist/react-children-flatten.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Recursively unwrap React Fragments AND Boxes into a flat list of leaf
+ * element children.
+ *
+ * `React.Children.toArray` does NOT flatten Fragments — a Fragment with three
+ * `<Text>` children is reported as a single Fragment element. That behavior
+ * is fine for most React APIs (which then recurse themselves), but in
+ * sidebar cards we want to wrap EACH child in a `│ … │` row. To do that
+ * correctly across nested conditional Fragments AND Boxes (which callers
+ * use to group their body rows), we need a real flattener that pulls the
+ * children out at any depth.
+ *
+ * Box recursion: a `<Box flexDirection="column">` with several Text rows
+ * inside is treated as a group of separate children, not one block. The
+ * reason is that the per-row `│ … │` wrapper paints the side bar on the
+ * FIRST line of each child element — if the Box is treated as a single
+ * child, only its first line gets a right `│` and the rest of the Box
+ * overflows past the right edge, visually breaking the frame. Recursing
+ * into Boxes costs us the inner Box's flex/width/padding context, but
+ * callers use Boxes for "group my rows vertically" semantics, and the
+ * per-row `│ … │` wrapper already controls width, padding, and background.
+ *
+ * Text/primitive nodes are skipped: we only return elements that the
+ * caller asked to wrap in `│ … │`.
+ */
+import type { ReactElement, ReactNode } from 'react';
+export declare function flattenChildren(node: ReactNode): ReactElement[];
+//# sourceMappingURL=react-children-flatten.d.ts.map

package/dist/react-wrap-truncate.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Recursively walk a React element tree and force every <Text> descendant to
+ * use `wrap="truncate"`, so the text can never overflow its parent's width
+ * and break a wrapping frame (e.g. the per-row `│ … │` chrome of a Card or
+ * SidebarPanelCard).
+ *
+ * Why this exists: Ink lays out a flex child at the size yoga gives it, but
+ * a <Text> that doesn't set `wrap="truncate"` will soft-wrap into a multi-
+ * line block when the visible content is wider than the parent. That extra
+ * height "punches through" our per-row `│` wrapper — the right bar only sits
+ * on the first line, so the wrapped overflow lines are bare and the frame
+ * looks broken.
+ *
+ * The clean fix is to ensure EVERY <Text> in the body has `wrap="truncate"`.
+ * Rather than asking every call site to remember that, we walk the rendered
+ * tree once before it reaches the Card and rewrite the prop. Box children
+ * pass through unchanged (their internal layout is the caller's concern, but
+ * they usually contain a single Text row anyway).
+ */
+import type { ReactNode } from 'react';
+export declare function truncateTextChildren(node: ReactNode): ReactNode;
+//# sourceMappingURL=react-wrap-truncate.d.ts.map

package/dist/theme-utils.d.ts

@@ -59,5 +59,13 @@ export declare const SYNTAX_TOKEN: Readonly<Record<SyntaxRole, keyof Theme>>;
 export declare function resolveSyntaxColor(role: SyntaxRole, palette: Theme): string;
 export declare function resolveSyntaxPalette(palette: Theme): SyntaxPalette;
 export declare function softColorWithTheme(color: string | undefined, currentTheme: Theme): string | undefined;
+/**
+ * Mix two hex colors in linear-light sRGB. `weight` is the fraction of
+ * `colorA` (0..1) — at 0 the result is `colorB`, at 1 it is `colorA`. Used
+ * by the sidebar's card tints to derive per-card "raised" surfaces from
+ * the theme's accent + surface tokens, so each panel feels color-coded
+ * without bloating the theme with extra named tokens.
+ */
+export declare function mixHexColors(colorA: string, colorB: string, weight: number): string;
 export declare function detectSupportsBackground(env?: NodeJS.ProcessEnv, isTTY?: boolean): boolean;
 //# sourceMappingURL=theme-utils.d.ts.map

package/dist/theme.d.ts

@@ -1,8 +1,30 @@
 import type { SyntaxPalette, SyntaxRole, Theme, ThemeName } from './theme-types.js';
-export { catppuccin, detectSupportsBackground, pastel, SYNTAX_TOKEN } from './theme-utils.js';
 export { baseTheme, THEME_OPTIONS, themePickerOptions, themePresets } from './theme-presets.js';
-export type { SyntaxPalette, SyntaxRole, Theme, ThemeName, ThemePickerOption } from './theme-types.js';
+export type { SyntaxPalette, SyntaxRole, Theme, ThemeName, ThemePickerOption, } from './theme-types.js';
+export { catppuccin, detectSupportsBackground, mixHexColors, pastel, SYNTAX_TOKEN, } from './theme-utils.js';
 export declare const theme: Theme;
+/**
+ * "Tinted" surface for the right sidebar's cards. We mix the theme's plain
+ * `surface` with its `accent` (and a touch of `surfaceRaised`) so each card
+ * reads as a colored "plate" rather than blending into the background.
+ * Tuned to roughly 12% accent — enough to be unmistakable, not so much
+ * that it competes with the body text.
+ *
+ * Kept as a top-level constant (not a theme token) so the tint follows the
+ * active theme automatically: changing themes retints every card without
+ * any extra wiring. The other helpers (cardTopEdge, cardHairline) derive
+ * their colors from this same mix so a single source of truth drives the
+ * whole "raised surface" treatment.
+ */
+export declare const sidebarCardSurface: (current?: Theme) => string;
+/** Bold top edge / leading-rail color for sidebar cards. The accent at
+ *  full saturation draws the eye down the rail and doubles as a "live
+ *  state" signal — a green rail = healthy, red = alerting, etc. */
+export declare const sidebarCardEdge: (current?: Theme) => string;
+/** Hairline color used between body rows inside a card. Tinted toward
+ *  `borderActive` (the "live" border color) so dividers feel alive
+ *  instead of dead. */
+export declare const sidebarCardHairline: (current?: Theme) => string;
 export declare function resolveSyntaxColor(role: SyntaxRole, palette?: Theme): string;
 export declare function resolveSyntaxPalette(palette?: Theme): SyntaxPalette;
 export declare function softColor(color?: string): string | undefined;

package/dist/ui-contracts.d.ts

@@ -9,6 +9,23 @@ import type { StatuslineItem as StatuslineItemSource } from './components/status
  * rendered layout.
  */
 export declare const SIDEBAR_MISSION_ROWS = 8;
+/**
+ * Minimum inner-content width (cols) at which a routed F-panel sidebar twin
+ * renders its `⟦ … ⟧` status pill on the title row's right edge. Below this
+ * threshold the pill is bumped to a second status row so the title (and the
+ * right-side state) can both fit without truncation. Centralized here so the
+ * workspace/task sidebar twins and the SidebarPanelFrame don't drift.
+ */
+export declare const PILL_MIN_INNER_WIDTH = 22;
+/**
+ * Minimum inner-content width (cols) at which a routed F-panel sidebar twin
+ * starts rendering per-row "metric" columns (latency, diff, elapsed, agent
+ * count, relative time). Below this threshold the row keeps its identity
+ * label only; the secondary metric is dropped to preserve the title.
+ * Centralized so the F twins in `sidebar-panels-workspace.tsx` and
+ * `sidebar-panels-task.tsx` stop hand-rolling the literal `24`.
+ */
+export declare const METRIC_MIN_BODY_WIDTH = 24;
 /**
  * Maximum outer height of the /settings picker, including its border. Small
  * terminals still use their smaller available-height budget; large terminals

package/dist/ui-glyphs.d.ts

@@ -9,6 +9,8 @@ export interface UiGlyphs {
     info: string;
     idle: string;
     running: string;
+    /** Paused — a process / phase / mission that is alive but not advancing. */
+    pause: string;
     pending: string;
     folder: string;
     workingDirectory: string;
@@ -39,6 +41,100 @@ export interface UiGlyphs {
     segmentStart: string;
     segmentTransition: string;
     segmentEnd: string;
+    pillLeft: string;
+    pillRight: string;
+    pillDot: string;
+    railHeavy: string;
+    railMid: string;
+    railLight: string;
+    cornerTL: string;
+    cornerTR: string;
+    cornerBL: string;
+    cornerBR: string;
+    edgeT: string;
+    edgeB: string;
+    dividerDot: string;
+    dividerDash: string;
+    dividerWave: string;
+    dividerDiamond: string;
+    meterFull: string;
+    meter7: string;
+    meter5: string;
+    meter3: string;
+    meterEmpty: string;
+    meterLight: string;
+    ladder: string;
+    ladderFull: string;
+    ladderStep: string;
+    arrowRight: string;
+    arrowDoubleRight: string;
+    arrowUp: string;
+    arrowDown: string;
+    pulseHigh: string;
+    pulseMid: string;
+    pulseLow: string;
+    diamond: string;
+    diamondOpen: string;
+    triangleUp: string;
+    triangleDown: string;
+    triangleRight: string;
+    barFull: string;
+    barEmpty: string;
+    barFade: string;
+    blockStack: string;
+    block: string;
+    spike: string;
+    star4: string;
+    star8: string;
+    ring: string;
+    dot: string;
+    target: string;
+    hash: string;
+    at: string;
+    link: string;
+    lock: string;
+    unlock: string;
+    bell: string;
+    zap: string;
+    filter: string;
+    search: string;
+    tag: string;
+    flame: string;
+    sparkle: string;
+    pin: string;
+    bookmark: string;
+    flag: string;
+    shield: string;
+    check: string;
+    cross: string;
+    bullet: string;
+    bulletOpen: string;
+    bulletSquare: string;
+    bulletHalf: string;
+    bulletQuarter: string;
+    bulletThreeQuarter: string;
+    sparkHi: string;
+    sparkMid: string;
+    sparkLo: string;
+    sparkEmpty: string;
+    segmentStartLine: string;
+    segmentTransitionLine: string;
+    segmentEndLine: string;
+    cell0: string;
+    cell1: string;
+    cell2: string;
+    cell3: string;
+    cell4: string;
+    cell5: string;
+    cell6: string;
+    cell7: string;
+    cell8: string;
+    cellFull: string;
+    cellEmpty: string;
+    indent: string;
+    treeLast: string;
+    treeBranch: string;
+    treeThrough: string;
 }
 export declare function resolveIconStyle(env?: NodeJS.ProcessEnv): IconStyle;
 export declare function glyphSet(style?: IconStyle): UiGlyphs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrongstack/tui",
-  "version": "0.307.1",
+  "version": "0.308.1",
   "license": "MIT",
   "description": "WrongStack terminal UI: Ink-based interactive renderer with history, pickers, and slash menus.",
   "repository": {
@@ -29,12 +29,12 @@
     "ink": "7.1.1",
     "react": "^19.2.8",
     "string-width": "8.2.2",
-    "@wrongstack/core": "0.307.1",
-    "@wrongstack/runtime": "0.307.1",
-    "@wrongstack/sdd": "0.307.1",
-    "@wrongstack/sage": "0.307.1",
-    "@wrongstack/kanban": "0.307.1",
-    "@wrongstack/tools": "0.307.1"
+    "@wrongstack/core": "0.308.1",
+    "@wrongstack/sage": "0.308.1",
+    "@wrongstack/kanban": "0.308.1",
+    "@wrongstack/runtime": "0.308.1",
+    "@wrongstack/sdd": "0.308.1",
+    "@wrongstack/tools": "0.308.1"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",