@salsita-ai/sdk 0.50.0-develop.f16492b14e → 0.50.0-develop.f354d3576d

package/dist/configurator/ui/assistant/screenshots/use-screenshot-src.js

@@ -1 +1 @@
-import{useEffect as r,useState as e}from"react";import{useConfigurator as n}from"../../../application-runtime/index.js";export const useScreenshotSrc=t=>{let{assistantSystem:i}=n(),o="stored"===t.kind?t.imageId:null,[l,d]=e();return(r(()=>{if(null===o)return;let r=!0;return i.loadScreenshotUrl(o).then(e=>{r&&d({imageId:o,src:e})},()=>void 0),()=>{r=!1}},[i,o]),"inline"===t.kind)?t.src:l?.imageId===o?l.src:void 0};
+import{useEffect as r,useState as e}from"react";import{useConfigurator as t}from"../../../application-runtime/index.js";export const useScreenshotSrc=o=>{let{assistantSystem:i}=t(),{imageId:n}=o,[c,m]=e();return r(()=>{let r=!0;return i.loadScreenshotUrl(n).then(e=>{r&&m({imageId:n,src:e})},()=>void 0),()=>{r=!1}},[i,n]),c?.imageId===n?c.src:void 0};

package/dist/configurator/ui/assistant/streamed-markdown.d.ts

@@ -1,3 +1,14 @@
+/** Where a code block starts and ends in the text, as Markdown parsed it. */
+export interface FencePosition {
+    readonly start: number;
+    readonly end: number;
+}
+/**
+ * True when a code block of a finished reply was cut off: it runs to the end of the reply without
+ * the line that closes its fence, whatever backticks the reply has elsewhere. A block that the end
+ * of its list item or blockquote closed before the reply went on is not cut off.
+ */
+export declare const isCutOffFence: (text: string, { start, end }: FencePosition) => boolean;
 /** True when the text has a code fence the model has not closed yet. */
 export declare const hasOpenFence: (text: string) => boolean;
 /**

package/dist/configurator/ui/assistant/streamed-markdown.js

@@ -1,2 +1,2 @@
-let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/,l=/(^|\n) {0,3}>[ \t]*\[![a-z]*$/i,n=/(^|\n) {0,3}>[ \t]*\[![a-z]+\][ \t]*$/i;export const hasOpenFence=t=>e(t,"```")%2==1;export const completeStreamedMarkdown=s=>{var r;let a;if(hasOpenFence(s))return`${s}
-\`\`\``;let i=s.lastIndexOf("```"),c=-1===i?"":s.slice(0,i+3),{head:$,marker:h}=(r=s.slice(c.length),null==(a=n.exec(r))?{head:r.replace(l,"$1"),marker:""}:{head:r.slice(0,a.index),marker:r.slice(a.index)}),p=(e=>{let l=e.split("\n"),n=l.length;for(;n>0&&l[n-1]?.trimStart().startsWith("|");)n-=1;let s=l.slice(n),r=s[1],a=null!=r&&s.length>2&&t.test(r);return 0===s.length||a?e:l.slice(0,n).join("\n")})((e($,"`")%2==1?$.slice(0,$.lastIndexOf("`")):$).replace(/!?\[([^\]\n]*)\](?:\([^)\n]*)?$/,"$1").replace(/!?\[[^\]\n]*$/,"")),d=e(p,"**")%2==1?`${p}**`:p;return`${c}${d}${h}`};
+let e=(e,t)=>e.split(t).length-1,t=/^\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/,l=/(^|\n) {0,3}>[ \t]*\[![a-z]*$/i,n=/(^|\n) {0,3}>[ \t]*\[![a-z]+\][ \t]*$/i,s=/^[ \t>]*(`{3,}|~{3,})/,r=/^[ \t>]*(`{3,}|~{3,})[ \t]*$/;export const isCutOffFence=(e,{start:t,end:l})=>{let n,i,c;return l>=e.trimEnd().length&&(n=e.slice(t,l).split("\n"),i=s.exec(n[0]??"")?.[1],c=n.length>1?r.exec(n.at(-1)??"")?.[1]:void 0,null==i||null==c||c[0]!==i[0]||!(c.length>=i.length))};export const hasOpenFence=t=>e(t,"```")%2==1;export const completeStreamedMarkdown=s=>{var r;let i;if(hasOpenFence(s))return`${s}
+\`\`\``;let c=s.lastIndexOf("```"),a=-1===c?"":s.slice(0,c+3),{head:h,marker:$}=(r=s.slice(a.length),null==(i=n.exec(r))?{head:r.replace(l,"$1"),marker:""}:{head:r.slice(0,i.index),marker:r.slice(i.index)}),p=(e=>{let l=e.split("\n"),n=l.length;for(;n>0&&l[n-1]?.trimStart().startsWith("|");)n-=1;let s=l.slice(n),r=s[1],i=null!=r&&s.length>2&&t.test(r);return 0===s.length||i?e:l.slice(0,n).join("\n")})((e(h,"`")%2==1?h.slice(0,h.lastIndexOf("`")):h).replace(/!?\[([^\]\n]*)\](?:\([^)\n]*)?$/,"$1").replace(/!?\[[^\]\n]*$/,"")),d=e(p,"**")%2==1?`${p}**`:p;return`${a}${d}${$}`};

package/dist/configurator/ui/assistant/thread-items.d.ts

@@ -1,4 +1,5 @@
 import type { UIMessage } from '@tanstack/ai-client';
+import { type AssistantMessageAnnotation } from '@salsita-ai/contracts/assistant';
 import type { AssistantEarlierThreadSnapshot } from '../../application-runtime/index.js';
 import { type AssistantToolChip } from './tool-chip.js';
 /** A tool call of the thread, with what its chip shows and what a click on the chip logs. */
