api #

Svelte UI library

94 modules ยท 300 declarations

Modules
#

Alert
#

Alert.svelte view source

accepts children

import Alert from '@fuzdev/fuz_ui/Alert.svelte';

color?

type string
optional

children

type Snippet<[]>

onclick?

type MouseEventHandler<HTMLElement> & (() => void)
optional

status?

optional default 'inform'

disabled?

type boolean
optional

icon?

type string | Snippet<[icon: string]>
optional

button_attrs?

Button attributes, applied only when onclick renders the alert as a <button>.

type HTMLButtonAttributes
optional

div_attrs?

Div attributes, applied only when the alert renders as a <div> (no onclick).

type HTMLAttributes<HTMLDivElement>
optional

intersects

HTMLAttributes<HTMLElement>

alert_status_options
#

alert.ts view source

Record<AlertStatus, AlertStatusOptions> import {alert_status_options} from '@fuzdev/fuz_ui/alert.js';

AlertStatus
#

AlertStatusOptions
#

alert.ts view source

AlertStatusOptions import type {AlertStatusOptions} from '@fuzdev/fuz_ui/alert.js';

color

type string

icon

type string | null

ApiDeclarationList
#

ApiDeclarationList.svelte view source

import ApiDeclarationList from '@fuzdev/fuz_ui/ApiDeclarationList.svelte';

declarations

type Declaration[]

search_query?

type string
optional default ''

ApiIndex
#

ApiIndex.svelte view source

import ApiIndex from '@fuzdev/fuz_ui/ApiIndex.svelte';

library?

The library instance to render API docs for. Defaults to getting from library_context.

type Library
optional

tome?

The tome for the API docs page. Defaults to looking up the 'api' tome.

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }
optional default tome_get_by_slug('api')

minimal?

Whether to show minimal content (just a link to full API docs). Used when the API index is shown on a parent docs page.

type boolean
optional default false

ApiModule
#

ApiModule.svelte view source

import ApiModule from '@fuzdev/fuz_ui/ApiModule.svelte';

module_path

The module path parameter from the route (e.g., "lib/Button.svelte").

type string | string[]

library?

The library instance to render API docs for. Defaults to getting from library_context.

type Library
optional

tome?

The tome for the API docs page. Defaults to looking up the 'api' tome.

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }
optional default tome_get_by_slug('api')

ApiModulesList
#

ApiModulesList.svelte view source

import ApiModulesList from '@fuzdev/fuz_ui/ApiModulesList.svelte';

modules

The modules to display.

type Module[]

search_query?

The current search query for highlighting.

type string
optional default ''

ApiSearchState
#

api_search.svelte.ts view source

ApiSearchState import type {ApiSearchState} from '@fuzdev/fuz_ui/api_search.svelte.js';

query

type string

modules

type { all: Array<Module>; filtered: Array<Module>; }

declarations

type { all: Array<Declaration>; filtered: Array<Declaration>; }

autofocus
#

autofocus.svelte.ts view source

(options?: FocusOptions | undefined): Attachment<HTMLElement | SVGElement> import {autofocus} from '@fuzdev/fuz_ui/autofocus.svelte.js';

Creates an attachment that focuses the element on mount. Use this instead of the HTML autofocus attribute for elements that mount dynamically from reactive conditionals like {#if}.

options?

focus options forwarded to element.focus(); defaults to {focusVisible: true} to show focus indicators on programmatic focus

type FocusOptions | undefined
optional

returns

Attachment<HTMLElement | SVGElement>

Breadcrumb
#

Card
#

Card.svelte view source

accepts children

import Card from '@fuzdev/fuz_ui/Card.svelte';

children

type Snippet<[]>

href?

Renders the card as an <a> when provided.

type string
optional

tag?

type string
optional

align?

type "left" | "right" | "above" | "below"
optional default 'left'

icon?

type string | Snippet<[]>
optional

a_attrs?

Anchor attributes, applied only when href renders the card as an <a>.

type HTMLAnchorAttributes
optional

intersects

HTMLAttributes<HTMLElement>

COLOR_SCHEME_SCRIPT_HASH
#

csp.ts view source

"sha256-QOxqn7EUzb3ydF9SALJoJGWSvywW9R0AfTDSenB83Z8=" import {COLOR_SCHEME_SCRIPT_HASH} from '@fuzdev/fuz_ui/csp.js';

COLOR_SCHEME_STORAGE_KEY
#

ColorSchemeInput
#

ColorSchemeInput.svelte view source

accepts children

import ColorSchemeInput from '@fuzdev/fuz_ui/ColorSchemeInput.svelte';

value?

type { color_scheme: ColorScheme; }
optional default get_theme_state()

intersects

SvelteHTMLElements['menu']

Contextmenu
#

Contextmenu.svelte view source

accepts children

import Contextmenu from '@fuzdev/fuz_ui/Contextmenu.svelte';

tag?

type T
optional default 'span' as any

entries

type Snippet<[]>

children

type Snippet<[]>

generics

Contextmenu<T extends string = 'span'>
T
constraint string
default 'span'

contextmenu_attachment
#

contextmenu_state.svelte.ts view source

(params: ContextmenuParams | ContextmenuParams[] | null | undefined): Attachment<HTMLElement | SVGElement> import {contextmenu_attachment} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Creates an attachment that sets up contextmenu behavior on an element.

params

contextmenu parameters or nullish to disable

type ContextmenuParams | ContextmenuParams[] | null | undefined

returns

Attachment<HTMLElement | SVGElement>

contextmenu_calculate_constrained_x
#

contextmenu_helpers.ts view source

(menu_x: number, menu_width: number, layout_width: number): number import {contextmenu_calculate_constrained_x} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Constrains the menu's x coordinate to the layout, shifting left to fit the right edge. Clamps at 0 so a menu wider than the layout pins its left edge - the start of each item stays visible.

menu_x

type number

menu_width

type number

layout_width

type number

returns

number

contextmenu_calculate_constrained_y
#

contextmenu_helpers.ts view source

(menu_y: number, menu_height: number, layout_height: number): number import {contextmenu_calculate_constrained_y} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Constrains the menu's y coordinate to the layout, shifting up to fit the bottom edge. Clamps at 0 so a menu taller than the layout pins its top edge - the first items stay visible.

menu_y

type number

menu_height

type number

layout_height

type number

returns

number

contextmenu_calculate_submenu_translate
#

contextmenu_helpers.ts view source

(options: ContextmenuSubmenuTranslateOptions): { x: number; y: number; } import {contextmenu_calculate_submenu_translate} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Calculates a submenu flyout's translation so it fits the layout.

Preference order on the x axis: fly out to the right of the parent menu, else flip fully to the left of it, else shift to pin whichever side overflows less. The y axis shifts up only as far as needed to fit the bottom edge.

Used by ContextmenuSubmenu.svelte.

options

returns

{ x: number; y: number; }

contextmenu_check_global_root
#

contextmenu_state.svelte.ts view source

(get_scoped: () => boolean): void import {contextmenu_check_global_root} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Registers a contextmenu root and warns if multiple non-scoped roots are detected. Only active in development mode - DEV is a build-time constant, so production bundles eliminate the check. Automatically handles cleanup on unmount.

get_scoped

getter function that returns the current scoped value

type () => boolean

returns

void

contextmenu_context
#

contextmenu_state.svelte.ts view source

{ get: (error_message?: string | undefined) => () => ContextmenuState; get_maybe: () => (() => ContextmenuState) | undefined; set: (value: () => ContextmenuState) => () => ContextmenuState; } import {contextmenu_context} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

contextmenu_create_keyboard_handlers
#

contextmenu_helpers.ts view source

(contextmenu: ContextmenuState): Map<string, () => void> import {contextmenu_create_keyboard_handlers} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

contextmenu

returns

Map<string, () => void>

contextmenu_create_keydown_handler
#

contextmenu_helpers.ts view source

(keyboard_handlers: Map<string, () => void>): (e: KeyboardEvent) => void import {contextmenu_create_keydown_handler} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

keyboard_handlers

type Map<string, () => void>

returns

(e: KeyboardEvent) => void

contextmenu_create_mousedown_handler
#

contextmenu_helpers.ts view source

(contextmenu: ContextmenuState, get_menu_el: () => HTMLElement | undefined, open_guard?: ContextmenuOpenGuard | undefined): (e: MouseEvent) => void import {contextmenu_create_mousedown_handler} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Creates a mousedown handler that closes the contextmenu when pressing outside of the menu element, deferring to open_guard for presses that belong to the gesture that opened the menu: gesture presses outside don't close, and gesture presses on the menu arm the click blocker instead of activating the entry under the pointer.

Secondary-button presses outside the menu never close here - their own contextmenu event resolves the menu in the roots' handlers (reopening it elsewhere, or closing it when there's nothing to open) - with one exception: shift+rightclick, an explicit native-menu request whose contextmenu event Firefox suppresses entirely, closes on the press itself.

Registered on the window during the bubble phase deliberately - consumers keep the menu open through a press by swallowing the event (e.g. menu controller buttons that use onmousedowncapture + swallow).

contextmenu

the contextmenu state

get_menu_el

getter for the open menu element, if any

type () => HTMLElement | undefined

open_guard?

guard that identifies presses belonging to the gesture that opened the menu

type ContextmenuOpenGuard | undefined
optional

returns

(e: MouseEvent) => void

CONTEXTMENU_DEFAULT_BYPASS_MOVE_TOLERANCE
#

CONTEXTMENU_DEFAULT_BYPASS_WINDOW
#

CONTEXTMENU_DEFAULT_LONGPRESS_DURATION
#

CONTEXTMENU_DEFAULT_LONGPRESS_MOVE_TOLERANCE
#

CONTEXTMENU_DEFAULT_OPEN_OFFSET_X
#

CONTEXTMENU_DEFAULT_OPEN_OFFSET_Y
#

contextmenu_dimensions_context
#

contextmenu_state.svelte.ts view source

{ get: () => Dimensions; set: (value?: Dimensions | undefined) => Dimensions; } import {contextmenu_dimensions_context} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

contextmenu_is_valid_target
#

contextmenu_helpers.ts view source

(target: EventTarget | null, shiftKey: boolean): target is HTMLElement | SVGElement import {contextmenu_is_valid_target} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Returns true if valid and narrows the type to HTMLElement | SVGElement.

target

type EventTarget | null

shiftKey

type boolean

returns

boolean

contextmenu_open
#

contextmenu_state.svelte.ts view source

(target: HTMLElement | SVGElement, x: number, y: number, contextmenu: ContextmenuState, options?: ContextmenuOpenOptions | undefined): boolean import {contextmenu_open} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Opens the contextmenu, if appropriate, querying the menu items from the DOM starting at the event target.

target

the leaf element from which to open the contextmenu

type HTMLElement | SVGElement

x

the client (viewport) X coordinate at which to open the contextmenu, typically the mouse clientX - the menu positions with fixed

type number

y

the client (viewport) Y coordinate at which to open the contextmenu, typically the mouse clientY - the menu positions with fixed

type number

contextmenu

the contextmenu state

options?

optional configuration for filtering entries and haptic feedback

type ContextmenuOpenOptions | undefined
optional

returns

boolean

a boolean indicating if the menu was opened or not

contextmenu_open_from_event
#

contextmenu_helpers.ts view source

(e: MouseEvent, contextmenu: ContextmenuState, menu_el: HTMLElement | undefined, options?: ContextmenuOpenFromEventOptions | undefined): boolean import {contextmenu_open_from_event} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Handles a contextmenu event by opening the contextmenu from the event target, unless the target is invalid or inside the open menu element. Swallows the event when the menu opens.

e

the contextmenu event

type MouseEvent

contextmenu

the contextmenu state

menu_el

the open menu element, if any, so events inside it are ignored

type HTMLElement | undefined

options?

offsets and entry filtering forwarded to contextmenu_open

type ContextmenuOpenFromEventOptions | undefined
optional

returns

boolean

whether the contextmenu was opened

contextmenu_popover_attachment
#

contextmenu_helpers.ts view source

(contextmenu: ContextmenuState): Attachment<HTMLElement> import {contextmenu_popover_attachment} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Creates an attachment that shows the contextmenu element as a manual popover, promoting it into the top layer so it paints above modal <dialog> elements (e.g. Dialog.svelte) - top-layer elements paint in insertion order.

Painting is only half of it: a modal dialog also makes everything outside its subtree inert. When the menu opens from inside a modal dialog, the menu element is reparented into that dialog (see contextmenu_resolve_popover_host) so it escapes the inert-ness and stays interactive - top-layer positioning is relative to the viewport regardless of ancestors, so the menu's fixed coordinates are unaffected. The host dialog's close also closes the menu, since the menu's DOM node vanishes with the dialog.

No-ops where the Popover API is unavailable (older browsers, jsdom), falling back to --contextmenu_z_index stacking - the menu then renders beneath and inert to any open modal dialog.

Used with the popover="manual" attribute - "manual" rather than "auto" so opening, closing, and keyboard handling stay fully owned by ContextmenuState.

contextmenu

returns

Attachment<HTMLElement>

contextmenu_resolve_contextmenu_event
#

contextmenu_helpers.ts view source

