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

package/ui/src/lib/components/scrollable/Scrollable.ts

@@ -1,117 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { Attachment } from 'svelte/attachments'
-import type { Snippet } from 'svelte'
-
-export interface Props {
-  id?: string
-  children: Snippet
-  infinite?: Options['infinite']
-  align?: Options['align']
-  /** Extend scroll area to full viewport width, breaking out of parent padding */
-  class?: ClassValue
-  style?: string
-  dir?: 'ltr' | 'rtl'
-  bleed?: boolean
-  /** Pad the track ends by half its width so the first/last item can sit dead-center (finite center lists). */
-  gutter?: boolean
-  controlled?: boolean
-  scroll?: number
-  onscroll?: (e: Event) => void
-}
-
-export function scrollable(options: Options, mounted: boolean): Attachment<HTMLElement> {
-  if (options.infinite) return infinite(options)
-  else return finite(options, mounted)
-}
-
-function finite(options: Options, mounted: boolean): Attachment<HTMLElement> {
-  if (options.scroll < 0) return () => undefined
-
-  return (root) => {
-    const el = root.children[options.scroll] as HTMLElement
-
-    root.scrollTo({
-      left: target(root, el, options.align),
-      behavior: mounted ? 'smooth' : 'instant',
-    })
-  }
-}
-
-/**
- * Positions an infinite scroller on the middle copy.
- * Recenters after scroll drift, preserving the illusion of endless content.
- */
-function infinite(options: Options): Attachment<HTMLElement> {
-  return (root) => {
-    const length = root.children.length / INFINITY
-
-    if (length === 0) return
-
-    const anchor = root.children[HALF * length + options.scroll] as HTMLElement
-    const width = offset(root, root.children[length] as HTMLElement)
-
-    let chill = false
-
-    function onscrollend() {
-      if (chill) return
-
-      const pos = Math.floor((root.scrollLeft + root.clientWidth / 2) / width)
-
-      if (pos === HALF) return
-
-      chill = true
-      setTimeout(() => (chill = false), 1_000)
-      setTimeout(() => (root.scrollLeft += (HALF - pos) * width), 100)
-    }
-
-    root.scrollLeft = target(root, anchor, options.align)
-
-    root.addEventListener('scrollend', onscrollend)
-
-    return () => {
-      root.removeEventListener('scrollend', onscrollend)
-    }
-  }
-}
-
-// keep it odd
-export const INFINITY = 11
-const HALF = (INFINITY - 1) / 2
-
-interface Options {
-  infinite: boolean
-  align: 'start' | 'center'
-  scroll: number
-}
-
-function offset(root: HTMLElement, el: HTMLElement): number {
-  return el.offsetLeft - root.offsetLeft
-}
-
-/**
- * Calculates scrollLeft for a child.
- * Start alignment ignores bleed gutter; center alignment uses the visible container midpoint.
- */
-function target(root: HTMLElement, el: HTMLElement, align: Options['align']): number {
-  const left = offset(root, el)
-
-  if (align === 'start') return left - inset(root)
-
-  return left - root.clientWidth / 2 + el.clientWidth / 2
-}
-
-/**
- * Returns start gutter created by scroll-padding or padding.
- * Bleed lists use it for visual spacing, not as scrollable content.
- */
-function inset(root: HTMLElement): number {
-  const style = getComputedStyle(root)
-
-  return value(style.scrollPaddingInlineStart) ?? value(style.paddingInlineStart) ?? 0
-}
-
-function value(raw: string): number | undefined {
-  const parsed = Number.parseFloat(raw)
-
-  return Number.isFinite(parsed) ? parsed : undefined
-}

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

@@ -1,2 +0,0 @@
-export { default as Scrollable } from './Scrollable.svelte'
-export type { Props as ScrollableProps } from './Scrollable'

package/ui/src/lib/components/shake/Shake.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import type { Props } from './Shake'
-
-  const { children, class: classes }: Props = $props()
-
-  let active = $state(false)
-
-  // keep in sync with animation duration below
-  const DURATION = 500
-
-  export async function shake() {
-    active = true
-    await new Promise((resolve) => setTimeout(resolve, DURATION))
-    active = false
-  }
-</script>
-
-<div class={[classes, active && 'shake']}>
-  {@render children()}
-</div>
-
-<style>
-  .shake {
-    animation: shake 0.5s ease-in-out;
-  }
-
-  @keyframes shake {
-    0% {
-      transform: translateX(0);
-    }
-    10% {
-      transform: translateX(-12px);
-    }
-    20% {
-      transform: translateX(12px);
-    }
-    30% {
-      transform: translateX(-8px);
-    }
-    40% {
-      transform: translateX(8px);
-    }
-    50% {
-      transform: translateX(-4px);
-    }
-    60% {
-      transform: translateX(4px);
-    }
-    70% {
-      transform: translateX(-2px);
-    }
-    80% {
-      transform: translateX(2px);
-    }
-    90% {
-      transform: translateX(-1px);
-    }
-    100% {
-      transform: translateX(0);
-    }
-  }
-</style>

