@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/core/components/data-display/VireoIcon/VireoIcon.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoIcon integration point. */
+export declare const VIREO_ICON_NAME = "VireoIcon";
+/** Canonical public slots exposed by VireoIcon, in rendered DOM order. */
+export declare const VIREO_ICON_SLOTS: readonly ["root"];
+/** Public slot names exposed by VireoIcon. */
+export type VireoIconSlotName = (typeof VIREO_ICON_SLOTS)[number];

package/dist/core/components/data-display/VireoIcon/VireoIcon.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoIcon integration point. */
+export const VIREO_ICON_NAME = "VireoIcon";
+/** Canonical public slots exposed by VireoIcon, in rendered DOM order. */
+export const VIREO_ICON_SLOTS = ["root"];

package/dist/core/components/data-display/VireoIcon/VireoIcon.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useVireoIcons } from "../../../../core/hooks/useVireoIcons/useVireoIcons.js";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoIconUtilityClass } from "./VireoIcon.classes.js";
+import { VIREO_ICON_NAME } from "./VireoIcon.identity.js";
+import { VireoIconRoot } from "./VireoIcon.styled.js";
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+    }, getVireoIconUtilityClass, classes);
+}
+/** Renders a type-safe icon from the nearest Vireo icon registry. */
+export const VireoIcon = React.forwardRef(function VireoIcon(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_ICON_NAME });
+    const { className, classes: classesProp, fill = "none", height = 24, icon, slotProps = {}, slots = {}, stroke = "currentColor", style, sx, width = 24, ...other } = props;
+    const { muiIconsMap } = useVireoIcons();
+    const IconComponent = muiIconsMap[icon];
+    if (!IconComponent)
+        throw new Error(`Icon component for "${String(icon)}" was not registered.`);
+    const ownerState = { icon };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    return (_jsx(VireoIconRoot, { ...other, ...rootSlotOther, as: slots.root ?? IconComponent, ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), fill: fill, stroke: stroke, width: width, height: height, style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx) }));
+});
+VireoIcon.displayName = VIREO_ICON_NAME;

package/dist/core/components/data-display/VireoIcon/VireoIcon.styled.d.ts

@@ -0,0 +1,6 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type SvgIconProps } from "@mui/material";
+import { type VireoIconOwnerState } from "./VireoIcon.types.js";
+type VireoIconStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoIconOwnerState>;
+export declare const VireoIconRoot: VireoIconStyledSlotComponent<SvgIconProps>;
+export {};

package/dist/core/components/data-display/VireoIcon/VireoIcon.styled.js

@@ -0,0 +1,8 @@
+import { SvgIcon } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_ICON_NAME } from "./VireoIcon.identity.js";
+export const VireoIconRoot = styled(SvgIcon, {
+    name: VIREO_ICON_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})({});

package/dist/core/components/data-display/VireoIcon/VireoIcon.types.d.ts

@@ -0,0 +1,39 @@
+import type { VireoIconName } from "../../../../core/providers/VireoIconRegistryProvider/VireoIconRegistryProvider.js";
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { SvgIcon, SvgIconProps } from "@mui/material";
+import type { VireoThemeComponent } from "../../../../core/utils/muiutils.js";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoIconClasses, type VireoIconClassKey } from "./VireoIcon.classes.js";
+import type { VIREO_ICON_NAME, VireoIconSlotName } from "./VireoIcon.identity.js";
+export type VireoIconOwnerState = {
+    icon: VireoIconName;
+};
+export interface VireoIconRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoIcon}. */
+export type VireoIconSlots = {
+    [TSlotName in VireoIconSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoIcon}. */
+export type VireoIconSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoIconSlots, {
+    /** @default Registered icon component */
+    root: SlotProps<typeof SvgIcon, VireoIconRootSlotPropsOverrides, VireoIconOwnerState>;
+}>;
+/** Props owned by {@link VireoIcon}. */
+export type VireoIconOwnProps = VireoIconSlotsAndSlotProps & {
+    /** Name of an icon registered through VireoIconRegistryProvider. */
+    icon: VireoIconName;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoIconClasses>;
+};
+/** Props VireoIcon inherits from its default root after excluding component-owned props. */
+export type VireoIconInheritedProps = Omit<SvgIconProps, "children" | "component">;
+/** Props accepted by {@link VireoIcon}. */
+export type VireoIconProps = VireoIconOwnProps & VireoIconInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_ICON_NAME]?: VireoThemeComponent<VireoIconProps, VireoIconClassKey, VireoIconOwnerState, Theme>;
+    }
+}