(e: MouseEvent, contextmenu: ContextmenuState, menu_el: HTMLElement | undefined, open_guard: ContextmenuOpenGuard, options?: ContextmenuOpenFromEventOptions | undefined): boolean import {contextmenu_resolve_contextmenu_event} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Resolves a contextmenu event: opens the menu from the event target when possible (arming open_guard against the gesture's residual events), otherwise lets the native contextmenu show - closing ours unless the press was on the menu itself.

Shared by ContextmenuRoot.svelte and ContextmenuRootForSafariCompatibility.svelte, after their root-specific bypass and longpress handling.

e

the contextmenu event

type MouseEvent

contextmenu

the contextmenu state

menu_el

the open menu element, if any

type HTMLElement | undefined

open_guard

guard that identifies presses belonging to the gesture that opened the menu

options?

offsets and entry filtering forwarded to contextmenu_open

type ContextmenuOpenFromEventOptions | undefined
optional

returns

boolean

whether the contextmenu was opened

contextmenu_resolve_popover_host
#

contextmenu_helpers.ts view source

(target: HTMLElement | SVGElement | undefined): HTMLDialogElement | null import {contextmenu_resolve_popover_host} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Resolves the element that must host the contextmenu popover for it to stay interactive: the modal <dialog> containing target, if any.

A modal dialog makes every element outside its subtree inert, and the top layer fixes painting order, not inertness - so a popover shown from outside the dialog paints above it but receives no pointer or focus events (hit-testing skips inert elements). Only the topmost modal dialog's subtree is interactive, so the dialog containing the menu's open target is by construction the one the menu must join.

target

the element the menu was opened from

type HTMLElement | SVGElement | undefined

returns

HTMLDialogElement | null

the modal dialog to reparent the menu into, or null when the menu doesn't need a host

contextmenu_submenu_context
#

contextmenu_state.svelte.ts view source

{ get: (error_message?: string | undefined) => SubmenuState; get_maybe: () => SubmenuState | undefined; set: (value: SubmenuState) => SubmenuState; } import {contextmenu_submenu_context} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

ContextmenuActivateResult
#

ContextmenuBypassTracker
#

contextmenu_helpers.ts view source

import {ContextmenuBypassTracker} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Tracks the tap-then-longpress gesture that bypasses the Fuz contextmenu, letting users reach the system contextmenu by tapping once then longpressing/rightclicking within a time window.

Plain DOM-event bookkeeping with no reactive state - used only inside event handlers by ContextmenuRoot.svelte and ContextmenuRootForSafariCompatibility.svelte.

bypassed

Set when a tap-then-longpress is detected, telling the next contextmenu event handler to let the system contextmenu through.

type boolean

track

Records a single-touch touchstart at the given coordinates. Detects a tap-then-longpress when the previous tap happened within bypass_window milliseconds and moved less than bypass_move_tolerance pixels, setting bypassed and returning true. Otherwise records the tap for future detection and returns false.

type (x: number, y: number, bypass_window: number, bypass_move_tolerance: number): boolean

x

type number

y

type number

bypass_window

type number

bypass_move_tolerance

type number
returns boolean

consume

Consumes a pending bypass, returning true and resetting all state if bypassed was set, otherwise returning false with no effect so tap tracking is preserved.

type (): boolean

returns boolean

reset

Clears all tracking state including any pending bypass.

type (): void

returns void

ContextmenuEntry
#

ContextmenuEntry.svelte view source

accepts children

import ContextmenuEntry from '@fuzdev/fuz_ui/ContextmenuEntry.svelte';

run

icon?

type string | Snippet<[]> | SvgData
optional

children

type Snippet<[]>

disabled?

type boolean
optional

ContextmenuIcon
#

ContextmenuItemsState
#

contextmenu_state.svelte.ts view source

import {ContextmenuItemsState} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Shared items state for SubmenuState and RootMenuState.

The source of truth is a plain non-reactive array because items register and unregister from component lifecycles that can interleave within a single batch - effect teardowns can observe stale signal values mid-batch, so read-copy-write against the reactive array can lose concurrent registrations (e.g. reopening the menu while it's open). Every mutation publishes an immutable snapshot, preserving the reassignment (not mutation) contract for readers.

add_item

Appends item, publishing a new immutable items.

type (item: ItemState): void

item

returns void

remove_item

Removes item if present, publishing a new immutable items. Safe to call from effect teardown - it reads only the non-reactive source array.

type (item: ItemState): void

item

returns void

items

type readonly ItemState[]

gettersetter

ContextmenuLinkEntry
#

ContextmenuLinkEntry.svelte view source

accepts children

import ContextmenuLinkEntry from '@fuzdev/fuz_ui/ContextmenuLinkEntry.svelte';

href

type string

icon?

type string | Snippet<[]> | SvgData
optional

children?

type Snippet<[]>
optional

disabled?

type boolean
optional

external_rel?

type string
optional default 'noreferrer'

ContextmenuMenu
#

ContextmenuMenu.svelte view source

import ContextmenuMenu from '@fuzdev/fuz_ui/ContextmenuMenu.svelte';

contextmenu

The contextmenu state owned by the root.

open_guard

Guards the menu from the residual events of the gesture that opened it. Owned by the root, which arms it when its gesture detection opens the menu.

link_entry

Snippet for rendering link entries, or null to disable them.

type Snippet<[any]> | null

text_entry

Snippet for rendering copy text entries, or null to disable them.

type Snippet<[any]> | null

separator_entry

Snippet for rendering separator entries, or null to disable them.

type Snippet<[any]> | null

el?

The menu element while opened - bound by the roots for their gesture handlers.

type HTMLElement
optional bindable

ContextmenuOpenFromEventOptions
#

contextmenu_helpers.ts view source

ContextmenuOpenFromEventOptions import type {ContextmenuOpenFromEventOptions} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

inheritance

open_offset_x?

The number of pixels to offset from the pointer X position when opened.

type number

open_offset_y?

The number of pixels to offset from the pointer Y position when opened.

type number

ContextmenuOpenGuard
#

contextmenu_helpers.ts view source

import {ContextmenuOpenGuard} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Guards the menu from the residual events of the gesture that opened it, using exact gesture causality - no timing heuristics or tunable windows.

Touch: when the menu opens during a touch (the native longpress contextmenu event, or the Safari-compat custom longpress), the release of that same gesture must not interact with the menu - an unprevented touchend lets the browser synthesize compatibility mouse events (mousedown/mouseup/click) at the touch point, and the open offsets place the first menu item exactly there, activating it immediately. touchend swallows the release to stop the synthesis, and consume_blocked_click blocks the next click on the menu as belt and braces (iOS can synthesize the click regardless).

Mouse: tap-style input devices (e.g. some touchpads) can register an overlapping primary-button press during the right-click gesture that opened the menu - the compositor serializes the event stream, but the press's hardware timeStamp falls inside the gesture, and its delivery can lag long after the menu opened. Because the open offsets place the first menu item under the pointer, that press's click would activate the entry. press_belongs_to_open_gesture identifies overlap presses exactly: the press's own buttons bitmask shows the secondary button still down at generation time, or its timeStamp predates the release tracked by track_mouseup. No pressed-state is tracked across events deliberately: the native contextmenu's pointer grab swallows the secondary mouseup whenever it opens (right-click on our menu, shift+rightclick - which in Firefox doesn't even fire the contextmenu event), so a tracked flag wedges stuck, while the judged press's own buttons self-corrects. A deliberate right-then-left click - however fast - is sequential in hardware time and is never blocked.

Plain DOM-event bookkeeping with no reactive state - used only inside event handlers by ContextmenuRoot.svelte and ContextmenuRootForSafariCompatibility.svelte.

touchstart

Begins a new gesture on touchstart, clearing stale flags from the previous one.

type (): void

returns void

opened

Arms the touch release guard for the gesture that just opened the menu. Call after a successful open.

type (): void

returns void

track_mouseup

Tracks the physical secondary button's release - call from an always-on window mouseup capture listener. The release may never be delivered (the native contextmenu's pointer grab eats it), which is why press_belongs_to_open_gesture never depends on it alone.

type (e: MouseEvent): void

e

type MouseEvent
returns void

press_belongs_to_open_gesture

Returns true when a press belongs to the gesture that opened the menu rather than being a deliberate response to it: secondary-button presses (their own contextmenu event resolves them), presses during or predating an active touch (synthesized compatibility events), and presses overlapping the secondary button in hardware time - the press's own buttons bitmask shows the secondary button still down at generation time, or its timeStamp predates the release tracked by track_mouseup.

type (e: MouseEvent): boolean

e

type MouseEvent
returns boolean

mousedown_on_menu

Handles a mousedown that landed on the menu element: when a primary-button press belongs to the opening gesture, its click is blocked from activating the entry that the open offsets placed under the pointer. Non-primary presses never arm the blocker - they produce no click, so an armed blocker would linger and eat the next deliberate click on the menu.

type (e: MouseEvent): void

e

type MouseEvent
returns void

touchend

Handles touchend: when the release belongs to the gesture that opened the menu, swallows it (stopping mouse event synthesis) and arms the click blocker, returning true.

type (e: TouchEvent): boolean

e

type TouchEvent
returns boolean

reset

Clears gesture state, including any armed click blocker. Call on touchcancel. The secondary release timestamp persists - it mirrors hardware history, not gesture state.

type (): void

returns void

consume_blocked_click

Consumes an armed click blocker, returning true if the click should be swallowed. Call from the menu element's click capture handler.

type (): boolean

returns boolean

ContextmenuOpenOptions
#

contextmenu_state.svelte.ts view source

ContextmenuOpenOptions import type {ContextmenuOpenOptions} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

link_enabled?

type boolean

text_enabled?

type boolean

separator_enabled?

type boolean

vibrate?

type boolean

ContextmenuParams
#

ContextmenuRoot
#

ContextmenuRoot.svelte view source

accepts children

import ContextmenuRoot from '@fuzdev/fuz_ui/ContextmenuRoot.svelte';

Touch event handler for tap-then-longpress bypass detection and touch-open release guarding.

The bypass gesture allows users to access the native context menu by performing a tap followed by a longpress/rightclick within a specified time window, useful for browser features like text selection when the Fuz contextmenu would normally override it.

Note: preventDefault is not called as we're only observing touch patterns, not intercepting them. The actual bypass happens in on_window_contextmenu.

contextmenu?

The contextmenu state. Each root defaults to its own new instance - pass one to control or observe the menu externally.

optional default new ContextmenuState()

open_offset_x?

The number of pixels to offset from the pointer X position when opened. Useful to ensure the first menu item is immediately under the pointer.

type number
optional default CONTEXTMENU_DEFAULT_OPEN_OFFSET_X

open_offset_y?

The number of pixels to offset from the pointer Y position when opened. Useful to ensure the first menu item is immediately under the pointer.

type number
optional default CONTEXTMENU_DEFAULT_OPEN_OFFSET_Y

bypass_with_tap_then_longpress?

Whether to detect tap-then-longpress to bypass the Fuz contextmenu. This allows access to the system contextmenu by tapping once then rightclicking/long-pressing. Setting to false disables the gesture.

type boolean
optional default true

bypass_window?

The number of milliseconds between taps to detect a gesture that bypasses the Fuz contextmenu. Used only when bypass_with_tap_then_longpress is true. If the duration is too long, it'll detect more false positives and interrupt normal usage, but too short and some people will have difficulty performing the gesture.

type number
optional default CONTEXTMENU_DEFAULT_BYPASS_WINDOW

bypass_move_tolerance?

The number of pixels the pointer can be moved between taps to detect a tap-then-longpress. Used only when bypass_with_tap_then_longpress is true.

type number
optional default CONTEXTMENU_DEFAULT_BYPASS_MOVE_TOLERANCE

scoped?

If true, wraps children with a div and listens to events on it instead of the window.

type boolean
optional default false

link_entry?

Snippet for rendering link entries. Set to null to disable automatic link detection. Defaults to link_entry_default which renders ContextmenuLinkEntry.

type Snippet<[any]>
optional default link_entry_default
snippet parameters
arg0 any

text_entry?

Snippet for rendering copy text entries. Set to null to disable automatic copy text detection. Defaults to text_entry_default which renders ContextmenuTextEntry.

type Snippet<[any]>
optional default text_entry_default
snippet parameters
arg0 any

separator_entry?

Snippet for rendering separator entries. Set to null to disable automatic separator rendering. Defaults to separator_entry_default which renders ContextmenuSeparator.

type Snippet<[any]>
optional default separator_entry_default
snippet parameters
arg0 any

children

The content the root listens over for contextmenu gestures.

type Snippet<[]>

ContextmenuRootBaseProps
#

contextmenu_helpers.ts view source

ContextmenuRootBaseProps import type {ContextmenuRootBaseProps} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

Props shared by ContextmenuRoot.svelte and ContextmenuRootForSafariCompatibility.svelte. Defaults are applied identically by both roots.

contextmenu?

The contextmenu state. Each root defaults to its own new instance - pass one to control or observe the menu externally.

type ContextmenuState

open_offset_x?

The number of pixels to offset from the pointer X position when opened. Useful to ensure the first menu item is immediately under the pointer.

type number

open_offset_y?

The number of pixels to offset from the pointer Y position when opened. Useful to ensure the first menu item is immediately under the pointer.

type number

bypass_with_tap_then_longpress?

Whether to detect tap-then-longpress to bypass the Fuz contextmenu. This allows access to the system contextmenu by tapping once then rightclicking/long-pressing. Setting to false disables the gesture.

type boolean

bypass_window?

The number of milliseconds between taps to detect a gesture that bypasses the Fuz contextmenu. Used only when bypass_with_tap_then_longpress is true. If the duration is too long, it'll detect more false positives and interrupt normal usage, but too short and some people will have difficulty performing the gesture.

type number

bypass_move_tolerance?

The number of pixels the pointer can be moved between taps to detect a tap-then-longpress. Used only when bypass_with_tap_then_longpress is true.

type number

scoped?

If true, wraps children with a div and listens to events on it instead of the window.

type boolean

link_entry?

Snippet for rendering link entries. Set to null to disable automatic link detection. Defaults to link_entry_default which renders ContextmenuLinkEntry.

type Snippet<[ComponentProps<typeof ContextmenuLinkEntry>]> | null

text_entry?

Snippet for rendering copy text entries. Set to null to disable automatic copy text detection. Defaults to text_entry_default which renders ContextmenuTextEntry.

type Snippet<[ComponentProps<typeof ContextmenuTextEntry>]> | null

separator_entry?

Snippet for rendering separator entries. Set to null to disable automatic separator rendering. Defaults to separator_entry_default which renders ContextmenuSeparator.

type Snippet<[ComponentProps<typeof ContextmenuSeparator>]> | null

children

The content the root listens over for contextmenu gestures.

type Snippet

ContextmenuRootForSafariCompatibility
#

ContextmenuRootForSafariCompatibility.svelte view source

accepts children

import ContextmenuRootForSafariCompatibility from '@fuzdev/fuz_ui/ContextmenuRootForSafariCompatibility.svelte';

Adds contextmenu-pending class to body during longpress tracking. This applies aggressive user-select/touch-callout blocking via CSS to give iOS the earliest possible signal to not show selection UI.

contextmenu?

The contextmenu state. Each root defaults to its own new instance - pass one to control or observe the menu externally.

optional default new ContextmenuState()

open_offset_x?

The number of pixels to offset from the pointer X position when opened. Useful to ensure the first menu item is immediately under the pointer.

type number
optional default CONTEXTMENU_DEFAULT_OPEN_OFFSET_X

open_offset_y?

The number of pixels to offset from the pointer Y position when opened. Useful to ensure the first menu item is immediately under the pointer.

type number
optional default CONTEXTMENU_DEFAULT_OPEN_OFFSET_Y

bypass_with_tap_then_longpress?

Whether to detect tap-then-longpress to bypass the Fuz contextmenu. This allows access to the system contextmenu by tapping once then rightclicking/long-pressing. Setting to false disables the gesture.

type boolean
optional default true

bypass_window?

The number of milliseconds between taps to detect a gesture that bypasses the Fuz contextmenu. Used only when bypass_with_tap_then_longpress is true. If the duration is too long, it'll detect more false positives and interrupt normal usage, but too short and some people will have difficulty performing the gesture.

type number
optional default CONTEXTMENU_DEFAULT_BYPASS_WINDOW

bypass_move_tolerance?

The number of pixels the pointer can be moved between taps to detect a tap-then-longpress. Used only when bypass_with_tap_then_longpress is true.

type number
optional default CONTEXTMENU_DEFAULT_BYPASS_MOVE_TOLERANCE

scoped?

If true, wraps children with a div and listens to events on it instead of the window.

type boolean
optional default false

link_entry?

Snippet for rendering link entries. Set to null to disable automatic link detection. Defaults to link_entry_default which renders ContextmenuLinkEntry.

type Snippet<[any]>
optional default link_entry_default
snippet parameters
arg0 any

text_entry?

Snippet for rendering copy text entries. Set to null to disable automatic copy text detection. Defaults to text_entry_default which renders ContextmenuTextEntry.

type Snippet<[any]>
optional default text_entry_default
snippet parameters
arg0 any

separator_entry?

Snippet for rendering separator entries. Set to null to disable automatic separator rendering. Defaults to separator_entry_default which renders ContextmenuSeparator.

type Snippet<[any]>
optional default separator_entry_default
snippet parameters
arg0 any

children

The content the root listens over for contextmenu gestures.

type Snippet<[]>

longpress_move_tolerance?

The number of pixels the pointer can be moved without canceling longpress.

type number
optional default CONTEXTMENU_DEFAULT_LONGPRESS_MOVE_TOLERANCE

longpress_duration?

The number of milliseconds after a touch starts before opening the Fuz contextmenu.

type number
optional default CONTEXTMENU_DEFAULT_LONGPRESS_DURATION

ContextmenuRun
#

contextmenu_state.svelte.ts view source

ContextmenuRun import type {ContextmenuRun} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

(call)

type (): ContextmenuActivateResult | Promise<ContextmenuActivateResult>

returns ContextmenuActivateResult | Promise<ContextmenuActivateResult>

ContextmenuSeparator
#

ContextmenuState
#

contextmenu_state.svelte.ts view source

import {ContextmenuState} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

Manages contextmenu state. See usage with ContextmenuRoot.svelte and Contextmenu.svelte.

see also

layout

type Dimensions

has_custom_layout

If an initial layout is provided, control is deferred externally. Otherwise the layout syncs to the page dimensions.

type boolean

readonly

opened

type boolean

$state.raw

x

type number

$state.raw

y

type number

$state.raw

params

type ReadonlyArray<ContextmenuParams>

$state.raw

error

type string | undefined

$state.raw

target

The element the menu was opened from, while opened, else undefined. Resolves the popover host when the menu opens inside a modal <dialog> - see contextmenu_resolve_popover_host. Deliberately not reactive - read it in event handlers and attachments, not in templates.

type HTMLElement | SVGElement | undefined

root_menu

type RootMenuState

readonly

selections

type ReadonlyArray<ItemState>

$state.raw

can_collapse

type boolean

$derived

can_expand

type boolean

$derived.by

can_select_sibling

Whether select_next and select_previous can move the selection - the selected menu has more than one item.

type boolean

$derived.by

can_activate

type boolean

$derived.by

constructor

type new (options?: ContextmenuStateOptions): ContextmenuState

options

default EMPTY_OBJECT

open

type (params: ContextmenuParams[], x: number, y: number, target?: HTMLElement | SVGElement | undefined): void

params

type ContextmenuParams[]

x

type number

y

type number

target?

type HTMLElement | SVGElement | undefined
optional
returns void

close

type (): void

returns void

reset_items

type (items: readonly ItemState[]): void

items

type readonly ItemState[]
returns void

activate

Activates item - expanding submenus, running entries.

type (item: ItemState): boolean | Promise<ContextmenuActivateResult>

item

returns boolean | Promise<ContextmenuActivateResult>

for async runs, the activation promise; for sync runs, false when the activation didn't run (disabled) or failed (a throw or {ok: false}), else true

activate_selected

Activates the selected item, or if none is selected, selects the first. Returns false without activating when the selected item has unregistered out from under the selection (e.g. its component unmounted).

type (): boolean | void | Promise<ContextmenuActivateResult>

returns boolean | void | Promise<ContextmenuActivateResult>

select

Selects item and its ancestor menus, deselecting everything else.

type (item: ItemState): void

item

returns void

collapse_selected

type (): void

returns void

expand_selected

type (): void

returns void

select_next

type (): void

returns void

select_previous

type (): void

returns void

select_first

type (): void

returns void

select_last

type (): void

returns void

add_entry

Used by ContextmenuEntry.svelte and custom entry components.

type (run: () => ContextmenuRun, disabled?: () => boolean): EntryState

run

type () => ContextmenuRun

disabled

type () => boolean
default () => false
returns EntryState

add_submenu

type (): SubmenuState

returns SubmenuState

ContextmenuStateOptions
#

ContextmenuSubmenu
#

ContextmenuSubmenu.svelte view source

accepts children

import ContextmenuSubmenu from '@fuzdev/fuz_ui/ContextmenuSubmenu.svelte';

icon?

type string | Snippet<[]> | SvgData
optional

menu

type Snippet<[]>

children

type Snippet<[]>

ContextmenuSubmenuTranslateOptions
#

contextmenu_helpers.ts view source

ContextmenuSubmenuTranslateOptions import type {ContextmenuSubmenuTranslateOptions} from '@fuzdev/fuz_ui/contextmenu_helpers.js';

base_x

The submenu's untranslated viewport x - the parent menu's left edge.

type number

base_y

The submenu's untranslated viewport y.

type number

width

The submenu's width.

type number

height

The submenu's height.

type number

parent_width

The parent menu's width.

type number

layout_width

The layout's width.

type number

layout_height

The layout's height.

type number

ContextmenuTextEntry
#

CopyToClipboard
#

CopyToClipboard.svelte view source

accepts children

import CopyToClipboard from '@fuzdev/fuz_ui/CopyToClipboard.svelte';

oncopy?

type ClipboardEventHandler<HTMLButtonElement> & ((text: string | null, e: MouseEvent) => void)
optional

text

type string | null

copied_display_duration?

type number
optional default 1000

allow_copying_empty_string?

type boolean
optional

icon_button?

Defaults to true, ignored if children is provided.

type boolean
optional default true

children?

type Snippet<[copied: boolean, failed: boolean]>
optional
snippet parameters
copied boolean
failed boolean

intersects

OmitStrict<SvelteHTMLElements['button'], 'children'>

create_api_search
#

create_context
#

context_helpers.ts view source

<T>(fallback: () => T): { get: () => T; set: (value?: T | undefined) => T; } import {create_context} from '@fuzdev/fuz_ui/context_helpers.js';

Wraps Svelte's setContext and getContext for better ergonomics. When no value is set in the context, get throws an error and get_maybe returns undefined. If a fallback is provided, the value argument to set is optional and get_maybe is omitted from the type.

fallback

type () => T

overloads

<T>(fallback: () => T): { get: () => T; set: (value?: T | undefined) => T; }

Wraps Svelte's setContext and getContext for better ergonomics. When no value is set in the context, get throws an error and get_maybe returns undefined. If a fallback is provided, the value argument to set is optional and get_maybe is omitted from the type.

fallback () => T
returns { get: () => T; set: (value?: T | undefined) => T; }
<T>(): { get: (error_message?: string | undefined) => T; get_maybe: () => T | undefined; set: (value: T) => T; }
returns { get: (error_message?: string | undefined) => T; get_maybe: () => T | undefined; set: (value: T) => T; }

returns

{ get: () => T; set: (value?: T | undefined) => T; }

generics

create_context<T>
T

create_csp_directives
#

csp.ts view source

(options?: CreateCspDirectivesOptions): CspDirectives import {create_csp_directives} from '@fuzdev/fuz_ui/csp.js';

Builds a CSP directives map for use with SvelteKit's kit.csp.directives option.

Restrictive by default; opt into specific permissions via extend (append) or overrides (replace). Designed to read as an audit log: every user-added source is named at exactly one site in the source code. Library defaults are inherited unless you opt out via replace_defaults.

Validation:

  • Unknown directive keys throw.
  • Extending a ['none'] directive throws (use replace_defaults/overrides to opt in).
  • null for replace_defaults (top-level or per-key) throws โ€” omit the option for library defaults, pass {} to start blank, or use overrides to remove a specific directive.
  • null per-key in extend throws (use overrides for removal).
  • undefined per-key is treated as omitted in all three stages.
  • Non-object entries in extend (null, undefined, primitives) throw with a friendly error.
  • Output is validated to ensure 'none' never appears alongside other tokens, that no directive ends up with an empty array (use ['none'] to forbid all), and that every source array contains only strings.

Things like rendering to a string are out of scope and left to SvelteKit.

options

default {}

returns

CspDirectives

create_declaration_contextmenu
#

create_module_contextmenu
#

module_contextmenu.ts view source

(module: Module): ContextmenuParams[] import {create_module_contextmenu} from '@fuzdev/fuz_ui/module_contextmenu.js';

module

type Module

returns

ContextmenuParams[]

create_module_declaration_search
#

CreateCspDirectivesOptions
#

csp.ts view source

CreateCspDirectivesOptions import type {CreateCspDirectivesOptions} from '@fuzdev/fuz_ui/csp.js';

Options for create_csp_directives.

The pipeline runs in three stages:

  1. replace_defaults sets the starting state (defaults to csp_directive_value_defaults).
  2. extend appends sources per directive, layered left to right.
  3. overrides replaces or removes per-directive values as a final pass.

replace_defaults?

Starting values per directive โ€” *wholesale replaces* the library defaults.

  • Omitted: uses csp_directive_value_defaults (the curated library defaults).
  • Provided: exactly the directives you list, nothing else inherited. Anything not listed is absent from the starting state โ€” including security defaults like default-src: 'none'. To tweak a single directive while keeping the rest, use extend (to append) or overrides (to replace per-key) instead.
  • {}: starts blank with no directives.

null is not accepted (top-level or per-key) โ€” omit the option to use library defaults, pass {} to start blank, or use overrides to remove a specific directive.

Per-key undefined is treated as omitted (no-op).

type Partial<typeof csp_directive_value_defaults>

extend?

Sources to append per directive, layered left to right. Each entry is a partial map; values append to the result of replace_defaults and prior entries. Values are deduplicated within and across layers.

Only array-typed directives can be extended (boolean directives like upgrade-insecure-requests are excluded by the type). Throws if any entry attempts to extend a directive whose current value is ['none'] โ€” use replace_defaults or overrides to opt into default-deny directives.

Per-key undefined is treated as omitted (no-op) โ€” supports conditional patterns like {'connect-src': is_prod ? [API_URL] : undefined}. Per-key null throws โ€” extend only appends; use overrides: { 'X': null } to remove a directive.

type ReadonlyArray<CspDirectiveSourcesMap>

overrides?

Final-pass per-directive overrides. Replaces the directive value or removes it entirely. Pass null to remove a directive from the output.

Highest precedence โ€” wins over replace_defaults and extend.

Per-key undefined is treated as omitted (no-op) โ€” distinct from null, which removes.

type { [K in CspDirective]?: CspDirectiveValue<K> | null; }

csp_directive_spec_by_name
#

csp.ts view source

Map<keyof CspDirectives, CspDirectiveSpec> import {csp_directive_spec_by_name} from '@fuzdev/fuz_ui/csp.js';

csp_directive_specs
#

csp_directive_value_defaults
#

csp.ts view source

Partial<{ "default-src": (CspSource | CspActionSource)[]; "script-src": (CspSource | CspActionSource)[]; "script-src-elem": CspSources; ... 20 more ...; sandbox: ("allow-downloads-without-user-activation" | ... 11 more ... | "allow-top-navigation-by-user-activation")[]; }> import {csp_directive_value_defaults} from '@fuzdev/fuz_ui/csp.js';

The library CSP directive defaults โ€” directives enabled out of the box. Prioritizes safety but loosens around media and styles, relying on defense-in-depth. WASM compile is allowed ('wasm-unsafe-eval' on script-src and worker-src); eval is not.

Directives not listed here (report-to, require-trusted-types-for, trusted-types, sandbox) are intentionally absent by default โ€” opt in via replace_defaults or overrides.

Customizable via CreateCspDirectivesOptions.replace_defaults.

csp_directives_of_fuzdev
#

csp_of_fuzdev.ts view source

Partial<CspDirectives> import {csp_directives_of_fuzdev} from '@fuzdev/fuz_ui/csp_of_fuzdev.js';

Per-directive sources that allow full interop between fuzdev/sister sites (*.fuz.dev, *.zzz.software) โ€” loading assets and APIs from each other, and iframing in both directions.

Pass into create_csp_directives({extend: [csp_directives_of_fuzdev]}). Intended for sites within the ecosystem; external apps usually want a narrower, hand-written allow-list.

Deliberately scoped โ€” script-src, style-src, worker-src, etc. are not granted, even between sister sites. Add at the call site if a specific page needs them.

CspActionSource
#

csp.ts view source

CspActionSource import type {CspActionSource} from '@fuzdev/fuz_ui/csp.js';

CspBaseSource
#

csp.ts view source

CspBaseSource import type {CspBaseSource} from '@fuzdev/fuz_ui/csp.js';

CspCryptoSource
#

csp.ts view source

`nonce-${string}` | `sha256-${string}` | `sha384-${string}` | `sha512-${string}` import type {CspCryptoSource} from '@fuzdev/fuz_ui/csp.js';

CspDirective
#

csp.ts view source

keyof CspDirectives import type {CspDirective} from '@fuzdev/fuz_ui/csp.js';

CspDirectives
#

csp.ts view source

CspDirectives import type {CspDirectives} from '@fuzdev/fuz_ui/csp.js';

sandbox?

type Array< | 'allow-downloads-without-user-activation' | 'allow-forms' | 'allow-modals' | 'allow-orientation-lock' | 'allow-pointer-lock' | 'allow-popups' | 'allow-popups-to-escape-sandbox' | 'allow-presentation' | 'allow-same-origin' | 'allow-scripts' | 'allow-storage-access-by-user-activation' | 'allow-top-navigation' | 'allow-top-navigation-by-user-activation' >

CspDirectiveSourcesMap
#

csp.ts view source

CspDirectiveSourcesMap import type {CspDirectiveSourcesMap} from '@fuzdev/fuz_ui/csp.js';

Per-directive map of source arrays โ€” accepted as extend layer entries. Excludes directives like 'upgrade-insecure-requests' (boolean) that can't be appended to.

CspDirectiveSpec
#

csp.ts view source

CspDirectiveSpec import type {CspDirectiveSpec} from '@fuzdev/fuz_ui/csp.js';

name

type CspDirective

fallback

type Array<CspDirective> | null

fallback_of

type Array<CspDirective> | null

CspDirectiveValue
#

csp.ts view source

CspDirectiveValue<T> import type {CspDirectiveValue} from '@fuzdev/fuz_ui/csp.js';

generics

CspDirectiveValue<T extends CspDirective>
T
constraint CspDirective

CspFrameSource
#

csp.ts view source

CspFrameSource import type {CspFrameSource} from '@fuzdev/fuz_ui/csp.js';

CspHostNameScheme
#

csp.ts view source

CspHostNameScheme import type {CspHostNameScheme} from '@fuzdev/fuz_ui/csp.js';

CspHostProtocolSchemes
#

csp.ts view source

CspHostProtocolSchemes import type {CspHostProtocolSchemes} from '@fuzdev/fuz_ui/csp.js';

CspHostSource
#

csp.ts view source

`${string}.${string}` | "localhost" | `${string}.${string}:${number}` | `${string}.${string}:*` | `localhost:${number}` | "localhost:*" | `${string}://${string}.${string}` | `${string}://${string}.${string}:${number}` | `${string}://${string}.${string}:*` | `${string}://localhost` | `${string}://localhost:${number}`... import type {CspHostSource} from '@fuzdev/fuz_ui/csp.js';

CspPortScheme
#

csp.ts view source

CspPortScheme import type {CspPortScheme} from '@fuzdev/fuz_ui/csp.js';

CspSchemeSource
#

csp.ts view source

CspSchemeSource import type {CspSchemeSource} from '@fuzdev/fuz_ui/csp.js';

CspSource
#

CspSources
#

csp.ts view source

CspSources import type {CspSources} from '@fuzdev/fuz_ui/csp.js';

Declaration
#

declaration.svelte.ts view source

import {Declaration} from '@fuzdev/fuz_ui/declaration.svelte.js';

Rich runtime representation of an exported declaration.

Wraps svelte-docinfo's DeclarationJson discriminated union (on kind) with Svelte 5 reactive derivations and computed URLs. Kind-specific fields are accessed via the field() helper since not all fields exist on all variants.

see also

module

type Module

readonly $state.raw

declaration_json

type DeclarationJsonInput

readonly $state.raw

library

type Library

$derived

module_path

Module path where this declaration is defined.

type string

$derived

name

type string

$derived

kind

type "function" | "enum" | "type" | "class" | "variable" | "interface" | "component" | "snippet" | "namespace"

$derived

url_github

GitHub source URL with line number.

type string | undefined

$derived

url_api

API documentation URL.

type string

$derived

import_statement

Generated TypeScript import statement.

type string

$derived

url_api_full

Public documentation link (if homepage_url is available).

type string | undefined

$derived

display_name

Display name with generic parameters.

type string

$derived

type_signature

type string | undefined

$derived

doc_comment

type string | undefined

$derived

deprecated_message

type string | undefined

$derived

parameters

type { name: string; type: string; optional?: boolean | undefined; rest?: boolean | undefined; description?: string | undefined; defaultValue?: string | undefined; propertyDescriptions?: Record<...> | undefined; }[] | undefined

$derived

props

type { name: string; type: string; examples?: string[] | undefined; deprecatedMessage?: string | undefined; seeAlso?: string[] | undefined; throws?: { description: string; type?: string | undefined; }[] | undefined; ... 5 more ...; parameters?: { ...; }[] | undefined; }[] | undefined

$derived

return_type

type string | undefined

$derived

return_description

type string | undefined

$derived

generic_params

type { name: string; constraint?: string | undefined; defaultType?: string | undefined; }[]

$derived

extends_type

type string | string[] | undefined

$derived

implements_types

type string[] | undefined

$derived

throws

type { description: string; type?: string | undefined; }[]

$derived

since

type string | undefined

$derived

examples

type string[]

$derived

see_also

type string[]

$derived

members

Nested members for classes, interfaces, types, and enums.

type ({ kind: "function"; name: string; optional?: boolean | undefined; returnType?: string | undefined; returnDescription?: string | undefined; parameters?: { name: string; type: string; ... 4 more ...; propertyDescriptions?: Record<...> | undefined; }[] | undefined; ... 12 more ...; genericParams?: { ...; }[] | undefin...

$derived

intersects

Intersection types whose properties are external (filtered out of props/members). Present on component and type kinds.

type string[] | undefined

$derived

accepts_children

Whether a component accepts children via props or template usage. Present on component kind only.

type boolean | undefined

$derived

overloads

Function overload signatures when multiple public overloads exist. Present on function and snippet kinds, and on function/constructor members.

type { typeSignature: string; parameters?: { name: string; type: string; optional?: boolean | undefined; rest?: boolean | undefined; description?: string | undefined; defaultValue?: string | undefined; propertyDescriptions?: Record<...> | undefined; }[] | undefined; returnType?: string | undefined; genericParams?: { ...;...

$derived

alias_of

Re-export alias info when this declaration is a renamed re-export.

type { module: string; name: string; } | { module: string; name: string; } | { module: string; name: string; } | { module: string; name: string; } | { module: string; name: string; } | { module: string; name: string; } | { ...; } | { ...; } | { ...; } | undefined

$derived

also_exported_from

Other modules that also export this declaration (re-export paths relative to src/lib). Absent when only exported from its defining module. The back-link of those modules' Module.re_exports edges.

type string[] | undefined

$derived

mutates

Mutation documentation from @mutates tags, mapping parameter names to descriptions.

type Record<string, string> | undefined

$derived

reactivity

Svelte reactivity flavor ($state, $state.raw, $derived, $derived.by) when this variable is initialized with a value-producing rune. Present on variable kind only.

type "$state" | "$state.raw" | "$derived" | "$derived.by" | undefined

$derived

has_examples

type boolean

$derived

is_deprecated

type boolean

$derived

has_documentation

type boolean

$derived

has_parameters

type boolean

$derived

has_props

type boolean

$derived

has_generics

type boolean

$derived

constructor

type new (module: Module, declaration_json: { kind: "function"; name: string; returnType?: string | undefined; returnDescription?: string | undefined; parameters?: { name: string; type: string; optional?: boolean | undefined; rest?: boolean | undefined; description?: string | undefined; defaultValue?: string | undefined; propertyDescriptions?: Record<...> | undefined; }[] | undefined; ... 14 more ...; genericParams?: { ...; }[] | undefined; } | ... 7 more ... | { ...; }): Declaration

module

type Module

declaration_json

type { kind: "function"; name: string; returnType?: string | undefined; returnDescription?: string | undefined; parameters?: { name: string; type: string; optional?: boolean | undefined; rest?: boolean | undefined; description?: string | undefined; defaultValue?: string | undefined; propertyDescriptions?: Record<...> | u...

DeclarationDetail
#

DeclarationDetail.svelte view source

import DeclarationDetail from '@fuzdev/fuz_ui/DeclarationDetail.svelte';

Renders the full detail view for an exported declaration. Handles all svelte-docinfo declaration kinds (function, class, interface, type, variable, enum, component, snippet) and their kind-specific fields including parameters, props, members, overloads, intersects, and more.

declaration

see also

DeclarationLink
#

DeclarationSearchState
#

api_search.svelte.ts view source

DeclarationSearchState import type {DeclarationSearchState} from '@fuzdev/fuz_ui/api_search.svelte.js';

query

type string

all

type Array<Declaration>

filtered

type Array<Declaration>

Details
#

Details.svelte view source

accepts children

import Details from '@fuzdev/fuz_ui/Details.svelte';

open?

type boolean
optional bindable

children

type Snippet<[]>

eager?

Children are lazily rendered by default, enabling transitions and improving performance, sometimes significantly. Pass true to render children eagerly to gain ctrl+f functionality while trading away the benefits. Consider a <details> element instead of making this component eager.

type boolean
optional

summary

type string | Snippet<[]>

summary_attrs?

type HTMLAttributes<HTMLElement>
optional

intersects

SvelteHTMLElements['details']

Dialog
#

Dialog.svelte view source

accepts children

import Dialog from '@fuzdev/fuz_ui/Dialog.svelte';

show?

Whether the dialog is shown. When the <dialog> mounts it opens via showModal(); when it unmounts it closes. Defaults to true so the {#if opened}<Dialog>...</Dialog>{/if} pattern works without passing show -- mounting the component opens the dialog. Pass show={opened} to skip the outer {#if} and let the component manage its own conditional rendering.

type boolean
optional default true

align?

How the content is aligned in the viewport. center vertically centers it; top aligns it to the top and grows downward, which avoids jank when the content's height changes.

optional default 'center'

dismissable?

Whether clicking outside the content (see content_selector) closes the dialog. Escape closes it regardless of this.

type boolean
optional default true

content_selector?

Fallback selector for a content surface you render in children yourself (rather than via DialogContent, which self-registers). When dismissable, a press that isn't inside a registered surface (e.g. DialogContent, which self-registers) and doesn't match this selector closes the dialog. Defaults to the fuz_css .pane card; set it to match your surface's outermost element -- with no registered surface and no match, presses anywhere close the dialog.

type string
optional default '.pane'

onbeforeclose?

Called before a user-initiated close (Escape, click-outside, or close). Return false to veto and keep the dialog open -- e.g. to confirm discarding unsaved changes. Programmatic close via show={false} bypasses this.

type () => boolean | void
optional

onclose?

Called when the dialog closes -- via Escape, click-outside, or close. Use it to sync your own open state, e.g. onclose={() => (opened = false)}. Like onbeforeclose, programmatic close via show={false} bypasses this.

type () => void
optional

children

Rendered inside the dialog overlay. Receives the DialogContext (e.g. {close}); pair with DialogContent or render your own surface.

type Snippet<[dialog: DialogContext]>
snippet parameters

intersects

Omit<SvelteHTMLElements['dialog'], 'children' | 'onclose'>

dialog_aligns
#

dialog_context
#

dialog.ts view source

{ get: (error_message?: string | undefined) => DialogContext; get_maybe: () => DialogContext | undefined; set: (value: DialogContext) => DialogContext; } import {dialog_context} from '@fuzdev/fuz_ui/dialog.js';

DialogAlign
#

DialogCloseButtonAttrs
#

dialog.ts view source

DialogCloseButtonAttrs import type {DialogCloseButtonAttrs} from '@fuzdev/fuz_ui/dialog.js';

The attrs a custom DialogContent close_button snippet receives. Spread onto a <button> to inherit the corner-anchored close button.

type

type 'button'

class

type string

style

type string

onclick

type DialogContext['close']

title

type string

DialogContent
#

DialogContent.svelte view source

accepts children

import DialogContent from '@fuzdev/fuz_ui/DialogContent.svelte';

padding?

The content surface's padding, set as an inline style. Defaults to var(--space_xl) for a comfortable gutter between the card edge and its content. Set to '' or '0' for no padding (e.g. a flush image or a surface that manages its own spacing).

type string
optional default 'var(--space_xl)'

pane?

Whether to apply the fuz_css .pane card class to the content surface -- its opaque background, shadow, and rounded corners. true (the default) is the standard dialog card; false gives a chromeless surface. Either way the surface registers with Dialog, so click-outside-to-close keeps working.

type boolean
optional default true

gutter?

The gutter around the .pane card -- its outer margin, and so the area outside the card where a press dismisses the dialog. Set to '' or '0' to remove.

type string
optional default 'var(--space_xl3)'

max_width?

The card's max width. The card shrinks to its content and is capped here, so narrow content stays narrow while wide content doesn't sprawl. Set to '' for no cap (pure shrink-to-content).

type string
optional default 'var(--distance_md)'

close_button?

The close button floating just outside the content surface's top-right corner. true (the default) renders an absolutely-positioned .sm.plain.icon_button that closes the dialog; false removes it. It renders after children, so a content control (or an autofocus element) takes initial focus on open rather than the close button.

Pass a Snippet to render your own. It receives attrs (DialogCloseButtonAttrs) carrying the default's placement, styling, a11y, and onclick (closes the dialog), plus the DialogContext (e.g. {close}). Spread attrs onto a <button> to inherit the corner anchoring and override only what differs (e.g. the glyph), or drop it to place the button freely. The surface is a containing block (position: relative), so an absolutely-positioned custom button anchors to it.

type boolean | Snippet<[attrs: DialogCloseButtonAttrs, dialog: DialogContext]>
optional default true

children

Rendered inside the content surface. Receives the DialogContext (e.g. {close}) so content can close the dialog without reaching into Dialog's children snippet.

The default close_button renders as the surface's last child (so a content control or autofocus element wins initial focus over it). Because it's a real child, it throws off universal child-spacing selectors: your content's last element is no longer :last-child (so > :not(:last-child) matches it and > :last-child skips it), and > * + * matches the button itself. Either scope spacing to your own elements or a class, or wrap your content in a single element so its child selectors no longer see the button.

type Snippet<[dialog: DialogContext]>
snippet parameters

intersects

Omit<HTMLAttributes<HTMLDivElement>, 'children'>

DialogContext
#

dialog.ts view source

DialogContext import type {DialogContext} from '@fuzdev/fuz_ui/dialog.js';

Set by Dialog, read by DialogContent. Lets the content surface close the dialog without the consumer threading close through the children snippet.

close

Closes the dialog. When passed an event it's swallowed (default-prevented and propagation-stopped) before closing.

type (e?: Event) => void

register_surface

Registers a content-surface element so a press inside it isn't treated as an outside-dismiss. The surface is known by node identity, independent of any class. Use as an attachment on the surface: {@attach register_surface}. Returns a cleanup that unregisters on unmount.

type (element: Element) => () => void

Dimensions
#

dimensions.svelte.ts view source

import {Dimensions} from '@fuzdev/fuz_ui/dimensions.svelte.js';

width

type number

$state.raw

height

type number

$state.raw

DisconnectState
#

intersect.svelte.ts view source

DisconnectState import type {DisconnectState} from '@fuzdev/fuz_ui/intersect.svelte.js';

intersecting

type boolean

intersections

type number

el

type HTMLElement | SVGElement

observer

type IntersectionObserver

Docs
#

Docs.svelte view source

accepts children

import Docs from '@fuzdev/fuz_ui/Docs.svelte';

tomes

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }[]

children

type Snippet<[]>

DOCS_API_PATH
#

docs_links_context
#

DOCS_PATH
#

docs_helpers.svelte.ts view source

"/docs" | "/" | "/about" | "/docs/Alert" | "/docs/Breadcrumb" | "/docs/Breadcrumb/a" | "/docs/Breadcrumb/a/b" | "/docs/Breadcrumb/a/b/c" | "/docs/Breadcrumb/a/b/c/d" | "/docs/Card" | ... 57 more ... | `/${string}${`/docs/api/${string}` & {}}` import {DOCS_PATH} from '@fuzdev/fuz_ui/docs_helpers.svelte.js';

DOCS_PATH_DEFAULT
#

docs_slugify
#

docs_helpers.svelte.ts view source

(str: string): string import {docs_slugify} from '@fuzdev/fuz_ui/docs_helpers.svelte.js';

Convert a string to a URL-safe fragment identifier, preserving case. Unlike slugify from @fuzdev/fuz_util/path.ts which lowercases, this keeps the original casing so API declarations like AsyncStatus and async_status produce distinct fragment IDs. Used by the Tome documentation system for heading and section anchors.

str

the string to convert to a fragment

type string

returns

string

a URL-safe fragment identifier with case preserved

DocsContent
#

DocsContent.svelte view source

accepts children

import DocsContent from '@fuzdev/fuz_ui/DocsContent.svelte';

tomes

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }[]

library

type Library

repo_name?

type Snippet<[repo_name: string]>
optional
snippet parameters
repo_name string

content?

type Snippet<[]>
optional

header?

type Snippet<[]>
optional

intersects

SvelteHTMLElements['div']

DocsFooter
#

DocsFooter.svelte view source

accepts children

import DocsFooter from '@fuzdev/fuz_ui/DocsFooter.svelte';

repo_url?

Link target for the logo, e.g. the project's source repository.

type Url
optional

root_url?

type Url
optional default null

logo?

Overrides the default GitHub logo mark, e.g. for repos hosted elsewhere.

type Snippet<[]>
optional

logo_header?

type Snippet<[]>
optional

logo_footer?

type Snippet<[]>
optional

intersects

SvelteHTMLElements['footer']

DocsLink
#

DocsLinkInfo
#

docs_helpers.svelte.ts view source

DocsLinkInfo import type {DocsLinkInfo} from '@fuzdev/fuz_ui/docs_helpers.svelte.js';

id

type string

text

type string

fragment

type string

tag

type DocsLinkTag | undefined

depth

type number

order

type number

parent_id

type string | undefined

DocsLinks
#

DocsLinkTag
#

DocsList
#

DocsList.svelte view source

accepts children

import DocsList from '@fuzdev/fuz_ui/DocsList.svelte';

children

type Snippet<[]>

expand_width?

type boolean
optional default false

margin?

type boolean
optional default true

intersects

SvelteHTMLElements['div']

DocsMenu
#

DocsMenu.svelte view source

accepts children

import DocsMenu from '@fuzdev/fuz_ui/DocsMenu.svelte';

children?

type Snippet<[]> & Snippet<[category: string]>
optional

tomes

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }[]

expand_width?

type boolean
optional default false

intersects

SvelteHTMLElements['div']

DocsMenuHeader
#

DocsMenuHeader.svelte view source

accepts children

import DocsMenuHeader from '@fuzdev/fuz_ui/DocsMenuHeader.svelte';

children

type Snippet<[]>

intersects

SvelteHTMLElements['h4']

DocsPageLinks
#

DocsPrimaryNav
#

DocsPrimaryNav.svelte view source

accepts children

import DocsPrimaryNav from '@fuzdev/fuz_ui/DocsPrimaryNav.svelte';

children?

type Snippet<[]>
optional

intersects

SvelteHTMLElements['div']

DocsSearch
#

DocsSearch.svelte view source

accepts children

import DocsSearch from '@fuzdev/fuz_ui/DocsSearch.svelte';

placeholder?

type string
optional default 'search modules and declarations...'

module_count?

Total number of modules.

type number
optional

declaration_count?

Total number of declarations.

type number
optional

filtered_module_count?

Number of modules after filtering.

type number
optional

filtered_declaration_count?

Number of declarations after filtering.

type number
optional

search_query

type string
bindable

intersects

SvelteHTMLElements['input']

DocsSecondaryNav
#

DocsSecondaryNav.svelte view source

accepts children

import DocsSecondaryNav from '@fuzdev/fuz_ui/DocsSecondaryNav.svelte';

tomes

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }[]

sidebar?

type boolean
optional default true

intersects

SvelteHTMLElements['aside']

DocsTertiaryNav
#

DocsTertiaryNav.svelte view source

accepts children

import DocsTertiaryNav from '@fuzdev/fuz_ui/DocsTertiaryNav.svelte';

tomes

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }[]

tomes_by_slug

type Map<string, { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }>

sidebar?

type boolean
optional default true

intersects

SvelteHTMLElements['aside']

EcosystemLinks
#

EcosystemLinksPanel
#

EcosystemLinksPanel.svelte view source

accepts children

import EcosystemLinksPanel from '@fuzdev/fuz_ui/EcosystemLinksPanel.svelte';

children?

type Snippet<[]>
optional

intersects

SvelteHTMLElements['section']

effect_with_count
#

rune_helpers.svelte.ts view source

(fn: (count: number) => void, initial?: number): void import {effect_with_count} from '@fuzdev/fuz_ui/rune_helpers.svelte.js';

Runs fn in an $effect, passing true as the skip argument for the first count runs. Calls fn even when skipping so callers can read any dependent signals.

fn

type (count: number) => void

initial

type number
default 0

returns

void

EntryState
#

contextmenu_state.svelte.ts view source

import {EntryState} from '@fuzdev/fuz_ui/contextmenu_state.svelte.js';

is_menu

type false

readonly

menu

type SubmenuState | RootMenuState

readonly

run

type () => ContextmenuRun

readonly

disabled

type () => boolean

readonly

selected

type boolean

$state.raw

pending

type boolean

$state.raw

error_message

type string | null

$state.raw

promise

type Promise<ContextmenuActivateResult> | null

$state.raw

constructor

type new (menu: SubmenuState | RootMenuState, run: () => ContextmenuRun, disabled?: () => boolean): EntryState

menu

type SubmenuState | RootMenuState

run

type () => ContextmenuRun

disabled

type () => boolean
default () => false

FUZ_DEV_URL
#

constants.ts view source

"https://www.fuz.dev/" import {FUZ_DEV_URL} from '@fuzdev/fuz_ui/constants.js';

The Fuz ecosystem home url, e.g. for DocsFooter's root_url.

GithubLink
#

Glyph
#

Glyph.svelte view source

accepts children

import Glyph from '@fuzdev/fuz_ui/Glyph.svelte';

glyph

type string

size?

type string
optional

intersects

SvelteHTMLElements['span']

Hashlink
#

HueInput
#

HueInput.svelte view source

accepts children

import HueInput from '@fuzdev/fuz_ui/HueInput.svelte';

children?

type Snippet<[]>
optional

value?

type Hue
optional bindable default 180

intersects

SvelteHTMLElements['div']

icon_action
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_action} from '@fuzdev/fuz_ui/icons.js';

icon_action_local_call
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_action_local_call} from '@fuzdev/fuz_ui/icons.js';

icon_action_remote_notification
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_action_remote_notification} from '@fuzdev/fuz_ui/icons.js';

icon_action_request_response
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_action_request_response} from '@fuzdev/fuz_ui/icons.js';

