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

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

@@ -1,35 +0,0 @@
-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

@@ -1,29 +0,0 @@
-<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

@@ -1,15 +0,0 @@
-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

@@ -1,58 +0,0 @@
-<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

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

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

@@ -1,73 +0,0 @@
-<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

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

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

@@ -1,36 +0,0 @@
-/// <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

@@ -1,5 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,20 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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

@@ -1,43 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-<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

@@ -1,32 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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

@@ -1,7 +0,0 @@
-<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

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