package/dist/core/components/data-display/VireoIcon/VireoIcon.types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/components/data-display/VireoIcon/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoIcon.js";
+export * from "./VireoIcon.classes.js";
+export * from "./VireoIcon.types.js";

package/dist/core/components/data-display/VireoIcon/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoIcon.js";
+export * from "./VireoIcon.classes.js";
+export * from "./VireoIcon.types.js";

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoJsonViewerSlotName } from "./VireoJsonViewer.identity.js";
+/** Utility classes available to VireoJsonViewer. */
+export type VireoJsonViewerClasses = Record<VireoJsonViewerSlotName, string>;
+/** Valid keys for VireoJsonViewer utility classes and theme style overrides. */
+export type VireoJsonViewerClassKey = keyof VireoJsonViewerClasses;
+/** Returns the generated utility class name for a VireoJsonViewer slot or state. */
+export declare function getVireoJsonViewerUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoJsonViewer class key. */
+export declare const vireoJsonViewerClasses: VireoJsonViewerClasses;

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.classes.js

@@ -0,0 +1,10 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_JSON_VIEWER_NAME, VIREO_JSON_VIEWER_SLOTS, } from "./VireoJsonViewer.identity.js";
+/** Returns the generated utility class name for a VireoJsonViewer slot or state. */
+export function getVireoJsonViewerUtilityClass(slot) {
+    return generateUtilityClass(VIREO_JSON_VIEWER_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoJsonViewer class key. */
+export const vireoJsonViewerClasses = generateUtilityClasses(VIREO_JSON_VIEWER_NAME, [
+    ...VIREO_JSON_VIEWER_SLOTS,
+]);

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { type VireoJsonViewerProps } from "./VireoJsonViewer.types.js";
+/** Pretty-prints arbitrary values as inspectable JSON with resilient serialization and copy-to-clipboard feedback. */
+export declare const VireoJsonViewer: React.ForwardRefExoticComponent<Omit<VireoJsonViewerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoJsonViewer integration point. */
+export declare const VIREO_JSON_VIEWER_NAME = "VireoJsonViewer";
+/** Canonical public slots exposed by VireoJsonViewer, in rendered DOM order. */
+export declare const VIREO_JSON_VIEWER_SLOTS: readonly ["root", "toolbar", "copyButton", "copyIcon", "content"];
+/** Public slot names exposed by VireoJsonViewer. */
+export type VireoJsonViewerSlotName = (typeof VIREO_JSON_VIEWER_SLOTS)[number];

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.identity.js

@@ -0,0 +1,10 @@
+/** Stable component name shared by every VireoJsonViewer integration point. */
+export const VIREO_JSON_VIEWER_NAME = "VireoJsonViewer";
+/** Canonical public slots exposed by VireoJsonViewer, in rendered DOM order. */
+export const VIREO_JSON_VIEWER_SLOTS = [
+    "root",
+    "toolbar",
+    "copyButton",
+    "copyIcon",
+    "content",
+];

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.js";
+import { Tooltip, unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoJsonViewerUtilityClass } from "./VireoJsonViewer.classes.js";
+import { VIREO_JSON_VIEWER_NAME } from "./VireoJsonViewer.identity.js";
+import { VireoJsonViewerContent, VireoJsonViewerCopyButton, VireoJsonViewerCopyIcon, VireoJsonViewerRoot, VireoJsonViewerToolbar, } from "./VireoJsonViewer.styled.js";
+const COPY_FEEDBACK_DURATION_MS = 1500;
+function createJsonReplacer() {
+    const seen = new WeakSet();
+    return (_key, value) => {
+        if (value instanceof Error) {
+            return { name: value.name, message: value.message, stack: value.stack };
+        }
+        if (typeof value === "bigint")
+            return value.toString();
+        if (typeof value === "function")
+            return `<function ${value.name || "anonymous"}>`;
+        if (typeof value === "symbol")
+            return `<symbol ${value.description ?? ""}>`;
+        if (typeof value === "undefined")
+            return "<undefined>";
+        if (typeof value === "object" && value !== null) {
+            if (seen.has(value))
+                return "<circular>";
+            seen.add(value);
+        }
+        return value;
+    };
+}
+function stringifyJson(data) {
+    try {
+        return JSON.stringify(data, createJsonReplacer(), 2) ?? String(data);
+    }
+    catch (error) {
+        return `<unable to stringify: ${error instanceof Error ? error.message : String(error)}>`;
+    }
+}
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        toolbar: ["toolbar"],
+        copyButton: ["copyButton"],
+        copyIcon: ["copyIcon"],
+        content: ["content"],
+    }, getVireoJsonViewerUtilityClass, classes);
+}
+/** Pretty-prints arbitrary values as inspectable JSON with resilient serialization and copy-to-clipboard feedback. */
+export const VireoJsonViewer = React.forwardRef(function VireoJsonViewer(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_JSON_VIEWER_NAME });
+    const { className, classes: classesProp, copiedLabel, copyLabel, data, maxHeight = "24rem", slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const [copied, setCopied] = React.useState(false);
+    const copyFeedbackTimeoutRef = React.useRef(null);
+    const text = React.useMemo(() => stringifyJson(data), [data]);
+    const ownerState = { copied, maxHeight };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const resolvedToolbarSlotProps = resolveSlotProps(slotProps.toolbar, ownerState);
+    const resolvedCopyButtonSlotProps = resolveSlotProps(slotProps.copyButton, ownerState);
+    const resolvedCopyIconSlotProps = resolveSlotProps(slotProps.copyIcon, ownerState);
+    const resolvedContentSlotProps = resolveSlotProps(slotProps.content, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const { className: toolbarSlotClassName, ...toolbarSlotOther } = resolvedToolbarSlotProps;
+    const { className: copyButtonSlotClassName, onClick: copyButtonSlotOnClick, ...copyButtonSlotOther } = resolvedCopyButtonSlotProps;
+    const { className: copyIconSlotClassName, ...copyIconSlotOther } = resolvedCopyIconSlotProps;
+    const { className: contentSlotClassName, ...contentSlotOther } = resolvedContentSlotProps;
+    const currentCopyLabel = copied ? copiedLabel : copyLabel;
+    const clearCopyFeedbackTimeout = React.useCallback(() => {
+        if (copyFeedbackTimeoutRef.current === null || typeof window === "undefined")
+            return;
+        window.clearTimeout(copyFeedbackTimeoutRef.current);
+        copyFeedbackTimeoutRef.current = null;
+    }, []);
+    React.useEffect(() => clearCopyFeedbackTimeout, [clearCopyFeedbackTimeout]);
+    React.useEffect(() => {
+        clearCopyFeedbackTimeout();
+        setCopied(false);
+    }, [clearCopyFeedbackTimeout, text]);
+    const handleCopyClick = React.useCallback(async (event) => {
+        copyButtonSlotOnClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            clearCopyFeedbackTimeout();
+            copyFeedbackTimeoutRef.current = window.setTimeout(() => {
+                copyFeedbackTimeoutRef.current = null;
+                setCopied(false);
+            }, COPY_FEEDBACK_DURATION_MS);
+        }
+        catch {
+            // Clipboard access may be unavailable or denied; keep the viewer usable.
+        }
+    }, [clearCopyFeedbackTimeout, copyButtonSlotOnClick, text]);
+    return (_jsxs(VireoJsonViewerRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: [_jsx(VireoJsonViewerToolbar, { ...toolbarSlotOther, as: slots.toolbar, ownerState: ownerState, className: joinClassNames(classes.toolbar, toolbarSlotClassName), children: _jsx(Tooltip, { title: currentCopyLabel, children: _jsx(VireoJsonViewerCopyButton, { size: "small", ...copyButtonSlotOther, as: slots.copyButton, ownerState: ownerState, className: joinClassNames(classes.copyButton, copyButtonSlotClassName), "aria-label": currentCopyLabel, onClick: handleCopyClick, children: _jsx(VireoJsonViewerCopyIcon, { ...copyIconSlotOther, as: slots.copyIcon, ownerState: ownerState, className: joinClassNames(classes.copyIcon, copyIconSlotClassName), "aria-hidden": "true", focusable: "false" }) }) }) }), _jsx(VireoJsonViewerContent, { ...contentSlotOther, as: slots.content, ownerState: ownerState, className: joinClassNames(classes.content, contentSlotClassName), tabIndex: 0, children: text })] }));
+});
+VireoJsonViewer.displayName = VIREO_JSON_VIEWER_NAME;

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.styled.d.ts

