react-semaphor 0.1.301 → 0.1.302

package/dist/types/main.d.ts

@@ -644,6 +644,69 @@ declare interface AlertWizardDialogProps {
     cardSnapshot: CardSnapshot | null;
 }
 
+declare const APPEARANCE_SPEC_VERSION: 1;
+
+declare type AppearanceColorToken = 'background' | 'foreground' | 'muted' | 'mutedForeground' | 'border' | 'input' | 'primary' | 'primaryForeground' | 'accent' | 'accentForeground' | 'card' | 'cardForeground' | 'positive' | 'negative' | 'warning' | 'info' | 'destructive' | 'destructiveForeground';
+
+declare type AppearanceColorTokens = Partial<Record<AppearanceColorToken, string>>;
+
+declare type AppearanceDensity = 'compact' | 'comfortable' | 'spacious';
+
+declare type AppearanceMode = 'light' | 'dark' | 'system';
+
+declare type AppearanceScheme = {
+    tokens?: AppearanceTokens;
+    components?: {
+        dashboard?: BaseSurfaceAppearance;
+        card?: BaseSurfaceAppearance;
+        interactive?: InteractiveSurfaceAppearance;
+        chart?: ChartAppearance;
+        table?: TableAppearance;
+        pivotTable?: TableAppearance;
+        aggregateTable?: TableAppearance;
+        pagination?: BaseSurfaceAppearance;
+    };
+};
+
+export declare type AppearanceSpec = {
+    version: typeof APPEARANCE_SPEC_VERSION;
+    mode?: AppearanceMode;
+    schemes?: {
+        light?: AppearanceScheme;
+        dark?: AppearanceScheme;
+    };
+};
+
+declare type AppearanceTokens = {
+    color?: AppearanceColorTokens;
+    typography?: {
+        fontFamily?: string;
+        headingFontFamily?: string;
+        monoFontFamily?: string;
+        baseFontSize?: number;
+        density?: AppearanceDensity;
+    };
+    radius?: {
+        control?: number;
+        card?: number;
+        table?: number;
+        badge?: number;
+    };
+    spacing?: {
+        dashboardPadding?: number;
+        gridGap?: number;
+        cardPadding?: number;
+        controlGap?: number;
+        tableCellX?: number;
+        tableCellY?: number;
+    };
+    shadow?: {
+        card?: string;
+        popover?: string;
+        focusRing?: string;
+    };
+};
+
 export declare type AssistantId = 'dashboard-assistant' | 'editor-assistant';
 
 export declare type AuthToken = {
@@ -722,6 +785,15 @@ export declare interface BaseInteractionEvent {
     metric?: ClickedMetricValue;
 }
 
+declare type BaseSurfaceAppearance = {
+    background?: string;
+    foreground?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    shadow?: string;
+    padding?: number;
+};
+
 export declare type Breakpoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 
 declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -729,7 +801,7 @@ declare interface ButtonProps extends React_2.ButtonHTMLAttributes<HTMLButtonEle
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "lg" | "sm" | "xs" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 
@@ -989,6 +1061,14 @@ declare type ChannelFormatConfig_2 = {
     };
 };
 
