@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/storybook/VireoIconContainer/VireoIconContainerComparisonFrame.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Typography } from "@mui/material";
+import { alpha } from "@mui/material/styles";
+const PREVIEW_SCALE = 4;
+const TARGET_VIEW_BOX_SIZE = 24;
+const TARGET_PREVIEW_SIZE = TARGET_VIEW_BOX_SIZE * PREVIEW_SCALE;
+function IconCoordinateGrid({ children, measurement, measurementColor }) {
+    return (_jsxs(Box, { sx: {
+            border: "1px solid",
+            borderColor: "divider",
+            borderRadius: 2,
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "min(100%, 280px)",
+            height: 240,
+            overflow: "visible",
+            color: "text.primary",
+            backgroundColor: "background.default",
+            backgroundImage: theme => `linear-gradient(${alpha(theme.palette.divider, 0.45)} 1px, transparent 1px), linear-gradient(90deg, ${alpha(theme.palette.divider, 0.45)} 1px, transparent 1px)`,
+            backgroundPosition: "center center",
+            backgroundSize: `${PREVIEW_SCALE * 2}px ${PREVIEW_SCALE * 2}px`,
+        }, children: [_jsx(Typography, { color: measurementColor, variant: "caption", sx: [
+                    {
+                        px: 1.25,
+                        py: 0.5,
+                        border: "1px solid",
+                        borderColor: measurementColor,
+                        borderRadius: 1,
+                        position: "absolute",
+                        top: 24,
+                        fontWeight: 700,
+                    },
+                    theme => ({
+                        backgroundColor: alpha(measurementColor === "error.main" ? theme.palette.error.main : theme.palette.success.main, 0.12),
+                        lineHeight: 1.4,
+                        whiteSpace: "nowrap",
+                    }),
+                ], children: measurement }), _jsx(Box, { sx: [
+                    {
+                        border: "1px dashed",
+                        borderColor: "primary.main",
+                        position: "absolute",
+                        width: TARGET_PREVIEW_SIZE,
+                        height: TARGET_PREVIEW_SIZE,
+                    },
+                    theme => ({
+                        backgroundColor: alpha(theme.palette.primary.main, 0.04),
+                        pointerEvents: "none",
+                    }),
+                ] }), _jsx(Box, { sx: {
+                    position: "relative",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: children }), _jsxs(Typography, { color: "text.secondary", variant: "caption", sx: {
+                    px: 1,
+                    py: 0.25,
+                    borderRadius: 1,
+                    position: "absolute",
+                    bottom: 20,
+                    backgroundColor: "background.default",
+                    whiteSpace: "nowrap",
+                }, children: ["24\u00D724 target \u00B7 ", PREVIEW_SCALE, "\u00D7 preview"] })] }));
+}
+function IconPreview({ children, description, title }) {
+    return (_jsxs(Stack, { sx: {
+            flex: "1 1 0",
+            minWidth: 0,
+            gap: 1.5,
+        }, children: [_jsxs(Box, { children: [_jsx(Typography, { sx: {
+                            fontWeight: 700,
+                        }, children: title }), _jsx(Typography, { color: "text.secondary", variant: "body2", sx: { minHeight: { md: "2lh" } }, children: description })] }), _jsx(Box, { sx: {
+                    border: "1px solid",
+                    borderColor: "divider",
+                    borderRadius: 2,
+                    flexGrow: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minHeight: 192,
+                    padding: 3,
+                    backgroundColor: "background.paper",
+                }, children: children })] }));
+}
+/** Story presentation frame for comparing source SVG geometry with Vireo's normalized output. */
+export function VireoIconContainerComparisonFrame({ normalized, original, sourceDimensions, }) {
+    return (_jsxs(Stack, { direction: { xs: "column", md: "row" }, sx: {
+            width: "100%",
+            gap: 3,
+        }, children: [_jsx(IconPreview, { title: "Original geometry", description: `${sourceDimensions} source SVG shown at its native canvas size.`, children: _jsx(IconCoordinateGrid, { measurement: `${sourceDimensions} (without VireoIconContainer)`, measurementColor: "error.main", children: original }) }), _jsx(IconPreview, { title: "Normalized with VireoIconContainer", description: `${sourceDimensions} source geometry proportionally scaled and centered in a 24×24 output canvas.`, children: _jsx(IconCoordinateGrid, { measurement: "24\u00D724 (with VireoIconContainer)", measurementColor: "success.main", children: normalized }) })] }));
+}

package/dist/storybook/VireoIconContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { VireoIconContainerComparisonFrame } from "./VireoIconContainerComparisonFrame.js";
+export type { VireoIconContainerComparisonFrameProps } from "./VireoIconContainerComparisonFrame.js";

package/dist/storybook/VireoIconContainer/index.js

@@ -0,0 +1 @@
+export { VireoIconContainerComparisonFrame } from "./VireoIconContainerComparisonFrame.js";

package/dist/storybook/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrameCustomerDetails.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export type VireoResponsiveOverlayFrameCustomerDetailsProps = {
+    header: React.ReactNode;
+    onClose: () => void;
+};
+/** Reusable customer-details content for responsive overlay examples. */
+export declare function VireoResponsiveOverlayFrameCustomerDetails({ header, onClose, }: VireoResponsiveOverlayFrameCustomerDetailsProps): React.JSX.Element;

package/dist/storybook/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrameCustomerDetails.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Chip, Divider, Stack, Typography } from "@mui/material";
+/** Reusable customer-details content for responsive overlay examples. */
+export function VireoResponsiveOverlayFrameCustomerDetails({ header, onClose, }) {
+    return (_jsxs(_Fragment, { children: [header, _jsx(Box, { sx: { flex: 1, minHeight: 0, overflowY: "auto", p: 3 }, children: _jsxs(Stack, { spacing: 2, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "overline", color: "text.secondary", children: "CUS-10482" }), _jsx(Typography, { variant: "h5", children: "Northstar Analytics" })] }), _jsx(Divider, {}), _jsxs(Stack, { direction: "row", sx: {
+                                justifyContent: "space-between",
+                            }, children: [_jsx(Typography, { color: "text.secondary", children: "Account status" }), _jsx(Chip, { label: "Active", size: "small", color: "success" })] }), _jsxs(Stack, { direction: "row", sx: {
+                                justifyContent: "space-between",
+                            }, children: [_jsx(Typography, { color: "text.secondary", children: "Annual value" }), _jsx(Typography, { sx: {
+                                        fontWeight: 700,
+                                    }, children: "$48,600" })] })] }) }), _jsxs(Stack, { direction: "row", spacing: 1, sx: {
+                    justifyContent: "flex-end",
+                    p: 2,
+                    borderTop: 1,
+                    borderColor: "divider",
+                }, children: [_jsx(Button, { onClick: onClose, children: "Cancel" }), _jsx(Button, { variant: "contained", children: "Edit customer" })] })] }));
+}

