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

package/ui/src/@/realtime/svc/connect.ts

@@ -1,67 +0,0 @@
-import { status } from './status'
-import { reset } from './reset'
-import * as net from './net'
-import { events, type Events, type Message } from './events'
-
-let connected: string | null = null
-let controller: AbortController | null = null
-
-async function connect(id: string): Promise<void> {
-  if (connected !== null && connected !== id)
-    disconnect()
-
-  if (connected === id) return
-  else connected = id
-
-  // eslint-disable-next-line no-unmodified-loop-condition
-  while (connected === id) {
-    status('connecting')
-
-    const err = await consume(id).catch((err: Error) => err)
-
-    if (err !== undefined)
-      if (err.name === 'AbortError') console.debug('Realtime connection aborted')
-      else {
-        console.warn('Realtime connection exception', err)
-        await new Promise((resolve) => setTimeout(resolve, 3000))
-      }
-  }
-}
-
-async function consume(id: string): Promise<void> {
-  controller = new AbortController()
-
-  const signal = controller.signal
-  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-  const generator = await net.post<Message>(id, { signal, body: { timezone } })
-
-  if (generator instanceof Error) {
-    status('disconnected')
-    throw generator
-  }
-
-  console.debug('Realtime connected', id)
-  status('connected')
-
-  for await (const message of generator) emit(message)
-
-  console.debug('Realtime connection lost', id)
-}
-
-function disconnect() {
-  if (connected === null) return
-  else connected = null
-
-  if (controller === null)
-    throw new Error('Realtime controller is NULL')
-
-  controller.abort()
-  reset()
-}
-
-function emit(message: Message) {
-  if (typeof message === 'string') events.emit('heartbeat')
-  else events.emit(message.event as keyof Events, message.data as Events[keyof Events])
-}
-
-export { connect, disconnect }

package/ui/src/@/realtime/svc/events.ts

@@ -1,17 +0,0 @@
-import mitt from 'mitt'
-
-export type Events = Record<string, unknown> // add domain events here
-
-export type Message = {
-  [E in keyof Events]: {
-    event: E
-    data: Events[E]
-  }
-}[keyof Events]
-
-export const events = mitt<Events & { heartbeat: undefined }>()
-
-events.on('*', (label, payload) => {
-  if (payload === undefined) console.debug(label)
-  else console.debug(label, payload)
-})

package/ui/src/@/realtime/svc/index.ts

@@ -1,5 +0,0 @@
-export { connect, disconnect } from './connect'
-export { events } from './events'
-export { dashboard, type Dashboard, type Event, type Status } from './store'
-export { time } from './time'
-export { rc } from '../rc'

package/ui/src/@/realtime/svc/net/Message.ts

@@ -1,6 +0,0 @@
-export type Message =
-  | {
-    event: string
-    data: unknown
-  }
-  | string

package/ui/src/@/realtime/svc/net/index.ts

@@ -1,2 +0,0 @@
-export * from './interface'
-export type { Message } from './Message'

package/ui/src/@/realtime/svc/net/interface.ts

@@ -1,13 +0,0 @@
-import { origin, type RequestOptions } from '@/net'
-import type { Message } from './Message'
-
-const streams = origin.resource<Message>('/presence/')
-
-async function post<T extends Message>(
-  id: string,
-  options?: RequestOptions,
-): Promise<AsyncGenerator<T, void, undefined> | Error> {
-  return await streams.multipart<T>(id, { credentials: 'include', ...options })
-}
-
-export { post }

package/ui/src/@/realtime/svc/reset.ts

@@ -1,5 +0,0 @@
-import { dashboard } from './store'
-
-export function reset(): void {
-  dashboard.update(() => ({ status: 'disconnected', events: [] }))
-}

package/ui/src/@/realtime/svc/status.ts

@@ -1,12 +0,0 @@
-import { dashboard, type Status } from './store'
-
-export function status(status: Status): void {
-  dashboard.update((dashboard) => {
-    dashboard.status = status
-
-    if (status === 'connected' || status === 'disconnected')
-      dashboard.events.push({ label: status })
-
-    return dashboard
-  })
-}

package/ui/src/@/realtime/svc/store.ts

@@ -1,30 +0,0 @@
-import { writable } from 'svelte/store'
-import { browser } from '$app/environment'
-import { events } from './events'
-
-export const dashboard = writable<Dashboard>({
-  status: 'disconnected',
-  events: [],
-})
-
-if (browser)
-  events.on('*', (label, payload) => {
-    dashboard.update((dashboard) => {
-      dashboard.events.push({ label: label as string, payload })
-      dashboard.events = dashboard.events.slice(-128)
-
-      return dashboard
-    })
-  })
-
-export interface Dashboard {
-  status: Status
-  events: Event[]
-}
-
-export interface Event {
-  label: string
-  payload?: unknown
-}
-
-export type Status = 'disconnected' | 'connecting' | 'connected'

