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

package/ui/src/@/iam/ui/Authorized.ts

@@ -1,65 +0,0 @@
-import { dev } from '$app/environment'
-import type { Snippet } from 'svelte'
-import type { Echo } from '@/iam'
-
-interface Checks {
-  /** Development environment */
-  dev?: boolean
-  /** Beta domain */
-  beta?: boolean
-  /** `dev` or `beta` */
-  debug?: boolean
-  /** Required role */
-  role?: string
-}
-
-export interface Props extends Checks {
-  children: Snippet
-  /**
-   * What stands in place of the children when the checks say no. Without it the account
-   * is told what it is missing and given its own id to ask with; a gate that guards a
-   * control rather than a screen passes an empty snippet.
-   */
-  denied?: Snippet
-}
-
-type Principal = Pick<Echo, 'id' | 'roles'>
-
-export function authorize(checks: Checks, principal: Principal | null): boolean {
-  if (checks.dev !== undefined)
-    if (checks.dev === dev)
-      return true
-
-  if (checks.beta !== undefined)
-    if (checks.beta === beta())
-      return true
-
-  if (checks.debug !== undefined)
-    if (checks.debug === debug())
-      return true
-
-  if (checks.role !== undefined && principal?.roles !== undefined)
-    if (scoped(principal.roles, checks.role))
-      return true
-
-  return false
-}
-
-function beta(): boolean {
-  return typeof window !== 'undefined' && window.location.hostname.startsWith('beta.')
-}
-
-function debug(): boolean {
-  return dev || beta()
-}
-
-/**
- * `app` role matches `app`, `app:codes` and all nested scope
- * `app:codes` role matches `app:codes` and all nested scopes, but not `app`
- */
-function scoped(roles: string[], scope: string): boolean {
-  for (const role of roles)
-    if (role === scope || scope.startsWith(role + ':')) return true
-
-  return false
-}

package/ui/src/@/iam/ui/Card.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import * as Card from '$ui/card'
-  import type { Props } from './Card'
-
-  const { title, description, action }: Props = $props()
-</script>
-
-<Card.Root class="w-full">
-  <Card.Header>
-    <Card.Title>{title}</Card.Title>
-    <Card.Description>{description}</Card.Description>
-  </Card.Header>
-  <Card.Content class="flex flex-col">{@render action()}</Card.Content>
-</Card.Root>

package/ui/src/@/iam/ui/Card.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte'
-
-export interface Props {
-  title: string
-  description: string
-  action: Snippet
-}

