@salsita-ai/sdk 0.50.0-develop.abef6d86a1 → 0.50.0-develop.ae52227c7e

package/dist/docs/phoenix/configurator-interface.mdx

@@ -25,8 +25,9 @@ The configurator interface is generated in `.phoenix/configurator-interface.ts`:
 
 ```typescript
 // .phoenix/configurator-interface.ts (AUTO-GENERATED - DO NOT EDIT)
-import {'{'} createConfiguratorInterface {'}'} from '@salsita-ai/sdk/configurator'
-import {'{'} configuratorBuilder {'}'} from './domain.js'
+import { createConfiguratorInterface } from '@salsita-ai/sdk/configurator'
+
+import { configuratorBuilder } from './domain.js'
 
 export const configuratorInterface = createConfiguratorInterface(configuratorBuilder)
 
@@ -64,9 +65,9 @@ type CustomMaterial = Phx['AdminModel']['CustomMaterial']
 Access the configurator interface via `phx.frontend`:
 
 ```typescript
-export const CustomComponent = () => {'{'}
+export const CustomComponent = () => {
   // Access domain systems
-  const {'{'} navigationSystem, storeSystem {'}'} = phx.frontend.useDomain()
+  const { navigationSystem, storeSystem } = phx.frontend.useDomain()
 
   // Entity state hooks
   const rootEntity = phx.frontend.useRootEntityState()
@@ -76,11 +77,11 @@ export const CustomComponent = () => {'{'}
   const selectEntity = phx.frontend.useSelectEntity()
 
   // Type-safe entity access
-  if (selectedEntity && Cabinet.is(selectedEntity)) {'{'}
+  if (selectedEntity && Cabinet.is(selectedEntity)) {
     // selectedEntity is now typed as $Cabinet
     console.log(selectedEntity.width, selectedEntity.$area)
-  {'}'}
-{'}'}
+  }
+}
 ```
 
 ## Core Hooks
@@ -90,16 +91,16 @@ The configurator interface provides 100+ hooks organized by category. Use TypeSc
 ### Domain & Application Context
 
 ```typescript
-const ExampleComponent = () => {'{'}
+const ExampleComponent = () => {
   // Core domain systems
-  const {'{'} navigationSystem, storeSystem, entitySystem {'}'} = phx.frontend.useDomain()
+  const { navigationSystem, storeSystem, entitySystem } = phx.frontend.useDomain()
 
   // Domain application context
-  const {'{'} configurationPersistSystem {'}'} = phx.frontend.useDomainApplication()
+  const { configurationPersistSystem } = phx.frontend.useDomainApplication()
 
   // Full configurator context
-  const {'{'} imageRenderingSystem {'}'} = phx.frontend.useConfigurator()
-{'}'}
+  const { imageRenderingSystem } = phx.frontend.useConfigurator()
+}
 ```
 
 ### State Subscriptions
@@ -209,7 +210,7 @@ const validity = phx.frontend.useStateValidity()
 const controlViolations = phx.frontend.useControlViolations(entityId, controlId)
 
 // Finalize violations
-const {'{'} disabled, hints {'}'} = phx.frontend.useFinalizeViolations()
+const { disabled, hints } = phx.frontend.useFinalizeViolations()
 
 // Map violations to hints
 const mapViolationHints = phx.frontend.useMapViolationHints()
@@ -284,89 +285,89 @@ The interface provides factory functions for creating handlers and providers:
 
 ```typescript
 // Runs early in app startup, before session auth
-const OnApplicationStart = phx.frontend.createOnApplicationStartProvider(({'{'} children {'}'}) => {'{'}
-  return <YourProvider>{'{'}children{'}'}</YourProvider>
-{'}'})
+const OnApplicationStart = phx.frontend.createOnApplicationStartProvider(({ children }) => {
+  return <YourProvider>{children}</YourProvider>
+})
 
 // Runs after session auth, before domain data loading
-const OnSessionReady = phx.frontend.createOnSessionReadyProvider(({'{'} children {'}'}) => {'{'}
-  return <YourProvider>{'{'}children{'}'}</YourProvider>
-{'}'})
+const OnSessionReady = phx.frontend.createOnSessionReadyProvider(({ children }) => {
+  return <YourProvider>{children}</YourProvider>
+})
 
 // Runs after published data is parsed, before frontend/backend loading
-const OnPublishedDataReady = phx.frontend.createOnPublishedDataReadyProvider(({'{'} children {'}'}) => {'{'}
-  return <YourProvider>{'{'}children{'}'}</YourProvider>
-{'}'})
+const OnPublishedDataReady = phx.frontend.createOnPublishedDataReadyProvider(({ children }) => {
+  return <YourProvider>{children}</YourProvider>
+})
 
 // Runs after frontend collection and parsing, before backend loading
-const OnFrontendDataReady = phx.frontend.createOnFrontendDataReadyProvider(({'{'} children {'}'}) => {'{'}
-  return <YourProvider>{'{'}children{'}'}</YourProvider>
-{'}'})
+const OnFrontendDataReady = phx.frontend.createOnFrontendDataReadyProvider(({ children }) => {
+  return <YourProvider>{children}</YourProvider>
+})
 
 // Runs after backend loading, before preset selection and configurator initialization
-const OnBackendDataReady = phx.frontend.createOnBackendDataReadyProvider(({'{'} children {'}'}) => {'{'}
-  return <YourProvider>{'{'}children{'}'}</YourProvider>
-{'}'})
+const OnBackendDataReady = phx.frontend.createOnBackendDataReadyProvider(({ children }) => {
+  return <YourProvider>{children}</YourProvider>
+})
 
 // Runs after routing and preset selection are ready
