@theaiplatform/miniapp-sdk 0.1.0-dev.5264044 → 0.1.0-dev.e198ea6

package/dist/web.d.ts

@@ -7,6 +7,8 @@ export declare const app: MiniAppPlatformApi;
 
 export declare function applyMiniAppTheme(theme: MiniAppTheme): void;
 
+export declare function applyMiniAppUiScale(scale: MiniAppUiScale): void;
+
 declare type CreateChannelOptions = {
     workspaceId?: string;
     name: string;
@@ -61,6 +63,8 @@ declare type GetChannelTimelineResult = {
 
 export declare function getMiniAppThemeFromSearch(search?: string | URLSearchParams): MiniAppTheme;
 
+export declare function getMiniAppUiScaleFromSearch(search?: string | URLSearchParams): MiniAppUiScale;
+
 /** Returns the public miniapp API proxy, which fails only when it is used. */
 export declare function getPlatform(): MiniAppPlatform;
 
@@ -73,6 +77,13 @@ declare type GetProjectResult = {
     project: MiniAppProject | null;
 };
 
+/** Synchronizes both theme and UI scale from the exact parent miniapp host. */
+export declare function installMiniAppAppearanceSync({ applyTheme, applyUiScale, search, }?: InstallMiniAppAppearanceSyncOptions): () => void;
+
+export declare type InstallMiniAppAppearanceSyncOptions = InstallMiniAppThemeSyncOptions & {
+    applyUiScale?: (scale: MiniAppUiScale) => void;
+};
+
 export declare function installMiniAppThemeSync({ applyTheme, search, }?: InstallMiniAppThemeSyncOptions): () => void;
 
 export declare type InstallMiniAppThemeSyncOptions = {
@@ -115,6 +126,12 @@ declare type ListWorkflowsResult = {
     workflows: MiniAppWorkflow[];
 };
 
+export declare const MINIAPP_UI_SCALE_DEFAULT = 16;
+
+export declare const MINIAPP_UI_SCALE_MAX = 20;
+
+export declare const MINIAPP_UI_SCALE_MIN = 12;
+
 declare type MiniAppAuthApi = {
     getUserProfile(): MiniAppMaybePromise<MiniAppUserProfile | null>;
 };
@@ -258,6 +275,8 @@ export declare type MiniAppPlatformApi = {
         open(options: OpenNavigationOptions): void | Promise<void>;
     };
     chat: MiniAppChatApi;
+    storage: MiniAppStorageApi;
+    presence: MiniAppPresenceApi;
     /** Browser capabilities appear only when the selected target supports them. */
     auth?: MiniAppAuthApi;
     vfs?: MiniAppVfsApi;
@@ -266,6 +285,41 @@ export declare type MiniAppPlatformApi = {
     hasHostHttpRequest?: boolean;
 };
 
+declare type MiniAppPresenceAddress = {
+    namespace: string;
+    room: string;
+};
+
+/**
+ * Ephemeral realtime presence scoped by the host to the active workspace and
+ * exact package. Participant identity is stamped by the host, not the app.
+ */
+declare type MiniAppPresenceApi = {
+    join(options: MiniAppPresenceUpdateOptions): MiniAppMaybePromise<MiniAppPresenceSnapshot>;
+    update(options: MiniAppPresenceUpdateOptions): MiniAppMaybePromise<MiniAppPresenceSnapshot>;
+    leave(options: MiniAppPresenceAddress): MiniAppMaybePromise<void>;
+    subscribe(options: MiniAppPresenceAddress, listener: MiniAppPresenceListener): () => void;
+};
+
+declare type MiniAppPresenceListener = (snapshot: MiniAppPresenceSnapshot) => void;
+
+declare type MiniAppPresenceParticipant = {
+    /** Host-derived, ephemeral participant identity. */
+    participantId: string;
+    displayName: string;
+    state: MiniAppJsonValue;
+    updatedAtMs: number;
+};
+
+declare type MiniAppPresenceSnapshot = MiniAppPresenceAddress & {
+    selfParticipantId: string;
+    participants: MiniAppPresenceParticipant[];
+};
+
+declare type MiniAppPresenceUpdateOptions = MiniAppPresenceAddress & {
+    state: MiniAppJsonValue;
+};
+
 declare type MiniAppProject = {
     id: string;
     name: string;
@@ -365,8 +419,47 @@ declare type MiniAppSpecialistTurnResult = {
     };
 };
 
+/** Caller-selected partition inside the host-derived workspace/package scope. */
+declare type MiniAppStorageAddress = {
+    namespace: string;
+    key: string;
+};
+
+/**
+ * Durable, non-secret JSON storage. The host derives workspace and package
+ * identity from the authenticated frame; apps control only the namespace and
+ * key inside that scope.
+ */
+declare type MiniAppStorageApi = {
+    get(options: MiniAppStorageAddress): MiniAppMaybePromise<MiniAppStorageEntry>;
+    set(options: MiniAppStorageSetOptions): MiniAppMaybePromise<MiniAppStorageMutationResult>;
+    delete(options: MiniAppStorageDeleteOptions): MiniAppMaybePromise<void>;
+};
+
+declare type MiniAppStorageDeleteOptions = MiniAppStorageAddress & {
+    expectedRevision: number;
+};
+
+declare type MiniAppStorageEntry = {
+    value: MiniAppJsonValue | null;
+    /** Null means that no value currently exists at this address. */
+    revision: number | null;
+};
+
+declare type MiniAppStorageMutationResult = {
+    revision: number;
+};
+
+declare type MiniAppStorageSetOptions = MiniAppStorageAddress & {
+    value: MiniAppJsonValue;
+    /** Optimistic concurrency token returned by `get`; null creates a missing key. */
+    expectedRevision: number | null;
+};
+
 export declare type MiniAppTheme = 'light' | 'dark';
 
+export declare type MiniAppUiScale = number;
+
 declare type MiniAppUserProfile = {
     sub: string;
     name?: string | null;

package/dist/web.js

@@ -101,10 +101,14 @@ async function openEditorProject(options) {
     if ("u" < typeof window) throw new Error('The miniapp host is unavailable.');
     await requestHostAction(OPEN_EDITOR_PROJECT_ACTION, options);
 }
+const MINIAPP_UI_SCALE_MIN = 12;
+const MINIAPP_UI_SCALE_MAX = 20;
+const MINIAPP_UI_SCALE_DEFAULT = 16;
 const MINIAPP_THEME_CHANGED_EVENTS = new Set([
     'zephyr-app-theme-changed',
     'tap-miniapp-theme-changed'
 ]);
+const MINIAPP_UI_SCALE_CHANGED_EVENT = 'zephyr-app-ui-scale-changed';
 function isMiniAppTheme(value) {
     return 'light' === value || 'dark' === value;
 }
@@ -123,6 +127,21 @@ function applyMiniAppTheme(theme) {
     document.documentElement.classList.toggle('light', 'light' === theme);
     document.documentElement.style.colorScheme = theme;
 }
+function isMiniAppUiScale(value) {
+    return 'number' == typeof value && Number.isInteger(value) && value >= MINIAPP_UI_SCALE_MIN && value <= MINIAPP_UI_SCALE_MAX;
+}
+function getMiniAppUiScaleFromSearch(search = "u" < typeof window ? '' : window.location.search) {
+    const params = 'string' == typeof search ? new URLSearchParams(search.startsWith('?') ? search.slice(1) : search) : search;
+    const rawScale = params.get('appUiScale');
+    if (null === rawScale || '' === rawScale.trim()) return MINIAPP_UI_SCALE_DEFAULT;
+    const scale = Number(rawScale);
+    return isMiniAppUiScale(scale) ? scale : MINIAPP_UI_SCALE_DEFAULT;
+}
+function applyMiniAppUiScale(scale) {
+    if ("u" < typeof document || !isMiniAppUiScale(scale)) return;
+    document.documentElement.dataset.uiScale = String(scale);
+    document.documentElement.style.setProperty('--app-font-size', `${scale}px`);
+}
 function installMiniAppThemeSync({ applyTheme = applyMiniAppTheme, search } = {}) {
     applyTheme(getMiniAppThemeFromSearch(search));
     if ("u" < typeof window) return ()=>void 0;
@@ -142,5 +161,22 @@ function installMiniAppThemeSync({ applyTheme = applyMiniAppTheme, search } = {}
         window.removeEventListener('message', handleMessage);
     };
 }
+function installMiniAppAppearanceSync({ applyTheme = applyMiniAppTheme, applyUiScale = applyMiniAppUiScale, search } = {}) {
+    applyTheme(getMiniAppThemeFromSearch(search));
+    applyUiScale(getMiniAppUiScaleFromSearch(search));
+    if ("u" < typeof window) return ()=>void 0;
+    const hostOrigin = getHostOrigin();
+    const parent = window.parent;
+    if (!hostOrigin || !parent || parent === window) return ()=>void 0;
+    const handleMessage = (event)=>{
+        if (event.source !== parent || event.origin !== hostOrigin) return;
+        if ('object' != typeof event.data || null === event.data) return;
+        const record = event.data;
+        if ('string' == typeof record.type && MINIAPP_THEME_CHANGED_EVENTS.has(record.type) && isMiniAppTheme(record.appTheme)) return void applyTheme(record.appTheme);
+        if (record.type === MINIAPP_UI_SCALE_CHANGED_EVENT && isMiniAppUiScale(record.appUiScale)) applyUiScale(record.appUiScale);
+    };
+    window.addEventListener('message', handleMessage);
+    return ()=>window.removeEventListener('message', handleMessage);
+}
 export { sdk as app } from "./sdk.js";
-export { applyMiniAppTheme, getMiniAppThemeFromSearch, getPlatform, installMiniAppThemeSync, openEditorProject, platformSatisfiesApp };
+export { MINIAPP_UI_SCALE_DEFAULT, MINIAPP_UI_SCALE_MAX, MINIAPP_UI_SCALE_MIN, applyMiniAppTheme, applyMiniAppUiScale, getMiniAppThemeFromSearch, getMiniAppUiScaleFromSearch, getPlatform, installMiniAppAppearanceSync, installMiniAppThemeSync, openEditorProject, platformSatisfiesApp };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theaiplatform/miniapp-sdk",
-  "version": "0.1.0-dev.5264044",
+  "version": "0.1.0-dev.e198ea6",
   "description": "Public SDK for building portable miniapps that run in The AI Platform.",
   "type": "module",
   "engines": {
@@ -27,6 +27,13 @@
       "types": "./dist/web.d.ts",
       "import": "./dist/web.js"
     },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./ui/styles.css": "./dist/ui/styles.css",
+    "./ui/tailwind.css": "./dist/ui/tailwind.css",
+    "./ui-components.json": "./ui-components.json",
     "./surface": {
       "types": "./dist/surface.d.ts",
       "import": "./dist/surface.js"
@@ -46,13 +53,14 @@
   "files": [
     "dist",
     "config-schema.json",
+    "ui-components.json",
     "README.md",
     "LICENSE.md",
     "THIRD_PARTY_NOTICES.md"
   ],
   "scripts": {
     "prepack": "pnpm run build",
-    "build": "rm -rf dist && rslib build && node scripts/copy-rspack-loaders.mjs",
+    "build": "rm -rf dist && rslib build && node scripts/copy-rspack-loaders.mjs && node scripts/build-ui-styles.mjs",
     "test": "rstest run",
     "typecheck": "tsc --noEmit"
   },
@@ -75,6 +83,13 @@
         "types": "./dist/web.d.ts",
         "import": "./dist/web.js"
       },
+      "./ui": {
+        "types": "./dist/ui.d.ts",
+        "import": "./dist/ui.js"
+      },
+      "./ui/styles.css": "./dist/ui/styles.css",
+      "./ui/tailwind.css": "./dist/ui/tailwind.css",
+      "./ui-components.json": "./ui-components.json",
       "./surface": {
         "types": "./dist/surface.d.ts",
         "import": "./dist/surface.js"
@@ -133,11 +148,37 @@
     "@rsbuild/core": "^2.1.4",
     "@rslib/core": "^0.23.2",
     "@rstest/core": "catalog:rstest",
+    "@tailwindcss/postcss": "^4.3.0",
     "@types/node": "catalog:node",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "catalog:typescript"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "ajv": "^8.20.0",
-    "saxes": "^6.0.0"
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "prism-react-renderer": "^2.4.1",
+    "react-resizable-panels": "^4.11.1",
+    "saxes": "^6.0.0",
+    "tailwind-merge": "^3.6.0"
   }
 }

package/ui-components.json

@@ -0,0 +1,59 @@
+{
+  "version": 1,
+  "package": "@theaiplatform/miniapp-sdk",
+  "import": "@theaiplatform/miniapp-sdk/ui",
+  "styles": {
+    "precompiled": "@theaiplatform/miniapp-sdk/ui/styles.css",
+    "tailwindV4": "@theaiplatform/miniapp-sdk/ui/tailwind.css"
+  },
+  "groups": {
+    "foundations": [
+      "Badge",
+      "Button",
+      "ButtonGroup",
+      "H1",
+      "H2",
+      "H3",
+      "H4",
+      "H5",
+      "H6",
+      "Icon",
+      "Progress",
+      "Separator",
+      "Skeleton"
+    ],
+    "layout": [
+      "Alert",
+      "Card",
+      "Empty",
+      "Item",
+      "ResizablePanelGroup",
+      "ScrollArea",
+      "Table",
+      "Tabs"
+    ],
+    "forms": [
+      "Checkbox",
+      "Field",
+      "Input",
+      "InputGroup",
+      "Label",
+      "NativeSelect",
+      "RadioCard",
+      "RadioGroup",
+      "Select",
+      "Slider",
+      "Textarea",
+      "Toggle",
+      "ToggleGroup"
+    ],
+    "overlays": ["AlertDialog", "Dialog", "Sheet", "Tooltip"],
+    "miniapp": [
+      "CodeBlock",
+      "MiniAppIconButton",
+      "MiniAppStatusBar",
+      "MiniAppToolbar"
+    ],
+    "utilities": ["cn"]
+  }
+}