@@ -0,0 +1,11 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps, type IconButtonProps, type SvgIconProps } from "@mui/material";
+import type React from "react";
+import { type VireoJsonViewerOwnerState } from "./VireoJsonViewer.types.js";
+type VireoJsonViewerStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoJsonViewerOwnerState>;
+export declare const VireoJsonViewerRoot: VireoJsonViewerStyledSlotComponent<BoxProps>;
+export declare const VireoJsonViewerToolbar: VireoJsonViewerStyledSlotComponent<BoxProps>;
+export declare const VireoJsonViewerCopyButton: VireoJsonViewerStyledSlotComponent<IconButtonProps>;
+export declare const VireoJsonViewerCopyIcon: VireoJsonViewerStyledSlotComponent<SvgIconProps>;
+export declare const VireoJsonViewerContent: VireoJsonViewerStyledSlotComponent<React.ComponentPropsWithoutRef<"pre">>;
+export {};

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.styled.js

@@ -0,0 +1,56 @@
+import { ContentCopy } from "@mui/icons-material";
+import { Box, IconButton } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_JSON_VIEWER_NAME } from "./VireoJsonViewer.identity.js";
+export const VireoJsonViewerRoot = styled(Box, {
+    name: VIREO_JSON_VIEWER_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})(({ theme }) => ({
+    position: "relative",
+    width: "100%",
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: theme.palette.background.paper,
+}));
+export const VireoJsonViewerToolbar = styled(Box, {
+    name: VIREO_JSON_VIEWER_NAME,
+    slot: "Toolbar",
+    overridesResolver: (_props, styles) => styles.toolbar,
+})(({ theme }) => ({
+    position: "absolute",
+    top: theme.spacing(0.5),
+    right: theme.spacing(0.5),
+    zIndex: 1,
+    display: "flex",
+    gap: theme.spacing(0.5),
+}));
+export const VireoJsonViewerCopyButton = styled(IconButton, {
+    name: VIREO_JSON_VIEWER_NAME,
+    slot: "CopyButton",
+    overridesResolver: (_props, styles) => styles.copyButton,
+})({});
+export const VireoJsonViewerCopyIcon = styled(ContentCopy, {
+    name: VIREO_JSON_VIEWER_NAME,
+    slot: "CopyIcon",
+    overridesResolver: (_props, styles) => styles.copyIcon,
+})({
+    fontSize: 16,
+});
+export const VireoJsonViewerContent = styled("pre", {
+    name: VIREO_JSON_VIEWER_NAME,
+    slot: "Content",
+    overridesResolver: (_props, styles) => styles.content,
+})(({ ownerState, theme }) => ({
+    boxSizing: "border-box",
+    maxHeight: ownerState.maxHeight,
+    margin: 0,
+    padding: theme.spacing(1, 6, 1, 1.5),
+    overflow: "auto",
+    color: theme.palette.text.primary,
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    fontSize: "0.8125rem",
+    lineHeight: 1.4,
+    whiteSpace: "pre",
+    wordBreak: "normal",
+}));

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.types.d.ts

