@fuzdev/fuz_ui 0.210.3 → 0.211.0

package/dist/Breadcrumb.svelte

@@ -12,6 +12,7 @@
 	const {
 		path,
 		selected_path,
+		root_path,
 		base_path,
 		separator,
 		children,
@@ -26,6 +27,12 @@
 		 * `null` means none and `undefined` is detected from the current url.
 		 */
 		selected_path?: string | null | undefined;
+		/**
+		 * Where the root link goes, prefixed with a slash and relative to the base path,
+		 * e.g. `'/docs'` on a home page, where linking to the root would link to itself.
+		 * Defaults to the root.
+		 */
+		root_path?: string;
 		/**
 		 * Sets a custom base path of `path` and `selected_path`.
 		 * Defaults to `base` from `$app/paths`.
@@ -53,7 +60,9 @@
 
 	const path_pieces = $derived(parse_path_pieces(final_path));
 
-	const root_path = $derived(ensure_end(final_base_path, '/'));
+	const root_href = $derived(
+		root_path === undefined ? ensure_end(final_base_path, '/') : final_base_path + root_path
+	);
 
 	// TODO animate these
 	// `transition:slide={{axis: 'x'}}`
@@ -61,7 +70,7 @@
 
 <div {...rest} class="breadcrumb {rest.class}">
 	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-	<a href={root_path} class={{ selected: root_path === final_base_path + final_selected_path }}>
+	<a href={root_href} class={{ selected: root_href === final_base_path + final_selected_path }}>
 		{#if children}
 			{@render children()}
 		{:else if icon_data}

package/dist/Breadcrumb.svelte.d.ts

@@ -10,6 +10,12 @@ type $$ComponentProps = SvelteHTMLElements['div'] & {
      * `null` means none and `undefined` is detected from the current url.
      */
     selected_path?: string | null | undefined;
+    /**
+     * Where the root link goes, prefixed with a slash and relative to the base path,
+     * e.g. `'/docs'` on a home page, where linking to the root would link to itself.
+     * Defaults to the root.
+     */
+    root_path?: string;
     /**
      * Sets a custom base path of `path` and `selected_path`.
      * Defaults to `base` from `$app/paths`.

package/dist/Breadcrumb.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Breadcrumb.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAoEH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Breadcrumb.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuEH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Docs.svelte

@@ -18,9 +18,30 @@
 
 	const {
 		tomes,
+		primary_nav,
+		secondary_nav_header,
+		secondary_nav_footer,
+		footer,
 		children
 	}: {
 		tomes: Array<Tome>;
+		/**
+		 * Rendered in the primary nav after the breadcrumb, at its end, e.g. links to the
+		 * site's other sections.
+		 */
+		primary_nav?: Snippet;
+		/**
+		 * Rendered above the tome menu in the secondary nav, in the sidebar and in the
+		 * menu dialog of narrow screens, where the primary nav has little room.
+		 */
+		secondary_nav_header?: Snippet;
+		/** Rendered below the tome menu in the secondary nav, in the sidebar and in the menu dialog. */
+		secondary_nav_footer?: Snippet;
+		/**
+		 * Replaces the default footer, a `DocsFooter` with the site's repo and a link to
+		 * fuz.dev, e.g. for a site that isn't part of the Fuz stack.
+		 */
+		footer?: Snippet;
 		children: Snippet;
 	} = $props();
 
@@ -52,6 +73,11 @@
 
 <div class="docs" style:--docs_menu_width={docs_menu_width}>
 	<DocsPrimaryNav>