+declare type ChartAppearance = {
+    palette?: string[];
+    background?: string;
+    foreground?: string;
+    gridColor?: string;
+    axisColor?: string;
+};
+
 export declare interface ClickedMetricValue {
     field: Field;
     value: number;
@@ -1472,6 +1552,7 @@ export declare type DashboardProps = {
      */
     renderMode?: 'dashboard' | 'document';
     customStyle?: TStyle;
+    appearance?: AppearanceSpec;
     currentTheme?: Theme;
     version?: string;
     showAssistant?: boolean;
@@ -2844,6 +2925,7 @@ export declare type GetDashboardResponse = {
     defaultLensId?: string;
     assistantProfileId?: string;
     semanticExecutionPayload: SemanticExecutionPayload;
+    organizationAppearance?: AppearanceSpec | null;
 };
 
 /**
@@ -3063,6 +3145,10 @@ export declare interface InteractionTrigger {
     field: Field;
 }
 
+declare type InteractiveSurfaceAppearance = BaseSurfaceAppearance & {
+    toolbarBackground?: string;
+};
+
 export declare function invalidateToken(apiServiceUrl: string): Promise<any>;
 
 export declare function isBooleanDataType(dataType: string): boolean;
@@ -3844,6 +3930,54 @@ declare interface TableActions {
     updateAllColumnVisibility: (visibility: Record<string, boolean>) => void;
 }
 
+declare type TableAppearance = {
+    density?: AppearanceDensity;
+    container?: {
+        background?: string;
+        borderColor?: string;
+        borderRadius?: number;
+        shadow?: string;
+    };
+    header?: {
+        background?: string;
+        foreground?: string;
+        dividerColor?: string;
+        fontWeight?: number;
+        uppercase?: boolean;
+        sticky?: boolean;
+    };
+    row?: {
+        height?: number;
+        dividerColor?: string;
+        zebra?: boolean;
+        zebraBackground?: string;
+        hoverBackground?: string;
+        selectedBackground?: string;
+    };
+    cell?: {
+        paddingX?: number;
+        paddingY?: number;
+        verticalAlign?: 'top' | 'middle' | 'bottom';
+        wrap?: 'wrap' | 'nowrap';
+    };
+    subtotal?: {
+        background?: string;
+        foreground?: string;
+        fontWeight?: number;
+    };
+    grandTotal?: {
+        background?: string;
+        foreground?: string;
+        fontWeight?: number;
+        borderColor?: string;
+    };
+    pagination?: {
+        background?: string;
+        foreground?: string;
+        borderColor?: string;
+    };
+};
+
 export declare type TableConfig = {
     databaseName: string;
     schemaName: string;
@@ -4932,6 +5066,11 @@ export declare type UIConfig = {
      * Defaults to true unless explicitly disabled.
      */
     showQueryDebugTools?: boolean;
+    /**
+     * Optional signed inline appearance override for advanced embed cases.
+     * Organization appearance remains the default branding path.
+     */
+    appearance?: AppearanceSpec;
 };
 
 export declare function UnsavedChangesAlert({ open, onOpenChange, onSave, onDiscard, isSaving, title, description, cancelLabel, discardLabel, saveLabel, }: UnsavedChangesAlertProps): JSX.Element;
@@ -5522,6 +5661,7 @@ export declare function useDashboardQuery(): {
     isFetching: boolean;
     isError: boolean;
     refetch: (options?: RefetchOptions) => Promise<QueryObserverResult<GetDashboardResponse | null, Error>>;
+    dashboardIdToFetch: string | null;
 };
 
 export declare const useDashboardStore: UseBoundStore<Omit<StoreApi<DashboardStore>, "setState"> & {

package/dist/types/surfboard.d.ts

@@ -22,6 +22,69 @@ export declare type AIScopeTable = {
     datamodelName: string;
 };
 
+declare const APPEARANCE_SPEC_VERSION: 1;
+
+declare type AppearanceColorToken = 'background' | 'foreground' | 'muted' | 'mutedForeground' | 'border' | 'input' | 'primary' | 'primaryForeground' | 'accent' | 'accentForeground' | 'card' | 'cardForeground' | 'positive' | 'negative' | 'warning' | 'info' | 'destructive' | 'destructiveForeground';
+
+declare type AppearanceColorTokens = Partial<Record<AppearanceColorToken, string>>;
+
+declare type AppearanceDensity = 'compact' | 'comfortable' | 'spacious';
+
+declare type AppearanceMode = 'light' | 'dark' | 'system';
+
+declare type AppearanceScheme = {
+    tokens?: AppearanceTokens;
+    components?: {
+        dashboard?: BaseSurfaceAppearance;
+        card?: BaseSurfaceAppearance;
+        interactive?: InteractiveSurfaceAppearance;
+        chart?: ChartAppearance;
+        table?: TableAppearance;
+        pivotTable?: TableAppearance;
+        aggregateTable?: TableAppearance;
+        pagination?: BaseSurfaceAppearance;
+    };
+};
+
+declare type AppearanceSpec = {
+    version: typeof APPEARANCE_SPEC_VERSION;
+    mode?: AppearanceMode;
+    schemes?: {
+        light?: AppearanceScheme;
+        dark?: AppearanceScheme;
+    };
+};
+
+declare type AppearanceTokens = {
+    color?: AppearanceColorTokens;
+    typography?: {
+        fontFamily?: string;
+        headingFontFamily?: string;
+        monoFontFamily?: string;
+        baseFontSize?: number;
+        density?: AppearanceDensity;
+    };
+    radius?: {
+        control?: number;
+        card?: number;
+        table?: number;
+        badge?: number;
+    };
+    spacing?: {
+        dashboardPadding?: number;
+        gridGap?: number;
+        cardPadding?: number;
+        controlGap?: number;
+        tableCellX?: number;
+        tableCellY?: number;
+    };
+    shadow?: {
+        card?: string;
+        popover?: string;
+        focusRing?: string;
+    };
+};
+
 export declare type AssistantId = 'dashboard-assistant' | 'editor-assistant';
 
 export declare type AuthToken = {
@@ -77,6 +140,15 @@ declare type BaseFilter = {
     semanticContext?: FilterSemanticContext;
 };
 
+declare type BaseSurfaceAppearance = {
+    background?: string;
+    foreground?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    shadow?: string;
+    padding?: number;
+};
+
 export declare type Breakpoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 
 export declare type CacheConfig = {
@@ -218,6 +290,14 @@ declare type CardWithFooter = BaseCustomCard & {
     }>;
 };
 
+declare type ChartAppearance = {
+    palette?: string[];
+    background?: string;
+    foreground?: string;
+    gridColor?: string;
+    axisColor?: string;
+};
+
 declare interface ClickFilterInteraction {
     mode: 'clickFilter';
     /**
@@ -483,6 +563,7 @@ export declare type DashboardProps = {
      */
     renderMode?: 'dashboard' | 'document';
     customStyle?: TStyle;
+    appearance?: AppearanceSpec;
     currentTheme?: Theme;
     version?: string;
     showAssistant?: boolean;
@@ -1232,6 +1313,7 @@ export declare type GetDashboardResponse = {
     defaultLensId?: string;
     assistantProfileId?: string;
     semanticExecutionPayload: SemanticExecutionPayload;
+    organizationAppearance?: AppearanceSpec | null;
 };
 
 export declare type GetPluginsResponse = {
@@ -1339,6 +1421,10 @@ declare interface InteractionTrigger {
     field: Field;
 }
 
+declare type InteractiveSurfaceAppearance = BaseSurfaceAppearance & {
+    toolbarBackground?: string;
+};
+
 declare interface Join {
     id: string;
     source: DatabaseEntityReference;
@@ -1664,6 +1750,54 @@ export declare type StyleProps = {
 
 export declare function Surfboard({ showControls, showFooter, ...rest }: DashboardPlusProps): JSX.Element;
 
+declare type TableAppearance = {
+    density?: AppearanceDensity;
+    container?: {
+        background?: string;
+        borderColor?: string;
+        borderRadius?: number;
+        shadow?: string;
+    };
+    header?: {
+        background?: string;
+        foreground?: string;
+        dividerColor?: string;
+        fontWeight?: number;
+        uppercase?: boolean;
+        sticky?: boolean;
+    };
+    row?: {
+        height?: number;
+        dividerColor?: string;
+        zebra?: boolean;
+        zebraBackground?: string;
+        hoverBackground?: string;
+        selectedBackground?: string;
+    };
+    cell?: {
+        paddingX?: number;
+        paddingY?: number;
+        verticalAlign?: 'top' | 'middle' | 'bottom';
+        wrap?: 'wrap' | 'nowrap';
+    };
+    subtotal?: {
+        background?: string;
+        foreground?: string;
+        fontWeight?: number;
+    };
+    grandTotal?: {
+        background?: string;
+        foreground?: string;
+        fontWeight?: number;
+        borderColor?: string;
+    };
+    pagination?: {
+        background?: string;
+        foreground?: string;
+        borderColor?: string;
+    };
+};
+
 /**
  * Row rhythm for the whole table. Authors pick one per card; undefined
  * falls back to 'compact' (the canonical default — dense scanning, matches

package/dist/types/types.d.ts

@@ -213,6 +213,69 @@ export declare type AlertStateValue = 'OK' | 'FIRING';
 
 export declare type AlertStatus = 'ACTIVE' | 'PAUSED' | 'DISABLED';
 
+declare const APPEARANCE_SPEC_VERSION: 1;
+
+declare type AppearanceColorToken = 'background' | 'foreground' | 'muted' | 'mutedForeground' | 'border' | 'input' | 'primary' | 'primaryForeground' | 'accent' | 'accentForeground' | 'card' | 'cardForeground' | 'positive' | 'negative' | 'warning' | 'info' | 'destructive' | 'destructiveForeground';
+
+declare type AppearanceColorTokens = Partial<Record<AppearanceColorToken, string>>;
+
+declare type AppearanceDensity = 'compact' | 'comfortable' | 'spacious';
+
+declare type AppearanceMode = 'light' | 'dark' | 'system';
+
+declare type AppearanceScheme = {
+    tokens?: AppearanceTokens;
+    components?: {
+        dashboard?: BaseSurfaceAppearance;
+        card?: BaseSurfaceAppearance;
+        interactive?: InteractiveSurfaceAppearance;
+        chart?: ChartAppearance;
+        table?: TableAppearance;
+        pivotTable?: TableAppearance;
+        aggregateTable?: TableAppearance;
+        pagination?: BaseSurfaceAppearance;
+    };
+};
+
+export declare type AppearanceSpec = {
+    version: typeof APPEARANCE_SPEC_VERSION;
+    mode?: AppearanceMode;
+    schemes?: {
+        light?: AppearanceScheme;
+        dark?: AppearanceScheme;
+    };
+};
+
+declare type AppearanceTokens = {
+    color?: AppearanceColorTokens;
+    typography?: {
+        fontFamily?: string;
+        headingFontFamily?: string;
+        monoFontFamily?: string;
+        baseFontSize?: number;
+        density?: AppearanceDensity;
+    };
+    radius?: {
+        control?: number;
+        card?: number;
+        table?: number;
+        badge?: number;
+    };
+    spacing?: {
+        dashboardPadding?: number;
+        gridGap?: number;
+        cardPadding?: number;
+        controlGap?: number;
+        tableCellX?: number;
+        tableCellY?: number;
+    };
+    shadow?: {
+        card?: string;
+        popover?: string;
+        focusRing?: string;
+    };
+};
+
 export declare type AssistantId = 'dashboard-assistant' | 'editor-assistant';
 
 export declare type AuthToken = {
@@ -268,6 +331,15 @@ declare type BaseFilter = {
     semanticContext?: FilterSemanticContext;
 };
 
+declare type BaseSurfaceAppearance = {
+    background?: string;
+    foreground?: string;
+    borderColor?: string;
+    borderRadius?: number;
+    shadow?: string;
+    padding?: number;
+};
+
 export declare type Breakpoint = 'lg' | 'md' | 'sm' | 'xs' | 'xxs';
 
 export declare type CacheConfig = {
@@ -449,6 +521,14 @@ export declare type ChannelFormatConfig = {
     };
 };
 
+declare type ChartAppearance = {
+    palette?: string[];
+    background?: string;
+    foreground?: string;
+    gridColor?: string;
+    axisColor?: string;
+};
+
 declare interface ClickFilterInteraction {
     mode: 'clickFilter';
     /**
@@ -735,6 +815,7 @@ export declare type DashboardProps = {
      */
     renderMode?: 'dashboard' | 'document';
     customStyle?: TStyle;
+    appearance?: AppearanceSpec;
     currentTheme?: Theme;
     version?: string;
     showAssistant?: boolean;
@@ -1503,6 +1584,7 @@ export declare type GetDashboardResponse = {
     defaultLensId?: string;
     assistantProfileId?: string;
     semanticExecutionPayload: SemanticExecutionPayload;
+    organizationAppearance?: AppearanceSpec | null;
 };
 
 export declare type GetPluginsResponse = {
@@ -1610,6 +1692,10 @@ declare interface InteractionTrigger {
     field: Field;
 }
 
+declare type InteractiveSurfaceAppearance = BaseSurfaceAppearance & {
+    toolbarBackground?: string;
+};
+
 declare interface Join {
     id: string;
     source: DatabaseEntityReference;
@@ -1992,6 +2078,54 @@ export declare type StyleProps = {
     };
 };
 
+declare type TableAppearance = {
+    density?: AppearanceDensity;
+    container?: {
+        background?: string;
+        borderColor?: string;
+        borderRadius?: number;
+        shadow?: string;
+    };
+    header?: {
+        background?: string;
+        foreground?: string;
+        dividerColor?: string;
+        fontWeight?: number;
+        uppercase?: boolean;
+        sticky?: boolean;
+    };
+    row?: {
+        height?: number;
+        dividerColor?: string;
+        zebra?: boolean;
+        zebraBackground?: string;
+        hoverBackground?: string;
+        selectedBackground?: string;
+    };
+    cell?: {
+        paddingX?: number;
+        paddingY?: number;
+        verticalAlign?: 'top' | 'middle' | 'bottom';
+        wrap?: 'wrap' | 'nowrap';
+    };
+    subtotal?: {
+        background?: string;
+        foreground?: string;
+        fontWeight?: number;
+    };
+    grandTotal?: {
+        background?: string;
+        foreground?: string;
+        fontWeight?: number;
+        borderColor?: string;
+    };
+    pagination?: {
+        background?: string;
+        foreground?: string;
+        borderColor?: string;
+    };
+};
+
 /**
  * Row rhythm for the whole table. Authors pick one per card; undefined
  * falls back to 'compact' (the canonical default — dense scanning, matches
@@ -3044,6 +3178,11 @@ export declare type UIConfig = {
      * Defaults to true unless explicitly disabled.
      */
     showQueryDebugTools?: boolean;
+    /**
+     * Optional signed inline appearance override for advanced embed cases.
+     * Organization appearance remains the default branding path.
+     */
+    appearance?: AppearanceSpec;
 };
 
 export declare interface UpdateAlertRequest {

package/package.json

@@ -5,7 +5,7 @@
     "email": "support@semaphor.cloud"
   },
   "license": "MIT",
-  "version": "0.1.301",
+  "version": "0.1.302",
   "description": "Fully interactive and customizable dashboards for your apps.",
   "keywords": [
     "react",
@@ -47,6 +47,16 @@
       "import": "./dist/layouts/index.js",
       "require": "./dist/layouts/index.cjs"
     },
+    "./appearance": {
+      "types": "./dist/types/appearance.d.ts",
+      "import": "./dist/appearance/index.js",
+      "require": "./dist/appearance/index.cjs"
+    },
+    "./brand-studio": {
+      "types": "./dist/types/brand-studio.d.ts",
+      "import": "./dist/brand-studio/index.js",
+      "require": "./dist/brand-studio/index.cjs"
+    },
     "./format-utils": {
       "types": "./dist/types/format-utils.d.ts",
       "import": "./dist/format-utils/index.js",
@@ -127,6 +137,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^1.1.1",
+    "culori": "^4.0.2",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.2.0",
     "dompurify": "^3.3.1",
@@ -178,6 +189,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/chart.js": "^2.9.41",
+    "@types/culori": "^4.0.1",
     "@types/dompurify": "^3.0.5",
     "@types/jsoneditor": "^9.9.5",
     "@types/lodash.merge": "^4.6.9",