@@ -0,0 +1,66 @@
+import type { VireoDataAttributeValue } from "../../../../core/utils/muiutils.js";
+import type { ContentCopy } from "@mui/icons-material";
+import type { BoxProps, IconButton } from "@mui/material";
+import type { VireoThemeComponent } from "../../../../core/utils/muiutils.js";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoJsonViewerClasses, type VireoJsonViewerClassKey } from "./VireoJsonViewer.classes.js";
+import type { VIREO_JSON_VIEWER_NAME, VireoJsonViewerSlotName } from "./VireoJsonViewer.identity.js";
+export type VireoJsonViewerOwnerState = {
+    copied: boolean;
+    maxHeight: string | number;
+};
+export interface VireoJsonViewerRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoJsonViewerToolbarSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoJsonViewerCopyButtonSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoJsonViewerCopyIconSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoJsonViewerContentSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoJsonViewer}. */
+export type VireoJsonViewerSlots = {
+    [TSlotName in VireoJsonViewerSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoJsonViewer}. */
+export type VireoJsonViewerSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoJsonViewerSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoJsonViewerRootSlotPropsOverrides, VireoJsonViewerOwnerState>;
+    /** @default 'div' */
+    toolbar: SlotProps<"div", VireoJsonViewerToolbarSlotPropsOverrides, VireoJsonViewerOwnerState>;
+    /** @default IconButton */
+    copyButton: SlotProps<typeof IconButton, VireoJsonViewerCopyButtonSlotPropsOverrides, VireoJsonViewerOwnerState>;
+    /** @default ContentCopy */
+    copyIcon: SlotProps<typeof ContentCopy, VireoJsonViewerCopyIconSlotPropsOverrides, VireoJsonViewerOwnerState>;
+    /** @default 'pre' */
+    content: SlotProps<"pre", VireoJsonViewerContentSlotPropsOverrides, VireoJsonViewerOwnerState>;
+}>;
+/** Props owned by {@link VireoJsonViewer}. */
+export type VireoJsonViewerOwnProps = VireoJsonViewerSlotsAndSlotProps & {
+    /** Arbitrary value serialized for read-only inspection. */
+    data: unknown;
+    /** Accessible label shown while the JSON is ready to copy. */
+    copyLabel: string;
+    /** Accessible feedback shown briefly after copying succeeds. */
+    copiedLabel: string;
+    /** Maximum height of the scrollable JSON content. @default '24rem' */
+    maxHeight?: string | number;
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoJsonViewerClasses>;
+};
+/** Props VireoJsonViewer inherits from its default root after excluding component-owned props. */
+export type VireoJsonViewerInheritedProps = Omit<BoxProps<"div">, "children" | "component" | "maxHeight">;
+/** Props accepted by {@link VireoJsonViewer}. */
+export type VireoJsonViewerProps = VireoJsonViewerOwnProps & VireoJsonViewerInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_JSON_VIEWER_NAME]?: VireoThemeComponent<VireoJsonViewerProps, VireoJsonViewerClassKey, VireoJsonViewerOwnerState, Theme>;
+    }
+}