-const OnRoutingReady = phx.frontend.createOnRoutingReadyProvider(({'{'} children {'}'}) => {'{'}
-  return <YourProvider>{'{'}children{'}'}</YourProvider>
-{'}'})
+const OnRoutingReady = phx.frontend.createOnRoutingReadyProvider(({ children }) => {
+  return <YourProvider>{children}</YourProvider>
+})
 
 // Wraps OwnerUi and ReadUi pages
-const OnConfiguratorReady = phx.frontend.createOnConfiguratorReadyProvider(({'{'} children {'}'}) => {'{'}
-  return <YourProvider>{'{'}children{'}'}</YourProvider>
-{'}'})
+const OnConfiguratorReady = phx.frontend.createOnConfiguratorReadyProvider(({ children }) => {
+  return <YourProvider>{children}</YourProvider>
+})
 ```
 
 ### Data Handlers
 
 ```typescript
 // Collect frontend data during initialization
-const collectFrontendData = phx.frontend.createCollectFrontendDataHandler(async (context) => {'{'}
-  return {'{'} customData: await fetchCustomData() {'}'}
-{'}'})
+const collectFrontendData = phx.frontend.createCollectFrontendDataHandler(async context => {
+  return { customData: await fetchCustomData() }
+})
 
 // Override which published chunks are fetched by the frontend.
 // See Publishing page for full documentation.
-const filterPublishedChunks = phx.frontend.createFilterPublishedChunksHandler(() => {'{'}
+const filterPublishedChunks = phx.frontend.createFilterPublishedChunksHandler(() => {
   const session = phx.frontend.useSession()
 
-  return useMemo(() => {'{'}
+  return useMemo(() => {
     if (session.sessionPayload?.role === 'admin') return ['styling', 'catalog-na']
     return ['styling']
-  {'}'}, [session.sessionPayload?.role])
-{'}'})
+  }, [session.sessionPayload?.role])
+})
 
 // Runs after preset data is loaded
-const onPresetLoaded = phx.frontend.createOnPresetLoadedHandler((entities, presetData) => {'{'}
+const onPresetLoaded = phx.frontend.createOnPresetLoadedHandler((entities, presetData) => {
   // Can modify preset entities before rendering
   return entities
-{'}'})
+})
 
 // Intercept navigation to index/presets page
-const onGoToIndex = phx.frontend.createOnGoToIndexHandler(() => {'{'}
+const onGoToIndex = phx.frontend.createOnGoToIndexHandler(() => {
   // Custom logic before navigating
-{'}'})
+})
 ```
 
 ### UI Components
 
 ```typescript
 // Custom Phoenix layout element
-const MyLayoutElement = phx.frontend.createCustomPhoenixLayoutElement(() => {'{'}
+const MyLayoutElement = phx.frontend.createCustomPhoenixLayoutElement('MyLayoutElement', () => {
   return <div>Custom Layout</div>
-{'}'})
+})
 
 // Custom Phoenix entity element
-const MyEntityElement = phx.frontend.createCustomPhoenixEntityElement(() => {'{'}
+const MyEntityElement = phx.frontend.createCustomPhoenixEntityElement('MyEntityElement', () => {
   return <mesh>...</mesh>
-{'}'})
+})
 
 // Custom page when auth fails
-const NotAuthenticatedPage = phx.frontend.createNotAuthenticatedPage(() => {'{'}
+const NotAuthenticatedPage = phx.frontend.createNotAuthenticatedPage(() => {
   return <div>Please log in</div>
-{'}'})
+})
 ```
 
 ### Preset UI
@@ -383,21 +384,55 @@ const PresetAction = phx.frontend.createPresetPageAction(PresetHelpAction)
 const PresetOverlay = phx.frontend.createPresetDeviceNotSupported(SmallScreenNotice)
 ```
 
+### Loaded Configuration UI
+
+A layout element registered under the name `ConfiguratorLayout` replaces the whole UI of a loaded configuration, in owner and in read mode, whatever `layout` the spec sets. Without it, Phoenix renders the layout the spec selects.
+
+```typescript
+// src/elements/ConfiguratorLayout.tsx
+import { LayoutSlots, useSceneSafeArea } from '@salsita-ai/sdk/configurator'
+
+const SIDEBAR_WIDTH = 320
+
+export default phx.frontend.createCustomPhoenixLayoutElement('ConfiguratorLayout', () => {
+  const { containerRef, safeAreaRef } = useSceneSafeArea()
+
+  return (
+    <div ref={containerRef} style={{ position: 'absolute', inset: 0 }}>
+      <LayoutSlots.Services />
+      <LayoutSlots.SharedCanvas />
+      <aside style={{ position: 'absolute', insetBlock: 0, insetInlineStart: 0, inlineSize: SIDEBAR_WIDTH }}>
+        Project sidebar
+      </aside>
+      <div
+        ref={safeAreaRef}
+        style={{ position: 'absolute', insetBlock: 0, insetInlineStart: SIDEBAR_WIDTH, insetInlineEnd: 0, pointerEvents: 'none' }}
+      />
+    </div>
+  )
+})
+```
+
+- `LayoutSlots.SharedCanvas` renders the scene. It is absolutely positioned and fills its nearest positioned ancestor, so the layout's root is positioned and covers the page. The layout positions its own UI above the canvas and after it in the markup, as the `aside` does; unpositioned content is painted under the canvas.
+- `useSceneSafeArea()`, called without arguments, tells the camera which part of the canvas the UI leaves free. Attach `containerRef` to the element that covers the whole canvas and `safeAreaRef` to the region the scene should stay visible in: the hook measures the gap between the two and the camera frames the scene inside the safe area. Without it the scene is framed in the whole canvas. The safe-area element lies over the canvas, so it sets `pointerEvents: 'none'` to leave orbiting and clicking to the scene. A `canvasPadding` component in the spec scales the measured gaps, see [Canvas Padding](?path=/docs/layouts-canvas-padding--docs).
+- The layout has to mount `LayoutSlots.SharedCanvas`, or the project sets `appLoader: legacy`. Otherwise the app loader stays on screen.
+- The layout composes the rest from what `@salsita-ai/sdk/configurator` exports: `LayoutSlots.Services` and the other members of `LayoutSlots`.
+- Nothing of the built-in layouts is rendered for it. The finalize page is `Legacy.CommonFinalizePage`, the dialog is `LayoutDialog`, and the preview start screen is `DesktopPreview` or `MobilePreview`, which the layout shows while `usePreview().isPreview` is set. Both previews frame the scene themselves, so the layout renders the component that calls `useSceneSafeArea()` only while `isPreview` is not set; it then measures when it mounts after the preview. The assistant panel is not available to a project layout.
+- Any project layout element named `ConfiguratorLayout` takes over the page.
+
 ## TransformerBuilder
 
 Use `transformerBuilder` to create entity transformers:
 
 ```typescript
 // Create a transformer that runs when specific conditions are met
-const cabinetTransformer = phx.frontend.transformerBuilder
-  .when(Cabinet.is)
-  .do((cabinet, context) => {'{'}
-    // Transform cabinet data
-    return {'{'}
-      ...cabinet,
-      $computedField: calculateSomething(cabinet)
-    {'}'}
-  {'}'})
+const cabinetTransformer = phx.frontend.transformerBuilder.when(Cabinet.is).do((cabinet, context) => {
+  // Transform cabinet data
+  return {
+    ...cabinet,
+    $computedField: calculateSomething(cabinet),
+  }
+})
 ```
 
 **Note**: The deprecated `createTransformer` function should not be used for new implementations.