icon_add
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_add} from '@fuzdev/fuz_ui/icons.js';

icon_arrow_left
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_arrow_left} from '@fuzdev/fuz_ui/icons.js';

icon_arrow_right
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_arrow_right} from '@fuzdev/fuz_ui/icons.js';

icon_backend
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_backend} from '@fuzdev/fuz_ui/icons.js';

icon_cancel
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_cancel} from '@fuzdev/fuz_ui/icons.js';

icon_capability
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_capability} from '@fuzdev/fuz_ui/icons.js';

icon_chat
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_chat} from '@fuzdev/fuz_ui/icons.js';

icon_checkmark
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_checkmark} from '@fuzdev/fuz_ui/icons.js';

icon_checkmark_heavy
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_checkmark_heavy} from '@fuzdev/fuz_ui/icons.js';

icon_chevron_down
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_chevron_down} from '@fuzdev/fuz_ui/icons.js';

icon_chevron_left
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_chevron_left} from '@fuzdev/fuz_ui/icons.js';

icon_chevron_right
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_chevron_right} from '@fuzdev/fuz_ui/icons.js';

icon_chevron_up
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_chevron_up} from '@fuzdev/fuz_ui/icons.js';

icon_clear
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_clear} from '@fuzdev/fuz_ui/icons.js';