package/dist/core/components/data-display/VireoJsonViewer/VireoJsonViewer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/core/components/data-display/VireoJsonViewer/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoJsonViewer.js";
+export * from "./VireoJsonViewer.classes.js";
+export * from "./VireoJsonViewer.types.js";

package/dist/core/components/data-display/VireoJsonViewer/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoJsonViewer.js";
+export * from "./VireoJsonViewer.classes.js";
+export * from "./VireoJsonViewer.types.js";

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoLabelBoxSlotName } from "./VireoLabelBox.identity.js";
+/** Utility classes available to VireoLabelBox. */
+export type VireoLabelBoxClasses = Record<VireoLabelBoxSlotName, string>;
+/** Valid keys for VireoLabelBox utility classes and theme style overrides. */
+export type VireoLabelBoxClassKey = keyof VireoLabelBoxClasses;
+/** Returns the generated utility class name for a VireoLabelBox slot or state. */
+export declare function getVireoLabelBoxUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoLabelBox class key. */
+export declare const vireoLabelBoxClasses: VireoLabelBoxClasses;

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.classes.js

@@ -0,0 +1,10 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_LABEL_BOX_NAME, VIREO_LABEL_BOX_SLOTS } from "./VireoLabelBox.identity.js";
+/** Returns the generated utility class name for a VireoLabelBox slot or state. */
+export function getVireoLabelBoxUtilityClass(slot) {
+    return generateUtilityClass(VIREO_LABEL_BOX_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoLabelBox class key. */
+export const vireoLabelBoxClasses = generateUtilityClasses(VIREO_LABEL_BOX_NAME, [
+    ...VIREO_LABEL_BOX_SLOTS,
+]);

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type VireoLabelBoxProps } from "./VireoLabelBox.types.js";
+/**
+ * Renders consistent label, helper-text, and content anatomy around form controls or grouped content.
+ */
+export declare const VireoLabelBox: React.ForwardRefExoticComponent<Omit<VireoLabelBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoLabelBox integration point. */
+export declare const VIREO_LABEL_BOX_NAME = "VireoLabelBox";
+/** Canonical public slots exposed by VireoLabelBox, in rendered DOM order. */
+export declare const VIREO_LABEL_BOX_SLOTS: readonly ["root", "header", "label", "requiredIndicator", "helperText", "content"];
+/** Public slot names exposed by VireoLabelBox. */
+export type VireoLabelBoxSlotName = (typeof VIREO_LABEL_BOX_SLOTS)[number];

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.identity.js

@@ -0,0 +1,11 @@
+/** Stable component name shared by every VireoLabelBox integration point. */
+export const VIREO_LABEL_BOX_NAME = "VireoLabelBox";
+/** Canonical public slots exposed by VireoLabelBox, in rendered DOM order. */
+export const VIREO_LABEL_BOX_SLOTS = [
+    "root",
+    "header",
+    "label",
+    "requiredIndicator",
+    "helperText",
+    "content",
+];

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../core/utils/muiutils.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoLabelBoxUtilityClass } from "./VireoLabelBox.classes.js";
+import { VIREO_LABEL_BOX_NAME } from "./VireoLabelBox.identity.js";
+import { VireoLabelBoxContent, VireoLabelBoxHeader, VireoLabelBoxHelperText, VireoLabelBoxLabel, VireoLabelBoxRequiredIndicator, VireoLabelBoxRoot, } from "./VireoLabelBox.styled.js";
+const DEFAULT_LABEL_COLOR = theme => theme.palette.text.primary;
+function useUtilityClasses(_ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        header: ["header"],
+        label: ["label"],
+        requiredIndicator: ["requiredIndicator"],
+        helperText: ["helperText"],
+        content: ["content"],
+    }, getVireoLabelBoxUtilityClass, classes);
+}
+/**
+ * Renders consistent label, helper-text, and content anatomy around form controls or grouped content.
+ */
+export const VireoLabelBox = React.forwardRef(function VireoLabelBox(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_LABEL_BOX_NAME });
+    const { children, className, classes: classesProp, color = DEFAULT_LABEL_COLOR, direction = "column", fontWeight = 600, helperText, label, required = false, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const ownerState = {
+        direction,
+        color,
+        fontWeight,
+        required,
+        hasLabel: label !== undefined && label !== null,
+        hasHelperText: helperText !== undefined && helperText !== null,
+        hasHeader: (label !== undefined && label !== null) || (helperText !== undefined && helperText !== null),
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const resolvedHeaderSlotProps = resolveSlotProps(slotProps.header, ownerState);
+    const resolvedLabelSlotProps = resolveSlotProps(slotProps.label, ownerState);
+    const resolvedRequiredIndicatorSlotProps = resolveSlotProps(slotProps.requiredIndicator, ownerState);
+    const resolvedHelperTextSlotProps = resolveSlotProps(slotProps.helperText, ownerState);
+    const resolvedContentSlotProps = resolveSlotProps(slotProps.content, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const { className: headerSlotClassName, ...headerSlotOther } = resolvedHeaderSlotProps;
+    const { className: labelSlotClassName, ...labelSlotOther } = resolvedLabelSlotProps;
+    const { className: requiredIndicatorSlotClassName, ...requiredIndicatorSlotOther } = resolvedRequiredIndicatorSlotProps;
+    const { className: helperTextSlotClassName, ...helperTextSlotOther } = resolvedHelperTextSlotProps;
+    const { className: contentSlotClassName, ...contentSlotOther } = resolvedContentSlotProps;
+    return (_jsxs(VireoLabelBoxRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: [ownerState.hasHeader && (_jsxs(VireoLabelBoxHeader, { ...headerSlotOther, as: slots.header, ownerState: ownerState, className: joinClassNames(classes.header, headerSlotClassName), children: [ownerState.hasLabel && (_jsxs(VireoLabelBoxLabel, { component: "span", ...labelSlotOther, as: slots.label, ownerState: ownerState, className: joinClassNames(classes.label, labelSlotClassName), children: [label, required && (_jsx(VireoLabelBoxRequiredIndicator, { component: "span", ...requiredIndicatorSlotOther, as: slots.requiredIndicator, ownerState: ownerState, className: joinClassNames(classes.requiredIndicator, requiredIndicatorSlotClassName), "aria-hidden": "true", children: " *" }))] })), ownerState.hasHelperText && (_jsx(VireoLabelBoxHelperText, { component: "span", ...helperTextSlotOther, as: slots.helperText, ownerState: ownerState, className: joinClassNames(classes.helperText, helperTextSlotClassName), children: helperText }))] })), _jsx(VireoLabelBoxContent, { ...contentSlotOther, as: slots.content, ownerState: ownerState, className: joinClassNames(classes.content, contentSlotClassName), children: children })] }));
+});
+VireoLabelBox.displayName = VIREO_LABEL_BOX_NAME;

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.styled.d.ts

