@toa.io/extensions.configuration 1.0.0-alpha.272 → 1.0.0-alpha.274

package/ui/src/lib/components/shell/nav/Nav.ts

@@ -0,0 +1,35 @@
+import type { ClassValue } from 'svelte/elements'
+import type { Icon } from '@lucide/svelte'
+
+export interface Props {
+  sections?: Section[]
+  position?: 'start' | 'center' | 'end'
+  underlay?: boolean
+  class?: ClassValue
+}
+
+export interface Section {
+  id: string
+  href: string
+  nested?: string[]
+  label: string
+  Icon: typeof Icon
+  unseen?: boolean
+}
+
+export function match(section: Section, path: string): boolean {
+  if (section.href === '/') // special case for home screen
+    if (path === '/') return true
+    else return section.nested?.some((nested) => path.startsWith(nested)) === true
+
+  return path.startsWith(section.href) || section.nested?.some((nested) => path.startsWith(nested)) === true
+}
+
+export function exact(section: Section, path: string): boolean {
+  if (section.href === '/') return path === '/'
+  else return path === section.href
+}
+
+export function nested(section: Section, path: string): boolean {
+  return match(section, path) && !exact(section, path)
+}

package/ui/src/lib/components/shell/nav/Return.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { returns } from './store'
+  import type { Props } from './Return'
+
+  const { children, href = '..', class: classes }: Props = $props()
+
+  onMount(() => {
+    const id = Math.random().toString(36).substring(2, 15)
+
+    function add() {
+      returns.update((back) => {
+        back.push({ id, href, children, class: classes })
+
+        return back
+      })
+    }
+
+    function remove() {
+      returns.update((back) => {
+        return back.filter((back) => back.id !== id)
+      })
+    }
+
+    add()
+
+    return () => remove()
+  })
+</script>

package/ui/src/lib/components/shell/nav/Return.ts

@@ -0,0 +1,15 @@
+import type { ClassValue } from 'svelte/elements'
+import type { Snippet } from 'svelte'
+
+export interface Props {
+  href?: string
+  class?: ClassValue
+  children?: Snippet
+}
+
+export interface Return {
+  id: string
+  href: string
+  class?: ClassValue
+  children?: Snippet
+}

