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

package/ui/src/routes/(private)/[component]/+page.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { Async } from 'svas'
+  import { ChevronLeft } from '@lucide/svelte'
+  import { Authorized } from '@/iam/ui'
+  import { dict } from '@/configuration/ui/intl'
+  import { Create, DEFAULT, Value, split } from '@/configuration/ui'
+  import { configurations } from '@/configuration'
+  import { page } from '$app/state'
+  import { base } from '$app/paths'
+
+  /** What an account needs to create one. `auth:rule` in the component's manifest. */
+  const ROLE = 'system:configuration:create'
+
+  /** The service answers this when it holds no configuration for the component. */
+  const ABSENT = 404
+
+  const component = $derived(page.params.component ?? '')
+  const entry = $derived(configurations.get(component))
+  const name = $derived(split(component))
+
+  /** Not an error to report: the component simply has none. */
+  function absent(error: Error): boolean {
+    return 'code' in error && error.code === ABSENT
+  }
+</script>
+
+<div class="mx-auto h-full max-w-2xl overflow-auto px-4 pb-12">
+  <div class="flex items-center gap-2 py-2">
+    <a
+      id="configuration-back-link"
+      href="{base}/"
+      aria-label={$dict.value.title}
+      class="text-muted-foreground hover:text-foreground -ms-1 rounded-md p-1 transition-colors"
+    >
+      <ChevronLeft class="size-4" />
+    </a>
+
+    <h2 class="min-w-0 truncate font-medium">
+      {#if name.namespace !== DEFAULT}<span class="text-muted-foreground"
+          >{name.namespace}.</span
+        >{/if}{name.component}
+    </h2>
+
+    <!-- a gate over a control, not over a screen: an account that may only read sees the
+         configuration and simply no action -->
+    <div class="ms-auto">
+      <Async store={entry} silent>
+        {#snippet awaited(configuration)}
+          <Authorized role={ROLE}>
+            <Create {configuration} />
+            {#snippet denied()}{/snippet}
+          </Authorized>
+        {/snippet}
+      </Async>
+    </div>
+  </div>
+
+  <Async store={entry}>
+    {#snippet awaited(configuration)}
+      <Value value={configuration.configuration} />
+
+      <!-- the hash names the schema the value was checked against; it needs no label, and
+           centred it reads as a footer to the value above rather than a line of its own -->
+      <p class="text-muted-foreground mt-2 text-center font-mono text-xs">
+        {configuration.epoch}
+      </p>
+    {/snippet}
+
+    {#snippet error(reason)}
+      {#if absent(reason)}
+        <p class="text-muted-foreground py-20 text-center">{$dict.value.none}</p>
+      {:else}
+        <p class="text-destructive py-20 text-center">{reason.message}</p>
+      {/if}
+    {/snippet}
+  </Async>
+</div>

package/ui/src/routes/+layout.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import './layout.css'
+  import { navigate } from '$lib/tools'
+  import { dict } from '$lib/intl'
+  import { meta } from '$config'
+  import { page } from '$app/state'
+  import { onNavigate } from '$app/navigation'
+
+  const { children } = $props()
+  const title = $derived(page.data.meta?.title ?? meta.title)
+  const description = $derived(page.data.meta?.description ?? meta.description)
+
+  onNavigate(navigate)
+
+  $effect(() => {
+    document.dir = $dict.dir
+  })
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+  <meta name="description" content={description} />
+</svelte:head>
+
+{@render children()}

package/ui/src/routes/+layout.ts

@@ -0,0 +1,14 @@
+import { rc as realtime } from '@/realtime/rc'
+import { rc as iam } from '@/iam/rc'
+import { browser } from '$app/environment'
+
+if (browser) {
+  iam()
+  realtime()
+}
+
+// The explorer serves a directory of static files; routing belongs to the client.
+export const ssr = false
+export const prerender = false
+
+export const trailingSlash = 'always'

package/ui/src/routes/layout.css

@@ -0,0 +1,232 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+@import "@fontsource-variable/inter";
+@import '$lib/typeset.css';
+
+:root {
+	color-scheme: light dark;
+
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.147 0.004 49.3);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.147 0.004 49.3);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.147 0.004 49.3);
+	--primary: oklch(0.214 0.009 43.1);
+	--primary-foreground: oklch(0.986 0.002 67.8);
+	--secondary: oklch(0.96 0.002 17.2);
+	--secondary-foreground: oklch(0.214 0.009 43.1);
+	--muted: oklch(0.96 0.002 17.2);
+	--muted-foreground: oklch(0.547 0.021 43.1);
+	--accent: oklch(0.96 0.002 17.2);
+	--accent-foreground: oklch(0.214 0.009 43.1);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0.005 34.3);
+	--input: oklch(0.922 0.005 34.3);
+	--ring: oklch(0.714 0.014 41.2);
+	--chart-1: oklch(0.87 0 0);
+	--chart-2: oklch(0.556 0 0);
+	--chart-3: oklch(0.439 0 0);
+	--chart-4: oklch(0.371 0 0);
+	--chart-5: oklch(0.269 0 0);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.986 0.002 67.8);
+	--sidebar-foreground: oklch(0.147 0.004 49.3);
+	--sidebar-primary: oklch(0.214 0.009 43.1);
+	--sidebar-primary-foreground: oklch(0.986 0.002 67.8);
+	--sidebar-accent: oklch(0.96 0.002 17.2);
+	--sidebar-accent-foreground: oklch(0.214 0.009 43.1);
+	--sidebar-border: oklch(0.922 0.005 34.3);
+	--sidebar-ring: oklch(0.714 0.014 41.2);
+	--constructive: oklch(0.6637 0.161 150.99);
+	--constructive-foreground: oklch(0.9824 0.0093 62.5888);
+	--destructive-foreground: oklch(0.7106 0.1661 22.2162);
+	--shadow-color: rgb(0 0 0 / 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: oklch(0.147 0.004 49.3);
+		--foreground: oklch(0.986 0.002 67.8);
+		--card: oklch(0.214 0.009 43.1);
+		--card-foreground: oklch(0.986 0.002 67.8);
+		--popover: oklch(0.214 0.009 43.1);
+		--popover-foreground: oklch(0.986 0.002 67.8);
+		--primary: oklch(0.922 0.005 34.3);
+		--primary-foreground: oklch(0.214 0.009 43.1);
+		--secondary: oklch(0.268 0.011 36.5);
+		--secondary-foreground: oklch(0.986 0.002 67.8);
+		--muted: oklch(0.268 0.011 36.5);
+		--muted-foreground: oklch(0.714 0.014 41.2);
+		--accent: oklch(0.268 0.011 36.5);
+		--accent-foreground: oklch(0.986 0.002 67.8);
+		--destructive: oklch(0.704 0.191 22.216);
+		--border: oklch(1 0 0 / 10%);
+		--input: oklch(1 0 0 / 15%);
+		--ring: oklch(0.547 0.021 43.1);
+		--chart-1: oklch(0.87 0 0);
+		--chart-2: oklch(0.556 0 0);
+		--chart-3: oklch(0.439 0 0);
+		--chart-4: oklch(0.371 0 0);
+		--chart-5: oklch(0.269 0 0);
+		--sidebar: oklch(0.214 0.009 43.1);
+		--sidebar-foreground: oklch(0.986 0.002 67.8);
+		--sidebar-primary: oklch(0.488 0.243 264.376);
+		--sidebar-primary-foreground: oklch(0.986 0.002 67.8);
+		--sidebar-accent: oklch(0.268 0.011 36.5);
+		--sidebar-accent-foreground: oklch(0.986 0.002 67.8);
+		--sidebar-border: oklch(1 0 0 / 10%);
+		--sidebar-ring: oklch(0.547 0.021 43.1);
+		--shadow-color: rgba(53, 35, 20, 0.1);
+	}
+}
+
+@theme inline {
+	--font-sans: 'Inter Variable', sans-serif;
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+	--radius-sm: calc(var(--radius) * 0.6);
+	--radius-md: calc(var(--radius) * 0.8);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) * 1.4);
+	--radius-2xl: calc(var(--radius) * 1.8);
+	--radius-3xl: calc(var(--radius) * 2.2);
+	--radius-4xl: calc(var(--radius) * 2.6);
+	--color-constructive: var(--constructive);
+	--color-constructive-foreground: var(--constructive-foreground);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-shadow-color: var(--shadow-color);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+	html {
+		@apply font-sans;
+	}
+	.selected {
+		@apply bg-accent ring-2 ring-primary/75;
+	}
+	.no-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+	.no-scrollbar {
+		scrollbar-width: none;
+	}
+}
+
+@custom-variant standalone {
+  @media (display-mode: standalone) {
+    @slot;
+  }
+}
+
+@layer base {
+  html,
+  body {
+    touch-action: pan-y;
+    user-select: none;
+  }
+}
+
+@layer transitions {
+  @media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+      animation: none !important;
+    }
+  }
+
+  ::view-transition-group(*.transition-spring),
+  ::view-transition-old(*.transition-spring),
+  ::view-transition-new(*.transition-spring) {
+    animation-duration: 300ms;
+    animation-timing-function: cubic-bezier(0.2, 1.2, 0.2, 1);
+  }
+
+  ::view-transition-old(.transition-morph),
+  ::view-transition-new(.transition-morph) {
+    animation-duration: 300ms;
+    block-size: 100%;
+  }
+
+  ::view-transition-group(*.transition-instant),
+  ::view-transition-old(*.transition-instant),
+  ::view-transition-new(*.transition-instant) {
+    animation-duration: 0s;
+  }
+
+  /* One card flies between the two screens of the map, over everything else. */
+  ::view-transition-group(card) {
+    z-index: 2;
+  }
+
+  /* Everything the page is not carrying by name recedes as one piece, rather than card
+     by card: the screen being left goes back and out, the one arriving settles in. Only
+     on a navigation — a card opened in place is not the screen changing. */
+  html:active-view-transition-type(route)::view-transition-old(root) {
+    animation: recede 300ms cubic-bezier(0.2, 1.2, 0.2, 1) both;
+  }
+
+  html:active-view-transition-type(route)::view-transition-new(root) {
+    animation: arrive 300ms cubic-bezier(0.2, 1.2, 0.2, 1) both;
+  }
+
+  @keyframes recede {
+    to {
+      opacity: 0;
+      scale: 0.94;
+    }
+  }
+
+  @keyframes arrive {
+    from {
+      opacity: 0;
+      scale: 1.03;
+    }
+  }
+}
+
+
+@custom-variant tim {
+
+	@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
+
+		@slot ;
+	}
+}