package/dist/storybook/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrameWorkspace.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+export type VireoResponsiveOverlayFrameWorkspaceProps = {
+    children: React.ReactNode;
+    onOpen: () => void;
+};
+/** Neutral workspace used by VireoResponsiveOverlayFrame executable examples. */
+export declare function VireoResponsiveOverlayFrameWorkspace({ children, onOpen }: VireoResponsiveOverlayFrameWorkspaceProps): React.JSX.Element;

package/dist/storybook/VireoResponsiveOverlayFrame/VireoResponsiveOverlayFrameWorkspace.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Stack, Typography } from "@mui/material";
+/** Neutral workspace used by VireoResponsiveOverlayFrame executable examples. */
+export function VireoResponsiveOverlayFrameWorkspace({ children, onOpen }) {
+    return (_jsxs(Box, { sx: { display: "flex", width: "100%", minWidth: { xs: 0, md: 720 }, height: 520, overflow: "hidden" }, children: [_jsxs(Box, { component: "main", sx: { flex: 1, minWidth: 0, p: 3, bgcolor: "background.default" }, children: [_jsxs(Stack, { direction: "row", spacing: 2, sx: {
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                        }, children: [_jsxs(Box, { children: [_jsx(Typography, { variant: "overline", color: "primary.main", children: "Operations" }), _jsx(Typography, { variant: "h4", children: "Customer accounts" })] }), _jsx(Button, { variant: "contained", onClick: onOpen, children: "View customer details" })] }), _jsx(Typography, { color: "text.secondary", sx: { mt: 3 }, children: "Open the same customer flow on a mobile or desktop viewport to see the selected responsive surface." })] }), children] }));
+}

package/dist/storybook/VireoResponsiveOverlayFrame/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./VireoResponsiveOverlayFrameCustomerDetails.js";
+export * from "./VireoResponsiveOverlayFrameWorkspace.js";

package/dist/storybook/VireoResponsiveOverlayFrame/index.js

@@ -0,0 +1,2 @@
+export * from "./VireoResponsiveOverlayFrameCustomerDetails.js";
+export * from "./VireoResponsiveOverlayFrameWorkspace.js";

package/dist/storybook/VireoStorybookProvider.d.ts

@@ -0,0 +1,9 @@
+import { type VireoTemporalLocale } from "../integrations/localization/public.js";
+import type React from "react";
+export type VireoStorybookProviderProps = {
+    children: React.ReactNode;
+    /** Temporal locale used by stories that do not demonstrate localization. @default 'en' */
+    temporalLocale?: VireoTemporalLocale;
+};
+/** Reproduces the shared dark Vireo review surface used by executable Storybook examples. */
+export declare function VireoStorybookProvider({ children, temporalLocale }: VireoStorybookProviderProps): React.JSX.Element;

