<script>
  import {
    create_button_manager,
    Button,
    create_text_input_manager,
    TextInput,
    copy_to_clipboard,
  } from "sveltekit-ui"

  let manager = $state(null)

  function create_manager() {
    let text_input_manager = $state()
    let copy_button_manager = $state()

    function init() {
      text_input_manager = create_text_input_manager({
        placeholder: "some text here",
      })
      copy_button_manager = create_button_manager({
        text: "Copy Text",
        is_compressed: true,
        is_success_animation: true,
        on_click: () => copy_to_clipboard(text_input_manager?.val),
      })
    }

    init()

    return {
      get text_input_manager() {
        return text_input_manager
      },
      get copy_button_manager() {
        return copy_button_manager
      },
    }
  }

  manager = create_manager()
</script>

<div style="margin: 1rem; display: flex; gap: 1rem;">
  <TextInput manager={manager?.text_input_manager} />
  <Button manager={manager?.copy_button_manager} />
</div>

All Docs

Each component can be combined into a more complex component. This is intended for sveltekit projects. The whole "tree" of components should be initialized at the parent-most level which is likely in the <script> tags of a +page.svelte file. <script> import { create_button_manager, Button, create_text_input_manager, TextInput, copy_to_clipboard, } from "sveltekit-ui" let manager = $state(null) function create_manager() { let text_input_manager = $state() let copy_button_manager = $state() function init() { text_input_manager = create_text_input_manager({ placeholder: "some text here", }) copy_button_manager = create_button_manager({ text: "Copy Text", is_compressed: true, is_success_animation: true, on_click: () => copy_to_clipboard(text_input_manager?.val), }) } init() return { get text_input_manager() { return text_input_manager }, get copy_button_manager() { return copy_button_manager }, } } manager = create_manager() </script> <div style="margin: 1rem; display: flex; gap: 1rem;"> <TextInput manager={manager?.text_input_manager} /> <Button manager={manager?.copy_button_manager} /> </div> color system (oklch css variables) overview - all colors are exposed as css custom properties (variables). - most of the time you should use the "-t" themed versions (they automatically flip for dark mode). - variables are designed to be composable: oklch(lightness chroma hue / alpha). core pieces 1) lightness scale - --l0 ... --l24 are lightness steps for the default (light) theme. - --l0-t ... --l24-t are the themed lightness steps (invert in dark theme). 2) hue + chroma scales - --h0 ... --h24 are hue steps (0-360-ish). - --c0 ... --c24 are chroma steps (0-1-ish). - --o0 ... --o24 are opacity steps (0-1). 3) grayscale system tied to the primary hue - --g0 ... --g24 and --g0-t ... --g24-t are “neutral grays” but actually oklch grays tinted toward --primary-h. - use these for almost everything (text, borders, surfaces) because they stay cohesive with your primary color. theme guidance - use *-t variables by default (ex: var(--g6-t), var(--bg), var(--shadow3-t)). - use non -t variables only if you explicitly want the same value in light and dark modes. recommended usage patterns - page background: var(--bg) - elevated/surface background: var(--bg2) or var(--shadow1-t) (subtle) - primary brand color: var(--primary) or var(--primary-t) - primary text: var(--g6-t) - muted text / labels: var(--g10-t) to var(--g14-t) - borders / dividers: var(--g16-t) or var(--shadow7-t) - shadows: var(--shadow1-t) ... var(--shadow10-t) - tints (light overlays): var(--tint1-t) ... var(--tint10-t) states - focus ring: var(--selected-t) with contrast ring var(--g1-t) - error/warning/success: var(--error-t), var(--warning-t), var(--success-t) examples - text color: color: var(--g6-t); - surface: background: var(--bg2); - border: box-shadow: inset 0 0 0 1px var(--shadow7-t); - primary button: background: var(--primary-t); color: var(--primary-contrast-t); - translucent primary: background: var(--primary-transparent1-t); dark theme - dark theme is activated with [data-theme="dark"] on a parent element. - in dark theme, the -t lightness ramp is inverted so your chosen step numbers still "mean" the same thing (lower = darker surface, higher = brighter surface), without rewriting styles. below are the docs for each component individually {"alert":{"component_name":"Alert","builder_function_name":"create_alert_manager","description":"Manages display of alerts, including auto-delete and optional callbacks","config":{"alerts":{"type":"array","default":[],"description":"initial list of alerts"},"is_small_screen":{"type":"boolean","default":false,"description":"whether the layout adjusts for smaller screens"},"x_color":{"type":"string","default":"var(--g7-t)","description":"color for the x dismiss icon"},"border_radius":{"type":"number","default":1,"description":"rem-based border radius for the alert"},"success_icon_color":{"type":"string","default":"var(--success-t)","description":"color for the success check icon"},"error_icon_color":{"type":"string","default":"var(--error-t)","description":"color for the error x icon"},"on_alert_added":{"type":"function","default":null,"description":"callback triggered each time a new alert is created"}},"methods":{"add_alert":{"description":"adds a new alert, auto-assigns an id, and starts or restarts the auto-delete timer","parameters":{"header":"string","message":"string","icon":"string"},"returns":"void"},"delete_alert":{"description":"removes a specific alert by id; also clears the auto-delete interval if no alerts remain","parameters":{"id":"string"},"returns":"void"}},"returned_properties":{"interval":{"type":"any","description":"reference to the auto-delete setinterval, or null if inactive"},"alerts":{"type":"array","description":"current array of alerts being tracked"},"is_small_screen":{"type":"boolean","description":"reflects if the layout is set to small screen mode"},"x_color":{"type":"string","description":"color for the x dismiss icon"},"border_radius":{"type":"number","description":"rem-based border radius for the alert"},"success_icon_color":{"type":"string","description":"color for the success check icon"},"error_icon_color":{"type":"string","description":"color for the error x icon"}},"sample_code":"<script>\nimport { create_alert_manager, Alert } from \"sveltekit-ui\"\n\nlet example_alert_manager = create_alert_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Alert manager={example_alert_manager} />"},"audio":{"component_name":"Audio","builder_function_name":"create_audio_manager","description":"Manages playback of audio, including metadata, playback rate, volume, and skip time","config":{"storage_path":{"type":"string","default":null,"description":"template path for retrieving audio or image sources by id"},"src":{"type":"string","default":null,"description":"direct audio source url, or retrieved via storage_id if null"},"storage_id":{"type":"string","default":null,"description":"id used with storage_path if src is null"},"type":{"type":"string","default":"audio/mpeg","description":"mime type for the audio source"},"title":{"type":"string","default":null,"description":"title metadata for the audio"},"artist":{"type":"string","default":null,"description":"artist metadata for the audio"},"album":{"type":"string","default":null,"description":"album metadata for the audio"},"image_src":{"type":"string","default":null,"description":"direct url for the audio artwork image"},"image_storage_id":{"type":"string","default":null,"description":"id used with storage_path if image_src is null"},"image_type":{"type":"string","default":null,"description":"mime type for the artwork image"},"default_skip_time":{"type":"number","default":null,"description":"seconds to skip for nav_seek_backward / nav_seek_forward"},"ui_type":{"type":"string","default":"standard","description":"layout style for the audio player (standard, short, or square)"},"ml":{"type":"number","default":0,"description":"margin-left in rem units"},"mr":{"type":"number","default":0,"description":"margin-right in rem units"},"mt":{"type":"number","default":0,"description":"margin-top in rem units"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem units"},"is_hide_image":{"type":"boolean","default":false,"description":"whether the audio image is hidden"}},"methods":{"handle_mount":{"description":"executes on svelte onmount, checks audio readiness","parameters":{},"returns":"void"},"handle_loaded_metadata":{"description":"sets the time slider max after metadata loads","parameters":{},"returns":"void"},"handle_progress":{"description":"updates the buffered time for partial loading","parameters":{},"returns":"void"},"handle_time_update":{"description":"syncs the current audio time with the slider manager","parameters":{},"returns":"void"},"handle_rate_change":{"description":"updates the audio's playback rate","parameters":{"rate":"number"},"returns":"void"},"handle_seeking":{"description":"indicates the audio is seeking; sets is_loading to true","parameters":{},"returns":"void"},"handle_can_play":{"description":"indicates the audio can play; sets is_loading to false","parameters":{},"returns":"void"},"seek_to_audio":{"description":"seeks the audio to a specified time","parameters":{"time":"number"},"returns":"void"},"resize_image":{"description":"downscales an image to 128x128 if it exceeds that size","parameters":{"src":"string","callback":"function"},"returns":"void"},"setup_media_session":{"description":"configures media session metadata (title, album, artwork, etc.)","parameters":{},"returns":"void"},"update_position_state":{"description":"updates position state within the media session","parameters":{},"returns":"void"},"nav_seek_backward":{"description":"skips backward by a set or default number of seconds","parameters":{"details":"object"},"returns":"void"},"nav_seek_forward":{"description":"skips forward by a set or default number of seconds","parameters":{"details":"object"},"returns":"void"},"toggle_play_pause":{"description":"toggles audio state between play and pause","parameters":{},"returns":"void"},"play_audio":{"description":"plays the audio if it is paused","parameters":{},"returns":"void"},"pause_audio":{"description":"pauses the audio if it is playing","parameters":{},"returns":"void"},"set_is_loading":{"description":"manually sets the is_loading state","parameters":{"input":"boolean"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id generated for the audio element"},"src":{"type":"string","description":"active audio source"},"type":{"type":"string","description":"mime type for the audio source"},"title":{"type":"string","description":"title metadata for the audio"},"artist":{"type":"string","description":"artist metadata for the audio"},"album":{"type":"string","description":"album metadata for the audio"},"image_src":{"type":"string","description":"direct url for the audio artwork image"},"image_type":{"type":"string","description":"mime type of the audio artwork image"},"default_skip_time":{"type":"number","description":"default skip time in seconds for navigation"},"ui_type":{"type":"string","description":"current layout style (standard, short, or square)"},"ml":{"type":"number","description":"margin-left in rem units"},"mr":{"type":"number","description":"margin-right in rem units"},"mt":{"type":"number","description":"margin-top in rem units"},"mb":{"type":"number","description":"margin-bottom in rem units"},"is_hide_image":{"type":"boolean","description":"true if the audio image is hidden"},"play_pause_button_manager":{"type":"object","description":"button manager for the play/pause control"},"time_slider_manager":{"type":"object","description":"slider manager for the current time"},"settings_popover_manager":{"type":"object","description":"popover manager for audio settings"},"settings_button_manager":{"type":"object","description":"button manager for opening the settings popover"},"volume_slider_manager":{"type":"object","description":"slider manager for volume adjustment"},"rate_slider_manager":{"type":"object","description":"slider manager for playback rate adjustment"},"has_setup_media_session":{"type":"boolean","description":"indicates whether media session metadata is set"},"formatted_duration":{"type":"string","description":"formatted total duration of the audio"},"formatted_current_time":{"type":"string","description":"formatted current time in playback"},"is_loading":{"type":"boolean","description":"indicates if the audio is loading"}},"sample_code":"<script>\nimport { create_audio_manager, Audio } from \"sveltekit-ui\"\n\nlet example_audio_manager = create_audio_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Audio manager={example_audio_manager} />"},"audio_editor":{"component_name":"AudioEditor","builder_function_name":"create_audio_editor_manager","description":"Manages audio metadata editing, allowing users to seed data, modify tags, and optionally generate new audio from text","config":{"account":{"type":"object","default":null,"description":"an account object used for saving new audio to a specific user or namespace"},"storage":{"type":"object","default":null,"description":"storage definition for retrieving/saving audio and images"},"locally_uploaded_files":{"type":"any","default":null,"description":"reference to any local file state you want to pass in"},"is_disabled":{"type":"boolean","default":false,"description":"disables certain inputs and buttons if true"},"api_prefix":{"type":"string","default":"https://www.contibase.com/api/v1","description":"base api url for audio metadata endpoints"},"fetch_path_audio_read_tags":{"type":"string","default":"https://www.contibase.com/api/v1/audio/read_tags","description":"endpoint to read audio tags (id3 metadata) from an uploaded file"},"fetch_path_audio_post":{"type":"string","default":"https://www.contibase.com/api/v1/audio","description":"endpoint to post new or modified audio (e.g. updating metadata)"},"file_prefix":{"type":"string","default":"https://www.contibase.com/api/v1/storage/","description":"template path for retrieving resulting audio files by id"},"storage_default_folder_path":{"type":"string","default":null,"description":"if using a storage system, sets the default folder path for picking files"},"on_finish":{"type":"function","default":null,"description":"callback triggered upon finishing (e.g., passing the newly generated audio file object)"}},"methods":{"init":{"description":"initializes the manager state and sub-managers with config values","parameters":{"config":"object"},"returns":"void"},"seed":{"description":"loads existing audio data or text-based info into the manager","parameters":{"input":"object"},"returns":"void"},"get_audio_metadata":{"description":"reads metadata (id3 tags, cover image) from a given audio file via api call","parameters":{"audio_file":"file"},"returns":"promise<object>"},"resize_and_convert_image":{"description":"resizes and converts an image to dataurl with a specified format","parameters":{"src":"string","max_width":"number","max_height":"number","output_format":"string"},"returns":"promise<string>"},"set_text_to_audio_input":{"description":"updates the text content used to generate audio via text-to-speech","parameters":{"val":"string"},"returns":"void"},"generate_new_audio":{"description":"submits form data to server to either re-tag existing audio or generate a text-to-audio file","parameters":{},"returns":"promise<void>"},"download_audio_file":{"description":"locally downloads the generated audio file to the user's machine","parameters":{},"returns":"void"},"set_is_text_to_audio":{"description":"toggles whether the editor is using text-to-audio or a standard audio file","parameters":{"is_text_to_audio_input":"boolean"},"returns":"void"},"clear":{"description":"resets the form fields and metadata within the manager","parameters":{},"returns":"void"},"finish":{"description":"invokes on_finish callback with the final generated audio file object","parameters":{},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id for the audio editor instance"},"account":{"type":"object","description":"the currently set account if any"},"is_text_to_audio":{"type":"boolean","description":"true if text-to-speech is being used instead of a file"},"error_message":{"type":"string","description":"captures any error output from generating or tagging audio"},"success_message":{"type":"string","description":"captures any success message after generating or tagging audio"},"generate_audio_changes_button_manager":{"type":"object","description":"button manager controlling the 'generate audio changes' action"},"use_text_to_audio_button_manager":{"type":"object","description":"button manager controlling the switch to text-to-audio"},"select_file_from_storage_button_manager":{"type":"object","description":"button manager for opening the storage picker to choose an audio file"},"use_mp3_file_button_manager":{"type":"object","description":"button manager controlling the switch to a standard mp3 file instead of text-to-audio"},"text_to_audio_text_input_manager":{"type":"object","description":"text input manager for user-provided text that will be converted to audio"},"file_name_text_input_manager":{"type":"object","description":"text input manager for specifying the resulting mp3 file name"},"additional_tags_input_prepped":{"type":"object","description":"an object keyed by extra id3 tag frames, each containing a text_input_manager"},"additional_tag_keys_ordered":{"type":"array","description":"list of additional tag keys in the display order"},"audio_storage_picker_manager":{"type":"object","description":"storage picker manager for the main audio file"},"title_text_input_manager":{"type":"object","description":"text input manager for the 'title' id3 tag (TIT2)"},"album_title_text_input_manager":{"type":"object","description":"text input manager for the 'album' id3 tag (TALB)"},"image_storage_picker_manager":{"type":"object","description":"storage picker for the embedded album/cover image"},"image_description_text_input_manager":{"type":"object","description":"text input manager for the embedded image's description field"},"artist_text_input_manager":{"type":"object","description":"text input manager for the 'artist' id3 tag (TPE1)"},"lyrics_text_input_manager":{"type":"object","description":"text area manager for the USLT lyrics tag"},"release_year_text_input_manager":{"type":"object","description":"numeric input manager for the 'release year' tag (TYER)"},"language_dropdown_manager":{"type":"object","description":"dropdown manager for the TLAN language tag"},"is_popover":{"type":"boolean","description":"determines whether the audio editor is displayed within a popover"},"popover_manager":{"type":"object","description":"controls the main popover for editing audio"},"text_to_audio_time_in_minutes":{"type":"number","description":"estimates how long the text might take to generate as audio"},"voice_options":{"type":"array","description":"list of predefined voice profiles available for text-to-audio"},"voice_id":{"type":"string","description":"selected voice identifier for text-to-audio generation"},"edit_voice_popover_manager":{"type":"object","description":"popover manager for selecting a voice from a list"},"edit_voice_button_manager":{"type":"object","description":"button manager for triggering the voice selection popover"},"seed_from_input_popover_manager":{"type":"object","description":"popover manager for seeding audio data from another file"},"seed_from_input_popover_button_manager":{"type":"object","description":"button manager for opening the seed-from-input popover"},"seed_audio_storage_picker_manager":{"type":"object","description":"storage picker used within the seed-from-input popover"},"is_loading_generate_audio":{"type":"boolean","description":"indicates if the component is currently generating new audio or applying tags"},"generated_audio_file_obj":{"type":"object","description":"represents the newly generated audio file, including file, src, and metadata"},"audio_manager":{"type":"object","description":"an instance of create_audio_manager that can play the generated audio"},"clear_generated_audio_button_manager":{"type":"object","description":"button manager to clear any existing generated audio"},"download_audio_file_button_manager":{"type":"object","description":"button manager to download the newly generated audio file"},"clear_button_manager":{"type":"object","description":"button manager to reset/clear the entire audio editor"},"finish_button_manager":{"type":"object","description":"button manager to finalize/close the editor and invoke on_finish callback"},"additional_metatags_dropdown_manager":{"type":"object","description":"dropdown manager for selecting additional id3 frames to expose"}},"sample_code":"<script>\nimport { create_audio_editor_manager, AudioEditor } from \"sveltekit-ui\"\n\nlet example_audio_editor_manager = create_audio_editor_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<AudioEditor manager={example_audio_editor_manager} />"},"breadcrumbs":{"component_name":"Breadcrumbs","builder_function_name":"create_breadcrumbs_manager","description":"manages a breadcrumb navigation array, providing back, slash, and clickable segment buttons","config":{"val":{"type":"array","default":[],"description":"array of breadcrumb segments; can be strings or objects with a 'name' property"},"on_change":{"type":"function","default":null,"description":"optional callback triggered when a new breadcrumb index is selected"}},"methods":{"set_val":{"description":"sets or updates the current array of breadcrumb segments and regenerates the sub-managers","parameters":{"input":"array"},"returns":"void"},"select_path_breadcrumb_index":{"description":"truncates the breadcrumb array at the selected index and invokes on_change if provided","parameters":{"i":"number"},"returns":"void"}},"returned_properties":{"val":{"type":"array","description":"the current array of breadcrumb segments"},"breadcrumb_managers":{"type":"array","description":"an array of objects that each contain an icon_manager and a button_manager for a segment"},"back_button_manager":{"type":"object","description":"button manager to navigate up one level"},"slash_button_manager":{"type":"object","description":"button manager used for the slash separator"}},"sample_code":"<script>\nimport { create_breadcrumbs_manager, Breadcrumbs } from \"sveltekit-ui\"\n\nlet example_breadcrumbs_manager = create_breadcrumbs_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Breadcrumbs manager={example_breadcrumbs_manager} />"},"button":{"component_name":"Button","builder_function_name":"create_button_manager","description":"creates a fully customizable button with optional icon, interactive states, and configurable styling","config":{"type":{"type":"string","default":"primary","description":"visual style of the button (primary, outlined, soft, plain)"},"support_icon":{"type":"string","default":null,"description":"icon identifier to display; if null, no icon is shown"},"is_icon_bg_tint":{"type":"boolean","default":false,"description":"applies a tinted background behind the icon"},"icon_deg":{"type":"number","default":0,"description":"deg rotation for the icon"},"icon_sw":{"type":"number","default":0,"description":"icon stroke width setting"},"icon_size":{"type":"number","default":1.8,"description":"icon size in rem units"},"icon_ml":{"type":"number","default":0,"description":"icon's left margin in rem"},"icon_mr":{"type":"number","default":0,"description":"icon's right margin in rem"},"icon_pos":{"type":"string","default":"right","description":"icon position (left or right)"},"is_icon_shimmyable":{"type":"boolean","default":false,"description":"whether icon can shimmy on hover"},"icon_movement_stiffness":{"type":"number","default":0.1,"description":"movement stiffness for shimmy effect"},"icon_movement_damping":{"type":"number","default":0.1,"description":"movement damping for shimmy effect"},"aria_label":{"type":"string","default":null,"description":"aria-label for accessibility"},"popover_target":{"type":"string","default":null,"description":"css selector id for an associated popover"},"is_no_wrap":{"type":"boolean","default":false,"description":"prevents text from wrapping"},"is_word_break_all":{"type":"boolean","default":false,"description":"forces text to break at any character"},"is_success_animation":{"type":"boolean","default":false,"description":"if true, triggers a success animation/icon on click"},"ml":{"type":"number","default":0,"description":"margin-left (rem)"},"mr":{"type":"number","default":0,"description":"margin-right (rem)"},"mt":{"type":"number","default":0,"description":"margin-top (rem)"},"mb":{"type":"number","default":0,"description":"margin-bottom (rem)"},"pl":{"type":"number","default":1.1,"description":"padding-left (rem)"},"pr":{"type":"number","default":1.1,"description":"padding-right (rem)"},"pt":{"type":"number","default":0.3,"description":"padding-top (rem)"},"pb":{"type":"number","default":0.3,"description":"padding-bottom (rem)"},"border_radius":{"type":"number","default":1,"description":"button border radius (rem)"},"tabindex":{"type":"number","default":0,"description":"tabindex for focus navigation"},"is_prevent_default":{"type":"boolean","default":false,"description":"prevents default on click event if true"},"is_stop_propagation":{"type":"boolean","default":false,"description":"stops event propagation on click if true"},"min_height":{"type":"number","default":3.4,"description":"minimum height of the button (rem)"},"fixed_width":{"type":"number","default":null,"description":"fixed width in rem"},"min_width":{"type":"number","default":null,"description":"minimum width in rem"},"is_compressed":{"type":"boolean","default":false,"description":"if true, sets button width to auto"},"is_pill":{"type":"boolean","default":false,"description":"if true, button is fully rounded"},"is_uniform":{"type":"boolean","default":false,"description":"if true, forces button height == width"},"cursor":{"type":"string","default":"pointer","description":"cursor style (pointer, move, etc.)"},"text_align":{"type":"string","default":"center","description":"how to align button text: left, center, or right"},"font_size":{"type":"number","default":1.6,"description":"font size in rem"},"line_height":{"type":"number","default":1.2,"description":"line-height for text"},"font_weight":{"type":"number","default":400,"description":"font weight (normal=400, bold=700, etc.)"},"text":{"type":"string","default":null,"description":"text label for the button"},"is_loading":{"type":"boolean","default":false,"description":"if true, a loading spinner replaces icon/text"},"is_disabled":{"type":"boolean","default":false,"description":"disables the button if true"},"selected_type":{"type":"string","default":null,"description":"visual marker (selected or half_selected) appended to the style"},"h":{"type":"number","default":null,"description":"color hue index for advanced color customization"},"c":{"type":"number","default":null,"description":"color chroma index for advanced color customization"},"l":{"type":"number","default":null,"description":"color luminance index for advanced color customization"},"color":{"type":"string","default":null,"description":"button base color (if not using derived defaults)"},"gradient_to_color":{"type":"string","default":null,"description":"button gradient end color (if not using derived defaults)"},"gradient_turn":{"type":"number","default":0.3,"description":"turn value for the button's linear-gradient (0 to 1 is a full 360° turn)"},"contrast_color":{"type":"string","default":null,"description":"text/icon color used on top of button background"},"border_color":{"type":"string","default":null,"description":"border color when type is outlined or a border is forced"},"hover_shadow_color":{"type":"string","default":"transparent","description":"shadow color on hover"},"hover_shadow_size":{"type":"number","default":1,"description":"shadow size on hover"},"on_click":{"type":"function","default":null,"description":"callback triggered upon button click"},"on_hover":{"type":"function","default":null,"description":"callback triggered on pointer enter/leave; receives true (enter) or false (leave)"},"is_simulated_active":{"type":"boolean","default":false,"description":"if true, button is forced into an active state for visual effect"}},"methods":{"success_trigger":{"description":"triggers a success state, displaying success icon for ~1.4s","parameters":{},"returns":"void"},"error_trigger":{"description":"triggers an error state, displaying error icon for ~1.4s","parameters":{},"returns":"void"},"icon_shimmy_trigger":{"description":"manually triggers the icon's shimmy animation if is_icon_shimmyable","parameters":{},"returns":"void"},"handle_click":{"description":"internal click handler that runs callbacks, sets success animation, etc.","parameters":{"e":"event"},"returns":"void"},"pointer_down":{"description":"pointerdown event to set is_pointer_down to true","parameters":{},"returns":"void"},"pointer_up":{"description":"pointerup event to reset is_pointer_down to false","parameters":{},"returns":"void"},"pointer_enter":{"description":"pointerenter event to set is_hovered to true and invoke on_hover(true)","parameters":{},"returns":"void"},"pointer_leave":{"description":"pointerleave event to set is_hovered to false and invoke on_hover(false)","parameters":{},"returns":"void"},"simulate_click":{"description":"simulates a click, briefly showing the pressed state","parameters":{},"returns":"void"},"focus":{"description":"programmatically sets focus to the button element","parameters":{},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique identifier for this button instance"},"type":{"type":"string","description":"the derived style type (primary, outlined, etc.)"},"ml":{"type":"number","description":"margin-left in rem"},"mr":{"type":"number","description":"margin-right in rem"},"mt":{"type":"number","description":"margin-top in rem"},"mb":{"type":"number","description":"margin-bottom in rem"},"pl":{"type":"number","description":"padding-left in rem"},"pr":{"type":"number","description":"padding-right in rem"},"pt":{"type":"number","description":"padding-top in rem"},"pb":{"type":"number","description":"padding-bottom in rem"},"border_radius":{"type":"number","description":"button border radius in rem"},"is_loading":{"type":"boolean","description":"shows a loading spinner if true"},"is_pointer_down":{"type":"boolean","description":"true while pointer is pressed"},"is_prevent_default":{"type":"boolean","description":"if true, prevents default event in handle_click"},"is_stop_propagation":{"type":"boolean","description":"if true, stops event propagation in handle_click"},"tabindex":{"type":"number","description":"button tabindex for keyboard focus"},"is_disabled":{"type":"boolean","description":"true if the button is disabled"},"selected_type":{"type":"string","description":"selected or half_selected style variant"},"is_hovered":{"type":"boolean","description":"true if pointer is hovering over the button"},"min_height":{"type":"number","description":"minimum height in rem"},"fixed_width":{"type":"number","description":"fixed button width in rem"},"min_width":{"type":"number","description":"minimum button width in rem"},"is_compressed":{"type":"boolean","description":"if true, sets width to auto"},"is_pill":{"type":"boolean","description":"true if button is pill shaped"},"is_uniform":{"type":"boolean","description":"true if button forces a uniform square shape"},"cursor":{"type":"string","description":"current cursor style"},"text_align":{"type":"string","description":"alignment for the text label"},"text":{"type":"string","description":"current text label of the button"},"is_success_animation":{"type":"boolean","description":"triggers success animation on click"},"font_size":{"type":"number","description":"font size in rem"},"line_height":{"type":"number","description":"text line-height"},"font_weight":{"type":"number","description":"text font-weight"},"color":{"type":"string","description":"base color for the button background"},"gradient_to_color":{"type":"string","description":"secondary color for a gradient background"},"gradient_turn":{"type":"number","description":"turn fraction for the linear gradient angle"},"contrast_color":{"type":"string","description":"color used for text or icons on top of background"},"border_color":{"type":"string","description":"border color if outlined or forced border is used"},"hover_shadow_color":{"type":"string","description":"shadow color on hover"},"hover_shadow_size":{"type":"number","description":"shadow size on hover"},"support_icon":{"type":"string","description":"the icon identifier the button is currently set to display"},"is_icon_bg_tint":{"type":"boolean","description":"true if there's a tinted background behind the icon"},"icon_deg":{"type":"number","description":"rotation in degrees for the icon"},"icon_sw":{"type":"number","description":"stroke width for the icon if applicable"},"icon_size":{"type":"number","description":"icon size in rem"},"icon_ml":{"type":"number","description":"icon left margin in rem"},"icon_mr":{"type":"number","description":"icon right margin in rem"},"icon_pos":{"type":"string","description":"icon position (left or right)"},"is_icon_shimmyable":{"type":"boolean","description":"true if icon shakes when hovered"},"icon_movement_stiffness":{"type":"number","description":"shimmy stiffness"},"icon_movement_damping":{"type":"number","description":"shimmy damping"},"aria_label":{"type":"string","description":"aria-label for accessibility"},"popover_target":{"type":"string","description":"id for associated popover element"},"is_no_wrap":{"type":"boolean","description":"true if text should not wrap"},"is_word_break_all":{"type":"boolean","description":"true if text can break at any character"},"is_simulated_active":{"type":"boolean","description":"forces button into an active state visually"},"is_success":{"type":"boolean","description":"true if button is showing success state"},"is_error":{"type":"boolean","description":"true if button is showing error state"},"icon_manager":{"type":"object","description":"the internally created icon manager for this button"}},"sample_code":"<script>\nimport { create_button_manager, Button } from \"sveltekit-ui\"\n\nlet example_button_manager = create_button_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Button manager={example_button_manager} />"},"checkbox":{"component_name":"Checkbox","builder_function_name":"create_checkbox_manager","description":"creates a checkbox, toggle, or dark theme switch with optional label, error states, and custom on/off values","config":{"type":{"type":"string","default":"checkbox","description":"the display variant: 'checkbox', 'toggle', or 'dark_theme'"},"val":{"type":"any","default":null,"description":"the current value of the checkbox, which can match on_val or off_val"},"on_val":{"type":"any","default":true,"description":"the value considered 'checked'"},"off_val":{"type":"any","default":false,"description":"the value considered 'unchecked'"},"label":{"type":"string","default":null,"description":"label text displayed beside the checkbox"},"name":{"type":"string","default":"checkbox","description":"the input name attribute"},"color":{"type":"string","default":"var(--primary-t)","description":"the base color for the checked state or toggle"},"is_required":{"type":"boolean","default":false,"description":"marks the input as required"},"is_read_only":{"type":"boolean","default":false,"description":"makes the checkbox read-only if true"},"is_disabled":{"type":"boolean","default":false,"description":"disables the checkbox if true"},"is_loading":{"type":"boolean","default":false,"description":"displays a loading spinner if true"},"size":{"type":"number","default":2.4,"description":"base size in rem for the checkbox or toggle"},"ml":{"type":"number","default":0,"description":"margin-left in rem"},"mr":{"type":"number","default":0,"description":"margin-right in rem"},"mt":{"type":"number","default":0,"description":"margin-top in rem"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem"},"error_message":{"type":"string","default":null,"description":"an error message displayed next to the checkbox"},"on_change":{"type":"function","default":null,"description":"callback fired when the checkbox toggles, receiving new value"},"on_hover_change":{"type":"function","default":null,"description":"callback fired on pointerenter/leave, receiving true or false"}},"methods":{"set_val":{"description":"sets the checkbox value to on_val or off_val; updates internal bool state","parameters":{"val_input":"any"},"returns":"void"},"set_val_from_bool":{"description":"sets checkbox to on/off based on a boolean, optionally triggering on_change","parameters":{"val_bool_input":"boolean","is_trigger_on_change":"boolean"},"returns":"void"},"handle_on_hover_change":{"description":"internal event that calls on_hover_change(true/false)","parameters":{"input":"boolean"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id generated for the checkbox input"},"type":{"type":"string","description":"the display variant (checkbox, toggle, or dark_theme)"},"val_initial":{"type":"any","description":"the initial value set from config"},"val":{"type":"any","description":"the current on/off value (on_val or off_val)"},"val_bool":{"type":"boolean","description":"true if current value matches on_val, false otherwise"},"off_val":{"type":"any","description":"the value for unchecked state"},"on_val":{"type":"any","description":"the value for checked state"},"name":{"type":"string","description":"the input name attribute"},"label":{"type":"string","description":"label text displayed beside the checkbox"},"color":{"type":"string","description":"the base color for the checked state or toggle"},"is_required":{"type":"boolean","description":"true if the field is required"},"is_read_only":{"type":"boolean","description":"true if the checkbox is read-only"},"is_disabled":{"type":"boolean","description":"true if the checkbox is disabled"},"is_loading":{"type":"boolean","description":"true if a loading spinner is shown"},"error_message":{"type":"string","description":"any error text displayed beside the label"},"size":{"type":"number","description":"base size in rem of the checkbox or toggle"},"ml":{"type":"number","description":"margin-left in rem"},"mr":{"type":"number","description":"margin-right in rem"},"mt":{"type":"number","description":"margin-top in rem"},"mb":{"type":"number","description":"margin-bottom in rem"},"check_icon_manager":{"type":"object","description":"icon manager used for the check mark"},"moon_icon_manager":{"type":"object","description":"icon manager used for the moon icon in dark_theme mode"},"sun_icon_manager":{"type":"object","description":"icon manager used for the sun icon in dark_theme mode"}},"sample_code":"<script>\nimport { create_checkbox_manager, Checkbox } from \"sveltekit-ui\"\n\nlet example_checkbox_manager = create_checkbox_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Checkbox manager={example_checkbox_manager} />"},"code":{"component_name":"Code","builder_function_name":"create_code_manager","description":"renders preformatted code content with a copy button","config":{"content":{"type":"any","default":null,"description":"the code content to display, can be string or object"},"language":{"type":"string","default":null,"description":"optional label indicating the code language"}},"methods":{"init":{"description":"initializes the copy button manager","parameters":{"config":"object"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id for this code block instance"},"copy_button_manager":{"type":"object","description":"button manager configured to copy the code content to clipboard"},"language":{"type":"string","description":"the language label for this code block"},"content":{"type":"any","description":"the displayed code content"}},"sample_code":"<script>\nimport { create_code_manager, Code } from \"sveltekit-ui\"\n\nlet example_code_manager = create_code_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Code manager={example_code_manager} />"},"auth_code_input":{"component_name":"AuthCodeInput","builder_function_name":"create_auth_code_input_manager","description":"renders a 6-digit numeric code input, typically used for one-time passcodes or verification codes","config":{"val":{"type":"string","default":null,"description":"current 6-digit code value"},"name":{"type":"string","default":"code","description":"name attribute for the input"},"is_required":{"type":"boolean","default":false,"description":"marks the input as required if true"},"is_read_only":{"type":"boolean","default":false,"description":"makes the input read-only if true"},"autocomplete":{"type":"string","default":"one-time-code","description":"determines the browser’s autocomplete type"},"is_valid":{"type":"boolean","default":null,"description":"optionally control or reflect validation state"},"is_disabled":{"type":"boolean","default":false,"description":"disables the input if true"},"border_radius":{"type":"number","default":1,"description":"border radius for the input container in rem"},"ml":{"type":"number","default":0,"description":"margin-left in rem"},"mr":{"type":"number","default":0,"description":"margin-right in rem"},"mt":{"type":"number","default":0,"description":"margin-top in rem"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem"},"on_change":{"type":"function","default":null,"description":"callback invoked when the input value changes, receives the cleaned value"},"on_sixth":{"type":"function","default":null,"description":"callback invoked when the input reaches 6 digits, receives the final code"}},"methods":{"set_val":{"description":"assigns a new code value to the input, strips non-numeric characters, calls on_change/on_sixth","parameters":{"input":"string"},"returns":"void"},"focus":{"description":"programmatically focuses the input element","parameters":{},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique identifier for the code input field"},"val":{"type":"string","description":"current stored code value"},"name":{"type":"string","description":"name attribute for the input field"},"is_required":{"type":"boolean","description":"true if the input is required"},"is_read_only":{"type":"boolean","description":"true if the code input is read-only"},"autocomplete":{"type":"string","description":"the browser autocomplete type, often 'one-time-code'"},"is_valid":{"type":"boolean","description":"reflects if the code is currently 6 digits"},"is_disabled":{"type":"boolean","description":"disables input if true"},"border_radius":{"type":"number","description":"border radius for the input container in rem"},"ml":{"type":"number","description":"margin-left in rem"},"mr":{"type":"number","description":"margin-right in rem"},"mt":{"type":"number","description":"margin-top in rem"},"mb":{"type":"number","description":"margin-bottom in rem"}},"sample_code":"<script>\nimport { create_auth_code_input_manager, AuthCodeInput } from \"sveltekit-ui\"\n\nlet example_auth_code_input_manager = create_auth_code_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<AuthCodeInput manager={example_auth_code_input_manager} />"},"color":{"component_name":"Color","builder_function_name":"create_color_manager","description":"displays a color swatch, optionally with details about its oklch components","config":{"val":{"type":"object","default":null,"description":"object with color properties { l, c, h, o, is_dark_theme_invert }"},"is_show_details":{"type":"boolean","default":false,"description":"whether the color's numeric details are shown"},"size":{"type":"number","default":3,"description":"the width/height in rem of the color preview"},"border_radius":{"type":"number","default":0.5,"description":"border radius in rem for the color preview box"}},"methods":{},"returned_properties":{"id":{"type":"string","description":"unique id for this color swatch instance"},"val":{"type":"object","description":"the color object used to generate the final color"},"color":{"type":"string","description":"the resulting color as an oklch() or transparent if null"},"is_show_details":{"type":"boolean","description":"true if color details (l, c, h, o, is_dark_theme_invert) are shown"},"size":{"type":"number","description":"the size in rem of the color preview"},"border_radius":{"type":"number","description":"the border radius in rem for the color box"}},"sample_code":"<script>\nimport { create_color_manager, Color } from \"sveltekit-ui\"\n\nlet example_color_manager = create_color_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Color manager={example_color_manager} />"},"color_input":{"component_name":"ColorInput","builder_function_name":"create_color_input_manager","description":"provides a UI to select or edit an oklch-based color with optional opacity, chroma, and hue controls","config":{"val":{"type":"object","default":null,"description":"initial color data with shape { l, c, h, o, is_dark_theme_invert } or null"},"label":{"type":"string","default":null,"description":"optional label displayed above the color input"},"is_show_opacity":{"type":"boolean","default":true,"description":"whether to show opacity picker controls"},"l_options":{"type":"array","default":"[0..24]","description":"the range of valid 'l' (lightness) indices"},"c_options":{"type":"array","default":"[0..24]","description":"the range of valid 'c' (chroma) indices"},"h_options":{"type":"array","default":"[0..24]","description":"the range of valid 'h' (hue) indices"},"o_options":{"type":"array","default":"[0..24]","description":"the range of valid 'o' (opacity) indices"},"on_change":{"type":"function","default":null,"description":"callback invoked whenever color values are updated"},"on_finish":{"type":"function","default":null,"description":"callback invoked when the user finishes color selection"}},"methods":{"init":{"description":"initializes internal state, sub-managers, and sets the initial value","parameters":{"config":"object"},"returns":"void"},"set_val":{"description":"updates the color object to the provided value or null","parameters":{"input":"object"},"returns":"void"},"set_lightness":{"description":"increments/decrements the 'l' value within the allowed range","parameters":{"l":"number","change":"number","is_ignore_on_change":"boolean"},"returns":"void"},"set_chroma":{"description":"increments/decrements the 'c' value within the allowed range","parameters":{"c":"number","change":"number"},"returns":"void"},"set_hue":{"description":"increments/decrements the 'h' value within the allowed range","parameters":{"h":"number","change":"number","is_ignore_on_change":"boolean"},"returns":"void"},"set_opacity":{"description":"increments/decrements the 'o' value within the allowed range","parameters":{"o":"number","change":"number"},"returns":"void"},"set_lightness_and_hue":{"description":"sets both lightness and hue simultaneously, optionally ignoring on_change callback","parameters":{"l_input":"number","h_input":"number"},"returns":"void"},"set_is_dark_theme_invert":{"description":"toggles is_dark_theme_invert boolean within the color object","parameters":{"input":"boolean"},"returns":"void"},"finish":{"description":"closes the popover and invokes on_finish with the current color object","parameters":{},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id for this color input instance"},"val_base":{"type":"object","description":"the default color object used if none is provided"},"val":{"type":"object","description":"the current color value or null if unset"},"label":{"type":"string","description":"an optional text label for the control"},"css_val":{"type":"string","description":"the color as an oklch() string or 'transparent' if none"},"is_show_opacity":{"type":"boolean","description":"true if the opacity picker is visible"},"l_options":{"type":"array","description":"the valid range of lightness values"},"c_options":{"type":"array","description":"the valid range of chroma values"},"h_options":{"type":"array","description":"the valid range of hue values"},"o_options":{"type":"array","description":"the valid range of opacity values"},"popover_manager":{"type":"object","description":"popover manager controlling the color selection popover"},"is_dark_theme_invert_checkbox_manager":{"type":"object","description":"checkbox manager controlling the is_dark_theme_invert toggle"},"toggle_button_manager":{"type":"object","description":"button manager used to open the color picker popover"},"finish_button_manager":{"type":"object","description":"button manager to finish color selection"},"lightness_up_button_manager":{"type":"object","description":"button manager to increment lightness"},"lightness_down_button_manager":{"type":"object","description":"button manager to decrement lightness"},"chroma_up_button_manager":{"type":"object","description":"button manager to increment chroma"},"chroma_down_button_manager":{"type":"object","description":"button manager to decrement chroma"},"hue_up_button_manager":{"type":"object","description":"button manager to increment hue"},"hue_down_button_manager":{"type":"object","description":"button manager to decrement hue"},"opacity_up_button_manager":{"type":"object","description":"button manager to increment opacity"},"opacity_down_button_manager":{"type":"object","description":"button manager to decrement opacity"},"set_null_button_manager":{"type":"object","description":"button manager to set the color value to null"}},"sample_code":"<script>\nimport { create_color_input_manager, ColorInput } from \"sveltekit-ui\"\n\nlet example_color_input_manager = create_color_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<ColorInput manager={example_color_input_manager} />"},"confetti":{"component_name":"Confetti","builder_function_name":"create_confetti_manager","description":"Creates a confetti animation with configurable item count, size, and random spread. There is a confetti component already in the Layout componet if full screen confetti is desired","config":{"type":{"type":"string","default":null,"description":"defines layout type (e.g. 'full' to fill screen) or null for local usage"},"amount":{"type":"number","default":50,"description":"how many confetti pieces to generate"},"size":{"type":"number","default":1.2,"description":"base size multiplier for each confetti piece in rem"},"x_range":{"type":"array","default":[-10,10],"description":"range for random x translation (in rem), e.g. [-10, 10]"},"x_spread":{"type":"number","default":0.9,"description":"scales how far confetti travels horizontally during the fall"},"y_range":{"type":"array","default":[-3,-10],"description":"range for random initial y position (in rem)"},"time_range":{"type":"number","default":50,"description":"range (in ms) added to each piece's start delay"},"duration":{"type":"number","default":2000,"description":"animation duration for each piece, in milliseconds"},"item_bg":{"type":"any","default":null,"description":"background for confetti items, can be array of strings or 'rainbow'"},"fall_distance":{"type":"string","default":"10rem","description":"vertical distance that confetti travels before disappearing"},"border_radius":{"type":"number","default":0.1,"description":"border radius (rem) applied to each piece"}},"methods":{"show_confetti":{"description":"resets the confetti state, preps items, then triggers the confetti animation","parameters":{},"returns":"void"}},"returned_properties":{"type":{"type":"string","description":"layout type (e.g. 'full' for full-screen confetti) if set"},"confetti_prepped":{"type":"array","description":"array of pre-calculated confetti items with random transformations"},"is_show":{"type":"boolean","description":"indicates if confetti is currently visible"},"border_radius":{"type":"number","description":"border radius in rem for each piece"},"fall_distance":{"type":"string","description":"vertical distance that confetti falls before disappearing"},"size":{"type":"number","description":"base size multiplier (rem) for each confetti piece"},"transition_duration":{"type":"number","description":"duration (ms) for each confetti piece’s animation"},"x_spread":{"type":"number","description":"horizontal spread factor used in the confetti path animation"}},"sample_code":"<script>\nimport { create_confetti_manager, Confetti } from \"sveltekit-ui\"\n\nlet example_confetti_manager = create_confetti_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Confetti manager={example_confetti_manager} />"},"content":{"component_name":"Content","builder_function_name":"create_content_manager","description":"manages a nested tree of typed components, allowing dynamic rendering based on type_ids and attributes","config":{"val":{"type":"object","default":null,"description":"the top-level content node containing { type_id, selector_id, attributes, children }"},"is_dark_theme":{"type":"boolean","default":false,"description":"if true, toggles usage of dark theme variants for certain components"},"storage_path":{"type":"string","default":"/api/v1/storage/{storage_id}","description":"template path for retrieving stored media, used by some child components (e.g. image, audio)"},"variables":{"type":"any","default":null,"description":"external data object used by show_conditions or variable-based attributes"},"mapkit_js_token":{"type":"string","default":null,"description":"token for mapkit if needed by location-based components"},"on_event":{"type":"function","default":null,"description":"callback for setting or manipulating variables when certain components update"},"on_search_table_row_ids":{"type":"function","default":null,"description":"callback that returns table row ids for table-row-based inputs (like table_row_id_input)"},"table_options":{"type":"object","default":null,"description":"an object of additional options passed along to table-based components if present"}},"methods":{"init":{"description":"initializes the manager, preparing the top-level content node and any children","parameters":{"config":"object"},"returns":"void"},"prepare_component_and_children":{"description":"recursively creates the required sub-managers for the given node, returning a structured object with type_id, manager, and children","parameters":{"val":"object"},"returns":"object"},"pass_event_down":{"description":"allows external events to propagate through children and possibly trigger state updates","parameters":{"input":"object"},"returns":"void"},"set_variable_at_path":{"description":"handles changes to variables via the on_event callback, adjusting stored data by array/object indexing","parameters":{"path":"array","value":"any","type":"string (optional: 'insert', 'delete', 'set_key', or null)"},"returns":"any"}},"returned_properties":{"val_prepped":{"type":"object","description":"the processed content node with type, manager, and possible children"},"definition_stack":{"type":"any","description":"the definition_stack variables reference passed in config, potentially used by show_conditions"}},"sample_code":"<script>\nimport { create_content_manager, Content } from \"sveltekit-ui\"\n\nlet example_content_manager = create_content_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Content manager={example_content_manager} />"},"content_input":{"component_name":"ContentInput","builder_function_name":"create_content_input_manager","description":"offers a panel builder for creating and editing a nested content structure (ASTC format) with interactive insertion, removal, and attribute editing of various node types","config":{"val":{"type":"object","default":null,"description":"the initial top-level ASTC node"},"on_change":{"type":"function","default":null,"description":"callback triggered when the ASTC structure changes"},"on_finish":{"type":"function","default":null,"description":"callback triggered when the user finishes editing"},"on_event":{"type":"function","default":null,"description":"callback invoked for certain child content manager events"},"definition_stack":{"type":"any","default":null,"description":"external definition_stack variables object for show_conditions or other variable-based usage"},"mapkit_js_token":{"type":"string","default":null,"description":"token for mapkit if needed by location-based nodes"},"storage":{"type":"any","default":null,"description":"storage definition used when uploading or managing files"},"storage_default_folder_path":{"type":"string","default":null,"description":"default folder path for storage uploads"},"storage_path":{"type":"string","default":null,"description":"template path for retrieving stored media if needed by child nodes"}},"methods":{"init":{"description":"initial setup; stores the initial value, populates managers, and sets the selected version to 0","parameters":{"config":"object"},"returns":"void"},"clean_content":{"description":"validates a node's type, ensures allowed attributes, and recursively computes text stats","parameters":{"val":"object"},"returns":"object with { warnings, word_count, character_count, embedding_text, total_elements, total_nests, val }"},"add_version":{"description":"inserts a new version of the ASTC into the version stack, triggers on_change if provided","parameters":{"version":"object"},"returns":"void"},"finish":{"description":"calls on_finish with the current astc structure","parameters":{},"returns":"void"},"copy_markdown":{"description":"copies the entire current ASTC as markdown to clipboard","parameters":{},"returns":"void"},"copy_astc":{"description":"copies the entire current ASTC (json) to clipboard","parameters":{},"returns":"void"},"copy_text":{"description":"copies an embedding-friendly text representation of the ASTC to clipboard","parameters":{},"returns":"void"},"set_focused_selector_id":{"description":"tracks which selector id is currently focused in the UI","parameters":{"selector_id":"string"},"returns":"void"},"open_edit_markdown_modal":{"description":"opens a popover with the current ASTC as markdown, allowing direct editing/replacement","parameters":{},"returns":"void"},"set_astc_from_markdown":{"description":"parses markdown (or astc) from a text area, updates the current version with that content","parameters":{},"returns":"void"},"initiate_add_sibling_el_to_selector":{"description":"prompts the user to add a sibling node right below a given selector id","parameters":{"selector_id":"string"},"returns":"void"},"add_sibling_el":{"description":"creates a new sibling node (or uses a provided astc node) below the specified selector id","parameters":{"selector_id":"string","el_type_id":"string | null","element_to_add":"object"},"returns":"void"},"initiate_add_child_el_to_selector":{"description":"prompts the user to add a child node under a given selector id","parameters":{"selector_id":"string"},"returns":"void"},"add_child_el":{"description":"creates a new child node of the specified type, appended to an element’s children array","parameters":{"selector_id":"string","type_id":"string"},"returns":"void"},"add_astc_to_element_children":{"description":"directly appends a parsed ASTC string as a child to a given element’s children array","parameters":{"element":"object"},"returns":"void"},"copy_element_astc":{"description":"copies the ASTC json for a specific node identified by selector_id","parameters":{"selector_id":"string"},"returns":"void"},"copy_element_markdown":{"description":"copies the markdown representation for a specific node identified by selector_id","parameters":{"selector_id":"string"},"returns":"void"},"shift_el":{"description":"moves a node up or down within its siblings by a specified integer offset","parameters":{"selector_id":"string","i_shift":"number"},"returns":"void"},"delete_el":{"description":"removes a node by selector_id from the current ASTC","parameters":{"selector_id":"string"},"returns":"void"},"open_edit_element_attributes_popover":{"description":"opens an attribute editor popover for a given node identified by selector_id","parameters":{"selector_id":"string"},"returns":"void"},"set_element_attribute":{"description":"sets a single attribute on a node identified by selector_id","parameters":{"selector_id":"string","attribute":"string","val":"any"},"returns":"void"},"set_element_attributes":{"description":"overwrites the attributes object for a node identified by selector_id","parameters":{"selector_id":"string","new_attributes":"object"},"returns":"void"},"pass_event_down":{"description":"propagates external events through the content manager, used by child components for updates","parameters":{"input":"object"},"returns":"void"},"get_new_element_to_add":{"description":"creates a blank node of the specified type, initializing children & attributes from node_types","parameters":{"type_id":"string"},"returns":"object"},"calc_child_element_options":{"description":"determines the set of valid child node types that can be appended to a given element","parameters":{"element":"object","is_sibling":"boolean"},"returns":"array of available type_ids"}},"returned_properties":{"id":{"type":"string","description":"unique identifier for this content input instance"},"val":{"type":"object","description":"the current ASTC version being displayed"},"variables_data_type":{"type":"any","description":"the data-type object used for attribute editing"},"variables":{"type":"any","description":"the variables reference for conditions or loops"},"versions_len":{"type":"number","description":"the total number of versions in the version stack"},"selected_version_prepped":{"type":"object","description":"the currently selected version in a processed/prepped form"},"storage":{"type":"any","description":"storage definition object if used for file management"},"storage_default_folder_path":{"type":"string","description":"default folder path for storage"},"focused_selector_id":{"type":"string","description":"tracks the selector id of the currently focused node"},"paste_astc_markdown_popover_manager":{"type":"object","description":"popover manager for switching between astc or markdown input"},"paste_astc_markdown_location_to_add_element":{"type":"object","description":"stores the context of adding astc/markdown content as child or sibling"},"paste_astc_markdown_dropdown_manager":{"type":"object","description":"dropdown manager to select 'astc' or 'markdown' as input"},"paste_astc_markdown_text_input_manager":{"type":"object","description":"text input manager containing either markdown or a raw astc object"},"paste_astc_markdown_finish_button_manager":{"type":"object","description":"button manager to finalize the markdown/astc insertion"},"location_to_add_element":{"type":"string","description":"tracks where a new element is inserted: 'child' or 'sibling'"},"astc_element_string":{"type":"string","description":"transient state for storing raw astc text being inserted"},"all_selector_ids":{"type":"array","description":"list of all selector ids found in the current ASTC"},"preempt_add_first_element_button_manager":{"type":"object","description":"button manager offering to add the very first element if none exists"},"first_el_add_element_manager":{"type":"object","description":"add element manager used for adding an initial node"},"content_manager":{"type":"object","description":"the underlying content manager that renders the ASTC"},"content_overall_manager":{"type":"object","description":"an object with references for handling focus and attribute editing popovers"},"attributes_input":{"type":"object","description":"the manager for attributes editing popover"}},"sample_code":"<script>\nimport { create_content_input_manager, ContentInput } from \"sveltekit-ui\"\n\nlet example_content_input_manager = create_content_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<ContentInput manager={example_content_input_manager} />"},"cron_input":{"component_name":"CronInput","builder_function_name":"create_cron_input_manager","description":"provides a popover-based UI for setting a cron expression (minute, hour, day-of-month, month, and day-of-week)","config":{"val":{"type":"string","default":null,"description":"the raw cron expression"},"label":{"type":"string","default":null,"description":"optional label displayed next to the cron input"},"is_disabled":{"type":"boolean","default":false,"description":"disables the input if true"},"is_nullable":{"type":"boolean","default":true,"description":"allows the cron to be null if true"},"is_compressed":{"type":"boolean","default":true,"description":"if true, sets button styling to compressed"},"is_popover":{"type":"boolean","default":true,"description":"if true, opens the cron input in a popover"},"ml":{"type":"number","default":0,"description":"margin-left in rem"},"mr":{"type":"number","default":0,"description":"margin-right in rem"},"mt":{"type":"number","default":0,"description":"margin-top in rem"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem"},"on_finish":{"type":"function","default":null,"description":"callback triggered when the user clicks 'finish', receives the validated cron"}},"methods":{"init":{"description":"initializes the manager, sets up internal text input, popover, and control buttons","parameters":{"config":"object"},"returns":"void"},"finish_cron":{"description":"calls on_finish with the current cron value if provided, then closes the popover","parameters":{},"returns":"void"},"set_attributes":{"description":"updates the manager’s config attributes (label, disabled, etc.)","parameters":{"input":"object"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique identifier for this cron input instance"},"label":{"type":"string","description":"optional label displayed next to the input"},"val":{"type":"string","description":"cleaned, fully formed cron expression or null"},"is_nullable":{"type":"boolean","description":"allows the cron to be null if true"},"description":{"type":"string","description":"english-like description of the cron schedule"},"is_disabled":{"type":"boolean","description":"disables the input if true"},"is_compressed":{"type":"boolean","description":"styles the button in a compressed manner if true"},"is_valid":{"type":"boolean","description":"indicates if the provided cron expression is valid"},"is_popover":{"type":"boolean","description":"if true, the cron input is displayed in a popover"},"ml":{"type":"number","description":"margin-left in rem"},"mr":{"type":"number","description":"margin-right in rem"},"mt":{"type":"number","description":"margin-top in rem"},"mb":{"type":"number","description":"margin-bottom in rem"},"popover_manager":{"type":"object","description":"popover manager controlling the dropdown panel"},"popover_toggle_button_manager":{"type":"object","description":"button manager used to open/close the popover"},"finish_button_manager":{"type":"object","description":"button manager that finalizes the selected cron"},"cron_text_input_manager":{"type":"object","description":"text input manager for editing the raw cron expression"}},"sample_code":"<script>\nimport { create_cron_input_manager, CronInput } from \"sveltekit-ui\"\n\nlet example_cron_input_manager = create_cron_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<CronInput manager={example_cron_input_manager} />"},"dropdown":{"component_name":"Dropdown","builder_function_name":"create_dropdown_manager","description":"provides a dropdown or horizontal selector interface to select from an array of options, with optional search support and multi-selection","config":{"val":{"type":"any","default":null,"description":"the current selection; can be a single value or array for multiselect"},"options":{"type":"array","default":[],"description":"the array of selectable items; each item can be a simple value or an object"},"on_change":{"type":"function","default":null,"description":"callback invoked on each selection, receiving the new val"},"on_item_click":{"type":"function","default":null,"description":"callback invoked whenever an item is clicked, receiving the item object"},"on_dropdown_opened":{"type":"function","default":null,"description":"callback triggered when the dropdown popover is opened"},"on_dropdown_closed":{"type":"function","default":null,"description":"callback triggered when the dropdown popover is closed"},"on_search":{"type":"function","default":null,"description":"optional async callback for searching items, called with { input, id } and returning { options }"},"label":{"type":"string","default":null,"description":"label text displayed above or near the dropdown"},"type":{"type":"string","default":"dropdown","description":"mode: 'dropdown' or 'horiz_selector'"},"is_collapsed":{"type":"boolean","default":false,"description":"if true, operates in 'collapsed' mode for toggling"},"val_key":{"type":"string","default":"key","description":"key in each option object used to identify the value"},"row_display_keys":{"type":"array","default":["name"],"description":"array of keys from which to build a display string for each row"},"button_display_keys":{"type":"array","default":["name"],"description":"array of keys used to show text in the dropdown button"},"is_multiselect":{"type":"boolean","default":false,"description":"if true, multiple values can be selected"},"is_set_null_button":{"type":"boolean","default":false,"description":"if true, provides a button to clear the selection"},"is_disabled":{"type":"boolean","default":false,"description":"disables the entire control if true"},"header":{"type":"string","default":null,"description":"header text for horizontal selector"},"header_icon":{"type":"string","default":null,"description":"icon id displayed next to header if using horiz_selector"},"header_icon_deg":{"type":"number","default":0,"description":"icon rotation in degrees for the header icon"},"min_header_width":{"type":"number","default":2,"description":"minimum width (rem) reserved for the header text in horiz_selector"},"spacer_color":{"type":"string","default":"var(--shadow2-t)","description":"color for the vertical spacer in horiz_selector"},"error_message":{"type":"string","default":null,"description":"error text displayed under the label"},"placeholder":{"type":"string","default":"Select","description":"placeholder text if no selection is made"},"target_width":{"type":"number","default":250,"description":"popover width in px"},"target_height":{"type":"number","default":200,"description":"popover height in px"},"font_weight":{"type":"number","default":500,"description":"font weight for displayed items"},"font_size":{"type":"number","default":1.2,"description":"font size (rem) for displayed items"},"is_show_x":{"type":"boolean","default":false,"description":"if true, an x to close the popover is shown"},"text_align":{"type":"string","default":"left","description":"text alignment for items (left, center, right)"},"justify_content":{"type":"string","default":"space-between","description":"justification for label+arrow in the default button"},"is_show_arrow":{"type":"boolean","default":true,"description":"if true, an arrow toggle is shown in the button"},"button_type":{"type":"string","default":"outlined","description":"style type for the toggle button (primary, outlined, etc.)"},"selected_font_size":{"type":"number","default":null,"description":"optional alternate font size used specifically for the selection in the toggle button"},"is_button_compressed":{"type":"boolean","default":false,"description":"makes the dropdown button narrower if true"},"is_searchable":{"type":"boolean","default":false,"description":"if true, shows a text input for filtering or triggering an on_search callback"},"is_hide_button":{"type":"boolean","default":false,"description":"if true, hides the main toggle button for a fully open experience"},"anchor_id":{"type":"string","default":null,"description":"specifies the element id to anchor the popover, or defaults to the toggle button"},"ml":{"type":"number","default":0,"description":"margin-left in rem for the button"},"mr":{"type":"number","default":0,"description":"margin-right in rem for the button"},"mt":{"type":"number","default":0,"description":"margin-top in rem for the button"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem for the button"},"item_mb":{"type":"number","default":0,"description":"margin-bottom in rem for each dropdown item"}},"methods":{"init":{"description":"sets up popover, toggle button, filtering, search input, etc.","parameters":{"config":"object"},"returns":"void"},"item_clicked":{"description":"handles item click logic (single or multi-select), calls on_change and on_item_click if provided","parameters":{"item":"object"},"returns":"void"},"set_val":{"description":"manually sets the current selection val","parameters":{"input":"any"},"returns":"void"},"set_options":{"description":"replaces the current options array; triggers filtered button update","parameters":{"input":"array"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique identifier for this dropdown instance"},"type":{"type":"string","description":"mode: 'dropdown' or 'horiz_selector'"},"is_collapsed":{"type":"boolean","description":"if true, collapses the dropdown panel"},"val":{"type":"any","description":"current single or multi-selection"},"val_key":{"type":"string","description":"property in options used as the unique key"},"row_display_keys":{"type":"array","description":"properties used to build displayed text for items"},"button_display_keys":{"type":"array","description":"properties shown in the toggle button"},"options":{"type":"array","description":"the array of items displayed in the dropdown"},"is_multiselect":{"type":"boolean","description":"if true, multiple items can be selected simultaneously"},"is_set_null_button":{"type":"boolean","description":"if true, includes a 'set to null' button in the dropdown"},"is_disabled":{"type":"boolean","description":"disables the control if true"},"header":{"type":"string","description":"header label when in horiz_selector mode"},"header_icon":{"type":"string","description":"icon id displayed next to the header"},"header_icon_deg":{"type":"number","description":"rotation in degrees for the header icon"},"min_header_width":{"type":"number","description":"minimum width in rem for the header region"},"spacer_color":{"type":"string","description":"color for a vertical spacer in horiz_selector"},"label":{"type":"string","description":"label text displayed above the dropdown"},"error_message":{"type":"string","description":"error message displayed"},"placeholder":{"type":"string","description":"placeholder text if no item is selected"},"target_width":{"type":"number","description":"popover width in px"},"target_height":{"type":"number","description":"popover height in px"},"font_weight":{"type":"number","description":"font weight of the displayed items"},"font_size":{"type":"number","description":"font size (rem) of the displayed items"},"is_show_x":{"type":"boolean","description":"if true, displays an 'x' to close the popover"},"text_align":{"type":"string","description":"alignment for the item text (left, center, right)"},"justify_content":{"type":"string","description":"how the label and arrow are spaced in the toggle button"},"is_show_arrow":{"type":"boolean","description":"shows an arrow indicator if true"},"button_type":{"type":"string","description":"the style type for the toggle button, e.g. 'outlined'"},"selected_font_size":{"type":"number","description":"alternate font size used specifically for the selected value"},"is_button_compressed":{"type":"boolean","description":"makes the toggle button narrower if true"},"is_searchable":{"type":"boolean","description":"if true, shows a search text input for filtering options"},"is_hide_button":{"type":"boolean","description":"if true, hides the main toggle button"},"item_mb":{"type":"number","description":"margin-bottom (rem) for each item in the dropdown"},"ml":{"type":"number","description":"margin-left (rem) for the main button"},"mr":{"type":"number","description":"margin-right (rem) for the main button"},"mb":{"type":"number","description":"margin-bottom (rem) for the main button"},"mt":{"type":"number","description":"margin-top (rem) for the main button"},"search_text_input_manager":{"type":"object","description":"text input manager used for searching options if is_searchable is true"},"filtered_button_managers":{"type":"array","description":"the array of dynamically generated button managers for each filtered option"},"popover_manager":{"type":"object","description":"popover manager controlling the dropdown's popover"},"toggle_button_manager":{"type":"object","description":"button manager for toggling the popover"},"toggle_button_text":{"type":"string","description":"the derived text displayed on the toggle button"},"clear_button_manager":{"type":"object","description":"button manager for clearing the selection (if is_set_null_button is true)"},"header_icon_manager":{"type":"object","description":"icon manager for the header icon if in horiz_selector mode"},"search_requests_is_loading":{"type":"array","description":"tracks loading states of async search calls"}},"sample_code":"<script>\nimport { create_dropdown_manager, Dropdown } from \"sveltekit-ui\"\n\nlet example_dropdown_manager = create_dropdown_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Dropdown manager={example_dropdown_manager} />"},"email_address":{"component_name":"EmailAddress","builder_function_name":"create_email_address_manager","description":"displays an email address with quick copy and mailto actions","config":{"val":{"type":"string","default":null,"description":"the email address value"}},"methods":{"mailto":{"description":"opens the user's default mail client with a new message to the email address","parameters":{},"returns":"void"}},"returned_properties":{"val":{"type":"string","description":"the current email address value"},"is_valid":{"type":"boolean","description":"true if the string is syntactically a valid email address"},"copy_button_manager":{"type":"object","description":"button manager to copy the email address to the clipboard"},"mail_to_button_manager":{"type":"object","description":"button manager to open 'mailto' link for the email address"}},"sample_code":"<script>\nimport { create_email_address_manager, EmailAddress } from \"sveltekit-ui\"\n\nlet example_email_address_manager = create_email_address_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<EmailAddress manager={example_email_address_manager} />"},"error_x":{"component_name":"ErrorX","is_not_builder":true,"description":"Animated X icon used to indicate errors or issues, with customizable appearance and animation.","properties":{"is_show":{"type":"boolean","default":true,"description":"Determines whether the ErrorX icon is displayed."},"color":{"type":"CSS color","default":"var(--error-t)","description":"The color of the X icon."},"sw":{"type":"number","default":30,"description":"Stroke width of the X icon lines."}},"sample_code":"<script>\nimport { ErrorX } from \"sveltekit-ui\"\n</script>\n\n<ErrorX some_property=\"example\" />"},"eye":{"component_name":"Eye","is_not_builder":true,"description":"Interactive eye icon for toggling visibility, such as showing or hiding passwords. Supports customization of color and stroke width, and optional state binding.","properties":{"is_eye_shown":{"type":"boolean","default":false,"description":"Determines whether the eye icon is shown (visible) or the eye_not icon."},"is_bind_val":{"type":"boolean","default":false,"description":"If true, toggles the internal state `is_eye_shown` when clicked."},"eye_color":{"type":"CSS color","default":"var(--g6-t)","description":"Color of the eye icon."},"sw":{"type":"number","default":30,"description":"Stroke width of the eye icon lines."},"on_change":{"type":"function","default":null,"description":"Callback function triggered when the eye icon is toggled. Receives the new `is_eye_shown` state as an argument."}},"sample_code":"<script>\nimport { Eye } from \"sveltekit-ui\"\n</script>\n\n<Eye some_property=\"example\" />"},"file_input":{"component_name":"FileInput","builder_function_name":"create_file_input_manager","description":"allows users to select or drop files; optionally multiple, with drag-and-drop area and custom validation","config":{"val":{"type":"any","default":null,"description":"the current file or array of files selected"},"label":{"type":"string","default":null,"description":"label for the file input"},"name":{"type":"string","default":"file","description":"the name attribute for the underlying file input element"},"is_required":{"type":"boolean","default":false,"description":"marks the input as required"},"is_read_only":{"type":"boolean","default":false,"description":"makes the file input read-only if true"},"accept":{"type":"array","default":["image/png","image/jpeg","image/webp","image/gif","image/avif","image/svg+xml","application/pdf","video/mp4","audio/mpeg","audio/aac","application/json"],"description":"the accepted file types"},"is_multiselect":{"type":"boolean","default":false,"description":"if true, the file input accepts multiple files"},"is_disabled":{"type":"boolean","default":false,"description":"disables file input if true"},"border_radius":{"type":"number","default":2,"description":"border radius in rem for the drop zone"},"height":{"type":"string","default":null,"description":"height (e.g., '200px') of the drop zone; if null, auto-sizes"},"icon_color":{"type":"string","default":"var(--primary-t)","description":"color for the drop zone icon"},"border_color":{"type":"string","default":"aabbccff","description":"hex color used for the dashed border"},"is_drop_zone":{"type":"boolean","default":true,"description":"if true, enables drag-and-drop area"},"is_hide_drop_zone_if_file":{"type":"boolean","default":true,"description":"if true and a file is already selected, hides the drop zone"},"ml":{"type":"number","default":0,"description":"margin-left in rem"},"mr":{"type":"number","default":0,"description":"margin-right in rem"},"mt":{"type":"number","default":0,"description":"margin-top in rem"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem"},"select_file_button_text":{"type":"string","default":null,"description":"custom text for the 'select file' button"},"on_get_file":{"type":"function","default":null,"description":"callback when a file is selected or dropped; receives val"},"on_clear_files":{"type":"function","default":null,"description":"callback when files are cleared by the user"}},"methods":{"init":{"description":"initializes the file input manager and supporting managers (icon, buttons, etc.)","parameters":{"config":"object"},"returns":"void"},"get_file":{"description":"handles the <input type='file'> onchange event, sets val, and calls on_get_file if provided","parameters":{"e":"event"},"returns":"void"},"drop_handler":{"description":"handles drag-and-drop events, sets val for accepted file types, populates error_message otherwise","parameters":{"ev":"event"},"returns":"void"},"clear_files":{"description":"clears the currently selected file(s) and calls on_clear_files if provided","parameters":{},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id for this file input instance"},"val":{"type":"any","description":"the currently selected file or an array of files"},"name":{"type":"string","description":"the name attribute of the underlying file input"},"label":{"type":"string","description":"label text displayed above the file input"},"is_required":{"type":"boolean","description":"true if the field is required"},"is_read_only":{"type":"boolean","description":"true if file input is read-only"},"accept":{"type":"array","description":"file type strings that are acceptable"},"is_multiselect":{"type":"boolean","description":"true if multiple files can be selected"},"is_disabled":{"type":"boolean","description":"if true, the file input is disabled"},"border_radius":{"type":"number","description":"border radius (rem) for the drop zone"},"height":{"type":"string","description":"custom height (e.g. '200px') for the drop zone"},"icon_color":{"type":"string","description":"the color used for the file drop icon"},"border_color":{"type":"string","description":"the color used for the dashed border"},"is_drop_zone":{"type":"boolean","description":"enables drag-and-drop if true"},"is_hide_drop_zone_if_file":{"type":"boolean","description":"hides drop zone if a file is already selected"},"ml":{"type":"number","description":"margin-left in rem"},"mr":{"type":"number","description":"margin-right in rem"},"mt":{"type":"number","description":"margin-top in rem"},"mb":{"type":"number","description":"margin-bottom in rem"},"select_file_button_text":{"type":"string","description":"custom text for the 'select file' button"},"error_message":{"type":"string","description":"shows errors if a dropped file does not match accepted types, etc."},"svg_bg":{"type":"string","description":"background-image dataurl for the dashed border overlay"},"error_button_manager":{"type":"object","description":"button manager to dismiss the displayed error message"},"clear_files_button_manager":{"type":"object","description":"button manager to clear the currently selected file(s)"},"file_drop_icon_manager":{"type":"object","description":"icon manager for the displayed file drop icon"}},"sample_code":"<script>\nimport { create_file_input_manager, FileInput } from \"sveltekit-ui\"\n\nlet example_file_input_manager = create_file_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<FileInput manager={example_file_input_manager} />"},"hamburger":{"component_name":"Hamburger","is_not_builder":true,"description":"Animated hamburger menu icon that toggles to an X. Supports customizable colors, stroke width, state binding, and callbacks.","properties":{"val":{"type":"boolean","default":false,"description":"Represents the current state of the hamburger icon. `false` for hamburger, `true` for X."},"is_bind_val":{"type":"boolean","default":false,"description":"If `true`, the component manages its own `val` state internally. If `false`, the state is controlled externally."},"color_base":{"type":"CSS color","default":"var(--g14-t)","description":"Base color of the hamburger lines."},"color_hover":{"type":"CSS color","default":"var(--primary-t)","description":"Color of the hamburger lines when hovered."},"sw":{"type":"number","default":30,"description":"Stroke width of the hamburger lines."},"on_change":{"type":"function","default":null,"description":"Callback function triggered when the hamburger icon is toggled. Receives the new `val` state as an argument."}},"sample_code":"<script>\nimport { Hamburger } from \"sveltekit-ui\"\n</script>\n\n<Hamburger some_property=\"example\" />"},"horiz_scroll_box":{"component_name":"HorizScrollBox","is_not_builder":true,"description":"A horizontally scrollable container with optional left and right scroll arrows. Supports dynamic content and smooth scrolling interactions.","properties":{"children":{"type":"snippet","default":null,"description":"Content to be displayed within the scrollable area."},"container_width":{"type":"number","default":null,"description":"Width of the container. Automatically bound to the container's offsetWidth."},"content_width":{"type":"number","default":null,"description":"Width of the scrollable content. Automatically bound to the content's clientWidth."},"show_left_arrow":{"type":"boolean","default":false,"description":"Indicates whether the left scroll arrow is visible. Automatically calculated based on scroll position."},"show_right_arrow":{"type":"boolean","default":false,"description":"Indicates whether the right scroll arrow is visible. Automatically calculated based on scroll position and content width."},"left_arrow_color":{"type":"CSS color","default":"var(--g8-t)","description":"Base color of the left arrow icon. Changes to `var(--g4-t)` when hovered or active."},"right_arrow_color":{"type":"CSS color","default":"var(--g8-t)","description":"Base color of the right arrow icon. Changes to `var(--g4-t)` when hovered or active."},"arrow_icon_size":{"type":"number","default":1.2,"description":"Size of the left and right arrow icons in rem."},"arrow_icon_stroke_width":{"type":"number","default":50,"description":"Stroke width of the left and right arrow icons."},"scroll_speed":{"type":"number","default":0.5,"description":"Speed of the continuous scroll when holding down an arrow."}},"sample_code":"<script>\nimport { HorizScrollBox } from \"sveltekit-ui\"\n</script>\n\n<HorizScrollBox some_property=\"example\" />"},"icon":{"component_name":"Icon","builder_function_name":"create_icon_manager","description":"renders an inline svg icon from a fixed set of icon_ids, with optional color, rotation, and animation","config":{"icon_id":{"type":"string","default":null,"description":"identifies the icon to render (e.g. 'arrow', 'check', 'trashcan').","options":["arrow","arrow_tailed","calendar","magnifying_glass","chart","row_item","chart_group","check","copy","drag_grip","edit","link","link_internal","list","minus","plus","rotate","refresh","sort","table","trashcan","x","three_dots","clock","sun","moon","smile_face","frown_face","nuetral_face","curved_arrow","pointer_hand","touch_circle","profile","share","invite","feedback","idea","ar_one_to_one","ar_four_to_three","ar_three_to_two","ar_sixteen_to_nine","crop","resize","save","folder","file","file_drop","file_dropped","file_add","linked","unlinked","sliders","brain","brush","redo_arrow","undo_arrow","opposing_arrows","photo","send","clipboard","download","heart","star","search","bolt","branch","code","comment","gear","house","unlocked","locked","tag","play","pause","volume","speech","warning","reply","reply_all","forward","mail","mail_opened","mail_received","mail_sent","mail_sent_opened","pinpoint","paperclip"]},"deg":{"type":"number","default":0,"description":"icon rotation in degrees"},"color":{"type":"string","default":"var(--g4-t)","description":"stroke color for the icon"},"color_alt":{"type":"string","default":"var(--g12-t)","description":"alternate color (used in certain icons like 'sort' for ascending vs. descending). if not used, it falls back to the main color"},"fill":{"type":"string","default":"none","description":"svg fill color (e.g., 'none' or a color hex)"},"size":{"type":"number","default":2,"description":"icon size in rem"},"sw":{"type":"number","default":60,"description":"stroke width setting for the icon"},"ml":{"type":"number","default":0,"description":"margin-left in rem"},"mr":{"type":"number","default":0,"description":"margin-right in rem"},"mt":{"type":"number","default":0,"description":"margin-top in rem"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem"},"sort_state":{"type":"string","default":null,"description":"used by the 'sort' icon to highlight ascending or descending arrow: 'asc', 'desc', or null"},"is_shimmy_infinite":{"type":"boolean","default":false,"description":"if true, the icon keeps rotating slightly (shimmy) forever"},"is_shimmyable":{"type":"boolean","default":false,"description":"if true, icon can be triggered to shimmy for 1s with trigger_shimmy()"},"movement_stiffness":{"type":"number","default":0.1,"description":"reserved for future motion config (svelte spring or similar)"},"movement_damping":{"type":"number","default":0.1,"description":"reserved for future motion config (svelte spring or similar)"},"id":{"type":"string","default":null,"description":"unique id for the icon. if not provided, a random id is generated"}},"methods":{"trigger_shimmy":{"description":"activates a shimmy animation for ~1 second, if is_shimmyable is true","parameters":{},"returns":"void"},"set_attributes":{"description":"updates the manager's config based on a new input object","parameters":{"input":"object"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id used in the dom for the icon container"},"icon_id":{"type":"string","description":"current icon id specifying which path or group of paths is rendered"},"deg":{"type":"number","description":"the icon's current rotation in degrees"},"deg_spring":{"type":"number","description":"a placeholder for a svelte motion spring around deg (not fully implemented)"},"color":{"type":"string","description":"the main stroke color"},"color_alt":{"type":"string","description":"an optional alternate color, used in certain icons (e.g. 'sort')"},"fill":{"type":"string","description":"the fill color for shapes in the svg"},"size":{"type":"number","description":"the icon's width/height in rem"},"sw":{"type":"number","description":"the icon's stroke width"},"ml":{"type":"number","description":"margin-left in rem"},"mr":{"type":"number","description":"margin-right in rem"},"mt":{"type":"number","description":"margin-top in rem"},"mb":{"type":"number","description":"margin-bottom in rem"},"sort_state":{"type":"string","description":"if 'asc' or 'desc', the sort icon shows the alt color for either ascending or descending"},"is_shimmy_infinite":{"type":"boolean","description":"if true, the icon is in a constant shimmy animation"},"is_shimmyable":{"type":"boolean","description":"if true, the icon can be triggered to shimmy with trigger_shimmy()"},"movement_stiffness":{"type":"number","description":"reserved for future usage with svelte motions"},"movement_damping":{"type":"number","description":"reserved for future usage with svelte motions"},"is_shimmying":{"type":"boolean","description":"true if the icon is currently shimmying in a short animation"}},"sample_code":"<script>\nimport { create_icon_manager, Icon } from \"sveltekit-ui\"\n\nlet example_icon_manager = create_icon_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Icon manager={example_icon_manager} />"},"icon_input":{"component_name":"IconInput","builder_function_name":"create_icon_input_manager","description":"lets users pick an icon (and optionally its color), displaying a searchable list of available icons","config":{"val":{"type":"any","default":null,"description":"if is_icon_only is true, val is simply the icon key (string). otherwise val is an object { icon, color }"},"is_icon_only":{"type":"boolean","default":false,"description":"if true, the value is just a string representing the icon key; color is ignored"},"icon_options":{"type":"array","default":"a built-in list of sample icons if not provided","description":"array of { key, name } objects describing available icons"},"on_finish":{"type":"function","default":null,"description":"callback triggered on 'finish'; receives the final val"},"is_button_compressed":{"type":"boolean","default":true,"description":"makes the toggle button narrower if true"}},"methods":{"init":{"description":"initializes state, managers for color input, searching, popover toggles, etc.","parameters":{"config":"object"},"returns":"void"},"set_icon":{"description":"updates the chosen icon in val","parameters":{"input":"string (the icon key)"},"returns":"void"},"set_is_icon_only":{"description":"toggles between is_icon_only: modifies val accordingly (string vs. { icon, color })","parameters":{"input":"boolean"},"returns":"void"}},"returned_properties":{"val":{"type":"any","description":"the current selection. if is_icon_only is true, it's a string; otherwise an object { icon, color }"},"is_icon_only":{"type":"boolean","description":"if true, val is just a string for the icon key"},"popover_manager":{"type":"object","description":"popover manager controlling the icon picker popover"},"popover_toggle_button_manager":{"type":"object","description":"button manager that opens/closes the icon picker popover"},"finish_button_manager":{"type":"object","description":"button manager that finalizes and closes the picker, calling on_finish"},"icon_options_filtered":{"type":"array","description":"the subset of icon options matching any search text"},"search_icons_text_input_manager":{"type":"object","description":"manages the text input used to filter the icon list"},"color_input_manager":{"type":"object","description":"manages color selection if is_icon_only is false"},"clear_button_manager":{"type":"object","description":"button manager to reset val to null"},"icon_options":{"type":"array","description":"the full array of possible icons"},"selected_icon_manager":{"type":"object","description":"an icon manager instance for showing the currently selected icon"}},"sample_code":"<script>\nimport { create_icon_input_manager, IconInput } from \"sveltekit-ui\"\n\nlet example_icon_input_manager = create_icon_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<IconInput manager={example_icon_input_manager} />"},"image":{"component_name":"Image","builder_function_name":"create_image_manager","description":"renders an image with optional quick placeholder image, background blur, and loader, also dynamically calculates aspect ratio","config":{"storage_path":{"type":"string","default":null,"description":"a template path for retrieving an image by storage_id, e.g. '/api/v1/storage/{storage_id}'"},"selector_id":{"type":"string","default":null,"description":"optional identifier for referencing or targeting this image manager"},"bg_img_blur":{"type":"number","default":0,"description":"the background blur radius in pixels for the placeholder image"},"bg_img_opacity":{"type":"number","default":0,"description":"the background image's opacity (often used with blur)"},"alt":{"type":"string","default":null,"description":"alt text for the image"},"storage_id":{"type":"string","default":null,"description":"storage id to replace in storage_path, if no direct src is provided"},"src":{"type":"string","default":null,"description":"the final url for the image; if null, tries to get from storage_path + storage_id"},"storage_id_quick":{"type":"string","default":null,"description":"storage id for a quick/placeholder image"},"src_quick":{"type":"string","default":null,"description":"a fast-loading low-res or placeholder image displayed behind and during loading"},"image_width":{"type":"number","default":null,"description":"the image’s intrinsic width in px if known"},"image_height":{"type":"number","default":null,"description":"the image’s intrinsic height in px if known"},"image_aspect_ratio":{"type":"number","default":null,"description":"aspect ratio (width / height). if null, calculates once image loads"},"display_max_width":{"type":"number","default":800,"description":"the maximum display width in px"},"display_max_height":{"type":"number","default":600,"description":"the maximum display height in px"},"border_radius":{"type":"number","default":1,"description":"the border radius (in rem) for the container"}},"methods":{"handle_mount":{"description":"executes on svelte's onmount hook, checks if images are loaded, and sets their dimension info","parameters":{},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique internal id for this image instance"},"is_loading_main_image":{"type":"boolean","description":"indicates if the main high-res image is still loading"},"selector_id":{"type":"string","description":"optional external reference id for the image"},"src":{"type":"string","description":"the actual url used for the main image"},"src_quick":{"type":"string","description":"url for a quick-loading placeholder image"},"alt":{"type":"string","description":"alt text for the image"},"display_max_width":{"type":"number","description":"the maximum display width in px"},"display_max_height":{"type":"number","description":"the maximum display height in px"},"image_width":{"type":"number","description":"the actual image width in px after loading"},"image_height":{"type":"number","description":"the actual image height in px after loading"},"image_aspect_ratio":{"type":"number","description":"width / height of the image (calculated after load if not provided)"},"bg_img_blur":{"type":"number","description":"blur radius in px for the background placeholder"},"bg_img_opacity":{"type":"number","description":"opacity for the blurred background"},"bg_img_style":{"type":"string","description":"the background property used for the placeholder blur layer"},"border_radius":{"type":"number","description":"the border radius in rem for the container"}},"sample_code":"<script>\nimport { create_image_manager, Image } from \"sveltekit-ui\"\n\nlet example_image_manager = create_image_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Image manager={example_image_manager} />"},"image_editor":{"component_name":"ImageEditor","builder_function_name":"create_image_editor_manager","description":"provides a comprehensive interface for editing images (crop, resize, filters, AI-based transformations, file export) within a popover or inline panel","config":{"on_finish":{"type":"function","default":null,"description":"invoked when the user taps 'Finish', receives the final edited file"},"ai_image_generator":{"type":"function","default":null,"description":"optional async function for generating an image from text, should return { is_success: boolean, data?: base64StringOrURL, error_message?: string }"},"ai_remove_image_background":{"type":"function","default":null,"description":"optional async function to remove an image’s background, returns { is_success: boolean, data?: fileUrl, error_message?: string }"},"ai_restore_resolution":{"type":"function","default":null,"description":"optional async function to upscale/rest. resolution, returns { is_success: boolean, data?: fileUrl, error_message?: string }"},"ai_restore_face":{"type":"function","default":null,"description":"optional async function to restore or enhance a face in an image"}},"methods":{"init":{"description":"initializes manager state, sets up popovers, panels, and button managers","parameters":{"config":"object"},"returns":"void"},"init_file":{"description":"assigns a new file for editing, sets up hidden image for transformations, updates UI states","parameters":{"file_input":"object containing { file: File, file_name?: string, mime_type?: string }"},"returns":"void"},"on_destroy":{"description":"cleanup callback run on svelte onDestroy, removes hidden image from the dom","parameters":{},"returns":"void"},"set_screen_tab":{"description":"switches the editor’s main tab: 'filters','crop','resize','ai','file'","parameters":{"screen_tab_loc":"string"},"returns":"void"},"undo":{"description":"reverts to a previous image state (if available)","parameters":{},"returns":"void"},"redo":{"description":"restores a more recent image state (if undone)","parameters":{},"returns":"void"},"clear":{"description":"clears the current image(s), resets to no file","parameters":{},"returns":"void"},"finish":{"description":"calls on_finish with the final edited file, closes the popover if in popover mode","parameters":{},"returns":"void"},"set_base_image":{"description":"sets the hidden base image src, resets transformations","parameters":{"new_src":"string (data url or blob url)"},"returns":"void"},"apply_filters":{"description":"applies current filter settings to the canvas, saves updated data url to the history stack","parameters":{},"returns":"void"},"reset_filters":{"description":"resets all filter sliders to their default values","parameters":{},"returns":"void"},"main_image_transformer":{"description":"the core function that assembles the image changes (crop, resize, filter) into the final canvas","parameters":{},"returns":"void"},"crop_on_up":{"description":"cancels the current pointer-based crop action when pointer is lifted","parameters":{"e":"event"},"returns":"void"},"crop_on_move":{"description":"moves or resizes the crop box based on user pointer drag, updating internal state","parameters":{"e":"event"},"returns":"void"},"crop_on_down":{"description":"begins the pointer-based crop drag from a handle or the main area, storing initial positions","parameters":{"e":"event","type":"string (the drag handle name)"},"returns":"void"},"set_crop_box":{"description":"sets the crop area to a given aspect ratio or free if w/h are null","parameters":{"w":"number or null","h":"number or null"},"returns":"void"},"crop_image":{"description":"applies the crop changes into a new data url, updates the history stack","parameters":{"w":"number or null","h":"number or null"},"returns":"void"},"toggle_is_lock_resize_aspect_ratio":{"description":"toggles aspect ratio lock for resizing","parameters":{},"returns":"void"},"set_resize_dimensions":{"description":"updates the width/height for resizing, honoring aspect ratio lock if enabled","parameters":{"w":"number or null","h":"number or null"},"returns":"void"},"file_input_change":{"description":"handles changes to file name, mime type, or quality; triggers a file size recalculation for the edited image","parameters":{"file_name":"string","mime_type":"string","quality":"number"},"returns":"void"},"download_image":{"description":"downloads the currently displayed image as a file with the specified mime type and name","parameters":{},"returns":"void"},"set_file_from_inputs":{"description":"applies the chosen file name, mime type, quality changes to the final data url, updates state","parameters":{},"returns":"void"},"drop_handler":{"description":"handles drag-drop events for files, calls init_file if a valid image file is found","parameters":{"e":"drag-event"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id for this editor instance"},"file_picker_file":{"type":"object","description":"the initially picked file object if set"},"image_sources":{"type":"array","description":"an array of data urls for undo/redo functionality (history stack)"},"image_source_index":{"type":"number","description":"the current index in the history stack"},"selected_image_source":{"type":"string","description":"the currently displayed image data url"},"screen_tab":{"type":"string","description":"the active tab in the editor: 'filters','crop','resize','ai','file'"},"crop_left":{"type":"number","description":"the crop box left position in canvas px"},"crop_top":{"type":"number","description":"the crop box top position in canvas px"},"crop_width":{"type":"number","description":"the crop box width in canvas px"},"crop_height":{"type":"number","description":"the crop box height in canvas px"},"is_disabled":{"type":"boolean","description":"disables the editor UI if true"},"current_image_width":{"type":"number","description":"the current image’s actual width after base or transformations"},"current_image_height":{"type":"number","description":"the current image’s actual height after base or transformations"},"image_pixels_crop_width":{"type":"number","description":"the final cropped width in pixels"},"image_pixels_crop_height":{"type":"number","description":"the final cropped height in pixels"},"current_image_ar":{"type":"number","description":"the current image aspect ratio after transformations (width/height)"},"crop_aspect_ratio":{"type":"number","description":"the aspect ratio for the crop box if set, else null for free"},"is_lock_resize_aspect_ratio":{"type":"boolean","description":"if true, the width/height maintain the original aspect ratio"},"resize_width":{"type":"number","description":"the final width after resizing"},"resize_height":{"type":"number","description":"the final height after resizing"},"file_size_data":{"type":"object","description":"metadata on file size at various qualities (for certain formats)"},"mime_type_input":{"type":"string","description":"the user-selected mime type for the final image"},"file_size_kb":{"type":"number","description":"the approximate size in kilobytes of the final image at the chosen settings"},"file_name":{"type":"string","description":"the base name for the final file"},"file_name_derived":{"type":"string","description":"the sanitized version of the file name (alphanumeric, underscores, etc.)"},"file_name_derived_with_extension":{"type":"string","description":"the final file name with an appropriate file extension"},"ai_error_message":{"type":"string","description":"error messages generated by AI tasks (removing BG, upscaling, etc.)"},"file_input_manager":{"type":"object","description":"manages the underlying file input used to load images"},"screen_tab_filters_button_manager":{"type":"object","description":"button manager to open the 'filters' tab"},"screen_tab_crop_button_manager":{"type":"object","description":"button manager to open the 'crop' tab"},"screen_tab_resize_button_manager":{"type":"object","description":"button manager to open the 'resize' tab"},"screen_tab_ai_button_manager":{"type":"object","description":"button manager to open the 'ai' tab"},"screen_tab_file_button_manager":{"type":"object","description":"button manager to open the 'file' tab"},"undo_button_manager":{"type":"object","description":"button manager for undo"},"redo_button_manager":{"type":"object","description":"button manager for redo"},"clear_button_manager":{"type":"object","description":"button manager that clears all images from the editor"},"finish_button_manager":{"type":"object","description":"button manager that finalizes editing"},"filter_brightness_slider_manager":{"type":"object","description":"slider manager controlling brightness"},"filter_contrast_slider_manager":{"type":"object","description":"slider manager controlling contrast"},"filter_saturation_slider_manager":{"type":"object","description":"slider manager controlling saturation"},"filter_grayscale_slider_manager":{"type":"object","description":"slider manager controlling grayscale"},"filter_hue_slider_manager":{"type":"object","description":"slider manager controlling hue rotation"},"filter_red_slider_manager":{"type":"object","description":"slider manager controlling red channel"},"filter_green_slider_manager":{"type":"object","description":"slider manager controlling green channel"},"filter_blue_slider_manager":{"type":"object","description":"slider manager controlling blue channel"},"filter_blur_slider_manager":{"type":"object","description":"slider manager controlling blur effect"},"filter_opacity_slider_manager":{"type":"object","description":"slider manager controlling opacity"},"filters_set_default_button_manager":{"type":"object","description":"button manager to reset filter sliders to default"},"filters_apply_filters_button_manager":{"type":"object","description":"button manager to apply filters permanently and store in history stack"},"crop_free_button_manager":{"type":"object","description":"button manager setting the crop box to free aspect ratio"},"crop_one_to_one_button_manager":{"type":"object","description":"button manager for 1:1 aspect ratio"},"crop_four_to_three_button_manager":{"type":"object","description":"button manager for 4:3 aspect ratio"},"crop_three_to_two_button_manager":{"type":"object","description":"button manager for 3:2 aspect ratio"},"crop_sixteen_to_nine_button_manager":{"type":"object","description":"button manager for 16:9 aspect ratio"},"crop_three_to_four_button_manager":{"type":"object","description":"button manager for 3:4 aspect ratio"},"crop_two_to_three_button_manager":{"type":"object","description":"button manager for 2:3 aspect ratio"},"crop_nine_to_sixteen_button_manager":{"type":"object","description":"button manager for 9:16 aspect ratio"},"crop_width_ratio_text_input_manager":{"type":"object","description":"text input manager specifying custom crop aspect ratio width"},"crop_height_ratio_text_input_manager":{"type":"object","description":"text input manager specifying custom crop aspect ratio height"},"crop_image_button_manager":{"type":"object","description":"button manager that applies the current crop to the image"},"crop_aspect_width_loc":{"type":"number","description":"the currently set aspect ratio width for custom crop"},"crop_aspect_height_loc":{"type":"number","description":"the currently set aspect ratio height for custom crop"},"file_name_text_input_manager":{"type":"object","description":"text input manager controlling the user’s chosen file name"},"mime_type_webp_button_manager":{"type":"object","description":"button manager to select webp output format"},"mime_type_jpeg_button_manager":{"type":"object","description":"button manager to select jpeg output format"},"mime_type_png_button_manager":{"type":"object","description":"button manager to select png output format"},"download_image_button_manager":{"type":"object","description":"button manager to download the final image"},"set_file_changes_button_manager":{"type":"object","description":"button manager to apply the chosen file name, mime type, quality"},"shown_file_size_data":{"type":"object","description":"the data for the currently selected mime type’s file size chart, if available"},"file_quality_slider_manager":{"type":"object","description":"slider manager for adjusting export compression quality (1–100)"},"ai_tab_dropdown_manager":{"type":"object","description":"dropdown manager to switch among AI-related tasks"},"ai_image_generator_is_loading":{"type":"boolean","description":"true if the text-to-image AI call is in progress"},"ai_generate_image_from_text_text_input_manager":{"type":"object","description":"text input manager containing the user’s text prompt for AI image generation"},"ai_generate_image_images_prompt_file_input_manager":{"type":"object","description":"file input manager containing the user’s image prompt for AI image generation"},"ai_generate_image_include_workspace_in_images_prompt_checkbox_manager":{"type":"object","description":"checkbox input manager containing if include workspace image in image prompt for AI image generation"},"ai_generate_image_from_text_button_manager":{"type":"object","description":"button manager to trigger AI image generation from text"},"ai_remove_bg_button_manager":{"type":"object","description":"button manager to trigger AI background removal"},"ai_restore_resolution_button_manager":{"type":"object","description":"button manager to trigger AI resolution restoration (upscale)"},"ai_restore_face_button_manager":{"type":"object","description":"button manager to restore a face in an image via AI"},"resize_width_dropdown_manager":{"type":"object","description":"dropdown manager specifying common width values for resize"},"resize_height_dropdown_manager":{"type":"object","description":"dropdown manager specifying common height values for resize"},"resize_width_text_input_manager":{"type":"object","description":"text input manager specifying custom resize width"},"resize_height_text_input_manager":{"type":"object","description":"text input manager specifying custom resize height"},"resize_aspect_ratio_lock_button_manager":{"type":"object","description":"button manager toggling aspect ratio lock for resizing"},"resize_image_button_manager":{"type":"object","description":"button manager that applies the resize changes"},"is_popover":{"type":"boolean","description":"if true, the entire editor appears in a popover"},"popover_manager":{"type":"object","description":"popover manager controlling the editor’s popover if is_popover is true"}},"sample_code":"<script>\nimport { create_image_editor_manager, ImageEditor } from \"sveltekit-ui\"\n\nlet example_image_editor_manager = create_image_editor_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<ImageEditor manager={example_image_editor_manager} />"},"image_slider":{"component_name":"ImageSlider","builder_function_name":"create_image_slider_manager","description":"creates a comparison slider between two images, allowing the user to slide and compare before/after views","config":{"src1":{"type":"string","default":null,"description":"url for the first/base image"},"src2":{"type":"string","default":null,"description":"url for the second or 'comparison' image"},"color1":{"type":"string","default":"var(--primary-t)","description":"main color for the center dividing line and handle"},"color2":{"type":"string","default":"color-mix(in oklab, var(--primary-t), var(--bg) 80%)","description":"secondary color used to outline the dividing line or handle"},"percent_shown":{"type":"number","default":50,"description":"initial percentage of how much of the second image is shown vs. the first"}},"methods":{"handle_mount":{"description":"executes on svelte onMount hook, attempts to set aspect ratio based on src1","parameters":{},"returns":"void"},"handle_pointer_event":{"description":"manages pointer events (down/move/up) to update the slider percentage when dragging","parameters":{"event":"pointer or mouse event","type":"string (down/move/up)","id_input":"string (the manager’s id to ensure the event belongs to this instance)"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique identifier for the slider instance"},"src1":{"type":"string","description":"url for the first/base image"},"src2":{"type":"string","description":"url for the second/compare image"},"color1":{"type":"string","description":"primary color used for the divider line and handle"},"color2":{"type":"string","description":"secondary outline color for the divider line/handle"},"percent_shown":{"type":"number","description":"current slider value (0–100) controlling how much of src2 is shown"},"touch_start_x":{"type":"number","description":"tracks the pointer’s x position when the user starts dragging"},"aspect_ratio":{"type":"number","description":"the aspect ratio determined by the first image's naturalWidth / naturalHeight"},"button_manager":{"type":"object","description":"the button manager for the slider handle’s icon"}},"sample_code":"<script>\nimport { create_image_slider_manager, ImageSlider } from \"sveltekit-ui\"\n\nlet example_image_slider_manager = create_image_slider_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<ImageSlider manager={example_image_slider_manager} />"},"info_box":{"component_name":"InfoBox","is_not_builder":true,"description":"Colored box used for errors, warnings, or other notes","properties":{"h":{"type":"number","default":1,"description":"0-25 hue"},"message":{"type":"string","default":null,"description":"Message"},"link_name":{"type":"string","default":null,"description":"link name displayed at end of note"},"link":{"type":"string","default":null,"description":"link to direct to"},"is_cancelable":{"type":"boolean","default":true,"description":"Adds an × to make the note disappear"},"br":{"type":"number","default":0,"description":"Border radius in rem"},"ml":{"type":"number","default":0,"description":"margin-left in rem"},"mr":{"type":"number","default":0,"description":"margin-right in rem"},"mt":{"type":"number","default":0,"description":"margin-top in rem"},"mb":{"type":"number","default":0,"description":"margin-bottom in rem"}},"sample_code":"<script>\nimport { InfoBox } from \"sveltekit-ui\"\n</script>\n\n<InfoBox some_property=\"example\" />"},"json":{"component_name":"Json","builder_function_name":"create_json_manager","description":"manages json data for viewing and (optionally) editing, with features like expanding/collapsing nested objects and uploading/importing data","config":{"val":{"type":"any","default":null,"description":"the initial json object/array/value to display or edit"},"is_popover":{"type":"boolean","default":false,"description":"if true, the json viewer/editor is placed in a popover"},"is_edit_mode":{"type":"boolean","default":false,"description":"if true, displays editing controls (upload, full-edit popover, etc.)"},"is_show_buttons":{"type":"boolean","default":false,"description":"if true, shows collapse, expand, copy, etc. buttons in the interface"},"label":{"type":"string","default":null,"description":"optional label text to show above the json viewer"},"indentation":{"type":"number","default":1,"description":"indentation or nesting offset for the displayed structure"},"on_finish":{"type":"function","default":null,"description":"called when the user taps the 'finish' button in the popover, receives the final json value"}},"methods":{"set_val":{"description":"replaces the json with a new object/array/value, reprocessing into nested form","parameters":{"input":"any"},"returns":"void"},"init":{"description":"initializes the manager, sets up popovers, buttons, file inputs, etc.","parameters":{"config":"object"},"returns":"void"}},"returned_properties":{"id":{"type":"string","description":"unique id for this json manager instance"},"val":{"type":"any","description":"the fully processed json value representing the user's final object/array or primitive"},"label":{"type":"string","description":"optional label for the json viewer/editor"},"popover_manager":{"type":"object","description":"manages the main popover if is_popover is true"},"popover_toggle_button_manager":{"type":"object","description":"button manager to open/close the popover if is_popover is true"},"is_popover":{"type":"boolean","description":"if true, the json editor is displayed in a popover"},"json_prepped":{"type":"object","description":"internal nested representation of the json data structure"},"file_input_manager":{"type":"object","description":"manages file input for uploading JSON or CSV"},"data_upload_popover_manager":{"type":"object","description":"popover manager for the 'edit full json' text area"},"edit_json_button_manager":{"type":"object","description":"button manager opening the data_upload_popover_manager"},"data_text_input_manager":{"type":"object","description":"text input manager for the raw json text/csv content"},"collapse_all_button_manager":{"type":"object","description":"button manager that collapses all nested objects/arrays"},"expand_all_button_manager":{"type":"object","description":"button manager that expands all nested objects/arrays"},"copy_json_button_manager":{"type":"object","description":"button manager that copies the final json to clipboard"},"is_show_buttons":{"type":"boolean","description":"if true, shows the top row of collapse/expand/copy/etc. controls"},"is_edit_mode":{"type":"boolean","description":"if true, user can directly edit nested items or the entire json"},"finish_data_upload_button_manager":{"type":"object","description":"button manager that finalizes the raw text input from the data_upload_popover"},"finish_button_manager":{"type":"object","description":"button manager that calls on_finish and closes the main popover"}},"sample_code":"<script>\nimport { create_json_manager, Json } from \"sveltekit-ui\"\n\nlet example_json_manager = create_json_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Json manager={example_json_manager} />"},"labeled_item":{"component_name":"LabeledItem","is_not_builder":true,"description":"Displays a labeled section with an optional tooltip and associated content. Useful for form fields, information displays, or any paired label-content scenarios.","properties":{"label":{"type":"string","default":"label","description":"The text label displayed next to the content."},"tooltip":{"type":"string or null","default":null,"description":"Optional tooltip text displayed when hovering over the tooltip icon."},"is_required":{"type":"boolean","default":false,"description":"Indicates whether the labeled item is required."},"is_disabled":{"type":"boolean","default":false,"description":"Indicates whether the content is disabled."},"font_weight":{"type":"number","default":500,"description":"The font weight of the label text."},"font_size":{"type":"number","default":1.6,"description":"The font size of the label text in rem."},"color":{"type":"CSS color","default":"var(--g4-t)","description":"The color of the label text."},"disabled_color":{"type":"CSS color","default":"var(--g8-t)","description":"The color of the label text when disabled."},"ml":{"type":"number","default":0,"description":"Margin-left in rem."},"mr":{"type":"number","default":0,"description":"Margin-right in rem."},"mt":{"type":"number","default":0,"description":"Margin-top in rem."},"mb":{"type":"number","default":0,"description":"Margin-bottom in rem."},"heading_min_width":{"type":"number","default":20,"description":"Minimum width of the label heading in rem."},"content_min_width":{"type":"number","default":30,"description":"Minimum width of the content area in rem."},"content_max_width":{"type":"number","default":50,"description":"Maximum width of the content area in rem."},"children":{"type":"snippet","default":null,"description":"The content to be displayed alongside the label."}},"sample_code":"<script>\nimport { LabeledItem } from \"sveltekit-ui\"\n</script>\n\n<LabeledItem some_property=\"example\" />"},"layout":{"component_name":"Layout","builder_function_name":"create_layout_manager","description":"manages a high-level app layout with nav bar, optional full navigation panel, confetti effects, dark theme toggling, and more","config":{"is_dark_theme":{"type":"boolean","default":true,"description":"sets the initial dark/light theme mode"},"full_nav_links":{"type":"array","default":[],"description":"an array of link objects for the full navigation panel"},"nav_bar_links":{"type":"array","default":[],"description":"an array of link objects for a simplified or top nav bar"},"is_show_hamburger":{"type":"boolean","default":true,"description":"if true, displays a hamburger menu icon for toggling full nav"},"is_all_nav_bar_hidden":{"type":"boolean","default":false,"description":"completely hides the nav bar if true"},"is_nav_bar_hidable_from_scroll":{"type":"boolean","default":false,"description":"if true, allows the nav bar to hide on downward scrolling"},"is_nav_bar_hidden_from_scroll":{"type":"boolean","default":false,"description":"indicates whether the nav bar is currently hidden from scroll"},"is_full_nav_prevented":{"type":"boolean","default":false,"description":"prevents the user from opening the full nav if true"},"is_full_nav_toggled_on":{"type":"boolean","default":false,"description":"if true, the full nav panel is open"},"border_radius":{"type":"number","default":0,"description":"border radius for certain nav bar styling, in rem"},"nav_margin_x":{"type":"number","default":0,"description":"horizontal margin for the nav bar"},"nav_margin_top":{"type":"number","default":0,"description":"top margin for the nav bar"},"nav_margin_bottom":{"type":"number","default":0,"description":"bottom margin for the nav bar"},"nav_main_padding_y":{"type":"number","default":0.5,"description":"vertical padding inside the nav bar"},"nav_main_padding_x":{"type":"number","default":1,"description":"horizontal padding inside the nav bar"},"breakpoint_splits":{"type":"object","default":{"sm":480,"md":768,"lg":1024,"xl":1200},"description":"defines screen width breakpoints for layout adjustments"},"favicons":{"type":"object","default":null,"description":"optionally contains { favicon, favicon_inactive }, updated on document visibility change"}},"methods":{"handle_scroll":{"description":"marks that user is scrolling; sets is_at_top=false, is_at_bottom=false, etc.","parameters":{},"returns":"void"},"handle_scrollend":{"description":"detects if scrolled to top/bottom at scroll end, updates manager states","parameters":{},"returns":"void"},"set_base_theme":{"description":"checks document.dataset.theme or system preference, sets is_dark_theme accordingly","parameters":{},"returns":"void"},"set_is_at_top":{"description":"manually sets is_at_top to given boolean","parameters":{"input":"boolean"},"returns":"void"},"set_is_at_bottom":{"description":"manually sets is_at_bottom to given boolean","parameters":{"input":"boolean"},"returns":"void"},"set_theme":{"description":"updates is_dark_theme and sets the theme data attribute/cookie","parameters":{"is_dark_theme_input":"boolean"},"returns":"void"},"set_full_nav_height":{"description":"stores the measured height of the full nav panel (used for responsiveness checks)","parameters":{"input":"number"},"returns":"void"},"set_is_full_nav_toggled_on":{"description":"sets whether the full navigation panel is open","parameters":{"input":"boolean"},"returns":"void"},"set_screen_height":{"description":"updates the overall screen height in the manager","parameters":{"input":"number"},"returns":"void"},"set_screen_width":{"description":"updates the overall screen width in the manager","parameters":{"input":"number"},"returns":"void"},"set_nav_bar_height":{"description":"updates the nav bar’s current pixel height","parameters":{"input":"number"},"returns":"void"},"set_is_navigating":{"description":"indicates a route transition is in progress (shows a loading overlay, etc.)","parameters":{"input":"boolean"},"returns":"void"},"to_home":{"description":"convenience method to navigate user to '/' using svelte's goto","parameters":{},"returns":"void"},"goto_path":{"description":"navigates user to a given route, closes full nav if open","parameters":{"slashed_path":"string (ex: '/about')"},"returns":"void"},"init":{"description":"constructs the layout manager, setting initial states, creating sub-managers for alerts, confetti, dark theme switch, etc.","parameters":{"config":"object"},"returns":"void"}},"returned_properties":{"is_dark_theme":{"type":"boolean","description":"true if the current theme is dark"},"favicons":{"type":"object","description":"contains { favicon, favicon_inactive } for dynamic updates"},"breakpoints":{"type":"object","description":"derived state with booleans for sm, md, lg, xl, xxl"},"full_nav_links":{"type":"array","description":"an array of link objects for a full nav panel"},"nav_bar_links":{"type":"array","description":"link objects for a top nav bar"},"is_show_hamburger":{"type":"boolean","description":"if true, shows a hamburger icon to toggle full nav"},"screen_width":{"type":"number","description":"the current window width"},"screen_height":{"type":"number","description":"the current window height"},"is_all_nav_bar_hidden":{"type":"boolean","description":"true if the entire nav bar is forcibly hidden"},"shown_nav_bar_height":{"type":"number or null","description":"the current nav bar height if visible, else null"},"is_nav_bar_hidable_from_scroll":{"type":"boolean","description":"allows nav bar to hide on scroll down"},"is_nav_bar_hidden_from_scroll":{"type":"boolean","description":"the current scroll state: nav is hidden or not"},"is_nav_bar_shown":{"type":"boolean","description":"true if the nav bar is currently displayed"},"is_full_nav_prevented":{"type":"boolean","description":"disables opening the full nav"},"is_full_nav_toggled_on":{"type":"boolean","description":"state of the full nav toggle"},"is_full_nav_shown":{"type":"boolean","description":"true if the full nav is actually displayed"},"nav_bar_height":{"type":"number or null","description":"the measured nav bar height in px"},"border_radius":{"type":"number","description":"general border radius for nav styling"},"nav_margin_x":{"type":"number","description":"horizontal margin for the nav"},"nav_margin_top":{"type":"number","description":"top margin for the nav"},"nav_margin_bottom":{"type":"number","description":"bottom margin for the nav"},"nav_main_padding_y":{"type":"number","description":"vertical padding inside the nav bar"},"nav_main_padding_x":{"type":"number","description":"horizontal padding inside the nav bar"},"is_navigating":{"type":"boolean","description":"true if the app is in the middle of a page navigation"},"client_interface":{"type":"object or null","description":"data from get_user_interface if screen size is known"},"breakpoint_splits":{"type":"object","description":"holds the numeric widths for sm, md, lg, xl"},"nav_link_clicks":{"type":"number","description":"count of how many nav links have been clicked"},"is_at_top":{"type":"boolean","description":"true if user has scrolled to the top of the page"},"is_at_bottom":{"type":"boolean","description":"true if user has scrolled to the bottom of the page"},"hovered_route_name":{"type":"string or null","description":"the route name over which the user is currently hovering"},"available_content_height":{"type":"number","description":"calculated screen height minus shown nav bar height"},"full_nav_height":{"type":"number or null","description":"the measured height of the full nav"},"is_full_nav_large":{"type":"boolean","description":"true if the full nav is over half the available screen content height"},"confetti_manager":{"type":"object","description":"manages confetti display with a full screen overlay"},"alert_manager":{"type":"object","description":"manages global alerts"},"dark_theme_manager":{"type":"object","description":"a dark_theme checkbox manager controlling is_dark_theme"}},"sample_code":"<script>\nimport { create_layout_manager, Layout } from \"sveltekit-ui\"\n\nlet example_layout_manager = create_layout_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Layout manager={example_layout_manager} />"},"link":{"component_name":"Link","builder_function_name":"create_link_manager","description":"Renders a hyperlink (`<a>`) with optional popover preview. Can handle internal (SvelteKit `goto`) or external links, show a QR, copy link, etc.","config":{"id":{"type":"string or null","default":"generated unique ID","description":"A unique string ID for this link."},"href":{"type":"string","default":null,"description":"The URL to navigate to. Determines internal vs external link."},"display_text":{"type":"string","default":null,"description":"The text displayed in the link if no child content is provided."},"text_color":{"type":"CSS color","default":null,"description":"Color of the link text."},"is_show_preview":{"type":"boolean","default":"!is_internal_link","description":"If true, clicking the link opens a popover with a QR code and copy button. If false, no popover is shown."},"on_goto_external_link":{"type":"function","default":null,"description":"Optional callback when user opens an external link."}},"returned_properties":{"href":{"type":"string","description":"Current link address."},"popover_manager":{"type":"object","description":"Popover manager for the link preview popover."},"copy_link_button_manager":{"type":"object","description":"Button manager for the 'Copy Link' button in the popover."},"goto_link_button_manager":{"type":"object","description":"Button manager for the 'Open Link In New Tab' button in the popover."},"goto_link_same_tab_button_manager":{"type":"object","description":"Button manager for the 'Open Link In Same Tab' button in the popover."},"inline_goto_link_button_manager":{"type":"object","description":"Button manager displayed inline for direct navigation if `is_show_preview` is false."},"qr_manager":{"type":"object","description":"QR manager for generating the link's QR code preview."},"is_internal_link":{"type":"boolean","description":"Whether `href` starts with '/' (treated as internal)."},"is_show_preview":{"type":"boolean","description":"Whether the popover preview is shown on click."}},"methods":{"init":{"description":"Sets up popover, QR code manager, copy/goto buttons, etc. Called once with config."},"handle_a_click":{"description":"Click handler for the `<a>` element. Prevents default and either triggers internal or external link logic."},"open_link":{"description":"Opens the link via SvelteKit `goto` if internal, or in a new tab if external."}},"sample_code":"<script>\nimport { create_link_manager, Link } from \"sveltekit-ui\"\n\nlet example_link_manager = create_link_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Link manager={example_link_manager} />"},"loading_success_div":{"component_name":"LoadingSuccessDiv","is_not_builder":true,"description":"A container to display loading, success, or error states with an optional message. It provides visual feedback for processes like loading or completion.","properties":{"message":{"type":"string","default":null,"description":"Optional message displayed below the icon."},"show_screen":{"type":"enum","options":["loading","success","error"],"default":"loading","description":"Defines the state of the component: loading (shows a loading spinner), success (shows a success check), or error (shows an error icon)."},"size":{"type":"number","default":8,"description":"Size of the icon in rem."},"ml":{"type":"number","default":1,"description":"Margin-left in rem."},"mr":{"type":"number","default":1,"description":"Margin-right in rem."},"mt":{"type":"number","default":1,"description":"Margin-top in rem."},"mb":{"type":"number","default":1,"description":"Margin-bottom in rem."},"flex":{"type":"number","default":1,"description":"Flex-grow value for the container."}},"sample_code":"<script>\nimport { LoadingSuccessDiv } from \"sveltekit-ui\"\n</script>\n\n<LoadingSuccessDiv some_property=\"example\" />"},"loading_wheel":{"component_name":"LoadingWheel","is_not_builder":true,"description":"A circular spinner component to indicate loading or processing states. It's lightweight and customizable for various layouts and use cases.","properties":{"size":{"type":"number","default":null,"description":"Diameter of the loader in rem. If not set, it takes the container's full width."},"sw":{"type":"number","default":0.3,"description":"Stroke width of the loader's border in rem."},"color":{"type":"string","default":"var(--shadow8-t)","description":"Color of the loader's animated segment."},"color_bg":{"type":"string","default":"var(--tint8-t)","description":"Background color of the loader's static segment."}},"sample_code":"<script>\nimport { LoadingWheel } from \"sveltekit-ui\"\n</script>\n\n<LoadingWheel some_property=\"example\" />"},"location":{"component_name":"Location","builder_function_name":"create_location_manager","description":"Displays a static map (using Apple MapKit) pinned to a specific location. Optionally in a popover or inline.","config":{"val":{"type":"object or null","default":null,"description":"Location data: { latitude, longitude, place_id, name, etc. }"},"height":{"type":"number or null","default":null,"description":"Height of the map in rem. Defaults to 'min(40rem, 50vh)' if not set."},"width":{"type":"number or null","default":null,"description":"Width of the map in rem. Defaults to 'clamp(60rem, 80vw, 100%)' if not set."},"is_popover":{"type":"boolean","default":false,"description":"If true, displays the map in a popover triggered by a button. Otherwise, it's shown directly."},"is_inline":{"type":"boolean","default":true,"description":"If true and is_popover is also true, shows an inline button + text plus a popover. If false, hides the inline portion and you must open popover manually."},"is_dark_color_scheme":{"type":"boolean","default":true,"description":"Determines map color scheme (dark or light)."},"mapkit_js_token":{"type":"string or null","default":null,"description":"Apple MapKit JS token required for loading the map."}},"returned_properties":{"val":{"type":"object or null","description":"Current location data object. Setting val triggers a map re-initialization if map is loaded."},"map":{"type":"object or null","description":"Reference to the underlying mapkit.Map instance once initialized."},"popover_manager":{"type":"object","description":"Popover manager for showing/hiding the map if is_popover is true."},"toggle_popover_manager":{"type":"object","description":"Button manager that toggles the popover if is_popover is true."}},"methods":{"init":{"description":"Initializes state and sets up popover and token for MapKit. Called once with the config."},"initialize_map":{"description":"Loads MapKit script (if needed) and creates the map inside `#map_{id}` with the current location. Called automatically onMount or by user if needed."},"set_val":{"description":"Updates the `val` location data object and re-initializes the map if loaded."}},"sample_code":"<script>\nimport { create_location_manager, Location } from \"sveltekit-ui\"\n\nlet example_location_manager = create_location_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Location manager={example_location_manager} />"},"location_input":{"component_name":"LocationInput","builder_function_name":"create_location_input_manager","description":"Selects a geographic location using MapKit JS, optionally with search and filters for POIs/countries/addresses. Outputs place details.","config":{"val":{"type":"object or null","default":null,"description":"Current location data (place_id, latitude, longitude, etc.). If non-null, will be used for initial map view."},"mapkit_js_token":{"type":"string","default":null,"description":"MapKit JS token for Apple Maps usage."},"is_popover":{"type":"boolean","default":true,"description":"If true, the component is rendered in a popover (centered modal)."},"is_popover_button":{"type":"boolean","default":false,"description":"If true, shows a button that opens the map popover, rather than rendering inline."},"is_show_search":{"type":"boolean","default":true,"description":"If true, includes a search box for place name/POI/address search."},"label":{"type":"string or null","default":null,"description":"Label text displayed near the location input."},"height":{"type":"number (REM) or null","default":null,"description":"Map container height. If null, defaults to 'min(40rem, 50vh)'."},"width":{"type":"number (REM) or null","default":null,"description":"Map container width. If null, defaults to 'clamp(60rem, 80vw, 100%)'."},"is_dark_color_scheme":{"type":"boolean","default":false,"description":"Sets the initial map color scheme (light or dark)."},"on_finish":{"type":"function","description":"Optional callback, called with final location data when finishing."}},"methods":{"initialize_map":{"description":"Loads the MapKit JS script if needed and initializes the Apple Map instance once loaded.","parameters":{},"returns":"void"},"set_val":{"description":"Sets the manager's val (location object).","parameters":{"input":"object with place info or null"},"returns":"void"}},"returned_properties":{"val":{"type":"object or null","description":"Selected location object with place details (latitude, longitude, name, etc.)."},"map":{"type":"object or null","description":"Reference to the underlying MapKit map instance if loaded."},"popover_manager":{"type":"object","description":"Popover manager controlling the parent popover if is_popover=true."},"popover_button_manager":{"type":"object","description":"Button manager if is_popover_button=true."},"label":{"type":"string or null","description":"Display label for the location input."},"height":{"type":"string (CSS size)","description":"Map container height CSS, e.g. '40rem' or '50vh'."},"width":{"type":"string (CSS size)","description":"Map container width CSS, e.g. '60rem' or '80vw'."},"is_show_search":{"type":"boolean","description":"Whether the search UI is visible."},"extra_popover_manager":{"type":"object","description":"Popover manager for extra search filters popover."},"extra_popover_button_manager":{"type":"object","description":"Button manager that opens the extra filters popover."},"finish_button_manager":{"type":"object","description":"Button manager for final 'Finish' button in popover footer."},"suggestions_prepped":{"type":"array","description":"List of prepared search suggestions from MapKit's autocomplete results."},"is_dark_mode_checkbox_manager":{"type":"object","description":"Checkbox manager toggling the map color scheme (light/dark)."},"clear_suggestions_button_manager":{"type":"object","description":"Clears the suggestions_prepped array."},"search_text_input_manager":{"type":"object","description":"Text input manager for the search query."},"search_button_manager":{"type":"object","description":"Button manager that triggers full map search by text."},"search_filter_within_map_boundries_checkbox_manager":{"type":"object","description":"Checkbox manager for restricting search to the visible map region."},"search_filter_include_poi_categories_dropdown_manager":{"type":"object","description":"Dropdown manager for specifying POI categories to include in results."},"search_filter_exclude_poi_categories_dropdown_manager":{"type":"object","description":"Dropdown manager for specifying POI categories to exclude from results."},"search_filter_limit_to_countries_dropdown_manager":{"type":"object","description":"Dropdown manager for restricting search results to specified countries."},"search_filter_result_type_dropdown_manager":{"type":"object","description":"Dropdown manager for toggling inclusion of address / POI / query / physicalFeature results."},"search_filter_include_address_categories_dropdown_manager":{"type":"object","description":"Dropdown manager for address categories to include (country, locality, postal code, etc.)."},"search_filter_exclude_address_categories_dropdown_manager":{"type":"object","description":"Dropdown manager for address categories to exclude (country, locality, postal code, etc.)."},"mapkit_js_token":{"type":"string or null","description":"MapKit JS token for Apple Maps usage."}},"sample_code":"<script>\nimport { create_location_input_manager, LocationInput } from \"sveltekit-ui\"\n\nlet example_location_input_manager = create_location_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<LocationInput manager={example_location_input_manager} />"},"number":{"component_name":"Number","builder_function_name":"create_number_manager","description":"Displays and formats a numeric value with options for rounding, shorthand notation, separators, dynamic coloring based on value, and an optional progress bar.","config":{"val":{"type":"number or null","default":null,"description":"Initial numeric value to display. If null, displays as empty or default."},"round":{"type":"string","default":null,"allowed_values":["nearest","floor","ceil","precision"],"description":"Determines the rounding method applied to the value."},"round_by":{"type":"number","default":null,"description":"Value to round to when `round` is 'nearest', 'floor', or 'ceil'."},"precision":{"type":"number","default":null,"description":"Number of significant digits when `round` is 'precision'."},"shorthand":{"type":"string","default":null,"allowed_values":["thousands","millions","billions","trillions","quadrillions"],"description":"Applies shorthand notation to the number, adding suffixes like K, M, B, etc."},"separators":{"type":"string","default":null,"allowed_values":["thousands_commas_period","thousands_periods_comma"],"description":"Formats the number with thousands and decimal separators based on locale."},"is_percentage":{"type":"boolean","default":false,"description":"If true, appends a '%' sign to the displayed number."},"is_dynamic_color":{"type":"boolean","default":false,"description":"If true, changes the color of the number based on its value relative to start and end values."},"start_value":{"type":"number","default":null,"description":"Starting value for dynamic color calculations."},"end_value":{"type":"number","default":null,"description":"Ending value for dynamic color calculations."},"start_color":{"type":"object","default":null,"description":"Starting color in Hue-Chroma format for dynamic color calculations (e.g., { h: 10, c: 10 })."},"end_color":{"type":"object","default":null,"description":"Ending color in Hue-Chroma format for dynamic color calculations (e.g., { h: 350, c: 10 })."},"base_color":{"type":"object","default":null,"description":"Base color used when dynamic color is not enabled (e.g., { h: 10, c: 10 })."},"is_progress_bar":{"type":"boolean","default":false,"description":"If true, displays the number as part of a progress bar."},"is_hide_number":{"type":"boolean","default":false,"description":"If true, hides the numeric text display."}},"returned_properties":{"val":{"type":"object","description":"Formatted value with properties including val, val_text, suffix, font_weight, font_color, hue, chroma, and percentage_fill."}},"methods":{"init":{"description":"Initializes the number formatting based on configuration, including rounding, shorthand, separators, dynamic color, and progress bar calculations."},"round_value":{"description":"Rounds the numeric value based on the specified method and parameters."},"apply_shorthand":{"description":"Applies shorthand notation to the number, converting large numbers into K, M, B, etc."},"format_separators":{"description":"Formats the number with thousands and decimal separators based on the specified locale."},"set_val":{"description":"Sets a new value for the number and updates its formatting accordingly."},"set_loading_i":{"description":"Sets the thumb index to display a loading state."},"set_hovered_i":{"description":"Sets the thumb index that is currently hovered."},"set_error_i":{"description":"Sets the thumb index that has an error."},"set_min":{"description":"Updates the slider's minimum bound."},"set_max":{"description":"Updates the slider's maximum bound."},"set_step":{"description":"Updates the slider's step increment value."},"set_thumbs":{"description":"Updates the positions of the thumbs based on the current values."}},"sample_code":"<script>\nimport { create_number_manager, Number } from \"sveltekit-ui\"\n\nlet example_number_manager = create_number_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Number manager={example_number_manager} />"},"popover":{"component_name":"Popover","builder_function_name":"create_popover_manager","description":"Displays content in a floating panel, either as a dropdown anchored to an element or a modal (center, panel, or full screen).","config":{"type":{"type":"string","default":"center","allowed_values":["dropdown","center","full","panel"],"description":"Specifies the popover style. 'dropdown' anchors below an element, 'center' is a modal, 'full' slides up from bottom, 'panel' slides from a side."},"popover_type":{"type":"string","default":"auto","allowed_values":["auto","manual"],"description":"Popover usage approach. If 'auto', uses the new HTML <dialog popover> attribute. If 'manual', you handle your own toggling. Not fully implemented in code example (it currently expects 'auto')."},"anchor_id":{"type":"string or null","default":null,"description":"ID of the DOM element to anchor the popover if type=dropdown. If not provided, popover uses an internally generated anchor."},"pt":{"type":"number","default":1,"description":"Padding top in rem."},"pb":{"type":"number","default":1,"description":"Padding bottom in rem."},"pl":{"type":"number","default":1,"description":"Padding left in rem."},"pr":{"type":"number","default":1,"description":"Padding right in rem."},"min_width":{"type":"number","default":50,"description":"Minimum width in px."},"min_height":{"type":"number","default":50,"description":"Minimum height in px."},"target_width":{"type":"number or null","default":400,"description":"Intended popover width in px. If screen is smaller, popover might become 'full'."},"target_height":{"type":"number or null","default":400,"description":"Intended popover height in px. If screen is smaller, might become 'full'."},"max_width":{"type":"number or null","default":null,"description":"Max width in px. If null, it uses some responsive logic in CSS."},"max_height":{"type":"number or null","default":null,"description":"Max height in px. If null, uses responsive logic in CSS."},"edge_forgiveness":{"type":"number","default":10,"description":"Margin to keep from the screen edges in px when type=dropdown or similar."},"is_disabled":{"type":"boolean","default":false,"description":"Disables any user interaction if true (not used in code sample)."},"is_show_x":{"type":"boolean","default":true,"description":"Whether to show an 'X' button in the top-right corner to close the popover."},"border_radius":{"type":"number","default":2,"description":"Border radius in rem."},"background_color":{"type":"string (CSS color)","default":"var(--bg)","description":"Background color of the popover."},"border_color":{"type":"string (CSS color)","default":"var(--shadow5-t)","description":"Border color."},"contrast_color":{"type":"string (CSS color)","default":"var(--g14-t)","description":"Used for text or stroke color if needed in code (not heavily used in the example)."},"drop_color":{"type":"string (CSS color)","default":"var(--shadow8)","description":"Used for box-shadow color around the popover."},"header":{"type":"string or null","default":null,"description":"Optional header text displayed at the top of the popover."},"header_font_size":{"type":"number","default":2,"description":"Header font size in rem."},"is_alt_content_shown":{"type":"boolean","default":false,"description":"If true, the content_alt snippet is shown in place of main content. Often used to display success or alternate states."},"corner":{"type":"string or null","allowed_values":["tl","tr","bl","br"],"default":null,"description":"Positions the popover in a corner if type='center'."},"panel_side":{"type":"string","default":"right","allowed_values":["right","left"],"description":"If type='panel', which side it slides from."},"can_swipe_close":{"type":"boolean","default":false,"description":"If true, allows a user to swipe to close for certain types (like 'full' or 'panel')."},"on_open":{"type":"function","description":"Optional callback invoked when the popover is about to open."},"on_close":{"type":"function","description":"Optional callback invoked when the popover is about to close."}},"methods":{"open":{"description":"Opens the popover element (via showPopover)."},"close":{"description":"Closes the popover element (via hidePopover)."},"toggle":{"description":"Toggles the popover element (show/hide)."},"handle_before_toggle":{"description":"Internal method triggered by onbeforetoggle event. Tracks open/close state, calls on_open/on_close."},"show_temp_message":{"description":"Displays a temporary success/error message overlay, optionally closing the popover afterward.","parameters":{"message":"string to display","icon":"string (optional icon, e.g. 'success', 'error')","ms":"number (time in ms to keep message visible)","is_close_on_end":"boolean (whether to close the popover at the end)","on_finish":"callback function"}}},"returned_properties":{"id":{"type":"string","description":"Unique ID for the popover."},"is_show":{"type":"boolean","description":"Tracks whether the popover is currently shown."},"x_button_manager":{"type":"object","description":"Button manager for the 'X' button in the top-right corner if is_show_x=true."},"temp_message":{"type":"object or null","description":"Used for ephemeral messaging overlay (like a success check)."},"positioning":{"type":"object or null","description":"Used internally to store layout calculations, e.g. (popover_left_pos, popover_top_pos)."},"handle_screen_change":{"description":"Function to recalc positions if screen size changes. Currently triggers on window scroll & resize."}},"sample_code":"<script>\nimport { create_popover_manager, Popover } from \"sveltekit-ui\"\n\nlet example_popover_manager = create_popover_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Popover manager={example_popover_manager} />"},"phone_number":{"component_name":"PhoneNumber","builder_function_name":"create_phone_number_manager","description":"Displays a phone number with an optional button to initiate a call. Combines country code and main number, and handles dialing via a clickable button.","config":{"val":{"type":"object or string or null","default":null,"description":"Initial phone number value. If an object, should include `country_code` and `main_number`. If a string, treated as the full phone number."},"main_number":{"type":"string or null","default":null,"description":"The main part of the phone number without the country code."},"country_code":{"type":"string or null","default":null,"description":"The country code part of the phone number (e.g., '+1')."}},"returned_properties":{"phone_number_to_use":{"type":"string or null","description":"The full phone number constructed from `country_code` and `main_number`, or directly from `val` if it's a string."},"button_manager":{"type":"object","description":"Button manager for the call button, configured to initiate a phone call when clicked."}},"methods":{"call_number":{"description":"Initiates a phone call by creating and clicking an `<a>` element with `href='tel:<phone_number>'`."}},"sample_code":"<script>\nimport { create_phone_number_manager, PhoneNumber } from \"sveltekit-ui\"\n\nlet example_phone_number_manager = create_phone_number_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<PhoneNumber manager={example_phone_number_manager} />"},"qr":{"component_name":"Qr","builder_function_name":"create_qr_manager","description":"Generates a stylized QR code with optional image in the center, supporting download and copying features.","config":{"data":{"type":"string","default":null,"description":"The primary data/content encoded within the QR code."},"image":{"type":"string or null (URL)","default":null,"description":"Optional image URL to place in the center of the QR code."},"image_size":{"type":"number","default":0.5,"description":"How large the center image is as a fraction of overall QR size (0.5 means 50%)."},"size":{"type":"number","default":200,"description":"Width/height in px for the QR code."},"margin":{"type":"number","default":10,"description":"Margin in px around the QR code."},"type_number":{"type":"number","default":0,"description":"Integer (0-40) specifying detail level of QR. 0 means auto, higher means more capacity but bigger code."},"error_correction_level":{"type":"string","default":"Q","allowed_values":["L","M","Q","H"],"description":"Amount of error correction. 'L' ~7%, 'M' ~15%, 'Q' ~25%, 'H' ~30%. Higher can handle more damage but uses bigger code."},"color":{"type":"string (CSS color)","default":"var(--primary-t)","description":"Main dots color of the QR code."},"corner_color":{"type":"string (CSS color)","default":"color-mix(in oklab, var(--primary-t), var(--bg) 20%)","description":"Special color for the larger 'corner squares' in the QR code."},"background_color":{"type":"string (CSS color)","default":"var(--shadow1-t)","description":"Background fill behind the QR code (the 'negative space' inside the bounding square)."},"border_color":{"type":"string (CSS color)","default":"var(--shadow7-t)","description":"Border color of the QR container."},"border_width":{"type":"number","default":1,"description":"Width in px of the QR container border."},"border_radius":{"type":"number","default":"(size + 2 * margin) / 100","description":"Border radius (in rem or direct numeric) for the QR container."},"extension":{"type":"string","default":"svg","allowed_values":["svg","png","webp"],"description":"File type for the download if is_show_download is true."},"quality":{"type":"number (0.0 to 1.0)","default":0.8,"description":"Used when downloading as raster formats like png or webp to specify image quality."},"is_show_copy":{"type":"boolean","default":false,"description":"If true, displays a text input of `data` plus a button to copy it to clipboard."},"is_show_download":{"type":"boolean","default":false,"description":"If true, shows a dropdown to pick file extension and a button to download the generated QR."}},"methods":{"init":{"description":"Initializes the manager with config values, sets up the internal managers (text, copy, download)."},"on_mount":{"description":"Called typically on Svelte's onMount. Creates the QR code with QRCodeStyling and appends to the DOM. If there's an error (e.g. data too large for type_number), sets error_message."},"update":{"description":"Re-generates/updates the QR code with any changed config (color, data, etc.)."},"download":{"description":"Triggers a file download of the QR code with the chosen extension and quality."}},"returned_properties":{"id":{"type":"string","description":"Unique ID for the QR container."},"error_message":{"type":"string or null","description":"Displays any generation errors encountered, e.g. if the data is too large for the chosen type_number/error_correction_level."},"is_loaded":{"type":"boolean","description":"True once the QR code is fully rendered. If false, shows a loading spinner."},"text_manager":{"type":"object","description":"A text input manager for the main data. If is_show_copy=true, this is displayed."},"copy_button_manager":{"type":"object","description":"Button manager for copying data to clipboard if is_show_copy=true."},"download_button_manager":{"type":"object","description":"Button manager for triggering the QR code download if is_show_download=true."},"extention_dropdown_manager":{"type":"object","description":"Dropdown manager controlling which extension is used when downloading (svg, png, webp)."}},"sample_code":"<script>\nimport { create_qr_manager, Qr } from \"sveltekit-ui\"\n\nlet example_qr_manager = create_qr_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Qr manager={example_qr_manager} />"},"slider":{"component_name":"Slider","builder_function_name":"create_slider_manager","description":"Displays a styled slider for numeric input, supporting single or multiple thumbs, highlighting ranges, and optional 'Set Null'.","config":{"val":{"type":"number or number[]","default":0,"description":"Current value(s). If an array is provided, multiple thumbs appear."},"min":{"type":"number","default":0,"description":"Minimum value range."},"max":{"type":"number","default":2,"description":"Maximum value range."},"step":{"type":"number","default":0.01,"description":"Value increment steps."},"on_change":{"type":"function","default":null,"description":"Called with new value(s) when changed (pointer move or arrow key)."},"on_down":{"type":"function","default":null,"description":"Called with new value when pointer is pressed."},"on_up":{"type":"function","default":null,"description":"Called with final value(s) when pointer is released."},"label":{"type":"string or null","default":null,"description":"Label text displayed above the slider."},"name":{"type":"string","default":"slider","description":"Name attribute for potential form usage."},"label_font_size":{"type":"number","default":1.2,"description":"Size in rem for label text."},"is_required":{"type":"boolean","default":false,"description":"Whether the field is required for form submission."},"is_read_only":{"type":"boolean","default":false,"description":"If true, the slider can't be changed."},"font_size":{"type":"number","default":1,"description":"Base text size for the slider thumb."},"is_disabled":{"type":"boolean","default":false,"description":"If true, slider is disabled. If val is null and is_nullable is false, defaults to true."},"is_nullable":{"type":"boolean","default":false,"description":"If true, a 'Set Null' / 'Select Value' button toggles val between null and min."},"color":{"type":"CSS color","default":"var(--primary-t)","description":"Color used for highlight track background and thumb details."},"is_short":{"type":"boolean","default":false,"description":"If true, uses a more compact thumb design."},"is_show_text":{"type":"boolean","default":true,"description":"If false, hides numeric text on thumb."},"ml":{"type":"number","default":0,"description":"Margin-left in rem."},"mr":{"type":"number","default":0,"description":"Margin-right in rem."},"mt":{"type":"number","default":0,"description":"Margin-top in rem."},"mb":{"type":"number","default":0,"description":"Margin-bottom in rem."},"highlight_range_start_percent":{"type":"number","default":0,"description":"Optional highlight range start in percent (0-100)."},"highlight_range_end_percent":{"type":"number","default":0,"description":"Optional highlight range end in percent (0-100)."}},"returned_properties":{"val":{"type":"number or number[]","description":"Current value(s) after pointer move/arrow key changes."},"working_val":{"type":"array","description":"Internal slider thumb(s) values."},"loading_i":{"type":"number or null","description":"Thumb index that is loading, if any. Setting triggers loading state for that thumb."},"error_i":{"type":"number or null","description":"Thumb index that has an error, if any."},"toggle_null_button_manager":{"type":"object","description":"Button manager for toggling null if is_nullable is true."}},"methods":{"init":{"description":"Sets initial min, max, step, etc. Called once with the config. Also sets up thumbs from val."},"set_val":{"description":"Programmatically updates the slider's val (and thumbs)."},"handle_pointer_down":{"description":"Begins tracking pointer for a slider thumb drag."},"handle_pointer_move":{"description":"Moves the closest thumb to the pointer's position."},"handle_pointer_up":{"description":"Finishes the drag, calls on_up with final value(s)."},"handle_thumb_keydown":{"description":"Moves the thumb left/right by step when arrow keys pressed."},"set_loading_i":{"description":"Sets the thumb index to display loading state."},"set_error_i":{"description":"Sets the thumb index to display error state."},"set_min":{"description":"Updates the slider's min bound."},"set_max":{"description":"Updates the slider's max bound."},"set_step":{"description":"Updates the slider's step value."}},"sample_code":"<script>\nimport { create_slider_manager, Slider } from \"sveltekit-ui\"\n\nlet example_slider_manager = create_slider_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Slider manager={example_slider_manager} />"},"spacer":{"component_name":"Spacer","is_not_builder":true,"description":"A customizable spacer component for adding vertical or horizontal space with optional decorative borders.","properties":{"is_vert":{"type":"boolean","default":false,"description":"Determines whether the spacer is vertical (true) or horizontal (false)."},"ml":{"type":"number","default":0,"description":"Margin left in rem."},"mr":{"type":"number","default":0,"description":"Margin right in rem."},"mt":{"type":"number","default":0,"description":"Margin top in rem."},"mb":{"type":"number","default":0,"description":"Margin bottom in rem."},"sw":{"type":"number","default":0.1,"description":"Stroke width of the spacer's border in rem."},"color":{"type":"string","default":"var(--shadow7-t)","description":"Color of the spacer's border."},"min_length":{"type":"number","default":2,"description":"Minimum length of the spacer in rem."}},"sample_code":"<script>\nimport { Spacer } from \"sveltekit-ui\"\n</script>\n\n<Spacer some_property=\"example\" />"},"success_check":{"component_name":"SuccessCheck","is_not_builder":true,"description":"Displays a success checkmark with animations to indicate successful actions or states.","properties":{"is_show":{"type":"boolean","default":true,"description":"Determines if the success checkmark should be displayed."},"color":{"type":"string","default":"var(--primary-t)","description":"Specifies the color of the checkmark."},"sw":{"type":"number","default":30,"description":"Stroke width of the checkmark and circle."}},"sample_code":"<script>\nimport { SuccessCheck } from \"sveltekit-ui\"\n</script>\n\n<SuccessCheck some_property=\"example\" />"},"table_advanced":{"component_name":"TableAdvanced","builder_function_name":"create_table_advanced_manager","description":"Builds a dynamic and extendable table layout with editable rows/columns, sorting, pagination, bulk-selection, inserting rows, uploading bulk rows, exporting CSV/JSON, and more.","config":{"table_id":{"type":"string","default":null,"description":"An optional unique identifier for the table."},"table_name":{"type":"string","default":null,"description":"A display name for the table."},"table_description":{"type":"string","default":null,"description":"A descriptive text for the table."},"rows_data_from_variable_path":{"type":"array of strings or nested arrays","default":null,"description":"Specifies a path to retrieve the rows array within your variable/loop structure. Example: `['variables','data','my_table_rows']`."},"row_input_content":{"type":"ASTC (abstract content) or null","default":null,"description":"Defines the content structure for editing/creating each row."},"variables_data_type":{"type":"object","default":null,"description":"An optional data-type scheme for advanced usage. Typically derived from overall JSON data type."},"is_data_editable":{"type":"boolean","default":false,"description":"If true, enables editing features for rows, columns, and bulk insert/delete."},"nav_items":{"type":"array of strings","default":[],"allowed_values":["settings","search","insert","file","bulk_select","sort_by","pagination","rows_per_page","load_more"],"description":"Select which interactive elements appear above the table. For instance, 'search', 'file' (export options), 'insert', 'bulk_select', etc."},"is_paginate":{"type":"boolean","default":false,"description":"If true, includes pagination controls."},"is_more_to_load":{"type":"boolean","default":false,"description":"Toggles the 'Load More' button visibility if some server-based pagination still has more rows to fetch."},"table_header_max_height":{"type":"number or null","default":null,"description":"Optional maximum height (in rem) for the table header cells. Contents become scrollable if exceeded."},"table_row_max_height":{"type":"number or null","default":null,"description":"Optional maximum height (in rem) for table body cells. Contents become scrollable if exceeded."},"columns":{"type":"object of { [column_id]: column_definition }","default":{},"description":"A dictionary of columns. Each column_id has metadata including `header_content`, `body_content` ASTC for the table header / cell rendering, plus optional properties like min_width, alignment, etc."},"on_event":{"type":"function or null","description":"A callback that intercepts table events (insert/delete row, insert/delete column, load more, update row, bulk delete, etc.). Should return an object `{ is_success: boolean, ... }`. This is how the table manager interacts with external data storage."},"on_search_table_row_ids":{"type":"function or null","description":"Optional: if columns reference foreign tables, you can pass a function for searching row IDs from other tables."},"table_options":{"type":"object or null","default":null,"description":"Optional higher-level table config references, e.g. for specialized column input behavior or server-based queries."},"mapkit_js_token":{"type":"string or null","default":null,"description":"If any columns or row content uses map-based location input, you'll need this MapKit token."},"rows_per_page":{"type":"number","default":100,"description":"Default rows per page when `is_paginate` is true."}},"returned_properties":{"nav_items":{"type":"array of strings","description":"Processed array for controlling which nav items appear."},"rows_prepped":{"type":"array of row_prepped objects","description":"Internal structure storing data needed for each row's rendering, bulk select checkbox, and content manager references."},"columns_prepped":{"type":"object { [column_id]: column_config }","description":"Processed columns dictionary with each column's content manager (header_content), up-to-date metadata, etc."},"table_search_text_input_manager":{"type":"object","description":"TextInput manager used if 'search' is in nav_items."},"pagination_manager":{"type":"object","description":"Pagination manager used if `is_paginate` is true and 'pagination' is in nav_items."},"rows_per_page_dropdown_manager":{"type":"object","description":"Dropdown manager for changing how many rows per page if 'rows_per_page' is in nav_items."},"sort_by_input_manager":{"type":"object","description":"Handles advanced multi-column sorting selection if 'sort_by' is in nav_items."},"file_popover_manager":{"type":"object","description":"Popover manager for the file menu, controlling export to CSV/JSON or copy to clipboard. Visible if 'file' is in nav_items."},"insert_popover_manager":{"type":"object","description":"Popover manager controlling the Insert dropdown for columns/rows/bulk upload if 'insert' is in nav_items."},"bulk_select_all_rows_toggle_checkbox_manager":{"type":"object","description":"Global checkbox manager for toggling all row checkboxes if 'bulk_select' is in nav_items and table is editable."},"bulk_delete_rows_popover_manager":{"type":"object","description":"A confirmation popover manager for deleting multiple rows if 'bulk_select' is in nav_items."},"bulk_insert_rows_prepared_data":{"type":"array or null","description":"Holds parsed data from the user's JSON/CSV upload for inserting multiple new rows."},"row_edit_content_manager":{"type":"Content manager object","description":"Manager that controls how a row is displayed/edited in a panel popover."},"column_edit_input_manager":{"type":"ColumnInput manager object","description":"Manager that controls how a column is displayed/edited in a panel popover."}},"methods":{"init":{"description":"Called once to initialize internal managers (popovers, text input, etc.) and set up columns/rows from config."},"set_attributes":{"description":"Allows dynamic updating of key attributes (like columns, row data path, is_data_editable, etc.) after creation."},"set_rows_prepped":{"description":"Re-builds rows_prepped from the current columns_prepped and the raw data at `rows_data_from_variable_path`."},"set_columns_prepped":{"description":"Re-builds columns_prepped from a new columns object. Also re-applies display_order and content managers."},"set_table_search_text_input":{"description":"Helper to set the search box value programmatically."},"copy_json":{"description":"Copies the full table row data as JSON to the clipboard."},"copy_structure":{"description":"Copies only the 'structure' of the row data. (Currently same as copy_json, but you can modify to only copy the shape or schema)."},"download_json":{"description":"Downloads row data as a .json file."},"download_csv":{"description":"Exports row data as CSV for download."}},"sample_code":"<script>\nimport { create_table_advanced_manager, TableAdvanced } from \"sveltekit-ui\"\n\nlet example_table_advanced_manager = create_table_advanced_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<TableAdvanced manager={example_table_advanced_manager} />"},"text_array_input":{"component_name":"TextArrayInput","builder_function_name":"create_text_array_input_manager","description":"Builds an input for managing an array of text items. The user enters a string in a text field and clicks a button to add it to the array. They can reorder items (shift them up or down) or delete them. Optionally displayed in a popover when `is_popover` is true.","config":{"val":{"type":"array of strings or null","default":null,"description":"The initial list of text items."},"label":{"type":"string or null","default":null,"description":"A label displayed above the text array input."},"placeholder":{"type":"string or null","default":null,"description":"Placeholder text for the single-line input used when adding new items."},"is_no_spaces":{"type":"boolean","default":false,"description":"If true, replaces spaces with nothing (like a no-space validator)."},"max_length":{"type":"number","default":255,"description":"Maximum length allowed per item in the array."},"is_disabled":{"type":"boolean","default":false,"description":"If true, prevents adding or removing items, shifting them, etc."},"ml":{"type":"number","default":0,"description":"Margin left in rem."},"mr":{"type":"number","default":0,"description":"Margin right in rem."},"mt":{"type":"number","default":0,"description":"Margin top in rem."},"mb":{"type":"number","default":0,"description":"Margin bottom in rem."},"border_radius":{"type":"number","default":1,"description":"Border radius (in rem) for the added item containers."},"is_popover":{"type":"boolean","default":false,"description":"If true, the text array input is displayed inside a popover. Otherwise, it's shown inline."},"header":{"type":"string","default":"Text Array Input","description":"Popover header text if `is_popover` is true."},"on_change":{"type":"function or null","description":"Callback triggered whenever the array changes (items added, removed, or shifted). Receives the updated array."},"on_finish":{"type":"function or null","description":"Called when the user finalizes (clicks 'Finish' if in a popover). Receives the final array."}},"returned_properties":{"val":{"type":"array of strings or null","description":"The current list of items. Updated whenever items are added, deleted, or shifted."},"input_text_manager":{"type":"object","description":"The text input manager for the single-line text field used to add items."},"add_button_manager":{"type":"object","description":"Button manager for the 'add item' button."},"val_prepped":{"type":"array of objects","description":"Metadata for each existing item in the array, including reorder and delete button managers."},"popover_manager":{"type":"object","description":"If `is_popover` is true, controls the popover. You can open or close it with `manager.popover_manager.open()` or `manager.popover_manager.close()`."},"finish_button_manager":{"type":"object","description":"Button manager for the 'Finish' button (only relevant when `is_popover` is true)."}},"methods":{"init":{"description":"Initializes state and managers. Called once with the config."},"set_val":{"description":"Sets the entire array of text items programmatically."},"add_item":{"description":"Adds the current text from `input_text_manager.val` to the array (if valid)."},"delete_item":{"description":"Removes the item at a given index."},"shift_item":{"description":"Reorders items by moving one item up or down (the `shift_by` can be -1 or +1)."},"finish":{"description":"Closes the popover (if used) and calls `on_finish` with the final array."}},"sample_code":"<script>\nimport { create_text_array_input_manager, TextArrayInput } from \"sveltekit-ui\"\n\nlet example_text_array_input_manager = create_text_array_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<TextArrayInput manager={example_text_array_input_manager} />"},"text_input":{"component_name":"TextInput","builder_function_name":"create_text_input_manager","description":"Builds an input (single or multi-line) with support for validations, placeholders, error messaging, toggling password visibility, optional popover editing, and more.","config":{"type":{"type":"string","default":"text","allowed_values":["text","text_area","email","password","number","tel","url","search"],"description":"Determines the input field type. For multi-line input, specify `text_area`."},"val":{"type":"any","default":null,"description":"Starting value for the text field."},"label":{"type":"string or null","default":null,"description":"A text label displayed above or beside the input."},"placeholder":{"type":"string","default":"varies by type","description":"The placeholder text for the input."},"name":{"type":"string","default":"text","description":"HTML input `name` attribute."},"autocomplete":{"type":"string","default":"varies by type","description":"HTML autocomplete attribute (e.g., `email`, `current-password`, `off`, etc.)."},"is_required":{"type":"boolean","default":false,"description":"If true, the input must have a value."},"is_nullable":{"type":"boolean","default":false,"description":"If true, a Set Null button appears, allowing the value to become `null`."},"is_disabled":{"type":"boolean","default":false,"description":"If true, the input is not editable."},"error_message":{"type":"string or null","default":null,"description":"Displays an error message below the label if present."},"replace_spaces_with":{"type":"string or null","default":null,"description":"If set, replaces all spaces in input with this character/string."},"is_numbers_only":{"type":"boolean","default":false,"description":"If true, removes all non-digits from the user input."},"border_radius":{"type":"number","default":1,"description":"Applied as a rem value to style the input's rounded corners."},"ml":{"type":"number","default":0,"description":"Margin-left (rem)."},"mr":{"type":"number","default":0,"description":"Margin-right (rem)."},"mt":{"type":"number","default":0,"description":"Margin-top (rem)."},"mb":{"type":"number","default":0,"description":"Margin-bottom (rem)."},"max_length":{"type":"number","default":100000,"description":"Sets the maximum characters allowed in the input."},"min":{"type":"number","default":-9007199254740990,"description":"The minimum numeric value if `type` = 'number'."},"max":{"type":"number","default":9007199254740990,"description":"The maximum numeric value if `type` = 'number'."},"is_show_limit":{"type":"boolean","default":false,"description":"If true, shows `length/max_length` at the bottom-right of the input."},"password_min_length":{"type":"number","default":7,"description":"Minimum password length if `type = 'password'`."},"is_password_requires_lowercase":{"type":"boolean","default":true,"description":"Requires at least one lowercase letter for password validation."},"is_password_requires_uppercase":{"type":"boolean","default":false,"description":"Requires at least one uppercase letter for password validation."},"is_password_requires_number":{"type":"boolean","default":false,"description":"Requires at least one digit for password validation."},"is_password_requires_special_char":{"type":"boolean","default":false,"description":"Requires at least one special symbol for password validation."},"is_password_tooltip_used":{"type":"boolean","default":true,"description":"If true, shows a tooltip that describes password requirements."},"is_text_hidable":{"type":"boolean","default":"varies by type","description":"Toggles if we can show a hide/unhide button (e.g. for password)."},"is_text_hidden":{"type":"boolean","default":"varies by type","description":"If true, text is hidden (type='password')."},"is_preview_img":{"type":"boolean","default":false,"description":"If true, tries to display a small image from the typed URL (when `type='url'`)."},"preview_img_size":{"type":"number","default":32,"description":"Size in px for the optional preview image if `is_preview_img` and type='url'."},"is_resizable":{"type":"boolean","default":false,"description":"If true and `type='text_area'`, user can resize the textarea."},"max_height":{"type":"number","default":30,"description":"Max height in rem for a textarea."},"rows":{"type":"number","default":5,"description":"Number of visible text lines if `type='text_area'`."},"is_popover":{"type":"boolean","default":false,"description":"If true, renders inside a popover for editing. Otherwise, it's displayed inline."},"popover_header":{"type":"string or null","default":null,"description":"When `is_popover=true`, sets the popover's header text."},"update_button_text":{"type":"string or null","default":null,"description":"If set, changes the popover's final button text from 'Finish' to a custom label."},"is_popover_edit_content":{"type":"boolean","default":false,"description":"If true, displays the label/value inline, with a small edit button that opens the popover. Otherwise, the input is always visible inline or in the popover."},"on_change":{"type":"function or null","description":"Callback triggered on each input event, receiving the updated value."},"on_blur":{"type":"function or null","description":"Callback triggered on input blur."},"on_finish":{"type":"function or null","description":"If `is_popover=true`, called when pressing the final button in the popover. Receives the current value. Return `{ is_success: boolean, message?: string }` for success or error feedback."}},"returned_properties":{"val":{"type":"any","description":"The current input value."},"error_message":{"type":"string or null","description":"If set, shows an error message. Also toggled by validations (e.g., password or URL)."},"is_valid":{"type":"boolean","description":"A boolean indicating if the input passes basic validation (URL, password, email checks, etc.)."},"is_image_url":{"type":"boolean","description":"If `is_preview_img = true`, indicates whether the current value is a valid image URL."},"popover_manager":{"type":"object","description":"Controls the popover if `is_popover = true`."},"popover_edit_button_manager":{"type":"object","description":"Displays an edit button if `is_popover_edit_content = true` to open the popover."},"finish_button_manager":{"type":"object","description":"Button manager for the popover's final 'Finish' or update button."},"set_null_button_manager":{"type":"object","description":"If `is_nullable = true`, provides a 'Set Null' button manager to quickly clear the input."}},"methods":{"init":{"description":"Initializes the internal states and managers, called once with the config."},"set_val":{"description":"Sets the input value from outside the component, re-running validations. Syntax: `manager.set_val(newValue)`."},"set_focus":{"description":"Focuses the input element if not disabled."},"set_type":{"description":"Changes the input type dynamically (e.g., from 'password' to 'text') though not commonly used mid-flight."},"set_is_text_hidden":{"description":"Toggles hiding or showing the text if `is_text_hidable = true` (e.g. for password fields)."}},"sample_code":"<script>\nimport { create_text_input_manager, TextInput } from \"sveltekit-ui\"\n\nlet example_text_input_manager = create_text_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<TextInput manager={example_text_input_manager} />"},"time_input":{"component_name":"TimeInput","builder_function_name":"create_time_input_manager","description":"Builds a time/date/datetime/period selection input with flexible granularity, calendar picker, optional time zone support, and more.","config":{"label":{"type":"string or null","default":null,"description":"A text label displayed for the time input."},"is_popover":{"type":"boolean","default":true,"description":"If true, the time picker is shown in a popover when clicking a toggle button. If false, it’s displayed inline."},"format":{"type":"string","default":"time_full","allowed_values":["time_full","epoch","calendar_date","datetime","datetime_utc","datetime_zoned","year_week","year","year_month","hour_minute","hour_minute_second","period_full","period_iso_8601","period_total_seconds"],"description":"Determines the interpretation of the time object. For example, 'datetime_zoned' or 'calendar_date'. Controls which UI sections appear (calendar, hours, etc.)."},"granularity_options":{"type":"array of strings","default":["year","month","week","day","hour","minute","second"],"description":"Which granularities are allowed, e.g. ['day','hour','minute']. The user can select from them if `is_show_granularity_dropdown` is true."},"granularity":{"type":"string","default":"day","description":"Specifies the current granularity (e.g. 'day','hour','minute','second')."},"val":{"type":"object or null","description":"The starting value to set. `create_time_input_manager` will parse it as a time object. If null, means 'no value'."},"is_show_granularity_dropdown":{"type":"boolean","default":false,"description":"If true, displays a dropdown to change the time granularity."},"picker_year":{"type":"number or null","default":"current year","description":"The calendar’s initial highlighted year."},"picker_month":{"type":"number or null","default":"current month (1–12)","description":"The calendar’s initial highlighted month."},"is_disabled":{"type":"boolean","default":false,"description":"If true, the time input is not interactive."},"on_finish":{"type":"function or null","description":"Callback called when the user finalizes (clicking 'Finish'). Receives the time value. Typically returns an object like `{ is_success: boolean, ... }`."}},"returned_properties":{"val":{"type":"object or null","description":"The current time/datetime/period value. It's structured according to the specified format & granularity, e.g. `{ year, month, day_of_month, hour, minute, timezone, ... }` or null."},"popover_manager":{"type":"object","description":"Controls the popover if `is_popover=true`. You can open or close the popover with `manager.popover_manager.open()` or `manager.popover_manager.close()`."},"main_toggle_button_manager":{"type":"object","description":"If `is_popover=true`, this is the toggle button’s manager used to open the time picker."},"set_null_button_manager":{"type":"object","description":"Clicking it clears the value to null."},"finish_button_manager":{"type":"object","description":"The button manager for finalizing the time selection (running `on_finish`)."}},"methods":{"init":{"description":"Initializes internal state and managers, called once with the config."},"set_val":{"description":"Set the time/datetime/period value from outside. Provide an object matching the relevant format or null."},"set_to_now":{"description":"Convenient method to set the value to the current system time."},"set_year":{"description":"Sets the year. Also updates the calendar year pickers."},"set_month":{"description":"Sets the month (1–12). Also updates the calendar."},"set_day_of_month":{"description":"Sets a new day of the month. (1–31) Also moves the selected date in the calendar."},"set_hour":{"description":"Sets hour in [0..23]."},"set_minute":{"description":"Sets minute in [0..59]."},"set_second":{"description":"Sets second in [0..59]."},"set_timezone":{"description":"Sets the time zone (e.g. 'America/Los_Angeles')."},"set_picker_data":{"description":"Update `picker_year` and `picker_month` used by the internal calendar UI."},"handle_left_month":{"description":"Calendar arrow method for shifting the visible month left."},"handle_right_month":{"description":"Calendar arrow method for shifting the visible month right."},"finish":{"description":"Closes the popover and calls the `on_finish` callback if provided."}},"sample_code":"<script>\nimport { create_time_input_manager, TimeInput } from \"sveltekit-ui\"\n\nlet example_time_input_manager = create_time_input_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<TimeInput manager={example_time_input_manager} />"},"time":{"component_name":"Time","builder_function_name":"create_time_manager","description":"Displays a formatted time value with options for text color customization, format, granularity, and timezone adjustments.","config":{"val":{"type":"string or null","default":null,"description":"The input value representing a date or time, in ISO 8601 format or any other recognizable format."},"format":{"type":"string or null","default":null,"description":"The input format of the `val` for parsing the date/time."},"granularity":{"type":"string or null","default":null,"description":"Defines the level of detail to display (e.g., 'minute', 'hour')."},"timezone":{"type":"string or null","default":null,"description":"Specifies the timezone for displaying the time (e.g., 'UTC', 'America/New_York')."},"display_format":{"type":"string or null","default":null,"description":"Defines how the time should be displayed (e.g., 'calendar_date' for YYYY-MM-DD)."},"text_color":{"type":"CSS color or null","default":null,"description":"The color of the displayed time text."}},"returned_properties":{"datetime":{"type":"string or null","description":"The machine-readable datetime attribute in ISO 8601 format."},"content":{"type":"string or null","description":"The human-readable content derived from the provided `val` and `display_format`."},"text_color":{"type":"CSS color or null","description":"The color applied to the displayed time text."}},"methods":{"init":{"description":"Initializes the manager by parsing the provided `val` into a formatted datetime and content."}},"sample_code":"<script>\nimport { create_time_manager, Time } from \"sveltekit-ui\"\n\nlet example_time_manager = create_time_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<Time manager={example_time_manager} />"},"tooltip":{"component_name":"Tooltip","is_not_builder":true,"description":"Displays a tooltip when hovering or focusing over a target content, with dynamic positioning based on available screen space.","properties":{"tooltip_content":{"type":"snippet","description":"The content displayed inside the tooltip."},"target_content":{"type":"snippet","description":"The content that triggers the tooltip when hovered or focused."},"is_disabled":{"type":"boolean","default":false,"description":"Disables the tooltip from being displayed."}},"sample_code":"<script>\nimport { Tooltip } from \"sveltekit-ui\"\n</script>\n\n<Tooltip some_property=\"example\" />"},"transparent_background":{"component_name":"TransparentBackground","is_not_builder":true,"description":"A component that renders a dynamic grid-based transparent background, with alternating colors for squares, behind the provided content.","properties":{"min_square_width":{"type":"number","default":10,"description":"The minimum width of each square in pixels."},"max_square_width":{"type":"number","default":25,"description":"The maximum width of each square in pixels."},"min_squares_per_row":{"type":"number","default":2,"description":"The minimum number of squares per row."},"content":{"type":"snippet","description":"The content to be displayed in the foreground while the background grid renders behind it."}},"sample_code":"<script>\nimport { TransparentBackground } from \"sveltekit-ui\"\n</script>\n\n<TransparentBackground some_property=\"example\" />"},"typing_dots":{"component_name":"TypingDots","is_not_builder":true,"description":"A simple animation indicating typing, represented by three animated dots.","properties":{"color":{"type":"string","default":"var(--g8-t)","description":"The color of the dots in the typing animation."}},"sample_code":"<script>\nimport { TypingDots } from \"sveltekit-ui\"\n</script>\n\n<TypingDots some_property=\"example\" />"},"x_follow":{"component_name":"XFollow","is_not_builder":true,"description":"A button linking to an X (Twitter) profile with a customizable size and handle.","properties":{"x_handle":{"type":"string","required":true,"description":"The handle of the X (Twitter) user to link to, without the '@' symbol."},"size":{"type":"number","default":4,"description":"The size of the button, which scales its height, font, and padding."}},"sample_code":"<script>\nimport { XFollow } from \"sveltekit-ui\"\n</script>\n\n<XFollow some_property=\"example\" />"},"x_post":{"component_name":"XPost","builder_function_name":"create_x_post_manager","description":"Embeds an X (formerly Twitter) post given its post ID, handling script loading and rendering. Supports internal and external links with optional previews and QR codes.","config":{"id":{"type":"string or null","default":"generated unique ID","description":"A unique string ID for this XPost component. If not provided, a unique ID is generated automatically."},"post_id":{"type":"string","default":null,"description":"The unique identifier of the X (Twitter) post to embed. This is required for rendering the post."},"href":{"type":"string or null","default":null,"description":"The URL associated with the post. If it starts with '/', it's treated as an internal link; otherwise, as an external link."},"display_text":{"type":"string or null","default":null,"description":"The text to display for the link. If not provided, child content can be used instead."},"text_color":{"type":"CSS color or null","default":null,"description":"The color of the link text. If not specified, it inherits the default styling."},"is_show_preview":{"type":"boolean","default":"!is_internal_link","description":"Determines whether to show a popover preview of the post when clicked. Defaults to true for external links and false for internal links."},"is_dark_theme":{"type":"boolean","default":true,"description":"If true, the embedded post uses a dark theme. Otherwise, a light theme is applied."},"height":{"type":"number or null","default":"min(40rem, 50vh)","description":"The height of the popover containing the embedded post, specified in rem. Defaults to 'min(40rem, 50vh)' if not set."},"width":{"type":"number or null","default":"clamp(60rem, 80vw, 100%)","description":"The width of the popover containing the embedded post, specified in rem. Defaults to 'clamp(60rem, 80vw, 100%)' if not set."},"on_goto_external_link":{"type":"function or null","default":null,"description":"Optional callback function that is invoked when an external link is opened. Receives the `href` as an argument."}},"returned_properties":{"post_id":{"type":"string","description":"The unique identifier of the X (Twitter) post being embedded."},"is_dark_theme":{"type":"boolean","description":"Indicates whether the embedded post is using a dark theme."},"theme":{"type":"string","description":"The current theme of the embedded post ('dark' or 'light')."},"popover_manager":{"type":"object","description":"Popover manager for controlling the display of the post preview. Methods include `open()` and `close()`."},"toggle_popover_manager":{"type":"object","description":"Button manager for toggling the popover. Manages the state and behavior of the toggle button."},"height":{"type":"string","description":"The height of the popover container, in rem."},"width":{"type":"string","description":"The width of the popover container, in rem."}},"methods":{"load_script":{"description":"Dynamically loads the Twitter widgets script necessary for embedding the post. Once loaded, it triggers the rendering of the embedded post."},"render_x_post":{"description":"Embeds the X (Twitter) post into the designated container using `twttr.widgets.createTweet`. Handles theme settings and error messaging if the post fails to load."},"handle_a_click":{"description":"Handles click events on the link. Prevents the default behavior and determines whether to navigate internally, show a preview, or open the link externally based on configuration."},"open_link":{"description":"Opens the link associated with the post. If it's an internal link, it uses SvelteKit's `goto` for navigation. For external links, it opens the URL in a new browser tab and invokes the `on_goto_external_link` callback if provided."},"set_val":{"description":"Updates the `val` state with a new value and re-initializes the embedded post if necessary."}},"sample_code":"<script>\nimport { create_x_post_manager, XPost } from \"sveltekit-ui\"\n\nlet example_x_post_manager = create_x_post_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<XPost manager={example_x_post_manager} />"},"youtube_channel_button":{"component_name":"YoutubeChannelButton","is_not_builder":true,"description":"A button linking to a Youtube Channel with a customizable size and handle.","properties":{"url":{"type":"string","required":true,"description":"The url to link to."},"size":{"type":"number","default":4,"description":"The size of the button, which scales its height, font, and padding."}},"sample_code":"<script>\nimport { YoutubeChannelButton } from \"sveltekit-ui\"\n</script>\n\n<YoutubeChannelButton some_property=\"example\" />"},"youtube_video":{"component_name":"YouTubeVideo","builder_function_name":"create_youtube_video_manager","description":"Embeds a YouTube video based on the provided video ID, handling loading states and error messages. Supports theme customization and responsive resizing.","config":{"id":{"type":"string or null","default":"generated unique ID","description":"A unique identifier for the YouTubeVideo component. If not provided, a unique ID is generated automatically."},"video_id":{"type":"string","default":null,"description":"The unique identifier of the YouTube video to embed. This is required for rendering the video."},"is_dark_theme":{"type":"boolean","default":false,"description":"Determines the theme of the embedded video. If true, applies a dark theme; otherwise, a light theme is used."}},"returned_properties":{"id":{"type":"string","description":"The unique identifier of the YouTubeVideo component."},"video_id":{"type":"string","description":"The YouTube video ID being embedded."},"theme":{"type":"string","description":"The current theme of the embedded video ('dark' or 'light')."}},"methods":{"render_video":{"description":"Attempts to load and render the YouTube video by checking the availability of the video thumbnail. Sets error messages if the video fails to load."},"resize_video":{"description":"Adjusts the size of the video container to maintain a 16:9 aspect ratio, ensuring responsiveness based on the container's width."}},"sample_code":"<script>\nimport { create_youtube_video_manager, YouTubeVideo } from \"sveltekit-ui\"\n\nlet example_youtube_video_manager = create_youtube_video_manager({\n some_config_property: \"example\"\n});\n</script>\n\n<YouTubeVideo manager={example_youtube_video_manager} />"}}