@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/forms/utils/vireoFile.js

@@ -0,0 +1,89 @@
+export function formatVireoFileSize(bytes) {
+    if (bytes < 1000)
+        return `${bytes} B`;
+    const units = ["kB", "MB", "GB", "TB"];
+    let value = bytes / 1000;
+    let unitIndex = 0;
+    while (value >= 1000 && unitIndex < units.length - 1) {
+        value /= 1000;
+        unitIndex += 1;
+    }
+    return `${value >= 10 ? Math.round(value) : Math.round(value * 10) / 10} ${units[unitIndex]}`;
+}
+function validAcceptTokens(accept) {
+    return accept
+        .split(",")
+        .map(token => token.trim().toLowerCase())
+        .filter(token => /^\.[^\s,]+$/.test(token) || /^[^/\s]+\/(?:\*|[^/\s]+)$/.test(token));
+}
+export function acceptsVireoFile(file, accept) {
+    if (!accept?.trim())
+        return true;
+    const tokens = validAcceptTokens(accept);
+    if (tokens.length === 0)
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return tokens.some(token => {
+        if (token.startsWith("."))
+            return name.endsWith(token);
+        if (token.endsWith("/*"))
+            return Boolean(type) && type.startsWith(token.slice(0, -1));
+        return Boolean(type) && type === token;
+    });
+}
+export function acceptsVireoDragType(type, accept) {
+    if (!type || !accept?.trim())
+        return true;
+    const tokens = validAcceptTokens(accept).filter(token => !token.startsWith("."));
+    if (tokens.length === 0)
+        return true;
+    const normalized = type.toLowerCase();
+    return tokens.some(token => token.endsWith("/*") ? normalized.startsWith(token.slice(0, -1)) : normalized === token);
+}
+function graphemes(value) {
+    if (typeof Intl.Segmenter === "function") {
+        return Array.from(new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(value), item => item.segment);
+    }
+    return Array.from(value);
+}
+function splitFileName(value) {
+    const dot = value.lastIndexOf(".");
+    if (dot <= 0 || dot === value.length - 1)
+        return { stem: value, extension: "" };
+    return { stem: value.slice(0, dot), extension: value.slice(dot) };
+}
+export function truncateVireoFileName(value, mode, availableWidth, measure) {
+    if (mode === "none" || availableWidth <= 0 || measure(value) <= availableWidth)
+        return value;
+    const all = graphemes(value);
+    if (mode === "end") {
+        let low = 0;
+        let high = all.length;
+        while (low < high) {
+            const middle = Math.ceil((low + high) / 2);
+            if (measure(`${all.slice(0, middle).join("")}…`) <= availableWidth)
+                low = middle;
+            else
+                high = middle - 1;
+        }
+        return `${all.slice(0, low).join("")}…`;
+    }
+    const { stem, extension } = splitFileName(value);
+    if (extension && measure(extension) > availableWidth)
+        return truncateVireoFileName(extension, "end", availableWidth, measure);
+    const stemParts = graphemes(stem);
+    let low = 0;
+    let high = Math.floor(stemParts.length / 2);
+    while (low < high) {
+        const count = Math.ceil((low + high) / 2);
+        const candidate = `${stemParts.slice(0, count).join("")}…${stemParts.slice(-count).join("")}${extension}`;
+        if (measure(candidate) <= availableWidth)
+            low = count;
+        else
+            high = count - 1;
+    }
+    if (low === 0)
+        return `…${extension}`;
+    return `${stemParts.slice(0, low).join("")}…${stemParts.slice(-low).join("")}${extension}`;
+}

package/dist/capabilities/forms/utils/vireoFormErrors.d.ts

@@ -0,0 +1,9 @@
+import type { VireoFormErrorDisplay, VireoFormErrorFormatter } from "../../../capabilities/forms/components/forms/VireoForm/VireoForm.types.js";
+export declare function shouldDisplayVireoFormError(display: VireoFormErrorDisplay, context: {
+    submissionAttempts: number;
+    touched: boolean;
+}): boolean;
+/** Vireo's safe default formatter for TanStack and Standard Schema validation errors. */
+export declare const defaultVireoFormErrorFormatter: VireoFormErrorFormatter;
+/** Formats the first recognizable field error while preserving validator order. */
+export declare function formatFirstVireoFormError(errors: readonly unknown[], formatter?: VireoFormErrorFormatter): string | undefined;

package/dist/capabilities/forms/utils/vireoFormErrors.js