icon_close
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_close} from '@fuzdev/fuz_ui/icons.js';

icon_connect
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_connect} from '@fuzdev/fuz_ui/icons.js';

icon_copy
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_copy} from '@fuzdev/fuz_ui/icons.js';

icon_create_directory
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_create_directory} from '@fuzdev/fuz_ui/icons.js';

icon_create_file
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_create_file} from '@fuzdev/fuz_ui/icons.js';

icon_delete
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_delete} from '@fuzdev/fuz_ui/icons.js';

icon_desk
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_desk} from '@fuzdev/fuz_ui/icons.js';

icon_directory
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_directory} from '@fuzdev/fuz_ui/icons.js';

icon_disconnect
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_disconnect} from '@fuzdev/fuz_ui/icons.js';

icon_domain
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_domain} from '@fuzdev/fuz_ui/icons.js';

icon_double_chevron_left
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_double_chevron_left} from '@fuzdev/fuz_ui/icons.js';

icon_double_chevron_right
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_double_chevron_right} from '@fuzdev/fuz_ui/icons.js';

icon_download
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_download} from '@fuzdev/fuz_ui/icons.js';

icon_drag
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_drag} from '@fuzdev/fuz_ui/icons.js';

icon_edit
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_edit} from '@fuzdev/fuz_ui/icons.js';