+		{#if primary_nav}
+			<div class="primary-nav-end">
+				{@render primary_nav()}
+			</div>
+		{/if}
 		<div class="nav-dialog-toggle">
 			<button class="plain" type="button" onclick={() => toggle_secondary_nav_dialog()}>
 				menu
@@ -61,7 +87,7 @@
 	<!-- TODO @many dialog navs -->
 	{#if !innerWidth.current || innerWidth.current > SECONDARY_NAV_BREAKPOINT}
 		<div class="secondary-nav-wrapper">
-			<DocsSecondaryNav {tomes} />
+			<DocsSecondaryNav {tomes} header={secondary_nav_header} footer={secondary_nav_footer} />
 		</div>
 	{/if}
 	<main>
@@ -73,11 +99,15 @@
 			<DocsTertiaryNav {tomes} {tomes_by_slug} />
 		{/if}
 		<section class="box">
-			<DocsFooter repo_url={site.repo_url} root_url={FUZ_DEV_URL}>
-				<div class="mb_xl5">
-					<Breadcrumb />
-				</div>
-			</DocsFooter>
+			{#if footer}
+				{@render footer()}
+			{:else}
+				<DocsFooter repo_url={site.repo_url} root_url={FUZ_DEV_URL}>
+					<div class="mb_xl5">
+						<Breadcrumb />
+					</div>
+				</DocsFooter>
+			{/if}
 		</section>
 	</main>
 </div>
@@ -94,7 +124,12 @@
 					<Breadcrumb />
 				</div>
 				<div class="px_lg pb_xl">
-					<DocsSecondaryNav {tomes} sidebar={false} />
+					<DocsSecondaryNav
+						{tomes}
+						sidebar={false}
+						header={secondary_nav_header}
+						footer={secondary_nav_footer}
+					/>
 					<DocsTertiaryNav {tomes} {tomes_by_slug} sidebar={false} />
 				</div>
 			</div>
@@ -131,6 +166,12 @@
 		display: contents;
 	}
 
+	.primary-nav-end {
+		display: flex;
+		align-items: center;
+		gap: var(--space_md);
+		padding: 0 var(--space_md);
+	}
 	.nav-dialog-toggle {
 		display: none;
 	}

package/dist/Docs.svelte.d.ts

@@ -2,6 +2,23 @@ import type { Snippet } from 'svelte';
 import { Tome } from './tome.js';
 type $$ComponentProps = {
     tomes: Array<Tome>;
+    /**
+     * Rendered in the primary nav after the breadcrumb, at its end, e.g. links to the
+     * site's other sections.
+     */
+    primary_nav?: Snippet;
+    /**
+     * Rendered above the tome menu in the secondary nav, in the sidebar and in the
+     * menu dialog of narrow screens, where the primary nav has little room.
+     */
+    secondary_nav_header?: Snippet;
+    /** Rendered below the tome menu in the secondary nav, in the sidebar and in the menu dialog. */
+    secondary_nav_footer?: Snippet;
+    /**
+     * Replaces the default footer, a `DocsFooter` with the site's repo and a link to
+     * fuz.dev, e.g. for a site that isn't part of the Fuz stack.
+     */
+    footer?: Snippet;
     children: Snippet;
 };
 declare const Docs: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Docs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Docs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Docs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,OAAO,EAAE,IAAI,EAAiB,MAAM,WAAW,CAAC;AAW/C,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAyGH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Docs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Docs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,OAAO,EAAE,IAAI,EAAiB,MAAM,WAAW,CAAC;AAW/C,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gGAAgG;IAChG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAsHH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/DocsSecondaryNav.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
 	import DocsMenu from './DocsMenu.svelte';
@@ -7,9 +8,15 @@
 	const {
 		tomes,
 		sidebar = true,
+		header,
+		footer,
 		...rest
 	}: SvelteHTMLElements['aside'] & {
 		tomes: Array<Tome>;
+		/** Rendered above the menu, e.g. links to the site's other sections. */
+		header?: Snippet;
+		/** Rendered below the menu. */
+		footer?: Snippet;
 		sidebar?: boolean; // TODO @many dialog navs (this shouldn't exist)
 	} = $props();
 
@@ -18,7 +25,9 @@
 
 <aside {...rest} class={['docs-secondary-nav unstyled', rest.class, { sidebar }]}>
 	<nav aria-label="Secondary nav">
+		{@render header?.()}
 		<DocsMenu {tomes} {expand_width} />
+		{@render footer?.()}
 	</nav>
 </aside>
 

package/dist/DocsSecondaryNav.svelte.d.ts

@@ -1,7 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 import { Tome } from './tome.js';
 type $$ComponentProps = SvelteHTMLElements['aside'] & {
     tomes: Array<Tome>;
+    /** Rendered above the menu, e.g. links to the site's other sections. */
+    header?: Snippet;
+    /** Rendered below the menu. */
+    footer?: Snippet;
     sidebar?: boolean;
 };
 declare const DocsSecondaryNav: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/DocsSecondaryNav.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsSecondaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSecondaryNav.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEhC,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA0BH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"DocsSecondaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSecondaryNav.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEhC,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA+BH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/HueInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Hue } from '@fuzdev/fuz_util/colors.ts';
+	import { parse_hue, type Hue } from '@fuzdev/fuz_util/colors.ts';
 	import type { Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
@@ -12,16 +12,6 @@
 		children?: Snippet;
 	} = $props();
 
-	// TODO probably upstream this to fuz_util
-	const parse_hue = (v: any): Hue | null => {
-		const t = typeof v;
-		if (t === 'number') return v;
-		if (t !== 'string') return null;
-		const parsed = Number(v);
-		if (Number.isNaN(parsed)) return null;
-		return parsed;
-	};
-
 	const update_hue = (v: Hue) => {
 		value = v;
 	};

package/dist/HueInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Hue } from '@fuzdev/fuz_util/colors.ts';
+import { type Hue } from '@fuzdev/fuz_util/colors.ts';
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['div'] & {

package/dist/HueInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HueInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/HueInput.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6DH,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"HueInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/HueInput.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAa,KAAK,GAAG,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAmDH,QAAA,MAAM,QAAQ,2DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_ui",
-  "version": "0.210.3",
+  "version": "0.211.0",
   "description": "Svelte UI library",
   "tagline": "friendly user zystem",
   "glyph": "🧶",
@@ -35,7 +35,7 @@
   "peerDependencies": {
     "@fuzdev/fuz_code": ">=0.46.0",
     "@fuzdev/fuz_css": ">=0.65.0",
-    "@fuzdev/fuz_util": ">=0.65.1",
+    "@fuzdev/fuz_util": ">=0.72.0",
     "@fuzdev/gro": ">=0.204.0",
     "@fuzdev/mdz": ">=0.2.0",
     "@sveltejs/kit": "^2.47.3",
@@ -64,8 +64,8 @@
     "@changesets/changelog-git": "^0.2.1",
     "@fuzdev/blake3-wasm": "^0.2.0",
     "@fuzdev/fuz_code": "^0.50.0",
-    "@fuzdev/fuz_css": "^0.65.3",
-    "@fuzdev/fuz_util": "^0.69.0",
+    "@fuzdev/fuz_css": "^0.66.0",
+    "@fuzdev/fuz_util": "^0.72.0",
     "@fuzdev/gro": "^0.213.0",
     "@fuzdev/mdz": "^0.3.0",
     "@ryanatkn/eslint-config": "^0.12.2",