package/ui/src/@/iam/ui/Refresh.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import { LogOut } from '@lucide/svelte'
-  import { dict } from '@/iam/ui/intl'
-  import { logout, type Method } from '@/iam'
-  import { Button } from '$ui/button'
-  import { Refresh as PasswordRefresh } from './password'
-  import { Refresh as PasskeyRefresh } from './passkey'
-  import { Refresh as OIDCRefresh } from './oidc'
-  import Card from './Card.svelte'
-  import type { AccountLike } from './AccountLike'
-
-  const { account, method }: { account: AccountLike; method: Method | null } = $props()
-
-  onMount(() => {
-    if (method === null) logout()
-  })
-</script>
-
-<div class="flex flex-col items-center gap-4 w-full">
-  <Card title={$dict.auth.refresh.title} description={$dict.auth.refresh.description(account.name)}>
-    {#snippet action()}
-      {#if method === 'passkey'}
-        <PasskeyRefresh {account} />
-      {:else if method === 'password'}
-        <PasswordRefresh />
-      {:else if method === 'apple'}
-        <OIDCRefresh idp="apple" />
-      {:else if method === 'google'}
-        <OIDCRefresh idp="google" />
-      {/if}
-    {/snippet}
-  </Card>
-
-  <Button variant="outline" onclick={logout}>
-    <LogOut />
-    {$dict.auth.signout}
-  </Button>
-</div>

package/ui/src/@/iam/ui/credentials/Credentials.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  import { Async } from 'svas'
-  import { account } from '@/iam'
-  import * as Item from '$ui/item'
-  import { Transfer } from './transfer'
-  import { providers } from './providers'
-  import { Passkeys } from './passkeys'
-  import Provider from './Provider.svelte'
-  import type { Props } from './Credentials'
-
-  const { class: classes }: Props = $props()
-</script>
-
-<Async store={account}>
-  {#snippet awaited()}
-    <div class={['flex flex-col gap-2', classes]}>
-      <Item.Group class="gap-2">
-        <Passkeys />
-        {#each providers as provider (provider.id)}
-          <Provider {provider} />
-        {/each}
-      </Item.Group>
-      <Transfer class="self-start" />
-    </div>
-  {/snippet}
-</Async>

package/ui/src/@/iam/ui/credentials/Credentials.ts

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

package/ui/src/@/iam/ui/credentials/Provider.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import * as Item from '$ui/item'
-  import { Button } from '$ui/button'
-  import { dict } from '../intl'
-  import type { Props } from './Provider'
-
-  const { provider }: Props = $props()
-
-  const Icon = $derived(provider.icon)
-  const copy = $derived($dict.credentials[provider.id])
-</script>
-
-<Item.Root variant="outline">
-  <Item.Media variant="icon">
-    <Icon class="size-5" />
-  </Item.Media>
-  <Item.Content>
-    <Item.Title>{copy.title}</Item.Title>
-    <Item.Description>{copy.description}</Item.Description>
-  </Item.Content>
-  <Item.Actions>
-    <Button variant="secondary">{$dict.credentials.connect}</Button>
-  </Item.Actions>
-</Item.Root>

package/ui/src/@/iam/ui/credentials/Provider.ts

@@ -1,5 +0,0 @@
-import type { Descriptor } from './providers'
-
-export interface Props {
-  provider: Descriptor
-}

package/ui/src/@/iam/ui/credentials/index.ts

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

package/ui/src/@/iam/ui/credentials/passkeys/Key.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  import { FingerprintPattern, KeyRound, Trash2 } from '@lucide/svelte'
-  import { remove } from '@/passkeys'
-  import * as Item from '$ui/item'
-  import { date } from '$lib/tools'
-  import { Hold } from '$com/hold'
-  import { dict, locale } from '../../intl'
-  import { resolve, type Props } from './Key'
-
-  const { passkey }: Props = $props()
-
-  const copy = $derived($dict.credentials.passkeys)
-  const auth = $derived(resolve(passkey.aid))
-  const meta = $derived(copy.meta(date(passkey._created, $locale), date(passkey._updated, $locale)))
-</script>
-
-<Item.Root>
-  <Item.Media variant="icon">
-    {#if auth?.light || auth?.dark}
-      <img src={auth.light} alt="" class="size-5 dark:hidden" />
-      <img src={auth.dark} alt="" class="hidden size-5 dark:block" />
-    {:else if auth}
-      <FingerprintPattern class="size-5" />
-    {:else}
-      <KeyRound class="size-5" />
-    {/if}
-  </Item.Media>
-  <Item.Content>
-    <Item.Title>{passkey.label || auth?.name || copy.unknown}</Item.Title>
-    <Item.Description>{meta}</Item.Description>
-  </Item.Content>
-  <Item.Actions>
-    <Hold
-      name={`delete-passkey-${passkey.id}`}
-      variant="destructive"
-      size="icon"
-      label={copy.delete}
-      onclick={() => remove(passkey.id)}>
-      <Trash2 />
-    </Hold>
-  </Item.Actions>
-</Item.Root>

package/ui/src/@/iam/ui/credentials/passkeys/Key.ts

@@ -1,29 +0,0 @@
-import json from '@/passkeys/ui/aaguid.json'
-import type { Passkey } from '@/passkeys'
-
-export interface Props {
-  passkey: Passkey
-}
-
-interface Entry {
-  name: string
-  icon_dark?: string
-  icon_light?: string
-}
-
-export interface Authenticator {
-  name: string
-  light?: string
-  dark?: string
-}
-
-const map: Record<string, Entry> = json
-
-/** Resolve authenticator metadata (name + light/dark icons) by AAGUID. */
-export function resolve(aaguid: string): Authenticator | null {
-  const entry = map[aaguid]
-
-  if (entry === undefined) return null
-
-  return { name: entry.name, light: entry.icon_light, dark: entry.icon_dark }
-}

package/ui/src/@/iam/ui/credentials/passkeys/Manager.svelte

@@ -1,83 +0,0 @@
-<script lang="ts">
-  import { add } from '@/passkeys'
-  import { account } from '@/iam'
-  import { Spinner } from '$ui/spinner'
-  import * as Item from '$ui/item'
-  import { Input } from '$ui/input'
-  import { Button } from '$ui/button'
-  import { onsubmit } from '$lib/tools'
-  import { dict } from '../../intl'
-  import Key from './Key.svelte'
-  import type { Props } from './Manager'
-
-  const { keys }: Props = $props()
-
-  const id = $derived($account?.id)
-
-  let input = $state<HTMLInputElement | null>(null)
-  let value = $state('')
-  let busy = $state(false)
-  let error = $state<Error | null>(null)
-
-  // WebAuthn raises InvalidStateError only when the authenticator already holds
-  // a credential the challenge excluded — this device is enrolled already
-  const message = $derived(
-    error === null
-      ? null
-      : error.name === 'InvalidStateError'
-        ? $dict.credentials.passkeys.duplicate
-        : $dict.credentials.passkeys.failed,
-  )
-
-  export function focus() {
-    input?.focus()
-  }
-
-  async function submit() {
-    const name = value.trim()
-
-    if (id === undefined || name.length === 0) return
-
-    busy = true
-    error = null
-
-    const res = await add(id, name)
-
-    busy = false
-
-    if (res instanceof Error) error = res
-    else value = ''
-  }
-</script>
-
-{#each keys as key (key.id)}
-  <Item.Separator />
-  <Key passkey={key} />
-{/each}
-
-<Item.Separator />
-
-<form onsubmit={onsubmit(submit)} class="flex flex-col gap-2 p-2 pt-0">
-  <div class="flex items-center gap-2">
-    <Input
-      bind:ref={input}
-      bind:value
-      name="name"
-      type="text"
-      autocomplete="given-name"
-      placeholder={$dict.credentials.passkeys.add}
-      aria-invalid={message !== null}
-      required
-      disabled={busy} />
-    <Button variant="outline" type="submit" disabled={busy}>
-      {#if busy}
-        <Spinner />
-      {:else}
-        {$dict.credentials.passkeys.create}
-      {/if}
-    </Button>
-  </div>
-  {#if message !== null}
-    <p role="alert" class="text-destructive px-1 text-sm">{message}</p>
-  {/if}
-</form>

package/ui/src/@/iam/ui/credentials/passkeys/Manager.ts

@@ -1,5 +0,0 @@
-import type { Passkey } from '@/passkeys'
-
-export interface Props {
-  keys: Passkey[]
-}

package/ui/src/@/iam/ui/credentials/passkeys/Passkeys.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  import { tick } from 'svelte'
-  import { Async } from 'svas'
-  import { passkeys } from '@/passkeys'
-  import * as Item from '$ui/item'
-  import Summary from './Summary.svelte'
-  import Manager from './Manager.svelte'
-
-  let open = $state(false)
-  let manager = $state<ReturnType<typeof Manager>>()
-
-  async function toggle(create: boolean) {
-    open = !open
-
-    if (!open || !create) return
-
-    await tick()
-    manager?.focus()
-  }
-</script>
-
-<Async store={passkeys}>
-  {#snippet awaited(keys)}
-    <div class="overflow-hidden rounded-xl border">
-      <Item.Group class="gap-0">
-        <Summary count={keys.length} {open} ontoggle={() => toggle(keys.length === 0)} />
-        <div
-          class={[
-            'grid transition-[grid-template-rows] duration-300 ease-out motion-reduce:transition-none',
-            open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
-          ]}>
-          <div class="overflow-hidden" inert={!open}>
-            <Manager bind:this={manager} {keys} />
-          </div>
-        </div>
-      </Item.Group>
-    </div>
-  {/snippet}
-</Async>

package/ui/src/@/iam/ui/credentials/passkeys/Summary.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { FingerprintPattern } from '@lucide/svelte'
-  import * as Item from '$ui/item'
-  import { Button } from '$ui/button'
-  import { dict } from '../../intl'
-  import type { Props } from './Summary'
-
-  const { count, open, ontoggle }: Props = $props()
-
-  const copy = $derived($dict.credentials.passkeys)
-  const cta = $derived(open ? copy.collapse : count ? copy.manage : copy.create)
-</script>
-
-<Item.Root>
-  <Item.Media variant="icon">
-    <FingerprintPattern class="size-5" />
-  </Item.Media>
-  <Item.Content>
-    <Item.Title>{copy.title}</Item.Title>
-    <Item.Description>
-      {#if count}{copy.count(count)}{:else}{copy.tagline}{/if}
-    </Item.Description>
-  </Item.Content>
-  <Item.Actions>
-    <Button variant="secondary" onclick={ontoggle}>{cta}</Button>
-  </Item.Actions>
-</Item.Root>

package/ui/src/@/iam/ui/credentials/passkeys/Summary.ts

@@ -1,5 +0,0 @@
-export interface Props {
-  count: number
-  open: boolean
-  ontoggle: () => void
-}

package/ui/src/@/iam/ui/credentials/passkeys/index.ts

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

package/ui/src/@/iam/ui/credentials/providers.ts

@@ -1,15 +0,0 @@
-import { Mail } from '@lucide/svelte'
-import { icons } from '../oidc/icons'
-import type { Component } from 'svelte'
-
-/** Presentational descriptor for a provider row. Carries no behaviour. */
-export interface Descriptor {
-  id: 'email' | 'google' | 'apple'
-  icon: Component
-}
-
-export const providers: readonly Descriptor[] = [
-  { id: 'email', icon: Mail },
-  { id: 'google', icon: icons.google },
-  { id: 'apple', icon: icons.apple },
-] as const

package/ui/src/@/iam/ui/credentials/transfer/Qr.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import QRCode from 'qrcode'
-  import { Spinner } from '$ui/spinner'
-  import type { Props } from './Qr'
-
-  const { value }: Props = $props()
-
-  let src = $state<string | null>(null)
-
-  $effect(() => {
-    void QRCode.toDataURL(value, { width: 256, margin: 1 }).then(
-      (data) => (src = data),
-      () => (src = null),
-    )
-  })
-</script>
-
-<div class="bg-background mx-auto grid size-64 place-items-center rounded-lg border p-2">
-  {#if src}
-    <img {src} alt="" class="size-full" width="256" height="256" />
-  {:else}
-    <Spinner />
-  {/if}
-</div>

package/ui/src/@/iam/ui/credentials/transfer/Qr.ts

@@ -1,3 +0,0 @@
-export interface Props {
-  value: string
-}

package/ui/src/@/iam/ui/credentials/transfer/Transfer.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-  import { ChevronRight, QrCode } from '@lucide/svelte'
-  import { challenge } from '@/iam'
-  import { buttonVariants } from '$ui/button'
-  import * as AlertDialog from '$ui/alert-dialog'
-  import { convert } from '$lib/tools'
-  import { browser, dev } from '$app/environment'
-  import { dict } from '../../intl'
-  import Qr from './Qr.svelte'
-  import type { Props } from './Transfer'
-
-  const { class: classes }: Props = $props()
-
-  const url = $derived(
-    browser && $challenge
-      ? `${location.origin}/#challenge=${convert.toBase64Url($challenge)}`
-      : null,
-  )
-
-  function onOpenChange(open: boolean) {
-    if (!open && dev && url) void navigator.clipboard.writeText(url)
-  }
-</script>
-
-<AlertDialog.Root {onOpenChange}>
-  <AlertDialog.Trigger
-    class={[
-      buttonVariants({ variant: 'ghost', size: 'sm' }),
-      'text-muted-foreground justify-start gap-1',
-      classes,
-    ]}>
-    <QrCode class="size-4" />
-    {$dict.credentials.transfer.action}
-    <ChevronRight class="size-4 opacity-60" />
-  </AlertDialog.Trigger>
-  <AlertDialog.Content>
-    <AlertDialog.Header>
-      <AlertDialog.Title>{$dict.credentials.transfer.title}</AlertDialog.Title>
-      <AlertDialog.Description>{$dict.credentials.transfer.description}</AlertDialog.Description>
-    </AlertDialog.Header>
-    {#if url}
-      <Qr value={url} />
-    {/if}
-    <AlertDialog.Footer>
-      <AlertDialog.Cancel>{$dict.credentials.transfer.done}</AlertDialog.Cancel>
-    </AlertDialog.Footer>
-  </AlertDialog.Content>
-</AlertDialog.Root>

package/ui/src/@/iam/ui/credentials/transfer/Transfer.ts

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

package/ui/src/@/iam/ui/credentials/transfer/index.ts

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

package/ui/src/@/iam/ui/index.ts

@@ -1,3 +0,0 @@
-export { default as Authenticated } from './Authenticated.svelte'
-export { default as Authorized } from './Authorized.svelte'
-export { Credentials } from './credentials'

package/ui/src/@/iam/ui/intl/built.js

@@ -1,79 +0,0 @@
-// Auto-generated by i18n CLI - do not edit manually
-
-/** @type {Record<import('$lib/intl').Locale, import('./types').Dictionary>} */
-export const dictionaries = {
-  "en-US": {
-    "auth": {
-      "signupTitle": "One-tap sign-up",
-      "passwordTitle": "Hop in with password",
-      "passwordDescription": "Create an account or sign in",
-      "passkey": "Passkeys",
-      "email": "Email",
-      "alreadyHaveAccount": "Already have an account?",
-      "betterSecurity": "Better security",
-      "passkeysNotSupported": "Passkeys not supported",
-      "passkeysWarning": "Your browser does not respect your privacy and security.",
-      "learnMore": "Learn more",
-      "passwordBlank": "Leave password blank <nobr>to receive</nobr> <nobr>a one-time</nobr> passcode.",
-      "otpInstructions": "Enter the code sent to your email. It expires in 5 minutes.",
-      "continueWith": (provider) => {
-  return `Continue with ${provider}`
-},
-      "passkeysDescription": "Passkeys are safer than passwords, easier to use, and can’t be stolen.",
-      "yourName": "Your name",
-      "password": "Password",
-      "refresh": {
-        "description": (name) => `${name ? name + ", for" : "For"} security reasons, your credentials have expired. Please log in again to continue.`,
-        "title": "Welcome back",
-        "continue": "Continue"
-      },
-      "signout": "Sign out",
-      "login": "Log In",
-      "signin": "Sign In",
-      "copyId": "Copy account ID"
-    },
-    "credentials": {
-      "connect": "Connect",
-      "email": {
-        "title": "Email",
-        "description": "Connect your email address"
-      },
-      "google": {
-        "title": "Google",
-        "description": "Connect your Google account"
-      },
-      "apple": {
-        "title": "Apple",
-        "description": "Connect your Apple ID"
-      },
-      "passkeys": {
-        "title": "Passkeys",
-        "tagline": "Sign in faster with a passkey",
-        "create": "Create",
-        "manage": "Manage",
-        "collapse": "Collapse",
-        "add": "Enter passkey name",
-        "delete": "Hold to delete",
-        "unknown": "Unknown",
-        "count": (count) => {
-      const forms = {"one":"{n} passkey","other":"{n} passkeys"};
-      const locale = "en-US"; // This will be replaced by the build system
-      const pluralRules = new Intl.PluralRules(locale);
-      const rule = pluralRules.select(count);
-      const table = /** @type {Record<string, string>} */ (forms);
-
-      return (table[rule] ?? table.other).replace(/{n}/g, new Intl.NumberFormat(locale).format(count));
-    },
-        "meta": (added, used) => `Added ${added} · Used ${used}`,
-        "duplicate": "This device already has a passkey for your account",
-        "failed": "Could not create the passkey. Please try again."
-      },
-      "transfer": {
-        "action": "Sign in on another device",
-        "title": "Scan to sign in",
-        "description": "Use your other device to scan this code and sign in.",
-        "done": "Done"
-      }
-    }
-  }
-};