@salsita-ai/sdk 0.50.0-develop.d815756961 → 0.50.0-develop.d87b28256e

package/dist/ui-sdk/responsive-application/ResponsiveApplicationProvider.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{GlobalStyles as i,styled as r}from"@mui/material";import{useObservableEagerState as n}from"observable-hooks";import{useEffect as a,useRef as s}from"react";import{useResizeObserver as l}from"usehooks-ts";import{attrf as d,commonStyles as p}from"../common/index.js";import{ResponsiveContext as m,useResponsiveInfo as c}from"./ResponsiveProvider.js";let v="animating",f="expanded",y="hidden",u=e(i,{styles:({palette:e,typography:o})=>({":host":{all:"initial",interpolateSize:"allow-keywords",blockSize:"100%",boxSizing:"border-box",display:"block",overscrollBehavior:"contain",":where(*, *::after, *::before)":{boxSizing:"border-box"},backgroundColor:e.background.default,color:e.text.primary,fontFamily:o.fontFamily,...o.body1,MozOsxFontSmoothing:"grayscale",WebkitFontSmoothing:"antialiased",WebkitTextSizeAdjust:"100%"}})}),x=r("div")(()=>({...p.transition.fadeIn,blockSize:"100%",containerName:"app",containerType:"inline-size",contentVisibility:"auto",display:"grid",overflow:"auto",position:"relative",[`&[data-responsive-app*="${v}"]`]:{overflow:"clip"},[`&[data-responsive-app*="${f}"]`]:{inset:0,position:"fixed",zIndex:"var(--phx-app-index)"},[`&[data-responsive-app*="${y}"]`]:{contentVisibility:"hidden"}})),b=r("div")(()=>({position:"relative"}));export const ResponsiveApplicationProvider=i=>{let{children:r,containerZIndex:p}=i,h=s(null),w=c(h);l({ref:h,onResize:()=>{w.update()}});let{isAnimating:g,isExpanded:k,isHidden:z}=w,{height:S}=n(w.viewport$);return a(()=>{if(!k)return;let e=document.documentElement.style.overflow,o=document.body.style.overflow;return document.documentElement.style.setProperty("overflow","hidden"),document.body.style.setProperty("overflow","hidden"),()=>{document.documentElement.style.setProperty("overflow",e),document.body.style.setProperty("overflow",o)}},[k]),o(t,{children:[u,e(m.Provider,{value:w,children:e(x,{ref:h,"data-responsive-app":d({state:{[`${v}`]:g,[`${f}`]:k,[`${y}`]:z}}),inert:z?"":void 0,sx:{"--phx-app-index":p},children:e(b,{sx:{"--phx-app-height":S+"px"},children:r})})})]})};
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import{GlobalStyles as i,styled as r}from"@mui/material";import{useObservableEagerState as n}from"observable-hooks";import{useEffect as a,useRef as s}from"react";import{useResizeObserver as l}from"usehooks-ts";import{attrf as d,commonStyles as p}from"../common/index.js";import{ResponsiveContext as m,useResponsiveInfo as c}from"./ResponsiveProvider.js";import{useStoreResponsiveInfo as f}from"./use-store-responsive-info.js";let u="animating",v="expanded",x="hidden",y=e(i,{styles:({palette:e,typography:o})=>({":host":{all:"initial",interpolateSize:"allow-keywords",blockSize:"100%",boxSizing:"border-box",display:"block",overscrollBehavior:"contain",":where(*, *::after, *::before)":{boxSizing:"border-box"},backgroundColor:e.background.default,color:e.text.primary,fontFamily:o.fontFamily,...o.body1,MozOsxFontSmoothing:"grayscale",WebkitFontSmoothing:"antialiased",WebkitTextSizeAdjust:"100%"}})}),b=r("div")(()=>({...p.transition.fadeIn,blockSize:"100%",containerName:"app",containerType:"inline-size",contentVisibility:"auto",display:"grid",overflow:"auto",position:"relative",[`&[data-responsive-app*="${u}"]`]:{overflow:"clip"},[`&[data-responsive-app*="${v}"]`]:{inset:0,position:"fixed",zIndex:"var(--phx-app-index)"},[`&[data-responsive-app*="${x}"]`]:{contentVisibility:"hidden"}})),h=r("div")(()=>({position:"relative"})),w=i=>{let{children:r,containerRef:s,containerZIndex:p,info:c}=i;l({ref:s,onResize:()=>{c.update()}});let{isAnimating:f,isExpanded:w,isHidden:g}=c,{height:k}=n(c.viewport$);return a(()=>{if(!w)return;let e=document.documentElement.style.overflow,o=document.body.style.overflow;return document.documentElement.style.setProperty("overflow","hidden"),document.body.style.setProperty("overflow","hidden"),()=>{document.documentElement.style.setProperty("overflow",e),document.body.style.setProperty("overflow",o)}},[w]),o(t,{children:[y,e(m.Provider,{value:c,children:e(b,{ref:s,"data-responsive-app":d({state:{[`${u}`]:f,[`${v}`]:w,[`${x}`]:g}}),inert:g?"":void 0,sx:{"--phx-app-index":p},children:e(h,{sx:{"--phx-app-height":k+"px"},children:r})})})]})},g=o=>{let t=s(null),i=c(t);return e(w,{...o,containerRef:t,info:i})},k=o=>{let{store:t,...i}=o,r=s(null),n=f(r,t);return e(w,{...i,containerRef:r,info:n})};export const ResponsiveApplicationProvider=o=>{let{children:t,containerZIndex:i,store:r}=o;return r?e(k,{containerZIndex:i,store:r,children:t}):e(g,{containerZIndex:i,children:t})};

