@panomc/sdk 1.0.0-dev.3 → 1.0.0-dev.4

package/package.json

@@ -1,31 +1,61 @@
 {
   "name": "@panomc/sdk",
-  "version": "1.0.0-dev.3",
+  "version": "1.0.0-dev.4",
   "author": "PanoMC",
   "repository": {
     "url": "https://github.com/PanoMC/sdk"
   },
-  "publishConfig": {
-    "access": "public"
+  "devDependencies": {
+    "svelte": "^5.46.1"
+  },
+  "peerDependencies": {
+    "svelte": "^5.46.1"
   },
-  "type": "module",
-  "files": [
-    "src"
-  ],
-  "svelte": "./src/index.js",
   "exports": {
     ".": {
       "svelte": "./src/index.js",
       "default": "./src/index.js"
+    },
+    "./components": {
+      "svelte": "./src/components/index.js",
+      "default": "./src/components/index.js"
+    },
+    "./internal": {
+      "svelte": "./src/internal/index.js",
+      "default": "./src/internal/index.js"
+    },
+    "./toasts": {
+      "svelte": "./src/toasts/index.js",
+      "default": "./src/toasts/index.js"
+    },
+    "./utils/api": {
+      "svelte": "./src/utils/api.js",
+      "default": "./src/utils/api.js"
+    },
+    "./utils/tooltip": {
+      "svelte": "./src/utils/tooltip.js",
+      "default": "./src/utils/tooltip.js"
+    },
+    "./utils/language": {
+      "svelte": "./src/utils/language.js",
+      "default": "./src/utils/language.js"
+    },
+    "./utils/component": {
+      "svelte": "./src/utils/component.js",
+      "default": "./src/utils/component.js"
+    },
+    "./variables": {
+      "svelte": "./src/variables.js",
+      "default": "./src/variables.js"
     }
   },
-  "scripts": {},
-  "peerDependencies": {
-    "svelte": "^5.46.1"
+  "files": [
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
   },
-  "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "vite": "^7.3.0",
-    "svelte": "^5.46.1"
-  }
+  "scripts": {},
+  "svelte": "./src/index.js",
+  "type": "module"
 }

package/src/api/plugin-context.js

@@ -0,0 +1,55 @@
+const GLOBAL_KEY = "__PANO_PLUGIN_CONTEXTS__";
+
+function getStore() {
+  if (!globalThis[GLOBAL_KEY]) {
+    globalThis[GLOBAL_KEY] = Object.create(null);
+  }
+  return globalThis[GLOBAL_KEY];
+}
+
+export function createPluginContext(pluginId) {
+  if (!pluginId) {
+    throw new Error("[PanoSDK] pluginId is required");
+  }
+
+  const store = getStore();
+
+  if (!store[pluginId]) {
+    store[pluginId] = {
+      context: {},
+      listeners: [],
+    };
+  }
+
+  const pluginStore = store[pluginId];
+
+  return {
+    context: pluginStore.context,
+
+    set(partial) {
+      if (typeof partial !== "object" || partial === null) return;
+
+      Object.assign(pluginStore.context, partial);
+
+      pluginStore.listeners.forEach((fn) => {
+        try {
+          fn(pluginStore.context);
+        } catch (e) {
+          console.error(`[PanoSDK][${pluginId}] listener error`, e);
+        }
+      });
+    },
+
+    subscribe(fn) {
+      pluginStore.listeners.push(fn);
+
+      return () => {
+        pluginStore.listeners = pluginStore.listeners.filter((l) => l !== fn);
+      };
+    },
+
+    destroy() {
+      delete store[pluginId];
+    },
+  };
+}

package/src/api/plugin.js

@@ -0,0 +1,32 @@
+import { createPluginContext } from "./plugin-context.js";
+
+export class PanoPlugin {
+  static isPanoPlugin = true;
+  constructor({ pluginId, scope } = {}) {
+    if (!pluginId) {
+      throw new Error("[PanoPlugin] pluginId is required");
+    }
+
+    // plugin-scoped context
+    this.contextApi = createPluginContext(pluginId, scope);
+    this.context = this.contextApi.context;
+
+    this._unsubscribers = [];
+  }
+
+  /** lifecycle hooks */
+  onLoad(pano) {}
+  onUnload() {}
+
+  /** plugin context helper */
+  setContext(partial) {
+    this.contextApi.set(partial);
+  }
+
+  /** internal cleanup */
+  __destroy() {
+    this._unsubscribers.forEach((fn) => fn());
+    this.contextApi.destroy?.();
+    this.onUnload();
+  }
+}

package/src/components/index.js

@@ -0,0 +1,18 @@
+import { getPanoContext } from "../internal/index.js";
+
+const panoContext = getPanoContext()
+const components = panoContext.context.components
+
+export const PageActions = components.PageActions;
+export const PageLoader = components.PageLoader;
+export const PageNavItem = components.PageNavItem;
+export const PageNav = components.PageNav;
+export const Pagination = components.Pagination;
+export const PageLoading = components.PageLoading;
+export const Toast = components.Toast;
+export const CardFilters = components.CardFilters;
+export const CardFiltersItem = components.CardFiltersItem;
+export const CardHeader = components.CardHeader;
+export const CardMenu = components.CardMenu;
+export const CardMenuItem = components.CardMenuItem;
+export const Date = components.Date;

package/src/index.js

@@ -1,13 +1,5 @@
-import { setContext, getContext } from 'svelte'
+export { getPanoContext } from "./internal"
 
-export { default as PanoTestButton } from './components/Button.svelte';
+export * from "./api/plugin.js"
 
-export const PANO_CTX = Symbol()
-
-export function setPanoContext(ctx) {
-    setContext(PANO_CTX, ctx)
-}
-
-export function usePano() {
-    return getContext(PANO_CTX)
-}
+export * from "./utils/component.js"

package/src/internal/index.js

@@ -0,0 +1 @@
+export * from "./pano-context.js"

package/src/internal/pano-context.js

@@ -0,0 +1,47 @@
+const GLOBAL_KEY = "__PANO_CONTEXT__";
+
+function getStore() {
+  if (!globalThis[GLOBAL_KEY]) {
+    globalThis[GLOBAL_KEY] = {
+      context: {},
+      listeners: [],
+    };
+  }
+  return globalThis[GLOBAL_KEY];
+}
+
+export function setPanoContext(partial) {
+  const store = getStore();
+
+  if (typeof partial !== "object" || partial === null) {
+    console.warn("[PanoSDK] setPanoContext expects an object");
+    return;
+  }
+
+  Object.assign(store.context, partial);
+
+  store.listeners.forEach((fn) => {
+    try {
+      fn(store.context);
+    } catch (e) {
+      console.error("[PanoSDK] listener error", e);
+    }
+  });
+}
+
+export function getPanoContext() {
+  const store = getStore();
+
+  return {
+    context: store.context,
+
+    subscribe(fn) {
+      store.listeners.push(fn);
+
+      // unsubscribe
+      return () => {
+        store.listeners = store.listeners.filter((l) => l !== fn);
+      };
+    },
+  };
+}

package/src/toasts/index.js

@@ -0,0 +1,9 @@
+import { getPanoContext } from "../internal/index.js";
+
+const panoContext = getPanoContext();
+const toastStuff = panoContext.context.utils.toast;
+
+const showToast = toastStuff.show;
+const limitTitle = toastStuff.limitTitle;
+
+export { showToast, limitTitle };

package/src/utils/api.js

@@ -0,0 +1,14 @@
+import { getPanoContext } from "../internal/index.js";
+
+const panoContext = getPanoContext();
+const apiStuff = panoContext.context.utils.api;
+
+const ApiUtil = apiStuff.ApiUtil;
+
+const NETWORK_ERROR = apiStuff.NETWORK_ERROR;
+const networkErrorBody = apiStuff.networkErrorBody;
+const buildQueryParams = apiStuff.buildQueryParams;
+
+export { ApiUtil, NETWORK_ERROR, networkErrorBody, buildQueryParams };
+
+export default ApiUtil

package/src/utils/component.js

@@ -0,0 +1,20 @@
+import { mount, unmount, hydrate } from "svelte";
+
+/**
+ * Wraps a dynamic component import to include the correct Svelte runtime mount/unmount methods.
+ * This bridges the gap between Host and Plugin runtimes.
+ *
+ * @param {() => Promise<any>} importer - Dynamic import function
+ * @returns {() => Promise<any>} - Wrapped importer
+ */
+export function viewComponent(importer) {
+    return async () => {
+        const module = await importer();
+        return {
+            ...module,
+            mount: (options) => mount(module.default, options),
+            unmount: (instance) => unmount(instance),
+            hydrate: (options) => hydrate(module.default, options)
+        };
+    };
+}

package/src/utils/language.js

@@ -0,0 +1,24 @@
+import { getPanoContext } from "../internal/index.js";
+
+const panoContext = getPanoContext();
+const languageStuff = panoContext.context.utils.language;
+
+const languageLoading = languageStuff.languageLoading;
+const currentLanguage = languageStuff.currentLanguage;
+const Languages = languageStuff.Languages;
+const init = languageStuff.init;
+const getAcceptedLanguage = languageStuff.getAcceptedLanguage;
+const loadLanguage = languageStuff.loadLanguage;
+const changeLanguage = languageStuff.changeLanguage;
+const getLanguageByLocale = languageStuff.getLanguageByLocale;
+
+export {
+  languageLoading,
+  currentLanguage,
+  Languages,
+  init,
+  getAcceptedLanguage,
+  loadLanguage,
+  changeLanguage,
+  getLanguageByLocale,
+};

package/src/utils/tooltip.js

@@ -0,0 +1,10 @@
+import { getPanoContext } from "../internal/index.js";
+
+const panoContext = getPanoContext();
+const tooltipStuff = panoContext.context.utils.tooltip;
+
+const tooltip = tooltipStuff.tooltip;
+
+export { tooltip };
+
+export default tooltip;

package/src/variables.js

@@ -0,0 +1,36 @@
+import { getPanoContext } from "./internal/index.js";
+
+const panoContext = getPanoContext();
+const variableStuff = panoContext.context.variables;
+
+const API_URL = variableStuff.API_URL;
+const UI_URL = variableStuff.UI_URL;
+const PANEL_URL = variableStuff.PANEL_URL;
+const SETUP_URL = variableStuff.SETUP_URL;
+const PANO_WEBSITE_URL = variableStuff.PANO_WEBSITE_URL;
+const PANO_WEBSITE_API_URL = variableStuff.PANO_WEBSITE_API_URL;
+const PRERELEASE = variableStuff.PRERELEASE;
+const COOKIE_PREFIX = variableStuff.COOKIE_PREFIX;
+const CSRF_TOKEN_COOKIE_NAME = variableStuff.CSRF_TOKEN_COOKIE_NAME;
+const JWT_COOKIE_NAME = variableStuff.JWT_COOKIE_NAME;
+const CSRF_HEADER = variableStuff.CSRF_HEADER;
+const updateApiUrl = variableStuff.updateApiUrl;
+const updatePanoWebsiteUrl = variableStuff.updatePanoWebsiteUrl;
+const updatePanoWebsiteApiUrl = variableStuff.updatePanoWebsiteApiUrl;
+
+export {
+  API_URL,
+  UI_URL,
+  PANEL_URL,
+  SETUP_URL,
+  PANO_WEBSITE_URL,
+  PANO_WEBSITE_API_URL,
+  PRERELEASE,
+  COOKIE_PREFIX,
+  CSRF_TOKEN_COOKIE_NAME,
+  JWT_COOKIE_NAME,
+  CSRF_HEADER,
+  updateApiUrl,
+  updatePanoWebsiteUrl,
+  updatePanoWebsiteApiUrl,
+};

package/src/components/Button.svelte

@@ -1,13 +0,0 @@
-<script>
-    export let variant = 'primary';
-</script>
-
-<button class="btn {variant}">
-    <slot />
-</button>
-
-<style>
-    .btn {
-        padding: 8px 12px;
-    }
-</style>