@panomc/sdk 1.0.0-dev.2 → 1.0.0-dev.21

package/README.md

@@ -1,3 +1,3 @@
-# Pano Common Assets
-
-Pano common assets repository.
+# Pano Common Assets
+
+Pano common assets repository.

package/package.json

@@ -1,33 +1,73 @@
 {
   "name": "@panomc/sdk",
-  "version": "1.0.0-dev.2",
+  "version": "1.0.0-dev.21",
   "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": [
-    "dist"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "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/auth": {
+      "svelte": "./src/utils/auth.js",
+      "default": "./src/utils/auth.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"
+    },
+    "./utils/text": {
+      "svelte": "./src/utils/text.js",
+      "default": "./src/utils/text.js"
+    },
+    "./variables": {
+      "svelte": "./src/variables.js",
+      "default": "./src/variables.js"
+    },
+    "./svelte": {
+      "svelte": "./src/svelte.js",
+      "default": "./src/svelte.js"
     }
   },
-  "scripts": {
-    "build": "vite build"
-  },
-  "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,49 @@
+import { createPluginContext } from './plugin-context.js';
+
+/**
+ * @typedef {import('../types.js').Pano} Pano
+ * @typedef {import('../types.js').PanoPluginContext} PanoPluginContext
+ */
+
+export class PanoPlugin {
+  static isPanoPlugin = true;
+
+  /** @type {Pano} */
+  pano;
+
+  /** @type {PanoPluginContext} */
+  contextApi;
+
+  /** @type {any} */
+  context;
+
+  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 = [];
+  }
+
+  /**
+   * @param {Pano} pano
+   */
+  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,21 @@
+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;
+export const NoContent = components.NoContent;
+export const Editor = components.Editor;
+export const DragAndDropZone = components.DragAndDropZone;

package/src/index.js

@@ -0,0 +1,5 @@
+export { getPanoContext } from './internal';
+
+export * from './api/plugin.js';
+
+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,57 @@
+const GLOBAL_KEY = '__PANO_CONTEXT__';
+
+function getStore() {
+  if (!globalThis[GLOBAL_KEY]) {
+    globalThis[GLOBAL_KEY] = {
+      context: {},
+      listeners: [],
+    };
+  }
+  return globalThis[GLOBAL_KEY];
+}
+
+/**
+ * @typedef {import('../types.js').Pano} Pano
+ */
+
+/**
+ * @param {Partial<Pano>} partial
+ */
+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);
+    }
+  });
+}
+
+/**
+ * @returns {{ context: Pano, subscribe: (fn: (ctx: Pano) => void) => () => void }}
+ */
+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/svelte.js

@@ -0,0 +1,6 @@
+import { getPanoContext } from './internal/index.js';
+
+const panoContext = getPanoContext();
+const { page, base, navigating, browser, goto, invalidate, invalidateAll, error } = panoContext.context;
+
+export { page, base, navigating, browser, goto, invalidate, invalidateAll, error };

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/types.js

@@ -0,0 +1,40 @@
+/**
+ * @typedef {Object} Pano
+ * @property {boolean} isPanel
+ * @property {any} page - SvelteKit page store
+ * @property {string} base
+ * @property {any} navigating - SvelteKit navigating store
+ * @property {boolean} browser
+ * @property {Object} ui
+ * @property {Object} ui.page
+ * @property {function({path: string, component: any, layout?: any, resetLayout?: boolean}): void} ui.page.register
+ * @property {Object} ui.nav
+ * @property {Object} ui.nav.site
+ * @property {function(function(any[]): any[]): void} ui.nav.site.editNavLinks
+ * @property {Object} utils
+ * @property {Object} utils.api
+ * @property {any} utils.api.ApiUtil
+ * @property {function(Record<string, any>): string} utils.api.buildQueryParams
+ * @property {string} utils.api.NETWORK_ERROR
+ * @property {Object} utils.api.networkErrorBody
+ * @property {string} utils.api.networkErrorBody.result
+ * @property {string} utils.api.networkErrorBody.error
+ * @property {Object} utils.language
+ * @property {any} utils.language.init
+ * @property {any} utils.language._ - i18n store or function
+ * @property {Object} utils.tooltip
+ * @property {any} utils.tooltip.tooltip
+ * @property {any} utils.toast
+ * @property {Record<string, any>} components
+ * @property {Record<string, any>} variables
+ */
+
+/**
+ * @typedef {Object} PanoPluginContext
+ * @property {any} context
+ * @property {function(any): void} set
+ * @property {function(function(any): void): function(): void} subscribe
+ * @property {function(): void} [destroy]
+ */
+
+export {};

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/auth.js

@@ -0,0 +1,8 @@
+import { getPanoContext } from "../internal/index.js";
+
+const panoContext = getPanoContext();
+const authStuff = panoContext.context.utils.auth;
+
+const hasPermission = authStuff.hasPermission;
+
+export { hasPermission };

package/src/utils/component.js

@@ -0,0 +1,22 @@
+import { hydrate, mount, unmount } 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) {
+  const wrapper = async () => {
+    const module = await importer();
+    return {
+      ...module,
+      mount: (options) => mount(module.default, options),
+      unmount: (instance) => unmount(instance),
+      hydrate: (options) => hydrate(module.default, options),
+    };
+  };
+  wrapper._importer = importer;
+  return wrapper;
+}

package/src/utils/language.js

@@ -0,0 +1,26 @@
+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;
+const _ = languageStuff._;
+
+export {
+  languageLoading,
+  currentLanguage,
+  Languages,
+  init,
+  getAcceptedLanguage,
+  loadLanguage,
+  changeLanguage,
+  getLanguageByLocale,
+  _,
+};

package/src/utils/text.js

@@ -0,0 +1,8 @@
+import { getPanoContext } from '../internal/index.js';
+
+const panoContext = getPanoContext();
+const textStuff = panoContext.context.utils.text;
+
+const copy = textStuff.copy;
+
+export { copy };

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,
+};