ssovee-os-web-ui 0.1.25 → 0.1.28

package/README.md

@@ -6,18 +6,13 @@ Reusable React UI components for building shared desktop-style web experiences.
 
 This package provides a shared set of React UI components for SSOVEE applications. It includes themed UI primitives, hooks, and desktop-style window wrappers for app-like layouts.
 
-## What’s new in v0.1.24
-
-- Added window container components for app-style layouts
-- Documented usage examples for both window variants
-- Improved package exports for easier consumption
-
 ## Features
 
 - Ready-to-use React UI components
 - Packaged theme stylesheet for shared visual tokens
 - TypeScript support for the main public components
 - Window components for desktop-style app shells
+- Plugin playground support for local plugin testing
 
 ## Install
 
@@ -64,6 +59,7 @@ export function Example() {
 
 ### Simple window
 
+{% raw %}
 ```tsx
 import { WindowWithoutSideMenu, Typography } from "ssovee-os-web-ui";
 
@@ -86,9 +82,11 @@ export function NotesWindow() {
   );
 }
 ```
+{% endraw %}
 
 ### Window with sidebar menu
 
+{% raw %}
 ```tsx
 import { WindowWithSideMenu, Typography, Button } from "ssovee-os-web-ui";
 
@@ -123,6 +121,35 @@ export function SettingsWindow() {
   );
 }
 ```
+{% endraw %}
+
+## Plugin playground
+
+```tsx
+import { PluginPlayground, Typography, Button } from "ssovee-os-web-ui";
+
+const pluginMetadata = {
+  title: "Plugin Preview",
+  defaultWidth: 720,
+  defaultHeight: 520,
+  windowVariant: "with-side-menu",
+};
+
+export function PluginPreview() {
+  return (
+    <PluginPlayground
+      metadata={pluginMetadata}
+      onClose={() => console.log("Playground closed")}
+      onMinimize={(isMinimized) => console.log("Minimized:", isMinimized)}
+    >
+      <div>
+        <Typography variant="h6">Plugin Content</Typography>
+        <Button variant="primary">Run</Button>
+      </div>
+    </PluginPlayground>
+  );
+}
+```
 
 ## Hooks
 
@@ -163,6 +190,7 @@ The package exports these components and types for external use:
 - `Tabs`
 - `Typography`
 - `ImageWithPlaceholder`
+- `PluginPlayground`
 - `WindowWithSideMenu`
 - `WindowWithoutSideMenu`
 - `Table` and its subcomponents

package/dist/index.cjs

@@ -2036,6 +2036,201 @@ var Tabs = ({
   ] });
 };
 var Tabs_default = Tabs;