package/ui/src/@/realtime/svc/time.ts

@@ -1,15 +0,0 @@
-import { writable } from 'svelte/store'
-import { origin } from '@/net'
-
-// initially use client time
-export const time = writable<number>(Date.now())
-
-origin.events.on('response', ({ headers }) => {
-  const date = headers.get('date')
-
-  if (date === null) return
-
-  const timestamp = new Date(date).getTime()
-
-  time.set(timestamp)
-})

package/ui/src/app.d.ts

@@ -1,20 +0,0 @@
-// See https://svelte.dev/docs/kit/types#app.d.ts
-// for information about these interfaces
-declare global {
-  namespace App {
-    // interface Error {}
-    // interface Locals {}
-
-    interface PageData {
-      meta?: {
-        title: string
-        description: string
-      }
-    }
-
-    // interface PageState {}
-    // interface Platform {}
-  }
-}
-
-export {}

package/ui/src/app.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html translate="no" lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<meta name="robots" content="noindex,nofollow" />
-		<meta name="google" content="notranslate" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>

package/ui/src/config/index.ts

@@ -1,70 +0,0 @@
-import { version as ver } from '$app/environment'
-
-export const meta = {
-  title: 'Configuration',
-  description: 'The configuration of a Toa application',
-} as const
-
-export const navigation = {
-  /** Entry point for authenticated users. */
-  entry: '/',
-} as const
-
-/** Exposition's HTTP port. It is a constant of the runtime; this bundle cannot import it. */
-const GATEWAY_PORT = 8000
-
-/**
- * Where the API is.
- *
- * The page is published on the hosts Exposition serves, so the gateway is our own
- * origin — that is what the context's `ingress` section is required to say. Locally
- * there is no ingress and the two are separate ports: the values service serves this
- * page, the gateway answers next door.
- */
-export const origin = (() => {
-  // the build renders an empty shell in Node, where nothing requests anything
-  if (typeof window === 'undefined') return ''
-
-  const { protocol, hostname, origin } = window.location
-
-  return local(hostname) ? `${protocol}//${hostname}:${GATEWAY_PORT}` : origin
-})()
-
-export const sleep: [number, number] | undefined = (() => {
-  const sleep = import.meta.env.VITE_DEV_SLEEP
-
-  if (sleep === undefined) return
-
-  const match = sleep.match(/^(?<min>\d+)-(?<max>\d+)$/)
-
-  if (match === null || match.groups === undefined)
-    throw new Error(`Invalid sleep value: ${sleep}`)
-
-  return [Number.parseInt(match.groups.min), Number.parseInt(match.groups.max)]
-})()
-
-function local(hostname: string) {
-  return (
-    hostname === 'localhost' ||
-    hostname === '127.0.0.1' ||
-    hostname === '[::1]' ||
-    hostname.startsWith('192.168.') ||
-    hostname.startsWith('172.16.') ||
-    hostname.startsWith('10.')
-  )
-}
-
-export const GOOGLE_CLIENT_ID = import.meta.env.PUBLIC_GOOGLE_CLIENT_ID
-export const APPLE_CLIENT_ID = import.meta.env.PUBLIC_APPLE_CLIENT_ID
-
-const MAJOR_VERSION = '1'
-
-export const version = (() => {
-  const date = new Date(Number.parseInt(ver))
-  const year = date.getFullYear()
-  const startOfYear = new Date(year, 0, 1).getTime()
-  const startNextYear = new Date(year + 1, 0, 1).getTime()
-  const fraction = (date.getTime() - startOfYear) / (startNextYear - startOfYear)
-
-  return `${MAJOR_VERSION}.${(year + fraction).toFixed(4)}`
-})()

package/ui/src/lib/assets/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/ui/src/lib/components/clipboard/Clipboard.svelte