package/ui/src/lib/components/shell/nav/Sections.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { page } from '$app/state'
+  import { goto, preloadCode } from '$app/navigation'
+  import { faded } from './store'
+  import { exact, nested, type Section } from './Nav'
+  import Button from './Button.svelte'
+  import Back from './Back.svelte'
+  import type { Props } from './Sections'
+
+  const { sections, section: active }: Props = $props()
+
+  const collapsed = $derived(active ? nested(active, page.url.pathname) : false)
+  const visible = $derived(sections.filter(({ id }) => !collapsed || id === active?.id))
+
+  onMount(() => {
+    for (const section of sections) {
+      preloadCode(section.href)
+      section.nested?.forEach((nested) => preloadCode(nested))
+    }
+  })
+
+  function href(section: Section) {
+    if (collapsed) return null
+    else return exact(section, page.url.pathname) ? null : section.href
+  }
+
+  function click(section: Section) {
+    if (collapsed) void goto(section.href)
+    else {
+      const ref = href(section)
+
+      if (ref === null) window.scrollTo({ top: 0, behavior: 'smooth' })
+      else void goto(ref)
+    }
+  }
+</script>
+
+{#each sections as section (section.href)}
+  {@const hidden = !visible.includes(section)}
+  {#if collapsed && !hidden}
+    {@const ret = { href: section.href }}
+    <Back {ret} {section} />
+  {:else}
+    <div>
+      <Button
+        id={`nav-${section.id}-button`}
+        onclick={() => click(section)}
+        active={section.id === active?.id}
+        unseen={section.unseen}
+        faded={$faded}
+        class={[hidden && 'hidden']}>
+        <section.Icon color="var(--muted-foreground)" />
+        <span>{section.label}</span>
+      </Button>
+    </div>
+  {/if}
+{/each}

package/ui/src/lib/components/shell/nav/Sections.ts

@@ -0,0 +1,6 @@
+import type { Section } from './Nav'
+
+export interface Props {
+  sections: Section[]
+  section?: Section
+}

package/ui/src/lib/components/shell/nav/Toolbar.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import * as ButtonGroup from '$ui/button-group'
+  import { actions } from './store'
+  import type { Props } from './Toolbar'
+
+  const { position }: Props = $props()
+
+  const action = $derived($actions.at(-1) ?? null)
+</script>
+
+{#if action && position !== 'center'}
+  <div
+    class="flex h-full py-1 sm:me-4 transition-all duration-300 [&_svg:not([class*='size-'])]:size-5"
+    style="view-transition-name: shell-actions-{position}; view-transition-class: shell-actions">
+    <ButtonGroup.Root class={['flex h-full', action?.class]}>
+      {@render action.snippet()}
+    </ButtonGroup.Root>
+  </div>
+{/if}
+
+<style>
+  ::view-transition-group(.shell-actions) {
+    z-index: 1;
+  }
+
+  ::view-transition-old(shell-actions-start),
+  ::view-transition-new(shell-actions-start),
+  ::view-transition-old(shell-actions-end),
+  ::view-transition-new(shell-actions-end) {
+    width: auto;
+    isolation: isolate;
+  }
+
+  @keyframes slide-out-right {
+    to {
+      transform: translateX(150%);
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      transform: translateX(150%);
+    }
+  }
+
+  @keyframes slide-out-left {
+    to {
+      transform: translateX(-150%);
+    }
+  }
+
+  @keyframes slide-in-right {
+    from {
+      transform: translateX(-150%);
+    }
+  }
+
+  ::view-transition-old(shell-actions-start):only-child {
+    animation: slide-out-right 0.3s ease-out both;
+  }
+
+  ::view-transition-new(shell-actions-start):only-child {
+    animation: slide-in-left 0.3s ease-out both;
+  }
+
+  ::view-transition-old(shell-actions-end):only-child {
+    animation: slide-out-left 0.3s ease-out both;
+  }
+
+  ::view-transition-new(shell-actions-end):only-child {
+    animation: slide-in-right 0.3s ease-out both;
+  }
+</style>

package/ui/src/lib/components/shell/nav/Toolbar.ts

@@ -0,0 +1,3 @@
+export interface Props {
+  position: 'start' | 'center' | 'end'
+}

package/ui/src/lib/components/shell/nav/history.ts

@@ -0,0 +1,36 @@
+/// <reference types="@types/dom-navigation" />
+import { goto } from '$app/navigation'
+
+function path(url: URL): string {
+  return url.pathname + url.search + url.hash
+}
+
+function closest(target: string): number {
+  const entry = window.navigation.currentEntry
+
+  if (entry === null) return -1
+
+  const entries = window.navigation.entries()
+
+  for (let i = entry.index - 1; i >= 0; i--) {
+    const url = entries[i].url
+
+    if (url !== null && path(new URL(url)) === target)
+      return entry.index - i
+  }
+
+  return -1
+}
+
+export async function back(href: string): Promise<void> {
+  if (window.navigation.canGoBack) window.history.back()
+  else await goto(href)
+}
+
+export async function jump(href: string): Promise<void> {
+  const target = path(new URL(href, window.location.href))
+  const index = closest(target)
+
+  if (index > 0 && index <= 42) window.history.go(-index)
+  else await goto(href)
+}

package/ui/src/lib/components/shell/nav/index.ts

@@ -0,0 +1,5 @@
+export { default as Nav } from './Nav.svelte'
+export type { Section } from './Nav'
+export { default as Return } from './Return.svelte'
+export { default as Actions } from './Actions.svelte'
+export { back, jump } from './history'

package/ui/src/lib/components/shell/nav/store.ts

@@ -0,0 +1,24 @@
+import { derived, writable } from 'svelte/store'
+import type { Return } from './Return'
+import type { Action } from './Actions'
+
+export const actions = writable<Action[]>([])
+export const returns = writable<Return[]>([])
+
+export const faded = derived(
+  actions,
+  ($actions, set) => {
+    const a = $actions.at(-1) ?? null
+
+    if (a === null || a.active === undefined) {
+      set(false)
+
+      return
+    }
+
+    const unsub = a.active.subscribe(set)
+
+    return unsub
+  },
+  false,
+)

package/ui/src/lib/components/ui/alert/alert-action.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn("absolute top-2 right-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-sm text-balance text-muted-foreground md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/alert/index.ts

@@ -0,0 +1,17 @@
+import Action from "./alert-action.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Root from "./alert.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	Action,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+	Action as AlertAction,
+};

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-action", className)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-cancel", className)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			"gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		"-mx-4 -mb-4 rounded-b-xl border-t bg-muted/50 p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn("bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50", className)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+	{...restProps}
+/>

package/ui/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

package/ui/src/lib/components/ui/alert-dialog/alert-dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />