@cat-factory/app 0.302.2 → 0.303.1

package/README.md

@@ -15,6 +15,7 @@ The SPA source lives under `app/` (the Nuxt srcDir).
 - [What it is](#what-it-is)
 - [Tech stack](#tech-stack)
 - [Layout](#layout)
+- [Nuxt UI: agent tooling and overrides](#nuxt-ui-agent-tooling-and-where-the-spa-overrides-the-skill)
 - [Task swimlanes](#task-swimlanes)
 - [Roles (engineer / product manager / designer)](#roles-engineer--product-manager--designer)
 - [Interface modes (basic / advanced)](#interface-modes-basic--advanced)
@@ -41,7 +42,8 @@ over the WebSocket. How that sync works is written up in
 
 ## Tech stack
 
-- **Nuxt 4 / Vue 3** SPA: single route (`pages/index.vue`).
+- **Nuxt 4 / Vue 3** SPA: the board is `pages/index.vue`, beside three standalone routes
+  (`mcp-authorize.vue`, `mcp-oauth-callback.vue`, `reset-password.vue`).
 - **Pinia** (+ `pinia-plugin-persistedstate`): feature stores.
 - **Vue Flow** (`core`, `background`, `controls`, `node-resizer`): the canvas.
 - **Nuxt UI** + Tailwind: components and styling.
@@ -50,15 +52,15 @@ over the WebSocket. How that sync works is written up in
 
 ## Layout
 
-| Path              | Contents                                                                                                                                              |
-| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `app.vue`         | Root; wraps the page in `AuthGate`.                                                                                                                   |
-| `pages/index.vue` | The only route: mounts the sidebar, canvas, toolbar, inspector, focus view, and all modals.                                                           |
-| `components/`     | UI grouped by area (see [Key UI surfaces](#key-ui-surfaces)).                                                                                         |
-| `composables/`    | `useApi` (typed client), `useWorkspaceStream` (WebSocket sync), `useBlockDrag`, `useBlockQueries`, `useBoardFlow`, `useSemanticZoom`, `useDepLabels`. |
-| `stores/`         | Pinia stores, one per feature domain.                                                                                                                 |
-| `types/`          | TypeScript domain unions (`domain.ts`) and wire types mirroring the contracts.                                                                        |
-| `utils/`          | Small pure helpers.                                                                                                                                   |
+| Path           | Contents                                                                                                                                                                     |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `app.vue`      | Root; wraps the page in `AuthGate`.                                                                                                                                          |
+| `pages/`       | The board (`index.vue`: sidebar, canvas, toolbar, inspector, focus view, all modals), plus the standalone `mcp-authorize`, `mcp-oauth-callback` and `reset-password` routes. |
+| `components/`  | UI grouped by area (see [Key UI surfaces](#key-ui-surfaces)).                                                                                                                |
+| `composables/` | `useApi` (typed client), `useWorkspaceStream` (WebSocket sync), `useBlockDrag`, `useBlockQueries`, `useBoardFlow`, `useSemanticZoom`, `useDepLabels`.                        |
+| `stores/`      | Pinia stores, one per feature domain.                                                                                                                                        |
+| `types/`       | TypeScript domain unions (`domain.ts`) and wire types mirroring the contracts.                                                                                               |
+| `utils/`       | Small pure helpers.                                                                                                                                                          |
 
 ### The board's top overlay region has ONE owner
 
@@ -288,6 +290,80 @@ it has nothing to do at mount, and running it there would announce a close that
 
 A status → chip map feeding a `<UBadge :color="…">` types its values as `BadgeColor` (`utils/badge.ts`), which is derived from `UBadge`'s own prop type rather than restated as a literal union. Typed `string`, the binding does not compile and the reflex is `as any` at each call site: seven of them had accumulated. That cast also accepts a colour Nuxt UI does not define, which renders as an unstyled badge with nothing failing.
 
+### Colour through theme tokens, never a fixed palette shade
+
+Every colour in the SPA is a token that follows the THEME and the colour MODE. Three kinds exist:
+
+- **Nuxt UI role tokens** for greys (`bg-default`, `bg-elevated`, `bg-accented`, `text-default`, `text-toned`, `text-muted`, `text-dimmed`, `text-highlighted`, `border-default`, `border-muted`) and the **bare aliases** for an accent at Nuxt UI's own shade (`text-primary`, `bg-warning/10`, `ring-error/25`).
+- **The app's mirrored numbered tokens** (`app/assets/css/tokens.css`) for a STATUS surface painted in a specific ramp shade: `bg-app-950` / `text-app-100` / `text-app-600` / `bg-app-500` / `ring-app-400` for the five grey shades with no role token, `bg-app-canvas` for the board canvas (the one surface below the page background; in light the page surface `app-950` sits at neutral-100 rather than the mirror's 50 and the canvas at 200, so the ~350 translucent `bg-default/NN` panels keep an edge), and `text-app-warning-300` / `bg-app-error-950/40` / `border-app-success-800` for the five status ramps (`secondary`, `success`, `info`, `warning`, `error`). Each token's dark value is the exact ramp shade and its light value is the MIRRORED shade (`50↔950`, `100↔900`, `200↔800`, `300↔700`, `400↔600`, `500` its own midpoint), so a `300` text on a `950/40` fill reads on both surfaces from one class list. Every value is a reference into the `--ui-color-<alias>-<n>` ramps, so a theme that remaps `warning` recolours every warning surface. `primary` has NO numbered token: brand accents use the bare alias, which is what the editor's primary slider and `blackAsPrimary` address.
+- **Category hues** (`text-app-hue-pink`, `var(--app-hue-teal)` in an inline style) for an IDENTITY colour: an agent kind, a task type, a pipeline step kind (`utils/catalog.ts`). One token per Tailwind hue, `400` in dark and `600` in light (Nuxt UI's own alias convention), referencing Tailwind's ramps because a category is not a status. A STATUS (task status, step state, test verdict, finding severity) is not a category and takes the alias directly (`var(--ui-warning)`, `var(--ui-success)`, `var(--ui-text-muted)` for planned / done / skipped), so the halo, the badge and the dot recolour together. A translucent tile behind a category glyph goes through `tint()` (`utils/colorTint.ts`), which also accepts the hex a deployment-registered kind may send. A theme recolours a hue through its `tokens` block.
+- **Never** a raw Tailwind hue (`bg-slate-900`, `text-amber-300`, `text-pink-300`) nor a fixed numbered alias (`text-primary-400`, `bg-warning-950/40`): the first is welded to one palette and one mode, the second follows the palette but not the mode. `scripts/check-frontend-palette.mjs` (CI) bans both. `red` and `rose` both mean `error`.
+- **Never** a fixed `white` / `black` utility (`bg-white`, `text-black`, `border-white/5`, `bg-white/[0.02]`): invisible or wrong in light mode. Use `border-inverted` (a selection ring), `border-default` / `bg-muted` (faint chrome) or `text-inverted` (text over a filled surface). A line that genuinely needs a fixed value says why with a `fixed-colour-ok:` comment, on that line or the one above it.
+
+### Themes and colour mode
+
+A **theme** is a Nuxt UI theme editor document (https://ui.nuxt.com/theme): the sparse `ThemeDoc` the editor edits and shares as a `?doc=` link, decoded by `utils/theme/link.ts` and typed in `utils/theme/doc.ts` (a port of the editor engine's tables). The app speaks THAT format rather than one of its own, so a theme built in the editor imports as-is and a built-in theme is a document a user could have exported. `utils/theme/builtins.ts` ships `Cat Factory` (the default; its `colors` MUST equal `app.config.ts`'s `ui.colors`, which paints the first frame) and the editor's own `Mono` preset, referenced from the preset table rather than copied. The `theme` store persists the pick and the user's imported documents in this browser; `plugins/theme.client.ts` applies the active document at runtime: aliases onto `appConfig.ui.colors` (Nuxt UI's own colours plugin re-emits the ramps), default variants and component overrides onto `appConfig.ui.<component>` merged INTO the layer's own overrides, and tokens / radius / fonts onto one `<style id="app-theme">` whose selectors anchor on the `data-theme` attribute on `<html>` (`utils/theme/css.ts`, which is also the write boundary for untrusted values). The faces the built-in themes name (Geist, Geist Mono) are self-hosted through `@nuxt/fonts` (`fonts.families` in `nuxt.config.ts`, pinned by `builtins.spec.ts`); a font an IMPORTED theme names is applied as a family name only, so it renders when the device or the deployment provides it. A editor link whose document equals one of the editor's presets collapses to `{ preset: 'mono' }`; `utils/theme/presets.ts` is a copy of the editor's preset table so such a link rebuilds (a decode table, not menu entries).
+
+**Colour mode** (system / light / dark) is `@nuxtjs/color-mode`'s, registered by Nuxt UI, with its own persistence; `nuxt.config.ts` follows the system preference and falls back to dark. `AppearanceSwitcher` at the sidebar bottom is the one control for both axes. The pre-JS loading shell (`spa-loading-template.html`) cannot resolve a token (no stylesheet is loaded yet), so the plugin caches the computed colours of the four tokens the shell paints with, per colour mode, in `localStorage` (`utils/theme/bootPalette.ts`), and a two-line inline script in the shell applies the entry for the mode the `<head>` colour-mode script has already put on `<html>`. The hardcoded defaults are the default theme's, used only until a theme has been seen in that mode.
+
+## Nuxt UI: agent tooling and where the SPA overrides the skill
+
+The SPA runs on Nuxt UI 4. Two first-party sources carry the rules this repo does not restate:
+
+- **The vendored [`nuxt-ui` skill](https://github.com/kibertoad/cat-factory/tree/main/.claude/skills/nuxt-ui)** teaches WHEN to reach for which
+  component (Modal vs Slideover vs Drawer, Tabs vs NavigationMenu, Toast vs Alert) and HOW to build
+  well (the variant-weight table, one solid primary per view, semantic utility roles). It is
+  vendored under `.claude/skills/nuxt-ui/`, beside the project's own skills, so the rules version
+  with the code and every contributor on Claude Code reads the same text. This is the Claude Code
+  surface: `.claude/skills/` auto-loads for a local Claude Code session, and the repo `.mcp.json` is
+  offered once for approval on the first session in the repo (re-offered when the file changes); a
+  decline is remembered, and `claude mcp reset-project-choices` un-sticks it. Another tool that reads
+  `AGENTS.md` (Codex, for one) gets the pointers below but not an auto-loaded skill or an auto-wired
+  server. Making the platform's OWN coder agents (Claude Code, Codex, Pi in
+  the runner image) apply the skill is a separate, backend change: they stage skills and tool
+  servers per run through the agent-capabilities system (ADR 0024 /
+  [`custom-agents.md`](https://github.com/kibertoad/cat-factory/blob/main/backend/docs/custom-agents.md)), not from these repo files. The `@nuxt/ui` npm
+  package does not ship the skill, so it cannot move with `pnpm update`: it is vendored from the
+  `v4` branch of `nuxt/ui` (which tracks the 4.x line) and pinned by convention to the Nuxt UI
+  major in [`package.json`](./package.json) (`@nuxt/ui@^4.11`). Refresh it by re-vendoring
+  `skills/nuxt-ui/` from that branch (or `npx skills add nuxt/ui`) when the major moves. The
+  vendored files are kept byte-for-byte as upstream: `.oxfmtrc.json` exempts them from the
+  formatter and `scripts/check-doc-links.mjs` skips them, so a refresh stays a clean diff even when
+  upstream ships a link this repo's own doc rules would reject.
+- **The [`nuxt-ui` MCP server](https://github.com/kibertoad/cat-factory/blob/main/.mcp.json)** (`https://ui.nuxt.com/mcp`, declared repo-level)
+  answers WHAT a component accepts: props, slots, events, theme files and examples per component.
+  The skill defers to it for every API question.
+
+The SPA's own rules win where they and the skill disagree. Each entry below links the rule it
+protects, so the two never contradict silently:
+
+- **Visible copy is an i18n key, never a literal string.** The skill's examples hard-code labels and
+  placeholders (`label="Email"`, `placeholder="you@example.com"`); here every user-facing string
+  goes through `@nuxtjs/i18n` and lands in the catalog. [Rule](#internationalization-i18n-authoring).
+- **Schema validation goes through valibot, never zod.** The skill's `forms.md` recipe opens with
+  `import * as z from 'zod'` and validates through `z.object({...})`; this package depends on
+  `valibot` (and `@toad-contracts/valibot`) and has no `zod`, so a `zod` import fails typecheck and
+  "fixing" it pulls in a dependency the repo deliberately lacks (which then has to clear the 24h
+  `minimumReleaseAge` gate). Validate with valibot, mirroring the wire contracts
+  ([`@cat-factory/contracts`](https://github.com/kibertoad/cat-factory/tree/main/backend/packages/contracts)).
+- **A backend-declared form renders through `DescriptorFields.vue`, not a hand-built `UForm`.** The
+  skill teaches the hand-rolled `UForm` + `UFormField` shape for every form; when the backend
+  declares the fields and the SPA only collects them, that shape is forbidden here.
+  [Rule](#a-backend-declared-form-renders-through-descriptorfieldsvue).
+- **Failure toasts go through the funnel, not a bare `toast.add`.** The skill uses `useToast()`
+  freely; here a failed backend call is reported with `usePipelineErrorToast().present(error, key)`.
+  [Rule](#every-failure-toast-goes-through-one-funnel).
+- **Icon-only buttons carry an accessible name.** Use `common/IconButton.vue`
+  ([source](./app/components/common/IconButton.vue)), which applies `label` as both `title` and
+  `aria-label`, rather than a bare `<UButton icon>`.
+- **Colour goes through theme tokens, never a fixed palette shade.** The skill bans raw Tailwind
+  hues; this repo also bans fixed numbered aliases, enforced by
+  [`scripts/check-frontend-palette.mjs`](https://github.com/kibertoad/cat-factory/blob/main/scripts/check-frontend-palette.mjs).
+  [Rule](#colour-through-theme-tokens-never-a-fixed-palette-shade).
+- **Confirmation dialogs use the shared `useConfirm`.** The skill shows `useOverlay()` per call
+  site; here callers `await useConfirm().confirm({...})`
+  ([source](./app/composables/useConfirm.ts)) against one app-mounted `<ConfirmDialog />`.
+
 ## Task swimlanes
 
 A service frame lays its tasks out in **status lanes**, not at coordinates. Three lanes a reader
@@ -1341,12 +1417,21 @@ wrong place is invisible until a user cannot find it:
 
 ## Develop & test
 
+This package has no `dev` or `lint` script of its own: it is a layer, consumed through `extends`,
+and linting is whole-tree from the repo root (CLAUDE.md). The `AGENTS.md` verify checklist carries
+the same list, plus the install-free frontend guards.
+
 ```bash
+# From the repo root:
 pnpm install
-pnpm dev          # Nuxt dev server (expects the Worker running; set NUXT_PUBLIC_API_BASE)
-pnpm test         # vitest
-pnpm typecheck    # nuxt typecheck
-pnpm lint         # oxlint + oxfmt --check
+pnpm dev:frontend                                    # Nuxt dev server via deploy/frontend; set NUXT_PUBLIC_API_BASE to a running Worker
+pnpm exec turbo run typecheck --filter=@cat-factory/app   # typecheck goes through Turbo
+pnpm lint                                            # oxlint + oxfmt over the whole tree
+
+# From frontend/app:
+pnpm exec vitest run <file>                          # run the spec your change touched
+pnpm i18n:check                                      # catalog is well-formed
+pnpm i18n:parity                                     # locales are in parity
 ```
 
 > Building/deploying the static site is covered in the deployment docs: see the

package/app/app.config.ts

@@ -1,25 +1,34 @@
 export default defineAppConfig({
   ui: {
+    // The default theme's alias map. It MUST equal `CAT_FACTORY_THEME.doc.colors`
+    // (`utils/theme/builtins.ts`): this is what the first paint renders from, before the theme
+    // plugin applies the active document over it (`theme.builtins.spec.ts` pins the equality).
     colors: {
       primary: 'indigo',
+      secondary: 'violet',
+      success: 'emerald',
+      info: 'sky',
+      warning: 'amber',
+      error: 'rose',
       neutral: 'slate',
     },
-    // Give every overlay the same layered dark palette the agent-run-details
-    // reader uses: a deep slate-950 surface so the slate-900 panels/cards inside
-    // pop, with slate-800 chrome. Applies to all UModal/USlideover instances so
-    // overlays stay consistent without per-instance `:ui` overrides.
+    // Give every overlay the same layered surface the agent-run-details reader uses: the deep
+    // `app-950` surface (below `bg-default`) so the `bg-default` panels/cards inside pop, with
+    // `border-default` chrome. All tokens are theme role tokens (`app-950` is the hand-defined
+    // flipping token for the deep shade), so overlays track dark/light. Applies to all
+    // UModal/USlideover instances so they stay consistent without per-instance `:ui` overrides.
     modal: {
       slots: {
-        content: 'bg-slate-950 ring-slate-800 divide-slate-800',
-        header: 'border-b border-slate-800',
-        title: 'text-white',
+        content: 'bg-app-950 ring-default divide-default',
+        header: 'border-b border-default',
+        title: 'text-highlighted',
       },
     },
     slideover: {
       slots: {
-        content: 'bg-slate-950 ring-slate-800 divide-slate-800',
-        header: 'border-b border-slate-800',
-        title: 'text-white',
+        content: 'bg-app-950 ring-default divide-default',
+        header: 'border-b border-default',
+        title: 'text-highlighted',
       },
     },
     // The toaster's scroll region is the ONE `[data-slot='viewport']` the app's own

package/app/assets/css/main.css

@@ -3,6 +3,9 @@
 /* The shared rendered-markdown reader presentation (see prose.css). */
 @import './prose.css';
 
+/* The app's own mode-adaptive colour tokens (`app-*`), layered on Nuxt UI's. */
+@import './tokens.css';
+
 /* The two toaster rules below are scoped by the `app-toaster` marker class that
  * `app.config.ts` puts on the toaster's viewport slot, NOT by `[data-slot='viewport']`.
  * That attribute is Nuxt UI's name for the scroll region of ELEVEN components
@@ -53,10 +56,6 @@
 
 /* ---- Agent Architecture Board: shared visual language ---------------------- */
 
-:root {
-  --board-bg: #0b1020;
-}
-
 html,
 body,
 #__nuxt {
@@ -68,9 +67,9 @@ body {
   overflow: hidden;
 }
 
-/* Vue Flow surface tuned to a dark "design board" look */
+/* The Vue Flow surface is the board canvas: one step below the page background in both modes. */
 .vue-flow__background {
-  background-color: var(--board-bg);
+  background-color: var(--app-bg-canvas);
 }
 
 /* Touch: let the pane own one-finger pan + pinch-zoom rather than the browser
@@ -83,14 +82,15 @@ body {
   touch-action: none;
 }
 
-/* Status-pulse used by blocked / decision-needed blocks */
+/* Status-pulse used by blocked / decision-needed blocks: the warning alias, so a theme that
+ * recolours `warning` recolours the halo. `color-mix` is how a custom property gets an alpha. */
 @keyframes board-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-warning) 55%, transparent);
   }
   50% {
-    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
+    box-shadow: 0 0 0 10px transparent;
   }
 }
 
@@ -98,14 +98,14 @@ body {
   animation: board-pulse 1.4s ease-in-out infinite;
 }
 
-/* Green pulse used when a block reaches the "PR ready" state */
+/* Success pulse used when a block reaches the "PR ready" state */
 @keyframes board-pulse-green {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-success) 60%, transparent);
   }
   50% {
-    box-shadow: 0 0 0 12px rgba(34, 197, 94, 0);
+    box-shadow: 0 0 0 12px transparent;
   }
 }
 
@@ -121,7 +121,7 @@ body {
 
 /* A selected edge: highlight it so the user knows what Delete/Backspace removes */
 .vue-flow__edge.selected .vue-flow__edge-path {
-  stroke: #f43f5e !important;
+  stroke: var(--ui-error) !important;
   stroke-width: 2.5 !important;
 }
 

package/app/assets/css/prose.css

@@ -21,8 +21,8 @@
   transition: background 0.12s ease;
 }
 .reader-prose.review-mode [data-src-start]:hover {
-  background: rgb(99 102 241 / 0.08);
-  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.5);
+  background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-primary) 50%, transparent);
 }
 .reader-prose.review-mode [data-src-start]::before {
   content: '+';
@@ -35,23 +35,23 @@
   align-items: center;
   justify-content: center;
   border-radius: 0.25rem;
-  background: rgb(99 102 241);
-  color: white;
+  background: var(--ui-primary);
+  color: var(--ui-text-inverted);
   font-size: 0.8rem;
   line-height: 1;
 }
 .reader-prose.review-mode [data-src-start]:hover::before {
   display: flex;
 }
-/* Persistent markers: amber for a block that already has a comment, indigo for
-   the block whose composer is currently open. */
+/* Persistent markers: the warning alias for a block that already has a comment, the primary
+   alias for the block whose composer is currently open. */
 .reader-prose .cf-commented {
-  background: rgb(234 179 8 / 0.1);
-  box-shadow: inset 2px 0 0 rgb(234 179 8 / 0.6);
+  background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-warning) 60%, transparent);
 }
 .reader-prose .cf-selected {
-  background: rgb(99 102 241 / 0.12);
-  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.8);
+  background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-primary) 80%, transparent);
 }
 
 /* Styling for the markdown HTML injected via v-html (out of scoped reach without
@@ -75,36 +75,36 @@
 }
 .reader-prose strong {
   font-weight: 600;
-  color: rgb(226 232 240);
+  color: var(--ui-text-highlighted);
 }
 .reader-prose em {
   font-style: italic;
 }
 .reader-prose code {
   border-radius: 0.25rem;
-  background: rgb(30 41 59 / 0.8);
+  background: var(--ui-bg-elevated);
   padding: 0.1rem 0.3rem;
-  font-family: ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 0.85em;
-  color: rgb(199 210 254);
+  color: var(--ui-primary);
 }
 .reader-prose pre {
   margin: 0.6rem 0;
   overflow: auto;
   border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
+  background: var(--app-bg-canvas);
   padding: 0.75rem 0.9rem;
 }
 .reader-prose pre code {
   background: transparent;
   padding: 0;
-  color: rgb(203 213 225);
+  color: var(--ui-text-toned);
 }
 .reader-prose blockquote {
   margin: 0.6rem 0;
-  border-left: 3px solid rgb(99 102 241 / 0.5);
+  border-left: 3px solid color-mix(in srgb, var(--ui-primary) 50%, transparent);
   padding-left: 0.75rem;
-  color: rgb(148 163 184);
+  color: var(--ui-text-muted);
 }
 .reader-prose table {
   margin: 0.6rem 0;
@@ -113,17 +113,17 @@
 }
 .reader-prose th,
 .reader-prose td {
-  border: 1px solid rgb(51 65 85);
+  border: 1px solid var(--ui-border-muted);
   padding: 0.3rem 0.6rem;
 }
 .reader-prose th {
-  background: rgb(30 41 59 / 0.6);
+  background: var(--ui-bg-elevated);
   font-weight: 600;
 }
 .reader-prose hr {
   margin: 1rem 0;
   border: none;
-  border-top: 1px solid rgb(51 65 85);
+  border-top: 1px solid var(--ui-border-muted);
 }
 .reader-prose h1,
 .reader-prose h2,
@@ -131,5 +131,5 @@
 .reader-prose h4 {
   margin: 0.6rem 0 0.3rem;
   font-weight: 600;
-  color: rgb(226 232 240);
+  color: var(--ui-text-highlighted);
 }