@fuzdev/fuz_app 0.123.0 → 0.124.0

package/README.md

@@ -14,6 +14,8 @@ fuz_app supports deploying with Deno, Node, and Bun,
 to servers, static websites, and local-first binaries, with more to come,
 eventually with compatible alternatives written in Rust.
 
+This library has no AI features by design, for that see [zzz](https://github.com/fuzdev/zzz).
+
 For more see the <a href="https://github.com/fuzdev/fuz_app/discussions">discussions</a>.
 fuz_app is part of the Fuz stack
 ([fuz.dev](https://www.fuz.dev/), [@fuzdev](https://github.com/fuzdev)).

package/dist/ui/AppShell.svelte

@@ -388,7 +388,9 @@
 			--sidebar_offset: 0px;
 			display: flex;
 			flex-direction: column;
-			min-height: 100vh;
+			/* the small viewport, so the floor alone never makes a mobile page
+			   scroll with the toolbar shown, nor relayouts as the toolbar moves */
+			min-height: 100svh;
 		}
 		.app-shell.wide-open > .app-shell-content {
 			--sidebar_offset: var(--sidebar_width);

package/dist/ui/CLAUDE.md

@@ -221,19 +221,20 @@ pattern rather than reintroducing prop-drilling.
     to keep narrow mode at `0px`. To change only the wide open offset, target
     `.app-shell.wide-open > .app-shell-content`, also inside that negation.
 - `ColumnLayout.svelte` — fixed `aside` column + fluid `children`
-  column; `column_width = '280px'`, `aside_label = 'menu'`. Below 64rem of
+  column; `column_width = '280px'`, `toggle_label = 'menu'`. Below 64rem of
   its own width (an `inline-size` container query named `column_layout`;
   64rem under fuz_css's 62.5% root is fuz_css's `sm` breakpoint, 640px at
   the default font size) the columns stack and the aside collapses behind a
   sticky `type="button"` toggle (`menuitem plain` with a `chevron`, text
-  `aside_label`, `aria-expanded`/`aria-controls`); opened, the aside sits in flow above the content (scrolled into view under the toggle when scroll anchoring would leave it above the view), and `afterNavigate` closes it. With a bounded height, the stacked layout
+  `toggle_label`, `aria-expanded`/`aria-controls`); opened, the aside sits in flow above the content (scrolled into view under the toggle when scroll anchoring would leave it above the view), and `afterNavigate` closes it. With a bounded height, the stacked layout
   scrolls as one column and the toggle sticks to its top; under a parent
   that grows with its content, the page scrolls and the toggle scrolls away
   with it. Above the threshold the toggle is `display: none`. The switch is
   CSS alone, so the server render shows the right form at any width and
   hydration changes nothing. The
-  `<aside>` takes `aria-label={aside_label}`; consumers wrap links in their
-  own `<nav>`. Hooks: `--column_width`, `--column_toggle_bg` (default
+  aside column is a plain `<div>` (the toggle's `aria-controls` target), not
+  a landmark, as with `AppShell`'s sidebar; consumers render the landmark
+  inside the snippet - a `<nav aria-label>` for links, or an `<aside aria-label>` for other content. Hooks: `--column_width`, `--column_toggle_bg` (default
   `--shade_00`). The container can't size from its content, so a
   shrink-to-fit placement collapses it to zero width.
 - `MenuLink.svelte` — SvelteKit `<a>` with `selected` derived from

package/dist/ui/ColumnLayout.svelte

@@ -5,7 +5,7 @@
 	 *
 	 * Below a threshold of the layout's own width - a container query, not a
 	 * media query, so a nested layout decides for itself - the columns stack:
-	 * the aside collapses behind a toggle button labelled `aside_label`, and
+	 * the aside collapses behind a toggle button labelled `toggle_label`, and
 	 * when opened it sits in flow above the content, pushing it down, until
 	 * the toggle closes it or a navigation does. Opening scrolls the aside
 	 * into view, under the toggle, when it would land above the view.
@@ -28,8 +28,10 @@
 	 * `afterNavigate`. Without JS the stacked aside can't be opened, since the
 	 * toggle is client state; above the threshold it's always shown.
 	 *
-	 * Renders a generic `<aside>` named by `aside_label`; wrap navigation
-	 * links in a `<nav>` inside the `aside` snippet.
+	 * The aside column is a plain `<div>`, not a landmark, as with `AppShell`'s
+	 * sidebar: render the landmark inside the `aside` snippet - a
+	 * `<nav aria-label>` for navigation links, or an `<aside aria-label>` for
+	 * other content.
 	 *
 	 * Styling hooks: `--column_width` (set from `column_width`) and
 	 * `--column_toggle_bg`, the stacked toggle bar's opaque background so
@@ -46,7 +48,7 @@
 		aside,
 		children,
 		column_width = '280px',
-		aside_label = 'menu',
+		toggle_label = 'menu',
 		class: class_name = '',
 		...rest
 	}: SvelteHTMLElements['div'] & {
@@ -58,10 +60,10 @@
 		 */
 		column_width?: string;
 		/**
-		 * The stacked toggle's text and the aside's accessible name.
+		 * The stacked toggle's text.
 		 * @default 'menu'
 		 */
-		aside_label?: string;
+		toggle_label?: string;
 	} = $props();
 
 	const uid = $props.id();
@@ -70,7 +72,7 @@
 	let aside_open = $state(false);
 
 	let toggle_bar_el: HTMLDivElement;
-	let aside_el: HTMLElement;
+	let aside_el: HTMLDivElement;
 
 	const toggle_aside = async (): Promise<void> => {
 		aside_open = !aside_open;
@@ -103,18 +105,13 @@
 				aria-controls={aside_id}
 				onclick={toggle_aside}
 			>
-				{aside_label}
+				{toggle_label}
 				<span class="chevron" aria-hidden="true"></span>
 			</button>
 		</div>
-		<aside
-			id={aside_id}
-			class="column-fixed unstyled"
-			aria-label={aside_label}
-			bind:this={aside_el}
-		>
+		<div id={aside_id} class="column-fixed" bind:this={aside_el}>
 			{@render aside()}
-		</aside>
+		</div>
 		<div class="column-fluid">
 			{@render children()}
 		</div>

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

@@ -4,7 +4,7 @@
      *
      * Below a threshold of the layout's own width - a container query, not a
      * media query, so a nested layout decides for itself - the columns stack:
-     * the aside collapses behind a toggle button labelled `aside_label`, and
+     * the aside collapses behind a toggle button labelled `toggle_label`, and
      * when opened it sits in flow above the content, pushing it down, until
      * the toggle closes it or a navigation does. Opening scrolls the aside
      * into view, under the toggle, when it would land above the view.
@@ -27,8 +27,10 @@
      * `afterNavigate`. Without JS the stacked aside can't be opened, since the
      * toggle is client state; above the threshold it's always shown.
      *
-     * Renders a generic `<aside>` named by `aside_label`; wrap navigation
-     * links in a `<nav>` inside the `aside` snippet.
+     * The aside column is a plain `<div>`, not a landmark, as with `AppShell`'s
+     * sidebar: render the landmark inside the `aside` snippet - a
+     * `<nav aria-label>` for navigation links, or an `<aside aria-label>` for
+     * other content.
      *
      * Styling hooks: `--column_width` (set from `column_width`) and
      * `--column_toggle_bg`, the stacked toggle bar's opaque background so
@@ -47,10 +49,10 @@ type $$ComponentProps = SvelteHTMLElements['div'] & {
      */
     column_width?: string;
     /**
-     * The stacked toggle's text and the aside's accessible name.
+     * The stacked toggle's text.
      * @default 'menu'
      */
-    aside_label?: string;
+    toggle_label?: string;
 };
 declare const ColumnLayout: import("svelte").Component<$$ComponentProps, {}, "">;
 type ColumnLayout = ReturnType<typeof ColumnLayout>;

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnLayout.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/ColumnLayout.svelte"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqCI;AACJ,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAmEH,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ColumnLayout.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/ColumnLayout.svelte"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuCI;AACJ,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAmEH,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_app",
-  "version": "0.123.0",
+  "version": "0.124.0",
   "description": "fullstack app library",
   "glyph": "🗝",
   "logo": "logo.svg",
@@ -79,8 +79,8 @@
     "@electric-sql/pglite": "^0.4.5",
     "@fuzdev/blake3-wasm": "^0.2.0",
     "@fuzdev/fuz_code": "^0.50.0",
-    "@fuzdev/fuz_css": "^0.65.0",
-    "@fuzdev/fuz_ui": "^0.210.0",
+    "@fuzdev/fuz_css": "^0.65.1",
+    "@fuzdev/fuz_ui": "^0.210.1",
     "@fuzdev/fuz_util": "^0.71.0",
     "@fuzdev/gro": "^0.213.0",
     "@fuzdev/mdz": "^0.3.0",