ssovee-os-web-ui 0.1.25 → 0.1.26

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,7 @@ export function SettingsWindow() {
   );
 }
 ```
+{% endraw %}
 
 ## Hooks
 
@@ -163,6 +162,7 @@ The package exports these components and types for external use:
 - `Tabs`
 - `Typography`
 - `ImageWithPlaceholder`
+- `PluginPlayground`
 - `WindowWithSideMenu`
 - `WindowWithoutSideMenu`
 - `Table` and its subcomponents

package/dist/index.css

@@ -30,6 +30,10 @@
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-800: oklch(42.4% 0.199 265.638);
+    --color-slate-100: oklch(96.8% 0.007 247.896);
+    --color-slate-700: oklch(37.2% 0.044 257.287);
+    --color-slate-900: oklch(20.8% 0.042 265.755);
+    --color-slate-950: oklch(12.9% 0.042 264.695);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-neutral-100: oklch(97% 0 none);
     --color-neutral-200: oklch(92.2% 0 none);
@@ -79,6 +83,7 @@
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
+    --blur-md: 12px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -285,6 +290,9 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
+  .bottom-6 {
+    bottom: calc(var(--spacing) * 6);
+  }
   .bottom-full {
     bottom: 100%;
   }
@@ -303,6 +311,9 @@
   .left-full {
     left: 100%;
   }
+  .z-40 {
+    z-index: 40;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -459,6 +470,9 @@
   .h-full {
     height: 100%;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-0 {
     max-height: 0px;
   }
@@ -510,6 +524,9 @@
   .w-full {
     width: 100%;
   }
+  .w-screen {
+    width: 100vw;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -770,6 +787,12 @@
   .border-transparent {
     border-color: transparent;
   }
+  .border-white\/30 {
+    border-color: color-mix(in srgb, #fff 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
+    }
+  }
   .border-yellow-200 {
     border-color: var(--color-yellow-200);
   }
@@ -821,6 +844,12 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-black\/55 {
+    background-color: color-mix(in srgb, #000 55%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 55%, transparent);
+    }
+  }
   .bg-blue-50 {
     background-color: var(--color-blue-50);
   }
@@ -890,12 +919,27 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/75 {
+    background-color: color-mix(in srgb, #fff 75%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 75%, transparent);
+    }
+  }
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
   .bg-yellow-500 {
     background-color: var(--color-yellow-500);
   }
+  .bg-cover {
+    background-size: cover;
+  }
+  .bg-center {
+    background-position: center;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -1158,6 +1202,9 @@
   .text-red-800 {
     color: var(--color-red-800);
   }
+  .text-slate-900 {
+    color: var(--color-slate-900);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -1207,6 +1254,12 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-black\/20 {
+    --tw-shadow-color: color-mix(in srgb, #000 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1214,6 +1267,11 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -1251,6 +1309,9 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[playground\:openApp\] {
+    playground: openApp;
+  }
   .placeholder\:text-neutral-300::placeholder {
     color: var(--color-neutral-300);
   }
@@ -1499,6 +1560,51 @@
   .disabled\:opacity-50:disabled {
     opacity: 50%;
   }
+  @media (prefers-color-scheme: dark) {
+    .dark\:border-slate-700\/60 {
+      border-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 60%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:border-slate-700\/60 {
+        border-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent);
+      }
+    }
+    .dark\:border-white\/20 {
+      border-color: color-mix(in srgb, #fff 20%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:border-white\/20 {
+        border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+      }
+    }
+    .dark\:bg-slate-900\/70 {
+      background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 70%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:bg-slate-900\/70 {
+        background-color: color-mix(in oklab, var(--color-slate-900) 70%, transparent);
+      }
+    }
+    .dark\:bg-slate-950\/70 {
+      background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:bg-slate-950\/70 {
+        background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
+      }
+    }
+    .dark\:text-slate-100 {
+      color: var(--color-slate-100);
+    }
+    .dark\:shadow-slate-950\/40 {
+      --tw-shadow-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 40%, transparent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .dark\:shadow-slate-950\/40 {
+        --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-slate-950) 40%, transparent) var(--tw-shadow-alpha), transparent);
+      }
+    }
+  }
   .\[\&_tr\]\:border-b tr {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;

package/dist/index.d.cts

@@ -367,4 +367,4 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 
-export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, WindowWithSideMenu, WindowWithoutSideMenu };
+export { Accordion, Alert, type AlertProps, type AppInterface, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, WindowWithSideMenu, WindowWithoutSideMenu };

package/dist/index.d.ts

@@ -367,4 +367,4 @@ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<
 declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
 
-export { Accordion, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, WindowWithSideMenu, WindowWithoutSideMenu };
+export { Accordion, Alert, type AlertProps, type AppInterface, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Divider, Dropdown, type DropdownOption, type DropdownProps, FileUpload, type FileUploadProps, ImageWithPlaceholder, type ImageWithPlaceholderProps, Input, type InputProps, Loading, type LoadingProps, Modal, type ModalProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TextArea, type TextAreaProps, Toast, type ToastProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, Typography, type TypographyProps, WindowWithSideMenu, WindowWithoutSideMenu };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ssovee-os-web-ui",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Reusable UI component library for shared applications.",
   "author": "SSOVEE",
   "license": "MIT",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "git+https://github.com/ssovee/ssovee-os-web-ui.git"
   },
-  "homepage": "https://github.com/ssovee/ssovee-os-web-ui#readme",
+  "homepage": "https://ssovee.github.io/ssovee-os-web-ui",
   "keywords": [
     "react",
     "ui",