@pstdio/ui 0.23.0 → 0.24.1

package/dist/theme/primitives/colors.d.ts

@@ -533,6 +533,40 @@ export declare const mint: {
     };
 };
 export declare const colors: {
+    windowControl: {
+        close: {
+            value: string;
+        };
+        minimize: {
+            value: string;
+        };
+        zoom: {
+            value: string;
+        };
+    };
+    illustration: {
+        desktop: {
+            value: string;
+        };
+        page: {
+            value: string;
+        };
+        command: {
+            value: string;
+        };
+        editor: {
+            value: string;
+        };
+        skill: {
+            value: string;
+        };
+        hook: {
+            value: string;
+        };
+        automation: {
+            value: string;
+        };
+    };
     sand: {
         DEFAULT: {
             value: string;

package/dist/theme/primitives/sizes.d.ts

@@ -75,8 +75,14 @@ export declare const spacing: {
     "5xl": {
         value: string;
     };
+    "panel-gap": {
+        value: string;
+    };
 };
 export declare const sizes: {
+    "panel-gap": {
+        value: string;
+    };
     "window-title-bar": {
         value: string;
     };
@@ -89,6 +95,9 @@ export declare const sizes: {
     "window-tab-max": {
         value: string;
     };
+    "mobile-titlebar": {
+        value: string;
+    };
     "collection-row": {
         value: string;
     };

package/dist/theme/recipes/landing-story.d.ts

@@ -0,0 +1,10 @@
+export declare const landingStorySlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"page" | "section" | "block" | "panel" | "featureSection" | "intro" | "visual" | "panels" | "panelHeader" | "panelBody" | "blockGrid" | "blockSymbol" | "blockMark" | "composition", {
+    spacing: {
+        normal: {};
+        spacious: {
+            page: {
+                gap: "5xl";
+            };
+        };
+    };
+}>;

package/dist/theme/recipes/landing-tool-demo.d.ts

@@ -0,0 +1 @@
+export declare const landingToolDemoSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"toolbar" | "preview" | "iconEditor" | "iconPicker" | "iconGrid" | "iconTile" | "iconName" | "tileSymbol" | "iconCanvas" | "inspectorSymbol" | "inspector" | "metrics" | "metric" | "sessions" | "session" | "sessionStatus" | "checks" | "prompt" | "plot" | "plotGrid" | "plotCurve" | "plotComparison" | "plotCursor" | "plotPoint" | "shaderCode" | "shaderCanvas" | "extensionPanels", import('@chakra-ui/react').SlotRecipeVariantRecord<"toolbar" | "preview" | "iconEditor" | "iconPicker" | "iconGrid" | "iconTile" | "iconName" | "tileSymbol" | "iconCanvas" | "inspectorSymbol" | "inspector" | "metrics" | "metric" | "sessions" | "session" | "sessionStatus" | "checks" | "prompt" | "plot" | "plotGrid" | "plotCurve" | "plotComparison" | "plotCursor" | "plotPoint" | "shaderCode" | "shaderCanvas" | "extensionPanels">>;

package/dist/theme/recipes/landing.d.ts

@@ -0,0 +1,23 @@
+export declare const landingSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "main" | "status" | "root" | "windowControl" | "download" | "window" | "titlebar" | "windowControls" | "mobileTitlebar" | "mobileNav" | "sidebar" | "hero" | "heroCopy" | "heroNavigation" | "tools" | "brandTab" | "panelsScroll" | "panelScroll", {
+    windowed: {
+        true: {
+            root: {
+                bg: "illustration.desktop";
+            };
+            window: {
+                height: "calc(100dvh - 12rem)";
+                width: "calc(100% - 15rem)";
+                mx: "7.5rem";
+                my: "6rem";
+                borderRadius: "lg";
+                boxShadow: "2xl";
+            };
+            titlebar: {
+                cursor: "grab";
+                _active: {
+                    cursor: "grabbing";
+                };
+            };
+        };
+    };
+}>;

package/dist/theme/recipes/resizable-split-layout.d.ts

@@ -0,0 +1,106 @@
+export declare const resizableSplitLayoutSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "separator" | "resizablePanel" | "contentPanel", {
+    orientation: {
+        horizontal: {
+            root: {
+                "--split-direction": "row";
+                "--split-width": "var(--split-size)";
+                "--split-height": "100%";
+            };
+        };
+        vertical: {
+            root: {
+                "--split-direction": "column";
+                "--split-width": "100%";
+                "--split-height": "var(--split-size)";
+            };
+        };
+    };
+    layout: {
+        split: {
+            root: {
+                flexDirection: "var(--split-direction)";
+                height: "full";
+                overflow: "hidden";
+                gap: "0";
+            };
+            resizablePanel: {
+                display: "flex";
+                width: "var(--split-width)";
+                height: "var(--split-height)";
+                flex: "0 0 var(--split-size)";
+                overflow: "hidden";
+            };
+            contentPanel: {
+                height: "full";
+                flex: "1";
+                overflow: "hidden";
+            };
+            separator: {
+                display: "flex";
+            };
+        };
+        stacked: {
+            readonly root: {
+                readonly flexDirection: "column";
+                readonly height: "auto";
+                readonly overflow: "visible";
+                readonly gap: "panel-gap";
+            };
+            readonly resizablePanel: {
+                readonly display: "flex";
+                readonly width: "full";
+                readonly height: "auto";
+                readonly flex: "initial";
+                readonly overflow: "visible";
+            };
+            readonly contentPanel: {
+                readonly height: "auto";
+                readonly flex: "initial";
+                readonly overflow: "visible";
+            };
+            readonly separator: {
+                readonly display: "none";
+            };
+        };
+        "stacked-reverse": {
+            root: {
+                flexDirection: "column-reverse";
+                height: "auto";
+                overflow: "visible";
+                gap: "panel-gap";
+            };
+            resizablePanel: {
+                readonly display: "flex";
+                readonly width: "full";
+                readonly height: "auto";
+                readonly flex: "initial";
+                readonly overflow: "visible";
+            };
+            contentPanel: {
+                readonly height: "auto";
+                readonly flex: "initial";
+                readonly overflow: "visible";
+            };
+            separator: {
+                readonly display: "none";
+            };
+        };
+        content: {
+            root: {
+                height: "full";
+                overflow: "hidden";
+            };
+            resizablePanel: {
+                display: "none";
+            };
+            contentPanel: {
+                height: "full";
+                flex: "1";
+                overflow: "hidden";
+            };
+            separator: {
+                display: "none";
+            };
+        };
+    };
+}>;

package/dist/theme/tokens/colors-background.d.ts

@@ -0,0 +1,260 @@
+export declare const bg: {
+    DEFAULT: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    muted: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    subtle: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    hover: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    active: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    info: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    warning: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    success: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    error: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    code: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    emphasized: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    elevated: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    inverted: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    panel: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    dark: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    white: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    button: {
+        primary: {
+            default: {
+                value: string;
+            };
+            hover: {
+                value: string;
+            };
+            pressed: {
+                value: string;
+            };
+            disabled: {
+                value: string;
+            };
+        };
+    };
+    "menu-item": {
+        default: {
+            value: string;
+        };
+        hover: {
+            value: string;
+        };
+        focus: {
+            value: string;
+        };
+        selected: {
+            value: string;
+        };
+    };
+    display: {
+        "very-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+    };
+    "accent-primary": {
+        default: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        hover: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        pressed: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "very-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        light: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        medium: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        dark: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+    };
+    "accent-secondary": {
+        "grey-dark": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "grey-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "red-very-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "red-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "pink-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "pink-medium": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "blue-very-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "blue-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "blue-medium": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "blue-dark": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "cyan-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "green-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        "sand-light": {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+    };
+};

package/dist/theme/tokens/colors-visualization.d.ts

@@ -0,0 +1,162 @@
+export declare const vis: {
+    text: {
+        primary: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        secondary: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+    };
+    grid: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    axis: {
+        value: {
+            _light: string;
+            _dark: string;
+        };
+    };
+    categorical: {
+        1: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        2: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        3: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        4: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        5: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        6: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+        7: {
+            value: {
+                _light: string;
+                _dark: string;
+            };
+        };
+    };
+    sequential: {
+        blue: {
+            "low-3": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "low-2": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "low-1": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            default: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "high-1": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "high-2": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "high-3": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+        };
+        red: {
+            "low-3": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "low-2": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "low-1": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            default: {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "high-1": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "high-2": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+            "high-3": {
+                value: {
+                    _light: string;
+                    _dark: string;
+                };
+            };
+        };
+    };
+};