@sero-ai/ui 0.4.0 → 0.4.2

package/dist/index.d.ts

@@ -113,7 +113,7 @@ export { Transcription, TranscriptionProps, TranscriptionSegment, TranscriptionS
 export { VoiceSelectorAccent, VoiceSelectorAccentProps, VoiceSelectorAccentValue } from './components/ai-elements/voice-selector-accent.js';
 export { VoiceSelector, VoiceSelectorAge, VoiceSelectorAgeProps, VoiceSelectorAttributes, VoiceSelectorAttributesProps, VoiceSelectorBullet, VoiceSelectorBulletProps, VoiceSelectorContent, VoiceSelectorContentProps, VoiceSelectorDescription, VoiceSelectorDescriptionProps, VoiceSelectorDialog, VoiceSelectorDialogProps, VoiceSelectorEmpty, VoiceSelectorEmptyProps, VoiceSelectorGender, VoiceSelectorGenderProps, VoiceSelectorGroup, VoiceSelectorGroupProps, VoiceSelectorInput, VoiceSelectorInputProps, VoiceSelectorItem, VoiceSelectorItemProps, VoiceSelectorList, VoiceSelectorListProps, VoiceSelectorName, VoiceSelectorNameProps, VoiceSelectorPreview, VoiceSelectorPreviewProps, VoiceSelectorProps, VoiceSelectorSeparator, VoiceSelectorSeparatorProps, VoiceSelectorShortcut, VoiceSelectorShortcutProps, VoiceSelectorTrigger, VoiceSelectorTriggerProps, useVoiceSelector } from './components/ai-elements/voice-selector.js';
 export { WebPreview, WebPreviewBody, WebPreviewBodyProps, WebPreviewConsole, WebPreviewConsoleProps, WebPreviewContextValue, WebPreviewNavigation, WebPreviewNavigationButton, WebPreviewNavigationButtonProps, WebPreviewNavigationProps, WebPreviewProps, WebPreviewUrl, WebPreviewUrlProps } from './components/ai-elements/web-preview.js';
-export { Tone, toneColor, toneDot, tonePill } from './components/dashboard/tone.js';
+export { Tone, toneColor, toneDot, toneLabel, tonePill } from './components/dashboard/tone.js';
 export { Gap, gapClass } from './components/dashboard/spacing.js';
 export { Divider, DividerProps, Grid, GridProps, Inline, InlineProps, Section, SectionProps, Stack, StackProps, WidgetContent, WidgetContentProps } from './components/dashboard/layout.js';
 export { Heading, HeadingProps, Icon, IconProps, Text, TextProps } from './components/dashboard/typography.js';
@@ -128,9 +128,12 @@ export { DataBoundary, DataBoundaryProps, DataState } from './components/dashboa
 export { EmptyState, EmptyStateProps } from './components/dashboard/empty-state.js';
 export { ActivitySkeleton, ListSkeleton, MetricSkeleton, SkeletonPatternProps } from './components/dashboard/skeletons.js';
 export { IconButton, IconButtonProps } from './components/dashboard/icon-button.js';
+export { DashboardComponentCatalogEntry } from './components/dashboard/catalog.js';
 export { AvailableModelPicker } from './components/model-selection/available-model-picker.js';
 export { ModelWarningList } from './components/model-selection/model-warning-list.js';
 export { ThinkingLevelPicker } from './components/model-selection/thinking-level-picker.js';
+export { PluginStyleScope, PluginStyleScopeProps } from './plugin-style-scope.js';
+export { usePluginPortalContainer } from './plugin-style-scope-context.js';
 import 'clsx';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -116,7 +116,11 @@ export * from "./components/dashboard";
 export * from "./components/model-selection/available-model-picker";
 export * from "./components/model-selection/model-warning-list";
 export * from "./components/model-selection/thinking-level-picker";
+import { PluginStyleScope } from "./plugin-style-scope";
+import { usePluginPortalContainer } from "./plugin-style-scope-context";
 export {
+  PluginStyleScope,
   cn,
-  useIsMobile
+  useIsMobile,
+  usePluginPortalContainer
 };

package/dist/plugin-style-scope-context.cjs

@@ -0,0 +1,10 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _react = require('react');
+const PluginStyleScopeContext = _nullishCoalesce(globalThis.__sero_plugin_style_scope_context__, () => ( _react.createContext.call(void 0, null)));
+globalThis.__sero_plugin_style_scope_context__ = PluginStyleScopeContext;
+function usePluginPortalContainer() {
+  return _nullishCoalesce(_optionalChain([_react.useContext.call(void 0, PluginStyleScopeContext), 'optionalAccess', _ => _.portalContainer]), () => ( void 0));
+}
+
+
+
+exports.PluginStyleScopeContext = PluginStyleScopeContext; exports.usePluginPortalContainer = usePluginPortalContainer;

package/dist/plugin-style-scope-context.d.cts

@@ -0,0 +1,13 @@
+import { Context } from 'react';
+
+interface PluginStyleScopeValue {
+    pluginId: string;
+    portalContainer: HTMLDivElement | null;
+}
+declare global {
+    var __sero_plugin_style_scope_context__: Context<PluginStyleScopeValue | null> | undefined;
+}
+declare const PluginStyleScopeContext: Context<PluginStyleScopeValue | null>;
+declare function usePluginPortalContainer(): HTMLElement | undefined;
+
+export { PluginStyleScopeContext, type PluginStyleScopeValue, usePluginPortalContainer };

package/dist/plugin-style-scope-context.d.ts

@@ -0,0 +1,13 @@
+import { Context } from 'react';
+
+interface PluginStyleScopeValue {
+    pluginId: string;
+    portalContainer: HTMLDivElement | null;
+}
+declare global {
+    var __sero_plugin_style_scope_context__: Context<PluginStyleScopeValue | null> | undefined;
+}
+declare const PluginStyleScopeContext: Context<PluginStyleScopeValue | null>;
+declare function usePluginPortalContainer(): HTMLElement | undefined;
+
+export { PluginStyleScopeContext, type PluginStyleScopeValue, usePluginPortalContainer };

package/dist/plugin-style-scope-context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const PluginStyleScopeContext = globalThis.__sero_plugin_style_scope_context__ ?? createContext(null);
+globalThis.__sero_plugin_style_scope_context__ = PluginStyleScopeContext;
+function usePluginPortalContainer() {
+  return useContext(PluginStyleScopeContext)?.portalContainer ?? void 0;
+}
+export {
+  PluginStyleScopeContext,
+  usePluginPortalContainer
+};

package/dist/plugin-style-scope.cjs

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _jsxruntime = require('react/jsx-runtime');
+var _react = require('react');
+var _pluginstylescopecontext = require('./plugin-style-scope-context');
+function PluginStyleScope({ children, pluginId, surfaceId }) {
+  const portalContainer = _react.useMemo.call(void 0, () => {
+    if (typeof document === "undefined") return null;
+    const container = document.createElement("div");
+    container.dataset.seroPlugin = pluginId;
+    container.dataset.seroPluginPortals = surfaceId;
+    return container;
+  }, [pluginId, surfaceId]);
+  _react.useInsertionEffect.call(void 0, () => {
+    if (!portalContainer) return void 0;
+    document.body.append(portalContainer);
+    return () => portalContainer.remove();
+  }, [portalContainer]);
+  const value = _react.useMemo.call(void 0, 
+    () => ({ pluginId, portalContainer }),
+    [pluginId, portalContainer]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _pluginstylescopecontext.PluginStyleScopeContext.Provider, { value, children });
+}
+
+
+exports.PluginStyleScope = PluginStyleScope;

package/dist/plugin-style-scope.d.cts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PluginStyleScopeProps {
+    children: ReactNode;
+    pluginId: string;
+    surfaceId: string;
+}
+declare function PluginStyleScope({ children, pluginId, surfaceId }: PluginStyleScopeProps): react_jsx_runtime.JSX.Element;
+
+export { PluginStyleScope, type PluginStyleScopeProps };

package/dist/plugin-style-scope.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface PluginStyleScopeProps {
+    children: ReactNode;
+    pluginId: string;
+    surfaceId: string;
+}
+declare function PluginStyleScope({ children, pluginId, surfaceId }: PluginStyleScopeProps): react_jsx_runtime.JSX.Element;
+
+export { PluginStyleScope, type PluginStyleScopeProps };

package/dist/plugin-style-scope.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useInsertionEffect, useMemo } from "react";
+import { PluginStyleScopeContext } from "./plugin-style-scope-context";
+function PluginStyleScope({ children, pluginId, surfaceId }) {
+  const portalContainer = useMemo(() => {
+    if (typeof document === "undefined") return null;
+    const container = document.createElement("div");
+    container.dataset.seroPlugin = pluginId;
+    container.dataset.seroPluginPortals = surfaceId;
+    return container;
+  }, [pluginId, surfaceId]);
+  useInsertionEffect(() => {
+    if (!portalContainer) return void 0;
+    document.body.append(portalContainer);
+    return () => portalContainer.remove();
+  }, [portalContainer]);
+  const value = useMemo(
+    () => ({ pluginId, portalContainer }),
+    [pluginId, portalContainer]
+  );
+  return /* @__PURE__ */ jsx(PluginStyleScopeContext.Provider, { value, children });
+}
+export {
+  PluginStyleScope
+};