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

package/ui/src/@/iam/ui/intl/context.yaml

@@ -1,91 +0,0 @@
-context: Mount 'iam' context
-inputs:
-  auth:
-    refresh:
-      description:
-        input: |-
-          !js
-                  (name) => `${name ? name + ", for" : "For"} security reasons, your credentials have expired. Please log in again to continue.`
-        context: Preserve html tags where appropriate
-      title:
-        input: Welcome back
-      continue:
-        input: Continue
-    signout:
-      input: Sign out
-    login:
-      input: Login
-    signin:
-      input: Sign In
-    copyId:
-      input: Copy the account id
-      context: accessible name of the button that copies the id; the button itself shows only its first characters
-  credentials:
-    connect:
-      input: Connect
-      context: Inert CTA button on a provider row
-    email:
-      title:
-        input: Email
-        context: Provider name
-      description:
-        input: Connect your email address
-    google:
-      title:
-        input: Google
-      description:
-        input: Connect your Google account
-        context: Google provider row description
-    apple:
-      title:
-        input: Apple
-      description:
-        input: Connect your Apple ID
-        context: Apple provider row description
-    passkeys:
-      title:
-        input: Passkeys
-        context: card title for the passkey manager
-      tagline:
-        input: Sign in faster with a passkey
-        context: shown when the user has no passkeys yet
-      create:
-        input: Create
-      manage:
-        input: Manage
-        context: CTA to expand the passkey list
-      collapse:
-        input: Collapse
-        context: CTA to close the expanded passkey card
-      add:
-        input: Enter passkey name
-        context: input placeholder for naming a new passkey
-      delete:
-        input: Hold to delete
-        context: press-and-hold label to remove a passkey
-      unknown:
-        input: Unknown
-        context: fallback name for an unrecognized authenticator
-      count:
-        input: "{n} passkey"
-      meta:
-        input: "!js (added, used) => `Added ${added} · Used ${used}`"
-      duplicate:
-        input: This device already has a passkey for your account
-        context: error shown under the passkey name field when registration is refused as a duplicate
-      failed:
-        input: Could not create the passkey. Please try again.
-        context: generic error shown under the passkey name field when registration fails
-    transfer:
-      action:
-        input: Sign in on another device
-        context: ghost button label that opens a QR dialog to transfer the session to a second device
-      title:
-        input: Scan to sign in
-        context: title of the QR login dialog
-      description:
-        input: Use your other device to scan this code and sign in.
-        context: description under the QR code in the login dialog
-      done:
-        input: Done
-        context: button that closes the QR login dialog

package/ui/src/@/iam/ui/intl/en-US.yaml