@@ -0,0 +1,11 @@
+import { type StyledSlotComponent } from "../../../../core/utils/muiutils.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoLabelBoxOwnerState } from "./VireoLabelBox.types.js";
+type VireoLabelBoxStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoLabelBoxOwnerState>;
+export declare const VireoLabelBoxRoot: VireoLabelBoxStyledSlotComponent<BoxProps>;
+export declare const VireoLabelBoxHeader: VireoLabelBoxStyledSlotComponent<BoxProps>;
+export declare const VireoLabelBoxLabel: VireoLabelBoxStyledSlotComponent<BoxProps>;
+export declare const VireoLabelBoxRequiredIndicator: VireoLabelBoxStyledSlotComponent<BoxProps>;
+export declare const VireoLabelBoxHelperText: VireoLabelBoxStyledSlotComponent<BoxProps>;
+export declare const VireoLabelBoxContent: VireoLabelBoxStyledSlotComponent<BoxProps>;
+export {};

package/dist/core/components/data-display/VireoLabelBox/VireoLabelBox.styled.js

@@ -0,0 +1,83 @@
+import { Box } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_LABEL_BOX_NAME } from "./VireoLabelBox.identity.js";
+const COMPACT_CONTAINER_QUERY = "@container vireo-label-box (max-width: 480px)";
+export const VireoLabelBoxRoot = styled(Box, {
+    name: VIREO_LABEL_BOX_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})(({ ownerState, theme }) => ({
+    minWidth: 0,
+    flex: 1,
+    display: "flex",
+    flexDirection: ownerState.direction,
+    gap: theme.spacing(1),
+    containerName: "vireo-label-box",
+    containerType: "inline-size",
+}));
+export const VireoLabelBoxHeader = styled(Box, {
+    name: VIREO_LABEL_BOX_NAME,
+    slot: "Header",
+    overridesResolver: (_props, styles) => styles.header,
+})(({ ownerState, theme }) => theme.unstable_sx({
+    minWidth: 0,
+    minHeight: "1rem",
+    flex: ownerState.direction === "row" ? "0 1 auto" : undefined,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 2,
+    fontSize: "0.875rem",
+    fontWeight: ownerState.fontWeight,
+    lineHeight: "1rem",
+    [COMPACT_CONTAINER_QUERY]: {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "flex-start",
+        gap: 0.5,
+        ...(ownerState.direction === "row" && {
+            flexBasis: "40%",
+        }),
+    },
+}));
+export const VireoLabelBoxLabel = styled(Box, {
+    name: VIREO_LABEL_BOX_NAME,
+    slot: "Label",
+    overridesResolver: (_props, styles) => styles.label,
+})(({ ownerState, theme }) => ({
+    minWidth: 0,
+    color: typeof ownerState.color === "function" ? ownerState.color(theme) : ownerState.color,
+    overflowWrap: "anywhere",
+}));
+export const VireoLabelBoxRequiredIndicator = styled(Box, {
+    name: VIREO_LABEL_BOX_NAME,
+    slot: "RequiredIndicator",
+    overridesResolver: (_props, styles) => styles.requiredIndicator,
+})({});
+export const VireoLabelBoxHelperText = styled(Box, {
+    name: VIREO_LABEL_BOX_NAME,
+    slot: "HelperText",
+    overridesResolver: (_props, styles) => styles.helperText,
+})(({ theme }) => ({
+    marginLeft: "auto",
+    color: theme.palette.text.secondary,
+    fontSize: "0.75rem",
+    fontWeight: 400,
+    lineHeight: "1rem",
+    overflowWrap: "anywhere",
+    [COMPACT_CONTAINER_QUERY]: {
+        marginLeft: 0,
+    },
+}));
+export const VireoLabelBoxContent = styled(Box, {
+    name: VIREO_LABEL_BOX_NAME,
+    slot: "Content",
+    overridesResolver: (_props, styles) => styles.content,
+})(({ theme }) => ({
+    minWidth: 0,
+    position: "relative",
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1.5),
+}));