@@ -407,19 +442,19 @@ const cabinetTransformer = phx.frontend.transformerBuilder
 The `updates` factory creates type-safe entity updates:
 
 ```typescript
-const {'{'} storeSystem {'}'} = phx.frontend.useDomain()
+const { storeSystem } = phx.frontend.useDomain()
 
 // Create new entity
-const createUpdates = phx.frontend.updates.create({'{'}
+const createUpdates = phx.frontend.updates.create({
   type: 'Cabinet',
   width: 800,
   height: 2000,
-{'}'})
+})
 
 // Modify existing entity
-const modifyUpdates = phx.frontend.updates.modify(cabinetId, {'{'}
+const modifyUpdates = phx.frontend.updates.modify(cabinetId, {
   width: 1000,
-{'}'})
+})
 
 // Delete entity
 const deleteUpdates = phx.frontend.updates.delete(cabinetId)

package/dist/docs/phoenix/phoenix-cli.mdx

@@ -29,10 +29,11 @@ pnpm phoenix dev
 
 1. Refuses to run when a `spec/` folder already exists, so it never touches an existing project.
 2. Writes a `package.json` that depends on the CLI's SDK version when the folder has none. An existing `package.json` is kept, as long as it depends on the SDK.
-3. Writes a starter spec (`spec/application.yaml`, `spec/configurator.yaml`) with one resizable, recolorable box, and switches `package.json` to the application-spec pipeline.
-4. Writes `pnpm-workspace.yaml` with the pnpm settings the first install needs: the build scripts of the SDK's dependencies are allowed or denied, and `@salsita-ai/*` packages are exempt from pnpm's minimum release age. A project inside a pnpm monorepo gets no file; the workspace root holds these settings.
+3. Adds the `dev`, `build`, `deploy`, `check` and `fix` scripts to `package.json` (see [Project Scripts](#project-scripts)). A script the project already has under one of those names keeps its command.
+4. Writes a starter spec (`spec/application.yaml`, `spec/configurator.yaml`) with one resizable, recolorable box, and switches `package.json` to the application-spec pipeline.
+5. Writes `pnpm-workspace.yaml` with the pnpm settings the first install needs: the build scripts of the SDK's dependencies are allowed or denied, and `@salsita-ai/*` packages are exempt from pnpm's minimum release age. A project inside a pnpm monorepo gets no file; the workspace root holds these settings.
 
-It asks nothing, writes no `.env` and contacts no server. `phoenix sync` then generates every other project file, including the agent skills described in [Project Structure](?path=/docs/phoenix-project-structure--docs).
+It asks nothing, writes no `.env` and contacts no server. `phoenix sync` then generates every other project file, including the agent skills described in [Project Structure](?path=/docs/phoenix-project-structure--docs). The `.gitignore` is among them only when the folder is inside a git repository, so run `git init` before the first sync, or sync again after it.
 
 ### Which project `phoenix dev` develops in
 
@@ -114,8 +115,6 @@ For quick local development without a server, use:
 
 ```bash
 phoenix dev --persistence local-storage
-# or use the shortcut script:
-pnpm dev:local
 ```
 
 **Important:** The server must be running before `deployment:prepare-local` when using `server` persistence mode.
@@ -158,27 +157,19 @@ spec/application.yaml → Server prepares environment → CLI writes .env.genera
 
 ### Project Scripts
 
-When you run `phoenix sync` or `phoenix clean`, the CLI auto-generates standardized scripts in your `package.json`. These scripts are enforced — they cannot be overridden by custom scripts with the same name.
-
-| Script                     | Command                                                 | Purpose                                       |
-| -------------------------- | ------------------------------------------------------- | --------------------------------------------- |
-| `dev`                      | `phoenix dev`                                           | Dev server with hot reload                    |
-| `dev:local`                | `phoenix dev --persistence local-storage`               | Dev without server dependency                 |
-| `build`                    | `phoenix build`                                         | Production build                              |
-| `clean`                    | `phoenix clean`                                         | Clean all artifacts and rebuild               |
-| `sync`                     | `phoenix sync`                                          | Sync generated code and dependencies          |
-| `check`                    | `phoenix check`                                         | Run all checks (TypeScript, ESLint, Prettier) |
-| `ts:check`                 | `phoenix check`                                         | Alias for `check`                             |
-| `fix`                      | `phoenix fix`                                           | Auto-fix lint and formatting issues           |
-| `lint:fix`                 | `eslint src --fix`                                      | ESLint fix only                               |
-| `prettify:fix`             | `prettier --write .`                                    | Prettier fix only                             |
-| `verify:fix`               | `phoenix build && phoenix fix && phoenix check --types` | Build, fix, then type-check                   |
-| `test`                     | `vitest --passWithNoTests run`                          | Run tests                                     |
-| `test:watch`               | `vitest`                                                | Tests in watch mode                           |
-| `prepare:ci`               | `phoenix prepare:ci`                                    | CI environment setup                          |
-| `deployment:prepare-local` | `phoenix deployment:prepare-local`                      | Prepare local environment                     |
-
-Custom scripts you add to `package.json` are preserved during sync. Deprecated scripts (like `environment:create`, `deployment:register`) are automatically removed.
+`phoenix init` writes five scripts into `package.json`, each a shortcut for the CLI command of the same name:
+
+| Script   | Command          | Purpose                                       |
+| -------- | ---------------- | --------------------------------------------- |
+| `dev`    | `phoenix dev`    | Dev server with hot reload                    |
+| `build`  | `phoenix build`  | Production build                              |
+| `deploy` | `phoenix deploy` | Build and publish the project                 |
+| `check`  | `phoenix check`  | Run all checks (TypeScript, ESLint, Prettier) |
+| `fix`    | `phoenix fix`    | Auto-fix lint and formatting issues           |
+
+The scripts are yours: change, rename or delete them, and add your own. `phoenix sync` and `phoenix clean` leave the `scripts` section of `package.json` as it is, so they add no script, restore none you removed and remove none. Every CLI command also runs without a script, as `pnpm phoenix <command>`.
+
+A project may have other scripts than these five, such as `sync`, `test` or `verify:fix`; they are its own and stay as they are. All of this holds for a project on the application-spec pipeline, which `phoenix init` selects. In a project on the legacy pipeline (see [Current and legacy project tooling](#current-and-legacy-project-tooling)), `phoenix sync` and `phoenix clean` write their own set of scripts into `package.json` on every run, over scripts of the same name.
 
 ### Server-Generated Variables
 
@@ -399,6 +390,8 @@ Removes all build artifacts (`.phoenix/`, `node_modules/`), reinstalls dependenc
 
 Syncs project dependencies and regenerates all project files without building Vite bundles or webhooks. Faster than `clean` — use this for routine updates after changing spec files or upgrading dependencies. Before installing, it adds the pnpm settings `phoenix init` writes to a standalone project's `pnpm-workspace.yaml` when they are missing; values you set there are kept.
 
+With the application-spec pipeline (see [Current and legacy project tooling](#current-and-legacy-project-tooling)), `.gitignore` is written only when the project is inside a git repository: the project folder or one of its parent folders holds a `.git` entry. Outside a repository, sync neither creates the file nor changes one that is already there, and the same holds for `dev`, `build` and `clean`. Run `git init` before the first sync, or sync again after it, to get the file. The legacy pipeline writes `.gitignore` in every project.
+
 | Flag             | Env Variable    | Default | Description                    |
 | ---------------- | --------------- | ------- | ------------------------------ |
 | `--force` / `-f` | `FORCE_REBUILD` | `false` | Force full rebuild, skip cache |

package/dist/docs/phoenix/project-structure.mdx

@@ -178,14 +178,14 @@ type CustomMaterial = Phx['AdminModel']['CustomMaterial']
 
 | File                                                   | Auto-Generated? | Notes                                  |
 | ------------------------------------------------------ | --------------- | -------------------------------------- |
-| `package.json`                                         | Partially       | Dependencies merged, scripts preserved |
+| `package.json`                                         | Partially       | Dependencies merged, scripts untouched |
 | `tsconfig.json`                                        | Yes             | Managed by Phoenix                     |
 | `eslint.config.js`                                     | Yes             | Managed by Phoenix                     |
 | `prettier.config.js`                                   | Yes             | Managed by Phoenix                     |
 | `.prettierignore`                                      | Yes             | Managed by Phoenix                     |
 | `.linguirc`                                            | Yes             | Managed by Phoenix                     |
 | `.nvmrc`                                               | Yes             | Managed by Phoenix                     |
-| `.gitignore`                                           | Partially       | User entries between markers preserved |
+| `.gitignore`                                           | Partially       | Only in a git repository; see Markers  |
 | `.env`                                                 | No              | Git-ignored, local config              |
 | `.env.example`                                         | No              | Template for env vars                  |
 | `.env.generated`                                       | Yes             | Auto-generated IDs, git-ignored        |
@@ -212,17 +212,19 @@ Projects created by earlier SDK versions had this guidance in `CLAUDE.md`, `.cur
 
 ### Markers for Partial Auto-Generation
 
-`.gitignore` preserves custom entries between markers:
+`.gitignore` holds the Phoenix entries between two marker lines. Sync rewrites that block and keeps everything outside it:
 
 ```gitignore
-# phoenix-start
+# ===== BEGIN PHOENIX AUTO-GENERATED =====
 # ... Phoenix-managed ignores ...
-# phoenix-end
+# ===== END PHOENIX AUTO-GENERATED =====
 
-# Your custom ignores below (preserved)
+# Your custom ignores (preserved)
 my-custom-folder/
 ```
 
+With the application-spec pipeline (see [Current and legacy project tooling](?path=/docs/phoenix-phoenix-cli--docs#current-and-legacy-project-tooling)), sync writes `.gitignore` only when the project is inside a git repository: the project folder or one of its parent folders holds a `.git` entry. Outside a repository it neither creates the file nor changes one that is already there. Run `git init` before the first sync, or sync again after it, to get the file. The legacy pipeline writes the file in every project.
+
 ### Safe to Edit
 
 - `src/` (except compiled `src/locales/**/*.ts` files)

package/dist/docs/phoenix/quickstart.mdx

@@ -104,10 +104,10 @@ pnpm install
 pnpm phoenix sync
 ```
 
