@fuzdev/fuz_app 0.114.0 → 0.116.0

package/dist/ui/role_grant_offers_state.svelte.js

@@ -27,6 +27,7 @@
 import { create_context } from '@fuzdev/fuz_ui/context_helpers.ts';
 import { AsyncSlot } from './async_slot.svelte.js';
 import { is_iso8601_seconds_live } from '../timestamp.js';
+import { GRANT_SCOPE_PAIRED_MESSAGE, is_grant_scope_paired } from '../auth/role_grant_offer_action_specs.js';
 import { ROLE_GRANT_OFFER_ACCEPTED_NOTIFICATION_METHOD, ROLE_GRANT_OFFER_DECLINED_NOTIFICATION_METHOD, ROLE_GRANT_OFFER_RECEIVED_NOTIFICATION_METHOD, ROLE_GRANT_OFFER_RETRACTED_NOTIFICATION_METHOD, ROLE_GRANT_OFFER_SUPERSEDE_NOTIFICATION_METHOD, ROLE_GRANT_REVOKE_NOTIFICATION_METHOD } from '../auth/role_grant_offer_notifications.js';
 /**
  * Svelte context for `RoleGrantOffersState`.
@@ -121,10 +122,15 @@ export class RoleGrantOffersState {
      *
      * `to_actor_id` (optional) narrows the offer to a specific actor on
      * `to_account_id`; omit / null for the account-grain default (any actor
-     * on the recipient account may accept).
+     * on the recipient account may accept). A scoped offer passes `scope_kind`
+     * and `scope_id` together; an unpaired scope (reachable from untyped
+     * callers) fails with `GRANT_SCOPE_PAIRED_MESSAGE` without an RPC.
      */
     async submit_create(params) {
         return this.create.run(async () => {
+            if (!is_grant_scope_paired(params)) {
+                throw new Error(GRANT_SCOPE_PAIRED_MESSAGE);
+            }
             const { offer } = await this.#rpc.create(params);
             this.#merge_offers([offer]);
             return offer;

package/dist/ui/sidebar_state.svelte.d.ts

@@ -3,8 +3,19 @@
  * `sidebar_state_context`; consumers read `show_sidebar` and call
  * `toggle_sidebar` / `activate`.
  *
+ * Visibility is two viewport-free fields — `show_sidebar_wide` (the persistent
+ * sidebar beside the content) and `show_sidebar_narrow` (the overlay below
+ * `narrow_query`) — so server and client render the same classes and CSS picks
+ * which field is in effect. `narrow` reads the viewport and is only for input
+ * handling and ARIA, never for markup that must match SSR.
+ *
  * @module
  */
+/**
+ * Default `narrow_query` — below 800px the sidebar overlays the content and
+ * starts closed.
+ */
+export declare const SIDEBAR_NARROW_QUERY_DEFAULT = "(max-width: 800px)";
 /**
  * Svelte context carrying a reactive `SidebarState` accessor. Set by
  * `ui/AppShell.svelte` (creates a fresh `SidebarState` if not supplied);
@@ -22,20 +33,69 @@ export interface SidebarStateOptions {
      * auto-returns `false` while the getter returns `false`.
      */
     enabled?: () => boolean;
+    /**
+     * Media query under which the sidebar overlays the content and starts
+     * closed. It feeds both `AppShell`'s CSS `media` attribute and a
+     * `MediaQuery`, so it must be a full query with parentheses
+     * (`'(max-width: 900px)'`, not `'max-width: 900px'`). `null` disables
+     * narrow mode.
+     * @default SIDEBAR_NARROW_QUERY_DEFAULT
+     */
+    narrow_query?: string | null;
 }
 export declare class SidebarState {
     #private;
+    /** The media query for narrow mode, or `null` when narrow mode is disabled. */
+    readonly narrow_query: string | null;
+    /**
+     * Whether the sidebar shows beside the content outside narrow mode — the
+     * desktop preference. Narrow-mode interactions never touch it.
+     */
+    show_sidebar_wide: boolean;
+    /** Whether the narrow-mode overlay is open. */
+    show_sidebar_narrow: boolean;
+    /**
+     * Creates the state, subscribing to `narrow_query` unless it is `null`.
+     *
+     * @param options - enabled getter and narrow-mode query
+     * @throws Error in DEV when `narrow_query` has no parentheses — `MediaQuery`
+     *   would auto-wrap it but CSS `media` would not, so they'd disagree
+     */
+    constructor(options?: SidebarStateOptions);
     get enabled(): boolean;
     set enabled(value: boolean);
+    /**
+     * Whether the viewport matches `narrow_query`. Always `false` during SSR
+     * and when `narrow_query` is `null`. Read it for input handling and ARIA
+     * only — markup that must match the server render should key on
+     * `show_sidebar_wide` / `show_sidebar_narrow` instead.
+     */
+    get narrow(): boolean;
+    /**
+     * Effective visibility for the current mode: `false` while disabled,
+     * otherwise `show_sidebar_narrow` in narrow mode and `show_sidebar_wide`
+     * outside it. The setter writes the current mode's field.
+     */
     get show_sidebar(): boolean;
     set show_sidebar(value: boolean);
-    constructor(options?: SidebarStateOptions);
+    /**
+     * Sets the current mode's visibility, routed by `narrow` at call time.
+     *
+     * @param value - the new visibility, defaults to the inverse of `show_sidebar`
+     */
     toggle_sidebar(value?: boolean): void;
+    /**
+     * Closes the narrow-mode overlay, leaving the wide preference untouched.
+     * `AppShell` calls it on navigation, Escape, scrim click, and when the
+     * viewport widens out of narrow mode.
+     */
+    close_narrow(): void;
     /**
      * Show the sidebar and enable the toggle. The returned disposer hides
      * and disables on cleanup — pair with `$effect` for scoped activation.
      *
-     * @mutates `this` - sets `enabled` and `show_sidebar`; disposer clears both
+     * @mutates `this` - sets `enabled` and `show_sidebar_wide`; the disposer
+     *   clears `enabled`, `show_sidebar_wide`, and `show_sidebar_narrow`
      */
     activate(): () => void;
 }

package/dist/ui/sidebar_state.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar_state.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/sidebar_state.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;2CAAwB,YAAY;4BAAZ,YAAY;uBAAZ,YAAY,WAAZ,YAAY;CAAG,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;CACxB;AAED,qBAAa,YAAY;;IAKxB,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,YAAY,IAAI,OAAO,CAG1B;IAED,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,EAE9B;gBAEW,OAAO,CAAC,EAAE,mBAAmB;IAIzC,cAAc,CAAC,KAAK,GAAE,OAA4B,GAAG,IAAI;IAIzD;;;;;OAKG;IACH,QAAQ,IAAI,MAAM,IAAI;CAQtB"}
+{"version":3,"file":"sidebar_state.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/sidebar_state.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH;;;GAGG;AACH,eAAO,MAAM,4BAA4B,uBAAuB,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;2CAAwB,YAAY;4BAAZ,YAAY;uBAAZ,YAAY,WAAZ,YAAY;CAAG,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B;AAED,qBAAa,YAAY;;IACxB,+EAA+E;IAC/E,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAErC;;;OAGG;IACH,iBAAiB,EAAE,OAAO,CAAoB;IAE9C,+CAA+C;IAC/C,mBAAmB,EAAE,OAAO,CAAqB;IAMjD;;;;;;OAMG;gBACS,OAAO,CAAC,EAAE,mBAAmB;IAazC,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;;;;OAKG;IACH,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED;;;;OAIG;IACH,IAAI,YAAY,IAAI,OAAO,CAG1B;IAED,IAAI,YAAY,CAAC,KAAK,EAAE,OAAO,EAM9B;IAED;;;;OAIG;IACH,cAAc,CAAC,KAAK,GAAE,OAA4B,GAAG,IAAI;IAIzD;;;;OAIG;IACH,YAAY,IAAI,IAAI;IAIpB;;;;;;OAMG;IACH,QAAQ,IAAI,MAAM,IAAI;CAStB"}

package/dist/ui/sidebar_state.svelte.js

@@ -3,9 +3,22 @@
  * `sidebar_state_context`; consumers read `show_sidebar` and call
  * `toggle_sidebar` / `activate`.
  *
+ * Visibility is two viewport-free fields — `show_sidebar_wide` (the persistent
+ * sidebar beside the content) and `show_sidebar_narrow` (the overlay below
+ * `narrow_query`) — so server and client render the same classes and CSS picks
+ * which field is in effect. `narrow` reads the viewport and is only for input
+ * handling and ARIA, never for markup that must match SSR.
+ *
  * @module
  */
+import { DEV } from 'esm-env';
+import { MediaQuery } from 'svelte/reactivity';
 import { create_context } from '@fuzdev/fuz_ui/context_helpers.ts';
+/**
+ * Default `narrow_query` — below 800px the sidebar overlays the content and
+ * starts closed.
+ */
+export const SIDEBAR_NARROW_QUERY_DEFAULT = '(max-width: 800px)';
 /**
  * Svelte context carrying a reactive `SidebarState` accessor. Set by
  * `ui/AppShell.svelte` (creates a fresh `SidebarState` if not supplied);
@@ -13,41 +26,97 @@ import { create_context } from '@fuzdev/fuz_ui/context_helpers.ts';
  */
 export const sidebar_state_context = create_context();
 export class SidebarState {
+    /** The media query for narrow mode, or `null` when narrow mode is disabled. */
+    narrow_query;
+    /**
+     * Whether the sidebar shows beside the content outside narrow mode — the
+     * desktop preference. Narrow-mode interactions never touch it.
+     */
+    show_sidebar_wide = $state.raw(true);
+    /** Whether the narrow-mode overlay is open. */
+    show_sidebar_narrow = $state.raw(false);
     #get_enabled;
     #enabled = $state.raw(true);
-    #show_sidebar = $state.raw(true);
+    #narrow_media;
+    /**
+     * Creates the state, subscribing to `narrow_query` unless it is `null`.
+     *
+     * @param options - enabled getter and narrow-mode query
+     * @throws Error in DEV when `narrow_query` has no parentheses — `MediaQuery`
+     *   would auto-wrap it but CSS `media` would not, so they'd disagree
+     */
+    constructor(options) {
+        this.#get_enabled = options?.enabled;
+        const narrow_query = options?.narrow_query === undefined ? SIDEBAR_NARROW_QUERY_DEFAULT : options.narrow_query;
+        if (DEV && narrow_query !== null && !narrow_query.includes('(')) {
+            throw new Error(`SidebarState narrow_query must include parentheses, got '${narrow_query}' — try '(${narrow_query})'`);
+        }
+        this.narrow_query = narrow_query;
+        this.#narrow_media = narrow_query === null ? null : new MediaQuery(narrow_query, false);
+    }
     get enabled() {
         return this.#get_enabled?.() ?? this.#enabled;
     }
     set enabled(value) {
         this.#enabled = value;
     }
+    /**
+     * Whether the viewport matches `narrow_query`. Always `false` during SSR
+     * and when `narrow_query` is `null`. Read it for input handling and ARIA
+     * only — markup that must match the server render should key on
+     * `show_sidebar_wide` / `show_sidebar_narrow` instead.
+     */
+    get narrow() {
+        return this.#narrow_media?.current ?? false;
+    }
+    /**
+     * Effective visibility for the current mode: `false` while disabled,
+     * otherwise `show_sidebar_narrow` in narrow mode and `show_sidebar_wide`
+     * outside it. The setter writes the current mode's field.
+     */
     get show_sidebar() {
         if (!this.enabled)
             return false;
-        return this.#show_sidebar;
+        return this.narrow ? this.show_sidebar_narrow : this.show_sidebar_wide;
     }
     set show_sidebar(value) {
-        this.#show_sidebar = value;
-    }
-    constructor(options) {
-        this.#get_enabled = options?.enabled;
+        if (this.narrow) {
+            this.show_sidebar_narrow = value;
+        }
+        else {
+            this.show_sidebar_wide = value;
+        }
     }
+    /**
+     * Sets the current mode's visibility, routed by `narrow` at call time.
+     *
+     * @param value - the new visibility, defaults to the inverse of `show_sidebar`
+     */
     toggle_sidebar(value = !this.show_sidebar) {
         this.show_sidebar = value;
     }
+    /**
+     * Closes the narrow-mode overlay, leaving the wide preference untouched.
+     * `AppShell` calls it on navigation, Escape, scrim click, and when the
+     * viewport widens out of narrow mode.
+     */
+    close_narrow() {
+        this.show_sidebar_narrow = false;
+    }
     /**
      * Show the sidebar and enable the toggle. The returned disposer hides
      * and disables on cleanup — pair with `$effect` for scoped activation.
      *
-     * @mutates `this` - sets `enabled` and `show_sidebar`; disposer clears both
+     * @mutates `this` - sets `enabled` and `show_sidebar_wide`; the disposer
+     *   clears `enabled`, `show_sidebar_wide`, and `show_sidebar_narrow`
      */
     activate() {
         this.enabled = true;
-        this.show_sidebar = true;
+        this.show_sidebar_wide = true;
         return () => {
             this.enabled = false;
-            this.show_sidebar = false;
+            this.show_sidebar_wide = false;
+            this.show_sidebar_narrow = false;
         };
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_app",
-  "version": "0.114.0",
+  "version": "0.116.0",
   "description": "fullstack app library",
   "glyph": "🗝",
   "logo": "logo.svg",
@@ -100,8 +100,6 @@
     "jsdom": "^28.1.0",
     "magic-string": "^0.30.21",
     "pg": "^8.20.0",
-    "prettier": "^3.9.6",
-    "prettier-plugin-svelte": "^4.1.1",
     "svelte": "^5.56.4",
     "svelte-check": "^4.7.1",
     "svelte-docinfo": "^0.7.0",
@@ -115,24 +113,6 @@
     "zimmerframe": "^1.1.4",
     "zod": "^4.3.6"
   },
-  "prettier": {
-    "plugins": [
-      "prettier-plugin-svelte"
-    ],
-    "useTabs": true,
-    "printWidth": 100,
-    "singleQuote": true,
-    "bracketSpacing": true,
-    "trailingComma": "none",
-    "overrides": [
-      {
-        "files": "package.json",
-        "options": {
-          "useTabs": false
-        }
-      }
-    ]
-  },
   "sideEffects": [
     "**/*.css"
   ],