package/ui/static/robots.txt

@@ -0,0 +1,3 @@
+# an operator's page, never a destination
+User-agent: *
+Disallow: /

package/ui/svelte.config.js

@@ -0,0 +1,36 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+import adapter from '@sveltejs/adapter-static'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://svelte.dev/docs/kit/integrations
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // A directory of files, nothing more: the explorer serves `dist` and the client owns
+    // routing, so every route resolves to the fallback.
+    adapter: adapter({ pages: 'dist', assets: 'dist', fallback: 'index.html' }),
+
+    // The ingress forwards the mount path rather than rewriting it, and the client router
+    // matches against `base` — so the path the extension publishes is baked in here.
+    // `relative` is off because the fallback answers URLs of any depth.
+    paths: { base: '/.configuration', relative: false },
+
+    alias: {
+      $ui: './src/lib/components/ui',
+      $com: './src/lib/components',
+      $lib: './src/lib',
+      $config: './src/config',
+      $origin: './src/origin',
+      '@': './src/@',
+    },
+    typescript: {
+      config: (config) => {
+        config.include.push('../features/**/*.ts')
+      },
+    },
+  },
+}
+
+export default config

package/ui/tools/feat.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process'
+
+const args = process.argv.slice(2)
+const nameIndex = args.indexOf('--name')
+const name = nameIndex !== -1 ? args[nameIndex + 1] : null
+
+// Remove --name and its value from args
+const filteredArgs = args.filter((arg, index) => {
+  if (arg === '--name')
+    return false
+
+  if (nameIndex !== -1 && index === nameIndex + 1)
+    return false
+
+  return true
+})
+
+// First run bddgen
+const bddgen = spawn('npx', ['bddgen'], { stdio: 'inherit' })
+
+bddgen.on('close', (code) => {
+  if (code !== 0)
+    process.exit(code)
+
+  // Then run playwright test
+  const playwrightArgs = ['playwright', 'test']
+
+  // Pass filename arguments directly
+  if (filteredArgs.length > 0)
+    playwrightArgs.push(...filteredArgs)
+
+  // Add --grep if --name was provided
+  if (name)
+    playwrightArgs.push('--grep', name)
+
+  const playwright = spawn('npx', playwrightArgs, { stdio: 'inherit' })
+
+  playwright.on('close', (code) => {
+    process.exit(code || 0)
+  })
+})

