@universe-platform/ui 0.1.0-beta.40 → 0.1.0-beta.42

package/dist/globals.css

@@ -524,6 +524,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -3051,6 +3054,84 @@
     }
   }
 }
+[data-theme="clean"] {
+  --color-emerald-50: #eef2ff;
+  --color-emerald-100: #e0e7ff;
+  --color-emerald-200: #c7d2fe;
+  --color-emerald-300: #a5b4fc;
+  --color-emerald-400: #818cf8;
+  --color-emerald-500: #6366f1;
+  --color-emerald-600: #4f46e5;
+  --color-emerald-700: #4338ca;
+  --color-emerald-800: #3730a3;
+  --color-emerald-900: #312e81;
+}
+[data-theme="ocean"] {
+  --color-slate-50: #f3f8fa;
+  --color-slate-100: #e4eef3;
+  --color-slate-200: #cbdde6;
+  --color-slate-300: #a6c0cf;
+  --color-slate-400: #7a9bb0;
+  --color-slate-500: #567b93;
+  --color-slate-600: #416178;
+  --color-slate-700: #324d60;
+  --color-slate-800: #243b4b;
+  --color-slate-900: #172a38;
+  --color-slate-950: #0d1b26;
+  --color-emerald-50: #ecfeff;
+  --color-emerald-100: #cffafe;
+  --color-emerald-200: #a5f3fc;
+  --color-emerald-300: #67e8f9;
+  --color-emerald-400: #22d3ee;
+  --color-emerald-500: #06b6d4;
+  --color-emerald-600: #0891b2;
+  --color-emerald-700: #0e7490;
+  --color-emerald-800: #155e75;
+  --color-emerald-900: #164e63;
+  --color-blue-50: #f0f9ff;
+  --color-blue-100: #e0f2fe;
+  --color-blue-200: #bae6fd;
+  --color-blue-300: #7dd3fc;
+  --color-blue-400: #38bdf8;
+  --color-blue-500: #0ea5e9;
+  --color-blue-600: #0284c7;
+  --color-blue-700: #0369a1;
+  --color-blue-800: #075985;
+  --color-blue-900: #0c4a6e;
+}
+[data-theme="warm"] {
+  --color-slate-50: #fafaf9;
+  --color-slate-100: #f5f5f4;
+  --color-slate-200: #e7e5e4;
+  --color-slate-300: #d6d3d1;
+  --color-slate-400: #a8a29e;
+  --color-slate-500: #78716c;
+  --color-slate-600: #57534e;
+  --color-slate-700: #44403c;
+  --color-slate-800: #292524;
+  --color-slate-900: #1c1917;
+  --color-slate-950: #0c0a09;
+  --color-emerald-50: #fff7ed;
+  --color-emerald-100: #ffedd5;
+  --color-emerald-200: #fed7aa;
+  --color-emerald-300: #fdba74;
+  --color-emerald-400: #fb923c;
+  --color-emerald-500: #f97316;
+  --color-emerald-600: #ea580c;
+  --color-emerald-700: #c2410c;
+  --color-emerald-800: #9a3412;
+  --color-emerald-900: #7c2d12;
+  --color-blue-50: #fbf6f1;
+  --color-blue-100: #f3e8dc;
+  --color-blue-200: #e6d0b8;
+  --color-blue-300: #d4b08a;
+  --color-blue-400: #bf8d5c;
+  --color-blue-500: #a8703c;
+  --color-blue-600: #8f5a2d;
+  --color-blue-700: #744725;
+  --color-blue-800: #5c391f;
+  --color-blue-900: #472c1a;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/index.d.mts

@@ -791,7 +791,6 @@ interface FormBlockProps {
     className?: string;
     onSuccess?: () => void;
 }
-declare function FormBlock({ settings: schema, executeAction, componentId, className, onSuccess }: FormBlockProps): react_jsx_runtime.JSX.Element;
 
 /**
  * UNIVERSE_COMPONENTS
@@ -799,10 +798,10 @@ declare function FormBlock({ settings: schema, executeAction, componentId, class
  * to their respective React component implementation.
  */
 declare const UNIVERSE_COMPONENTS: {
-    readonly TABLE: typeof TableBlock;
-    readonly WHATSAPP: typeof WhatsAppComponent;
-    readonly FORM: typeof FormBlock;
-    readonly PLACEMENT: react.FC<PlacementBlockProps>;
+    readonly TABLE: react.ComponentType<TableBlockProps>;
+    readonly WHATSAPP: react.ComponentType<WhatsAppComponentProps>;
+    readonly FORM: react.ComponentType<FormBlockProps>;
+    readonly PLACEMENT: react.ComponentType<PlacementBlockProps>;
 };
 type ComponentRegistry = typeof UNIVERSE_COMPONENTS;
 type UniverseComponentType = keyof ComponentRegistry;
@@ -827,4 +826,14 @@ declare function ToastProvider({ children }: {
 
 declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DEFAULT_PLACEMENT_STATUS_COLORS, DatePickerCell, type DeleteRecordPayload, DynamicFiltersBlock, type DynamicFiltersBlockProps, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, NON_TEXT_TYPES, type OrgRole, PASTEL_PALETTES, type PastelPalette, PlacementBlock, type PlacementBlockProps, type PlacementColumnOption, type PlacementConfig, PlacementSettings, type PlacementStatusColor, PlacementStatusEditor, type PlacementStatusSetting, RELATION_LABEL_KEY, RELATION_SEP, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SettingsAndActionsBlock, type SettingsAndActionsBlockProps, SmartTextCell, type SplitTitleResult, TableBlock, TableBlockClient, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, buildColumnOptions, buildRelationRef, calculateMinColumnWidth, checkElementTruncation, cn, columnRefLabel, enrichRowsWithRelations, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isUserColumn, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseColumnRef, parseLinkValue, parseTimeParts, readColumnValue, resolveDefaultStatusId, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, tableColumns, useColumnReorder, useColumnResize, useSmartTooltip, useToast, useWhatsAppState };
+declare const UNIVERSE_THEME_IDS: readonly ["classic", "clean", "ocean", "warm"];
+type UniverseThemeId = (typeof UNIVERSE_THEME_IDS)[number];
+declare function resolveUniverseTheme(value: unknown): UniverseThemeId;
+/**
+ * עוטף רכיב ב-data-theme לפי settings.theme (או config.theme) שהפלטפורמה מוסיפה לכל רכיב.
+ * display: contents אומר שהעטיפה לא משנה את הפריסה. משתני CSS עדיין עוברים בירושה לילדים.
+ * הערה: חלונות שנפתחים מחוץ לעץ (portal) לא יהיו בתוך העטיפה, ולכן עדיף להגדיר data-theme גם על <html> באתר.
+ */
+declare function withThemeScope<P extends object>(Component: react.ComponentType<P>): react.ComponentType<P>;
+
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DEFAULT_PLACEMENT_STATUS_COLORS, DatePickerCell, type DeleteRecordPayload, DynamicFiltersBlock, type DynamicFiltersBlockProps, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, NON_TEXT_TYPES, type OrgRole, PASTEL_PALETTES, type PastelPalette, PlacementBlock, type PlacementBlockProps, type PlacementColumnOption, type PlacementConfig, PlacementSettings, type PlacementStatusColor, PlacementStatusEditor, type PlacementStatusSetting, RELATION_LABEL_KEY, RELATION_SEP, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SettingsAndActionsBlock, type SettingsAndActionsBlockProps, SmartTextCell, type SplitTitleResult, TableBlock, TableBlockClient, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, UNIVERSE_THEME_IDS, type UniverseComponentType, type UniverseThemeId, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, buildColumnOptions, buildRelationRef, calculateMinColumnWidth, checkElementTruncation, cn, columnRefLabel, enrichRowsWithRelations, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isUserColumn, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseColumnRef, parseLinkValue, parseTimeParts, readColumnValue, resolveDefaultStatusId, resolveProtocol, resolveUniverseTheme, sanitizePhoneNumber, splitHeaderTitle, tableColumns, useColumnReorder, useColumnResize, useSmartTooltip, useToast, useWhatsAppState, withThemeScope };

package/dist/index.d.ts

@@ -791,7 +791,6 @@ interface FormBlockProps {
     className?: string;
     onSuccess?: () => void;
 }
-declare function FormBlock({ settings: schema, executeAction, componentId, className, onSuccess }: FormBlockProps): react_jsx_runtime.JSX.Element;
 
 /**
  * UNIVERSE_COMPONENTS
@@ -799,10 +798,10 @@ declare function FormBlock({ settings: schema, executeAction, componentId, class
  * to their respective React component implementation.
  */
 declare const UNIVERSE_COMPONENTS: {
-    readonly TABLE: typeof TableBlock;
-    readonly WHATSAPP: typeof WhatsAppComponent;
-    readonly FORM: typeof FormBlock;
-    readonly PLACEMENT: react.FC<PlacementBlockProps>;
+    readonly TABLE: react.ComponentType<TableBlockProps>;
+    readonly WHATSAPP: react.ComponentType<WhatsAppComponentProps>;
+    readonly FORM: react.ComponentType<FormBlockProps>;
+    readonly PLACEMENT: react.ComponentType<PlacementBlockProps>;
 };
 type ComponentRegistry = typeof UNIVERSE_COMPONENTS;
 type UniverseComponentType = keyof ComponentRegistry;
@@ -827,4 +826,14 @@ declare function ToastProvider({ children }: {
 
 declare function useToast(): ToastContextType;
 
-export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DEFAULT_PLACEMENT_STATUS_COLORS, DatePickerCell, type DeleteRecordPayload, DynamicFiltersBlock, type DynamicFiltersBlockProps, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, NON_TEXT_TYPES, type OrgRole, PASTEL_PALETTES, type PastelPalette, PlacementBlock, type PlacementBlockProps, type PlacementColumnOption, type PlacementConfig, PlacementSettings, type PlacementStatusColor, PlacementStatusEditor, type PlacementStatusSetting, RELATION_LABEL_KEY, RELATION_SEP, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SettingsAndActionsBlock, type SettingsAndActionsBlockProps, SmartTextCell, type SplitTitleResult, TableBlock, TableBlockClient, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, type UniverseComponentType, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, buildColumnOptions, buildRelationRef, calculateMinColumnWidth, checkElementTruncation, cn, columnRefLabel, enrichRowsWithRelations, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isUserColumn, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseColumnRef, parseLinkValue, parseTimeParts, readColumnValue, resolveDefaultStatusId, resolveProtocol, sanitizePhoneNumber, splitHeaderTitle, tableColumns, useColumnReorder, useColumnResize, useSmartTooltip, useToast, useWhatsAppState };
+declare const UNIVERSE_THEME_IDS: readonly ["classic", "clean", "ocean", "warm"];
+type UniverseThemeId = (typeof UNIVERSE_THEME_IDS)[number];
+declare function resolveUniverseTheme(value: unknown): UniverseThemeId;
+/**
+ * עוטף רכיב ב-data-theme לפי settings.theme (או config.theme) שהפלטפורמה מוסיפה לכל רכיב.
+ * display: contents אומר שהעטיפה לא משנה את הפריסה. משתני CSS עדיין עוברים בירושה לילדים.
+ * הערה: חלונות שנפתחים מחוץ לעץ (portal) לא יהיו בתוך העטיפה, ולכן עדיף להגדיר data-theme גם על <html> באתר.
+ */
+declare function withThemeScope<P extends object>(Component: react.ComponentType<P>): react.ComponentType<P>;
+
+export { type BaseComponentProps, ColumnHeaderTitle, type ColumnHeaderTitleProps, type ComponentCommunication, type ComponentConfig, type ComponentData, type ComponentPermissions, type ComponentRegistry, type ComponentState, type CreateRecordPayload, CreateTemplateModal, type CreateTemplateModalProps, DEFAULT_PLACEMENT_STATUS_COLORS, DatePickerCell, type DeleteRecordPayload, DynamicFiltersBlock, type DynamicFiltersBlockProps, LinkPickerCell, type MetaTemplateComponent, type MetaWhatsAppTemplate, NON_TEXT_TYPES, type OrgRole, PASTEL_PALETTES, type PastelPalette, PlacementBlock, type PlacementBlockProps, type PlacementColumnOption, type PlacementConfig, PlacementSettings, type PlacementStatusColor, PlacementStatusEditor, type PlacementStatusSetting, RELATION_LABEL_KEY, RELATION_SEP, type RelationFilterOption, type RelationFilterPayload, RelationFilterPopover, type RelationFilterPopoverProps, RelationPickerCell, type RolePermissions, type RowStatusType, SettingsAndActionsBlock, type SettingsAndActionsBlockProps, SmartTextCell, type SplitTitleResult, TableBlock, TableBlockClient, type TableBlockProps, type TableConfig, type TableData, TimePickerCell, ToastContext, type ToastContextType, type ToastItem, ToastProvider, TruncatedTooltip, UNIVERSE_COMPONENTS, UNIVERSE_THEME_IDS, type UniverseComponentType, type UniverseThemeId, type UpdateRecordPayload, type UseColumnReorderOptions, type UseColumnResizeOptions, WhatsAppComponent, type WhatsAppComponentProps, type WhatsAppData, buildColumnOptions, buildRelationRef, calculateMinColumnWidth, checkElementTruncation, cn, columnRefLabel, enrichRowsWithRelations, formatConflictCellValue, formatPhoneDisplay, formatTimeInput, formatTimeIso, generateWhatsAppLink, getDeterministicPastelBadge, getRolePermissions, isUserColumn, isValidPhoneNumber, measureTextWidth, normalizePhoneForWhatsApp, normalizeRelationValue, openWhatsAppChat, parseColumnRef, parseLinkValue, parseTimeParts, readColumnValue, resolveDefaultStatusId, resolveProtocol, resolveUniverseTheme, sanitizePhoneNumber, splitHeaderTitle, tableColumns, useColumnReorder, useColumnResize, useSmartTooltip, useToast, useWhatsAppState, withThemeScope };

package/dist/index.js

@@ -94,6 +94,7 @@ __export(src_exports, {
   ToastProvider: () => ToastProvider,
   TruncatedTooltip: () => TruncatedTooltip,
   UNIVERSE_COMPONENTS: () => UNIVERSE_COMPONENTS,
+  UNIVERSE_THEME_IDS: () => UNIVERSE_THEME_IDS,
   WhatsAppComponent: () => WhatsAppComponent,
   applyFormulaColumns: () => applyFormulaColumns,
   applyRelationCopy: () => applyRelationCopy,
@@ -155,6 +156,7 @@ __export(src_exports, {
   renameCopyTarget: () => renameCopyTarget,
   resolveDefaultStatusId: () => resolveDefaultStatusId,
   resolveProtocol: () => resolveProtocol,
+  resolveUniverseTheme: () => resolveUniverseTheme,
   sanitizeDefaultFilter: () => sanitizeDefaultFilter,
   sanitizePhoneNumber: () => sanitizePhoneNumber,
   sanitizeTemplateNameInput: () => sanitizeTemplateNameInput,
@@ -175,7 +177,8 @@ __export(src_exports, {
   validateTemplateButtons: () => validateTemplateButtons,
   validateWhatsAppTemplate: () => validateWhatsAppTemplate,
   validateWordToVariableRatio: () => validateWordToVariableRatio,
-  withDefaultFilter: () => withDefaultFilter
+  withDefaultFilter: () => withDefaultFilter,
+  withThemeScope: () => withThemeScope
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -15475,12 +15478,30 @@ function FormBlock({ settings: schema, executeAction, componentId, className = "
   ] });
 }
 
+// src/themes/ThemeScope.tsx
+var React22 = __toESM(require("react"));
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var UNIVERSE_THEME_IDS = ["classic", "clean", "ocean", "warm"];
+function resolveUniverseTheme(value) {
+  return typeof value === "string" && UNIVERSE_THEME_IDS.includes(value) ? value : "classic";
+}
+function withThemeScope(Component) {
+  function ThemeScoped(props) {
+    var _a, _b, _c;
+    const p = props;
+    const theme = resolveUniverseTheme((_c = (_a = p.settings) == null ? void 0 : _a.theme) != null ? _c : (_b = p.config) == null ? void 0 : _b.theme);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { "data-theme": theme, style: { display: "contents" }, children: React22.createElement(Component, props) });
+  }
+  ThemeScoped.displayName = `ThemeScoped(${Component.displayName || Component.name || "Component"})`;
+  return ThemeScoped;
+}
+
 // src/registry.ts
 var UNIVERSE_COMPONENTS = {
-  TABLE: TableBlock,
-  WHATSAPP: WhatsAppComponent,
-  FORM: FormBlock,
-  PLACEMENT: PlacementBlock
+  TABLE: withThemeScope(TableBlock),
+  WHATSAPP: withThemeScope(WhatsAppComponent),
+  FORM: withThemeScope(FormBlock),
+  PLACEMENT: withThemeScope(PlacementBlock)
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -15518,6 +15539,7 @@ var UNIVERSE_COMPONENTS = {
   ToastProvider,
   TruncatedTooltip,
   UNIVERSE_COMPONENTS,
+  UNIVERSE_THEME_IDS,
   WhatsAppComponent,
   applyFormulaColumns,
   applyRelationCopy,
@@ -15579,6 +15601,7 @@ var UNIVERSE_COMPONENTS = {
   renameCopyTarget,
   resolveDefaultStatusId,
   resolveProtocol,
+  resolveUniverseTheme,
   sanitizeDefaultFilter,
   sanitizePhoneNumber,
   sanitizeTemplateNameInput,
@@ -15599,5 +15622,6 @@ var UNIVERSE_COMPONENTS = {
   validateTemplateButtons,
   validateWhatsAppTemplate,
   validateWordToVariableRatio,
-  withDefaultFilter
+  withDefaultFilter,
+  withThemeScope
 });

package/dist/index.mjs

@@ -15383,12 +15383,30 @@ function FormBlock({ settings: schema, executeAction, componentId, className = "
   ] });
 }
 
+// src/themes/ThemeScope.tsx
+import * as React22 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var UNIVERSE_THEME_IDS = ["classic", "clean", "ocean", "warm"];
+function resolveUniverseTheme(value) {
+  return typeof value === "string" && UNIVERSE_THEME_IDS.includes(value) ? value : "classic";
+}
+function withThemeScope(Component) {
+  function ThemeScoped(props) {
+    var _a, _b, _c;
+    const p = props;
+    const theme = resolveUniverseTheme((_c = (_a = p.settings) == null ? void 0 : _a.theme) != null ? _c : (_b = p.config) == null ? void 0 : _b.theme);
+    return /* @__PURE__ */ jsx29("div", { "data-theme": theme, style: { display: "contents" }, children: React22.createElement(Component, props) });
+  }
+  ThemeScoped.displayName = `ThemeScoped(${Component.displayName || Component.name || "Component"})`;
+  return ThemeScoped;
+}
+
 // src/registry.ts
 var UNIVERSE_COMPONENTS = {
-  TABLE: TableBlock,
-  WHATSAPP: WhatsAppComponent,
-  FORM: FormBlock,
-  PLACEMENT: PlacementBlock
+  TABLE: withThemeScope(TableBlock),
+  WHATSAPP: withThemeScope(WhatsAppComponent),
+  FORM: withThemeScope(FormBlock),
+  PLACEMENT: withThemeScope(PlacementBlock)
 };
 export {
   COLUMN_CAPABILITIES,
@@ -15425,6 +15443,7 @@ export {
   ToastProvider,
   TruncatedTooltip,
   UNIVERSE_COMPONENTS,
+  UNIVERSE_THEME_IDS,
   WhatsAppComponent,
   applyFormulaColumns,
   applyRelationCopy,
@@ -15486,6 +15505,7 @@ export {
   renameCopyTarget,
   resolveDefaultStatusId,
   resolveProtocol,
+  resolveUniverseTheme,
   sanitizeDefaultFilter,
   sanitizePhoneNumber,
   sanitizeTemplateNameInput,
@@ -15506,5 +15526,6 @@ export {
   validateTemplateButtons,
   validateWhatsAppTemplate,
   validateWordToVariableRatio,
-  withDefaultFilter
+  withDefaultFilter,
+  withThemeScope
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@universe-platform/ui",
-    "version": "0.1.0-beta.40",
+    "version": "0.1.0-beta.42",
     "main": "./dist/index.js",
     "module": "./dist/index.mjs",
     "types": "./dist/index.d.ts",