@momoi-labs/kiso 0.12.0 → 0.13.0

package/README.md

@@ -74,3 +74,9 @@ to open it locally, or `npm run build:gallery` to produce the static site.
 
 See [Publishing Kiso](docs/publishing.md) for the first npm publication, trusted
 publisher setup, release PRs, and version tags.
+
+Run `npx playwright install chromium` once, then `npm run check:browser` to
+check touch targets, taps, disabled controls, and keyboard interaction for
+Lifecycle, Checkbox, Switch, Tabs, and TimeRangeControl in Chromium. Checks
+cover coarse and fine pointers at 390px and 1280px in both themes. Set
+`SCREENSHOT_DIR=artifacts/touch-controls` to save screenshots.

package/kiso/docs/components/README.md

@@ -41,11 +41,13 @@ behavioral reference where one exists.
 - [Dot](dot.md): Adds a decorative status mark beside readable text.
 - [DropdownMenu](dropdown-menu.md): Presents contextual actions anchored to a specific object or trigger.
 - [EmptyState](empty-state.md): Replaces an empty collection with an explanation and optional next action.
+- [FilterInput](filter-input.md): Turns typed conditions into editable field/operator/value chips, with IN lists and nested AND/OR groups.
 - [KV](kv.md): Describes one object through named facts.
 - [LogView](log-view.md): Displays scrollable log output with follow-tail behavior.
 - [Search](search.md): Filters visible content such as a list or table.
 - [Sparkline](sparkline.md): Draws the shape of one metric series at cell size.
 - [Stat](stat.md): Presents a named metric with optional change and context.
+- [StatusBadge](status-badge.md): Says a record's state in one of three tones, pulsing while work goes.
 - [StepBar](step-bar.md): Summarises a run as one segment per step, coloured by state.
 - [StepList](step-list.md): Lists a run's steps with a state, a label, a timing, and an output.
 - [Table / DataTable](table.md): Presents structured records with optional sorting, selection, filtering, and pagination.
@@ -60,6 +62,7 @@ behavioral reference where one exists.
 - [BrandMark](brand-mark.md): Decorative letter or icon beside a product name.
 - [Breadcrumb](breadcrumb.md): Shows the current location within a hierarchy.
 - [Header](header.md): Composes persistent application navigation and global actions.
+- [Lifecycle](lifecycle.md): Groups a detail screen's status, verbs, and destructive action in one row.
 - [Navigation](navigation.md): Provides a generic semantic container for destination links.
 - [PageHeader](page-header.md): Composes a page title, optional subtitle, and page-scoped action Buttons.
 - [Pagination](pagination.md): Moves through known pages while exposing the current position.

package/kiso/docs/components/card.md

@@ -80,7 +80,7 @@ it, so the mark points at the corner without touching it.
 | Token | Value | Meaning |
 | --- | --- | --- |
 | `--color-corner-mark` | `--color-border-strong` | Tick colour. |
-| `--corner-mark` | `1` | Opacity: marks on (`1`) or off (`0`). |
+| `--corner-mark` | `1` | Marks on (`1`) or off (`0`). Off marks also drop their inset, so they add no overflow to a scroll container around the panel. |
 | `--corner-mark-tick` | 4px | Length of one tick. |
 | `--corner-mark-gap` | 2px | Distance from tick end to the frame. |
 

package/kiso/docs/components/chip-input.md

@@ -25,6 +25,7 @@ which options a chip accepts. ChipInput never parses.
 | One value from a known set | [Select](select.md) | Single choice. |
 | Free text that is not a list | [Input](input.md) or [Textarea](textarea.md) | Nothing to chip. |
 | Filtering what is already on screen | [Search](search.md) | A query, not stored values. |
+| Filtering by fields, operators, and logical groups | [FilterInput](filter-input.md) | Typed conditions with IN lists and AND/OR groups. |
 | Running a global action | [CommandPalette](command-palette.md) | Commands, not data. |
 
 ## Anatomy
@@ -93,11 +94,11 @@ form column.
 | hover | Quiet border emphasis on the box. A hovered version segment deepens its fill. | `--color-border-strong`, `--color-accent-surface`. |
 | focus | One ring around the whole box, never around the bare input. | `--color-ring`. |
 | editing a segment | The value or the options become an input sized to their content; the chip takes an accent border and a confirm control appears. | `--color-primary`, `--color-accent-surface`. |
-| no options | Only the `+` segment remains, in the subtle foreground. | `--color-subtle-foreground`. |
+| no options | Only the `+` segment remains, in the muted foreground. | `--color-muted-foreground`. |
 | chip invalid | The single chip is marked, not the field. Say why next to the field. | `--color-danger-surface`, `--color-danger-border`, `--color-danger`. |
 | field invalid | `aria-invalid` on the box plus [ValidationMessage](validation-message.md). | `--color-danger`. |
 | disabled | The box and every chip control are unavailable; chips stay readable. | `--color-disabled-surface`, `--color-disabled`. |
-| empty | Placeholder in the input showing the shape of one entry. | `--color-subtle-foreground`. |
+| empty | Placeholder in the input showing the shape of one entry. | `--color-muted-foreground`. |
 
 An invalid chip and an invalid field are different failures. A version that
 does not exist marks the chip; "add at least one dependency" marks the field.
@@ -156,7 +157,7 @@ ChipInput must have an explicit submit Button.
 ## Tokens
 
 Box and input follow [Input](input.md): `--color-card`, `--color-input`,
-`--color-border-strong`, `--color-foreground`, `--color-subtle-foreground`,
+`--color-border-strong`, `--color-foreground`, `--color-muted-foreground`,
 `--color-ring`, `--color-disabled`, `--color-disabled-surface`, `--radius-md`,
 `--shadow-xs`, `--size-control-md`, `--spacing-xs` padding,
 `--motion-duration-fast` and `--motion-easing-standard`.
@@ -164,8 +165,8 @@ Box and input follow [Input](input.md): `--color-card`, `--color-input`,
 Chips: `--color-secondary`, `--color-secondary-foreground`, `--radius-sm`,
 `--size-control-sm`, `--type-size-label`, `--font-mono` and
 `--type-size-metadata` for the segments, `--color-muted-foreground` for the
-scope and for an option's name, `--color-subtle-foreground` for the `=`, the
-brackets and the empty `+`, `--color-border` for the rules between segments,
+scope, option names, `=`, brackets and the empty `+`, `--color-border` for
+the rules between segments,
 `--color-card` for the value and option segments with `--color-accent-surface`
 when hovered, `--color-foreground` for an option's value, `--color-link` for
 the version,

package/kiso/docs/components/empty-state.md

@@ -56,7 +56,7 @@ error — errors are Alert. Do not color the whole EmptyState with status
 tokens.
 
 Surface tokens: text `--color-foreground` / `--color-muted-foreground` on
-the surrounding `--color-surface` or `--color-background`. Icon uses
+`--color-card` under the hatch that marks the region as not data. Icon uses
 `--color-muted-foreground` unless it is purely decorative brand chrome.
 
 ## Sizes
@@ -121,8 +121,7 @@ PageHeader.
 
 ## Tokens
 
-`--color-foreground`, `--color-muted-foreground`, `--color-surface` /
-`--color-background`, optional icon `--color-muted-foreground`, `--spacing-lg`
+`--color-foreground`, `--color-muted-foreground`, `--color-card`, optional icon `--color-muted-foreground`, `--spacing-lg`
 padding (`--spacing-md` for `sm`), `--spacing-sm` gap, `--radius-lg` on the
 icon frame, the hatch tokens (`--color-hatch`, `--hatch-line`,
 `--hatch-period`, `--hatch-angle`), and

package/kiso/docs/components/filter-input.md