package/ui/tools/hooks/README.md

@@ -0,0 +1,13 @@
+# Agent hooks
+
+`guard-intl.sh` — pre-edit hook blocking direct edits to svintl-generated intl
+files (`*.yaml`, `built.js`, `types.ts` under any `*/intl/`; `index.ts` allowed).
+Denies via exit 2 + stderr, pointing at `npx intl` / `/svintl`.
+
+Wired per agent (project-scoped, committed):
+
+| Agent       | Config              | Activation note                                     |
+| ----------- | ------------------- | --------------------------------------------------- |
+| Claude Code | `.claude/settings.json` | Run `/hooks` to review+approve on first load        |
+| Cursor      | `.cursor/hooks.json`    | Hooks GA (≥1.7); reloads on save, restart if not    |
+| Codex       | `.codex/hooks.json`     | Run `/hooks` to trust the hook before it runs       |

package/ui/tools/hooks/guard-intl.sh

@@ -0,0 +1,40 @@
+#!/usr/bin/env sh
+# Block direct edits to svintl-generated intl files, for every AI agent.
+# Wired from Claude Code (.claude/settings.json), Cursor (.cursor/hooks.json)
+# and Codex (.codex/hooks.json) as a pre-edit hook.
+#
+# Why: everything under */intl/ except index.ts is generated/owned by svintl.
+# Hand-editing *.yaml / built.js / types.ts desyncs the built dictionaries.
+# Change them via `npx intl` or the /svintl skill instead.
+#
+# Universal deny = exit 2 + reason on stderr (honored by all three agents).
+# Only pre-*edit* tools invoke this hook, so scanning the payload for a
+# protected path can't block reads.
+
+set -eu
+
+payload="$(cat)"
+
+# Generated/managed files living directly inside any `*/intl/` directory:
+#   *.yaml (locales + context.yaml), built.js, types.ts.
+# index.ts is hand-written boilerplate -> intentionally not matched.
+protected='/intl/([A-Za-z0-9._-]+\.ya?ml|built\.js|types\.ts)'
+
+hit="$(printf '%s' "$payload" | grep -oE "$protected" | head -n1 || true)"
+
+[ -z "$hit" ] && exit 0
+
+cat >&2 <<EOF
+Blocked: edit to a generated intl file (matched "$hit").
+
+svintl owns every *.yaml, built.js and types.ts under */intl/ — editing them by
+hand desyncs the generated dictionaries. Use the tool, not the editor:
+
+  npx intl add <key> <value> [comment]   # new phrase (auto-translates)
+  npx intl set <key> <value> [comment]   # update existing
+  npx intl del|move|create|build …       # other ops (npx intl --help)
+  /svintl                                # skill wrapping the above
+
+Only intl/index.ts is hand-written.
+EOF
+exit 2

package/ui/tools/shad.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process'
+
+spawn('npx', ['shadcn-svelte', 'add', ...process.argv.slice(2)], {
+  stdio: 'inherit',
+})

package/ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"rewriteRelativeImportExtensions": true,
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// To make changes to top-level options such as include and exclude, we recommend extending
+	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+}

package/ui/vite.config.ts

@@ -0,0 +1,8 @@
+import transformLucideImports from 'vite-plugin-transform-lucide-imports'
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import { sveltekit } from '@sveltejs/kit/vite'
+
+export default defineConfig({
+  plugins: [tailwindcss(), sveltekit(), transformLucideImports()],
+})