package/dist/ui-sdk/responsive-application/index.d.ts

@@ -1,2 +1,3 @@
 export { ResponsiveApplicationProvider, type ResponsiveApplicationProviderProps, } from './ResponsiveApplicationProvider.js';
 export { type CanvasPadding, Responsive, useResponsiveInfo, useResponsive, ResponsiveContext, type ResponsiveInfo, } from './ResponsiveProvider.js';
+export { type ResponsiveStateSnapshot, type ResponsiveStateStore } from './responsive-state-store.js';

package/dist/ui-sdk/responsive-application/responsive-state-store.d.ts

@@ -0,0 +1,57 @@
+import type { BehaviorSubject, Observable } from 'rxjs';
+import type { CanvasPadding } from './ResponsiveProvider.js';
+/**
+ * The responsive state a `ResponsiveStateStore` holds.
+ *
+ * @internal Runtime plumbing behind the `store` prop of `ResponsiveApplicationProvider`, for the
+ * SDK's own configurator.
+ */
+export interface ResponsiveStateSnapshot {
+    readonly isPhone: boolean;
+    readonly isMobile: boolean;
+    readonly isTablet: boolean;
+    readonly isDesktop: boolean;
+    readonly isLandscape: boolean;
+    readonly isPortrait: boolean;
+    readonly canvasPadding: CanvasPadding;
+    readonly isExpanded: boolean;
+    readonly isHidden: boolean;
+    readonly isAnimating: boolean;
+}
+/**
+ * Responsive state owned outside the UI, which `ResponsiveApplicationProvider` measures its root
+ * container into and provides to `useResponsive()`. A mounted Phoenix application passes the
+ * `ResponsiveStateManager` of `@salsita-ai/sdk/react`, so its lifecycle reads the same state
+ * without the UI.
+ *
+ * Declared here by shape rather than imported, because `ui-sdk` depends on no other SDK package.
+ *
+ * @internal Runtime plumbing for the SDK's own configurator; a project mounting
+ * `ResponsiveApplicationProvider` leaves `store` out.
+ */
+export interface ResponsiveStateStore {
+    readonly state$: Observable<ResponsiveStateSnapshot>;
+    readonly viewport$: BehaviorSubject<{
+        width: number;
+        height: number;
+    }>;
+    readonly getState: () => ResponsiveStateSnapshot;
+    readonly setViewport: (viewport: {
+        readonly width: number;
+        readonly height: number;
+        readonly isLandscape: boolean;
+        readonly isPortrait: boolean;
+    }) => void;
+    readonly setBreakpoints: (breakpoints: {
+        readonly sm: number;
+        readonly md: number;
+        readonly lg: number;
+    }) => void;
+    readonly getCanvasPadding: () => CanvasPadding;
+    readonly setCanvasPadding: (padding: CanvasPadding) => void;
+    readonly expand: () => void;
+    readonly collapse: () => void;
+    readonly hide: () => void;
+    readonly show: () => void;
+    readonly setAnimating: (value: boolean) => void;
+}

package/dist/ui-sdk/responsive-application/responsive-state-store.js

@@ -0,0 +1 @@
+export{};

package/dist/ui-sdk/responsive-application/use-store-responsive-info.d.ts