icon_error
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_error} from '@fuzdev/fuz_ui/icons.js';

icon_external_link
#

icon_file
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_file} from '@fuzdev/fuz_ui/icons.js';

icon_heartbeat
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_heartbeat} from '@fuzdev/fuz_ui/icons.js';

icon_idea
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_idea} from '@fuzdev/fuz_ui/icons.js';

icon_important
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_important} from '@fuzdev/fuz_ui/icons.js';

icon_info
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_info} from '@fuzdev/fuz_ui/icons.js';

icon_link
#

icon_list
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_list} from '@fuzdev/fuz_ui/icons.js';

icon_log
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_log} from '@fuzdev/fuz_ui/icons.js';

icon_model
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_model} from '@fuzdev/fuz_ui/icons.js';

icon_page
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_page} from '@fuzdev/fuz_ui/icons.js';

icon_part
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_part} from '@fuzdev/fuz_ui/icons.js';

icon_paste
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_paste} from '@fuzdev/fuz_ui/icons.js';

icon_pause
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_pause} from '@fuzdev/fuz_ui/icons.js';

icon_pin
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_pin} from '@fuzdev/fuz_ui/icons.js';

icon_ping
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_ping} from '@fuzdev/fuz_ui/icons.js';

icon_placeholder
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_placeholder} from '@fuzdev/fuz_ui/icons.js';