-`phoenix sync` keeps `spec/` and `src/` as your authored inputs and generates the application shell, scripts, types, and `.phoenix/` implementation. Start the generated development script without a server:
+`phoenix sync` keeps `spec/` and `src/` as your authored inputs and generates the application shell, types, and `.phoenix/` implementation. Start development without a server:
 
 ```sh
-pnpm dev:local
+pnpm phoenix dev --persistence local-storage
 ```
 
 Open the URL printed by the command. The application shell loads with the default `<salsita-configurator>` element and an empty 3D scene.

package/dist/docs/phoenix/sdk-builder-workflow.mdx

@@ -22,7 +22,7 @@ pnpm install
 pnpm phoenix sync
 ```
 
-`phoenix init [folder]` writes the starter project: `package.json`, `pnpm-workspace.yaml` and the starter spec, `spec/application.yaml` and `spec/configurator.yaml`, which describe one box you can resize and recolour. The starter depends on the same SDK version as the CLI that created it. `phoenix sync` then adds the rest of the project: package scripts, webhooks and lint config.
+`phoenix init [folder]` writes the starter project: `package.json`, `pnpm-workspace.yaml` and the starter spec, `spec/application.yaml` and `spec/configurator.yaml`, which describe one box you can resize and recolour. The starter depends on the same SDK version as the CLI that created it, and its `package.json` has the `dev`, `build`, `deploy`, `check` and `fix` scripts, which are yours to change. `phoenix sync` then adds the rest of the project: webhooks and lint config. It writes a `.gitignore` only when the folder is inside a git repository; run `git init` before the first sync, or sync again after it, to get the file.
 
 `init` only writes these files: it asks nothing and contacts no server. It refuses a folder that already has a `spec/` folder. A `package.json` already in the folder is kept, as long as it depends on the SDK.
 
@@ -61,7 +61,7 @@ Signed in, `phoenix dev` needs no `.env` and nothing set up in Studio. When it s
 
 Every user who signs the CLI in gets their own development environment, so a teammate (a super admin of the workspace, like you) who clones the project and signs in doesn't overwrite your schema or take over your webhooks. The development environment is separate from `production`: nothing you do in `phoenix dev` changes the live configurator.
 
-`pnpm dev:local` still runs the project without any server, with state kept in the browser.
+`pnpm phoenix dev --persistence local-storage` still runs the project without any server, with state kept in the browser.
 
 Coding agents follow the generated `phoenix` skill: before their first change they start `phoenix dev` and open the preview in your browser, and after `phoenix deploy` starts a build they open its page in Studio.
 

package/dist/docs/phoenix/webhooks.mdx

@@ -991,7 +991,7 @@ Save the same OAuth client ID, client secret, and base URL in the customer's **C
 JWT_SECRET_BASE64=<base64 of a long random key>
 ```
 
