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

package/ui/package.json

@@ -1,76 +0,0 @@
-{
-  "name": "configuration-ui",
-  "private": true,
-  "version": "0.0.1",
-  "type": "module",
-  "scripts": {
-    "dev": "vite dev --open --host",
-    "build": "vite build",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "eslint .",
-    "test:e2e": "playwright install && playwright test",
-    "test": "npm run test:e2e",
-    "format": "eslint . --fix",
-    "bump": "npx -y npm-check-updates --target minor -u",
-    "features": "npx bddgen && npx playwright test"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.39.5",
-    "@faker-js/faker": "^10.6.0",
-    "@fontsource-variable/inter": "^5.3.0",
-    "@internationalized/date": "^3.12.3",
-    "@lucide/svelte": "^1.34.0",
-    "@playwright/test": "^1.62.1",
-    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.70.3",
-    "@sveltejs/vite-plugin-svelte": "^7.3.0",
-    "@tailwindcss/vite": "^4.3.3",
-    "@toa.io/origin": "^1.18.2",
-    "@types/d3-selection": "^3.0.11",
-    "@types/d3-zoom": "^3.0.8",
-    "@types/dom-navigation": "^1.0.7",
-    "@types/negotiator": "^0.6.5",
-    "@types/node": "^24",
-    "@types/qrcode": "^1.5.6",
-    "ajv": "8.20.0",
-    "bits-ui": "^2.19.0",
-    "clsx": "^2.1.1",
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0",
-    "eslint": "^9.39.5",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-svelte": "^3.23.0",
-    "eslint-plugin-unused-imports": "^4.4.1",
-    "globals": "^17.11.0",
-    "js-yaml": "5.4.1",
-    "meros": "^1.3.2",
-    "mitt": "^3.0.1",
-    "neostandard": "^0.13.0",
-    "playwright-bdd": "^9.2.0",
-    "shadcn-svelte": "^1.5.1",
-    "svas": "^1.7.1",
-    "svelte": "^5.56.10",
-    "svelte-check": "^4.7.6",
-    "svintl": "^1.17.0",
-    "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.3.1",
-    "tailwindcss": "^4.3.3",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.68.0",
-    "vite": "^8.2.2",
-    "vite-plugin-transform-lucide-imports": "^0.3.1",
-    "vitest": "^4.1.11"
-  },
-  "bin": {
-    "shad": "tools/shad.js",
-    "feat": "tools/feat.js"
-  },
-  "dependencies": {
-    "negotiator": "^1.1.0",
-    "qrcode": "^1.5.4"
-  },
-  "description": "Toa Configuration UI"
-}

package/ui/playwright.config.ts

@@ -1,13 +0,0 @@
-import { defineBddConfig } from 'playwright-bdd'
-import { defineConfig } from '@playwright/test'
-
-const testDir = defineBddConfig({
-  features: './features/**/*.feature',
-  steps: './features/steps/**/*.ts',
-})
-
-export default defineConfig({
-  testDir,
-  use: { baseURL: process.env.APP_URL || 'http://localhost:5173' },
-  expect: { timeout: 3_000 },
-})

package/ui/skills-lock.json

@@ -1,30 +0,0 @@
-{
-  "version": 1,
-  "skills": {
-    "antcn": {
-      "source": "cn.ants.dev",
-      "sourceUrl": "https://cn.ants.dev",
-      "sourceType": "well-known",
-      "computedHash": "9dc789fa80bcdffb1347075dd3be6fb10fa13d5ac6f5b4831cb3ef8eb2d94e16",
-      "wellKnownDigest": "sha256:d4ca7d272fcbb9fb577db347542947414a40d530b0ae260b9c83bb827e675714"
-    },
-    "shadcn-svelte": {
-      "source": "huntabyte/shadcn-svelte",
-      "sourceType": "github",
-      "skillPath": "skills/shadcn-svelte/SKILL.md",
-      "computedHash": "d4f3f983a71466a86649985a8a7fbce47da29f44de3a9d02540bbcf3167134e0"
-    },
-    "svas": {
-      "source": "temich/svas",
-      "sourceType": "github",
-      "skillPath": "skills/svas/SKILL.md",
-      "computedHash": "4c40a657053dd5a475b72bdc4163047cee30bba901c98be246303a95d9fe9d2c"
-    },
-    "svintl": {
-      "source": "temich/svintl",
-      "sourceType": "github",
-      "skillPath": "skills/svintl/SKILL.md",
-      "computedHash": "e243a29a69fd45b98e05c683c116e3bdce2a2d8c7e2858b89e81ae7b52e86008"
-    }
-  }
-}

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