@@ -0,0 +1,146 @@
+# FilterInput
+
+Build a structured search by typing. A complete condition becomes a chip with
+three editable segments: field, operator, and value. `IN` values share one
+segment. Parentheses visibly group chips, including nested groups.
+
+Use FilterInput for searches that need typed comparisons or Boolean groups.
+Use [Search](search.md) for a plain text query and [ChipInput](chip-input.md) for
+structured lists such as dependencies. Existing ChipInput APIs and behavior do
+not change.
+
+## Ownership and API
+
+The controlled `value` contains confirmed conditions and groups.
+`onValueChange` receives each valid change. The product owns the field schema,
+allowed operators and values, query execution, loading, pagination, and errors
+from its data source. FilterInput never generates or executes SQL.
+
+| Prop | Contract |
+| --- | --- |
+| `label` | Required visible label, associated with the trailing input. |
+| `fields` | Field definitions with `key`, optional `label`, `type`, optional `values`, `operators`, and `nullable`. |
+| `value`, `onValueChange` | Controlled `FilterNode[]` and its change callback. |
+| `onDraftChange` | Optional notification of trailing uncommitted text, including whole-expression editing. |
+| `disabled` | Disables the input, suggestions, segment editing, connectors, removal, and actions. |
+| `id`, `placeholder`, `className` | Input ID, optional syntax example, and root layout styling. |
+
+Field keys are identifiers without spaces or syntax punctuation. Use `label`
+for a friendly display name. `text` fields accept `=`, `!=`, `IN`, and
+`CONTAINS`; `number` fields accept equality, inequality, ordering, and `IN`.
+`nullable` adds `IS NULL`. `operators` restricts the field's supported operators.
+`values` restricts values to the supplied list and supplies autocomplete.
+Numbers must be finite; the product can apply additional domain constraints.
+
+Conditions contain `kind: "condition"`, `field`, `operator`, `value`, and
+`join`. Groups contain `kind: "group"`, `children`, and `join`. The first
+node's join is ignored. Later nodes join the preceding expression with `AND`
+or `OR`. Within each group, AND binds before OR. Explicit groups always keep
+their parentheses. IN values are arrays, number values are numbers, and
+IS NULL has a null value. An empty root means no filters; empty child groups
+are invalid.
+
+The separate `parseFilterExpression(text, fields)` helper returns either
+`{ ok: true, value }` or `{ ok: false, error }`. It never returns a partially
+parsed query. Pass `{ allowLeadingJoin: true }` only when appending to an
+existing expression. `serializeFilterExpression` converts confirmed nodes back
+to editable text. `getFilterSuggestions` exposes the same completion logic for
+product adapters. These helpers do not alter ChipInput.
+
+## Typing and syntax
+
+| Input | Meaning |
+| --- | --- |
+| `status=active` or `status:active` | Equality. |
+| `status!=paused` | Inequality. |
+| `lag>=100` | Numeric comparison; `>`, `<`, and `<=` also work. |
+| `owner CONTAINS Mina` or `owner~Mina` | Text containment; matching rules belong to the product. |
+| `region IN (eu, us)` | Any listed value. Brackets are also accepted. |
+| `owner IS NULL` | Missing value for a nullable field. |
+| `(status=active OR status=paused) AND region=eu` | Grouped conditions. |
+
+Whitespace after a complete scalar condition creates a chip. Closing an IN
+list or complete group also commits it. Enter confirms complete text without
+a trailing delimiter. Adjacent conditions use AND. Operators and field keys
+are case-insensitive; text values retain their case.
+
+Quote spaces, reserved words, or commas inside a value, for example
+`owner="Ana Silva"` or `owner IN ("Doe, Jane", Mina)`. Single and double quotes
+work; backslash escapes protect quotes and backslashes. A trailing comma before
+the list closes is ignored: `(eu, us, )` equals `(eu, us)`. Duplicate list
+values collapse. Empty lists and missing values between commas remain invalid.
+
+Incomplete text remains a draft. An unfinished group never commits only its
+first condition. Invalid input displays a correction beside the field when
+confirmation is attempted; it does not replace confirmed filters. Input method
+composition does not create chips until composition ends. Editing inside the
+draft does not auto-commit while the caret is away from its end.
+
+## Editing and removal
+
+Click a chip segment to edit only that field, operator, or value. Click a
+group's opening parenthesis to edit that group's expression. Enter or Save
+confirms; Escape or Cancel restores the saved value. Only one editor is active
+at a time. Results continue to use the saved filter until confirmation.
+
+Changing a scalar operator to IN wraps the existing value in an array. Changing
+a multi-value IN to a scalar operator asks for a replacement value instead of
+discarding extra values. Changing to IS NULL removes the value. Unsupported
+field/operator/value combinations remain editable with a validation message.
+
+Click a connector to switch AND/OR. Edit expression restores the entire query
+as text so existing conditions can be regrouped. Enter saves that draft;
+Escape cancels it. Clear filters removes both confirmed filters and drafts.
+Removing the last condition in a group removes that empty group as well.
+
+## Keyboard and accessibility
+
+| Key or action | Behavior |
+| --- | --- |
+| ArrowDown / ArrowUp | Open or navigate contextual suggestions. |
+| Tab | Accept a visible suggestion. With suggestions dismissed, continue normal focus navigation. |
+| Shift+Tab | Move backward without accepting a suggestion. |
+| Enter | Confirm valid text, or accept a suggestion for incomplete text. Never implicitly submit the surrounding form. |
+| Escape | Dismiss suggestions; cancel a segment, group, or whole-expression edit. |
+| Backspace in an empty trailing input | Restore the last condition or group as text for editing. |
+| Click empty box space | Focus the trailing input. |
+
+The trailing input is a labeled combobox. The listbox, active descendant, and
+expanded state describe only visible suggestions. Chip controls are native
+buttons with names that include their condition. Groups have accessible names.
+Errors use `aria-invalid`, associated descriptions, and alert text. A polite
+status announces committed changes. Confirmation restores focus to the edited
+segment; removal returns it to the trailing input.
+
+Provide an explicit product search action when results require submission. Do
+not silently discard pending text on submit; observe `onDraftChange` or ask the
+person to finish the draft first. This component does not persist filter state.
+
+## Layout, states, and tokens
+
+One continuous-typing interaction. Required states are empty, draft with
+suggestions, confirmed chips, IN list, nested groups, editing, invalid draft,
+and disabled. An empty result set belongs to the collection, not this control.
+
+The box grows vertically as chips wrap. Groups wrap internally; they must not
+force horizontal page scrolling on narrow screens. Touch targets use
+`--size-touch-min` on coarse pointers. Desktop segments use
+`--size-control-sm`. Maintain visible keyboard focus in both themes.
+
+Compose the existing chip, input, button, and menu surfaces. Consume
+`--color-card`, `--color-foreground`, `--color-muted-foreground`,
+`--color-link`, `--color-border`, `--color-border-strong`,
+`--color-accent-surface`, `--color-accent-surface-hover`, `--color-selected`,
+`--color-selected-foreground`, `--color-ring`, and `--color-disabled`.
+Use the existing spacing, radius, font, and shadow tokens. No new palette or
+spacing scale is introduced.
+
+## Boundaries
+
+This is a small filter grammar, not SQL or a query-language interpreter. It
+supports explicit Boolean groups but not NOT groups, field-to-field comparisons,
+functions, or arbitrary SQL. The parser limits recursive nesting to 64 levels.
+
+Validate the field schema and user filters again at the application boundary.
+A server adapter maps allowed field identifiers and binds values as parameters.
+Never concatenate editable values into executable SQL.

package/kiso/docs/components/input.md

@@ -44,7 +44,7 @@ for large. It does not reduce text or target size below accessible product norms
 
 | State | Behavior |
 | --- | --- |
-| Default | `--color-surface` background, `--color-border` outline, `--color-foreground` value; placeholder uses `--color-subtle-foreground`. |
+| Default | `--color-surface` background, `--color-border` outline, `--color-foreground` value; placeholder uses `--color-muted-foreground`. |
 | Hover | Border emphasis may increase without changing layout or implying focus. |
 | Focus | Visible `--color-focus` ring; do not rely on border color alone. |
 | Active | Native text selection and editing behavior; no separate persistent visual state. |
@@ -85,7 +85,7 @@ silently disable a field merely to show activity.
 ## Tokens
 
 Use only semantic roles: `--color-surface`, `--color-foreground`,
