flexdesk 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flexdesk",
-    "version": "0.14.0",
+    "version": "0.15.0",
     "description": "A tiling window manager and widget set for desktop-class web applications. Zero runtime dependencies.",
     "license": "MIT",
     "repository": {

package/src/host/host.js

@@ -19,7 +19,8 @@ export const HOST_CONTRACT = Object.freeze({
     window: Object.freeze({
         required: Object.freeze(['chrome', 'minimize', 'close', 'isMaximized', 'setMaximized',
                                  'isFullscreen', 'toggleFullscreen', 'getBounds', 'setBounds']),
-        optional: Object.freeze(['startNativeDrag']),
+        // `chrome()` answers 'native' or 'custom', or a promise of one.
+        optional: Object.freeze(['startNativeDrag', 'startNativeResize']),
     }),
     dialogs: Object.freeze({ required: Object.freeze(['saveFile']), optional: Object.freeze([]) }),
     state:   Object.freeze({ required: Object.freeze(['read', 'write']), optional: Object.freeze([]) }),

package/src/host/photino_host.js

@@ -99,6 +99,10 @@ export function createPhotinoTransport({ external, timeoutMs = 10000, onEvent =
  * @param {number} [opts.timeoutMs=10000]
  * @param {(name: string, value: any) => void} [opts.onEvent]
  * @param {object} [opts.logger=console]
+ * @param {'auto'|'native'|'custom'} [opts.chrome='auto']  who draws the window's
+ *        title bar and borders. `auto` asks the native side once (`host.describe`,
+ *        its `frame` field), the first time somebody needs to know; `native`
+ *        or `custom` fixes the answer without asking. See photino_host.md.
  * @param {object|null} [opts.window]   replace the window capability, or `null` to leave it out
  * @param {object|null} [opts.dialogs]  replace the dialogs capability, or `null` to leave it out
  * @param {object|null} [opts.state]    replace the state capability, or `null` to leave it out
@@ -110,6 +114,7 @@ export function createPhotinoHost(opts = {}) {
         timeoutMs = 10000,
         onEvent = null,
         logger = console,
+        chrome = 'auto',
     } = opts;
     if (!isPhotinoWindow(external)) return NULL_HOST;
 
@@ -121,11 +126,32 @@ export function createPhotinoHost(opts = {}) {
     };
     const fire = (cap, op, ...args) => { void soft(null, cap, op, ...args); };
 
+    // Who draws the frame. Asked once and remembered: a string once known, the
+    // pending question before that. A native side that predates `frame`, or
+    // doesn't answer within 3 s, has native chrome.
+    let frame = chrome === 'custom' || chrome === 'native' ? chrome : null;
+    let asking = null;
+    const askFrame = () => {
+        if (frame) return frame;
+        asking ??= request('host', 'describe', [], { wait: 3000 })
+            .then((d) => (d && d.frame === 'custom' ? 'custom' : 'native'), () => 'native')
+            .then((f) => { frame = f; return f; });
+        return asking;
+    };
+    // A drag or resize handed to the OS: the reply comes when the mouse is
+    // released, however long that takes. Refused (a native side without the op,
+    // or a window with native chrome) means "not handled": the caller does it in JS.
+    const gesture = async (op, ...args) => {
+        try { await request('window', op, args, { wait: 0 }); return true; }
+        catch (e) { return false; }
+    };
+
     const defaults = {
         window: {
-            // Photino draws a decorated, native window on every OS: FlexDesk's
-            // own min/max/close buttons would be a second set.
-            chrome: () => 'native',
+            // 'native' (the OS draws the frame: FlexDesk's own buttons would be
+            // a second set) or 'custom' (the native side made the window
+            // frameless). A promise until the native side has said which.
+            chrome: () => askFrame(),
             minimize: () => { fire('window', 'minimize'); },
             close: () => { fire('window', 'close'); },
             isMaximized: async () => (await soft(false, 'window', 'isMaximized')) === true,
@@ -137,6 +163,8 @@ export function createPhotinoHost(opts = {}) {
                 if (!b || typeof b !== 'object') return null;
                 return { x: b.x, y: b.y, width: b.width, height: b.height };
             },
+            startNativeDrag: () => gesture('startDrag'),
+            startNativeResize: (edge) => gesture('startResize', String(edge || '')),
             // Not async, like pywebview's: a rAF hot path during a drag; nobody awaits.
             setBounds({ x = null, y = null, width = null, height = null } = {}) {
                 fire('window', 'setBounds', { x, y, width, height });

package/src/host/photino_host.md

@@ -28,6 +28,7 @@ host → page   {"event": "window.maximizedChanged", "value": true}
 
 | `cap.op` | `args` | reply `value` | Photino |
 |---|---|---|---|
+| `host.describe` | `[]` | `{frame: "native" \| "custom", …}` | asked once, for `chrome()` (see below) |
 | `window.minimize` | `[]` | anything | `Minimized = true` |
 | `window.close` | `[]` | anything | `Close()` |
 | `window.isMaximized` | `[]` | `bool` | `Maximized` |
@@ -36,13 +37,65 @@ host → page   {"event": "window.maximizedChanged", "value": true}
 | `window.toggleFullscreen` | `[]` | `bool`, the state now | `FullScreen = !FullScreen` |
 | `window.getBounds` | `[]` | `{x, y, width, height}` | `Location`, `Size` |
 | `window.setBounds` | `[{x, y, width, height}]`, any of them `null` = leave alone | anything | `Location`, `Size` |
+| `window.startDrag` | `[]` | anything, **after mouse-up** | custom chrome only: the OS move loop (below) |
+| `window.startResize` | `[edge]`: `n` `s` `e` `w` `ne` `nw` `se` `sw` | anything, **after mouse-up** | custom chrome only: the OS size loop (below) |
 | `dialogs.saveFile` | `[{data, filename, kind}]` | see below | `ShowSaveFile(...)` + write |
 | `state.read` | `[key]` | the stored value, or `null` | a file per key |
 | `state.write` | `[key, value]` | `true` | a file per key |
 
-`window.chrome()` is answered by the adapter itself (`'native'`): Photino draws a
-native title bar, so FlexDesk draws no buttons of its own. `startNativeDrag` is
-not offered.
+## Native or custom chrome
+
+A FlexDesk app runs in one of three ways, and the page needs no switch for it:
+
+| | title bar and borders | `chrome()` | FlexDesk draws |
+|---|---|---|---|
+| a browser tab | the browser's | (no Photino host) | nothing |
+| a Photino window, native frame | the OS's | `'native'` | nothing |
+| a Photino window, custom frame | none: the page's top bar | `'custom'` | buttons, resize handles, drag |
+
+`window.chrome()` asks the native side once, with `host.describe`, the first
+time it's called (that is `WindowChromeController.initialize()`). It resolves
+`'custom'` when the reply's `frame` is `"custom"`, and `'native'` for anything
+else: no `frame` field, an `ok: false`, no answer within 3 s. An app that knows
+already can say so: `createPhotinoHost({ chrome: 'custom' })` or `'native'`
+answers without asking.
+
+**What the native side does for a custom frame (Windows).** Don't use
+Photino's `SetChromeless(true)`: that makes a bare popup window, with no
+snapping, no Win+arrows, no shadow and square corners, and Photino then reports
+it as fullscreen. Keep the normal window and stop drawing its frame:
+
+1. After the window exists, add `WS_CAPTION | WS_THICKFRAME | WS_MINIMIZEBOX |
+   WS_MAXIMIZEBOX | WS_SYSMENU` to its style, and subclass it
+   (`SetWindowSubclass`). These styles are what make Windows treat it as a
+   normal window: Aero Snap, Win+arrows, the shadow, the rounded corners on
+   Windows 11.
+2. In the subclass, answer `WM_NCCALCSIZE` (with `wParam` true) with `0`, so
+   the whole window is client area and nothing of the frame is drawn. While
+   maximised (`IsZoomed`), set the proposed rect to the monitor's work area
+   first: a maximised window is larger than the monitor by the frame's
+   thickness, and the taskbar must stay visible.
+3. Answer `WM_NCACTIVATE` with `DefSubclassProc(h, msg, wParam, -1)`, so
+   Windows repaints no caption on activation.
+4. `DwmExtendFrameIntoClientArea` with a top margin of 1 keeps DWM drawing
+   the shadow. `DWMWA_WINDOW_CORNER_PREFERENCE = DWMWCP_ROUND` asks for the
+   rounded corners.
+5. Call `SetWindowPos(..., SWP_FRAMECHANGED | SWP_NOMOVE | SWP_NOSIZE |
+   SWP_NOZORDER)` to apply it.
+
+The WebView covers the whole window, so the window never sees the mouse. That
+is what `startDrag` and `startResize` are for. The page asks when the mouse
+goes down on its top bar or on a resize handle. On the window's thread, call
+`ReleaseCapture()`, then `SendMessage(hwnd, WM_NCLBUTTONDOWN, hit, cursor)`
+with `HTCAPTION` for a drag, or `HTTOP` / `HTBOTTOM` / `HTLEFT` / `HTRIGHT` /
+`HTTOPLEFT` / … for the edge. Windows then runs its own move or size loop,
+exactly as for a click on a real caption or border, and `SendMessage` returns
+when the mouse is released. Reply then. The page waits without a timeout, and a
+reply of `ok: false` makes it move or resize the window from JS instead.
+
+`describe`'s reply says `frame: "custom"` only when all of this was done. A
+Photino window on Linux or macOS keeps its native frame and says `"native"`, or
+leaves `frame` out.
 
 **`dialogs.saveFile`.** `kind` is the file type the caller is saving, `'csv'`
 or `'png'` today. `data` is the file's text for `csv` and the file's bytes,

package/src/tiles/chart_tiles.js

@@ -528,9 +528,22 @@ export class ChartTile extends TileBase {
         try {
             const P = await ensurePlotly();
             const uri = await P.toImage(this._plotEl, { format: 'png', scale: 2 });
+            const filename = `${slug(this.config.title || this.constructor.TITLE)}.png`;
+            // The native Save dialog when the host has one (a desktop window).
+            // `saveFile` answers null when there is no dialog behind it, which
+            // means "download it yourself", not a failed save.
+            const dialogs = this.host?.dialogs;
+            const result = dialogs
+                ? await dialogs.saveFile({ data: uri.split(',')[1], filename, kind: 'png' })
+                : null;
+            if (result) {
+                if (result.ok) this._notify('Download', `Chart saved to ${result.path}`, 'success');
+                else if (!result.cancelled) this._notify('Download failed', result.error || 'The image could not be saved', 'error');
+                return;
+            }
             const a = document.createElement('a');
             a.href = uri;
-            a.download = `${slug(this.config.title || this.constructor.TITLE)}.png`;
+            a.download = filename;
             a.click();
         } catch (err) {
             this._notify('Download failed', `The image could not be made: ${err?.message || err}`, 'error');

package/src/ui/components/data_table.js

@@ -327,7 +327,8 @@ const AUTOSIZE_MAX_PX = 520;
  * @property {Function} [onRowClick] - Row click handler: (rowIdx, row, ev) => void. Receives the original (unfiltered) row index.
  * @property {Function} [onRowContextMenu] - Row right-click handler: (rowIdx, row, ev) => void. Fires before the default context menu; call ev.preventDefault() to suppress the default.
  * @property {Function} [onCellContextMenu] - Cell right-click handler: (colIdx, rowIdx, value, td, ev) => void. Fires before onRowContextMenu; same suppression semantics.
- * @property {boolean} [showExportButton=false] - Adds a "CSV" download button to the pagination strip that invokes `downloadCSV()`.
+ * @property {boolean} [showExportButton=false] - Adds a "CSV" download button to the pagination strip that invokes `downloadCSV()`. The strip is drawn for it even when the table fits on one page (0.14.1).
+ * @property {string|function(DataTable): string} [exportFilename='data.csv'] - The file the export button saves (0.14.1); in a desktop host, the name the Save dialog suggests.
  * @property {Object} [host] - A Host (see ui/js/host/host.js). Its `dialogs` capability backs `downloadCSV()`'s native save dialog; without it CSV export falls back to a Blob download.
  * @property {Object} [stateStore] - `{ ready(), get(key), set(key, state) }` — REQUIRED when `persistKey` is set. Built by `createTableStateStore()`.
  * @property {'container'|'content'} [columnFit='container'] - How the automatic fit pass sizes a column the user has NOT dragged. 'container' squeezes every column into the wrap: a 360px cap, a more generous one for the first column, and water-fill-shrink toward the 40px floor when they do not fit. 'content' sizes each column to its own content through the same `_autoWidth` a grip double-click uses (520px cap) and lets the body scroll sideways rather than squeezing. A pinned column is honoured verbatim under both.
@@ -466,6 +467,7 @@ export class DataTable {
             onRowContextMenu: null,
             onCellContextMenu: null,
             showExportButton: false,
+            exportFilename: null,
             // The host port. TOP LEVEL, deliberately — NOT inside `services`,
             // which most call sites never pass. Supplies the native save
             // dialog for downloadCSV(); absent => Blob fallback.
@@ -2623,7 +2625,7 @@ export class DataTable {
         // Don't render the strip when there's only one page — the row
         // count is uninformative (the table itself shows every row) and
         // the nav buttons would all be disabled.
-        if (totalPages <= 1 && !isFiltered) return null;
+        if (totalPages <= 1 && !isFiltered) return this._createExportOnlyStrip();
         const currentPage = Math.floor(offset / pageSize) + 1;
         const hasPrev = offset > 0;
         const hasNext = offset + pageSize < effectiveTotal;
@@ -2719,16 +2721,35 @@ export class DataTable {
         // CSV export button (opt-in). Re-uses the existing downloadCSV
         // method which already handles the host save dialog + browser
         // fallback.
-        if (this.config.showExportButton) {
-            const exportBtn = this._createPaginationBtn(
-                'download', 'Download visible rows as CSV', false,
-                () => this.downloadCSV('data.csv'));
-            el.appendChild(exportBtn);
-        }
+        if (this.config.showExportButton) el.appendChild(this._createExportBtn());
 
         return el;
     }
 
+    /** The export button: downloadCSV() under the configured file name. */
+    _createExportBtn() {
+        const name = this.config.exportFilename;
+        const filename = (typeof name === 'function' ? name(this) : name) || 'data.csv';
+        return this._createPaginationBtn('download', 'Download visible rows as CSV', false,
+                                         () => this.downloadCSV(filename));
+    }
+
+    /**
+     * The strip on a table with one page: nothing, as always, unless the export
+     * button needs somewhere to be. Then the button alone, with no page
+     * buttons (0.14.1).
+     */
+    _createExportOnlyStrip() {
+        if (!this.config.showExportButton) return null;
+        const el = document.createElement('div');
+        el.className = 'twm-pagination-controls twm-pagination-controls--export-only';
+        el.style.cssText = 'display:flex; align-items:center; gap:6px; padding:2px 8px; border-bottom:1px solid #2a2a2a; font-size:11px;';
+        const spacer = document.createElement('div');
+        spacer.style.flex = '1';
+        el.append(spacer, this._createExportBtn());
+        return el;
+    }
+
     _createPaginationBtn(icon, tooltip, disabled, onClick, textLabel = null) {
         const btn = document.createElement('button');
         btn.type = 'button';
@@ -4738,8 +4759,8 @@ export class DataTable {
         const pn = this._pageNav({ offset, held: drawn, total, hasMore: hasMoreKnown, pageSize });
         const { hasPrev, hasNext, page } = pn;
         const totalPages = pn.pages;
-        if (known && totalPages <= 1 && !isFiltered && !hasPrev) return null;
-        if (!known && !hasPrev && !hasNext) return null;
+        if (known && totalPages <= 1 && !isFiltered && !hasPrev) return this._createExportOnlyStrip();
+        if (!known && !hasPrev && !hasNext) return this._createExportOnlyStrip();
         const maxJump = Number.isFinite(c.maxJumpOffset) ? c.maxJumpOffset : null;
 
         const go = (newOffset) => {
@@ -4817,10 +4838,7 @@ export class DataTable {
         jumpBtn.dataset.pager = 'go';
 
         el.append(info, spacer, firstBtn, prevBtn, pageInfo, nextBtn, lastBtn, jumpInput, jumpBtn);
-        if (c.showExportButton) {
-            el.appendChild(this._createPaginationBtn('download', 'Download visible rows as CSV', false,
-                                                     () => this.downloadCSV('data.csv')));
-        }
+        if (c.showExportButton) el.appendChild(this._createExportBtn());
         return el;
     }