package/ui/src/lib/components/shake/Shake.ts

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

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

@@ -1 +0,0 @@
-export { default as Shake } from './Shake.svelte'

package/ui/src/lib/components/share/Share.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { Share2 } from '@lucide/svelte'
-  import { Spinner } from '$ui/spinner'
-  import { Button } from '$ui/button'
-  import { Clipboard } from '$com/clipboard'
-  import { browser } from '$app/environment'
-  import type { Props, Retriever } from './Share'
-
-  const { children, data, label, disabled, onshare, class: classes, ...rest }: Props = $props()
-
-  let waiting = $state(false)
-
-  const supported = !browser || navigator.share !== undefined
-
-  async function onclick() {
-    const share = typeof data === 'function' ? await get(data) : data
-
-    if (share === null) return
-
-    await navigator.share(share)
-    onshare?.()
-  }
-
-  async function get(fn: Retriever) {
-    waiting = true
-
-    const value = await fn()
-
-    waiting = false
-
-    return value
-  }
-
-  async function text() {
-    const share = typeof data === 'function' ? await get(data) : data
-
-    if (share === null) return null
-
-    return share.url ?? null
-  }
-</script>
-
-{#if supported}
-  <Button class={classes} {onclick} disabled={waiting || disabled} {...rest}>
-    {#if children}
-      {@render children?.()}
-    {:else}
-      {#if waiting}
-        <Spinner />
-      {:else}
-        <Share2 />
-      {/if}
-      {#if label !== undefined}{label}{/if}
-    {/if}
-  </Button>
-{:else}
-  <Clipboard {text} {label} {disabled} class={classes} oncopy={onshare} {...rest as any} />
-{/if}

package/ui/src/lib/components/share/Share.ts

@@ -1,9 +0,0 @@
-import type { ButtonProps } from '$ui/button'
-
-export interface Props extends ButtonProps {
-  data: ShareData | Retriever
-  label?: string
-  onshare?: () => void
-}
-
-export type Retriever = () => ShareData | null | Promise<ShareData | null>

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

@@ -1 +0,0 @@
-export { default as Share } from './Share.svelte'

package/ui/src/lib/components/shell/Attention.svelte

@@ -1,11 +0,0 @@
-<script lang="ts">
-  import type { Props } from './Attention'
-
-  const { id, class: classes }: Props = $props()
-</script>
-
-<div
-  {id}
-  class={['size-2 rounded-full bg-constructive shrink-0', classes]}
-  style={id ? `view-transition-name: ${id}; view-transition-class: attention;` : undefined}>
-</div>

package/ui/src/lib/components/shell/Attention.ts

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

package/ui/src/lib/components/shell/Header.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils'
-  import type { Props } from './Header'
-
-  const { children, class: classes }: Props = $props()
-</script>
-
-<header
-  class={cn(
-    'sticky top-0 left-0 right-0 z-50',
-    'pt-[env(safe-area-inset-top)] standalone:pt-[max(env(safe-area-inset-top),0.5rem)] -mt-[env(safe-area-inset-top)]',
-    'bg-linear-to-b from-background to-background/50 backdrop-filter backdrop-blur-sm text-foreground',
-    classes,
-  )}>
-  <div class="flex justify-between items-start py-2 standalone:pt-0">
-    {@render children()}
-  </div>
-</header>

package/ui/src/lib/components/shell/Header.ts

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

package/ui/src/lib/components/shell/Screen.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils'
-  import { standalone, safari, ios, shell } from '$lib/tools'
-  import Underlay from './Underlay.svelte'
-  import type { Props } from './Screen'
-
-  const { children, unsafe = false, class: classes, underlay = true }: Props = $props()
-
-  const iosStatusBarUnderlay = $derived(ios && safari && (standalone || shell) && underlay)
-</script>
-
-<div
-  class={cn(
-    'flex flex-col',
-    standalone && safari ? 'min-h-screen' : 'min-h-dvh',
-    unsafe ||
-      'pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]',
-    classes,
-  )}>
-  <div class="flex-1 flex flex-col space-y-5 pt-2 tim:pt-0">
-    {#if iosStatusBarUnderlay}
-      <Underlay
-        direction="top"
-        class="fixed z-50 w-full top-0 h-[max(env(safe-area-inset-top),1rem)]" />
-    {/if}
-    {@render children()}
-  </div>
-</div>

package/ui/src/lib/components/shell/Screen.ts

@@ -1,11 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { Snippet } from 'svelte'
-
-export interface Props {
-  children: Snippet
-  class?: ClassValue
-  /** Show ios status bar underlay. Default is true. */
-  underlay?: boolean
-  /** Do not include safe area. Default is false. */
-  unsafe?: boolean
-}

package/ui/src/lib/components/shell/Sticky.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import Underlay from './Underlay.svelte'
-  import type { Props } from './Sticky'
-
-  const { direction = 'bottom', children, class: classes }: Props = $props()
-</script>
-
-<div
-  class={[
-    'sticky flex justify-center py-2',
-    direction === 'bottom' ? 'bottom-0' : 'top-0',
-    classes,
-  ]}
->
-  <Underlay
-    {direction}
-    class={[
-      'absolute inset-x-0 backdrop-blur-md -z-1',
-      direction === 'bottom' ? 'bottom-0 -top-4' : 'top-0 -bottom-4',
-    ]}
-  />
-  {@render children()}
-</div>

package/ui/src/lib/components/shell/Sticky.ts

@@ -1,8 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { Snippet } from 'svelte'
-
-export interface Props {
-  direction?: 'bottom' | 'top'
-  children: Snippet
-  class?: ClassValue
-}

package/ui/src/lib/components/shell/Underlay.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import { standalone, shell, ios, safari } from '$lib/tools'
-  import type { Props } from './Underlay'
-
-  const { direction, class: classes, ...rest }: Props = $props()
-
-  const app = standalone || shell
-  const safariBrowser = ios && safari && !app
-</script>
-
-<div
-  class={[
-    'bg-background/80',
-    direction === 'bottom'
-      ? 'mask-[linear-gradient(to_bottom,transparent_0%,black_2rem)]'
-      : 'mask-[linear-gradient(to_top,transparent_0%,black_2rem)]',
-    safariBrowser && 'hidden',
-    classes,
-  ]}
-  {...rest}>
-</div>

package/ui/src/lib/components/shell/Underlay.ts

@@ -1,6 +0,0 @@
-import type { ClassValue, HTMLAttributes } from 'svelte/elements'
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {
-  direction: 'bottom' | 'top'
-  class?: ClassValue
-}

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

@@ -1,6 +0,0 @@
-export { default as Screen } from './Screen.svelte'
-export { default as Header } from './Header.svelte'
-export { Nav, Actions, Return, back, jump, type Section } from './nav'
-export { default as Attention } from './Attention.svelte'
-export { default as Underlay } from './Underlay.svelte'
-export { default as Sticky } from './Sticky.svelte'

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

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

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

@@ -1,16 +0,0 @@
-import type { Writable } from 'svelte/store'
-import type { ClassValue } from 'svelte/elements'
-import type { Snippet } from 'svelte'
-
-export interface Props {
-  children: Snippet
-  class?: ClassValue
-  active?: Writable<boolean>
-}
-
-export interface Action {
-  id: string
-  snippet: Snippet
-  class?: ClassValue
-  active?: Writable<boolean>
-}

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

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { ChevronLeft } from '@lucide/svelte'
-  import { faded } from './store'
-  import { back } from './history'
-  import Button from './Button.svelte'
-  import type { Props } from './Back'
-
-  const { ret, section }: Props = $props()
-  const id = $derived(section ? `nav-${section.id}-button` : undefined)
-</script>
-
-<div>
-  <Button {id} active faded={$faded} onclick={() => back(ret.href)} class={ret.class}>
-    {#if ret.children}
-      {@render ret.children()}
-    {:else}
-      <ChevronLeft />
-    {/if}
-  </Button>
-</div>

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

@@ -1,9 +0,0 @@
-import type { Return } from './Return'
-import type { Section } from './Nav'
-
-type ReturnLike = Omit<Return, 'id'>
-
-export interface Props {
-  ret: ReturnLike
-  section?: Section
-}

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

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import { faded } from './store'
-  import type { Props } from './Bar'
-
-  const { children, class: classes, ...props }: Props = $props()
-</script>
-
-<div
-  class={[$faded ? 'bg-background' : 'bg-muted', 'overflow-hidden flex sm:ms-4 h-full rounded-xl', classes]}
-  style="view-transition-name: shell-nav; view-transition-class: transition-morph;"
-  {...props}>
-  {@render children?.()}
-</div>
-
-<style>
-  ::view-transition-old(shell-nav),
-  ::view-transition-new(shell-nav) {
-    isolation: isolate;
-  }
-
-  ::view-transition-group(shell-nav) {
-    z-index: 1;
-  }
-</style>

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

@@ -1,3 +0,0 @@
-import type { HTMLAttributes } from 'svelte/elements'
-
-export interface Props extends HTMLAttributes<HTMLDivElement> {}

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

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { Button } from '$ui/button'
-  import { Attention } from '$com/shell'
-  import type { Props } from './Button'
-
-  const {
-    active = false,
-    faded = false,
-    unseen = false,
-    id,
-    children,
-    class: classes,
-    variant = 'ghost',
-    ...props
-  }: Props = $props()
-</script>
-
-<Button
-  {id}
-  {variant}
-  class={[
-    'relative flex flex-col h-full flex-1 min-w-16 p-3 gap-1 text-sm transition-colors duration-300 hover:bg-accent/25 overflow-hidden rounded-xl',
-    active && 'text-accent-foreground',
-    classes,
-  ]}
-  {...props}>
-  {#if active}
-    <div
-      class="absolute inset-0 bg-background z-0 rounded-[calc(var(--radius)+2px)] m-1"
-      style="view-transition-name: shell-nav-active; view-transition-class: transition-morph;">
-    </div>
-  {/if}
-  {#if unseen}
-    <Attention
-      id={id ? `${id}-notify` : undefined}
-      class={['absolute top-2.5 inset-e-2.5 z-10', faded && 'opacity-25']} />
-  {/if}
-  <div
-    class={[
-      "flex flex-col items-center gap-0.5 z-10 font-bold [&_svg:not([class*='size-'])]:size-5",
-      'transition-opacity duration-200',
-      faded && 'opacity-25',
-    ]}
-    style={id
-      ? `view-transition-name: ${id}; view-transition-class: shell-nav-item transition-morph;`
-      : undefined}>
-    {@render children?.()}
-  </div>
-</Button>
-
-<style>
-  ::view-transition-group(*.shell-nav-item),
-  ::view-transition-group(.attention) {
-    z-index: 1;
-  }
-
-  ::view-transition-group(shell-nav-active) {
-    z-index: 1;
-  }
-
-  ::view-transition-new(shell-nav-active):only-child {
-    opacity: 0;
-  }
-</style>

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

@@ -1,7 +0,0 @@
-import type { ButtonProps } from '$ui/button'
-
-export interface Props extends ButtonProps {
-  active?: boolean
-  faded?: boolean
-  unseen?: boolean
-}

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

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils'
-  import { ios, safari, shell, standalone } from '$lib/tools'
-  import { Underlay } from '$com/shell'
-  import { page } from '$app/state'
-  import { returns } from './store'
-  import Toolbar from './Toolbar.svelte'
-  import Sections from './Sections.svelte'
-  import { match } from './Nav'
-  import Bar from './Bar.svelte'
-  import Back from './Back.svelte'
-  import type { Props } from './Nav'
-
-  const app = standalone || shell
-  const safariBrowser = ios && safari && !app
-
-  const { sections = [], position = 'start', underlay = false, class: classes }: Props = $props()
-
-  const section = $derived(sections.find((s) => match(s, page.url.pathname)))
-  const ret = $derived($returns.at(-1) ?? null)
-</script>
-
-<div class="h-20 sm:h-24"></div>
-<nav
-  class={cn(
-    'fixed max-w-3xl mx-auto my-0',
-    'bottom-[env(safe-area-inset-bottom)] standalone:bottom-[max(env(safe-area-inset-bottom),1rem)]',
-    'left-[env(safe-area-inset-left)] right-[env(safe-area-inset-right)]',
-    safariBrowser && 'bottom-[max(env(safe-area-inset-bottom),6px)]', // min 6px from bottom edge to keep safari navbar transparent
-    classes,
-  )}>
-  {#if underlay}
-    <Underlay
-      direction="bottom"
-      class="absolute -z-1 inset-0 -top-6 -bottom-[max(env(safe-area-inset-bottom),1rem)] mx-[calc(-50vw+50%)]"
-      style="view-transition-name: shell-nav-underlay;" />
-  {/if}
-  <div
-    class={cn(
-      'flex items-center gap-2',
-      'h-21 standalone:h-16 p-5 pt-0 sm:pb-6 standalone:px-6 standalone:pb-0',
-      app && 'h-16 pb-0',
-      safariBrowser && 'h-16 pb-0',
-      position === 'center' ? 'justify-center' : 'justify-between',
-      position === 'start' ? 'flex-row' : 'flex-row-reverse',
-    )}>
-    <Bar>
-      {#if ret}
-        <Back {ret} {section} />
-      {:else}
-        <Sections {sections} {section} />
-      {/if}
-    </Bar>
-    <Toolbar {position} />
-  </div>
-</nav>
-
-<style>
-  ::view-transition-group(shell-nav-underlay) {
-    z-index: 1;
-  }
-</style>