@@ -1 +0,0 @@
-export * from './svc'

package/ui/src/@/configuration/svc/create.ts

@@ -1,29 +0,0 @@
-import { ensure } from 'svas'
-import { account } from '@/iam/svc/store'
-import { configurations } from './store'
-import * as origin from './net'
-import type { Node } from './net'
-
-/**
- * Creates a configuration for the component. A configuration is immutable, so this is a
- * new object rather than a change to the one there — and what it answers with is the
- * epoch it was filed under.
- *
- * The created value is written into the store, so every screen showing it follows
- * without asking the service again.
- */
-export async function create(component: string, configuration: Node): Promise<void | Error> {
-  // the identity is what the service records as the originator, and creating is a side
-  // effect of a user action — so it must be there by now
-  ensure(account)
-
-  const created = await origin.create(component, configuration)
-
-  if (created instanceof Error) return created
-
-  configurations.update(component, (current) => ({
-    ...current,
-    configuration,
-    epoch: created.epoch,
-  }))
-}

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

@@ -1,3 +0,0 @@
-export { configurations } from './store'
-export { create } from './create'
-export type { Configuration, Node } from './store'

package/ui/src/@/configuration/svc/net/Configuration.ts

@@ -1,18 +0,0 @@
-/** A component's configuration for its deployed epoch, with the schema it satisfies. */
-export interface Configuration {
-  /** The component's name, which is what identifies its configuration. */
-  id: string
-  component: string
-  epoch: string
-  configuration: Node
-  /** What the value is checked against. An epoch the deployment forgot has none. */
-  schema?: object
-}
-
-/** What was created, as the service answers a `POST`. */
-export interface Created {
-  id: string
-  epoch: string
-}
-
-export type Node = Record<string, unknown>

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

@@ -1,2 +0,0 @@
-export { list, get, create } from './interface'
-export type { Configuration, Created, Node } from './Configuration'

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

@@ -1,35 +0,0 @@
-import { origin } from '@/net'
-import type { Configuration, Created, Node } from './Configuration'
-
-const values = origin.resource('/configuration/values/', { credentials: 'include' })
-
-/** What the resources answer with: the component names the item, the store keys by `id`. */
-type Item = Omit<Configuration, 'id'>
-
-export async function list(): Promise<Configuration[] | Error> {
-  const items = await values.json<Item[]>()
-
-  if (items instanceof Error) return items
-
-  return items.map(identify)
-}
-
-export async function get(component: string): Promise<Configuration | Error> {
-  const item = await values.json<Omit<Item, 'component'>>(component + '/')
-
-  if (item instanceof Error) return item
-
-  return identify({ ...item, component })
-}
-
-export async function create(component: string, configuration: Node): Promise<Created | Error> {
-  return await values.json<Created>(component + '/', {
-    method: 'POST',
-    body: { configuration },
-  })
-}
-
-/** A configuration is its component's, so the component is what identifies it. */
-function identify(item: Item): Configuration {
-  return { ...item, id: item.component }
-}

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

@@ -1,14 +0,0 @@
-import { collection, values } from 'svas'
-import { account } from '@/iam/svc/store'
-import * as origin from './net'
-
-export const configurations = collection<Configuration>({
-  get: origin.list,
-  values: values<Configuration>({ get: origin.get }),
-  persist: 'configuration:values',
-  bind: account,
-  stale: true,
-})
-
-export type Configuration = origin.Configuration
-export type Node = origin.Node

