@salsita-ai/sdk 0.50.0-develop.8f92f00b12 → 0.50.0-develop.9239ced550

package/dist/react-sdk/application-runtime/responsive/types.d.ts

@@ -0,0 +1,104 @@
+/**
+ * The part of the canvas, in pixels from each edge, that overlay UI covers. The camera frames the
+ * scene inside what is left, so the scene stays visible beside a sidebar or under a preview body.
+ *
+ * @internal Runtime plumbing for the SDK's own UI. A project layout uses `useActiveViewports()`
+ * from `@salsita-ai/sdk/react` and `useSceneSafeArea()` from `@salsita-ai/sdk/configurator`.
+ */
+export interface CanvasPadding {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+}
+/**
+ * The widths, in pixels, that split the application's root container into phone, tablet and
+ * desktop. The theme decides them; the UI library pushes its theme's values in with
+ * `setBreakpoints`.
+ *
+ * @internal Runtime plumbing for the SDK's own UI. A project layout uses `useActiveViewports()`
+ * from `@salsita-ai/sdk/react` and `useSceneSafeArea()` from `@salsita-ai/sdk/configurator`.
+ */
+export interface ResponsiveBreakpoints {
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+}
+/**
+ * One measurement of the application's root container. The orientation comes from the window,
+ * not from the container's aspect ratio.
+ *
+ * @internal Runtime plumbing for the SDK's own UI. A project layout uses `useActiveViewports()`
+ * from `@salsita-ai/sdk/react` and `useSceneSafeArea()` from `@salsita-ai/sdk/configurator`.
+ */
+export interface ResponsiveViewport {
+    readonly width: number;
+    readonly height: number;
+    readonly isLandscape: boolean;
+    readonly isPortrait: boolean;
+}
+/**
+ * The size of the application's root container, rounded up to whole pixels.
+ *
+ * @internal Runtime plumbing for the SDK's own UI. A project layout uses `useActiveViewports()`
+ * from `@salsita-ai/sdk/react` and `useSceneSafeArea()` from `@salsita-ai/sdk/configurator`.
+ */
+export interface ResponsiveViewportSize {
+    readonly width: number;
+    readonly height: number;
+}
+/**
+ * The responsive state of one mounted application: what it measured of its root container, the
+ * breakpoints that classify it, the canvas padding the scene is framed with, and whether the
+ * container is expanded over the host page, hidden, or in a layout animation.
+ *
+ * The configurator's root container writes it while it is mounted and resets it when it unmounts.
+ *
+ * @internal Runtime plumbing for the SDK's own UI. A project layout uses `useActiveViewports()`
+ * from `@salsita-ai/sdk/react` and `useSceneSafeArea()` from `@salsita-ai/sdk/configurator`.
+ */
+export interface ResponsiveApplicationState {
+    /** `null` until the root container is measured for the first time. */
+    readonly viewport: ResponsiveViewport | null;
+    readonly breakpoints: ResponsiveBreakpoints;
+    readonly canvasPadding: CanvasPadding;
+    readonly isExpanded: boolean;
+    readonly isHidden: boolean;
+    readonly isAnimating: boolean;
+}
+/**
+ * The `responsive` slice, one entry per application: an admin that embeds a configurator runs both
+ * in one runtime, and each has its own root container.
+ *
+ * @internal Runtime plumbing for the SDK's own UI. A project layout uses `useActiveViewports()`
+ * from `@salsita-ai/sdk/react` and `useSceneSafeArea()` from `@salsita-ai/sdk/configurator`.
+ */
+export interface ResponsiveRuntimeState {
+    readonly configurator: ResponsiveApplicationState;
+    readonly admin: ResponsiveApplicationState;
+}
+/**
+ * The responsive state the UI and the lifecycle read: the size classes of the root container, the
+ * canvas padding, and whether the container is expanded, hidden or animating.
+ *
+ * Every size class is `false` until the container is measured for the first time.
+ *
+ * @internal Runtime plumbing for the SDK's own UI. A project layout uses `useActiveViewports()`
+ * from `@salsita-ai/sdk/react` and `useSceneSafeArea()` from `@salsita-ai/sdk/configurator`.
+ */
+export interface ResponsiveState {
+    /** `width < sm` */
+    readonly isPhone: boolean;
+    /** `width <= md` */
+    readonly isMobile: boolean;
+    /** `sm < width < lg` */
+    readonly isTablet: boolean;
+    /** `width > md` */
+    readonly isDesktop: boolean;
+    readonly isLandscape: boolean;
+    readonly isPortrait: boolean;
+    readonly canvasPadding: CanvasPadding;
+    readonly isExpanded: boolean;
+    readonly isHidden: boolean;
+    readonly isAnimating: boolean;
+}