icon_play
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_play} from '@fuzdev/fuz_ui/icons.js';

icon_preview
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_preview} from '@fuzdev/fuz_ui/icons.js';

icon_project
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_project} from '@fuzdev/fuz_ui/icons.js';

icon_prompt
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_prompt} from '@fuzdev/fuz_ui/icons.js';

icon_provider
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_provider} from '@fuzdev/fuz_ui/icons.js';

icon_refresh
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_refresh} from '@fuzdev/fuz_ui/icons.js';

icon_remove
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_remove} from '@fuzdev/fuz_ui/icons.js';

icon_reset
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_reset} from '@fuzdev/fuz_ui/icons.js';

icon_response
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_response} from '@fuzdev/fuz_ui/icons.js';

icon_restore
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_restore} from '@fuzdev/fuz_ui/icons.js';

icon_retry
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_retry} from '@fuzdev/fuz_ui/icons.js';

icon_send
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_send} from '@fuzdev/fuz_ui/icons.js';

icon_session
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_session} from '@fuzdev/fuz_ui/icons.js';

icon_settings
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_settings} from '@fuzdev/fuz_ui/icons.js';

icon_sort
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_sort} from '@fuzdev/fuz_ui/icons.js';

icon_space
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_space} from '@fuzdev/fuz_ui/icons.js';

icon_stop
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_stop} from '@fuzdev/fuz_ui/icons.js';

icon_tab
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_tab} from '@fuzdev/fuz_ui/icons.js';

icon_terminal
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_terminal} from '@fuzdev/fuz_ui/icons.js';

icon_thread
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_thread} from '@fuzdev/fuz_ui/icons.js';

icon_turn
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_turn} from '@fuzdev/fuz_ui/icons.js';

icon_unknown
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_unknown} from '@fuzdev/fuz_ui/icons.js';

icon_upload
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_upload} from '@fuzdev/fuz_ui/icons.js';

icon_view
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_view} from '@fuzdev/fuz_ui/icons.js';

icon_workspace
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_workspace} from '@fuzdev/fuz_ui/icons.js';

icon_xmark
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_xmark} from '@fuzdev/fuz_ui/icons.js';

icon_xmark_heavy
#

icons.ts view source

{ label: string; paths: { d: string; }[]; } import {icon_xmark_heavy} from '@fuzdev/fuz_ui/icons.js';

ImgOrSvg
#

ImgOrSvg.svelte view source

accepts children

import ImgOrSvg from '@fuzdev/fuz_ui/ImgOrSvg.svelte';

height?

type string
optional

src

type string

width?

type string
optional

label?

type string
optional

size?

Sets both the width and height of the svg. Overridden by the width and height props.

type string
optional

svg_attrs?

type SVGAttributes<SVGSVGElement>
optional

img_attrs?

type HTMLImgAttributes
optional

intersects

SvelteHTMLElements['img'],SvelteHTMLElements['svg']

intersect
#

intersect.svelte.ts view source

(get_params: () => IntersectParamsOrCallback | null | undefined): Attachment<HTMLElement | SVGElement> import {intersect} from '@fuzdev/fuz_ui/intersect.svelte.js';

Creates an attachment that observes element viewport intersection. Uses the lazy function pattern to optimize reactivity: callbacks can update without recreating the observer, preserving state.

get_params

function that returns callback, params object, or nullish to disable

type () => IntersectParamsOrCallback | null | undefined

returns

Attachment<HTMLElement | SVGElement>

IntersectParams
#

intersect.svelte.ts view source

IntersectParams import type {IntersectParams} from '@fuzdev/fuz_ui/intersect.svelte.js';

onintersect?

Called when the element enters or leaves the viewport until disconnected.

type OnIntersect

ondisconnect?

Called when the attachment's observer is disconnected, either by the user calling disconnect or the attachment being destroyed.

type OnDisconnect

count?

A value of 1 disconnects after el enters and leaves the viewport one time, similar to 'once' for an event. 0 disables and undefined or a negative number like -1 never disconnects.

type number

options?

Same as the options param to IntersectionObserver

type IntersectionObserverInit

IntersectParamsOrCallback
#

IntersectState
#

intersect.svelte.ts view source

IntersectState import type {IntersectState} from '@fuzdev/fuz_ui/intersect.svelte.js';

intersecting

type boolean

intersections

type number

el

type HTMLElement | SVGElement

observer

type IntersectionObserver

disconnect

type () => void

ItemState
#

Library
#

library.svelte.ts view source

import {Library} from '@fuzdev/fuz_ui/library.svelte.js';

Rich runtime representation of a library.

Wraps LibraryJson with computed properties and provides the root of the API documentation hierarchy: Library โ†’ Module โ†’ Declaration.

see also

library_json

type LibraryJson

readonly $state.raw

url_prefix

URL path prefix for multi-package documentation sites. Prepended to /docs/api/ paths in Module.url_api and Declaration.url_api. Default '' preserves single-package behavior.

type string

readonly

pkg_json

type PkgJson

readonly $derived

source_json

type SourceJson

readonly $derived

name

type string

readonly $derived

repo_name

type string

readonly $derived

repo_url

Non-null โ€” the constructor rejects a pkg_json without a parseable repository.

type Url

readonly $derived

owner_name

type string | null

readonly $derived

homepage_url

type Url | null

readonly $derived

logo_url

type Url | null

readonly $derived

logo_alt

type string

readonly $derived

published

type boolean

readonly $derived

npm_url

type Url | null

readonly $derived

changelog_url

type Url | null

readonly $derived

org_url

Organization URL (e.g., 'https://github.com/ryanatkn'), built from owner_name.

type string | null

readonly $derived

modules

All modules as rich Module instances.

type Module[]

readonly $derived

modules_sorted

All modules sorted alphabetically by path.

type Module[]

readonly $derived

declarations

All declarations across all modules as a flat array.

type Declaration[]

readonly $derived

module_by_path

Module lookup map by path. Provides O(1) lookup.

type Map<string, Module>

readonly $derived

declaration_by_name

Declaration lookup map by name. Provides O(1) lookup.

type Map<string, Declaration>

readonly $derived

constructor

type new (library_json: LibraryJson, url_prefix?: string): Library

library_json

type LibraryJson

url_prefix

type string
default ''

lookup_directory_modules

Look up modules within a directory prefix. Returns modules whose paths start with path + "/", or null if none match.

type (path: string): Module[] | null

path

type string
returns Module[] | null

search_declarations

Search declarations by query string with multi-term AND logic.

type (query: string): Declaration[]

query

type string
returns Declaration[]

library_context
#

library.svelte.ts view source

{ get: (error_message?: string | undefined) => () => Library; get_maybe: () => (() => Library) | undefined; set: (value: () => Library) => () => Library; } import {library_context} from '@fuzdev/fuz_ui/library.svelte.js';

Holds a getter to the active Library for the current subtree.

The getter form keeps consumers reactive when the library changes without requiring a remount โ€” set it with a closure over reactive state, e.g. library_context.set(() => library). Components that accept a library prop (LibraryDetail, ApiIndex, ApiModule) project the prop into this context for their subtree, so descendants like ModuleLink, DeclarationLink, and TSDoc-rendered DocsLink resolve against the same library โ€” including when an aggregator renders a foreign library that differs from the site-level context.

LibraryDetail
#

LibraryDetail.svelte view source

accepts children

import LibraryDetail from '@fuzdev/fuz_ui/LibraryDetail.svelte';

Renders library metadata (name, description, links, license) and a module index with file-type coloring. Uses svelte-docinfo's file type predicates for module classification.

library

type Library

links_full?

Link the module/declaration index to the library's own deployed docs (url_api_full) instead of site-local paths. Use when rendering a foreign library on a different site, e.g. an aggregator.

type boolean
optional default false

repo_name?

type Snippet<[repo_name: string]>
optional
snippet parameters
repo_name string

description?

type Snippet<[description: string]>
optional
snippet parameters
description string

tagline?

type Snippet<[description: string]>
optional
snippet parameters
description string

npm_url?

type Snippet<[npm_url: string]>
optional
snippet parameters
npm_url string

homepage_url?

type Snippet<[homepage_url: string]>
optional
snippet parameters
homepage_url string

children?

type Snippet<[library: Library]>
optional
snippet parameters
library Library

intersects

OmitStrict<SvelteHTMLElements['div'], 'children'>

see also

LibrarySummary
#

LibrarySummary.svelte view source

accepts children

import LibrarySummary from '@fuzdev/fuz_ui/LibrarySummary.svelte';

children?

type Snippet<[]>
optional

library

type Library

repo_name?

type Snippet<[repo_name: string]>
optional
snippet parameters
repo_name string

logo?

type Snippet<[logo_url: string, logo_alt: string]>
optional
snippet parameters
logo_url string
logo_alt string

tagline?

type Snippet<[tagline: string, glyph?: string | undefined]>
optional
snippet parameters
tagline string
glyph? string | undefined

description?

type Snippet<[description: string, glyph?: string | undefined]>
optional
snippet parameters
description string
glyph? string | undefined

npm_url?

type Snippet<[npm_url: string]>
optional
snippet parameters
npm_url string

homepage_url?

type Snippet<[homepage_url: string]>
optional
snippet parameters
homepage_url string

intersects

SvelteHTMLElements['div']

link_entry_default
#

load_color_scheme
#

theme_state.svelte.ts view source

(fallback?: ColorScheme, key?: string): ColorScheme import {load_color_scheme} from '@fuzdev/fuz_ui/theme_state.svelte.js';

fallback

type ColorScheme
default 'auto'

key

type string
default COLOR_SCHEME_STORAGE_KEY

returns

ColorScheme

load_from_storage
#

storage.ts view source

<T>(key: string, is_json?: boolean, parse_fn?: ((value: unknown) => T | null) | undefined): T | null import {load_from_storage} from '@fuzdev/fuz_ui/storage.js';

Utility function to load a value from localStorage with optional parsing

key

the localStorage key

