flexdesk 0.17.14 → 0.17.16

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## 0.17.16 (2026-10-27)
+
+A patch release. Two new widgets and options; the other entries change what
+embedders see (listed under "Changed behaviour"). Each entry links to its
+section of the docs.
+
+### Added
+
+- [A categorised picker: `CategoryPicker`](docs/components/menus.md#a-categorised-picker-categorypicker-01716): a popover anchored to a trigger, like ActionDropdown, with a search field over categories (colour dot, count), the active category's items (icon or short badge) and a detail pane (description, optional monospace preview, an Add button). Typing filters across categories; arrows, Enter, Tab (cycling field and Add), double-click and Esc work as documented; IME composition is respected; ARIA combobox/listbox with `aria-activedescendant`. Exported from `@flexdesk/widgets` (STORY-0126).
+- [A kind that lives in a window: `windowOnly` and `window`](docs/components/shell.md#a-kind-that-lives-in-a-window-windowonly-and-window-01716): a taxonomy kind can declare `window: { width, height }` and `windowOnly: true`. A window-only kind opens in a managed window from every open path, its window never docks into a tile, and a restored layout drops its tile tabs with one warning; `taxonomy.isWindowOnly` and `windowSize` answer (STORY-0127).
+- [Tile title double-click and configuring marks](docs/components/tiles.md#a-double-click-on-the-title-strip-configures-the-tile-01716): a double-click on a tile's title strip does what its cogwheel does (`configOnDoubleClick`, default on); `grid.setConfiguring(tileId, on)` / `grid.isConfiguring(tileId)` keep any number of tiles marked as being configured (`tile--configuring`), across `setLayout` (STORY-0128).
+- `ManagedWindow` options `persistGeometry` (default true) and `focusOnOpen` (default true; `'window'` focuses the frame), `ManagedWindow.configure({ storageKey, maxSavedWindows })`, `DEFAULT_MAX_SAVED_WINDOWS` (50) and `win.isClosed` (BUG-0053).
+- The plot config editor's `extraSeriesFields` may return an array of field specs `{ label, control | render, hint? }` that the editor lays out on its own label column, and receives `ctx.field(label, control, { hint })` (BUG-0052).
+
+### Changed behaviour
+
+- [Windows: closing, focus and Esc](docs/components/forms-and-dialogs.md#windows-closing-focus-and-esc-01716): a closed `ManagedWindow` leaves the registry and releases its content and callbacks (`get(id)` answers null; build a new window to reopen). Saved geometry keeps the 50 most recently used ids (window-manager-minted `twm-mw-*` entries are purged). A new window takes focus (its first field) and gives it back on close; the computing status window does not take focus, and the run-progress dialog focuses its frame, not Stop. Esc closes a modal on top wherever focus is, otherwise the window holding focus, otherwise the topmost modal, and never when the key was already handled (`defaultPrevented`) or composing (BUG-0053).
+- [A plot config series is one block](docs/components/charts.md#a-plot-config-series-is-one-block-and-an-embedders-fields-share-it-01716): each series is a header line (variable, label, remove) and fields on the editor's label column (colour as ColorField, width, dash, stack group, extra fields, overlay). `.twm-plot-config__series-main` is gone; new classes `__series-head`, `__series-fields`, `__slot`, `__hint`, `__field--hinted`. The config objects read and written are unchanged (BUG-0052).
+
+### Removed or renamed exports
+
+None. New exports: `CategoryPicker`, `DEFAULT_MAX_SAVED_WINDOWS`. flexdesk.css gains the category picker's classes, `.tile--configuring` and the plot config classes above, and drops `.twm-plot-config__series-main`; it defines no new custom property besides the picker's `--twm-category-picker-color`.
+
+## 0.17.15 (2026-10-26)
+
+A patch release with no API change. Its entries change what embedders see: a top-level tile loses its one-segment breadcrumb strip, every `openForm` row lays its inputs out anew, and a slide-out panel no longer crosses what lies right of its host. Each entry links to its section of the docs.
+
+### Added and changed
+
+- [A tile breadcrumb of one segment is not drawn](docs/components/shell.md#a-tile-breadcrumb-of-one-segment-is-not-drawn-01715): while `mountTileBreadcrumb`'s path is a single segment or none (a top-nav page with no root crumb, trail or entity; an `appGlobal` kind), the strip is `hidden` and the page shell's `.twm-page-shell__breadcrumb` slot takes no room, so a top-level page no longer shows its name twice. `refresh()` shows it again at two segments; longer paths and `renderBreadcrumb` are unchanged (STORY-0124).
+- [The inputs of a row are equally wide](docs/components/forms-and-dialogs.md#the-inputs-of-a-row-are-equally-wide-01715): in an `openForm` `{ row }` each field's basis is its label (the first one's, the 130px label column) and the free space is shared equally, so every input of a row has the same width (up to each control's own padding); until 0.17.14 the first input was squeezed by the label column. A form whose widest row has three or more fields opens at `170 + 230 × fields` px: at least 640px, otherwise at most 90% of the window (BUG-0050).
+- [A slide-out panel is never drawn outside its box](docs/components/slide-out-panel.md#never-drawn-outside-its-box-01715): `SlideOutPanel` no longer slides by a transform; a `clip-path` alone (200ms ease-out) reveals it from its right edge, so opening or closing it no longer crosses the dock panel right of its host (BUG-0051).
+
+### Removed or renamed exports
+
+None. Compared with 0.17.14, across every entry point and the package
+`exports` map, no export or option was added, removed or renamed. flexdesk.css
+has no new class and defines no new custom property.
+
 ## 0.17.14 (2026-10-26)
 
 A patch release. Everything below is additive except one changed default (see

package/css/base.css

@@ -3344,20 +3344,25 @@ body.twm-window-maximized .twm-resize-handle {
 }
 
 /* Selected — set by `_onConfigClick()` while the config dialog is open, and
-   cleared from every sibling by the same handler. It reads `--accent-lighter`
+   cleared from every sibling by the same handler. `--configuring` is the same
+   look set by the embedder through `setConfiguring()` (0.17.16), one per open
+   config window, and no handler clears it. It reads `--accent-lighter`
    (BUG-0045): `--accent-bright` is a border colour on this background and not
    a text one. It was #78b9ff, which no mix of `--accent-bright` with white
    gives exactly; `--accent-lighter` (about #73b6e3) is the nearest. */
-.tile.tile--selected {
+.tile.tile--selected,
+.tile.tile--configuring {
     border-color: var(--accent-lighter);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-lighter) 30%, transparent), var(--shadow-md);
 }
 
-.tile.tile--selected .tile-header {
+.tile.tile--selected .tile-header,
+.tile.tile--configuring .tile-header {
     background: color-mix(in srgb, var(--accent-lighter) 10%, transparent);
 }
 
-.tile.tile--selected .tile-title {
+.tile.tile--selected .tile-title,
+.tile.tile--configuring .tile-title {
     color: var(--accent-lighter);
 }
 
@@ -3775,6 +3780,215 @@ body.twm-window-maximized .twm-resize-handle {
     text-overflow: ellipsis;
 }
 
+/* ══ CATEGORY PICKER (STORY-0126) ══════════════════════════════════════
+   `CategoryPicker` (category_picker.js): a search field over three columns —
+   categories, the active category's items, the highlighted item's detail.
+   Placed by `ActionDropdown.position` (inline top/left/max-height), so it is
+   `position: fixed` on --z-over-windows: over the managed window it opened
+   from. It shrinks to the inline max-height and its columns scroll inside.
+   A category's colour arrives as `--twm-category-picker-color` on its rows. */
+.twm-category-picker {
+    position: fixed;
+    z-index: var(--z-over-windows);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 640px;
+    max-width: calc(100vw - 2 * var(--space-md));
+    height: 440px;
+    background: var(--surface-1);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+    overflow: hidden;
+}
+.twm-category-picker[hidden] {
+    display: none;
+}
+.twm-category-picker__search {
+    flex: none;
+    padding: var(--space-md);
+    border-bottom: 1px solid var(--border-default);
+}
+.twm-category-picker__input {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-sm) var(--space-md);
+    background: var(--surface-0);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+}
+.twm-category-picker__input:focus {
+    outline: none;
+    border-color: var(--accent-bright);
+}
+.twm-category-picker__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+}
+.twm-category-picker__column {
+    flex: none;
+    box-sizing: border-box;
+    padding: var(--space-sm) 0;
+    border-right: 1px solid var(--border-default);
+    overflow-y: auto;
+}
+.twm-category-picker__categories {
+    width: 170px;
+}
+.twm-category-picker__items {
+    width: 220px;
+}
+.twm-category-picker__category,
+.twm-category-picker__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-sm) var(--space-lg);
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+    text-align: left;
+    cursor: pointer;
+}
+.twm-category-picker__category:hover,
+.twm-category-picker__item:hover {
+    background: var(--state-hover);
+}
+.twm-category-picker__category--active,
+.twm-category-picker__item--highlighted,
+.twm-category-picker__category--active:hover,
+.twm-category-picker__item--highlighted:hover {
+    background: var(--state-selected);
+}
+/* The column the arrow keys move in marks its row with an accent edge. */
+.twm-category-picker__column--current .twm-category-picker__category--active,
+.twm-category-picker__column--current .twm-category-picker__item--highlighted {
+    box-shadow: inset 2px 0 0 var(--accent-bright);
+}
+.twm-category-picker__category--empty {
+    color: var(--text-dim);
+}
+.twm-category-picker__dot {
+    flex: none;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-circle);
+    /* background-color, not the shorthand: the colour is the caller's, and a
+       url() in the shorthand would be fetched */
+    background-color: var(--twm-category-picker-color, var(--text-muted));
+}
+.twm-category-picker__category-label,
+.twm-category-picker__item-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.twm-category-picker__count {
+    flex: none;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    font-variant-numeric: tabular-nums;
+}
+.twm-category-picker__badge,
+.twm-category-picker__item .twm-category-picker__icon {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    box-sizing: border-box;
+    color: var(--twm-category-picker-color, var(--text-muted));
+}
+.twm-category-picker__badge {
+    border: 1px solid var(--twm-category-picker-color, var(--text-muted));
+    border-radius: var(--radius-sm);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    overflow: hidden;
+    white-space: nowrap;
+}
+.twm-category-picker__item .twm-category-picker__icon {
+    font-size: 18px;
+}
+/* One category's hits while a query is set: role="group", named by its header. */
+.twm-category-picker__hits {
+    display: flex;
+    flex-direction: column;
+}
+.twm-category-picker__group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--space-lg) var(--space-xs);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.twm-category-picker__empty,
+.twm-category-picker__detail-empty {
+    padding: var(--space-md) var(--space-lg);
+    color: var(--text-muted);
+}
+.twm-category-picker__detail {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    padding: var(--space-xl);
+    overflow-y: auto;
+}
+.twm-category-picker__title {
+    color: var(--text-bright);
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-category-picker__description {
+    color: var(--text-secondary);
+    line-height: var(--line-height-normal);
+}
+.twm-category-picker__preview-label {
+    margin-top: var(--space-sm);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.twm-category-picker__preview {
+    margin: 0;
+    padding: var(--space-md);
+    background: var(--surface-0);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--text-body);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-sm);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+.twm-category-picker__add {
+    margin-top: auto;
+    align-self: flex-end;
+}
+/* ══ end CATEGORY PICKER ══ */
+
 /* ── from code.css ───────────────────────── */
 /* Code language tabs */
 .twm-code-tabs-header {
@@ -3934,6 +4148,12 @@ body.twm-window-maximized .twm-resize-handle {
 .twm-managed-window:focus-within {
     border-color: #505050;
 }
+/* BUG-0053. The frame is focusable (tabindex -1) so a press on it keeps focus
+   in the window; the focus-within border above already shows that, so the
+   frame draws no outline of its own. */
+.twm-managed-window:focus {
+    outline: none;
+}
 /* Minimize animation class — targets taskbar item via CSS custom properties */
 .twm-managed-window--minimizing {
     transform: translate(var(--mw-target-x, 0px), var(--mw-target-y, 100vh)) scale(var(--mw-target-scale, 0.1));
@@ -4824,14 +5044,23 @@ button.twm-about-dialog__btn--close:focus {
     min-width: min(400px, var(--twm-slide-out-host-w, 400px));
     max-width: var(--twm-slide-out-host-w, none);
 
-    transform: translateX(100%);
-    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    /* Never drawn outside its final box (BUG-0051). While open the panel
+     * is `position: fixed` at its host's right edge, where the host's
+     * `overflow: hidden` no longer clips it, and its slide from
+     * translateX(100%) was drawn across whatever lies right of the host (a
+     * dock panel). It does not move any more: a clip alone carries the
+     * motion, revealing it from its right edge leftwards, so no frame can
+     * paint outside its box (a transform and a clip animated together can
+     * drift apart, the transform often running on the compositor). The left
+     * inset of -16px keeps the box shadow. */
+    clip-path: inset(0 0 0 100%);
+    transition: clip-path 200ms ease-out, visibility 0s linear 200ms;
     visibility: hidden;
 }
 .twm-slide-out-panel--open {
-    transform: translateX(0);
+    clip-path: inset(0 0 0 -16px);
     visibility: visible;
-    transition: transform 200ms ease-out, visibility 0s linear 0s;
+    transition: clip-path 200ms ease-out, visibility 0s linear 0s;
 }
 /* Header bar */
 .twm-slide-out-panel__header {