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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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