package/ui/src/@/configuration/ui/Configurations.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-  import { Async, ok } from 'svas'
-  import { configurations, type Configuration } from '@/configuration'
-  import { Separator } from '$ui/separator'
-  import { base } from '$app/paths'
-  import { goto } from '$app/navigation'
-  import { only, query, rank, system } from './ui'
-  import { dict } from './intl'
-  import Row from './Row.svelte'
-  import type { Props } from './Configurations'
-
-  const { class: className, ...props }: Props = $props()
-
-  const list = $derived(ok($configurations) ? $configurations : [])
-
-  const shown = $derived(
-    list
-      .map((item) => ({ item, rank: rank(item, $query) }))
-      .filter((ranked) => ranked.rank > 0)
-      .sort(order)
-      .map((ranked) => ranked.item),
-  )
-
-  /** Best answers first, then by name; the service returns them in its own order. */
-  function order(a: Ranked, b: Ranked) {
-    return b.rank - a.rank || a.item.component.localeCompare(b.item.component)
-  }
-
-  /**
-   * What the application declared, then what it was given. A band the filter has emptied
-   * is not a band: its heading would say there is something there and there is not.
-   */
-  function group(items: Configuration[]) {
-    return [
-      { id: 'user', label: $dict.space.user, of: items.filter((it) => !system(it.component)) },
-      { id: 'system', label: $dict.space.system, of: items.filter((it) => system(it.component)) },
-    ].filter((band) => band.of.length > 0)
-  }
-
-  interface Ranked {
-    item: Configuration
-    rank: number
-  }
-
-  // with one row left there is nothing to choose, so the key does what pressing it does
-  $effect(() => {
-    const single = shown.length === 1 ? shown[0].id : null
-
-    only.set(single === null ? null : () => void goto(`${base}/${single}/`))
-
-    return () => only.set(null)
-  })
-</script>
-
-<Async store={configurations}>
-  {#snippet awaited()}
-    {#if list.length === 0}
-      <p class="text-muted-foreground py-20 text-center">{$dict.values.empty}</p>
-    {:else if shown.length === 0}
-      <p class="text-muted-foreground py-20 text-center">{$dict.values.nomatch}</p>
-    {:else}
-      <div class={['flex flex-col gap-6', className]} {...props}>
-        {#each group(shown) as band (band.id)}
-          <section class="flex flex-col gap-2">
-            <div class="text-muted-foreground flex items-center gap-3">
-              <span class="text-xs font-medium tracking-wide uppercase">{band.label}</span>
-              <Separator class="flex-1" />
-            </div>
-
-            <!-- a row says a name and nothing else, so it takes a column rather than a
-                 line: as many columns as the screen has room for -->
-            <div
-              role="list"
-              class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
-            >
-              {#each band.of as item (item.id)}
-                <Row configuration={item} />
-              {/each}
-            </div>
-          </section>
-        {/each}
-      </div>
-    {/if}
-  {/snippet}
-</Async>

package/ui/src/@/configuration/ui/Configurations.ts

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

package/ui/src/@/configuration/ui/Create.svelte

@@ -1,64 +0,0 @@
-<script lang="ts">
-  import { dump } from 'js-yaml'
-  import { Pencil } from '@lucide/svelte'
-  import { create } from '@/configuration'
-  import { buttonVariants } from '$ui/button'
-  import * as Dialog from '$ui/alert-dialog'
-  import { dict } from './intl'
-  import Form from './Form.svelte'
-  import type { Node } from '@/configuration'
-  import type { Props } from './Create'
-
-  const { configuration }: Props = $props()
-
-  let open = $state(false)
-
-  /**
-   * The dialog opens on what the component has now, so a change is an edit. A created
-   * configuration replaces the whole of the one before it — what is not here is gone.
-   */
-  const text = $derived(dump(configuration.configuration))
-
-  async function submit(value: Node): Promise<void | Error> {
-    const result = await create(configuration.component, value)
-
-    if (result instanceof Error) return result
-
-    open = false
-  }
-</script>
-
-<Dialog.Root bind:open>
-  <Dialog.Trigger
-    id="configuration-edit-button"
-    class={buttonVariants({ variant: 'outline', size: 'sm' })}
-  >
-    <Pencil />
-    {$dict.create.action}
-  </Dialog.Trigger>
-
-  <!-- the width goes through the same `data-size` variant the component styles itself with:
-       a plain `sm:max-w-*` loses to it on specificity, and tailwind-merge, seeing a different
-       variant, keeps both. An editor takes the room the screen has rather than a fixed step. -->
-  <Dialog.Content
-    class="data-[size=default]:max-w-[calc(100vw-2rem)]
-      data-[size=default]:sm:max-w-[min(90vw,72rem)]"
-  >
-    <Dialog.Header>
-      <Dialog.Title>{$dict.create.title}</Dialog.Title>
-    </Dialog.Header>
-
-    <!-- keyed on the text the dialog opened with, so a reopened dialog is not the one
-         that was cancelled -->
-    {#if open}
-      {#key text}
-        <Form
-          value={{ text }}
-          schema={configuration.schema}
-          onsubmit={submit}
-          oncancel={() => (open = false)}
-        />
-      {/key}
-    {/if}
-  </Dialog.Content>
-</Dialog.Root>

package/ui/src/@/configuration/ui/Create.ts

@@ -1,7 +0,0 @@
-import type { Configuration } from '@/configuration'
-
-export type ConfigurationLike = Pick<Configuration, 'component' | 'configuration' | 'schema'>
-
-export interface Props {
-  configuration: ConfigurationLike
-}

package/ui/src/@/configuration/ui/Form.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-  import { untrack } from 'svelte'
-  import { Textarea } from '$ui/textarea'
-  import { Button } from '$ui/button'
-  import { onsubmit as handler } from '$lib/tools'
-  import { dict } from './intl'
-  import { read, type Props } from './Form'
-
-  const { value, schema, onsubmit, oncancel, class: className }: Props = $props()
-
-  // captured once on purpose: the dialog keys the form on what it opened with, so a
-  // form that is still mounted is still the one the reader is editing
-  let text = $state(untrack(() => value.text))
-  let busy = $state(false)
-  let failed = $state(false)
-
-  const reading = $derived(read(text, schema, $dict.create.malformed))
-  const errors = $derived('errors' in reading ? reading.errors : [])
-
-  async function submit(): Promise<void> {
-    if ('errors' in reading) return
-
-    busy = true
-    failed = false
-
-    const result = await onsubmit?.(reading.value)
-
-    busy = false
-    failed = result instanceof Error
-  }
-</script>
-
-<form onsubmit={handler(submit)} class={['flex flex-col gap-3', className]}>
-  <!-- the dialog's title says what this is; the field carries the name for a reader
-       that cannot see the title -->
-  <Textarea
-    id="configuration-value-input"
-    aria-label={$dict.create.editor}
-    bind:value={text}
-    spellcheck={false}
-    autocapitalize="off"
-    aria-invalid={errors.length > 0}
-    aria-describedby={errors.length > 0 ? 'configuration-errors' : undefined}
-    class="field-sizing-fixed h-[min(55vh,32rem)] min-h-48 font-mono text-xs"
-  />
-
-  <!-- no room is held for it: an empty band under the editor reads as a gap, and the
-       dialog is centred, so what it costs when something is wrong is half a line -->
-  <div id="configuration-errors" class="text-destructive empty:hidden font-mono text-xs">
-    {#each errors as error, at (at)}
-      <div>{error}</div>
-    {/each}
-
-    {#if failed && errors.length === 0}
-      <div>{$dict.create.failed}</div>
-    {/if}
-  </div>
-
-  <div class="flex justify-end gap-2">
-    <Button
-      id="configuration-cancel-button"
-      type="button"
-      variant="ghost"
-      disabled={busy}
-      onclick={oncancel}
-    >
-      {$dict.create.cancel}
-    </Button>
-
-    <!-- what does not satisfy the schema never reaches the service -->
-    <Button id="configuration-submit-button" type="submit" disabled={busy || errors.length > 0}>
-      {$dict.create.submit}
-    </Button>
-  </div>
-</form>

package/ui/src/@/configuration/ui/Form.ts

@@ -1,79 +0,0 @@
-import { load } from 'js-yaml'
-import Ajv, { type ErrorObject, type ValidateFunction } from 'ajv'
-import type { ClassValue } from 'svelte/elements'
-import type { Node } from '@/configuration'
-
-export interface Value {
-  /** The configuration as the reader wrote it. */
-  text: string
-}
-
-export interface Props {
-  value: Value
-  /** What the value is checked against. Without one nothing here can be checked. */
-  schema?: object
-  onsubmit?: (value: Node) => Promise<void | Error>
-  oncancel?: () => void
-  class?: ClassValue
-}
-
-/** What the text says, or what is wrong with it. */
-export type Reading = { value: Node } | { errors: string[] }
-
-/**
- * `useDefaults` is off: the service fills the schema's defaults when it stores the
- * value, and filling them here would put words in the reader's mouth.
- *
- * `$data` is off — it is ajv's default, said out loud because the option carries a
- * ReDoS of its own (GHSA-2g4f-4pwh-qvx6) and nothing here needs it.
- */
-const ajv = new Ajv({ allErrors: true, strict: false, $data: false })
-
-const validators = new WeakMap<object, ValidateFunction>()
-
-/**
- * The configuration the text holds, or every reason it is not one. Nothing is sent that
- * has not passed this, so the service never refuses what the page could have caught.
- */
-export function read(text: string, schema: object | undefined, malformed: string): Reading {
-  let parsed: unknown
-
-  try {
-    parsed = load(text)
-  } catch {
-    return { errors: [malformed] }
-  }
-
-  // an empty document is an empty configuration, which is a thing a schema may allow
-  const value = parsed ?? {}
-
-  if (typeof value !== 'object' || value === null || Array.isArray(value))
-    return { errors: [malformed] }
-
-  if (schema === undefined) return { value: value as Node }
-
-  const validate = compile(schema)
-
-  if (validate(value)) return { value: value as Node }
-
-  return { errors: (validate.errors ?? []).map(describe) }
-}
-
-function compile(schema: object): ValidateFunction {
-  let validate = validators.get(schema)
-
-  if (validate === undefined) {
-    validate = ajv.compile(schema)
-    validators.set(schema, validate)
-  }
-
-  return validate
-}
-
-/** Where the fault is and what it is, as one line: `foo/0: must be integer`. */
-function describe(error: ErrorObject): string {
-  const at = error.instancePath.replace(/^\//, '')
-  const said = error.message ?? 'is invalid'
-
-  return at === '' ? said : `${at}: ${said}`
-}

package/ui/src/@/configuration/ui/Row.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { ChevronRight, KeyRound } from '@lucide/svelte'
-  import * as Item from '$ui/item'
-  import { base } from '$app/paths'
-  import { DEFAULT, split } from './ui'
-  import { holds } from './read'
-  import { dict } from './intl'
-  import type { Props } from './Row'
-
-  const { configuration, class: className }: Props = $props()
-
-  const name = $derived(split(configuration.component))
-  const secret = $derived(holds(configuration.configuration))
-</script>
-
-<!-- the row is the link, which is what the item's own `[a]:hover` styling expects -->
-<Item.Root variant="outline" size="sm" class={className}>
-  {#snippet child({ props })}
-    <a {...props} id="configurations-{configuration.id}-link" href="{base}/{configuration.id}/">
-      <Item.Content class="min-w-0">
-        <!-- the name is one string; the component spaces its children by default, and a
-             name too long for its column ends in an ellipsis rather than wrapping -->
-        <Item.Title class="w-full min-w-0 gap-0" title={configuration.component}>
-          <span class="truncate">
-            {#if name.namespace !== DEFAULT}<span class="text-muted-foreground"
-                >{name.namespace}.</span
-              >{/if}{name.component}
-          </span>
-
-          <!-- that the component keeps a secret is worth saying on the row; which one it
-               is, and what it stands for, is the screen's business -->
-          {#if secret}
-            <KeyRound
-              class="text-muted-foreground ms-1.5 size-3.5 shrink-0"
-              aria-label={$dict.value.secret}
-            />
-          {/if}
-        </Item.Title>
-      </Item.Content>
-
-      <ChevronRight class="size-4 shrink-0 opacity-60" />
-    </a>
-  {/snippet}
-</Item.Root>

package/ui/src/@/configuration/ui/Row.ts

@@ -1,9 +0,0 @@
-import type { ClassValue } from 'svelte/elements'
-import type { Configuration } from '@/configuration'
-
-export type ConfigurationLike = Pick<Configuration, 'id' | 'component' | 'configuration'>
-
-export interface Props {
-  configuration: ConfigurationLike
-  class?: ClassValue
-}

package/ui/src/@/configuration/ui/Value.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { KeyRound } from '@lucide/svelte'
-  import { read, ITEM } from './read'
-  import { dict } from './intl'
-  import type { Props } from './Value'
-
-  const { value, class: className }: Props = $props()
-
-  const lines = $derived(read(value))
-</script>
-
-<!-- the value as it is held, not as a form would take it: a secret is a reference, and a
-     reference is all there is to show -->
-<div
-  data-scrollable
-  class={[
-    'bg-muted/50 overflow-auto rounded-md p-3 font-mono text-xs whitespace-nowrap',
-    className,
-  ]}
->
-  {#each lines as line, at (at)}
-    <div style:padding-inline-start="{line.depth}rem">
-      {#if line.key === ITEM}<span class="text-muted-foreground">-</span>{:else}{line.key}<span
-          class="text-muted-foreground">:</span
-        >{/if}{#if line.secret}
-        <span class="text-muted-foreground inline-flex items-center gap-1 align-middle">
-          <KeyRound class="size-3" aria-hidden="true" />
-          {$dict.value.secret}
-        </span>
-      {:else if line.value !== null}&nbsp;{line.value}{/if}
-    </div>
-  {/each}
-</div>

package/ui/src/@/configuration/ui/Value.ts

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

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

@@ -1,9 +0,0 @@
-export { default as Configurations } from './Configurations.svelte'
-export { default as Row } from './Row.svelte'
-export { default as Value } from './Value.svelte'
-export { default as Create } from './Create.svelte'
-export type { Props as ConfigurationsProps } from './Configurations'
-export type { Props as RowProps, ConfigurationLike } from './Row'
-export { query, only, matches, split, DEFAULT } from './ui'
-export { read, secret, holds, ITEM } from './read'
-export type { Line } from './read'