package/dist/react-sdk/application-runtime/routing/routing-service.d.ts

@@ -17,11 +17,43 @@ interface RoutingServiceContext {
 }
 export declare class RoutingService {
     private readonly context;
-    private onGoToIndex;
-    private onNavigated;
+    private readonly onGoToIndexRegistrations;
+    private readonly onNavigatedRegistrations;
+    private unregisterSetOnGoToIndex;
+    private unregisterSetOnNavigated;
     constructor(context: RoutingServiceContext);
+    /**
+     * Registers the handler `goToIndex` calls instead of navigating; the handler navigates by calling
+     * `next`. The most recent registration is the active one. The returned function removes only this
+     * registration, so the one registered before it becomes active again.
+     * @internal Plumbing for `ConfiguratorRoutingProvider`; projects intercept `goToIndex` with
+     * `createOnGoToIndexHandler`.
+     */
+    registerOnGoToIndex: (handler: OnGoToIndexHandler) => (() => void);
+    /**
+     * Registers the callback told about each navigation `goToIndex` and `goToConfigurationDetail`
+     * make. The most recent registration is the active one, and it replaces the SDK's own reporting
+     * to the host (the `route` property, the configuration id in the URL and the `navigated` event)
+     * rather than listening beside it. The returned function removes only this registration, so the
+     * one registered before it becomes active again.
+     * @internal Plumbing for `ConfiguratorRoutingProvider`, which does that reporting.
+     */
+    registerOnNavigated: (handler: OnNavigatedHandler) => (() => void);
+    /**
+     * Replaces the handler this method registered before, on top of the other registrations; `null`
+     * removes it. Registrations made with `registerOnGoToIndex` stay.
+     * @deprecated Intercept `goToIndex` with a handler made by `createOnGoToIndexHandler` instead. This
+     * API will be removed in a future version.
+     */
     setOnGoToIndex: (handler: OnGoToIndexHandler | null) => void;
+    /**
+     * Replaces the callback this method registered before, on top of the other registrations; `null`
+     * removes it. Registrations made with `registerOnNavigated` stay.
+     * @deprecated Listen to the `navigated` event of the web component instead; a callback set here
+     * replaces the SDK's own reporting to the host. This API will be removed in a future version.
+     */
     setOnNavigated: (handler: OnNavigatedHandler | null) => void;
+    private notifyNavigated;
     routeTo: (routingState: RoutingState) => void;
     goToIndex: () => void;
     goToConfigurationDetail: (configurationId: string, accessToken?: string) => void;

package/dist/react-sdk/application-runtime/routing/routing-service.js

@@ -1 +1 @@
-import{InvalidAccessKeyError as t}from"#package/client";import{AnalyticsEventFactory as o,decodeAccessInfo as e}from"#package/domain";import{getAccessInfo as n,getAccessTokenFromLocalStorage as i,putAccessTokenToLocalStorage as s,removeAccessTokenFromLocalStorage as a}from"./access-service.js";import{ApplicationRoutes as c}from"./types.js";export class RoutingService{context;onGoToIndex=null;onNavigated=null;constructor(t){this.context=t}setOnGoToIndex=t=>{this.onGoToIndex=t};setOnNavigated=t=>{this.onNavigated=t};routeTo=t=>{var o;if(o=this.context.getRoutingState(),o.route===c.Index||t.route===c.Index?o.route===t.route:o.configurationId===t.configurationId&&o.accessToken===t.accessToken)return;if(this.context.loadedDataActions.resetConfiguratorLoad(),t.route===c.Index){this.context.accessActions.setConfiguratorAccessInfo(null),this.context.actions.setRoutingState(t);return}let e=n(t.configurationId,t.accessToken);this.context.accessActions.setConfiguratorAccessInfo(e),this.context.actions.setRoutingState(t),t.accessToken&&s(t.configurationId,t.accessToken)};goToIndex=()=>{let t=()=>{this.context.getAnalytics().push(o.NavigationEvent({navigationState:"productPage"})),this.context.getLogger().appendToGlobalContext({navigationState:"productPage"});let t={route:c.Index};this.routeTo(t),this.onNavigated?.(t)};null==this.onGoToIndex?t():this.onGoToIndex({next:t})};goToConfigurationDetail=(t,o)=>{let e={route:c.Configuration,configurationId:t,accessToken:o};this.routeTo(e),this.onNavigated?.(e)};rejectAccessToken=(t,o)=>{i(t)===o&&a(t)};requestAccessToken=(o,n)=>{if(null!==e(n,o))return n;let i=new t;throw this.rejectAccessToken(o,n),this.context.loadedDataActions.failConfiguratorLoad(i),i}}
+import{InvalidAccessKeyError as t}from"#package/client";import{AnalyticsEventFactory as e,decodeAccessInfo as o}from"#package/domain";import{getAccessInfo as n,getAccessTokenFromLocalStorage as i,putAccessTokenToLocalStorage as s,removeAccessTokenFromLocalStorage as a}from"./access-service.js";import{ApplicationRoutes as r}from"./types.js";let c=(t,e)=>{let o={handler:e};return t.push(o),()=>{let e=t.indexOf(o);-1!==e&&t.splice(e,1)}},g=t=>t.at(-1)?.handler??null;export class RoutingService{context;onGoToIndexRegistrations=[];onNavigatedRegistrations=[];unregisterSetOnGoToIndex=null;unregisterSetOnNavigated=null;constructor(t){this.context=t}registerOnGoToIndex=t=>c(this.onGoToIndexRegistrations,t);registerOnNavigated=t=>c(this.onNavigatedRegistrations,t);setOnGoToIndex=t=>{this.unregisterSetOnGoToIndex?.(),this.unregisterSetOnGoToIndex=null===t?null:this.registerOnGoToIndex(t)};setOnNavigated=t=>{this.unregisterSetOnNavigated?.(),this.unregisterSetOnNavigated=null===t?null:this.registerOnNavigated(t)};notifyNavigated=t=>{g(this.onNavigatedRegistrations)?.(t)};routeTo=t=>{var e;if(e=this.context.getRoutingState(),e.route===r.Index||t.route===r.Index?e.route===t.route:e.configurationId===t.configurationId&&e.accessToken===t.accessToken)return;if(this.context.loadedDataActions.resetConfiguratorLoad(),t.route===r.Index){this.context.accessActions.setConfiguratorAccessInfo(null),this.context.actions.setRoutingState(t);return}let o=n(t.configurationId,t.accessToken);this.context.accessActions.setConfiguratorAccessInfo(o),this.context.actions.setRoutingState(t),t.accessToken&&s(t.configurationId,t.accessToken)};goToIndex=()=>{let t=()=>{this.context.getAnalytics().push(e.NavigationEvent({navigationState:"productPage"})),this.context.getLogger().appendToGlobalContext({navigationState:"productPage"});let t={route:r.Index};this.routeTo(t),this.notifyNavigated(t)},o=g(this.onGoToIndexRegistrations);null==o?t():o({next:t})};goToConfigurationDetail=(t,e)=>{let o={route:r.Configuration,configurationId:t,accessToken:e};this.routeTo(o),this.notifyNavigated(o)};rejectAccessToken=(t,e)=>{i(t)===e&&a(t)};requestAccessToken=(e,n)=>{if(null!==o(n,e))return n;let i=new t;throw this.rejectAccessToken(e,n),this.context.loadedDataActions.failConfiguratorLoad(i),i}}