-`--color-subtle-foreground`, `--color-border`, `--color-focus`,
+`--color-muted-foreground`, `--color-border`, `--color-focus`,
 `--color-disabled`, and `--color-danger`; the five property-qualified body
 typography tokens; `--spacing-xs`, `--spacing-sm`, `--spacing-md`, and
 `--spacing-lg` as mapped above; `--radius-md`; `--shadow-sm` for elevated

package/kiso/docs/components/lifecycle.md

@@ -0,0 +1,80 @@
+# Lifecycle
+
+## Purpose
+
+Lifecycle is the header row of a detail screen: what the record is, what you
+can do to it, and the one action you do not want to hit by accident. It sits
+to the right of the [PageHeader](page-header.md) inside `.between`. See
+[List-detail](../patterns/list-detail.md#list-and-detail-as-separate-screens).
+
+## Anatomy
+
+```
+Lifecycle (.lifecycle)
+├── status cluster (role="group", "Status"): one or more StatusBadge
+├── verbs cluster (role="group", "Actions", optional): Buttons
+└── destructive action (optional): Button with .btn-danger-ghost
+```
+
+```
+[ Running │ HTTP 200 ]  [ Start │ Stop │ Restart ]    Remove
+```
+
+Status and verbs are two objects because they are different kinds of thing.
+Each cluster gives its children's borders and corners to one frame, and a
+hairline between children says they are separate readings or separate
+choices. Status is read, so its cluster has no shadow and each badge keeps
+its tone. The verbs are pressed, so their cluster carries the surface and the
+shadow. The destructive action stands outside both with a wider gap, so a
+slip on Restart cannot land on Delete.
+
+## States
+
+- **No verbs.** Pass no `actions` and the verbs cluster is not rendered. An
+  empty bordered box reads as something that failed to load.
+- **Disabled verb.** A disabled Button keeps its place in the cluster with the
+  disabled surface. Start is off the whole time a thing runs; that is normal.
+- **Work in progress.** The status cluster adds a pulsing
+  [StatusBadge](status-badge.md) that names the phase.
+
+## Sizes
+
+Buttons are `size="sm"`; the clusters are `--size-control-sm` tall. At 720px
+and below the row takes the width under the title, the verbs take a row of
+their own, and the destructive action follows without its extra gap.
+
+## Accessibility
+
+Each cluster is a `role="group"` named "Status" or "Actions". Every verb is
+a text-labelled Button. The destructive action opens a confirmation; see
+[Destructive actions](../patterns/destructive-actions.md). The focus ring of
+a verb sits inside the cluster's edge.
+
+## Tokens and implementation
+
+Frames use `--color-border` and `--radius-md`; the verbs cluster uses
+`--color-card` and `--shadow-xs`; hover uses `--color-accent-surface-hover`;
+disabled uses `--color-disabled-surface` and `--color-disabled`. The
+component takes slots, not data: the screen keeps its own conditions for
+which verbs are disabled.
+
+```tsx
+<div className="between">
+  <PageHeader><PageHeaderTitle>paperless</PageHeaderTitle></PageHeader>
+  <Lifecycle
+    status={<StatusBadge tone="success">Running</StatusBadge>}
+    actions={<><Button size="sm">Stop</Button><Button size="sm">Restart</Button></>}
+    destructive={<Button size="sm" variant="ghost" className="btn-danger-ghost">Remove</Button>}
+  />
+</div>
+```
+
+## When to use
+
+- The header of a detail screen for a record with a state and verbs.
+
+## When NOT to use
+
+- A list screen. Its one primary verb goes in PageHeader `actions`.
+- A create screen. There is nothing to start or delete yet.
+- Row actions in a table. Use a [DropdownMenu](dropdown-menu.md).

package/kiso/docs/components/log-view.md

@@ -35,7 +35,7 @@ No size variants. The product chooses the frame height. The frame uses
 `--color-neutral-950`, text `--color-neutral-300`, `--color-border`,
 `--radius-surface`, and `--spacing-md` padding. Log text uses `--font-mono`,
 `--type-size-label`, and `--type-line-height-relaxed`. Timestamps use
-`--color-neutral-600` with `--spacing-sm` after them.
+`--color-neutral-500` with `--spacing-sm` after them.
 
 ## States
 

package/kiso/docs/components/search.md

@@ -50,7 +50,7 @@ FormField patterns.
 | `submit` | Applies on Enter or an explicit "Search" Button. Good for expensive server queries. |
 
 Appearance follows Input: `--color-surface`, `--color-border`,
-`--color-foreground`, placeholder `--color-subtle-foreground`. Leading icon
+`--color-foreground`, placeholder `--color-muted-foreground`. Leading icon
 `--color-muted-foreground`.
 
 Do not add a "global" variant — that is CommandPalette.
@@ -127,7 +127,7 @@ a different global binding.
 ## Tokens
 
 Same semantic set as Input: `--color-surface`, `--color-foreground`,
-`--color-subtle-foreground`, `--color-muted-foreground`, `--color-border`,
+`--color-muted-foreground`, `--color-border`,
 `--color-focus`, `--color-disabled`, `--spacing-sm` block and `--spacing-md`
 inline padding, `--radius-md`, the five property-qualified body typography
 tokens, `--motion-duration-fast`, and `--motion-easing-standard`.

package/kiso/docs/components/status-badge.md

@@ -0,0 +1,62 @@
+# StatusBadge
+
+## Purpose
+
+StatusBadge says the state of one record in one of three tones, the way a
+light on a device does. Green is alive: a running machine, a build that is
+going, a run that ended well. Red is failed. Neutral is what is not
+happening: pending, stopped, disabled. It is a [Badge](badge.md) with a
+[Dot](dot.md); use Badge directly for classification that is not a state.
+
+## Anatomy
+
+```
+StatusBadge (Badge)
+├── Dot (decorative, pulses while work is going)
+└── label (required)
+```
+
+## States
+
+| Tone | Meaning | Badge variant |
+| --- | --- | --- |
+| `success` | Alive, or finished well. | `success` |
+| `danger` | Failed. | `danger` |
+| `neutral` | Not happening: pending, stopped, disabled. | `neutral` |
+
+There is no fourth tone. "In progress" is not a colour: set `pulse` and let
+the label name the phase ("Provisioning", "Building"), not "Running". A thing
+that is merely up holds still.
+
+## Sizes
+
+One size, the Badge's. In a [Lifecycle](lifecycle.md) status cluster the
+badge takes the cluster's height.
+
+## Accessibility
+
+The label carries the state; the dot is `aria-hidden`. Nothing depends on
+colour alone. The pulse stops under `prefers-reduced-motion`, the same as
+Dot's.
+
+## Tokens and implementation
+
+Tones map to Badge variants and reuse their tokens. The pulse is Dot's
+`pulse`. No Radix primitive.
+
+```tsx
+<StatusBadge tone="success">Running</StatusBadge>
+<StatusBadge tone="success" pulse>Provisioning</StatusBadge>
+<StatusBadge tone="danger">Failed</StatusBadge>
+<StatusBadge tone="neutral">Stopped</StatusBadge>
+```
+
+## When to use
+
+- A record's state in a table cell or in a detail screen's Lifecycle row.
+
+## When NOT to use
+
+- Classification without a state ("Beta", "v2"). Use Badge.
+- A warning or information state. Use Badge `warning` or `info`, or an
+  [Alert](alert.md) when the person must act.

package/kiso/docs/components/textarea.md

@@ -78,7 +78,7 @@ the loading status independently perceivable.
 ## Tokens
 
 Use the same exact mapping as Input: `--color-surface`, `--color-foreground`,
-`--color-subtle-foreground`, `--color-border`, `--color-focus`,
+`--color-muted-foreground`, `--color-border`, `--color-focus`,
 `--color-disabled`, `--color-danger`; all five body typography properties;
 `--spacing-sm` block and `--spacing-md` inline padding; `--radius-md`;
 `--motion-duration-fast`; and `--motion-easing-standard`. No primitive colors

package/kiso/docs/evolution.md

@@ -32,6 +32,7 @@ The growth model below is not theory. What it has produced so far:
 | --- | --- | --- |
 | **[ChipInput](components/chip-input.md)** | A self-hosted console had to collect a development image's dependencies: a list a person types, where every entry carries a backend, a version, and installer options. One form section per entry grew without limit and buried the list. | Added as a component contract with the segmented chip, the in-place value, and one segment per option. |
 | **[StepList](components/step-list.md) and [StepBar](components/step-bar.md)** | The self-host console's Last run tab walks a machine through eleven lifecycle steps over several minutes and wrote its own list of steps with a state each, replacing a progress bar and a two-thousand-line log to search. An image build and the Host's own bootstrap were about to copy it. [#98](https://github.com/momoi-labs/blueprint/issues/98) records the evidence. | Added as two contracts: the list inside a Split with the step's LogView beside it, and the bar for a summary, a table cell, or a toast. |
+| **[Lifecycle](components/lifecycle.md), [StatusBadge](components/status-badge.md) and the screen layout classes** | self-host settled one layout for list, detail and create screens (its ADR-0024), and quiet-inbox adopted it (its ADR 0010) by copying two components and about sixty lines of CSS. [#112](https://github.com/momoi-labs/blueprint/issues/112) records the evidence. | Added as two contracts, the `.list-filters`, `.lifecycle`, `.detail-tabs` and `.form-page` classes, and the separate-screens section of [List-detail](patterns/list-detail.md#list-and-detail-as-separate-screens). |
 | **[Sparkline](components/sparkline.md)** | The self-host console collects metrics in-process, one sample per tick on an evenly spaced window, and needed the same shape three times over: a trend cell per application row, context under a KPI value, and one series per container. [#84](https://github.com/momoi-labs/blueprint/issues/84) records the evidence. | Added as a component contract and a Recharts-based component, single series, neutral by default, primary only for the series a tile is about. |
 
 ## Growth model: grow with real products

package/kiso/docs/patterns/crud.md

@@ -49,6 +49,33 @@ Discard restores the last saved values; Cancel leaves the task. Keep entries
 on failure. Announce feedback in the message region, not around the buttons.
 Immediate preferences and automatic filters do not require FormActions.
 
+## Create screen
+
+A record with a recipe is too much for a dialog, so it gets a screen: a
+PageHeader that says what is about to be made, and the same form the detail
+screen edits, in a `Card.form-page`. The card is at most 720px wide and the
+footer's corners follow it. There is no Lifecycle row and no tabs; the
+footer is FormActions with Cancel and the one primary verb. From 1024px,
+when the card is a direct child of `.page` inside an AppShell, it takes the
+height the header leaves and the form scrolls inside it, so pass `sticky` to
+FormActions and it rests on the card's edge. Below 1024px, or with
+`data-fill="false"` on the card, the document scrolls and the actions end the
+form in flow. The detail screen
+is in [List-detail](list-detail.md#list-and-detail-as-separate-screens).
+
+```tsx
+<PageHeader><PageHeaderTitle>Deploy an application</PageHeaderTitle></PageHeader>
+<Card className="form-page">
+  <Form>
+    <div className="form-body">…</div>
+    <FormActions sticky>
+      <Button>Cancel</Button>
+      <Button type="submit" variant="primary">Deploy</Button>
+    </FormActions>
+  </Form>
+</Card>
+```
+
 ## Flow
 
 ### Create

package/kiso/docs/patterns/filtering.md

@@ -28,6 +28,7 @@ invent a per-list filter kit.
 | Toggle a single facet on/off | [Switch](../components/switch.md) or [Checkbox](../components/checkbox.md) | "Show only replicas with lag" |
 | Multiple values from a set | [Checkbox](../components/checkbox.md) group inside a [Popover](../components/popover.md) | "Region: ☑ eu ☑ us ☐ ap" |
 | Range or complex facet | [Popover](../components/popover.md) with form controls | "Lag: 0–500 ms" |
+| Typed conditions across fields, with logical groups | [FilterInput](../components/filter-input.md) | `(status=active OR region IN (eu, us)) AND lag>100` |
 | Quick toggles (few, stable) | [Button](../components/button.md) `ghost` toggle or [Tabs](../components/tabs.md) | "All / Active / Archived" |
 | Active-filter summary | [Badge](../components/badge.md) per active filter or a text line | "Status: degraded ×" |
 
@@ -117,7 +118,9 @@ When filters exclude everything:
 - Do not invent a filter UI that competes with [Select](../components/select.md)
   / [Checkbox](../components/checkbox.md) / [Popover](../components/popover.md).
   If the facet is one-of-many, use Select; if many-of-many, use a Checkbox
-  group in a Popover.
+  group in a Popover. Use [FilterInput](../components/filter-input.md) when
+  people need typed conditions, per-field operators, or nested AND/OR groups.
+  Its chips already show and remove active filters; do not duplicate them as Badges.
 - Filter state is part of the list's state, not global. Navigating away and
   back may restore it (documented per surface) but filters must not leak into
   unrelated lists.

package/kiso/docs/patterns/list-detail.md

@@ -101,9 +101,85 @@ Narrow (stacked detail):
 └──────────────────────────────────────┘
 ```
 
+## List and detail as separate screens
+
+An alternative to the split: the list is one screen and each record opens a
+detail screen of its own. Use it when a record carries more than a pane can
+hold, such as a form, a log, or a terminal. Its create screen is in
+[CRUD](crud.md#create-screen).
+
+### List screen
+
+```tsx
+<PageHeader actions={<Button size="sm" variant="primary">Deploy application</Button>}>
+  <PageHeaderTitle>Applications</PageHeaderTitle>
+</PageHeader>
+<div className="list-filters">
+  <Search aria-label="Search applications" />
+  <Select>…</Select>
+  {filtering ? <Button size="sm" variant="ghost">Clear filters</Button> : null}
+</div>
+<div className="table-wrap">
+  <Table>…</Table>
+  <div className="table-footer">3 of 12 applications</div>
+</div>
+```
+
+- The one primary verb goes in PageHeader `actions`, not in the filter row.
+  Narrowing a list and adding to it are opposite intentions.
+- `.list-filters`: Search first and growing, a Select sized to its content,
+  "Clear filters" only once something is filtered. Below 560px each control
+  takes the row.
+- The count goes in `.table-footer`, not above the table.
+- From 1024px, a `.table-wrap` that is the last child of `.page` fills the
+  height the header and filters leave: the rows scroll under the sticky
+  header and the count stays on the bottom edge, as a detail card does. Set
+  `data-fill="false"` on the `.table-wrap` to end the table with its last
+  row instead.
+- A small record is created in a [Modal / Dialog](../components/modal-dialog.md).
+
+### Detail screen
+
+```tsx
+<div className="between">
+  <PageHeader><PageHeaderTitle>paperless</PageHeaderTitle></PageHeader>
+  <Lifecycle status={…} actions={…} destructive={…} />
+</div>
+<Card className="detail-tabs">
+  <Tabs defaultValue="configuration">
+    <TabsList aria-label="Application details">…</TabsList>
+    <TabsContent value="configuration">
+      <Form>
+        <div className="form-body">…</div>
+        <FormActions sticky>…</FormActions>
+      </Form>
+    </TabsContent>
+    <TabsContent value="logs" className="detail-logs"><LogView>…</LogView></TabsContent>
+  </Tabs>
+</Card>
+```
+
+- The screen says its own name, and [Lifecycle](../components/lifecycle.md)
+  sits beside it. The destructive action lives in that row, not at the foot
+  of the form.
+- One `Card.detail-tabs`, not a split. When the app reads facts back about
+  the record, a Summary tab comes first.
+- `Form` does not render `.form-body`; write it. A panel whose only child is
+  the form gives its padding to `.form-body`, so a sticky
+  [FormActions](../components/form-actions.md) spans the panel.
+- A panel with its own scroller, a [LogView](../components/log-view.md) or a
+  thread, takes `.detail-logs` or `.detail-pane` and reaches the card's edges.
+- From 1024px, when the card is a direct child of `.page` inside an
+  [AppShell](../components/app-shell.md), the shell stops at the viewport
+  and the card takes the height the header leaves; each panel scrolls inside
+  it. Set `data-fill="false"` on the card to let the document scroll
+  instead. Below 1024px the document scrolls and an edge-to-edge panel is
+  60vh tall.
+
 ## When to use
 
 - Collections where inspecting one item while keeping list context matters.
+- Records with configuration and output of their own: use separate screens.
 - Entities that share the same columns and detail shape.
 
 ## When NOT to use

package/kiso/docs/tokens.md

@@ -60,7 +60,7 @@ never text on dark.
 | `elevated-surface` | Menus, popovers, and dialogs. | `dark.700` | `white` |
 | `foreground` | Primary text and content that must carry the strongest hierarchy. | `dark.100` | `neutral.900` |
 | `muted-foreground` | Secondary text and labels. It remains normal-text eligible. | `dark.400` | `neutral.600` |
-| `subtle-foreground` | Placeholders, timestamps, and non-essential hints; large text only, never body copy. | `dark.450` | `neutral.500` |
+| `subtle-foreground` | Large supporting text and non-text graphics where the surface provides 3:1 contrast; never small text. | `dark.450` | `neutral.500` |
 | `border` | Dividers and control outlines; never text. | `dark.600` | `neutral.300` |
 | `primary` | The primary fill: primary buttons, solid badges, checked controls, the brand mark. Not text-eligible on dark. | `#684bb5` | `#5b3fc4` |
 | `accent` | Secondary emphasis and highlights, not the page's main action. | `accent.300` | `accent.800` |
@@ -143,8 +143,9 @@ terminals — which cannot follow `color-scheme`, so their text cannot either.
 
 Use `foreground` for default reading, `muted-foreground` when content is
 secondary but still needs normal-text contrast, and `subtle-foreground` only
-for large or non-essential supporting copy. Use `primary` for the fill of the
-action that drives the current task; use `link` for anything that reads as a
+for large supporting copy or non-text graphics on surfaces that provide at
+least 3:1 contrast. Use `primary` for the fill of the action that drives the
+current task; use `link` for anything that reads as a
 link or an active indicator, because the fill is not text-eligible on dark.
 Use `accent` to draw secondary attention without creating another primary
 action.
@@ -286,7 +287,7 @@ points at the corner without touching it.
 
 | Token | Value | Meaning |
 | --- | --- | --- |
-| `--corner-mark` | `1` | Opacity: marks on (`1`) or off (`0`). |
+| `--corner-mark` | `1` | Marks on (`1`) or off (`0`). Off marks also drop their inset, so they add no overflow to a scroll container around the panel. |
 | `--corner-mark-tick` | 4px | Length of one tick. |
 | `--corner-mark-gap` | 2px | Distance from tick end to the frame. |
 

package/kiso/ui.css

@@ -75,7 +75,7 @@ h1, h2, h3, h4, p, figure { margin: 0; }
   font-weight: var(--type-weight-semibold);
   letter-spacing: var(--type-letter-spacing-caps);
   text-transform: uppercase;
-  color: var(--color-subtle-foreground);
+  color: var(--color-muted-foreground);
 }
 .t-mono, .mono, code, pre, kbd {
   font-family: var(--font-mono);
@@ -106,9 +106,11 @@ a, .link {
 a:hover, .link:hover { text-decoration: underline; }
 
 /* --- layout helpers ------------------------------------------------------ */
-.stack   { display: grid; gap: var(--spacing-lg); }
-.stack-sm{ display: grid; gap: var(--spacing-sm); }
-.stack-xs{ display: grid; gap: var(--spacing-xs); }
+/* One explicit column of minmax(0, 1fr), so a wide table, chart, or log line
+   inside a stack cannot widen the page; it scrolls or wraps in place instead. */
+.stack   { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
+.stack-sm{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
+.stack-xs{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xs); }
 .row     { display: flex; align-items: center; gap: var(--spacing-sm); }
 .row-md  { display: flex; align-items: center; gap: var(--spacing-md); }
 .row-wrap{ display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; }
@@ -220,11 +222,13 @@ a:hover, .link:hover { text-decoration: underline; }
 .btn-primary[data-loading="true"]::after { border-color: var(--color-primary-foreground); border-top-color: transparent; }
 @keyframes spin { to { transform: rotate(360deg); } }
 
-/* Button group / segmented control */
+/* Button group / segmented control. `.btn-group` twice, so the shared corners
+   beat the appearance rule that rounds every control and comes later in this
+   file; otherwise each button keeps its own corners and the group falls apart. */
 .btn-group { display: inline-flex; }
-.btn-group .btn { border-radius: 0; border-color: var(--color-input); background: var(--color-card); }
-.btn-group .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
-.btn-group .btn:last-child  { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
+.btn-group.btn-group .btn { border-radius: 0; border-color: var(--color-input); background: var(--color-card); }
+.btn-group.btn-group .btn:first-child { border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
+.btn-group.btn-group .btn:last-child  { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
 .btn-group .btn + .btn { margin-inline-start: -1px; }
 .btn-group .btn:hover { background: var(--color-accent-surface); }
 .btn-group .btn[aria-pressed="true"] { background: var(--color-secondary); z-index: 1; }
@@ -355,7 +359,7 @@ fieldset.form-body { border: 0; margin: 0; }
   transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
 }
 .textarea { height: auto; min-height: 76px; padding-block: var(--spacing-sm); line-height: var(--type-line-height-normal); resize: vertical; }
-.input::placeholder, .textarea::placeholder { color: var(--color-subtle-foreground); }
+.input::placeholder, .textarea::placeholder { color: var(--color-muted-foreground); }
 .input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); }
 .input:disabled, .select:disabled, .textarea:disabled {
   background: var(--color-disabled-surface);
@@ -393,10 +397,10 @@ fieldset.form-body { border: 0; margin: 0; }
 }
 
 /* chip input: several structured values in one field */
-.chip-input { position: relative; display: grid; gap: var(--spacing-xs); }
+.chip-input { position: relative; display: grid; min-width: 0; gap: var(--spacing-xs); }
 .chip-input-box {
   display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs);
-  width: 100%;
+  width: 100%; min-width: 0;
   min-height: var(--size-control-md);
   padding: var(--spacing-xs);
   border: 1px solid var(--color-input);
@@ -423,13 +427,14 @@ fieldset.form-body { border: 0; margin: 0; }
   font: inherit; font-size: var(--type-size-body);
   outline: none;
 }
-.chip-input-field::placeholder { color: var(--color-subtle-foreground); }
+.chip-input-field::placeholder { color: var(--color-muted-foreground); }
 .chip-input-list {
   position: absolute; inset-inline: 0; top: 100%; z-index: 40;
   margin-block-start: var(--spacing-xs);
   max-height: 240px; overflow-y: auto;
 }
 .chip-input-list .menu-item[aria-selected="true"] { background: var(--color-selected); color: var(--color-selected-foreground); }
+.chip-input-list .menu-item[aria-selected="true"] .muted { color: inherit; }
 .chip-input-list .menu-item .muted { margin-inline-start: auto; }
 
 .chip {
@@ -445,6 +450,9 @@ fieldset.form-body { border: 0; margin: 0; }
   font-size: var(--type-size-label);
   line-height: 1;
 }
+/* A structured chip can scroll without widening its field or shrinking targets. */
+.chip-input .chip:not(.filter-chip) { overflow-x: auto; }
+.chip-input .chip:not(.filter-chip) > * { flex-shrink: 0; }
 .chip:has(.is-editing) { background: var(--color-card); border-color: var(--color-primary); }
 .chip[data-state="invalid"] { background: var(--color-danger-surface); border-color: var(--color-danger-border); color: var(--color-danger); }
 /* The chip reads left to right like a call: what installs it, what it is,
@@ -476,8 +484,8 @@ fieldset.form-body { border: 0; margin: 0; }
 .chip-option { color: var(--color-foreground); }
 .chip-value:hover, .chip-option:hover { background: var(--color-accent-surface); }
 .chip-option-name { color: var(--color-muted-foreground); }
-.chip-option-mark { color: var(--color-subtle-foreground); }
-.chip-option[data-empty="true"] { color: var(--color-subtle-foreground); }
+.chip-option-mark { color: var(--color-muted-foreground); }
+.chip-option[data-empty="true"] { color: var(--color-muted-foreground); }
 .chip-value:last-child, .chip-option:last-child {
   border-start-end-radius: var(--radius-xs);
   border-end-end-radius: var(--radius-xs);
@@ -667,6 +675,9 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
 .table .col-tight { width: 1%; white-space: nowrap; }
 .th-sort { display: inline-flex; align-items: center; gap: var(--spacing-xs); cursor: pointer; background: none; border: 0; font: inherit; color: inherit; padding: 0; }
 .table-toolbar { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
+/* In a toolbar a select is an accessory to the search, not a form field, so
+   it takes only what its longest option needs. */
+.table-toolbar > .select { width: auto; flex: none; }
 .table-footer  { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--color-border); font-size: var(--type-size-label); color: var(--color-muted-foreground); }
 
 /* ===========================================================================
@@ -682,12 +693,16 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
   font-size: var(--type-size-body);
   font-weight: var(--type-weight-medium);
   color: var(--color-muted-foreground);
+  white-space: nowrap; /* a strip that scrolls sideways must not wrap "Last run" */
   cursor: pointer;
 }
 .tabs button:hover { color: var(--color-foreground); }
 .tabs button[aria-selected="true"] { color: var(--color-foreground); }
+/* The underline stays inside the button, just above the strip's border, so a
+   strip that scrolls sideways has no extra pixel of block overflow to draw a
+   scrollbar for. */
 .tabs button[aria-selected="true"]::after {
-  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
+  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
   background: var(--color-primary);
   border-radius: var(--radius-full);
 }
@@ -740,6 +755,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
 .dialog-header { padding: var(--spacing-lg) var(--spacing-lg) 0; display: grid; gap: var(--spacing-2xs); }
 .dialog-body   { padding: var(--spacing-lg); display: grid; gap: var(--spacing-lg); }
 .dialog-header + .dialog-body { padding-block-start: var(--spacing-md); }
+.dialog-header + .dialog-footer { margin-block-start: var(--spacing-lg); }
 .dialog-footer { padding: var(--spacing-md) var(--spacing-lg); border-top: 1px solid var(--color-border); display: flex; justify-content: flex-end; gap: var(--spacing-sm); background: var(--color-muted); border-end-start-radius: var(--radius-surface); border-end-end-radius: var(--radius-surface); }
 
 /* ===========================================================================
@@ -989,7 +1005,7 @@ table.table { width: 100%; border-collapse: collapse; font-size: var(--type-size
   font-weight: var(--type-weight-medium);
 }
 
-.page { padding: var(--spacing-xl); display: grid; gap: var(--spacing-xl); align-content: start; max-width: var(--size-content-max); }
+.page { padding: var(--spacing-xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); align-content: start; min-width: 0; max-width: var(--size-content-max); }
 .page-header { display: grid; gap: var(--spacing-2xs); }
 
 /* ===========================================================================
@@ -1042,7 +1058,7 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
    container scrolls for the corner marks it draws just outside its own frame.
    Height goes on `.logview`; the scroller takes what is left. */
 .logview > .log-scroll { flex: 1 1 auto; min-block-size: 0; overflow: auto; }
-.logview .log-time { color: var(--color-neutral-600); margin-inline-end: var(--spacing-sm); }
+.logview .log-time { color: var(--color-neutral-500); margin-inline-end: var(--spacing-sm); }
 .logview .log-warn { color: var(--color-warning-on-dark); }
 .logview .log-error{ color: var(--color-danger-on-dark); }
 .logview .log-info { color: var(--color-info-on-dark); }
@@ -1052,24 +1068,200 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 .bars i { flex: 1; background: var(--color-border-strong); border-radius: var(--radius-xs); }
 .bars i.on { background: var(--color-primary); }
 
+/* ===========================================================================
+   Screen layout: list, detail and create screens (Kiso: list-detail, crud)
+   =========================================================================== */
+/* The filter row on a list screen. Search first and growing, any extra
+   filter after it, and "Clear filters" only once something is filtered. The
+   way to add one more is in the page header, not here: narrowing a list and
+   adding to it are opposite intentions. */
+.list-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); }
+.list-filters > .input-group { flex: 1 1 260px; min-width: 0; }
+/* The select is an accessory to the search, not a second field, so it takes
+   only what its longest option needs. */
+.list-filters > .select { flex: none; width: auto; min-width: 11rem; }
+@media (max-width: 560px) {
+  .list-filters > .input-group { flex-basis: 100%; }
+  .list-filters > .select { width: 100%; }
+}
+
+/* The detail screen's first row: the title on the left, the lifecycle row on
+   the right. A title with a description is taller than the row, so the row
+   sits at the top, and it wraps under the title when there is no room. */
+.between:has(> .lifecycle) { align-items: flex-start; flex-wrap: wrap; gap: var(--spacing-lg); }
+
+/* The detail screen's header row: what it is, what you can do to it, and the
+   one action you do not want to hit by accident. The two clusters sit a
+   normal gap apart, and the destructive action gets a wider one so nothing is
+   ever flush against it. */
+.lifecycle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-md); }
+.lifecycle > .btn-danger-ghost { margin-inline-start: var(--spacing-sm); }
+
+/* A cluster is one object made of several. The children give up their own
+   border and corners to the frame, and a hairline between them is what says
+   they are separate readings, or separate choices. */
+.cluster {
+  display: inline-flex; align-items: stretch;
+  height: var(--size-control-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+/* Status is read, not pressed: no shadow, and each badge keeps the tone
+   surface that carries its meaning. */
+.cluster-status > .badge {
+  height: auto; border-radius: 0;
+  border-block: 0; border-inline-end: 0;
+  padding-inline: var(--spacing-md);
+  font-size: var(--type-size-label);
+}
+/* The tone's own border would double up against the frame's line. */
+.cluster-status > .badge + .badge { border-inline-start-color: var(--color-border); }
+/* The verbs are pressed, so the group carries the surface and the shadow
+   each button carried on its own. */
+.cluster-verbs { background: var(--color-card); box-shadow: var(--shadow-xs); }
+/* `.cluster` twice, so the flat corners beat the appearance rule that rounds
+   every control and comes later in this file. */
+.cluster.cluster-verbs > .btn { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
+.cluster-verbs > .btn + .btn { border-inline-start: 1px solid var(--color-border); }
+.cluster-verbs > .btn:hover:not(:disabled) { background: var(--color-accent-surface-hover); }
+/* A greyed verb is the row's normal state (Start is off while the thing
+   runs), so it reads as unavailable without punching a hole in the group. */
+.cluster-verbs > .btn:disabled { background: var(--color-disabled-surface); color: var(--color-disabled); }
+/* The focus ring belongs on the group's edge, not on a square inside it. */
+.cluster-verbs > .btn:focus-visible { outline-offset: -2px; }
+/* Wrapped onto its own line, the destructive action has no gap left to set
+   it apart, so the verbs take the row instead, and the row goes under the
+   title rather than squeezing beside it. */
+@media (max-width: 720px) {
+  .lifecycle { flex-basis: 100%; gap: var(--spacing-sm); }
+  .cluster-verbs { width: 100%; }
+  .cluster-verbs > .btn { flex: 1; }
+  .lifecycle > .btn-danger-ghost { margin-inline-start: 0; }
+}
+
+/* One card for everything a detail screen holds: its configuration, and
+   whatever it prints. The card takes the height the header row leaves and
+   each panel scrolls inside it, so switching tabs does not resize the page
+   under the cursor. */
+.detail-tabs { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
+.detail-tabs > [data-slot="tabs"] { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
+/* The card does not clip, or its corner marks would go with the overflow.
+   Its bottom corners pass down to the panel and the form instead, so a
+   sticky footer and an edge-to-edge log follow the card's shape. */
+.detail-tabs > [data-slot="tabs"],
+.detail-tabs [role="tabpanel"],
+.detail-tabs [role="tabpanel"] > .form {
+  border-end-start-radius: inherit; border-end-end-radius: inherit;
+}
+/* The strip scrolls sideways when the tabs do not fit. A scroller's automatic
+   minimum size is zero, so the list keeps its own height explicitly. */
+.detail-tabs [role="tablist"] { max-width: 100%; overflow-x: auto; padding-inline: var(--spacing-xl); }
+.detail-tabs > [data-slot="tabs"] > [role="tablist"] { min-height: min-content; }
+.detail-tabs [role="tabpanel"] { min-width: 0; min-height: 0; overflow: auto; padding: var(--spacing-xl); }
+/* A panel with its own scroller, a log or a thread, takes the card out to
+   its edges. */
+.detail-tabs [role="tabpanel"]:is(.detail-logs, .detail-pane) {
+  display: grid; grid-template-rows: minmax(0, 1fr);
+  overflow: hidden; padding: 0;
+}
+.detail-tabs .logview { min-height: 0; border: 0; border-radius: 0; --corner-mark: 0; }
+.detail-tabs .log-scroll { padding: var(--spacing-lg); }
+/* A display of our own beats the `hidden` a panel keeps after you leave it. */
+.detail-tabs [role="tabpanel"][hidden] { display: none; }
+/* A panel that holds a form gives its padding to the form's body, so a
+   sticky FormActions spans the panel and rests on its bottom edge. */
+.detail-tabs [role="tabpanel"]:has(> .form) { padding: 0; }
+.detail-tabs .form-body { padding: var(--spacing-xl); }
+
+/* A screen that fills the viewport: a detail card, a create card, or a list
+   whose table is the page's last child. The page has to stop growing with
+   its content, or the card and the table have no height to take. A screen
+   opts out with `data-fill="false"` on the card or the `.table-wrap`, and
+   the document scrolls as it did.
+   Below 1024px the sidebar stacks above the content and the document
+   scrolls again, so the cap is lifted with it. */
+@media (min-width: 1024px) {
+  .app-shell:has(.page > :is(.detail-tabs, .form-page):not([data-fill="false"]), .page > .table-wrap:last-child:not([data-fill="false"])) { height: 100vh; }
+  .app-shell:has(.page > :is(.detail-tabs, .form-page):not([data-fill="false"]), .page > .table-wrap:last-child:not([data-fill="false"])) > main {
+    display: flex; flex-direction: column; min-height: 0;
+  }
+  .app-shell:has(.page > :is(.detail-tabs, .form-page):not([data-fill="false"]), .page > .table-wrap:last-child:not([data-fill="false"])) > main > * { flex: none; }
+  .page:has(> :is(.detail-tabs, .form-page):not([data-fill="false"]), > .table-wrap:last-child:not([data-fill="false"])) { display: flex; flex-direction: column; min-height: 0; }
+  .app-shell > main > .page:has(> :is(.detail-tabs, .form-page):not([data-fill="false"]), > .table-wrap:last-child:not([data-fill="false"])) { flex: 1; }
+  /* `:where`, so the reset stays below the card's and the table's own flex. */
+  .page:where(:has(> :is(.detail-tabs, .form-page):not([data-fill="false"]), > .table-wrap:last-child:not([data-fill="false"]))) > * { flex: none; }
+  .page > :is(.detail-tabs, .form-page):not([data-fill="false"]) { flex: 1; min-height: 0; }
+  /* The create card scrolls its form, so sticky actions rest on its edge. */
+  .page > .form-page:not([data-fill="false"]) { display: grid; grid-template-rows: minmax(0, 1fr); }
+  .page > .form-page:not([data-fill="false"]) > .form { min-height: 0; overflow: auto; }
+  .page > .form-page[data-fill="false"] > .form > .form-actions[data-sticky="true"] { position: static; }
+  /* The rows scroll inside the table, under its sticky header, and the count
+     stays on the bottom edge. A page with more above the table than the
+     viewport holds keeps a usable table and scrolls instead. */
+  .page:has(> .table-wrap:last-child:not([data-fill="false"])) { overflow-y: auto; }
+  .page > .table-wrap:last-child:not([data-fill="false"]) {
+    flex: 1; min-height: calc(var(--size-control-lg) * 6);
+    display: flex; flex-direction: column;
+  }
+  .page > .table-wrap:last-child:not([data-fill="false"]) > .table-scroll { flex: 1; min-height: 0; }
+  .page > .table-wrap:last-child:not([data-fill="false"]) > .table-footer { flex: none; }
+}
+@media (max-width: 1023px) {
+  .detail-tabs { grid-template-rows: auto; }
+  /* The document scrolls, so the create form's actions end it in flow rather
+     than float over a card whose marks would not follow them. */
+  .form-page > .form > .form-actions[data-sticky="true"] { position: static; }
+  .detail-tabs [role="tabpanel"] { overflow: visible; }
+  .detail-tabs [role="tabpanel"]:is(.detail-logs, .detail-pane) { height: 60vh; }
+}
+@media (max-width: 720px) {
+  .detail-tabs [role="tablist"] { padding-inline: var(--spacing-lg); }
+  .detail-tabs [role="tabpanel"] { padding: var(--spacing-lg); }
+  .detail-tabs .form-body { padding: var(--spacing-lg); }
+  .detail-tabs [role="tabpanel"]:is(.detail-logs, .detail-pane) { padding: 0; }
+}
+
+/* A create screen is the edit form in a card of its own. A form wider than a
+   readable measure is only longer lines. The footer's corners follow the
+   card's. From 1024px the card fills the viewport like a detail card, above. */
+.form-page { max-width: 720px; }
+.form-page > .form { border-radius: inherit; }
+
 /* ===========================================================================
    Touch targets: the 44px rule applies to coarse pointers only.
    This is the whole reason the desktop UI can be 36px.
    =========================================================================== */
 @media (pointer: coarse) {
-  .btn, .input, .select, .nav-item, .menu-item {
+  .btn, .input, .select, .nav-item, .menu-item, .tabs button {
     min-height: var(--size-touch-min);
   }
-  .btn-icon { min-width: var(--size-touch-min); }
+  .btn-icon, .tabs button { min-width: var(--size-touch-min); }
+  .pagination { flex-wrap: wrap; }
+  .pagination .btn { min-width: var(--size-touch-min); flex-shrink: 0; }
+  /* Let the frame include the touch-sized buttons and both borders. */
+  .cluster-verbs { height: auto; }
   /* The chip grows with its segments, so the floor goes on the chip and the
      segments stretch to it. */
   .chip, .chip-input-field { min-height: var(--size-touch-min); }
+  button.chip-value, button.chip-option,
+  .chip-value.is-editing, .chip-option.is-editing {
+    min-width: var(--size-touch-min); min-height: var(--size-touch-min);
+  }
   .chip-action { min-width: var(--size-touch-min); height: var(--size-touch-min); }
 }
 
+/* Narrow viewports: the sidebar stacks above main as compact navigation
+   instead of disappearing, since it may be the only way to reach a
+   destination. It keeps its own scroller so a long list does not push the
+   page down. */
 @media (max-width: 1023px) {
   .app-shell { grid-template-columns: 1fr; }
-  .sidebar { display: none; }
+  .sidebar {
+    position: static; height: auto; max-height: 40vh;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--color-sidebar-border);
+  }
 }
 
 
@@ -1190,7 +1382,10 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
     left calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0,
     right 0 bottom calc(var(--corner-mark-tick) + var(--corner-mark-gap)),
     right calc(var(--corner-mark-tick) + var(--corner-mark-gap)) bottom 0;
-  inset: var(--appearance-mark-inset, calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap))));
+  /* Marks that are off (`--corner-mark: 0`) also collapse the inset to 0, so
+     the pseudo-element stops reaching outside the frame and a scroll container
+     around the panel does not scroll for marks nobody sees. */
+  inset: calc(var(--corner-mark, 1) * var(--appearance-mark-inset, calc(-1 * (var(--corner-mark-tick) + var(--corner-mark-gap)))));
   background-image: var(--appearance-mark-images,
     linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
     linear-gradient(var(--color-corner-mark), var(--color-corner-mark)),
@@ -1279,6 +1474,14 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 .splitter { flex: none; width: 1px; background: var(--color-border); cursor: col-resize; position: relative; }
 .splitter::after { content: ""; position: absolute; inset-block: 0; inset-inline: -3px; }
 .splitter:hover, .splitter.dragging { background: var(--color-ring); }
+@media (pointer: coarse) {
+  /* Reserve the hit area so it cannot cover controls at either pane's edge. */
+  .splitter {
+    margin-inline: calc((var(--size-touch-min) - 1px) / 2);
+    touch-action: none;
+  }
+  .splitter::after { inset-inline: calc((1px - var(--size-touch-min)) / 2); }
+}
 
 /* Legacy single-series SVG helpers. Interactive metrics use .framed-chart
    below; these selectors remain compatible with existing consumers. */
@@ -1286,7 +1489,7 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 .chart .grid { stroke: var(--color-border); stroke-width: 1; }
 .chart .line { fill: none; stroke: currentColor; stroke-width: 1.5; }
 .chart .area { fill: currentColor; fill-opacity: 0.12; }
-.chart-axis { display: flex; justify-content: space-between; font-size: var(--type-size-metadata); color: var(--color-subtle-foreground); margin-block-start: var(--spacing-sm); }
+.chart-axis { display: flex; justify-content: space-between; font-size: var(--type-size-metadata); color: var(--color-muted-foreground); margin-block-start: var(--spacing-sm); }
 
 /* Sparkline — one metric series at cell size (issue #84). No axis, no grid,
    no legend, no tooltip: the number beside the line carries the precision,
@@ -1320,7 +1523,8 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
 .meter, .bar-gauge { display: grid; gap: var(--spacing-sm); min-width: 0; }
 .bar-gauge { gap: var(--spacing-md); }
 .meter-label { display: flex; justify-content: space-between; gap: var(--spacing-md); font-size: var(--type-size-label); }
-.meter-label > :last-child { text-align: end; font-variant-numeric: tabular-nums; }
+.meter-label > :first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.meter-label > :last-child { max-width: 50%; overflow-wrap: anywhere; text-align: end; font-variant-numeric: tabular-nums; }
 .meter-track { height: calc(var(--spacing-xs) + var(--spacing-2xs)); border-radius: var(--radius-xs); background-color: var(--color-secondary); overflow: hidden; }
 .meter-track > span { display: block; height: 100%; background: var(--color-secondary-foreground); }
 .disclosure { min-width: 0; }
@@ -1344,6 +1548,7 @@ pre code { display: block; overflow-x: auto; padding: 0; background: none; borde
   .dashboard-panel, .dashboard-panel[data-span="12"] { grid-column: 1; }
 }
 @media (pointer: coarse) {
+  .time-range-trigger { min-height: var(--size-touch-min); }
   .disclosure > summary { min-height: var(--size-touch-min); display: list-item; align-content: center; }
 }
 
@@ -1428,3 +1633,43 @@ button.step-row:focus-visible { outline: 2px solid var(--color-focus); outline-o
     transition: none !important;
   }
 }
+
+/* FilterInput: continuous typing with editable field/operator/value segments. */
+.filter-input { display: grid; gap: var(--spacing-sm); min-width: 0; }
+.filter-box { align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); }
+.filter-field-input { min-width: 12ch; flex: 1 1 18ch; font-family: var(--font-mono); }
+.filter-chip { padding-inline: 0 var(--spacing-xs); flex-wrap: wrap; }
+.filter-segment {
+  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs);
+  max-width: 100%; min-width: 0; overflow-wrap: anywhere; white-space: normal;
+  padding: var(--spacing-sm); border: 0; border-inline-end: 1px solid var(--color-border);
+  min-height: var(--size-control-sm); background: transparent; color: var(--color-foreground);
+  font-family: var(--font-mono); font-size: var(--type-size-metadata); cursor: pointer;
+}
+.filter-segment:hover { background: var(--color-accent-surface-hover); }
+.filter-operator { background: var(--color-card); color: var(--color-muted-foreground); }
+.filter-value { background: var(--color-card); color: var(--color-link); }
+.filter-list-value { padding: var(--spacing-2xs) var(--spacing-xs); background: var(--color-accent-surface); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
+.filter-editor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); max-width: 100%; min-width: 0; }
+.filter-segment-input { border: 0; padding: var(--spacing-sm); background: var(--color-card); color: var(--color-foreground); font-family: var(--font-mono); font-size: var(--type-size-metadata); min-height: var(--size-control-sm); min-width: 4ch; max-width: 100%; }
+.filter-edit-actions, .filter-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
+.filter-join, .filter-boundary {
+  border: 0; padding: var(--spacing-xs); background: transparent; color: var(--color-muted-foreground);
+  font-family: var(--font-mono); font-size: var(--type-size-metadata); min-height: var(--size-control-sm); cursor: pointer;
+}
+.filter-join[data-join="OR"] { border-inline: 1px solid var(--color-border-strong); padding-inline: var(--spacing-sm); color: var(--color-link); }
+.filter-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-sm); max-width: 100%; padding: var(--spacing-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-accent-surface); }
+.filter-group .filter-group { background: var(--color-card); }
+.filter-boundary { display: inline-flex; align-items: center; color: var(--color-link); }
+.filter-segment:focus-visible, .filter-segment-input:focus-visible, button.filter-boundary:focus-visible, .filter-join:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
+.filter-input button:disabled, .filter-segment-input:disabled { cursor: default; color: var(--color-disabled); }
+.filter-suggestions { position: absolute; z-index: 20; inset-inline: 0; top: calc(100% + var(--spacing-xs)); max-height: 20em; overflow: auto; box-shadow: var(--shadow-lg); }
+.filter-suggestions .menu-item { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-sm); cursor: pointer; }
+.filter-suggestions .menu-item[aria-selected="true"] { background: var(--color-selected); color: var(--color-selected-foreground); }
+.filter-suggestions .menu-item[aria-selected="true"] .muted { color: inherit; }
+@media (pointer: coarse) {
+  .filter-segment, .filter-join, button.filter-boundary, .filter-segment-input { min-height: var(--size-touch-min); }
+  .filter-segment, .filter-join, button.filter-boundary { min-width: var(--size-touch-min); }
+}
+
+.filter-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momoi-labs/kiso",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Kiso design-system contracts and generated design tokens",
   "license": "MIT",
   "repository": {

package/tokens/build/tokens.d.ts

@@ -125,7 +125,7 @@ export const semanticElevatedSurface: string;
 export const semanticForeground: string;
 /** Secondary text, labels. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes. */
 export const semanticMutedForeground: string;
-/** Placeholders, timestamps, hints. Large text and non-essential metadata only (>=3:1). Never body copy. On dark this is dark.450, because dark.500 misses 3:1 on the dark surfaces. */
+/** Large supporting text and non-text graphics only (>=3:1 on their surface). Never small text. On dark this is dark.450, because dark.500 misses 3:1 on the dark surfaces. */
 export const semanticSubtleForeground: string;
 /** Dividers and input outlines. Non-text role. */
 export const semanticBorder: string;

package/tokens/build/tokens.scss

@@ -90,7 +90,7 @@ $semantic-surface: #2d2b28; // Cards, panels, table rows. Surface role.
 $semantic-elevated-surface: #3a3834; // Menus, popovers, dialogs. Surface role.
 $semantic-foreground: #eeece9; // Primary text. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
 $semantic-muted-foreground: #aba9a5; // Secondary text, labels. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.
-$semantic-subtle-foreground: #94928e; // Placeholders, timestamps, hints. Large text and non-essential metadata only (>=3:1). Never body copy. On dark this is dark.450, because dark.500 misses 3:1 on the dark surfaces.
+$semantic-subtle-foreground: #94928e; // Large supporting text and non-text graphics only (>=3:1 on their surface). Never small text. On dark this is dark.450, because dark.500 misses 3:1 on the dark surfaces.
 $semantic-border: #494744; // Dividers and input outlines. Non-text role.
 $semantic-primary: #684bb5; // Primary fill: primary buttons, solid badges, checked controls, the brand mark. Deep violet in both themes; on dark it is a dedicated fill and is not text-eligible, so ink roles (link, focus) take accent.base instead.
 $semantic-accent: #ded5fb; // Emphasis and highlight. Text-eligible: passes WCAG AA 4.5:1 on background, surface and elevated-surface in both themes.