-For a deployment, run `pnpm phoenix deployment:prepare` followed by `pnpm phoenix deployment:finish`. For local development, run `pnpm deployment:prepare-local`. These current commands use the customer settings stored in Studio; the removed `environment:create` and `deployment:register` commands are not part of the setup flow.
+For a deployment, run `pnpm phoenix deployment:prepare` followed by `pnpm phoenix deployment:finish`. For local development, run `pnpm phoenix deployment:prepare-local`. These current commands use the customer settings stored in Studio; the removed `environment:create` and `deployment:register` commands are not part of the setup flow.
 
 #### Clerk organization
 

package/dist/domain/core/component/domain-component-optic.d.ts

@@ -1,10 +1,16 @@
-import type { SessionRole } from '@salsita-ai/contracts/api';
 import { type CustomExpression, type OpenExpressionContext } from '../expression/index.js';
 import type { $DomainEntity, AliasMap, DomainEntity, EntityByType, StateOfComponent, SystemComponentType, SystemComponentTypeConstraint, WritableStateOfComponent } from '../model/index.js';
 import type { DomainState } from '../state/index.js';
 import { type ComponentSystemFilter, type NavigationFilterOptic } from './legacy-filter.js';
-import type { GradualComponentSystemFilter, IdOrWithId } from './system-component-filter.js';
-import type { Viewport } from './viewport-state-component.js';
+import type { ComponentSystemFilterProps, GradualComponentSystemFilter } from './system-component-filter.js';
+/**
+ * The value a project states for one filter criterion: the value `ComponentSystemFilterProps`
+ * states for it, with an array read-only. `system-component-filter.ts` holds the same rule for the
+ * filter an optic carries; each file keeps its own copy so that the folder exports no new name.
+ */
+type FilterCriterion<KEY extends keyof ComponentSystemFilterProps> = [
+    Required<ComponentSystemFilterProps>[KEY]
+] extends [ReadonlyArray<infer ITEM>] ? readonly ITEM[] : Required<ComponentSystemFilterProps>[KEY];
 type CustomOpticRead<ENTITIES extends DomainEntity<string>, $ENTITY extends $DomainEntity<ENTITIES>, COMPONENT_STATE extends Record<string, unknown>, ALLOWED_ROOT_ENTITIES extends ENTITIES, PUBLISHED_DATA extends Record<string, unknown>, SESSION_DATA extends Record<string, unknown>, FRONTEND_DATA extends Record<string, unknown>, CONTEXT_EXTENSION> = (self: $ENTITY, state: DomainState<ENTITIES>, ctx: OpenExpressionContext<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, CONTEXT_EXTENSION>) => COMPONENT_STATE;
 type CustomOpticAttach<ENTITIES extends DomainEntity<string>, ALLOWED_ROOT_ENTITIES extends ENTITIES, PUBLISHED_DATA extends Record<string, unknown>, SESSION_DATA extends Record<string, unknown>, FRONTEND_DATA extends Record<string, unknown>, ENTITY extends ENTITIES, $ENTITY extends $DomainEntity<ENTITIES>, COMPONENT_TYPE extends SystemComponentTypeConstraint, CONTEXT_EXTENSION> = (read: CustomOpticRead<ENTITIES, $ENTITY, StateOfComponent<COMPONENT_TYPE>, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, CONTEXT_EXTENSION>, write?: DomainComponentSimpleOptic<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, ENTITY, COMPONENT_TYPE, CONTEXT_EXTENSION>['write']) => DomainComponentSimpleOptic<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, ENTITY, COMPONENT_TYPE, CONTEXT_EXTENSION>;
 export interface DomainComponentSimpleOptic<ENTITIES extends DomainEntity<string>, ALLOWED_ROOT_ENTITIES extends ENTITIES, PUBLISHED_DATA extends Record<string, unknown>, SESSION_DATA extends Record<string, unknown>, FRONTEND_DATA extends Record<string, unknown>, ENTITY extends ENTITIES, COMPONENT_TYPE extends SystemComponentTypeConstraint, CONTEXT_EXTENSION = unknown> {
@@ -48,20 +54,7 @@ export declare class DomainComponentOpticBuilder<ENTITIES extends DomainEntity<s
      */
     withFilter(filter: ComponentSystemFilter | NavigationFilterOptic<ENTITIES, $ENTITY>): DomainComponentOpticBuilder<ENTITIES, ALLOWED_ROOT_ENTITIES, $MAP, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, ALIASES, ENTITY, $ENTITY, COMPONENT_TYPE, CONTEXT_EXTENSION>;
     withGradualFilter(filter: {
-        readonly navigationStates?: readonly string[] | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly string[] | undefined, CONTEXT_EXTENSION>;
-        readonly selectedEntityIds?: readonly IdOrWithId[] | IdOrWithId | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly IdOrWithId[] | IdOrWithId | undefined, CONTEXT_EXTENSION>;
-        readonly hoveredEntityIds?: readonly IdOrWithId[] | IdOrWithId | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly IdOrWithId[] | IdOrWithId | undefined, CONTEXT_EXTENSION>;
-        readonly draggedEntityIds?: readonly IdOrWithId[] | IdOrWithId | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly IdOrWithId[] | IdOrWithId | undefined, CONTEXT_EXTENSION>;
-        readonly exportedEntityIds?: readonly IdOrWithId[] | IdOrWithId | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly IdOrWithId[] | IdOrWithId | undefined, CONTEXT_EXTENSION>;
-        readonly viewStates?: readonly string[] | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly string[] | undefined, CONTEXT_EXTENSION>;
-        readonly toolStates?: readonly string[] | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly string[] | undefined, CONTEXT_EXTENSION>;
-        readonly exportStates?: readonly string[] | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly string[] | undefined, CONTEXT_EXTENSION>;
-        readonly modes?: ReadonlyArray<'owner' | 'read' | 'finalize'> | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, ReadonlyArray<'owner' | 'read' | 'finalize'> | undefined, CONTEXT_EXTENSION>;
-        readonly roles?: readonly SessionRole[] | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly SessionRole[] | undefined, CONTEXT_EXTENSION>;
-        readonly active?: boolean | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, boolean | undefined, CONTEXT_EXTENSION>;
-        readonly fullscreen?: boolean | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, boolean | undefined, CONTEXT_EXTENSION>;
-        readonly debug?: boolean | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, boolean | undefined, CONTEXT_EXTENSION>;
-        readonly viewports?: readonly Viewport[] | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, readonly Viewport[] | undefined, CONTEXT_EXTENSION>;
+        readonly [KEY in keyof ComponentSystemFilterProps]?: FilterCriterion<KEY> | CustomExpression<ENTITIES, ALLOWED_ROOT_ENTITIES, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, $ENTITY, FilterCriterion<KEY> | undefined, CONTEXT_EXTENSION>;
     }): DomainComponentOpticBuilder<ENTITIES, ALLOWED_ROOT_ENTITIES, $MAP, PUBLISHED_DATA, SESSION_DATA, FRONTEND_DATA, ALIASES, ENTITY, $ENTITY, COMPONENT_TYPE, CONTEXT_EXTENSION>;
     private validate;
     private _getProfilerLabel;

package/dist/domain/core/component/domain-component-optic.js

@@ -1,4 +1,4 @@
-import{createCacheToken as t,getStickyCache as e}from"@salsita-ai/common/utils";import{withProfilerLabel as i}from"../../utils/profiler-label.js";import{createCustomExpression as n}from"../expression/index.js";export class DomainComponentOpticBuilder{aliasMap;entityTypes;componentType;instanceName;navigationFilters;generated;entityTypeOrAliasNames;constructor(t,e,i,n,s=[],a=!1,o=[]){this.aliasMap=t,this.entityTypes=e,this.componentType=i,this.instanceName=n,this.navigationFilters=s,this.generated=a,this.entityTypeOrAliasNames=o}static from(t){return new DomainComponentOpticBuilder(t,[])}withEntity(t){return new DomainComponentOpticBuilder(this.aliasMap,[...this.entityTypes,t],this.componentType,this.instanceName,this.navigationFilters,this.generated,[...this.entityTypeOrAliasNames,t])}withAlias(t){return new DomainComponentOpticBuilder(this.aliasMap,[...this.entityTypes,...this.aliasMap[t]],this.componentType,this.instanceName,this.navigationFilters,this.generated,[...this.entityTypeOrAliasNames,String(t)])}withComponent(t,e,i=!1){return new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,t,e,this.navigationFilters,i,this.entityTypeOrAliasNames)}withFilter(i){if(console.warn(`Component ${this.componentType?.name}#${this.instanceName} on entity ${this.entityTypes.join(", ")} uses a legacy filter with full filter evaluation. This is a suboptimal variant and is deprecated in favor of per-criterion evaluation.
+import{createCacheToken as t,getStickyCache as e}from"@salsita-ai/common/utils";import{withProfilerLabel as i}from"../../utils/profiler-label.js";import{createCustomExpression as n}from"../expression/index.js";let s={navigationStates:void 0,selectedEntityIds:void 0,hoveredEntityIds:void 0,draggedEntityIds:void 0,viewStates:void 0,toolStates:void 0,modes:void 0,roles:void 0,active:void 0,fullscreen:void 0,debug:void 0,viewports:void 0,exportedEntityIds:void 0,exportStates:void 0};export class DomainComponentOpticBuilder{aliasMap;entityTypes;componentType;instanceName;navigationFilters;generated;entityTypeOrAliasNames;constructor(t,e,i,n,s=[],a=!1,o=[]){this.aliasMap=t,this.entityTypes=e,this.componentType=i,this.instanceName=n,this.navigationFilters=s,this.generated=a,this.entityTypeOrAliasNames=o}static from(t){return new DomainComponentOpticBuilder(t,[])}withEntity(t){return new DomainComponentOpticBuilder(this.aliasMap,[...this.entityTypes,t],this.componentType,this.instanceName,this.navigationFilters,this.generated,[...this.entityTypeOrAliasNames,t])}withAlias(t){return new DomainComponentOpticBuilder(this.aliasMap,[...this.entityTypes,...this.aliasMap[t]],this.componentType,this.instanceName,this.navigationFilters,this.generated,[...this.entityTypeOrAliasNames,String(t)])}withComponent(t,e,i=!1){return new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,t,e,this.navigationFilters,i,this.entityTypeOrAliasNames)}withFilter(i){if(console.warn(`Component ${this.componentType?.name}#${this.instanceName} on entity ${this.entityTypes.join(", ")} uses a legacy filter with full filter evaluation. This is a suboptimal variant and is deprecated in favor of per-criterion evaluation.
 
   In your TS files, replace
     withFilter()
@@ -13,4 +13,4 @@ import{createCacheToken as t,getStickyCache as e}from"@salsita-ai/common/utils";
       active:
         $read: $trueOrFalseExpression
         # ... other eventual criteria
-  `),"function"==typeof i){let n=t(),s=t=>({evaluate:(s,a,o)=>{let r=e(a,n),d=r.get(s);if(!d){if(void 0===(d=i(o.domain.get$Entity(s,a),a)))throw Error(`Dynamic filter on component ${this.componentType?.name}.${this.instanceName} on entity ${s} returned 'undefined'. This is likely a bug in the component definition, check whether you are referencing a correct expression or field!`);r.put(s,d)}return"boolean"==typeof d?"active"===t?d:void 0:d[t]},meta:{}});return new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,{navigationStates:s("navigationStates"),selectedEntityIds:s("selectedEntityIds"),hoveredEntityIds:s("hoveredEntityIds"),draggedEntityIds:s("draggedEntityIds"),viewStates:s("viewStates"),toolStates:s("toolStates"),modes:s("modes"),roles:s("roles"),active:s("active"),fullscreen:s("fullscreen"),debug:s("debug"),viewports:s("viewports"),exportedEntityIds:void 0,exportStates:void 0}],this.generated,this.entityTypeOrAliasNames)}return"boolean"==typeof i?new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,{active:i,navigationStates:void 0,selectedEntityIds:void 0,hoveredEntityIds:void 0,draggedEntityIds:void 0,viewStates:void 0,toolStates:void 0,modes:void 0,roles:void 0,fullscreen:void 0,debug:void 0,viewports:void 0,exportedEntityIds:void 0,exportStates:void 0}],this.generated,this.entityTypeOrAliasNames):new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,{navigationStates:void 0,selectedEntityIds:void 0,hoveredEntityIds:void 0,draggedEntityIds:void 0,viewStates:void 0,toolStates:void 0,modes:void 0,roles:void 0,active:void 0,fullscreen:void 0,debug:void 0,viewports:void 0,exportedEntityIds:void 0,exportStates:void 0,...i}],this.generated,this.entityTypeOrAliasNames)}withGradualFilter(t){let e=t=>"function"==typeof t?n(t,{}):t,i={navigationStates:e(t.navigationStates),selectedEntityIds:e(t.selectedEntityIds),hoveredEntityIds:e(t.hoveredEntityIds),draggedEntityIds:e(t.draggedEntityIds),exportedEntityIds:e(t.exportedEntityIds),viewStates:e(t.viewStates),toolStates:e(t.toolStates),exportStates:e(t.exportStates),modes:e(t.modes),roles:e(t.roles),active:e(t.active),fullscreen:e(t.fullscreen),debug:e(t.debug),viewports:e(t.viewports)};return new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,i],this.generated,this.entityTypeOrAliasNames)}validate(){if(!this.componentType||!this.instanceName)throw Error("Use withComponent before attaching");if(!this.entityTypes.length)throw Error("Use withEntity and/or withAlias before attaching")}_getProfilerLabel(){return[...this.entityTypeOrAliasNames,this.componentType.name,this.instanceName].join("_")}attach=(n,s)=>{var a,o;let r,d;return this.validate(),a={kind:"simple",entityTypes:new Set(this.entityTypes),componentType:this.componentType,instanceName:this.instanceName,navigationFilters:this.navigationFilters,read:(t,e,i)=>n(i.domain.get$Entity(t,e),e,i),write:s??(()=>({})),generated:this.generated},o=this._getProfilerLabel(),r=t(),d=i(o,a.read),{...a,read:(t,i,n)=>{let s=e(i,r),a=s.get(t);if(a)return a;let o=d(t,i,n);return s.put(t,o),o}}};attachMany=n=>{var s,a;let o,r;return this.validate(),s={kind:"dynamic",entityTypes:new Set(this.entityTypes),componentType:this.componentType,instanceName:this.instanceName,navigationFilters:this.navigationFilters,read:(t,e,i)=>n(i.domain.get$Entity(t,e),e,i)},a=this._getProfilerLabel(),o=t(),r=i(a,s.read),{...s,read:(t,i,n)=>{let s=e(i,o),a=s.get(t);if(a)return a;let d=r(t,i,n);return s.put(t,d),d}}}}
+  `),"function"==typeof i){let n=t(),a=t=>({evaluate:(s,a,o)=>{let r=e(a,n),l=r.get(s);if(!l){if(void 0===(l=i(o.domain.get$Entity(s,a),a)))throw Error(`Dynamic filter on component ${this.componentType?.name}.${this.instanceName} on entity ${s} returned 'undefined'. This is likely a bug in the component definition, check whether you are referencing a correct expression or field!`);r.put(s,l)}return"boolean"==typeof l?"active"===t?l:void 0:l[t]},meta:{}});return new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,{...s,navigationStates:a("navigationStates"),selectedEntityIds:a("selectedEntityIds"),hoveredEntityIds:a("hoveredEntityIds"),draggedEntityIds:a("draggedEntityIds"),viewStates:a("viewStates"),toolStates:a("toolStates"),modes:a("modes"),roles:a("roles"),active:a("active"),fullscreen:a("fullscreen"),debug:a("debug"),viewports:a("viewports")}],this.generated,this.entityTypeOrAliasNames)}return"boolean"==typeof i?new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,{...s,active:i}],this.generated,this.entityTypeOrAliasNames):new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,{...s,...i}],this.generated,this.entityTypeOrAliasNames)}withGradualFilter(t){let e=t=>"function"==typeof t?n(t,{}):t,i={navigationStates:e(t.navigationStates),selectedEntityIds:e(t.selectedEntityIds),hoveredEntityIds:e(t.hoveredEntityIds),draggedEntityIds:e(t.draggedEntityIds),exportedEntityIds:e(t.exportedEntityIds),viewStates:e(t.viewStates),toolStates:e(t.toolStates),exportStates:e(t.exportStates),modes:e(t.modes),roles:e(t.roles),active:e(t.active),fullscreen:e(t.fullscreen),debug:e(t.debug),viewports:e(t.viewports)};return new DomainComponentOpticBuilder(this.aliasMap,this.entityTypes,this.componentType,this.instanceName,[...this.navigationFilters,i],this.generated,this.entityTypeOrAliasNames)}validate(){if(!this.componentType||!this.instanceName)throw Error("Use withComponent before attaching");if(!this.entityTypes.length)throw Error("Use withEntity and/or withAlias before attaching")}_getProfilerLabel(){return[...this.entityTypeOrAliasNames,this.componentType.name,this.instanceName].join("_")}attach=(n,s)=>{var a,o;let r,l;return this.validate(),a={kind:"simple",entityTypes:new Set(this.entityTypes),componentType:this.componentType,instanceName:this.instanceName,navigationFilters:this.navigationFilters,read:(t,e,i)=>n(i.domain.get$Entity(t,e),e,i),write:s??(()=>({})),generated:this.generated},o=this._getProfilerLabel(),r=t(),l=i(o,a.read),{...a,read:(t,i,n)=>{let s=e(i,r),a=s.get(t);if(a)return a;let o=l(t,i,n);return s.put(t,o),o}}};attachMany=n=>{var s,a;let o,r;return this.validate(),s={kind:"dynamic",entityTypes:new Set(this.entityTypes),componentType:this.componentType,instanceName:this.instanceName,navigationFilters:this.navigationFilters,read:(t,e,i)=>n(i.domain.get$Entity(t,e),e,i)},a=this._getProfilerLabel(),o=t(),r=i(a,s.read),{...s,read:(t,i,n)=>{let s=e(i,o),a=s.get(t);if(a)return a;let l=r(t,i,n);return s.put(t,l),l}}}}