@@ -0,0 +1,43 @@
+export function shouldDisplayVireoFormError(display, context) {
+    if (typeof display === "function")
+        return display(context);
+    if (display === "always")
+        return true;
+    if (display === "never")
+        return false;
+    return context.touched || context.submissionAttempts > 0;
+}
+function findRecognizableError(error, visited) {
+    if (typeof error === "string")
+        return error || undefined;
+    if (error === null || error === undefined || visited.has(error))
+        return undefined;
+    if (typeof error === "object")
+        visited.add(error);
+    if (Array.isArray(error)) {
+        for (const nestedError of error) {
+            const message = findRecognizableError(nestedError, visited);
+            if (message !== undefined)
+                return message;
+        }
+        return undefined;
+    }
+    if (error instanceof Error)
+        return error.message || undefined;
+    if (typeof error === "object" && "message" in error) {
+        const message = error.message;
+        return typeof message === "string" && message ? message : undefined;
+    }
+    return undefined;
+}
+/** Vireo's safe default formatter for TanStack and Standard Schema validation errors. */
+export const defaultVireoFormErrorFormatter = error => findRecognizableError(error, new Set());
+/** Formats the first recognizable field error while preserving validator order. */
+export function formatFirstVireoFormError(errors, formatter = defaultVireoFormErrorFormatter) {
+    for (const error of errors) {
+        const message = formatter(error);
+        if (message !== undefined)
+            return message;
+    }
+    return undefined;
+}

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.classes.d.ts