@@ -1,63 +0,0 @@
-<script lang="ts">
-  import { Check, Copy } from '@lucide/svelte'
-  import { Spinner } from '$ui/spinner'
-  import { Button } from '$ui/button'
-  import { cn } from '$lib/utils'
-  import { browser } from '$app/environment'
-  import type { Props, Retriever } from './Clipboard'
-
-  const { text, label, disabled, oncopy, icon, class: classes, ...rest }: Props = $props()
-
-  let copied = $state(false)
-  let waiting = $state(false)
-
-  const unavailable = browser && !navigator.clipboard
-
-  async function onclick() {
-    if (copied) return
-
-    waiting = true
-
-    if (typeof ClipboardItem === 'undefined') {
-      const value = typeof text === 'function' ? await text() : text
-
-      if (value === null) return
-
-      await navigator.clipboard!.writeText(value)
-    } else {
-      const item = clipboard(text)
-
-      await navigator.clipboard!.write([item])
-    }
-
-    waiting = false
-    copied = true
-    oncopy?.()
-    setTimeout(() => (copied = false), 2000)
-  }
-
-  function clipboard(text: Retriever) {
-    return typeof text === 'function'
-      ? resolve(text as () => Promise<string | null>)
-      : new ClipboardItem({ 'text/plain': new Blob([text], { type: 'text/plain' }) })
-  }
-
-  function resolve(text: () => Promise<string | null>) {
-    return new ClipboardItem({
-      'text/plain': text().then((value) => new Blob([value ?? ''], { type: 'text/plain' })),
-    })
-  }
-</script>
-
-<Button class={cn(classes)} {onclick} disabled={disabled || unavailable || waiting} {...rest}>
-  {#if copied}
-    <Check class="text-constructive" strokeWidth={3} />
-  {:else if waiting}
-    <Spinner />
-  {:else if icon !== undefined}
-    {@render icon()}
-  {:else}
-    <Copy />
-  {/if}
-  {#if label !== null}{label}{/if}
-</Button>

package/ui/src/lib/components/clipboard/Clipboard.ts

@@ -1,12 +0,0 @@
-import type { Snippet } from 'svelte'
-import type { ButtonProps } from '$ui/button'
-
-export interface Props extends ButtonProps {
-  text: Retriever
-  label?: string
-  /** Stands in for the copy icon where the button says what it copies rather than that it copies. */
-  icon?: Snippet
-  oncopy?: () => void
-}
-
-export type Retriever = (() => Promise<string>) | string

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

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

package/ui/src/lib/components/dismissable/Dismissable.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import type { Props } from './Dismissable'
-
-  const { dismissable = true, children, ondismiss }: Props = $props()
-
-  const ANIMATION_DURATION_MS = 300
-
-  let container: HTMLDivElement | undefined = $state()
-  let sentinel: HTMLDivElement | undefined = $state()
-  let dismissed = $state(false)
-  let dismissing = $state(false)
-
-  export async function dismiss() {
-    if (dismissed) return
-
-    dismissing = true
-    dismissed = true
-
-    await new Promise((resolve) => setTimeout(resolve, ANIMATION_DURATION_MS))
-    await ondismiss?.()
-  }
-
-  export async function remove() {
-    if (dismissed) return
-
-    dismissing = true
-    dismissed = true
-
-    await new Promise((resolve) => setTimeout(resolve, ANIMATION_DURATION_MS))
-  }
-
-  onMount(() => {
-    if (!sentinel || dismissed || !ondismiss) return
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0]
-
-        if (entry?.isIntersecting && !dismissed) {
-          dismissed = true
-          void ondismiss()
-        }
-      },
-      { root: container, threshold: 1 },
-    )
-
-    observer.observe(sentinel)
-
-    return () => observer.disconnect()
-  })
-</script>
-
-<div class="relative" class:dismissing>
-  <div
-    bind:this={container}
-    class={['flex w-full', dismissable && 'overflow-x-auto snap-x snap-mandatory no-scrollbar']}>
-    <div class="w-full shrink-0 snap-center">
-      {@render children()}
-    </div>
-    <div bind:this={sentinel} class={['w-full shrink-0 snap-center', !dismissable && 'hidden']}>
-    </div>
-  </div>
-</div>
-
-<style>
-  .dismissing {
-    animation: slide-out-left 0.3s ease-out forwards;
-  }
-
-  @keyframes slide-out-left {
-    from {
-      transform: translateX(0);
-      opacity: 1;
-    }
-    to {
-      transform: translateX(-100%);
-      opacity: 0;
-    }
-  }
-</style>

package/ui/src/lib/components/dismissable/Dismissable.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte'
-
-export interface Props {
-  children: Snippet
-  ondismiss?: () => Promise<void> | void
-  dismissable?: boolean
-}

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

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