package/dist/domain/core/component/legacy-filter.d.ts

@@ -1,22 +1,7 @@
-import type { SessionRole } from '@salsita-ai/contracts/api';
 import type { $DomainEntity, DomainEntity } from '../model/index.js';
 import type { DomainState } from '../state/index.js';
-import { type IdOrWithId } from './system-component-filter.js';
-import type { Viewport } from './viewport-state-component.js';
-export type DeclarativeComponentSystemFilter = {
-    navigationStates?: string[];
-    selectedEntityIds?: readonly IdOrWithId[] | IdOrWithId;
-    hoveredEntityIds?: readonly IdOrWithId[] | IdOrWithId;
-    draggedEntityIds?: readonly IdOrWithId[] | IdOrWithId;
-    viewStates?: string[];
-    toolStates?: string[];
-    modes?: Array<'owner' | 'read' | 'finalize'>;
-    roles?: SessionRole[];
-    active?: boolean;
-    fullscreen?: boolean;
-    debug?: boolean;
-    viewports?: readonly Viewport[];
-};
+import { type ComponentSystemFilterProps } from './system-component-filter.js';
+export type DeclarativeComponentSystemFilter = Omit<ComponentSystemFilterProps, 'exportedEntityIds' | 'exportStates'>;
 export type ComponentSystemFilter = DeclarativeComponentSystemFilter | boolean;
 export declare const ComponentSystemFilterSchema: {
     readonly anyOf: [{