@@ -1,64 +0,0 @@
-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: |
-    !js
-    (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: |-
-      !js
-      (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:
-      - one: "{n} passkey"
-        other: "{n} passkeys"
-    meta: |-
-      !js
-      (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

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

@@ -1,10 +0,0 @@
-import { derived } from 'svelte/store'
-import { locale } from '$lib/intl'
-import { dictionaries } from './built.js'
-import type { Dictionary } from './types'
-import type { Locale } from '$lib/intl'
-
-const dict = derived(locale, ($locale) => dictionaries[$locale])
-
-export { dict, dictionaries, locale }
-export type { Locale, Dictionary }

package/ui/src/@/iam/ui/intl/types.ts

@@ -1,70 +0,0 @@
-/**
- * Auto-generated TypeScript definitions for i18n dictionaries
- *
- * @author copilot
- */
-
-export type Dictionary = {
-      auth: {
-        signupTitle: string
-        passwordTitle: string
-        passwordDescription: string
-        passkey: string
-        email: string
-        alreadyHaveAccount: string
-        betterSecurity: string
-        passkeysNotSupported: string
-        passkeysWarning: string
-        learnMore: string
-        passwordBlank: string
-        otpInstructions: string
-        continueWith: (value: any) => string
-        passkeysDescription: string
-        yourName: string
-        password: string
-        refresh: {
-          description: (value: any) => string
-          title: string
-          continue: string
-        }
-        signout: string
-        login: string
-        signin: string
-        copyId: string
-      }
-      credentials: {
-        connect: string
-        email: {
-          title: string
-          description: string
-        }
-        google: {
-          title: string
-          description: string
-        }
-        apple: {
-          title: string
-          description: string
-        }
-        passkeys: {
-          title: string
-          tagline: string
-          create: string
-          manage: string
-          collapse: string
-          add: string
-          delete: string
-          unknown: string
-          count: (value: number) => string
-          meta: (...args: [any, any]) => string
-          duplicate: string
-          failed: string
-        }
-        transfer: {
-          action: string
-          title: string
-          description: string
-          done: string
-        }
-      }
-    }

package/ui/src/@/iam/ui/oidc/Authentication.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { oidc } from '@/iam'
-  import Button from './Button.svelte'
-  import type { Props } from './Authentication'
-
-  const { account }: Props = $props()
-</script>
-
-<div class="flex gap-2">
-  {#if oidc.providers.google.client}
-    <Button idp="google" {account} />
-  {/if}
-  {#if oidc.providers.apple.client}
-    <Button idp="apple" {account} />
-  {/if}
-</div>

package/ui/src/@/iam/ui/oidc/Authentication.ts

@@ -1,5 +0,0 @@
-import type { AccountLike } from '../AccountLike'
-
-export interface Props {
-  account?: AccountLike
-}

package/ui/src/@/iam/ui/oidc/Button.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { oidc } from '@/iam'
-  import { Spinner } from '$ui/spinner'
-  import { Button } from '$ui/button'
-  import { cn } from '$lib/utils'
-  import { icons } from './icons'
-  import type { Props } from './Button'
-
-  const { idp, children, account, class: classes }: Props = $props()
-
-  const Icon = $derived(icons[idp])
-
-  async function onclick(event: MouseEvent) {
-    const button = event.currentTarget as HTMLButtonElement
-
-    button.disabled = true
-
-    await oidc.authenticate(idp, account?.id)
-
-    button.disabled = false
-  }
-</script>
-
-<Button
-  variant="outline"
-  size={children ? 'default' : 'icon'}
-  {onclick}
-  class={cn(
-    'disabled:[&_.x-icon]:hidden [&_.x-spinner]:hidden disabled:[&_.x-spinner]:block',
-    classes,
-  )}
->
-  <Icon class="x-icon" />
-  <Spinner class="x-spinner" />
-  {@render children?.()}
-</Button>

package/ui/src/@/iam/ui/oidc/Button.ts

@@ -1,11 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { Snippet } from 'svelte'
-import type { oidc } from '@/iam'
-import type { AccountLike } from '../AccountLike'
-
-export interface Props {
-  idp: oidc.IDP
-  children?: Snippet
-  account?: AccountLike
-  class?: ClassValue
-}

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

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import { dict } from '@/iam/ui/intl'
-  import Button from './Button.svelte'
-  import type { oidc } from '@/iam'
-
-  const { idp }: { idp: oidc.IDP } = $props()
-
-  const names: Record<oidc.IDP, string> = {
-    google: 'Google',
-    apple: 'Apple',
-  }
-</script>
-
-<Button {idp} class="w-full">
-  {$dict.auth.continueWith(names[idp])}
-</Button>

package/ui/src/@/iam/ui/oidc/icons/Apple.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { cn } from '$lib/utils'
-  import type { ClassValue } from 'svelte/elements'
-
-  const { fill, class: classes }: { fill?: string; class?: ClassValue } = $props()
-</script>
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  xml:space="preserve"
-  fill="currentColor"
-  viewBox="0 0 814 1000"
-  class={cn('size-5 -mt-[3px]', classes)}
->
-  <path
-    {fill}
-    d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
-  />
-</svg>

package/ui/src/@/iam/ui/oidc/icons/Google.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import type { ClassValue } from 'svelte/elements'
-
-  const { class: classes }: { class?: ClassValue } = $props()
-</script>
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="20"
-  height="20"
-  viewBox="0 0 20 20"
-  fill="none"
-  class={classes}
->
-  <path
-    d="M19.84 10.2273C19.84 9.5182 19.7764 8.8364 19.6582 8.1818H10.24V12.05H15.6218C15.39 13.3 14.6855 14.3591 13.6264 15.0682V17.5773H16.8582C18.7491 15.8364 19.84 13.2727 19.84 10.2273Z"
-    fill="#4285F4"
-  />
-  <path
-    d="M10.24 20C12.94 20 15.2036 19.1045 16.8581 17.5773L13.6263 15.0682C12.7309 15.6682 11.5854 16.0227 10.24 16.0227C7.6354 16.0227 5.4309 14.2636 4.6445 11.9H1.3036V14.4909C2.9491 17.7591 6.3309 20 10.24 20Z"
-    fill="#34A853"
-  />
-  <path
-    d="M4.6445 11.9C4.4445 11.3 4.3309 10.6591 4.3309 10C4.3309 9.3409 4.4445 8.7 4.6445 8.1V5.5091H1.3036C0.6264 6.8591 0.24 8.3864 0.24 10C0.24 11.6136 0.6264 13.1409 1.3036 14.4909L4.6445 11.9Z"
-    fill="#FBBC04"
-  />
-  <path
-    d="M10.24 3.9773C11.7081 3.9773 13.0263 4.4818 14.0627 5.4727L16.9309 2.6045C15.1991 0.9909 12.9354 0 10.24 0C6.3309 0 2.9491 2.2409 1.3036 5.5091L4.6445 8.1C5.4309 5.7364 7.6354 3.9773 10.24 3.9773Z"
-    fill="#E94235"
-  />
-</svg>

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

@@ -1,11 +0,0 @@
-import Google from './Google.svelte'
-import Apple from './Apple.svelte'
-import type { Component } from 'svelte'
-import type { oidc } from '@/iam'
-
-const icons: Record<oidc.IDP, Component> = {
-  google: Google,
-  apple: Apple,
-} as const
-
-export { icons }

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

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

package/ui/src/@/iam/ui/passkey/Authentication.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { ShieldCheck, ShieldOff } from '@lucide/svelte'
-  import { supported } from '@/passkeys'
-  import { dict } from '@/iam/ui/intl'
-  import * as Card from '$ui/card'
-  import * as Alert from '$ui/alert'
-  import { cn } from '$lib/utils'
-  import { apple } from '$lib/tools'
-  import Login from './Login.svelte'
-  import Create from './Create.svelte'
-  import type { Props } from './Authentication'
-
-  const { class: classes, account, oncreate }: Props = $props()
-
-  const href = apple
-    ? 'https://support.apple.com/en-us/102195'
-    : 'https://support.google.com/accounts/answer/13548313'
-</script>
-
-{#snippet description()}
-  <p>
-    {$dict.auth.passkeysDescription}
-    <a {href} target="_blank" class="text-nowrap">
-      {$dict.auth.learnMore}
-    </a>
-  </p>
-{/snippet}
-
-<div class="space-y-4">
-  <Card.Root class={cn('gap-4 bg-background/75', supported && 'pt-4', classes)}>
-    {#if supported}
-      <Card.Header class="gap-0">
-        <Card.Title><h2>{$dict.auth.signupTitle}</h2></Card.Title>
-      </Card.Header>
-      <Card.Content>
-        <Create {account} {oncreate} />
-      </Card.Content>
-    {/if}
-    <Card.Footer>
-      {#if supported}
-        <Alert.Root>
-          <ShieldCheck color="green" />
-          <Alert.Title>{$dict.auth.betterSecurity}</Alert.Title>
-          <Alert.Description>
-            {@render description()}
-          </Alert.Description>
-        </Alert.Root>
-      {:else}
-        <Alert.Root>
-          <ShieldOff color="red" class="animate-pulse" />
-          <Alert.Title>{$dict.auth.passkeysNotSupported}</Alert.Title>
-          <Alert.Description>
-            <p>{$dict.auth.passkeysWarning}</p>
-            {@render description()}
-          </Alert.Description>
-        </Alert.Root>
-      {/if}
-    </Card.Footer>
-  </Card.Root>
-
-  {#if supported && !account}
-    <Login />
-  {/if}
-</div>

package/ui/src/@/iam/ui/passkey/Authentication.ts

@@ -1,8 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { AccountLike } from '../AccountLike'
-
-export interface Props {
-  account?: AccountLike
-  class?: ClassValue
-  oncreate?: (account: AccountLike) => void
-}

package/ui/src/@/iam/ui/passkey/Create.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import { ArrowRight } from '@lucide/svelte'
-  import { dict } from '@/iam/ui/intl'
-  import { passkeys } from '@/iam'
-  import { Spinner } from '$ui/spinner'
-  import { Input } from '$ui/input'
-  import { Button } from '$ui/button'
-  import { autofocus, onsubmit } from '$lib/tools'
-  import type { Props } from './Create'
-
-  const { account, disabled, oncreate }: Props = $props()
-
-  let value = $derived(account?.name ?? '')
-  let busy = $state(false)
-
-  async function submit() {
-    const name = value.trim()
-
-    if (name.length === 0) return
-
-    busy = true
-
-    const echo = await passkeys.create(name, account?.id)
-
-    busy = false
-
-    if (echo instanceof Error) return
-
-    oncreate?.(echo)
-  }
-</script>
-
-<form onsubmit={onsubmit(submit)}>
-  <fieldset class="space-y-1" {disabled}>
-    <div class="flex items-center gap-2">
-      <Input
-        bind:value
-        id="name"
-        type="text"
-        placeholder={$dict.auth.yourName}
-        autocomplete="given-name"
-        required
-        {autofocus} />
-      <Button id="iam-passkey-create-button" size="icon-lg" type="submit">
-        {#if busy}
-          <Spinner />
-        {:else}
-          <ArrowRight />
-        {/if}
-      </Button>
-    </div>
-  </fieldset>
-</form>

package/ui/src/@/iam/ui/passkey/Create.ts

@@ -1,7 +0,0 @@
-import type { AccountLike } from '../AccountLike'
-
-export interface Props {
-  account?: AccountLike
-  disabled?: boolean
-  oncreate?: (account: AccountLike) => void
-}

package/ui/src/@/iam/ui/passkey/Login.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Fingerprint } from '@lucide/svelte'
-  import { dict } from '@/iam/ui/intl'
-  import { passkeys } from '@/iam'
-  import { Spinner } from '$ui/spinner'
-  import { Button } from '$ui/button'
-
-  let busy = $state(false)
-
-  async function login() {
-    busy = true
-
-    await passkeys.login()
-
-    busy = false
-  }
-</script>
-
-<div class="flex flex-col items-center justify-center gap-2">
-  <p>{$dict.auth.alreadyHaveAccount}</p>
-  <Button id="iam-passkey-login-button" variant="secondary" onclick={login}>
-    {#if busy}
-      <Spinner />
-    {:else}
-      <Fingerprint />
-    {/if}
-    {$dict.auth.signin}
-  </Button>
-</div>

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

@@ -1,29 +0,0 @@
-<script lang="ts">
-  import { Fingerprint } from '@lucide/svelte'
-  import { dict } from '@/iam/ui/intl'
-  import { passkeys } from '@/iam'
-  import { Spinner } from '$ui/spinner'
-  import { Button } from '$ui/button'
-  import type { AccountLike } from '../AccountLike'
-
-  const { account }: { account: AccountLike } = $props()
-
-  async function onclick(e: MouseEvent) {
-    const button = e.currentTarget as HTMLButtonElement
-
-    button.disabled = true
-
-    await passkeys.login(account.id)
-
-    button.disabled = false
-  }
-</script>
-
-<Button
-  class="w-full disabled:[&>.x-icon]:hidden [&>.x-spinner]:hidden disabled:[&>.x-spinner]:block"
-  {onclick}
->
-  <Fingerprint class="size-5 x-icon" />
-  <Spinner class="x-spinner" />
-  {$dict.auth.refresh.continue}
-</Button>

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

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

package/ui/src/@/iam/ui/password/Authentication.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import { dict } from '@/iam/ui/intl'
-  import * as Card from '$ui/card'
-  import { cn } from '$lib/utils'
-  import Form from './Form.svelte'
-  import type { Props } from './Authentication'
-
-  const { class: classes, account, oncreate }: Props = $props()
-</script>
-
-<Card.Root class={cn('pt-4 gap-4 bg-background/75', classes)}>
-  <Card.Header class="gap-0">
-    <Card.Title><h2>{$dict.auth.passwordTitle}</h2></Card.Title>
-    <Card.Description>{$dict.auth.passwordDescription}</Card.Description>
-  </Card.Header>
-  <Card.Content>
-    <Form {account} {oncreate} />
-  </Card.Content>
-</Card.Root>

package/ui/src/@/iam/ui/password/Authentication.ts

@@ -1,8 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { AccountLike } from '../AccountLike'
-
-export interface Props {
-  account?: AccountLike
-  class?: ClassValue
-  oncreate?: (account: AccountLike) => void
-}