type string

is_json

whether to parse the value as JSON

type boolean
default false

parse_fn?

optional custom parsing function to transform the value

type ((value: unknown) => T | null) | undefined
optional

returns

T | null

the parsed value or null if not found or parsing fails

generics

load_from_storage<T>
T

load_theme
#

theme_state.svelte.ts view source

(fallback?: Theme, key?: string): Theme import {load_theme} from '@fuzdev/fuz_ui/theme_state.svelte.js';

fallback

type Theme
default default_themes[0]!

key

type string
default THEME_STORAGE_KEY

returns

Theme

logo_fuz
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_app
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_app} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_blog
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_blog} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_code
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_code} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_css
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; style: string; } import {logo_fuz_css} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_docs
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_docs} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_gitops
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_gitops} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_mastodon
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_mastodon} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_template
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_template} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_ui
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_fuz_ui} from '@fuzdev/fuz_ui/logos.js';

logo_fuz_util
#

logos.ts view source

{ label: string; paths: { fill: string; d: string; }[]; } import {logo_fuz_util} from '@fuzdev/fuz_ui/logos.js';

logo_github
#

logos.ts view source

{ label: string; paths: { d: string; 'fill-rule': "evenodd"; 'clip-rule': string; transform: string; }[]; viewBox: string; } import {logo_github} from '@fuzdev/fuz_ui/logos.js';

logo_gro
#

logos.ts view source

{ label: string; paths: { fill: string; d: string; }[]; } import {logo_gro} from '@fuzdev/fuz_ui/logos.js';

logo_mdn
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_mdn} from '@fuzdev/fuz_ui/logos.js';

logo_svelte_docinfo
#

logos.ts view source

{ label: string; fill: string; paths: { d: string; }[]; } import {logo_svelte_docinfo} from '@fuzdev/fuz_ui/logos.js';

MAIN_HEADER_MARGIN_TOP
#

constants.ts view source

"calc(60px + var(--space_lg))" import {MAIN_HEADER_MARGIN_TOP} from '@fuzdev/fuz_ui/constants.js';

MdnLink
#

Module
#

module.svelte.ts view source

import {Module} from '@fuzdev/fuz_ui/module.svelte.js';

Rich runtime representation of a module with computed properties.

Wraps svelte-docinfo's ModuleJson with reactive derivations, URL generation, and Declaration instances.

see also

library

type Library

readonly $state.raw

module_json

type ModuleJsonInput

readonly $state.raw

path

Canonical module path โ€” src/lib/-relative, with source extension (.ts, .svelte, etc.). Examples: 'Alert.ts', 'helpers/foo.ts', 'actions/composables.ts'.

This is the key Library.module_by_path indexes, so it's also the exact string TSDoc backtick references must use to auto-link to a module via DocsLink.svelte (e.g., `` actions/composables.ts ``). A leading ./ or a .js runtime extension will not match. Top-level files match by bare filename; nested files require the full sub-path.

type string

$derived

path_import

Import-style path with ./ prefix.

type string

$derived

module_comment

type string | undefined

$derived

declarations

Array of Declaration instances. Filters out default exports.

type Declaration[]

$derived

url_api

API documentation URL for this module.

type string

$derived

url_api_full

Public documentation link (if homepage_url is available).

Absolute URL into the library's own deployed docs, for rendering a foreign library's modules on a different site (e.g. an aggregator).

type string | undefined

$derived

url_github

GitHub source URL.

type string | undefined

$derived

has_declarations

Whether the module has renderable declarations (after the default-export filter in declarations).

type boolean

$derived

has_module_comment

type boolean

$derived

dependencies

Modules this imports (paths relative to src/lib).

type string[]

$derived

dependents

Modules that import this (paths relative to src/lib).

type string[]

$derived

has_dependencies

type boolean

$derived

has_dependents

type boolean

$derived

re_exports

Same-name re-export edges in this module's source (ModuleJson.reExports) โ€” the forward view of declarations' alsoExportedFrom, sorted by name then module. Renamed re-exports appear as declarations with aliasOf instead, and star exports in star_exports.

type { name: string; module: string; typeOnly?: boolean | undefined; sourceLine?: number | undefined; }[]

$derived

has_re_exports

type boolean

$derived

star_exports

Modules fully re-exported via export * from './module' (ModuleJson.starExports), in source order. Star-projected symbols are not materialized as declarations or re_exports edges โ€” this is their sole encoding.

type string[]

$derived

has_star_exports

type boolean

$derived

re_exports_by_module

Re-export edges grouped by canonical module path, groups sorted by path. Entries within each group keep their name-sorted serialized order.

type Map<string, Array<ReExportJsonInput>>

$derived

external_re_exports

Re-exports whose immediate target is an external package (ModuleJson.externalReExports) โ€” export {x} from 'pkg' and export * as ns from 'pkg' forms, sorted by name then specifier.

type { name: string; specifier: string; originalName?: string | undefined; typeOnly?: boolean | undefined; sourceLine?: number | undefined; }[]

$derived

has_external_re_exports

type boolean

$derived

external_re_exports_by_specifier

External re-exports grouped by package specifier, groups sorted by specifier. Entries within each group keep their name-sorted serialized order.

type Map<string, Array<ExternalReExportJsonInput>>

$derived

external_star_exports

External packages fully re-exported via export * from 'pkg' (ModuleJson.externalStarExports), in source order. The projected names are unknown โ€” the package isn't analyzed.

type string[]

$derived

has_external_star_exports

type boolean

$derived

has_any_re_exports

Whether the module re-exports anything in any form โ€” same-name edges, star exports, or the external variants of both.

type boolean

$derived

constructor

type new (library: Library, module_json: { path: string; declarations?: ({ kind: "function"; name: string; returnType?: string | undefined; returnDescription?: string | undefined; parameters?: { ...; }[] | undefined; ... 14 more ...; genericParams?: { ...; }[] | undefined; } | ... 7 more ... | { ...; })[] | undefined; ... 7 more ...; partial?: boolean | undefined; }): Module

library

type Library

module_json