@@ -23,6 +24,10 @@ export type AssistantThreadItem = {
     readonly kind: 'user';
     readonly id: string;
     readonly text: string;
+    /** The images the user attached, by the ids the message references them by; annotations are not among them. */
+    readonly imageIds: readonly string[];
+    /** The annotations the user attached, in their order among the message's images. */
+    readonly annotations: readonly AssistantMessageAnnotation[];
 } | {
     readonly kind: 'text';
     readonly id: string;

package/dist/configurator/ui/assistant/thread-items.js

@@ -1 +1 @@
-import{match as t}from"ts-pattern";import{describeToolCall as e}from"./tool-chip.js";let r=t=>{try{return JSON.parse(t)}catch{return t}},i=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim();export const buildThreadView=(o,n,s)=>{let l=(t=>{let e=new Map;for(let i of t)for(let t of i.parts)"tool-result"===t.type&&e.set(t.toolCallId,{result:"string"==typeof t.content?r(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return e})(o),a=[],d=o.at(-1),p=t=>{let e=a.at(-1);e?.kind==="tools"?a[a.length-1]={...e,tools:[...e.tools,t]}:a.push({kind:"tools",id:t.id,tools:[t]})};for(let r of o){if("user"===r.role){let t=i(r.parts);t&&a.push({kind:"user",id:r.id,text:t});continue}let o=n&&r===d,u=t({isLast:r===d,isBusy:o||s}).with({isLast:!1},()=>"hidden").with({isBusy:!0},()=>"disabled").otherwise(()=>"enabled");r.parts.forEach((t,i)=>{let n=`${r.id}:${i}`;if("text"===t.type){if(t.content.trim()){let e=o&&i===r.parts.length-1;a.push({kind:"text",id:n,markdown:t.content,isStreaming:e,forms:u})}return}if("tool-call"!==t.type)return;let s=l.get(t.id),d=t.input,h=t.output??s?.result;p({id:t.id,input:d,result:h,chip:e({name:t.name,input:d,result:h,error:s?.error,isReplyRunning:o})})})}let u=a.at(-1),h=d?.role==="assistant"&&(u?.kind==="text"&&u.isStreaming||u?.kind==="tools");return{items:a,isThinking:n&&!h}};export const buildEarlierThreadItems=t=>t.flatMap(({threadId:t,messages:e})=>[...buildThreadView(e,!1,!1).items.map(e=>"text"===e.kind?{...e,id:`${t}:${e.id}`,forms:"hidden"}:{...e,id:`${t}:${e.id}`}),{kind:"separator",id:`${t}:separator`}]);
+import{match as t}from"ts-pattern";import{AssistantMessageMetadata as e,readAssistantImageReference as r}from"@salsita-ai/contracts/assistant";import{describeToolCall as i}from"./tool-chip.js";let o=t=>{try{return JSON.parse(t)}catch{return t}},a=t=>t.map(t=>"text"===t.type?t.content:"").join("").trim(),s=t=>t.flatMap(t=>"image"===t.type&&"url"===t.source.type?r(t.source.value)??[]:[]),l=(t,r)=>{let i=e.safeParse(t.metadata),o=i.success?i.data.annotations??[]:[];return r.flatMap(t=>o.filter(e=>e.imageId===t))};export const buildThreadView=(e,r,n)=>{let d=(t=>{let e=new Map;for(let r of t)for(let t of r.parts)"tool-result"===t.type&&e.set(t.toolCallId,{result:"string"==typeof t.content?o(t.content):t.content,error:"error"===t.state?t.error??"The tool call failed.":void 0});return e})(e),p=[],u=e.at(-1),f=t=>{let e=p.at(-1);e?.kind==="tools"?p[p.length-1]={...e,tools:[...e.tools,t]}:p.push({kind:"tools",id:t.id,tools:[t]})};for(let o of e){if("user"===o.role){let t=a(o.parts),e=s(o.parts),r=l(o,e),i=e.filter(t=>!r.some(e=>e.imageId===t));(t||e.length>0)&&p.push({kind:"user",id:o.id,text:t,imageIds:i,annotations:r});continue}let e=r&&o===u,c=t({isLast:o===u,isBusy:e||n}).with({isLast:!1},()=>"hidden").with({isBusy:!0},()=>"disabled").otherwise(()=>"enabled");o.parts.forEach((t,r)=>{let a=`${o.id}:${r}`;if("text"===t.type){if(t.content.trim()){let i=e&&r===o.parts.length-1;p.push({kind:"text",id:a,markdown:t.content,isStreaming:i,forms:c})}return}if("tool-call"!==t.type)return;let s=d.get(t.id),l=t.input,n=t.output??s?.result;f({id:t.id,input:l,result:n,chip:i({name:t.name,input:l,result:n,error:s?.error,isReplyRunning:e})})})}let c=p.at(-1),m=u?.role==="assistant"&&(c?.kind==="text"&&c.isStreaming||c?.kind==="tools");return{items:p,isThinking:r&&!m}};export const buildEarlierThreadItems=t=>t.flatMap(({threadId:t,messages:e})=>[...buildThreadView(e,!1,!1).items.map(e=>"text"===e.kind?{...e,id:`${t}:${e.id}`,forms:"hidden"}:{...e,id:`${t}:${e.id}`}),{kind:"separator",id:`${t}:separator`}]);

package/dist/configurator/ui/assistant/tool-chip.js

@@ -1 +1 @@
-import{Kind as e,parse as t}from"graphql";import{z as r}from"zod";import{ASSISTANT_TOOL_ERROR_CODES as a,AssistantToolError as n,applyTool as s,queryTool as i}from"@salsita-ai/contracts/assistant";let l=r.object({title:r.string().nullish().catch(void 0),operations:r.array(r.object({query:r.string(),operationName:r.string().nullish()}))}),o=r.object({results:r.array(r.object({errors:r.array(r.unknown()).optional()})),committed:r.boolean()}),u=r.tuple([r.object({type:r.literal("text"),content:r.string()})]).rest(r.unknown()),d=e=>{let t=u.safeParse(e);if(!t.success)return e;try{return JSON.parse(t.data[0].content)}catch{return e}},c=r.object({message:r.string(),extensions:r.object({code:r.literal("VIOLATION"),type:r.string()})});export const describeToolCall=r=>{var u;let f,m=(({name:r,input:a})=>{let n,o,u=(n=l.safeParse(a)).success&&n.data.title?.trim()||void 0;if(null!=u)return{kind:"text",text:u};let d=(o=l.safeParse(a)).success?o.data.operations.flatMap(({query:r,operationName:a})=>a??(r=>{try{let a=t(r).definitions.find(t=>t.kind===e.OPERATION_DEFINITION);return a?.kind===e.OPERATION_DEFINITION?a.name?.value:void 0}catch{return}})(r)??[]):[];return d.length>0?{kind:"text",text:d.join(", ")}:r===s.name?{kind:"updateDesign"}:r===i.name?{kind:"readDesign"}:{kind:"text",text:r}})(r);if(null==r.result&&null==r.error)return{label:m,state:r.isReplyRunning?"running":"done",errorCode:void 0,violations:[]};let p=(e=>{let t=n.safeParse(e);if(t.success)return a.find(e=>e===t.data.code)})(r.result),g=(({name:e,result:t,error:r},a)=>{if(null!=r||null!=a)return"failed";if(e!==s.name&&e!==i.name)return"done";let n=o.safeParse(d(t));if(!n.success)return"failed";let{results:l,committed:u}=n.data;return e===s.name?u?"done":"failed":l.some(({errors:e})=>(e?.length??0)>0)||0===l.length?"failed":"done"})(r,p);return{label:m,state:g,errorCode:p,violations:"failed"===g?(u=r.result,(f=o.safeParse(d(u))).success?f.data.results.flatMap(({errors:e})=>(e??[]).flatMap(e=>{let t=c.safeParse(e);return t.success&&t.data.message!==t.data.extensions.type?[t.data.message]:[]})):[]):[]}};
+import{Kind as e,parse as t}from"graphql";import{z as r}from"zod";import{ASSISTANT_TOOL_ERROR_CODES as n,AssistantToolError as s,applyTool as a,queryTool as i}from"@salsita-ai/contracts/assistant";import{SCREENSHOT_NOT_TAKEN as o}from"../../application-runtime/index.js";let l=r.object({title:r.string().nullish().catch(void 0),operations:r.array(r.object({query:r.string(),operationName:r.string().nullish()}))}),u=r.object({results:r.array(r.object({errors:r.array(r.unknown()).optional()})),committed:r.boolean()}),d=r.tuple([r.object({type:r.literal("text"),content:r.string()})]).rest(r.unknown()),c=e=>{let t=d.safeParse(e);if(!t.success)return e;try{return JSON.parse(t.data[0].content)}catch{return e}},f=r.object({extensions:r.object({code:r.string()})}),m=r.object({message:r.string(),extensions:r.object({code:r.literal("VIOLATION"),type:r.string()})});export const describeToolCall=r=>{var d;let p,g=(({name:r,input:n})=>{let s,o,u=(s=l.safeParse(n)).success&&s.data.title?.trim()||void 0;if(null!=u)return{kind:"text",text:u};let d=(o=l.safeParse(n)).success?o.data.operations.flatMap(({query:r,operationName:n})=>n??(r=>{try{let n=t(r).definitions.find(t=>t.kind===e.OPERATION_DEFINITION);return n?.kind===e.OPERATION_DEFINITION?n.name?.value:void 0}catch{return}})(r)??[]):[];return d.length>0?{kind:"text",text:d.join(", ")}:r===a.name?{kind:"updateDesign"}:r===i.name?{kind:"readDesign"}:{kind:"text",text:r}})(r);if(null==r.result&&null==r.error)return{label:g,state:r.isReplyRunning?"running":"done",errorCode:void 0,violations:[]};let x=(e=>{let t=s.safeParse(e);if(t.success)return n.find(e=>e===t.data.code)})(r.result),b=(({name:e,result:t,error:r},n)=>{if(null!=r||null!=n)return"failed";if(e!==a.name&&e!==i.name)return"done";let s=u.safeParse(c(t));if(!s.success)return"failed";let{results:l,committed:d}=s.data;return e===a.name?d?"done":"failed":l.some(({errors:e})=>e?.some(e=>{let t;return!(t=f.safeParse(e)).success||t.data.extensions.code!==o}))||0===l.length?"failed":"done"})(r,x);return{label:g,state:b,errorCode:x,violations:"failed"===b?(d=r.result,(p=u.safeParse(c(d))).success?p.data.results.flatMap(({errors:e})=>(e??[]).flatMap(e=>{let t=m.safeParse(e);return t.success&&t.data.message!==t.data.extensions.type?[t.data.message]:[]})):[]):[]}};

package/dist/configurator/ui/assistant/use-load-older-on-top.d.ts

@@ -0,0 +1,22 @@
+import { type RefObject } from 'react';
+export interface LoadOlderOnTopOptions {
+    /** True while there is an older page to load and none is loading. */
+    readonly enabled: boolean;
+    readonly onReachTop: () => void;
+    /** Changes when a page is painted above the thread, such as the id of its first message. */
+    readonly firstItemKey: unknown;
+}
+/**
+ * Loads older messages when the user scrolls the thread to its top: a sentinel above the first
+ * message is watched within the scroller, and `onReachTop` runs when it comes into view. A page
+ * that does not fill the scroller leaves the sentinel in view, so the next page loads too. An
+ * attempt that painted nothing, because it failed, is tried again only once the user scrolls the
+ * sentinel out of view and back.
+ *
+ * The page lands above what the user reads, so the reading position is kept: the distance from the
+ * end of the thread is restored once the page is painted, before the browser shows it, and again
+ * each time an image in the thread finishes loading, until the user scrolls: an image reserves no
+ * height, so one that loads above the reader grows the thread there. CSS scroll anchoring would do
+ * the same, but Safari does not support it.
+ */
+export declare const useLoadOlderOnTop: <SCROLLER extends HTMLElement, SENTINEL extends HTMLElement>(scrollerRef: RefObject<SCROLLER>, sentinelRef: RefObject<SENTINEL>, { enabled, onReachTop, firstItemKey }: LoadOlderOnTopOptions) => void;

package/dist/configurator/ui/assistant/use-load-older-on-top.js

@@ -0,0 +1 @@
+import{useEffect as r,useLayoutEffect as e,useRef as t}from"react";let n=Symbol("no attempt");export const useLoadOlderOnTop=(l,c,{enabled:o,onReachTop:u,firstItemKey:s})=>{let i=t(null),p=t(n),a=t(null),d=t({onReachTop:u,firstItemKey:s});d.current={onReachTop:u,firstItemKey:s},r(()=>{let r=l.current;if(!r)return;let e=()=>{null!==i.current&&(i.current=r.scrollHeight-r.scrollTop),a.current&&Math.abs(r.scrollTop-a.current.scrollTop)>1&&(a.current=null)},t=()=>{a.current&&(r.scrollTop=r.scrollHeight-a.current.distanceFromEnd,a.current={...a.current,scrollTop:r.scrollTop})};return r.addEventListener("scroll",e,{passive:!0}),r.addEventListener("load",t,!0),()=>{r.removeEventListener("scroll",e),r.removeEventListener("load",t,!0)}},[l]),r(()=>{let r=l.current,e=c.current;if(!o||!r||!e)return;let t=new IntersectionObserver(([e])=>{if(!e?.isIntersecting){p.current=n;return}p.current!==d.current.firstItemKey&&(p.current=d.current.firstItemKey,a.current=null,i.current=r.scrollHeight-r.scrollTop,d.current.onReachTop())},{root:r});return t.observe(e),()=>t.disconnect()},[o,l,c]),e(()=>{let r=l.current;r&&null!==i.current&&(r.scrollTop=r.scrollHeight-i.current,a.current={distanceFromEnd:i.current,scrollTop:r.scrollTop}),i.current=null},[s,l])};

package/dist/configurator/ui/configurator-layout/universal/Layout.js

@@ -1 +1 @@
-import{jsx as t,jsxs as e,Fragment as r}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useEffect as i}from"react";import{useEagerObservableValue as m}from"#package/react-sdk";import{useResponsive as n}from"#package/ui-sdk";import{useConfigurator as a}from"../../../application-runtime/index.js";import{LayoutSlots as s}from"../slots/index.js";import{DesktopLayout as c}from"./DesktopLayout.js";import{ExportingOverlay as p}from"./ExportingOverlay.js";import{MobileLayout as d}from"./MobileLayout.js";let l=o("div")({display:"contents"});export const Layout=()=>{let{isDesktop:o}=n(),{exportSystem:u}=a(),f=m(u.exporting$);return i(()=>{if(!f)return;let t=document.activeElement;return()=>{t instanceof HTMLElement&&t.isConnected&&document.activeElement===document.body&&t.focus()}},[f]),e(r,{children:[e(l,{...{inert:f?"":void 0},children:[t(s.Services,{}),t(s.SharedCanvas,{}),o?t(c,{}):t(d,{})]}),f&&t(p,{})]})};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useEffect as r,useRef as i}from"react";import{useEagerObservableValue as n}from"#package/react-sdk";import{useResponsive as a}from"#package/ui-sdk";import{useConfigurator as m}from"../../../application-runtime/index.js";import{AnnotationHostContext as s,AnnotationOverlay as c}from"../../assistant/index.js";import{LayoutSlots as l}from"../slots/index.js";import{DesktopLayout as p}from"./DesktopLayout.js";import{ExportingOverlay as d}from"./ExportingOverlay.js";import{MobileLayout as u}from"./MobileLayout.js";let f=o("div")({display:"contents"});export const Layout=()=>{let{isDesktop:o}=a(),{exportSystem:v,assistantSystem:j}=m(),x=n(v.exporting$),y=null!==n(j.annotationOverlay$),g=x||y,k=i(null);return r(()=>{if(!g)return;let t=k.current?.getRootNode(),e=t instanceof ShadowRoot?t.activeElement:document.activeElement;return()=>{e instanceof HTMLElement&&e.isConnected&&document.activeElement===document.body&&e.focus()}},[g]),e(s.Provider,{value:!0,children:[e(f,{ref:k,...{inert:g?"":void 0},children:[t(l.Services,{}),t(l.SharedCanvas,{}),o?t(p,{}):t(u,{})]}),t(c,{}),x&&!y&&t(d,{})]})};

package/dist/docs/3d-scene/animations-basic.mdx

@@ -330,8 +330,6 @@ import { useCallback } from 'react'
 
 import { memoEval, sceneEntityObjectHtmlHotspotComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const AnimationTrigger = () => {
   const { animationSystem } = phx.frontend.useConfigurator()
 
@@ -379,8 +377,6 @@ export default [
 ### ./src/expressions/top-variant-options.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Table: {
     $topVariantOptions: () => {

package/dist/docs/3d-scene/camera-based-hiding.mdx

@@ -581,8 +581,6 @@ components:
 ```ts
 import { memoEval } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   MainBuckyball: {
     $childRecipes: memoEval(

package/dist/docs/3d-scene/cameras/custom.mdx

@@ -380,8 +380,6 @@ import { ContactShadows, Environment } from '@react-three/drei'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Color } from 'three'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const WARM = new Color('#fffffb')
 
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {

package/dist/docs/3d-scene/cameras/fit-during-drag.mdx

@@ -226,8 +226,6 @@ import { Edges } from '@react-three/drei'
 import { distanceUnitToDefault } from '@salsita-ai/sdk/domain'
 import { useDimensionConfig } from '@salsita-ai/sdk/react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('SceneGround', ({ entityId }) => {
   if (!phx.domain.model.Scene.isId(entityId)) {
     throw new Error(`Expected a Scene entity id but received '${entityId}'.`)
@@ -258,8 +256,6 @@ export default phx.frontend.createCustomPhoenixEntityElement('SceneGround', ({ e
 ### ./src/expressions/scene.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 // Center-to-center distance (cm) below which the two atoms are "close enough"
 // to trigger the enclosing explosion. Driving the explosion's mount through a
 // domain expression (rather than a node snuck into a custom element's render)

package/dist/docs/3d-scene/cameras/locks.mdx

@@ -377,8 +377,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSwitchSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(propertyPageComponent, 'main')
@@ -417,8 +415,6 @@ export default [
 ### ./src/expressions/camera-locks.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Scene: {
     $distanceLockGroup: s => (s.lockZoomOrDistance ? 'object-b-and-root' : null),

package/dist/docs/3d-scene/cameras/transitions.mdx

@@ -314,8 +314,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSwitchSelector, GenericDimensionSlider } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.attachComponent
   .withComponent(propertyPageComponent, 'default')
   .withEntity('Scene')

package/dist/docs/3d-scene/engraving.mdx

@@ -146,8 +146,6 @@ import {
 } from '@salsita-ai/sdk/domain'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const coverEntityId = 'Cover-1' as DomainEntityId<'Cover'>
 
 const TextInput = () => {
@@ -301,8 +299,6 @@ export default [
 ```tsx
 import { ContactShadows, Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   return (
     <>

package/dist/docs/3d-scene/materials/custom.mdx

@@ -30,7 +30,7 @@ object.rotation.x = -Math.PI / 2
 material.name = 'plane_material'
 
 attachComponent
-  .withComponent(sceneEntityCustomObjectComponent, 'plane')
+  .withComponent(sceneEntityObjectComponent, 'plane')
   .withEntity('Scene')
   .attach(() => {
     return {
@@ -251,7 +251,6 @@ import {
 import { GenericDimensionSlider } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import { getPlane, getShaderMaterial } from './_shared/render.js'
 
 export default [

package/dist/docs/3d-scene/materials/inherit.mdx

@@ -238,8 +238,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSwitchSelector, MaterialSwatchSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(propertyPageComponent, 'main')
@@ -276,8 +274,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export const SceneSwatchMap = {
   RAL9005: {
     color: '#1A1A1A',

package/dist/docs/3d-scene/materials/multilevel.mdx

@@ -258,8 +258,6 @@ components:
 ```ts
 import type { SwatchOptionMap } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export const MaterialSwatchMap: SwatchOptionMap = {
   [phx.domain.model.TopMaterial.Ceramic]: {
     color: '#f0f0f0',
@@ -381,8 +379,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { MaterialSwatchSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(propertyPageComponent, 'main')
@@ -405,7 +401,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
 import { ColorSwatchMap, MaterialSwatchMap, MaterialsMap } from '../_shared/data.js'
 
 const getCompoundKey = (s: { material: string; color: string }) => `${s.material}-${s.color}`
@@ -440,46 +435,4 @@ export default phx.domain.implementCustomExpressions({
 })
 ```
 
-### ./src/transformers/fix.ts
-
-```ts
-import type { ComponentModification, MaterialSwatchComponent } from '@salsita-ai/sdk/domain'
-
-import type * as Model from '../../.phoenix/application-types.js'
-import { phx } from '../../.phoenix/phx.js'
-import { ColorSwatchMap } from '../_shared/data.js'
-
-export default phx.frontend.createTransformer(() => (updates, currentState) => {
-  if (updates.length > 1) {
-    return updates
-  }
-
-  const materialUpdate = updates.find(
-    (u): u is ComponentModification<MaterialSwatchComponent> =>
-      u.kind === 'modifyComponent' && u.updateTag === 'selectSwatch-topMaterial'
-  )
-
-  if (!materialUpdate) {
-    return updates
-  }
-
-  const newMaterial = materialUpdate.writableState.selectedSwatchKey as Model.TopMaterial
-
-  const defaultMaterialColor = Object.keys(ColorSwatchMap[newMaterial])[0]
-
-  const table = currentState.entities.find(phx.domain.model.Table.is)!
-
-  const fixUpdate = phx.frontend.updates.DomainEntityModification({
-    entityId: table.id,
-    stateDelta: {
-      material: newMaterial,
-      color: defaultMaterialColor,
-    },
-    updateTag: 'fix.color',
-  })
-
-  return [fixUpdate]
-})
-```
-
 </details>

package/dist/docs/3d-scene/materials/override.mdx

@@ -1234,8 +1234,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { AttributeSelect, GenericDimensionSlider, TextValueInput } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(propertyPageComponent, 'main')
@@ -1469,8 +1467,6 @@ import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   const { gl } = useThree()
 

package/dist/docs/3d-scene/materials/simple.mdx

@@ -345,8 +345,6 @@ import { propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { MaterialSwatchSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(propertyPageComponent, 'main')
@@ -366,8 +364,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export const MaterialSwatchMap = {
   RAL9005: {
     color: '#1A1A1A',

package/dist/docs/3d-scene/materials/transformer.mdx

@@ -217,7 +217,6 @@ import { TextureLoader } from 'three'
 import { isStandardMaterial } from '@salsita-ai/sdk/configurator'
 
 import type * as Model from '../../../.phoenix/application-types.js'
-import { phx } from '../../../.phoenix/phx.js'
 
 const MIN_CHILLI_SIZE = 40
 const MAX_CHILLI_SIZE = 100
@@ -515,7 +514,6 @@ import {
 import { AttributeCardSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
 import {
   animateBodyChange,
   animateBodyMaterialChange,
@@ -601,8 +599,6 @@ export default [
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Pepper: {
     $chilliTypeOptions: () => {

package/dist/docs/3d-scene/materials/transition.mdx

@@ -224,8 +224,6 @@ import { memoEval, propertyPageComponent } from '@salsita-ai/sdk/domain'
 import { MaterialSwatchSelector } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(propertyPageComponent, 'main')
@@ -250,8 +248,6 @@ export default [
 ```ts
 import type { SwatchOption } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export const TopColorMattSwatchMap: Record<string, SwatchOption> = {
   Black: {
     swatchName: 'Black',

package/dist/docs/3d-scene/materials/transmissive.mdx

@@ -107,8 +107,6 @@ components:
 ```tsx
 import { sceneEntityObjectDecalComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default [
   phx.domain.attachComponent
     .withComponent(sceneEntityObjectDecalComponent, 'product')
@@ -140,8 +138,6 @@ import { ContactShadows, Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {
   const { gl } = useThree()
 

package/dist/docs/3d-scene/postprocessing.mdx

@@ -1281,7 +1281,6 @@ export const SelectiveBloomCustomEffect = memo(Effect)
 ```tsx
 import { memoEval, propertyPageComponent } from '@salsita-ai/sdk/domain'
 
-import { phx } from '../../.phoenix/phx.js'
 import { AppSidebar } from '../_shared/AppSidebar.js'
 
 export default [
@@ -1304,7 +1303,6 @@ export default [
 ```tsx
 import { ContactShadows, Environment } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
 import { Effects } from '../_shared/effects/Effects.js'
 
 export default phx.frontend.createCustomPhoenixLayoutElement('SceneEnvironment', () => {

package/dist/docs/3d-scene/rendering/basic.mdx

@@ -10,7 +10,7 @@
 
 These rendering components form the foundation for displaying 3D content in any configurator. Whether you're building furniture configurators, product customizers, or other applications that visualize domain entities in 3D space, you'll use these components to make your entities visible in the scene.
 
-Most configurators load 3D models from GLTF/GLB files using `sceneEntityRemoteObject`, then position and transform them with `sceneEntityObjectProperties` for individual objects and `sceneEntityProperties` for entire entity groups. For advanced cases where you need simple geometry or procedural shapes, `sceneEntityCustomObjectComponent` lets you create THREE.js objects directly in code.
+Most configurators load 3D models from GLTF/GLB files using `sceneEntityRemoteObject`, then position and transform them with `sceneEntityObjectProperties` for individual objects and `sceneEntityProperties` for entire entity groups. For advanced cases where you need simple geometry or procedural shapes, `sceneEntityObjectComponent` lets you create THREE.js objects directly in code.
 
 ## Guide
 
@@ -113,7 +113,7 @@ Define helper functions that create and return THREE.js objects. Use `memoEval`
 ```typescript
 import * as THREE from 'three'
 
-import { memoEval, sceneEntityCustomObjectComponent } from '@salsita-ai/sdk/domain'
+import { memoEval, sceneEntityObjectComponent } from '@salsita-ai/sdk/domain'
 
 import { attachComponent, defineFrontend } from '../domain/index.js'
 
@@ -130,7 +130,7 @@ const createCabinObject = () => {
 export default defineFrontend({
   components: [
     attachComponent
-      .withComponent(sceneEntityCustomObjectComponent, 'cabin')
+      .withComponent(sceneEntityObjectComponent, 'cabin')
       .withEntity('Train')
       .attach(memoEval(() => [], createCabinObject)),
   ],
@@ -166,7 +166,7 @@ The complete rendering pattern:
 1. Load models using `sceneEntityRemoteObject` in YAML for artist-created assets (preferred approach)
 2. Position each object instance using `sceneEntityObjectProperties` in YAML, setting static positions and binding dynamic transforms to entity state
 3. Apply entity-level transforms with `sceneEntityProperties` to move or rotate the entire entity as a unit
-4. For advanced cases, create custom objects with `sceneEntityCustomObjectComponent` in frontend code when you need procedural geometry
+4. For advanced cases, create custom objects with `sceneEntityObjectComponent` in frontend code when you need procedural geometry
 
 The Boxes entity demonstrates the standard pattern: remote objects loaded from GLTF files, positioned and animated through `sceneEntityObjectProperties`. The Train entity shows the advanced pattern with custom THREE.js objects.
 
@@ -428,7 +428,7 @@ export type SceneEntityPropertiesComponentState = {
 ```typescript
 /**
  * Configuration for custom THREE.js objects created programmatically.
- * Used with sceneEntityCustomObjectComponent in frontend code.
+ * Used with sceneEntityObjectComponent in frontend code.
  */
 export type SceneEntityObjectComponentState = {
   /**
@@ -758,8 +758,6 @@ import { memoEval, propertyPageComponent, sceneEntityObjectComponent } from '@sa
 import { AngleDimensionSlider, DistanceDimensionSlider, GenericDimensionSlider } from '@salsita-ai/sdk/react'
 import { PropertyContainer } from '@salsita-ai/sdk/ui'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const createCabinObject = () => {
   const geometry = new THREE.BoxGeometry(2, 2.25, 1.5)
   const material = new THREE.MeshStandardMaterial({ color: 'firebrick' })
@@ -910,8 +908,6 @@ export default [
 ### ./src/expressions/boxes.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Boxes: {
     $box1OpenedScaled: s => s.box1Opened / 100,

package/dist/docs/3d-scene/rendering/custom-entity.mdx

@@ -38,8 +38,6 @@ components:
 Create the element using `phx.frontend.createCustomPhoenixEntityElement()`. This registers a React component that renders whenever an entity with the matching `customSceneEntity` component appears in the scene:
 
 ```tsx
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixEntityElement('CustomEntity', () => {
   return (
     <group>
@@ -241,8 +239,6 @@ components:
 ```tsx
 import { Environment, Sky } from '@react-three/drei'
 
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {
   const rootEntity = phx.frontend.useRootEntityState()
   const isWinter = rootEntity?.isWinter ?? false
@@ -296,8 +292,6 @@ import { useFrame } from '@react-three/fiber'
 import { useMemo, useRef } from 'react'
 import * as THREE from 'three'
 
-import { phx } from '../../.phoenix/phx.js'
-
 interface SeasonProps {
   readonly isWinter: boolean
 }

package/dist/docs/3d-scene/rendering/lights/ambient-light.mdx

@@ -317,8 +317,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/directional-light.mdx

@@ -378,8 +378,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/point-light.mdx

@@ -357,8 +357,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/rect-area-light.mdx

@@ -380,8 +380,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/lights/spot-light.mdx

@@ -386,8 +386,6 @@ export default []
 import { Environment } from '@react-three/drei'
 import { useThree } from '@react-three/fiber'
 
-import { phx } from '../../.phoenix/phx.js'
-
 const TONE_MAPPING_EXPOSURE = 0.15
 
 export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {

package/dist/docs/3d-scene/rendering/object-groups.mdx

@@ -279,8 +279,6 @@ components:
 ### ./src/expressions/cabinet.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 export default phx.domain.implementCustomExpressions({
   Cabinet: {
     $doorParent: s => (s.visualizeDoorOpening ? 'door' : null),

package/dist/docs/3d-scene/rendering/objects.mdx

@@ -98,8 +98,6 @@ The `top` material uses dynamic expressions for color and textures, while the `l
 Create expressions that map attribute values to their corresponding object names and material properties:
 
 ```typescript
-import { phx } from '../../.phoenix/phx.js'
-
 const TopObjects = {
   oval: 'OVAAL_OVAL',
   rectangle: 'RECHTHOEK_RECTANGLE',
@@ -326,8 +324,6 @@ components:
 ### ./src/expressions/expressions.ts
 
 ```ts
-import { phx } from '../../.phoenix/phx.js'
-
 const TopOjects = {
   oval: 'OVAAL_OVAL',
   rectangle: 'RECHTHOEK_RECTANGLE',