@@ -0,0 +1,10 @@
+import { type VireoHistoryEntrySlotName } from "./VireoHistoryEntry.identity.js";
+export type VireoHistoryEntryStateClassKey = "loading";
+/** Utility classes available to VireoHistoryEntry. */
+export type VireoHistoryEntryClasses = Record<VireoHistoryEntrySlotName | VireoHistoryEntryStateClassKey, string>;
+/** Valid keys for VireoHistoryEntry utility classes and theme style overrides. */
+export type VireoHistoryEntryClassKey = keyof VireoHistoryEntryClasses;
+/** Returns the generated utility class name for a VireoHistoryEntry slot or state. */
+export declare function getVireoHistoryEntryUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoHistoryEntry class key. */
+export declare const vireoHistoryEntryClasses: VireoHistoryEntryClasses;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.classes.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_HISTORY_ENTRY_NAME, VIREO_HISTORY_ENTRY_SLOTS, } from "./VireoHistoryEntry.identity.js";
+/** Returns the generated utility class name for a VireoHistoryEntry slot or state. */
+export function getVireoHistoryEntryUtilityClass(slot) {
+    return generateUtilityClass(VIREO_HISTORY_ENTRY_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoHistoryEntry class key. */
+export const vireoHistoryEntryClasses = generateUtilityClasses(VIREO_HISTORY_ENTRY_NAME, [
+    ...VIREO_HISTORY_ENTRY_SLOTS,
+    "loading",
+]);

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { type VireoHistoryEntryProps } from "./VireoHistoryEntry.types.js";
+type VireoHistoryEntryComponent = {
+    <TEntity extends object>(props: VireoHistoryEntryProps<TEntity> & React.RefAttributes<HTMLDivElement>): React.ReactElement | null;
+    displayName?: string;
+};
+/** Presents one typed entity change as an expandable, nested, read-only history entry. */
+export declare const VireoHistoryEntry: VireoHistoryEntryComponent;
+export {};

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.identity.d.ts

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

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.identity.js

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

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.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 { getVireoHistoryEntryUtilityClass } from "./VireoHistoryEntry.classes.js";
+import { VIREO_HISTORY_ENTRY_NAME } from "./VireoHistoryEntry.identity.js";
+import { VireoHistoryEntryRoot } from "./VireoHistoryEntry.styled.js";
+import { HistoryNodeView } from "../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryNodeView/HistoryNodeView.js";
+import { HistoryEntryLoadingView } from "../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/components/HistoryEntryLoadingView/HistoryEntryLoadingView.js";
+import { getHistoryPathKey } from "../../../../../capabilities/history/components/data-display/VireoHistoryEntry/internal/utils/getHistoryPathKey.js";
+import { createHistoryNodes } from "@vireocodedev/history";
+const DEFAULT_LABELS = {
+    expandSection: "Expand section",
+    collapseSection: "Collapse section",
+    showUnchanged: "Show unchanged",
+    hideUnchanged: "Hide unchanged",
+    showMore: "Show more",
+    showLess: "Show less",
+    added: "Added",
+    removed: "Removed",
+    updated: "Updated",
+    moved: "Moved",
+    unchanged: "Unchanged",
+    field: "Field",
+    previous: "Previous",
+    current: "Current",
+    value: "Value",
+    notPresent: "Not present",
+    changes: (count) => `${count} ${count === 1 ? "change" : "changes"}`,
+};
+function containsChangedHistoryNode(node) {
+    if (node.type === "group") {
+        if (node.children.length === 0)
+            return node.changeType !== "unchanged";
+        return node.children.some(containsChangedHistoryNode);
+    }
+    return node.type !== "unchanged";
+}
+function containsUnchangedHistoryNode(node) {
+    if (node.type === "group") {
+        if (node.children.length === 0)
+            return node.changeType === "unchanged";
+        return node.children.some(containsUnchangedHistoryNode);
+    }
+    return node.type === "unchanged";
+}
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root", ownerState.loading && "loading"],
+    }, getVireoHistoryEntryUtilityClass, classes);
+}
+function VireoHistoryEntryImpl(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_HISTORY_ENTRY_NAME });
+    const { className, classes: classesProp, current, defaultExpandedDepth = 3, defaultShowUnchanged = false, definition, emptyValue, labels: labelsProp, loading = false, loadingVisible = false, previous, rootMeta, showRootEntityLabel = true, slotProps = {}, slots = {}, style, sx, ...other } = props;
+    const labels = { ...DEFAULT_LABELS, ...labelsProp };
+    const nodes = React.useMemo(() => (loading ? [] : createHistoryNodes(definition, previous ?? null, current ?? null, { showUnchanged: true })), [current, definition, loading, previous]);
+    const hasChanges = nodes.some(containsChangedHistoryNode);
+    const hasUnchanged = nodes.some(containsUnchangedHistoryNode);
+    const entryIdentity = React.useMemo(() => {
+        const snapshot = current ?? previous;
+        if (loading)
+            return `${definition.options.label}:loading`;
+        if (snapshot == null)
+            return `${definition.options.label}:empty`;
+        return `${definition.options.label}:${String(definition.options.key(snapshot))}`;
+    }, [current, definition, loading, previous]);
+    const [expandedByPath, setExpandedByPath] = React.useState({});
+    const [showUnchanged, setShowUnchanged] = React.useState(defaultShowUnchanged);
+    React.useEffect(() => {
+        setExpandedByPath({});
+        setShowUnchanged(defaultShowUnchanged);
+    }, [defaultShowUnchanged, entryIdentity]);
+    const isExpanded = React.useCallback((path, depth) => expandedByPath[getHistoryPathKey(path)] ?? depth <= defaultExpandedDepth, [defaultExpandedDepth, expandedByPath]);
+    const onToggleExpanded = React.useCallback((path, depth) => {
+        const key = getHistoryPathKey(path);
+        setExpandedByPath(currentState => ({
+            ...currentState,
+            [key]: !(currentState[key] ?? depth <= defaultExpandedDepth),
+        }));
+    }, [defaultExpandedDepth]);
+    const rootNode = nodes[0];
+    const expanded = loading || (rootNode?.type === "group" ? isExpanded(rootNode.path, 1) : true);
+    const disclosure = {
+        defaultExpandedDepth,
+        isExpanded,
+        labels,
+        onToggleExpanded,
+        onToggleShowUnchanged: () => setShowUnchanged(currentValue => !currentValue),
+        showUnchanged,
+    };
+    const ownerState = {
+        defaultExpandedDepth,
+        defaultShowUnchanged,
+        expanded,
+        hasUnchanged,
+        hasRootMeta: rootMeta != null,
+        loading,
+        showRootEntityLabel,
+    };
+    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);
+    if (!loading && (nodes.length === 0 || (!hasChanges && !defaultShowUnchanged)))
+        return null;
+    return (_jsx(VireoHistoryEntryRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: loading ? (_jsx(HistoryEntryLoadingView, { labels: labels, visible: loadingVisible })) : (nodes.map(node => (_jsx(HistoryNodeView, { disclosure: disclosure, emptyValue: emptyValue, hasUnchanged: hasUnchanged, node: node, rootMeta: rootMeta, showRootEntityLabel: showRootEntityLabel }, getHistoryPathKey(node.path))))) }));
+}
+/** Presents one typed entity change as an expandable, nested, read-only history entry. */
+export const VireoHistoryEntry = React.forwardRef(VireoHistoryEntryImpl);
+VireoHistoryEntry.displayName = VIREO_HISTORY_ENTRY_NAME;

package/dist/capabilities/history/components/data-display/VireoHistoryEntry/VireoHistoryEntry.styled.d.ts

@@ -0,0 +1,6 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps } from "@mui/material";
+import { type VireoHistoryEntryOwnerState } from "./VireoHistoryEntry.types.js";
+type VireoHistoryEntryStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoHistoryEntryOwnerState>;
+export declare const VireoHistoryEntryRoot: VireoHistoryEntryStyledSlotComponent<BoxProps>;
+export {};