flexdesk 0.8.0 → 0.9.0

package/README.md

@@ -122,6 +122,7 @@ await createShell({
     backToOpenList: true,    // Back in a record opened beside its list closes onto that list
     floatActiveTab: true,    // floating a tile takes the tab on screen, not the whole pane
     tabLayout: 'header',     // tabs in the tile header, in place of its title, with a + (0.8.0)
+    newTabButton: false,     // …and without the + (0.8.1)
     chrome: {
         topNav: document.getElementById('nav'),
         zoom:   document.getElementById('status-bar'),   // content zoom, 50–200%
@@ -129,6 +130,38 @@ await createShell({
 });
 ```
 
+### The palette that finds anything (0.9.0)
+
+Ctrl+K's grouped layout. Every option is off unless you pass it, so a shell that
+passes none of them keeps the chip strip, the panel toggles and the flat list:
+
+```js
+await createShell({
+    // …everything above…
+    palette: {
+        placeholder: 'Search everything…',
+        layout: 'grouped',                       // a header per kind, matches marked
+        chrome: { pages: false, panels: false }, // nothing between the input and the results
+        groupCap: 4,                             // then "Show all N", which scopes to the kind
+        cache: true,                             // a re-open draws the last catalogue at once
+        empty: async () => recentRows(),         // shown before anything is typed, under "Recent"
+        commands: () => commandRows(),           // `{label, action}`; `>` restricts to them
+        drill: (pick) => pick.kind === 'planet'  // Tab on a row enters a scope
+            ? { label: `${pick.label} › moons`, search: (q, signal) => findMoons(pick.id, q, signal) }
+            : null,
+        onPick: (pick, { mode, scope }) => openSomewhere(pick, mode), // 'open' | 'split' | 'window'
+    },
+});
+```
+
+A row may carry `context` (drawn, not searched), `keywords` (searched, not
+drawn), `modes` (which of `split`/`window` its keys offer), `drillLabel` (the Tab
+hint), `boost`, `group`/`groupLabel`, `kindLabel`, `shortcut` and `verb`. A group's
+header is the taxonomy's `plural` for the kind, else its `label`. Matching ranks
+exact, prefix, word starts (`ord li` finds *Order lines*), substring, then a tight
+subsequence. A drill's `search` is debounced, and a stale answer is aborted and
+never drawn. `palette.invalidate()` drops the cache.
+
 **`chrome.zoom`** paints a − / track / + / readout control into the element you
 pass, restores the saved zoom through the host's `state` capability, and scales
 the content of tiles and floating windows. It deliberately scales *content only*
@@ -158,6 +191,7 @@ editor tab bar between the header and the body, also from two tabs.
 `'header'` (0.8.0) puts that tab bar inside the header in place of the title,
 on every tile, one tab included, with a `+` after the last tab that opens the
 taxonomy root in a new tab (`wm.newTab(leafId)`, the same seed a split uses).
+Pass `newTabButton: false` (0.8.1) to leave the `+` out.
 A panel tile has no tabs and keeps its title. Under `'header'` the tab, not
 the header, is what you drag to move a single-tab pane; the empty part of the
 header still floats the pane on a pull-down or a double-click. Set

package/css/flexdesk.css

@@ -6684,6 +6684,133 @@ body.twm-dragging * { user-select: none; }
     margin: 0 1px;
 }
 
+/* ── C39: the grouped layout (`layout: 'grouped'`) ───────────────────────
+ * Everything here is under `--grouped`, so the flat palette above draws
+ * exactly as it did. Rows are three columns: icon, the label with its
+ * context, and a right side that shows the kind — or, on the active row,
+ * the keys that act on it. */
+.twm-cmdpal--grouped {
+    width: min(680px, calc(100vw - 32px));
+    max-height: 76vh;
+    border-color: var(--border-strong);
+}
+.twm-cmdpal-overlay--grouped { padding-top: 11vh; }
+.twm-cmdpal--grouped .twm-cmdpal__inputrow {
+    padding: var(--space-md) var(--space-lg);
+    border-bottom-color: var(--border-default);
+}
+.twm-cmdpal__search-icon,
+.twm-cmdpal__search-icon.material-symbols-outlined { color: var(--text-muted); font-size: 20px; }
+.twm-cmdpal--grouped .twm-cmdpal__input { font-size: var(--font-size-xl); color: var(--text-bright); }
+.twm-cmdpal--grouped .twm-cmdpal__input::placeholder { color: var(--text-muted); }
+.twm-cmdpal--grouped .twm-cmdpal__type-chip-label--scope { text-transform: none; letter-spacing: 0; }
+.twm-cmdpal__esc,
+.twm-cmdpal--grouped kbd {
+    display: inline-block;
+    padding: 1px 4px;
+    background: var(--surface-2);
+    border: 1px solid var(--border-default);
+    border-radius: 0;
+    color: var(--text-secondary);
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    line-height: 1.3;
+}
+.twm-cmdpal--grouped .twm-cmdpal__list {
+    flex: 1 1 auto;
+    max-height: none;
+    min-height: 0;
+    padding: var(--space-xs) 0;
+}
+.twm-cmdpal__group {
+    padding: 10px var(--space-lg) 4px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.twm-cmdpal--grouped .twm-cmdpal__item {
+    grid-template-columns: 20px minmax(0, 1fr) auto;
+    gap: 10px;
+    padding: 5px var(--space-lg);
+    font-size: var(--font-size-md);
+}
+/* The flat layout highlights on :hover; here the pointer MOVES the active
+ * row instead, so a hover tint would be a second, disagreeing highlight. */
+.twm-cmdpal--grouped .twm-cmdpal__item:hover:not(.twm-cmdpal__item--active) { background: transparent; color: var(--text-secondary); }
+.twm-cmdpal--grouped .twm-cmdpal__item--active {
+    background: var(--state-selected);
+    color: var(--text-bright);
+    box-shadow: inset 2px 0 0 var(--accent-bright);
+}
+.twm-cmdpal--grouped .twm-cmdpal__item--active .twm-cmdpal__icon { color: var(--text-bright); }
+.twm-cmdpal__main {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-sm);
+}
+.twm-cmdpal--grouped .twm-cmdpal__label {
+    font-weight: 400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
+    min-width: 0;
+}
+.twm-cmdpal__label mark {
+    background: none;
+    color: var(--twm-cmdpal-match);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-cmdpal__context,
+.twm-cmdpal__cells {
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 0 10 auto;
+}
+.twm-cmdpal__cells { font-family: var(--font-family-mono); }
+.twm-cmdpal__side {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+}
+.twm-cmdpal__acts { display: none; gap: 10px; }
+.twm-cmdpal__item--active .twm-cmdpal__acts { display: flex; }
+.twm-cmdpal__item--active .twm-cmdpal__kind,
+.twm-cmdpal__item--active .twm-cmdpal__shortcut { display: none; }
+.twm-cmdpal__item--more { color: var(--text-muted); font-size: var(--font-size-sm); }
+.twm-cmdpal__empty {
+    padding: 24px var(--space-lg);
+    color: var(--text-muted);
+    text-align: center;
+}
+.twm-cmdpal__empty--quiet { padding: 6px var(--space-lg); text-align: left; font-size: var(--font-size-xs); }
+.twm-cmdpal__tips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    margin-top: var(--space-xs);
+    padding: 10px var(--space-lg) var(--space-sm);
+    border-top: 1px solid var(--border-subtle);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-cmdpal--grouped .twm-cmdpal__footer { flex-wrap: wrap; row-gap: 2px; }
+.twm-cmdpal__footnote { margin-left: auto; color: var(--text-muted); }
+@media (max-width: 560px) {
+    .twm-cmdpal__context { display: none; }
+    .twm-cmdpal__acts > span:not(:first-child) { display: none; }
+    .twm-cmdpal__footnote { display: none; }
+}
+
 /* ── from tiling/nav.css ───────────────────────── */
 /* nav.css — left-nav panel-tile (project / files / git). */
 

package/css/overrides.css

@@ -1517,6 +1517,133 @@ body.twm-dragging * { user-select: none; }
     margin: 0 1px;
 }
 
+/* ── C39: the grouped layout (`layout: 'grouped'`) ───────────────────────
+ * Everything here is under `--grouped`, so the flat palette above draws
+ * exactly as it did. Rows are three columns: icon, the label with its
+ * context, and a right side that shows the kind — or, on the active row,
+ * the keys that act on it. */
+.twm-cmdpal--grouped {
+    width: min(680px, calc(100vw - 32px));
+    max-height: 76vh;
+    border-color: var(--border-strong);
+}
+.twm-cmdpal-overlay--grouped { padding-top: 11vh; }
+.twm-cmdpal--grouped .twm-cmdpal__inputrow {
+    padding: var(--space-md) var(--space-lg);
+    border-bottom-color: var(--border-default);
+}
+.twm-cmdpal__search-icon,
+.twm-cmdpal__search-icon.material-symbols-outlined { color: var(--text-muted); font-size: 20px; }
+.twm-cmdpal--grouped .twm-cmdpal__input { font-size: var(--font-size-xl); color: var(--text-bright); }
+.twm-cmdpal--grouped .twm-cmdpal__input::placeholder { color: var(--text-muted); }
+.twm-cmdpal--grouped .twm-cmdpal__type-chip-label--scope { text-transform: none; letter-spacing: 0; }
+.twm-cmdpal__esc,
+.twm-cmdpal--grouped kbd {
+    display: inline-block;
+    padding: 1px 4px;
+    background: var(--surface-2);
+    border: 1px solid var(--border-default);
+    border-radius: 0;
+    color: var(--text-secondary);
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    line-height: 1.3;
+}
+.twm-cmdpal--grouped .twm-cmdpal__list {
+    flex: 1 1 auto;
+    max-height: none;
+    min-height: 0;
+    padding: var(--space-xs) 0;
+}
+.twm-cmdpal__group {
+    padding: 10px var(--space-lg) 4px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.twm-cmdpal--grouped .twm-cmdpal__item {
+    grid-template-columns: 20px minmax(0, 1fr) auto;
+    gap: 10px;
+    padding: 5px var(--space-lg);
+    font-size: var(--font-size-md);
+}
+/* The flat layout highlights on :hover; here the pointer MOVES the active
+ * row instead, so a hover tint would be a second, disagreeing highlight. */
+.twm-cmdpal--grouped .twm-cmdpal__item:hover:not(.twm-cmdpal__item--active) { background: transparent; color: var(--text-secondary); }
+.twm-cmdpal--grouped .twm-cmdpal__item--active {
+    background: var(--state-selected);
+    color: var(--text-bright);
+    box-shadow: inset 2px 0 0 var(--accent-bright);
+}
+.twm-cmdpal--grouped .twm-cmdpal__item--active .twm-cmdpal__icon { color: var(--text-bright); }
+.twm-cmdpal__main {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-sm);
+}
+.twm-cmdpal--grouped .twm-cmdpal__label {
+    font-weight: 400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
+    min-width: 0;
+}
+.twm-cmdpal__label mark {
+    background: none;
+    color: var(--twm-cmdpal-match);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-cmdpal__context,
+.twm-cmdpal__cells {
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 0 10 auto;
+}
+.twm-cmdpal__cells { font-family: var(--font-family-mono); }
+.twm-cmdpal__side {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+}
+.twm-cmdpal__acts { display: none; gap: 10px; }
+.twm-cmdpal__item--active .twm-cmdpal__acts { display: flex; }
+.twm-cmdpal__item--active .twm-cmdpal__kind,
+.twm-cmdpal__item--active .twm-cmdpal__shortcut { display: none; }
+.twm-cmdpal__item--more { color: var(--text-muted); font-size: var(--font-size-sm); }
+.twm-cmdpal__empty {
+    padding: 24px var(--space-lg);
+    color: var(--text-muted);
+    text-align: center;
+}
+.twm-cmdpal__empty--quiet { padding: 6px var(--space-lg); text-align: left; font-size: var(--font-size-xs); }
+.twm-cmdpal__tips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    margin-top: var(--space-xs);
+    padding: 10px var(--space-lg) var(--space-sm);
+    border-top: 1px solid var(--border-subtle);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-cmdpal--grouped .twm-cmdpal__footer { flex-wrap: wrap; row-gap: 2px; }
+.twm-cmdpal__footnote { margin-left: auto; color: var(--text-muted); }
+@media (max-width: 560px) {
+    .twm-cmdpal__context { display: none; }
+    .twm-cmdpal__acts > span:not(:first-child) { display: none; }
+    .twm-cmdpal__footnote { display: none; }
+}
+
 /* ── from tiling/nav.css ───────────────────────── */
 /* nav.css — left-nav panel-tile (project / files / git). */
 

package/css/tokens.css

@@ -256,6 +256,8 @@
     --twm-flow-control-border: #454545;
     --twm-flow-muted:          #a6a6a6;
     --twm-flow-focus:          var(--accent-bright);
+    /* C39: a matched character in the command palette (grouped layout). */
+    --twm-cmdpal-match:        #4fc1ff;
     --twm-flow-error:          #f48771;
     --twm-flow-error-bg:       rgba(244, 135, 113, 0.09);
     --twm-flow-error-line:     rgba(244, 135, 113, 0.35);

package/dist/flexdesk.css

@@ -6684,6 +6684,133 @@ body.twm-dragging * { user-select: none; }
     margin: 0 1px;
 }
 
+/* ── C39: the grouped layout (`layout: 'grouped'`) ───────────────────────
+ * Everything here is under `--grouped`, so the flat palette above draws
+ * exactly as it did. Rows are three columns: icon, the label with its
+ * context, and a right side that shows the kind — or, on the active row,
+ * the keys that act on it. */
+.twm-cmdpal--grouped {
+    width: min(680px, calc(100vw - 32px));
+    max-height: 76vh;
+    border-color: var(--border-strong);
+}
+.twm-cmdpal-overlay--grouped { padding-top: 11vh; }
+.twm-cmdpal--grouped .twm-cmdpal__inputrow {
+    padding: var(--space-md) var(--space-lg);
+    border-bottom-color: var(--border-default);
+}
+.twm-cmdpal__search-icon,
+.twm-cmdpal__search-icon.material-symbols-outlined { color: var(--text-muted); font-size: 20px; }
+.twm-cmdpal--grouped .twm-cmdpal__input { font-size: var(--font-size-xl); color: var(--text-bright); }
+.twm-cmdpal--grouped .twm-cmdpal__input::placeholder { color: var(--text-muted); }
+.twm-cmdpal--grouped .twm-cmdpal__type-chip-label--scope { text-transform: none; letter-spacing: 0; }
+.twm-cmdpal__esc,
+.twm-cmdpal--grouped kbd {
+    display: inline-block;
+    padding: 1px 4px;
+    background: var(--surface-2);
+    border: 1px solid var(--border-default);
+    border-radius: 0;
+    color: var(--text-secondary);
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    line-height: 1.3;
+}
+.twm-cmdpal--grouped .twm-cmdpal__list {
+    flex: 1 1 auto;
+    max-height: none;
+    min-height: 0;
+    padding: var(--space-xs) 0;
+}
+.twm-cmdpal__group {
+    padding: 10px var(--space-lg) 4px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+.twm-cmdpal--grouped .twm-cmdpal__item {
+    grid-template-columns: 20px minmax(0, 1fr) auto;
+    gap: 10px;
+    padding: 5px var(--space-lg);
+    font-size: var(--font-size-md);
+}
+/* The flat layout highlights on :hover; here the pointer MOVES the active
+ * row instead, so a hover tint would be a second, disagreeing highlight. */
+.twm-cmdpal--grouped .twm-cmdpal__item:hover:not(.twm-cmdpal__item--active) { background: transparent; color: var(--text-secondary); }
+.twm-cmdpal--grouped .twm-cmdpal__item--active {
+    background: var(--state-selected);
+    color: var(--text-bright);
+    box-shadow: inset 2px 0 0 var(--accent-bright);
+}
+.twm-cmdpal--grouped .twm-cmdpal__item--active .twm-cmdpal__icon { color: var(--text-bright); }
+.twm-cmdpal__main {
+    min-width: 0;
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-sm);
+}
+.twm-cmdpal--grouped .twm-cmdpal__label {
+    font-weight: 400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 0 1 auto;
+    min-width: 0;
+}
+.twm-cmdpal__label mark {
+    background: none;
+    color: var(--twm-cmdpal-match);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-cmdpal__context,
+.twm-cmdpal__cells {
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex: 0 10 auto;
+}
+.twm-cmdpal__cells { font-family: var(--font-family-mono); }
+.twm-cmdpal__side {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+}
+.twm-cmdpal__acts { display: none; gap: 10px; }
+.twm-cmdpal__item--active .twm-cmdpal__acts { display: flex; }
+.twm-cmdpal__item--active .twm-cmdpal__kind,
+.twm-cmdpal__item--active .twm-cmdpal__shortcut { display: none; }
+.twm-cmdpal__item--more { color: var(--text-muted); font-size: var(--font-size-sm); }
+.twm-cmdpal__empty {
+    padding: 24px var(--space-lg);
+    color: var(--text-muted);
+    text-align: center;
+}
+.twm-cmdpal__empty--quiet { padding: 6px var(--space-lg); text-align: left; font-size: var(--font-size-xs); }
+.twm-cmdpal__tips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 16px;
+    margin-top: var(--space-xs);
+    padding: 10px var(--space-lg) var(--space-sm);
+    border-top: 1px solid var(--border-subtle);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-cmdpal--grouped .twm-cmdpal__footer { flex-wrap: wrap; row-gap: 2px; }
+.twm-cmdpal__footnote { margin-left: auto; color: var(--text-muted); }
+@media (max-width: 560px) {
+    .twm-cmdpal__context { display: none; }
+    .twm-cmdpal__acts > span:not(:first-child) { display: none; }
+    .twm-cmdpal__footnote { display: none; }
+}
+
 /* ── from tiling/nav.css ───────────────────────── */
 /* nav.css — left-nav panel-tile (project / files / git). */
 

package/dist/tokens.css

@@ -256,6 +256,8 @@
     --twm-flow-control-border: #454545;
     --twm-flow-muted:          #a6a6a6;
     --twm-flow-focus:          var(--accent-bright);
+    /* C39: a matched character in the command palette (grouped layout). */
+    --twm-cmdpal-match:        #4fc1ff;
     --twm-flow-error:          #f48771;
     --twm-flow-error-bg:       rgba(244, 135, 113, 0.09);
     --twm-flow-error-line:     rgba(244, 135, 113, 0.35);