package/ui/src/lib/components/dropdown/Back.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { ArrowLeft } from '@lucide/svelte'
-  import Item from './Item.svelte'
-  import { getContext } from './Context'
-  import type { Props } from './Back'
-
-  const { children, class: classes, ...rest }: Props = $props()
-  const ctx = getContext()
-</script>
-
-<Item onclick={() => ctx.pop()} class={classes} {...rest}>
-  <ArrowLeft />
-  {#if children}{@render children()}{/if}
-</Item>

package/ui/src/lib/components/dropdown/Back.ts

@@ -1,3 +0,0 @@
-import type { Props as ItemProps } from './Item'
-
-export interface Props extends Omit<ItemProps, 'onclick' | 'screen'> {}

package/ui/src/lib/components/dropdown/Content.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-  import { getContext } from './Context'
-  import type { Props } from './Content'
-
-  const { children, position = 'end-bottom', class: classes }: Props = $props()
-  const ctx = getContext()
-
-  function portal(node: HTMLElement) {
-    document.body.appendChild(node)
-
-    return { destroy: () => node.remove() }
-  }
-
-  function trackRef(node: HTMLDivElement) {
-    ctx.setContentRef(node)
-
-    return { destroy: () => ctx.setContentRef(undefined) }
-  }
-</script>
-
-{#if ctx.opened}
-  <div
-    use:portal
-    use:trackRef
-    style="position-anchor: --{ctx.id}; view-transition-name: {ctx.id}; view-transition-class: transition-spring transition-morph dropdown-content;"
-    class={[
-      'fixed z-49 flex flex-col',
-      'bg-popover shadow-[0_0_15px_var(--shadow-color)] text-popover-foreground rounded-xl',
-      'p-1',
-      position === 'start-top' && 'action-menu-start-top',
-      position === 'start-bottom' && 'action-menu-start-bottom',
-      position === 'end-top' && 'action-menu-end-top',
-      position === 'end-bottom' && 'action-menu-end-bottom',
-      classes,
-    ]}>
-    {@render children()}
-  </div>
-{/if}
-
-<style>
-  .action-menu-start-top {
-    position-area: span-x-end span-y-end;
-    position-try-fallbacks:
-      span-x-end span-y-start,
-      span-x-start span-y-end,
-      span-x-start span-y-start;
-  }
-
-  .action-menu-start-bottom {
-    position-area: span-x-end span-y-start;
-    position-try-fallbacks:
-      span-x-end span-y-end,
-      span-x-start span-y-start,
-      span-x-start span-y-end;
-  }
-
-  .action-menu-end-top {
-    position-area: span-x-start span-y-end;
-    position-try-fallbacks:
-      span-x-start span-y-start,
-      span-x-end span-y-end,
-      span-x-end span-y-start;
-  }
-
-  .action-menu-end-bottom {
-    position-area: span-x-start span-y-start;
-    position-try-fallbacks:
-      span-x-start span-y-end,
-      span-x-end span-y-start,
-      span-x-end span-y-end;
-  }
-
-  ::view-transition-group(.dropdown-content) {
-    z-index: 1;
-  }
-</style>

package/ui/src/lib/components/dropdown/Content.ts

@@ -1,13 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { Snippet } from 'svelte'
-
-export interface Props {
-  children: Snippet
-  class?: ClassValue
-  /**
-   * Corner where menu aligns with trigger. Menu overlaps trigger with
-   * corners matched at this point, growing outward from it.
-   * @default 'end-bottom'
-   */
-  position?: 'start-top' | 'start-bottom' | 'end-top' | 'end-bottom'
-}

package/ui/src/lib/components/dropdown/Context.ts

@@ -1,18 +0,0 @@
-import { setContext as svelteSetContext, getContext as svelteGetContext } from 'svelte'
-
-export interface Context {
-  get opened(): boolean
-  open: () => void
-  close: () => void
-  get id(): string
-  setContentRef: (el: HTMLDivElement | undefined) => void
-  setTriggerRef: (el: HTMLDivElement | undefined) => void
-  push: (name: string) => void
-  pop: () => void
-  get layer(): string
-}
-
-const CONTEXT = Symbol('action-menu')
-
-export const getContext = (): Context => svelteGetContext<Context>(CONTEXT)
-export const setContext = (ctx: Context) => svelteSetContext(CONTEXT, ctx)

package/ui/src/lib/components/dropdown/Group.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import { setGroupContext } from './GroupContext'
-  import type { Props } from './Group'
-
-  const { children, direction = 'col', class: classes }: Props = $props()
-
-  const directionState = $derived(direction)
-
-  setGroupContext({
-    get direction() {
-      return directionState
-    },
-  })
-</script>
-
-<div
-  class={[
-    'w-full flex gap-1 group text-sm font-normal',
-    direction === 'row' ? 'flex-row justify-around' : 'flex-col',
-    classes,
-  ]}
-  data-direction={direction}>
-  {@render children()}
-</div>

package/ui/src/lib/components/dropdown/Group.ts

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

package/ui/src/lib/components/dropdown/GroupContext.ts

@@ -1,15 +0,0 @@
-import { getContext as svelteGetContext, setContext as svelteSetContext } from 'svelte'
-
-const KEY = Symbol('action-menu-group')
-
-export interface GroupContext {
-  get direction(): 'col' | 'row'
-}
-
-export function setGroupContext(ctx: GroupContext) {
-  svelteSetContext(KEY, ctx)
-}
-
-export function getGroupContext(): GroupContext | undefined {
-  return svelteGetContext<GroupContext | undefined>(KEY)
-}