sh3-core 0.15.0 → 0.15.1

package/dist/app/store/verbs.js

@@ -17,6 +17,7 @@ function findInstalled(id) {
 export const installVerb = {
     name: 'install',
     summary: 'Install a package by id from the catalog.',
+    programmatic: true,
     async run(ctx, args) {
         var _a, _b, _c;
         const id = args[0];
@@ -117,6 +118,7 @@ export const installVerb = {
 export const uninstallVerb = {
     name: 'uninstall',
     summary: 'Uninstall an installed package by id.',
+    programmatic: true,
     async run(ctx, args) {
         const id = args[0];
         if (!id) {
@@ -168,6 +170,7 @@ export const updateVerb = {
     summary: 'Update an installed package (sh3-store:update <id> [version]). When ' +
         'version is omitted, bumps to latest; with a version, installs that ' +
         'exact version (downgrade or same-version reinstall allowed).',
+    programmatic: true,
     async run(ctx, args) {
         var _a, _b;
         const id = args[0];
@@ -243,6 +246,7 @@ export const updateVerb = {
 export const appinfoVerb = {
     name: 'appinfo',
     summary: 'Show info about a package (installed status, version, catalog details).',
+    programmatic: true,
     async run(ctx, args) {
         const id = args[0];
         if (!id) {

package/dist/overlays/FloatFrame.svelte

@@ -2,34 +2,55 @@
   Single floating panel frame.
 
   Renders:
-    - Header bar (title + close button, receives pointerdown for drag).
+    - Header bar (title + maximize/close buttons, receives pointerdown for drag).
     - Body that mounts the float's content subtree via LayoutRenderer
       using rootRef={{ kind: 'float', floatId: entry.id }} so the
       renderer reads from layoutStore.tree.floats[...].content instead
       of layoutStore.root.
+    - Bottom-right resize grip (always rendered, including on dismissable
+      pickers — its pointerdown is inside the frame so the dismiss listener
+      doesn't fire).
 
   Behavior:
     - Pointer drag on header mutates entry.position in place. The entry
       is a live reference from layoutStore.tree.floats, so mutation
       reactivity flows through the workspace-zone proxy.
+    - Pointer drag on the resize grip mutates entry.size, clamped at
+      computeMinSize(entry.content).
     - Click anywhere on the frame raises it (calls floatManager.focus).
-    - Close button calls floatManager.close.
+    - Close button calls floatManager.close. Maximize button toggles.
+    - Header double-click toggles maximize (excluding clicks on the close /
+      maximize buttons).
+    - Drag or resize while maximized implicitly un-maximizes (forgets the
+      saved prev rect; keeps the current rect and proceeds). See spec
+      docs/superpowers/specs/2026-05-07-float-resize-maximize-design.md.
 -->
 <script lang="ts">
   import LayoutRenderer from '../layout/LayoutRenderer.svelte';
   import { floatManager, getFloatParentHost } from './float';
   import { registerDismissableFrame, unregisterDismissableFrame } from './floatDismiss';
+  import { computeMinSize } from '../layout/floats';
   import type { FloatEntry } from '../layout/types';
 
   interface Props {
     entry: FloatEntry;
   }
-  const { entry }: Props = $props();
+  // `entry` is the live workspace-zone proxy from `layoutStore.floats`; the
+  // drag/resize/dismiss-listener paths mutate `entry.position` and
+  // `entry.size` in place, which is the canonical reactive flow. Marking
+  // it `$bindable()` opts into that mutation so Svelte 5 doesn't emit the
+  // ownership_invalid_mutation warning. The parent (FloatLayer) uses
+  // `bind:entry` to acknowledge the contract.
+  let { entry = $bindable() }: Props = $props();
 
   let dragging = $state(false);
   let dragOffset = { x: 0, y: 0 };
+  let resizing = $state(false);
+  let resizeStart = { pointer: { x: 0, y: 0 }, size: { w: 0, h: 0 }, min: { w: 0, h: 0 } };
   let frameEl: HTMLDivElement | undefined = $state();
 
+  const isMaximized = $derived(floatManager.isMaximized(entry.id));
+
   $effect(() => {
     if (!entry.dismissable) return;
     if (!frameEl) return;
@@ -62,8 +83,9 @@
   function onHeaderPointerDown(e: PointerEvent): void {
     if (e.button !== 0) return;
     if ((e.target as HTMLElement).closest('.sh3-float-close')) return;
+    if ((e.target as HTMLElement).closest('.sh3-float-maximize')) return;
     const target = e.currentTarget as HTMLElement;
-    target.setPointerCapture(e.pointerId);
+    target.setPointerCapture?.(e.pointerId);
     dragging = true;
     dragOffset = { x: e.clientX - entry.position.x, y: e.clientY - entry.position.y };
     floatManager.focus(entry.id);
@@ -71,6 +93,11 @@
 
   function onHeaderPointerMove(e: PointerEvent): void {
     if (!dragging) return;
+    // Implicit un-maximize on first drag movement (no-op if not maximized).
+    // We unmaximize on move rather than pointerdown so a casual click —
+    // which precedes a dblclick — does not destroy the saved prev rect
+    // and break the dblclick toggle.
+    floatManager.unmaximize(entry.id);
     entry.position.x = e.clientX - dragOffset.x;
     entry.position.y = e.clientY - dragOffset.y;
   }
@@ -79,7 +106,45 @@
     if (!dragging) return;
     dragging = false;
     const target = e.currentTarget as HTMLElement;
-    if (target.hasPointerCapture(e.pointerId)) {
+    if (target.hasPointerCapture?.(e.pointerId)) {
+      target.releasePointerCapture(e.pointerId);
+    }
+  }
+
+  function onHeaderDblClick(e: MouseEvent): void {
+    if ((e.target as HTMLElement).closest('.sh3-float-close')) return;
+    if ((e.target as HTMLElement).closest('.sh3-float-maximize')) return;
+    floatManager.toggleMaximize(entry.id);
+  }
+
+  function onGripPointerDown(e: PointerEvent): void {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    const target = e.currentTarget as HTMLElement;
+    target.setPointerCapture?.(e.pointerId);
+    resizing = true;
+    resizeStart = {
+      pointer: { x: e.clientX, y: e.clientY },
+      size: { w: entry.size.w, h: entry.size.h },
+      min: computeMinSize(entry.content),
+    };
+    floatManager.focus(entry.id);
+  }
+
+  function onGripPointerMove(e: PointerEvent): void {
+    if (!resizing) return;
+    floatManager.unmaximize(entry.id);
+    const dx = e.clientX - resizeStart.pointer.x;
+    const dy = e.clientY - resizeStart.pointer.y;
+    entry.size.w = Math.max(resizeStart.min.w, resizeStart.size.w + dx);
+    entry.size.h = Math.max(resizeStart.min.h, resizeStart.size.h + dy);
+  }
+
+  function onGripPointerUp(e: PointerEvent): void {
+    if (!resizing) return;
+    resizing = false;
+    const target = e.currentTarget as HTMLElement;
+    if (target.hasPointerCapture?.(e.pointerId)) {
       target.releasePointerCapture(e.pointerId);
     }
   }
@@ -88,6 +153,11 @@
     floatManager.focus(entry.id);
   }
 
+  function onMaximize(e: MouseEvent): void {
+    e.stopPropagation();
+    floatManager.toggleMaximize(entry.id);
+  }
+
   function onClose(e: MouseEvent): void {
     e.stopPropagation();
     floatManager.close(entry.id);
@@ -117,14 +187,33 @@
       onpointermove={onHeaderPointerMove}
       onpointerup={onHeaderPointerUp}
       onpointercancel={onHeaderPointerUp}
+      ondblclick={onHeaderDblClick}
     >
       <span class="sh3-float-title">{entry.title}</span>
-      <button class="sh3-float-close" onclick={onClose} aria-label="Close float">×</button>
+      <span class="sh3-float-header-actions">
+        <button
+          class="sh3-float-maximize"
+          onclick={onMaximize}
+          aria-label={isMaximized ? 'Restore float' : 'Maximize float'}
+          aria-pressed={isMaximized}
+        >{isMaximized ? '\u{1F5D7}' : '\u{1F5D6}'}</button>
+        <button class="sh3-float-close" onclick={onClose} aria-label="Close float">×</button>
+      </span>
     </header>
   {/if}
   <div class="sh3-float-body">
     <LayoutRenderer rootRef={{ kind: 'float', floatId: entry.id }} path={[]} />
   </div>
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="sh3-float-resize-grip"
+    role="presentation"
+    aria-hidden="true"
+    onpointerdown={onGripPointerDown}
+    onpointermove={onGripPointerMove}
+    onpointerup={onGripPointerUp}
+    onpointercancel={onGripPointerUp}
+  ></div>
 </div>
 
 <style>
@@ -159,15 +248,26 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .sh3-float-header-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+  }
+  .sh3-float-maximize,
   .sh3-float-close {
     background: transparent;
     border: none;
     color: var(--shell-fg);
-    font-size: 16px;
     line-height: 1;
     cursor: pointer;
     padding: 0 4px;
-    flex-shrink: 0;
+  }
+  .sh3-float-maximize {
+    font-size: 12px;
+  }
+  .sh3-float-close {
+    font-size: 16px;
   }
   .sh3-float-body {
     flex: 1;
@@ -175,4 +275,28 @@
     overflow: hidden;
     min-height: 0;
   }
+  .sh3-float-resize-grip {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 16px;
+    height: 16px;
+    cursor: nwse-resize;
+    /* Subtle visual hint without being obtrusive — two diagonal lines made
+       from a CSS gradient stripe. */
+    background:
+      linear-gradient(
+        135deg,
+        transparent 0,
+        transparent 6px,
+        var(--shell-border-strong) 6px,
+        var(--shell-border-strong) 7px,
+        transparent 7px,
+        transparent 10px,
+        var(--shell-border-strong) 10px,
+        var(--shell-border-strong) 11px,
+        transparent 11px
+      );
+    border-bottom-right-radius: var(--shell-radius);
+  }
 </style>

package/dist/overlays/FloatFrame.svelte.d.ts

@@ -2,6 +2,6 @@ import type { FloatEntry } from '../layout/types';
 interface Props {
     entry: FloatEntry;
 }
-declare const FloatFrame: import("svelte").Component<Props, {}, "">;
+declare const FloatFrame: import("svelte").Component<Props, {}, "entry">;
 type FloatFrame = ReturnType<typeof FloatFrame>;
 export default FloatFrame;

package/dist/overlays/FloatLayer.svelte

@@ -13,8 +13,8 @@
 </script>
 
 <div class="sh3-float-layer">
-  {#each floats as entry (entry.id)}
-    <FloatFrame {entry} />
+  {#each floats as entry, i (entry.id)}
+    <FloatFrame bind:entry={floats[i]} />
   {/each}
 </div>
 

package/dist/overlays/float.d.ts

@@ -32,6 +32,27 @@ export interface FloatManager {
     close(floatId: string): void;
     list(): FloatEntry[];
     focus(floatId: string): void;
+    /**
+     * Snapshot the current rect, override with the float layer bounds, and
+     * raise. No-op if the float is already maximized or unknown. Bounds are
+     * frozen at maximize time — shell resize while maximized does not refit.
+     */
+    maximize(floatId: string): void;
+    /**
+     * Roll the rect back to the snapshot taken at maximize time. No-op if
+     * the float was not maximized.
+     */
+    restore(floatId: string): void;
+    /** `isMaximized(id) ? restore(id) : maximize(id)`. */
+    toggleMaximize(floatId: string): void;
+    /**
+     * Forget the saved rect snapshot without rolling back. Used by drag /
+     * resize handlers to "exit maximize but keep the current rect" — distinct
+     * from `restore`, which would snap back. Safe no-op when the float was
+     * not maximized.
+     */
+    unmaximize(floatId: string): void;
+    isMaximized(floatId: string): boolean;
 }
 /**
  * Bind the manager to the active LayoutTree's `floats` array. Called

package/dist/overlays/float.js

@@ -28,6 +28,7 @@
  */
 import { computeMinSize, cascadePosition, generateFloatId } from '../layout/floats';
 import { findEnclosingOverlayHost } from './parentHost';
+import { setMaximizedReactive, readMaximizedReactive, __resetMaximizedReactiveForTest, } from './floatMaximized.svelte';
 // ----- storage binding ---------------------------------------------------
 let fallbackFloats = [];
 let boundFloats = null;
@@ -51,6 +52,8 @@ export function __resetFloatManagerForTest() {
     boundFloats = null;
     getTreeBounds = () => ({ w: 1600, h: 900 });
     parentHosts.clear();
+    maximizedRects.clear();
+    __resetMaximizedReactiveForTest();
 }
 function activeStore() {
     return boundFloats !== null && boundFloats !== void 0 ? boundFloats : fallbackFloats;
@@ -63,6 +66,12 @@ const parentHosts = new Map();
 export function getFloatParentHost(id) {
     return parentHosts.get(id);
 }
+// ----- maximize sidecar --------------------------------------------------
+// Presence in this map ⇒ the float is currently maximized; the value is the
+// rect to restore to. Lives outside FloatEntry so the layout schema doesn't
+// need to bump for an in-memory, non-persisted concern. Reactivity is mirrored
+// into floatMaximized.svelte.ts so Svelte components observe state changes.
+const maximizedRects = new Map();
 // ----- slot id minting ---------------------------------------------------
 let floatSlotCounter = 0;
 function mintFloatSlotId(viewId) {
@@ -135,6 +144,8 @@ function closeFloat(floatId) {
         return;
     store.splice(idx, 1);
     parentHosts.delete(floatId);
+    maximizedRects.delete(floatId);
+    setMaximizedReactive(floatId, false);
 }
 function listFloats() {
     // Return a snapshot so callers can iterate without racing mutations.
@@ -148,9 +159,64 @@ function focusFloat(floatId) {
     const [entry] = store.splice(idx, 1);
     store.push(entry);
 }
+function maximizeFloat(id) {
+    if (maximizedRects.has(id))
+        return;
+    const entry = activeStore().find((f) => f.id === id);
+    if (!entry)
+        return;
+    maximizedRects.set(id, {
+        position: { x: entry.position.x, y: entry.position.y },
+        size: { w: entry.size.w, h: entry.size.h },
+    });
+    setMaximizedReactive(id, true);
+    const bounds = getTreeBounds();
+    entry.position.x = 0;
+    entry.position.y = 0;
+    entry.size.w = bounds.w;
+    entry.size.h = bounds.h;
+    focusFloat(id);
+}
+function restoreFloat(id) {
+    const prev = maximizedRects.get(id);
+    if (!prev)
+        return;
+    const entry = activeStore().find((f) => f.id === id);
+    if (!entry) {
+        maximizedRects.delete(id);
+        setMaximizedReactive(id, false);
+        return;
+    }
+    entry.position.x = prev.position.x;
+    entry.position.y = prev.position.y;
+    entry.size.w = prev.size.w;
+    entry.size.h = prev.size.h;
+    maximizedRects.delete(id);
+    setMaximizedReactive(id, false);
+}
+function toggleMaximizeFloat(id) {
+    if (maximizedRects.has(id))
+        restoreFloat(id);
+    else
+        maximizeFloat(id);
+}
+function unmaximizeFloat(id) {
+    if (!maximizedRects.has(id))
+        return;
+    maximizedRects.delete(id);
+    setMaximizedReactive(id, false);
+}
+function isMaximizedFloat(id) {
+    return readMaximizedReactive(id);
+}
 export const floatManager = {
     open: openFloat,
     close: closeFloat,
     list: listFloats,
     focus: focusFloat,
+    maximize: maximizeFloat,
+    restore: restoreFloat,
+    toggleMaximize: toggleMaximizeFloat,
+    unmaximize: unmaximizeFloat,
+    isMaximized: isMaximizedFloat,
 };