@@ -0,0 +1,7 @@
+import type { useResponsiveInfo } from './ResponsiveProvider.js';
+import type { ResponsiveStateStore } from './responsive-state-store.js';
+/**
+ * `useResponsiveInfo` over a store owned outside the UI: measures the container into the store,
+ * pushes the theme's breakpoints into it, and reads every value back from it.
+ */
+export declare const useStoreResponsiveInfo: (elementRef: React.MutableRefObject<HTMLElement | null>, store: ResponsiveStateStore) => ReturnType<typeof useResponsiveInfo>;

package/dist/ui-sdk/responsive-application/use-store-responsive-info.js

@@ -0,0 +1 @@
+import{useTheme as e}from"@mui/material";import{useCallback as t,useLayoutEffect as i,useMemo as a,useSyncExternalStore as s}from"react";import{isMobileOnly as n}from"react-device-detect";import{useResizeObserver as o}from"usehooks-ts";export const useStoreResponsiveInfo=(r,c)=>{let{sm:d,md:p,lg:l}=e().breakpoints.values,u=s(t(e=>{let t=c.state$.subscribe(e);return()=>{t.unsubscribe()}},[c]),c.getState);i(()=>{c.setBreakpoints({sm:d,md:p,lg:l})},[c,d,p,l]);let m=t(e=>{let{width:t,height:i}=e.getBoundingClientRect();c.setViewport({width:t,height:i,isLandscape:window.matchMedia("(orientation: landscape)").matches,isPortrait:window.matchMedia("(orientation: portrait)").matches})},[c]),b=t(e=>{c.setCanvasPadding("function"==typeof e?e(c.getCanvasPadding()):e)},[c]),g=t(()=>{r.current&&m(r.current)},[r,m]);return o({ref:r,onResize:()=>{null!=r.current&&m(r.current)}}),i(()=>{null!=r.current&&m(r.current)},[r,m]),a(()=>({...u,expand:c.expand,collapse:c.collapse,hide:c.hide,show:c.show,isMobileAndMobileLandscape:u.isMobile||u.isLandscape&&u.isTablet&&n,isDesktopExceptMobileLandscape:u.isDesktop&&!(u.isLandscape&&u.isTablet&&n),viewport$:c.viewport$,getCanvasPadding:c.getCanvasPadding,setCanvasPadding:b,update:g,setAnimating:c.setAnimating}),[u,c,b,g])};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salsita-ai/sdk",
-  "version": "0.50.0-develop.d815756961",
+  "version": "0.50.0-develop.d87b28256e",
   "description": "TypeScript SDK and CLI for building, running, and deploying Phoenix configurator applications.",
   "keywords": [
     "salsita",
@@ -287,7 +287,7 @@
     "three-stdlib": "2.36.1",
     "troika-three-text": "0.47.2",
     "ts-pattern": "5.9.0",
-    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "typescript": "6.0.3",
     "use-font-face-observer": "1.2.2",
     "usehooks-ts": "3.1.0",
     "uuid": "14.0.0",
@@ -298,8 +298,8 @@
     "yaml": "2.9.0",
     "yargs": "17.7.2",
     "zod": "3.25.76",
-    "@salsita-ai/contracts": "0.50.0-develop.d815756961",
-    "@salsita-ai/common": "0.50.0-develop.d815756961"
+    "@salsita-ai/common": "0.50.0-develop.d87b28256e",
+    "@salsita-ai/contracts": "0.50.0-develop.d87b28256e"
   },
   "devDependencies": {
     "@clerk/clerk-react": "5.61.8",
@@ -370,7 +370,7 @@
     "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@types/three": "^0.160.0",
-    "postprocessing": "^6.36.3",
+    "postprocessing": "~6.36.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.2",
@@ -406,6 +406,7 @@
     "prettify:fix": "prettier --write .",
     "verify:fix": "pnpm build && pnpm run ts:check && pnpm docs:verify && pnpm lint:fix && pnpm prettify:fix && pnpm test",
     "test": "vitest run",
-    "ts:check": "NODE_OPTIONS=\"--max-old-space-size=8192\" tsc --project ./tsconfig.build.json --emitDeclarationOnly --noEmit --checkers 1"
+    "ts:check": "NODE_OPTIONS=\"--max-old-space-size=8192\" tsc --project ./tsconfig.build.json --emitDeclarationOnly --noEmit --checkers 1 && pnpm ts:check:tests",
+    "ts:check:tests": "NODE_OPTIONS=\"--max-old-space-size=8192\" tsc --project ./tsconfig.test.json --noEmit --checkers 1"
   }
 }