type { path: string; declarations?: ({ kind: "function"; name: string; returnType?: string | undefined; returnDescription?: string | undefined; parameters?: { name: string; type: string; optional?: boolean | undefined; rest?: boolean | undefined; description?: string | undefined; defaultValue?: string | undefined; proper...

get_declaration_by_name

Look up a declaration by name within this module.

type (name: string): Declaration | undefined

name

type string
returns Declaration | undefined

ModuleLink
#

OnDisconnect
#

OnIntersect
#

parse_csp_directive
#

csp.ts view source

(directive: unknown): keyof CspDirectives | null import {parse_csp_directive} from '@fuzdev/fuz_ui/csp.js';

directive

type unknown

returns

keyof CspDirectives | null

parse_library_url_prefix
#

library.svelte.ts view source

(value: unknown): string import {parse_library_url_prefix} from '@fuzdev/fuz_ui/library.svelte.js';

Normalizes a URL prefix: ensures leading /, strips trailing /, returns '' for falsy and non-string values.

value

type unknown

returns

string

PasteFromClipboard
#

PasteFromClipboard.svelte view source

accepts children

import PasteFromClipboard from '@fuzdev/fuz_ui/PasteFromClipboard.svelte';

onerror?

type EventHandler<Event, Element> & ((error: Error) => void)
optional

onclipboardtext

type (text: string) => void

intersects

SvelteHTMLElements['button']

PendingAnimation
#

PendingAnimation.svelte view source

accepts children

import PendingAnimation from '@fuzdev/fuz_ui/PendingAnimation.svelte';

inline?

type boolean
optional

running?

type boolean
optional default true

item_attrs?

type HTMLAttributes<HTMLSpanElement>
optional

children?

type Snippet<[index: number]>
optional
snippet parameters
index number

intersects

OmitStrict<SvelteHTMLElements['span'], 'children'>

PendingButton
#

PendingButton.svelte view source

accepts children

import PendingButton from '@fuzdev/fuz_ui/PendingButton.svelte';

children

type Snippet<[]>

pending

type boolean

running?

type boolean
optional

animation?

type Snippet<[]>
optional

intersects

SvelteHTMLElements['button']

ProjectLinks
#

Redirect
#

Redirect.svelte view source

accepts children

import Redirect from '@fuzdev/fuz_ui/Redirect.svelte';

host?

The target host to redirect to. Defaults to '' (relative URL).

type string
optional default ''

path?

The target path to redirect to. Defaults to the current location.pathname.

type string
optional default page.url.pathname

auto?

Should the redirect happen automatically without user input? Defaults to true.

type boolean
optional default true

children?

type Snippet<[url: string]>
optional
snippet parameters
url string

register_section_header_context
#

TomeSection.svelte view source

{ get: (error_message?: string | undefined) => RegisterSectionHeader; get_maybe: () => RegisterSectionHeader | undefined; set: (value: RegisterSectionHeader) => RegisterSectionHeader; } import {register_section_header_context} from '@fuzdev/fuz_ui/TomeSection.svelte';

RegisterSectionHeader
#

TomeSection.svelte view source

RegisterSectionHeader import type {RegisterSectionHeader} from '@fuzdev/fuz_ui/TomeSection.svelte';

(call)

type (get_fragment: () => string): string | undefined

get_fragment

type () => string
returns string | undefined

render_value_to_string
#

helpers.ts view source

(value: unknown): string import {render_value_to_string} from '@fuzdev/fuz_ui/helpers.js';

value

type unknown

returns

string

RootMenuState
#

save_color_scheme
#

theme_state.svelte.ts view source

(color_scheme: ColorScheme | null, key?: string): void import {save_color_scheme} from '@fuzdev/fuz_ui/theme_state.svelte.js';

color_scheme

type ColorScheme | null

key

type string
default COLOR_SCHEME_STORAGE_KEY

returns

void

save_theme
#

theme_state.svelte.ts view source

(theme: Theme | null, key?: string): void import {save_theme} from '@fuzdev/fuz_ui/theme_state.svelte.js';

theme

type Theme | null

key

type string
default THEME_STORAGE_KEY

returns

void

save_to_storage
#

storage.ts view source

(key: string, value: any, is_json?: boolean): void import {save_to_storage} from '@fuzdev/fuz_ui/storage.js';

Utility function to save a value to localStorage.

key

type string

value

type any

is_json

type boolean
default false

returns

void

section_depth_context
#

TomeSection.svelte view source

{ get: () => number; set: (value?: number | undefined) => number; } import {section_depth_context} from '@fuzdev/fuz_ui/TomeSection.svelte';

section_id_context
#

TomeSection.svelte view source

{ get: (error_message?: string | undefined) => string | undefined; get_maybe: () => string | undefined; set: (value: string | undefined) => string | undefined; } import {section_id_context} from '@fuzdev/fuz_ui/TomeSection.svelte';

selected_variable_context
#

style_variable_helpers.svelte.ts view source

{ get: () => SelectedStyleVariable; set: (value?: SelectedStyleVariable | undefined) => SelectedStyleVariable; } import {selected_variable_context} from '@fuzdev/fuz_ui/style_variable_helpers.svelte.js';

SelectedStyleVariable
#

style_variable_helpers.svelte.ts view source

import {SelectedStyleVariable} from '@fuzdev/fuz_ui/style_variable_helpers.svelte.js';

value

type StyleVariable | null

$state.raw

constructor

type new (initial?: { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; } | null): SelectedStyleVariable

initial

type { name: string; light?: string | undefined; dark?: string | undefined; summary?: string | undefined; } | null
default null

separator_entry_default
#

set_library_context_with_fallback
#

library.svelte.ts view source

(get_library_prop: () => Library | undefined, component_name: string): () => Library import {set_library_context_with_fallback} from '@fuzdev/fuz_ui/library.svelte.js';

Sets library_context for the component's subtree to a getter that prefers the component's library prop and falls back to the ancestor's value, returning the resolved getter.

Pass get_library_prop as a getter (not a snapshot) so prop changes remain reactive. The ancestor lookup happens once at component init, before the projection โ€” the fallback sees the parent value, not the projection.

get_library_prop

Getter for the component's library prop. A thunk so the prop stays reactive.

type () => Library | undefined

component_name

Used in the error when neither the prop nor the context provides a library.

type string

returns

() => Library

getter for the resolved library; read it lazily, e.g. $derived(get_library())

site_context
#

site.svelte.ts view source

{ get: (error_message?: string | undefined) => SiteState; get_maybe: () => SiteState | undefined; set: (value: SiteState) => SiteState; } import {site_context} from '@fuzdev/fuz_ui/site.svelte.js';

SiteState
#

site.svelte.ts view source

import {SiteState} from '@fuzdev/fuz_ui/site.svelte.js';

Light site-identity values for app chrome - the icon, glyph, and repo url used by components like Breadcrumb and DocsFooter. Set once per app at the root layout. Distinct from library_context, which carries the heavy module/declaration metadata that only docs and API pages need.

Pass pkg_json (from virtual:pkg.json) to derive glyph/repo_url from the package's own metadata instead of hardcoding them; icon stays an explicit logo import since it's structured SvgData, not package metadata.

icon

type SvgData | null

$state.raw

glyph

type string | null

$state.raw

repo_url

type Url | null

$state.raw

constructor

type new (options?: SiteStateOptions): SiteState

options

default {}

SiteStateOptions
#

site.svelte.ts view source

SiteStateOptions import type {SiteStateOptions} from '@fuzdev/fuz_ui/site.svelte.js';

icon?

The site's icon, e.g. a logo from logos.ts.

type SvgData | null

glyph?

The site's glyph, a single unicode character identifying the project. Falls back to pkg_json.glyph.

type string | null

repo_url?

The site's source repository url, e.g. for DocsFooter links. Falls back to the url parsed from pkg_json.repository.

type Url | null

pkg_json?

Curated package.json, typically the default export of virtual:pkg.json. glyph and repo_url derive from it when not given explicitly; explicit props always win.

type PkgJson | null

Spiders
#

Spiders.svelte view source

accepts children

import Spiders from '@fuzdev/fuz_ui/Spiders.svelte';

spiders?

type string[]
optional default [ 'var(--color_a_50)', 'var(--color_b_50)', 'var(--color_c_50)', 'var(--color_d_50)', 'var(--color_e_50)', 'var(--color_f_50)', 'var(--color_g_50)', 'var(--color_h_50)', 'var(--color_i_50)', 'var(--color_j_50)', ]

seed?

type {}
optional default minute_of_day()

random?

type () => number
optional default create_random_alea(seed)

intersects

SvelteHTMLElements['div']

StyleVariableButton
#

StyleVariableButton.svelte view source

accepts children

import StyleVariableButton from '@fuzdev/fuz_ui/StyleVariableButton.svelte';

name

type string

inline?

type boolean
optional default false

plain?

type boolean
optional default true

intersects

SvelteHTMLElements['button']

SubmenuState
#

Svg
#

Svg.svelte view source

accepts children

import Svg from '@fuzdev/fuz_ui/Svg.svelte';

height?

type string
optional

width?

type string
optional

fill?

type string
optional

data

type SvgData

size?

Sets both the width and height of the svg. Overridden by the width and height props.

type string
optional default 'var(--font_size, auto)'

label?

type string
optional

inline?

Renders the SVG as an inline block with spacing appropriate for text. Defaults to false.

type boolean
optional

shrink?

type boolean
optional default true

intersects

SvelteHTMLElements['svg']

SvgData
#

svg.ts view source

SvgData import type {SvgData} from '@fuzdev/fuz_ui/svg.js';

A structured icon definition rendered by Svg.svelte. Rendering is purely structural - typed fields, never raw markup - so untrusted data cannot introduce script execution or navigation. See Svg.svelte for the full security notes, including the residual style url(...) caveat.

paths?

List of svg path attribute objects, spread onto each path element. The d attribute is required; a per-path fill overrides the resolved fill.

type Array<{d: string} & SvelteHTMLElements['path']> | null

style?

Inline style applied to the root svg element, merged with any style passed as a component prop. Travels with the icon definition - per-instance svg attributes belong on the Svg component itself.

type string | null

fill?

Default fill for every path, falling back to var(--text_color, #000). Overridden by the component's fill prop, and per-path by a path's own fill.

type string | null

label?

Accessible name, applied as aria-label. Overridden by the component's label prop.

type string | null

viewBox?

Defaults to "0 0 100 100".

type string | null

gradients?

Gradient definitions rendered into the svg's <defs> block. This is the structured replacement for raw markup - reference a gradient from a path/shape fill or stroke with url(#id). Most svgs need only paths.

type Array<SvgGradient> | null

SvgGradient
#

svg.ts view source

SvgGradient import type {SvgGradient} from '@fuzdev/fuz_ui/svg.js';

A gradient definition rendered into the svg's <defs> block. Reference it from a path/shape fill or stroke with url(#id).

type

Whether to render a linearGradient or radialGradient element.

type 'linear' | 'radial'

id

The id referenced by a fill/stroke like url(#id). Inline svgs share the document's id namespace, so pick a value unique to the icon - icons with colliding ids all resolve to whichever element renders first.

type string

stops

The gradient's color stops.

type Array<SvgGradientStop>

attrs?

Additional attributes on the gradient element, e.g. gradientUnits, gradientTransform, cx/cy/r (radial), or x1/y1/x2/y2 (linear).

type (SvelteHTMLElements['radialGradient'] & SvelteHTMLElements['linearGradient']) | null

SvgGradientStop
#

svg.ts view source

SvgGradientStop import type {SvgGradientStop} from '@fuzdev/fuz_ui/svg.js';

A single color stop of an SvgGradient.

offset

The stop's position along the gradient, e.g. 0.5 or "50%".

type string | number

color

The stop's color, applied as the stop-color attribute.

type string

opacity?

The stop's opacity, applied as the stop-opacity attribute.

type string | number | null

sync_color_scheme
#

theme_state.svelte.ts view source

(color_scheme: ColorScheme | null): void import {sync_color_scheme} from '@fuzdev/fuz_ui/theme_state.svelte.js';

color_scheme

type ColorScheme | null

returns

void

Teleport
#

Teleport.svelte view source

accepts children

import Teleport from '@fuzdev/fuz_ui/Teleport.svelte';

to?

Defaults to undefined to lessen friction with SSR. We may want to change this to optionally accept a string selector, but that didn't seem to be the best API for the Dialog.

type HTMLElement
optional

onmove?

type (el: HTMLElement, to: HTMLElement) => void
optional

children

type Snippet<[]>

text_entry_default
#

theme_state_context
#

theme_state.svelte.ts view source

{ get: (error_message?: string | undefined) => () => ThemeState; get_maybe: () => (() => ThemeState) | undefined; set: (value: () => ThemeState) => () => ThemeState; } import {theme_state_context} from '@fuzdev/fuz_ui/theme_state.svelte.js';

THEME_STORAGE_KEY
#

ThemeInput
#

ThemeInput.svelte view source

accepts children

import ThemeInput from '@fuzdev/fuz_ui/ThemeInput.svelte';

onselect?

type EventHandler<Event, HTMLMenuElement> & ((theme: Theme) => void)
optional

selected_theme?

type { theme: Theme; }
optional default get_theme_state()

themes?

type Theme[]
optional default default_themes

enable_editing?

type boolean
optional default false

select?

type (theme: Theme) => boolean | void
optional default (theme) => { selected_theme.theme = theme; }

onedit?

type (theme: Theme) => void
optional

intersects

SvelteHTMLElements['menu']

ThemeRoot
#

ThemeRoot.svelte view source

accepts children

import ThemeRoot from '@fuzdev/fuz_ui/ThemeRoot.svelte';

sync_color_scheme?

type (color_scheme: ColorScheme | null) => void
optional default default_sync_color_scheme

load_color_scheme?

type (fallback?: ColorScheme, key?: string) => ColorScheme
optional default default_load_color_scheme

save_color_scheme?

type (color_scheme: ColorScheme | null, key?: string) => void
optional default default_save_color_scheme

load_theme?

type (fallback?: Theme, key?: string) => Theme
optional default default_load_theme

save_theme?

type (theme: Theme | null, key?: string) => void
optional default default_save_theme

theme_fallback?

type Theme
optional

theme_state?

A reactive class containing the selected theme and color scheme. Defaults to the first default theme.

optional default new ThemeState({ theme: load_theme(theme_fallback), color_scheme: load_color_scheme(), })

children

type Snippet<[theme_state: ThemeState, style: string | null, theme_style_html: string | null]>
snippet parameters
theme_state ThemeState
style string | null
theme_style_html string | null

ThemeState
#

theme_state.svelte.ts view source

import {ThemeState} from '@fuzdev/fuz_ui/theme_state.svelte.js';

theme

type Theme

$state.raw

color_scheme

type ColorScheme

$state.raw

constructor

type new (options?: Partial<ThemeStateJson> | undefined): ThemeState

options?

type Partial<ThemeStateJson> | undefined
optional

toJSON

type (): ThemeStateJson

ThemeStateJson
#

theme_state.svelte.ts view source

ThemeStateJson import type {ThemeStateJson} from '@fuzdev/fuz_ui/theme_state.svelte.js';

theme

type Theme

color_scheme

type ColorScheme

ThemeStateOptions
#

theme_state.svelte.ts view source

Partial<ThemeStateJson> import type {ThemeStateOptions} from '@fuzdev/fuz_ui/theme_state.svelte.js';

theme?

type Theme

color_scheme?

type ColorScheme

to_docs_path_info
#

docs_helpers.svelte.ts view source

(path_slug: string, pathname: string, root_path?: string): { path: string; path_is_selected: boolean; path_segment: string | undefined; } import {to_docs_path_info} from '@fuzdev/fuz_ui/docs_helpers.svelte.js';

path_slug

type string

pathname

type string

root_path

type string
default DOCS_PATH_DEFAULT

returns

{ path: string; path_is_selected: boolean; path_segment: string | undefined; }

Tome
#

tome.ts view source

ZodObject<{ slug: ZodString; title: ZodOptional<ZodString>; category: ZodString; Component: ZodCustom<Component<any, any, string>, Component<any, any, string>>; related_tomes: ZodArray<...>; related_modules: ZodArray<...>; related_declarations: ZodArray<...>; }, $strip> import type {Tome} from '@fuzdev/fuz_ui/tome.js';

tome_context
#

tome.ts view source

{ get: (error_message?: string | undefined) => () => { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }; get_maybe: () => (() => { ...; }) | undefined; set: (value: () => { ...; })... import {tome_context} from '@fuzdev/fuz_ui/tome.js';

tome_get_by_slug
#

tome.ts view source

(slug: string): { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; } import {tome_get_by_slug} from '@fuzdev/fuz_ui/tome.js';

slug

type string

returns

{ slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }

tome_to_pathname
#

tome.ts view source

(item: string | { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }, docs_path?: string, hash?: string | undefined): string import {tome_to_pathname} from '@fuzdev/fuz_ui/tome.js';

item

type string | { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }

docs_path

type string
default DOCS_PATH_DEFAULT

hash?

URL fragment to append, with or without the #

type string | undefined
optional

returns

string

tome_to_title
#

tome.ts view source

(tome: { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }): string import {tome_to_title} from '@fuzdev/fuz_ui/tome.js';

The display label for a tome โ€” its title if set, else its slug.

tome

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }

returns

string

TomeContent
#

TomeContent.svelte view source

accepts children

import TomeContent from '@fuzdev/fuz_ui/TomeContent.svelte';

children

type Snippet<[]>

tome

type { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }

docs_path?

type string
optional default DOCS_PATH_DEFAULT

header?

type Snippet<[]>
optional

intersects

SvelteHTMLElements['section']

TomeHeader
#

TomeHeader.svelte view source

accepts children

import TomeHeader from '@fuzdev/fuz_ui/TomeHeader.svelte';

intersects

SvelteHTMLElements['h1'],SvelteHTMLElements['h2']

TomeLink
#

tomes_context
#

tome.ts view source

{ get: (error_message?: string | undefined) => () => Map<string, { slug: string; category: string; Component: Component<any, any, string>; related_tomes: string[]; related_modules: string[]; related_declarations: string[]; title?: string | undefined; }>; get_maybe: () => (() => Map<...>) | undefined; set: (value: ()... import {tomes_context} from '@fuzdev/fuz_ui/tome.js';

TomeSection
#

TomeSection.svelte view source

accepts children

import TomeSection from '@fuzdev/fuz_ui/TomeSection.svelte';

children

type Snippet<[]>

intersects

SvelteHTMLElements['section']

TomeSectionHeader
#

TomeSectionHeader.svelte view source

accepts children

import TomeSectionHeader from '@fuzdev/fuz_ui/TomeSectionHeader.svelte';

children?

type Snippet<[]>
optional

text

type string

tag?

optional

intersects

SvelteHTMLElements['h2'],SvelteHTMLElements['h3'],SvelteHTMLElements['h4']

TypeLink
#

url_to_root_relative
#

library_helpers.ts view source

(url: string, origin?: string): string import {url_to_root_relative} from '@fuzdev/fuz_ui/library_helpers.js';

Convert a full URL to root-relative format by removing the origin.

Uses SvelteKit's page state for the current origin by default.

url

full URL to convert

type string

origin

origin to strip (defaults to current page origin)

type string
default page.url.origin

returns

string

root-relative URL starting with '/'

examples

// Assuming page.url.origin is 'https://fuz.dev' url_to_root_relative('https://fuz.dev/docs/api') // => '/docs/api'

vite_plugin_pkg_json
#

vite_plugin_pkg_json.ts view source

(options?: VitePluginPkgJsonOptions): Plugin<any> import {vite_plugin_pkg_json} from '@fuzdev/fuz_ui/vite_plugin_pkg_json.js';

Creates the virtual:pkg.json plugin. Zero-config for canonical fuz usage โ€” the publish-safe field set defaults to pkg_json_keys; widen it via keys.

options

default {}

returns

Plugin<any>

VitePluginPkgJsonOptions
#

vite_plugin_pkg_json.ts view source

VitePluginPkgJsonOptions import type {VitePluginPkgJsonOptions} from '@fuzdev/fuz_ui/vite_plugin_pkg_json.js';

keys?

The package.json fields to keep in the served subset. Defaults to the curated, publish-safe pkg_json_keys. Pass a wider list โ€” usually `` [...pkg_json_keys, 'extra'] `` โ€” to expose more fields; the same list must reach library_json_from_modules (see the module comment).

type ReadonlyArray<keyof PackageJson>