@telemetryos/sdk 1.10.0 → 1.12.0

package/dist/react/SettingsMediaSelect.d.ts

@@ -0,0 +1,17 @@
+import type { MediaSelection } from '@telemetryos/root-sdk';
+export type { MediaSelection } from '@telemetryos/root-sdk';
+interface SettingsMediaSelectProps {
+    value?: MediaSelection | null;
+    onChange: (selection: MediaSelection | null) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    accept?: string[];
+}
+/**
+ * A media selection component for TelemetryOS Settings views.
+ * Allows users to browse and select media from the platform's media library.
+ *
+ * When clicked, opens a full-screen media picker dialog in the host window
+ * where users can browse folders, view media, upload new files, and select an item.
+ */
+export declare function SettingsMediaSelect({ value, onChange, disabled, placeholder, accept, }: SettingsMediaSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/hooks/store.d.ts

@@ -12,3 +12,5 @@ export declare function createUseDeviceStoreState<S>(key: string, initialState:
 export declare function createUseDeviceStoreState<S = undefined>(key: string, initialState?: undefined): (debounceDelay?: number) => [boolean, S | undefined, Dispatch<SetStateAction<S | undefined>>];
 export declare function createUseSharedStoreState<S>(key: string, initialState: S | (() => S), namespace: string): (debounceDelay?: number) => [boolean, S, Dispatch<SetStateAction<S>>];
 export declare function createUseSharedStoreState<S = undefined>(key: string, initialState: undefined, namespace: string): (debounceDelay?: number) => [boolean, S | undefined, Dispatch<SetStateAction<S | undefined>>];
+export declare function createUseDynamicNamespaceStoreState<S>(key: string, initialState: S | (() => S)): (namespace: string, debounceDelay: number) => [boolean, S, Dispatch<SetStateAction<S>>];
+export declare function createUseDynamicNamespaceStoreState<S = undefined>(key: string, initialState: undefined): (namespace: string, debounceDelay: number) => [boolean, S | undefined, Dispatch<SetStateAction<S | undefined>>];

package/dist/react/index.d.ts

@@ -1,3 +1,4 @@
 export { SettingsBox, SettingsButtonFrame, SettingsCheckboxFrame, SettingsCheckboxLabel, SettingsColorFrame, SettingsContainer, SettingsDivider, SettingsError, SettingsField, SettingsHeading, SettingsHint, SettingsInputFrame, SettingsLabel, SettingsRadioFrame, SettingsRadioLabel, SettingsSelectFrame, SettingsSliderFrame, SettingsSliderRuler, SettingsSwitchFrame, SettingsSwitchLabel, SettingsTextAreaFrame, } from './Settings.js';
-export { useStoreState, createUseStoreState, createUseInstanceStoreState, createUseApplicationStoreState, createUseDeviceStoreState, createUseSharedStoreState, } from './hooks/store.js';
+export { SettingsMediaSelect, type MediaSelection } from './SettingsMediaSelect.js';
+export { useStoreState, createUseStoreState, createUseInstanceStoreState, createUseApplicationStoreState, createUseDeviceStoreState, createUseSharedStoreState, createUseDynamicNamespaceStoreState, } from './hooks/store.js';
 export { useUiScaleToSetRem, useUiAspectRatio, useUiResponsiveFactors } from './hooks/ui-scale.js';

package/dist/react.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),b=require("./index.cjs");var O={exports:{}},w={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),b=require("./index.cjs");var O={exports:{}},R={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var J;function oe(){if(J)return w;J=1;var n=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function s(o,c,f){var g=null;if(f!==void 0&&(g=""+f),c.key!==void 0&&(g=""+c.key),"key"in c){f={};for(var p in c)p!=="key"&&(f[p]=c[p])}else f=c;return c=f.ref,{$$typeof:n,type:o,key:g,ref:c!==void 0?c:null,props:f}}return w.Fragment=t,w.jsx=s,w.jsxs=s,w}var R={};/**
+ */var J;function oe(){if(J)return R;J=1;var n=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function o(i,a,u){var g=null;if(u!==void 0&&(g=""+u),a.key!==void 0&&(g=""+a.key),"key"in a){u={};for(var p in a)p!=="key"&&(u[p]=a[p])}else u=a;return a=u.ref,{$$typeof:n,type:i,key:g,ref:a!==void 0?a:null,props:u}}return R.Fragment=s,R.jsx=o,R.jsxs=o,R}var j={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,12 +14,12 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var q;function se(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ne?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case j:return"Profiler";case h:return"StrictMode";case Q:return"Suspense";case Z:return"SuspenseList";case ee:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case G:return e.displayName||"Context";case N:return(e._context.displayName||"Context")+".Consumer";case X:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case K:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case F:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function t(e){return""+e}function s(e){try{t(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,u=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",u),t(e)}}function o(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===F)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=L.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function g(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function p(e,r){function a(){M||(M=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function C(){var e=n(this.type);return D[e]||(D[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function k(e,r,a,u,A,U){var l=a.ref;return e={$$typeof:T,type:e,key:r,props:a,_owner:u},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:C}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function y(e,r,a,u,A,U){var l=r.children;if(l!==void 0)if(u)if(re(l)){for(u=0;u<l.length;u++)m(l[u]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else m(l);if(Y.call(r,"key")){l=n(e);var v=Object.keys(r).filter(function(te){return te!=="key"});u=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",V[l+u]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var q;function ie(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case N:return"Profiler";case _:return"StrictMode";case Z:return"Suspense";case K:return"SuspenseList";case ne:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case P:return"Portal";case X:return e.displayName||"Context";case C:return(e._context.displayName||"Context")+".Consumer";case Q:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ee:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case F:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function s(e){return""+e}function o(e){try{s(e);var r=!1}catch{r=!0}if(r){r=console;var c=r.error,d=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",d),s(e)}}function i(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===F)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=L.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function g(e){if(M.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function p(e,r){function c(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function k(){var e=n(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function m(e,r,c,d,A,I){var f=c.ref;return e={$$typeof:T,type:e,key:r,props:c,_owner:d},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:k}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,r,c,d,A,I){var f=r.children;if(f!==void 0)if(d)if(re(f)){for(d=0;d<f.length;d++)h(f[d]);Object.freeze&&Object.freeze(f)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else h(f);if(M.call(r,"key")){f=n(e);var y=Object.keys(r).filter(function(se){return se!=="key"});d=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",V[f+d]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,u,l,v,l),V[l+u]=!0)}if(l=null,a!==void 0&&(s(a),l=""+a),g(r)&&(s(r.key),l=""+r.key),"key"in r){a={};for(var I in r)I!=="key"&&(a[I]=r[I])}else a=r;return l&&p(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),k(e,l,a,c(),A,U)}function m(e){_(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===F&&(e._payload.status==="fulfilled"?_(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function _(e){return typeof e=="object"&&e!==null&&e.$$typeof===T}var x=d,T=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),h=Symbol.for("react.strict_mode"),j=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),G=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),Q=Symbol.for("react.suspense"),Z=Symbol.for("react.suspense_list"),K=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),ee=Symbol.for("react.activity"),ne=Symbol.for("react.client.reference"),L=x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,re=Array.isArray,z=console.createTask?console.createTask:function(){return null};x={react_stack_bottom_frame:function(e){return e()}};var M,D={},$=x.react_stack_bottom_frame.bind(x,f)(),W=z(o(f)),V={};R.Fragment=E,R.jsx=function(e,r,a){var u=1e4>L.recentlyCreatedOwnerStacks++;return y(e,r,a,!1,u?Error("react-stack-top-frame"):$,u?z(o(e)):W)},R.jsxs=function(e,r,a){var u=1e4>L.recentlyCreatedOwnerStacks++;return y(e,r,a,!0,u?Error("react-stack-top-frame"):$,u?z(o(e)):W)}})()),R}var H;function ae(){return H||(H=1,process.env.NODE_ENV==="production"?O.exports=oe():O.exports=se()),O.exports}var i=ae();const ie=`:root {
+  <%s key={someKey} {...props} />`,d,f,y,f),V[f+d]=!0)}if(f=null,c!==void 0&&(o(c),f=""+c),g(r)&&(o(r.key),f=""+r.key),"key"in r){c={};for(var z in r)z!=="key"&&(c[z]=r[z])}else c=r;return f&&p(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,f,c,a(),A,I)}function h(e){v(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===F&&(e._payload.status==="fulfilled"?v(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function v(e){return typeof e=="object"&&e!==null&&e.$$typeof===T}var S=l,T=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),C=Symbol.for("react.consumer"),X=Symbol.for("react.context"),Q=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),K=Symbol.for("react.suspense_list"),ee=Symbol.for("react.memo"),F=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),L=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,re=Array.isArray,U=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(e){return e()}};var D,Y={},$=S.react_stack_bottom_frame.bind(S,u)(),W=U(i(u)),V={};j.Fragment=E,j.jsx=function(e,r,c){var d=1e4>L.recentlyCreatedOwnerStacks++;return w(e,r,c,!1,d?Error("react-stack-top-frame"):$,d?U(i(e)):W)},j.jsxs=function(e,r,c){var d=1e4>L.recentlyCreatedOwnerStacks++;return w(e,r,c,!0,d?Error("react-stack-top-frame"):$,d?U(i(e)):W)}})()),j}var B;function ae(){return B||(B=1,process.env.NODE_ENV==="production"?O.exports=oe():O.exports=ie()),O.exports}var t=ae();const ce=`:root {
   --background: 0 0% 100%;
   --foreground: 222.2 84% 4.9%;
 
@@ -473,4 +473,96 @@ React keys must be passed directly to JSX without using spread:
   border-color: hsl(var(--primary));
   color: hsl(var(--primary-foreground));
 }
-`;let B=!1;function ce(){if(B||typeof document>"u")return;const n=document.createElement("style");n.setAttribute("data-telemetryos-sdk",""),n.textContent=ie,document.head.appendChild(n),B=!0}ce();function ue({children:n}){const t=()=>{const s=window.matchMedia("(prefers-color-scheme: dark)"),o=g=>{let p;g==="system"?p=s.matches:p=g!=="light",p?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")},c=b.environment().subscribeColorScheme(o);c.catch(console.error);const f=()=>{b.environment().getColorScheme().then(o).catch(console.error)};return s.addEventListener("change",f),()=>{c.then(()=>b.environment().unsubscribeColorScheme(o)).catch(console.error),s.removeEventListener("change",f)}};return d.useEffect(t,[]),i.jsx("div",{className:"settings__container",children:n})}function le({children:n}){return i.jsx("div",{className:"settings__box",children:n})}function de({children:n}){return i.jsx("div",{className:"settings__heading",children:n})}function fe(){return i.jsx("hr",{className:"settings__divider"})}function pe({children:n}){return i.jsx("label",{className:"settings__field",children:n})}function ge({children:n}){return i.jsx("div",{className:"settings__label",children:n})}function me({children:n}){return i.jsx("div",{className:"settings__hint",children:n})}function he({children:n}){return i.jsx("div",{className:"settings__error",children:n})}function be({children:n}){return i.jsx("div",{className:"settings__input-frame",children:n})}function _e({children:n}){return i.jsx("div",{className:"settings__textarea-frame",children:n})}function xe({children:n}){return i.jsx("div",{className:"settings__select-frame",children:n})}function ve({children:n}){return i.jsx("div",{className:"settings__slider-frame",children:n})}function Se({children:n}){return i.jsx("div",{className:"settings__slider-ruler",children:n})}function ke({children:n}){return i.jsx("div",{className:"settings__color-frame",children:n})}function ye({children:n}){return i.jsx("label",{className:"settings__switch-frame",children:n})}function Ee({children:n}){return i.jsx("span",{className:"settings__switch-label",children:n})}function we({children:n}){return i.jsx("label",{className:"settings__checkbox-frame",children:n})}function Re({children:n}){return i.jsx("span",{className:"settings__checkbox-label",children:n})}function Te({children:n}){return i.jsx("label",{className:"settings__radio-frame",children:n})}function je({children:n}){return i.jsx("span",{className:"settings__radio-label",children:n})}function Ne({children:n}){return i.jsx("div",{className:"settings__button-frame",children:n})}function S(n,t,s,o=0){var c;const[f,g]=d.useState(!0),p=d.useRef(!0),[C]=d.useState(s),[k,y]=d.useState(void 0),[m,_]=d.useState(void 0),x=d.useCallback(h=>{p.current?console.error("Cannot set store value while loading. Destructure and check the first element of the returned tuple."):_(h)},[]),T=()=>{g(!0),p.current=!0,y(void 0),_(void 0);const h=j=>{y(N=>JSON.stringify(N)===JSON.stringify(j)?N:j),g(!1),p.current=!1};return n.subscribe(t,h).catch(console.error),()=>{n.unsubscribe(t,h).catch(console.error)}};d.useEffect(T,[n,t]);const P=()=>{if(!p.current&&typeof m<"u"){const h=setTimeout(()=>{n.set(t,m)},o);return()=>clearTimeout(h)}};d.useEffect(P,[m,n,t,o]);const E=()=>{if(JSON.stringify(m)===JSON.stringify(k)){const h=setTimeout(()=>{_(void 0)},500);return()=>clearTimeout(h)}};return d.useEffect(E,[m,k]),[f,(c=m??k)!==null&&c!==void 0?c:C,x]}function Ae(n,t){return(s,o=0)=>S(s,n,t,o)}function Oe(n,t){return(s=0)=>{const o=d.useMemo(()=>b.store().instance,[]);return S(o,n,t,s)}}function Ce(n,t){return(s=0)=>{const o=d.useMemo(()=>b.store().application,[]);return S(o,n,t,s)}}function Pe(n,t){return(s=0)=>{const o=d.useMemo(()=>b.store().device,[]);return S(o,n,t,s)}}function Fe(n,t,s){return(o=0)=>{const c=d.useMemo(()=>b.store().shared(s),[]);return S(c,n,t,o)}}function Le(n){const t=()=>{document.documentElement.style.fontSize=`calc(1vmax * ${n})`};d.useEffect(t,[n])}function ze(){const[n,t]=d.useState(()=>window.innerWidth/window.innerHeight),s=()=>{const o=()=>{t(window.innerWidth/window.innerHeight)};return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)};return d.useEffect(s,[]),n}function Ue(n,t){return{uiWidthFactor:Math.min(t,1)/n,uiHeightFactor:Math.max(t,1)/n}}exports.SettingsBox=le;exports.SettingsButtonFrame=Ne;exports.SettingsCheckboxFrame=we;exports.SettingsCheckboxLabel=Re;exports.SettingsColorFrame=ke;exports.SettingsContainer=ue;exports.SettingsDivider=fe;exports.SettingsError=he;exports.SettingsField=pe;exports.SettingsHeading=de;exports.SettingsHint=me;exports.SettingsInputFrame=be;exports.SettingsLabel=ge;exports.SettingsRadioFrame=Te;exports.SettingsRadioLabel=je;exports.SettingsSelectFrame=xe;exports.SettingsSliderFrame=ve;exports.SettingsSliderRuler=Se;exports.SettingsSwitchFrame=ye;exports.SettingsSwitchLabel=Ee;exports.SettingsTextAreaFrame=_e;exports.createUseApplicationStoreState=Ce;exports.createUseDeviceStoreState=Pe;exports.createUseInstanceStoreState=Oe;exports.createUseSharedStoreState=Fe;exports.createUseStoreState=Ae;exports.useStoreState=S;exports.useUiAspectRatio=ze;exports.useUiResponsiveFactors=Ue;exports.useUiScaleToSetRem=Le;
+
+/* =============================================================================
+   Media Select
+   ============================================================================= */
+
+.settings__media-select {
+  position: relative;
+  display: inline-block;
+}
+
+.settings__media-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 120px;
+  padding: 0;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.settings__media-select-trigger:hover {
+  border-color: hsl(var(--primary));
+}
+
+.settings__media-select-trigger:focus {
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: 2px;
+}
+
+.settings__media-select-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.settings__media-select-trigger:disabled:hover {
+  border-color: hsl(var(--border));
+}
+
+.settings__media-select-thumbnail {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.settings__media-select-thumbnail--empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+.settings__media-select-thumbnail--empty svg {
+  width: 32px;
+  height: 32px;
+}
+
+.settings__media-select-clear {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: hsl(var(--destructive));
+  border: 2px solid hsl(var(--background));
+  border-radius: 50%;
+  cursor: pointer;
+  color: hsl(var(--destructive-foreground));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease;
+}
+
+.settings__media-select-clear:hover {
+  transform: scale(1.1);
+}
+
+.settings__media-select-clear svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Note: Modal styles are defined in Studio-UI where the picker modal is rendered */
+`;let H=!1;function G(){if(H||typeof document>"u")return;const n=document.createElement("style");n.setAttribute("data-telemetryos-sdk",""),n.textContent=ce,document.head.appendChild(n),H=!0}G();function le({children:n}){const s=()=>{const o=window.matchMedia("(prefers-color-scheme: dark)"),i=g=>{let p;g==="system"?p=o.matches:p=g!=="light",p?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")},a=b.environment().subscribeColorScheme(i);a.catch(console.error);const u=()=>{b.environment().getColorScheme().then(i).catch(console.error)};return o.addEventListener("change",u),()=>{a.then(()=>b.environment().unsubscribeColorScheme(i)).catch(console.error),o.removeEventListener("change",u)}};return l.useEffect(s,[]),t.jsx("div",{className:"settings__container",children:n})}function ue({children:n}){return t.jsx("div",{className:"settings__box",children:n})}function de({children:n}){return t.jsx("div",{className:"settings__heading",children:n})}function fe(){return t.jsx("hr",{className:"settings__divider"})}function pe({children:n}){return t.jsx("label",{className:"settings__field",children:n})}function ge({children:n}){return t.jsx("div",{className:"settings__label",children:n})}function me({children:n}){return t.jsx("div",{className:"settings__hint",children:n})}function he({children:n}){return t.jsx("div",{className:"settings__error",children:n})}function _e({children:n}){return t.jsx("div",{className:"settings__input-frame",children:n})}function be({children:n}){return t.jsx("div",{className:"settings__textarea-frame",children:n})}function xe({children:n}){return t.jsx("div",{className:"settings__select-frame",children:n})}function ve({children:n}){return t.jsx("div",{className:"settings__slider-frame",children:n})}function Se({children:n}){return t.jsx("div",{className:"settings__slider-ruler",children:n})}function ye({children:n}){return t.jsx("div",{className:"settings__color-frame",children:n})}function ke({children:n}){return t.jsx("label",{className:"settings__switch-frame",children:n})}function we({children:n}){return t.jsx("span",{className:"settings__switch-label",children:n})}function Ee({children:n}){return t.jsx("label",{className:"settings__checkbox-frame",children:n})}function Re({children:n}){return t.jsx("span",{className:"settings__checkbox-label",children:n})}function je({children:n}){return t.jsx("label",{className:"settings__radio-frame",children:n})}function Te({children:n}){return t.jsx("span",{className:"settings__radio-label",children:n})}function Ne({children:n}){return t.jsx("div",{className:"settings__button-frame",children:n})}G();function Ce({value:n,onChange:s,disabled:o=!1,placeholder:i="Select media...",accept:a}){const[u,g]=l.useState(!1),p=async()=>{if(!(o||u)){g(!0);try{const m=await b.media().openPicker({accept:a,currentValue:n??void 0});m&&s(m)}catch(m){console.error("Failed to open media picker:",m)}finally{g(!1)}}},k=m=>{m.stopPropagation(),s(null)};return t.jsxs("div",{className:"settings__media-select",children:[t.jsx("button",{type:"button",className:`settings__media-select-trigger ${n?"settings__media-select-trigger--has-value":""}`,onClick:p,disabled:o||u,title:n?`${n.name} - Click to change`:i,children:n?t.jsx("img",{src:n.thumbnailUrl,alt:n.name,className:"settings__media-select-thumbnail"}):t.jsx("div",{className:"settings__media-select-thumbnail settings__media-select-thumbnail--empty",children:u?t.jsx(Pe,{}):t.jsx(Oe,{})})}),n&&!o&&t.jsx("button",{type:"button",className:"settings__media-select-clear",onClick:k,title:"Remove image",children:t.jsx(Ae,{})})]})}function Ae(){return t.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}function Oe(){return t.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t.jsx("rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",ry:"2"}),t.jsx("circle",{cx:"8.5",cy:"8.5",r:"1.5"}),t.jsx("polyline",{points:"21 15 16 10 5 21"})]})}function Pe(){return t.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[t.jsx("circle",{cx:"12",cy:"12",r:"10",opacity:"0.25"}),t.jsx("path",{d:"M12 2a10 10 0 0 1 10 10",strokeLinecap:"round",children:t.jsx("animateTransform",{attributeName:"transform",type:"rotate",from:"0 12 12",to:"360 12 12",dur:"1s",repeatCount:"indefinite"})})]})}function x(n,s,o,i=0){var a;const[u,g]=l.useState(!0),p=l.useRef(!0),[k]=l.useState(o),[m,w]=l.useState(void 0),[h,v]=l.useState(void 0),S=l.useCallback(_=>{p.current?console.error("Cannot set store value while loading. Destructure and check the first element of the returned tuple."):v(_)},[]),T=()=>{g(!0),p.current=!0,w(void 0),v(void 0);const _=N=>{w(C=>JSON.stringify(C)===JSON.stringify(N)?C:N),g(!1),p.current=!1};return n.subscribe(s,_).catch(console.error),()=>{n.unsubscribe(s,_).catch(console.error)}};l.useEffect(T,[n,s]);const P=()=>{if(!p.current&&typeof h<"u"){const _=setTimeout(()=>{n.set(s,h)},i);return()=>clearTimeout(_)}};l.useEffect(P,[h,n,s,i]);const E=()=>{if(JSON.stringify(h)===JSON.stringify(m)){const _=setTimeout(()=>{v(void 0)},500);return()=>clearTimeout(_)}};return l.useEffect(E,[h,m]),[u,(a=h??m)!==null&&a!==void 0?a:k,S]}function Fe(n,s){return(o,i=0)=>x(o,n,s,i)}function Le(n,s){return(o=0)=>{const i=l.useMemo(()=>b.store().instance,[]);return x(i,n,s,o)}}function Ue(n,s){return(o=0)=>{const i=l.useMemo(()=>b.store().application,[]);return x(i,n,s,o)}}function Ie(n,s){return(o=0)=>{const i=l.useMemo(()=>b.store().device,[]);return x(i,n,s,o)}}function ze(n,s,o){return(i=0)=>{const a=l.useMemo(()=>b.store().shared(o),[o]);return x(a,n,s,i)}}function Me(n,s){return(o,i=0)=>{const a=l.useMemo(()=>b.store().shared(o),[o]);return x(a,n,s,i)}}function De(n){const s=()=>{document.documentElement.style.fontSize=`calc(1vmax * ${n})`};l.useEffect(s,[n])}function Ye(){const[n,s]=l.useState(()=>window.innerWidth/window.innerHeight),o=()=>{const i=()=>{s(window.innerWidth/window.innerHeight)};return window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)};return l.useEffect(o,[]),n}function $e(n,s){return{uiWidthFactor:Math.min(s,1)/n,uiHeightFactor:Math.max(s,1)/n}}exports.SettingsBox=ue;exports.SettingsButtonFrame=Ne;exports.SettingsCheckboxFrame=Ee;exports.SettingsCheckboxLabel=Re;exports.SettingsColorFrame=ye;exports.SettingsContainer=le;exports.SettingsDivider=fe;exports.SettingsError=he;exports.SettingsField=pe;exports.SettingsHeading=de;exports.SettingsHint=me;exports.SettingsInputFrame=_e;exports.SettingsLabel=ge;exports.SettingsMediaSelect=Ce;exports.SettingsRadioFrame=je;exports.SettingsRadioLabel=Te;exports.SettingsSelectFrame=xe;exports.SettingsSliderFrame=ve;exports.SettingsSliderRuler=Se;exports.SettingsSwitchFrame=ke;exports.SettingsSwitchLabel=we;exports.SettingsTextAreaFrame=be;exports.createUseApplicationStoreState=Ue;exports.createUseDeviceStoreState=Ie;exports.createUseDynamicNamespaceStoreState=Me;exports.createUseInstanceStoreState=Le;exports.createUseSharedStoreState=ze;exports.createUseStoreState=Fe;exports.useStoreState=x;exports.useUiAspectRatio=Ye;exports.useUiResponsiveFactors=$e;exports.useUiScaleToSetRem=De;