package/dist/storybook/VireoStorybookProvider.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+import { VireoTemporalLocalizationProvider } from "../integrations/localization/public.js";
+const vireoStorybookReviewTheme = createTheme({
+    cssVariables: true,
+    typography: {
+        fontFamily: "Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    },
+    shape: {
+        borderRadius: 8,
+    },
+    palette: {
+        mode: "dark",
+        primary: {
+            main: "#36c7fa",
+            light: "#7cd9fd",
+            dark: "#0170a3",
+            contrastText: "#101828",
+        },
+        background: {
+            default: "#080d18",
+            paper: "#1d2939",
+        },
+        divider: "#344054",
+        text: {
+            primary: "#f9fafb",
+            secondary: "#98a2b3",
+        },
+    },
+});
+/** Reproduces the shared dark Vireo review surface used by executable Storybook examples. */
+export function VireoStorybookProvider({ children, temporalLocale = "en" }) {
+    return (_jsx(ThemeProvider, { theme: vireoStorybookReviewTheme, children: _jsxs(VireoTemporalLocalizationProvider, { locale: temporalLocale, children: [_jsx(CssBaseline, {}), _jsx(Box, { color: "text.primary", sx: {
+                        width: "100%",
+                        minWidth: 0,
+                    }, children: children })] }) }));
+}

package/dist/storybook/documentation/ExecutablePackageExample.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export type ExecutablePackageExampleProps<TResult> = {
+    run: () => TResult | Promise<TResult>;
+    source: string;
+    outputLabel?: string;
+};
+/** Storybook-only renderer for executable, framework-free package examples. */
+export declare function ExecutablePackageExample<TResult>({ run, source, outputLabel, }: ExecutablePackageExampleProps<TResult>): React.JSX.Element;

package/dist/storybook/documentation/ExecutablePackageExample.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Source } from "@storybook/addon-docs/blocks";
+import React from "react";
+function formatResult(value) {
+    if (typeof value === "string")
+        return value;
+    if (value === undefined)
+        return "undefined";
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return String(value);
+    }
+}
+function errorMessage(error) {
+    return error instanceof Error ? error.message : String(error);
+}
+/** Storybook-only renderer for executable, framework-free package examples. */
+export function ExecutablePackageExample({ run, source, outputLabel = "Live output", }) {
+    const [state, setState] = React.useState({ status: "pending" });
+    React.useEffect(() => {
+        let active = true;
+        setState({ status: "pending" });
+        Promise.resolve()
+            .then(run)
+            .then(value => {
+            if (active)
+                setState({ status: "resolved", value });
+        }, error => {
+            if (active)
+                setState({ status: "rejected", error });
+        });
+        return () => {
+            active = false;
+        };
+    }, [run]);
+    return (_jsxs("div", { className: "vireo-package-example", children: [_jsxs("section", { "aria-busy": state.status === "pending", className: "vireo-package-example__output", children: [_jsx("div", { className: "vireo-package-example__label", children: outputLabel }), state.status === "pending" && _jsx("div", { className: "vireo-package-example__pending", children: "Running example\u2026" }), state.status === "resolved" && _jsx("pre", { children: formatResult(state.value) }), state.status === "rejected" && _jsx("pre", { className: "vireo-package-example__error", children: errorMessage(state.error) })] }), _jsxs("details", { className: "vireo-package-example__source", children: [_jsx("summary", { children: "Show code" }), _jsx(Source, { code: source.trim(), language: "typescript" })] })] }));
+}

package/dist/storybook/documentation/index.d.ts

@@ -0,0 +1 @@
+export { ExecutablePackageExample, type ExecutablePackageExampleProps } from "./ExecutablePackageExample.js";

package/dist/storybook/documentation/index.js

@@ -0,0 +1 @@
+export { ExecutablePackageExample } from "./ExecutablePackageExample.js";

package/dist/storybook/index.d.ts

@@ -0,0 +1,4 @@
+export { VireoStorybookProvider } from "./VireoStorybookProvider.js";
+export type { VireoStorybookProviderProps } from "./VireoStorybookProvider.js";
+export { VireoEventSourceStoryServer } from "./VireoEventSourceStoryServer.js";
+export type { VireoEventSourceStoryServerController, VireoEventSourceStoryServerProps, } from "./VireoEventSourceStoryServer.js";

package/dist/storybook/index.js

@@ -0,0 +1,2 @@
+export { VireoStorybookProvider } from "./VireoStorybookProvider.js";
+export { VireoEventSourceStoryServer } from "./VireoEventSourceStoryServer.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vireocodedev/ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "MUI-based UI component library (responsive cards, mobile tables, overlays, providers, hooks, formatters) for the vireocodedev starter product.",
   "type": "module",
   "sideEffects": [
@@ -110,10 +110,10 @@
     "build-storybook": "storybook build -c .storybook-vireo"
   },
   "dependencies": {
-    "@vireocodedev/history": "^0.2.0",
-    "@vireocodedev/infrastructure": "^0.2.0",
-    "@vireocodedev/localization": "^0.2.0",
-    "@vireocodedev/query": "^0.2.0",
+    "@vireocodedev/history": "^0.2.1",
+    "@vireocodedev/infrastructure": "^0.2.1",
+    "@vireocodedev/localization": "^0.2.1",
+    "@vireocodedev/query": "^0.2.1",
     "country-flag-icons": "1.6.20",
     "react-error-boundary": "^6.1.3"
   },