+var DEFAULT_BACKGROUND = "/wallpaper/Wallpaper3.webp";
+var DEFAULT_MOCK_USER = {
+  id: "dev-user",
+  name: "Plugin Developer",
+  email: "dev@local.test"
+};
+var DEFAULT_TOKEN = "playground-dev-token";
+function renderPluginChild(child, app, api, reloadKey) {
+  if (!child) return null;
+  if (typeof child === "function") {
+    const renderFn = child;
+    return renderFn({ app, api });
+  }
+  return React22.Children.map(child, (node, index) => {
+    if (!React22.isValidElement(node)) {
+      return node;
+    }
+    return React22.cloneElement(
+      node,
+      {
+        key: `${reloadKey}-${index}`,
+        app,
+        api
+      }
+    );
+  });
+}
+function getDefaultSize(metadata) {
+  const manifestWindowSize = metadata.windowSize?.windowSize;
+  const minWidth = metadata.minWidth ?? 520;
+  const minHeight = metadata.minHeight ?? 360;
+  return {
+    width: Math.max(
+      manifestWindowSize?.width ?? metadata.defaultWidth ?? 960,
+      minWidth
+    ),
+    height: Math.max(
+      manifestWindowSize?.height ?? metadata.defaultHeight ?? 680,
+      minHeight
+    )
+  };
+}
+function PluginPlayground({
+  children,
+  metadata,
+  backgroundImage,
+  onClose,
+  onMinimize
+}) {
+  const [mockUser] = React22.useState(DEFAULT_MOCK_USER);
+  const [mockToken] = React22.useState(DEFAULT_TOKEN);
+  const [isMinimized, setIsMinimized] = React22.useState(false);
+  const [isClosed, setIsClosed] = React22.useState(false);
+  const [isActive, setIsActive] = React22.useState(true);
+  const [isNightMode, setIsNightMode] = React22.useState(true);
+  React22.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const storedTheme = window.localStorage.getItem("plugin-playground-theme");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const shouldUseDark = storedTheme ? storedTheme === "dark" : prefersDark;
+    setIsNightMode(shouldUseDark);
+  }, []);
+  React22.useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.classList.toggle("dark", isNightMode);
+    window.localStorage.setItem(
+      "plugin-playground-theme",
+      isNightMode ? "dark" : "light"
+    );
+  }, [isNightMode]);
+  const title = metadata.title ?? metadata.name ?? "Plugin Playground";
+  const slug = metadata.slug ?? "local-plugin";
+  const defaultSize = React22.useMemo(() => getDefaultSize(metadata), [metadata]);
+  const canvasBackground = backgroundImage ?? metadata.backgroundImage ?? DEFAULT_BACKGROUND;
+  const isWindowResizable = metadata.windowSize?.isAppWindowResizing ?? metadata.isResizing ?? true;
+  const minimizeWindow = React22.useCallback(() => {
+    setIsActive(false);
+    setIsMinimized(true);
+    setIsClosed(false);
+    onMinimize?.(true);
+  }, [onMinimize]);
+  const closeWindow = React22.useCallback(() => {
+    setIsActive(false);
+    setIsClosed(true);
+    setIsMinimized(false);
+    onClose?.();
+  }, [onClose]);
+  const restoreWindow = React22.useCallback(() => {
+    setIsActive(true);
+    setIsClosed(false);
+    setIsMinimized(false);
+    onMinimize?.(false);
+  }, [onMinimize]);
+  const mockApi = React22.useMemo(
+    () => ({
+      showToast: (message, type) => {
+        console.info(`[playground:${type}] ${message}`);
+      },
+      openApp: (app) => {
+        console.info(`[playground:openApp] ${app.slug}`);
+      },
+      getUser: async () => {
+        return mockUser;
+      },
+      getToken: async () => {
+        return mockToken;
+      }
+    }),
+    [mockToken, mockUser]
+  );
+  const appProps = React22.useMemo(
+    () => ({
+      name: title,
+      slug,
+      icon: metadata.icon,
+      isActive,
+      isMinimize: isMinimized,
+      componentKey: "plugin-playground",
+      windowSize: {
+        windowSize: defaultSize,
+        isAppWindowResizing: isWindowResizable
+      },
+      metadata: {
+        title,
+        description: metadata.description,
+        ogImage: metadata.icon,
+        keywords: metadata.keywords?.join(", "),
+        author: metadata.author,
+        siteName: "Plugin Playground"
+      },
+      callback: (value) => {
+        if (value === "MINIMIZE_APP") {
+          minimizeWindow();
+          return;
+        }
+        if (value === "CLOSE_APP") {
+          closeWindow();
+          return;
+        }
+        if (value === "CLICKED") {
+          setIsActive(true);
+        }
+      }
+    }),
+    [
+      closeWindow,
+      defaultSize,
+      isActive,
+      isMinimized,
+      metadata.author,
+      metadata.description,
+      metadata.icon,
+      metadata.keywords,
+      minimizeWindow,
+      isWindowResizable,
+      slug,
+      title
+    ]
+  );
+  const injectedPlugin = renderPluginChild(
+    children,
+    appProps,
+    mockApi,
+    Number(isClosed)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "relative h-screen w-screen overflow-hidden bg-cover bg-center bg-no-repeat text-white transition-colors duration-200 dark:text-slate-100",
+      style: { backgroundImage: `url(${canvasBackground})` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            "aria-pressed": isNightMode,
+            className: "absolute left-4 top-4 z-40 rounded-full border border-white/30 bg-white/75 px-3 py-2 text-xs font-medium text-slate-900 shadow-lg shadow-black/20 backdrop-blur-md transition-all duration-200 dark:border-slate-700/60 dark:bg-slate-900/70 dark:text-slate-100 dark:shadow-slate-950/40",
+            onClick: () => setIsNightMode((prev) => !prev),
+            type: "button",
+            children: isNightMode ? "\u2600\uFE0F Light Mood" : "\u{1F319} Night Mood"
+          }
+        ),
+        !isClosed ? injectedPlugin : null,
+        isClosed || isMinimized ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "absolute bottom-6 left-1/2 z-40 -translate-x-1/2 rounded-full border border-white/30 bg-black/55 px-4 py-2 text-xs text-white backdrop-blur-md transition-colors duration-200 dark:border-white/20 dark:bg-slate-950/70 dark:text-slate-100",
+            onClick: restoreWindow,
+            type: "button",
+            children: isClosed ? `Reopen ${title}` : `Restore ${title}`
+          }
+        ) : null
+      ]
+    }
+  );
+}
 var SIDEBAR_WIDTH = 200;
 var initialState = {
   position: { x: 0, y: 40 },
@@ -2928,6 +3123,7 @@ exports.Input = Input_default;
 exports.Loading = Loading_default;
 exports.Modal = Modal_default;
 exports.Pagination = Pagination_default;
+exports.PluginPlayground = PluginPlayground;
 exports.Progress = Progress_default;
 exports.Radio = Radio_default;
 exports.SearchInput = SearchInput_default;