@od-oneapp/uni-ui 2026.1.1301

package/dist/components-ai-workflows/resizable-node/index.d.mts

@@ -0,0 +1,30 @@
+
+import { s as Card } from "../../integrations-COjiOhkd.mjs";
+import "../../components-elements-card.mjs";
+import { a as NodeContentProps, c as NodeFooter, d as NodeHeader, f as NodeHeaderProps, h as NodeTitleProps, i as NodeContent, l as NodeFooterProps, m as NodeTitle, n as NodeAction, o as NodeDescription, p as NodeProps, r as NodeActionProps, s as NodeDescriptionProps } from "../../node-BKXOPjw9.mjs";
+import "../node/index.mjs";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ai-workflows/resizable-node/resizable-node.d.ts
+type ResizableNodeProps = ComponentProps<typeof Card> & Pick<NodeProps, 'handles'> & {
+  minWidth?: number;
+  minHeight?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+  selected?: boolean;
+};
+declare const ResizableNode: ({
+  handles,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  selected,
+  className,
+  children,
+  ...props
+}: ResizableNodeProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NodeAction, type NodeActionProps, NodeContent, type NodeContentProps, NodeDescription, type NodeDescriptionProps, NodeFooter, type NodeFooterProps, NodeHeader, type NodeHeaderProps, NodeTitle, type NodeTitleProps, ResizableNode, ResizableNodeProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components-ai-workflows/resizable-node/index.mjs

@@ -0,0 +1,164 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, i as SPRING_GENTLE, r as SPRING_FLUID } from "../../motion-zelaDelJ.mjs";
+import { a as Card } from "../../integrations-lBG309ZD.mjs";
+import { a as NodeFooter, i as NodeDescription, n as NodeAction, o as NodeHeader, r as NodeContent, s as NodeTitle } from "../../node-CdmDD4k-.mjs";
+import { useMemo, useState } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Handle, NodeResizer, Position } from "@xyflow/react";
+
+//#region src/components/ai-workflows/resizable-node/resizable-node.tsx
+/**
+* @fileoverview ResizableNode Component - Premium Harmony V2
+*
+* A resizable React Flow node component with NodeResizer integration.
+* Built on Card component with configurable min/max dimensions and
+* Premium Harmony V2 animations.
+*
+* Features:
+* - Premium Harmony V2 spring physics animations
+* - Touch-optimized interactions with device detection
+* - Reduced motion support for accessibility
+* - Semantic color tokens throughout
+* - Data attributes for state management
+* - AnimatePresence for smooth handle transitions
+* - Memoized animation variants for performance
+* - React Flow NodeResizer integration
+* - Configurable min/max width and height
+* - Optional target/source connection handles
+* - Selection-aware resize handles visibility
+*
+* @module @od-oneapp/uni-ui/components/ai-workflows/resizable-node
+* @component ResizableNode
+*
+* @useCases
+* - Workflow Node Editing: Resizable containers for workflow step configuration
+* - Dynamic Layouts: User-adjustable node dimensions in flow diagrams
+* - Content Visualization: Expandable nodes for detailed content display
+* - Process Mapping: Flexible node sizing for complex process flows
+* - Data Flow Design: Resizable data transformation steps
+* - AI Agent Workflows: Configurable agent action nodes
+* - Custom Automation: Resizable automation step containers
+*
+* @subcomponents NodeHeader, NodeTitle, NodeDescription, NodeContent, NodeFooter, NodeAction
+*
+* @example
+* <ResizableNode selected={selected} handles={{ target: true, source: true }} minWidth={150} minHeight={100}>
+*   <NodeHeader><NodeTitle>Resizable Step</NodeTitle></NodeHeader>
+*   <NodeContent>Content here...</NodeContent>
+* </ResizableNode>
+*/
+const ResizableNode = ({ handles = {
+	target: true,
+	source: true
+}, minWidth = 100, minHeight = 50, maxWidth, maxHeight, selected, className, children, ...props }) => {
+	const [isResizing, setIsResizing] = useState(false);
+	const isTouchDevice = useMediaQuery("(hover: none) and (pointer: coarse)");
+	const prefersReducedMotion = useReducedMotion();
+	const containerVariants = useMemo(() => ({
+		idle: {
+			scale: 1,
+			transition: prefersReducedMotion ? { duration: 0 } : SPRING_GENTLE
+		},
+		selected: {
+			scale: isTouchDevice ? 1 : 1.01,
+			transition: prefersReducedMotion ? { duration: 0 } : SPRING_FLUID
+		},
+		resizing: {
+			scale: 1,
+			transition: prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE
+		}
+	}), [isTouchDevice, prefersReducedMotion]);
+	const handleVariants = useMemo(() => ({
+		hidden: {
+			scale: 0,
+			opacity: 0,
+			transition: prefersReducedMotion ? { duration: 0 } : SPRING_GENTLE
+		},
+		visible: {
+			scale: 1,
+			opacity: 1,
+			transition: prefersReducedMotion ? { duration: 0 } : SPRING_FLUID
+		}
+	}), [prefersReducedMotion]);
+	const animationState = isResizing ? "resizing" : selected ? "selected" : "idle";
+	return /* @__PURE__ */ jsx(motion.div, {
+		variants: containerVariants,
+		initial: "idle",
+		animate: animationState,
+		"data-state": selected ? "selected" : "idle",
+		"data-selected": selected,
+		"data-resizing": isResizing,
+		className: "relative",
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: cn("node-container relative h-auto w-64 gap-0 rounded-md p-0", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(NodeResizer, {
+					minWidth,
+					minHeight,
+					maxWidth,
+					maxHeight,
+					isVisible: selected,
+					onResizeStart: () => setIsResizing(true),
+					onResizeEnd: () => setIsResizing(false),
+					lineStyle: {
+						borderColor: "hsl(var(--ring))",
+						borderWidth: "1px"
+					},
+					handleStyle: {
+						backgroundColor: "hsl(var(--primary))",
+						borderColor: "hsl(var(--ring))",
+						borderWidth: "1px",
+						width: isTouchDevice ? 12 : 8,
+						height: isTouchDevice ? 12 : 8,
+						borderRadius: "2px"
+					}
+				}),
+				/* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "sync",
+					children: handles.target ? /* @__PURE__ */ jsx(motion.div, {
+						variants: handleVariants,
+						initial: "hidden",
+						animate: "visible",
+						exit: "hidden",
+						children: /* @__PURE__ */ jsx(Handle, {
+							className: "!bg-primary !border-background !size-3 !rounded-full !border-2",
+							position: Position.Left,
+							type: "target",
+							style: {
+								width: isTouchDevice ? "14px" : "12px",
+								height: isTouchDevice ? "14px" : "12px"
+							}
+						})
+					}, "target-handle") : null
+				}),
+				/* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "sync",
+					children: handles.source ? /* @__PURE__ */ jsx(motion.div, {
+						variants: handleVariants,
+						initial: "hidden",
+						animate: "visible",
+						exit: "hidden",
+						children: /* @__PURE__ */ jsx(Handle, {
+							className: "!bg-primary !border-background !size-3 !rounded-full !border-2",
+							position: Position.Right,
+							type: "source",
+							style: {
+								width: isTouchDevice ? "14px" : "12px",
+								height: isTouchDevice ? "14px" : "12px"
+							}
+						})
+					}, "source-handle") : null
+				}),
+				children
+			]
+		})
+	});
+};
+
+//#endregion
+export { NodeAction, NodeContent, NodeDescription, NodeFooter, NodeHeader, NodeTitle, ResizableNode };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-workflows/resizable-node/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-workflows/resizable-node/resizable-node.tsx"],"sourcesContent":["/**\n * @fileoverview ResizableNode Component - Premium Harmony V2\n *\n * A resizable React Flow node component with NodeResizer integration.\n * Built on Card component with configurable min/max dimensions and\n * Premium Harmony V2 animations.\n *\n * Features:\n * - Premium Harmony V2 spring physics animations\n * - Touch-optimized interactions with device detection\n * - Reduced motion support for accessibility\n * - Semantic color tokens throughout\n * - Data attributes for state management\n * - AnimatePresence for smooth handle transitions\n * - Memoized animation variants for performance\n * - React Flow NodeResizer integration\n * - Configurable min/max width and height\n * - Optional target/source connection handles\n * - Selection-aware resize handles visibility\n *\n * @module @od-oneapp/uni-ui/components/ai-workflows/resizable-node\n * @component ResizableNode\n *\n * @useCases\n * - Workflow Node Editing: Resizable containers for workflow step configuration\n * - Dynamic Layouts: User-adjustable node dimensions in flow diagrams\n * - Content Visualization: Expandable nodes for detailed content display\n * - Process Mapping: Flexible node sizing for complex process flows\n * - Data Flow Design: Resizable data transformation steps\n * - AI Agent Workflows: Configurable agent action nodes\n * - Custom Automation: Resizable automation step containers\n *\n * @subcomponents NodeHeader, NodeTitle, NodeDescription, NodeContent, NodeFooter, NodeAction\n *\n * @example\n * <ResizableNode selected={selected} handles={{ target: true, source: true }} minWidth={150} minHeight={100}>\n *   <NodeHeader><NodeTitle>Resizable Step</NodeTitle></NodeHeader>\n *   <NodeContent>Content here...</NodeContent>\n * </ResizableNode>\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport { useMemo, useState } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { Handle, NodeResizer, Position } from '@xyflow/react';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '../../../lib/utils';\nimport {\n  SPRING_FLUID,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n} from '../../ai-elements/ai-elements.constants';\nimport { Card } from '../../elements/organisms/card';\n\nimport type { NodeProps } from '../node';\n\nexport type ResizableNodeProps = ComponentProps<typeof Card> &\n  Pick<NodeProps, 'handles'> & {\n    minWidth?: number;\n    minHeight?: number;\n    maxWidth?: number;\n    maxHeight?: number;\n    selected?: boolean;\n  };\n\nexport const ResizableNode = ({\n  handles = { target: true, source: true },\n  minWidth = 100,\n  minHeight = 50,\n  maxWidth,\n  maxHeight,\n  selected,\n  className,\n  children,\n  ...props\n}: ResizableNodeProps) => {\n  // Track resizing state\n  const [isResizing, setIsResizing] = useState(false);\n\n  // Device and accessibility detection\n  const isTouchDevice = useMediaQuery('(hover: none) and (pointer: coarse)');\n  const prefersReducedMotion = useReducedMotion();\n\n  // Memoized animation variants for performance\n  const containerVariants = useMemo(\n    () => ({\n      idle: {\n        scale: 1,\n        transition: prefersReducedMotion ? { duration: 0 } : SPRING_GENTLE,\n      },\n      selected: {\n        scale: isTouchDevice ? 1 : 1.01,\n        transition: prefersReducedMotion ? { duration: 0 } : SPRING_FLUID,\n      },\n      resizing: {\n        scale: 1,\n        transition: prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE,\n      },\n    }),\n    [isTouchDevice, prefersReducedMotion],\n  );\n\n  const handleVariants = useMemo(\n    () => ({\n      hidden: {\n        scale: 0,\n        opacity: 0,\n        transition: prefersReducedMotion ? { duration: 0 } : SPRING_GENTLE,\n      },\n      visible: {\n        scale: 1,\n        opacity: 1,\n        transition: prefersReducedMotion ? { duration: 0 } : SPRING_FLUID,\n      },\n    }),\n    [prefersReducedMotion],\n  );\n\n  // Determine current animation state\n  const animationState = isResizing ? 'resizing' : selected ? 'selected' : 'idle';\n\n  return (\n    <motion.div\n      variants={containerVariants}\n      initial=\"idle\"\n      animate={animationState}\n      data-state={selected ? 'selected' : 'idle'}\n      data-selected={selected}\n      data-resizing={isResizing}\n      className=\"relative\"\n    >\n      <Card\n        className={cn('node-container relative h-auto w-64 gap-0 rounded-md p-0', className)}\n        {...props}\n      >\n        <NodeResizer\n          minWidth={minWidth}\n          minHeight={minHeight}\n          maxWidth={maxWidth}\n          maxHeight={maxHeight}\n          isVisible={selected}\n          onResizeStart={() => setIsResizing(true)}\n          onResizeEnd={() => setIsResizing(false)}\n          lineStyle={{\n            borderColor: 'hsl(var(--ring))',\n            borderWidth: '1px',\n          }}\n          handleStyle={{\n            backgroundColor: 'hsl(var(--primary))',\n            borderColor: 'hsl(var(--ring))',\n            borderWidth: '1px',\n            width: isTouchDevice ? 12 : 8,\n            height: isTouchDevice ? 12 : 8,\n            borderRadius: '2px',\n          }}\n        />\n\n        <AnimatePresence mode=\"sync\">\n          {handles.target ? (\n            <motion.div\n              key=\"target-handle\"\n              variants={handleVariants}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"hidden\"\n            >\n              <Handle\n                className=\"!bg-primary !border-background !size-3 !rounded-full !border-2\"\n                position={Position.Left}\n                type=\"target\"\n                style={{\n                  width: isTouchDevice ? '14px' : '12px',\n                  height: isTouchDevice ? '14px' : '12px',\n                }}\n              />\n            </motion.div>\n          ) : null}\n        </AnimatePresence>\n\n        <AnimatePresence mode=\"sync\">\n          {handles.source ? (\n            <motion.div\n              key=\"source-handle\"\n              variants={handleVariants}\n              initial=\"hidden\"\n              animate=\"visible\"\n              exit=\"hidden\"\n            >\n              <Handle\n                className=\"!bg-primary !border-background !size-3 !rounded-full !border-2\"\n                position={Position.Right}\n                type=\"source\"\n                style={{\n                  width: isTouchDevice ? '14px' : '12px',\n                  height: isTouchDevice ? '14px' : '12px',\n                }}\n              />\n            </motion.div>\n          ) : null}\n        </AnimatePresence>\n\n        {children}\n      </Card>\n    </motion.div>\n  );\n};\n\nexport {\n  NodeAction,\n  NodeContent,\n  NodeDescription,\n  NodeFooter,\n  NodeHeader,\n  NodeTitle,\n} from '../node';\n\nexport type {\n  NodeActionProps,\n  NodeContentProps,\n  NodeDescriptionProps,\n  NodeFooterProps,\n  NodeHeaderProps,\n  NodeTitleProps,\n} from '../node';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAa,iBAAiB,EAC5B,UAAU;CAAE,QAAQ;CAAM,QAAQ;CAAM,EACxC,WAAW,KACX,YAAY,IACZ,UACA,WACA,UACA,WACA,UACA,GAAG,YACqB;CAExB,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,MAAM,gBAAgB,cAAc,sCAAsC;CAC1E,MAAM,uBAAuB,kBAAkB;CAG/C,MAAM,oBAAoB,eACjB;EACL,MAAM;GACJ,OAAO;GACP,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;GACtD;EACD,UAAU;GACR,OAAO,gBAAgB,IAAI;GAC3B,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;GACtD;EACD,UAAU;GACR,OAAO;GACP,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;GACtD;EACF,GACD,CAAC,eAAe,qBAAqB,CACtC;CAED,MAAM,iBAAiB,eACd;EACL,QAAQ;GACN,OAAO;GACP,SAAS;GACT,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;GACtD;EACD,SAAS;GACP,OAAO;GACP,SAAS;GACT,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;GACtD;EACF,GACD,CAAC,qBAAqB,CACvB;CAGD,MAAM,iBAAiB,aAAa,aAAa,WAAW,aAAa;AAEzE,QACE,oBAAC,OAAO;EACN,UAAU;EACV,SAAQ;EACR,SAAS;EACT,cAAY,WAAW,aAAa;EACpC,iBAAe;EACf,iBAAe;EACf,WAAU;YAEV,qBAAC;GACC,WAAW,GAAG,4DAA4D,UAAU;GACpF,GAAI;;IAEJ,oBAAC;KACW;KACC;KACD;KACC;KACX,WAAW;KACX,qBAAqB,cAAc,KAAK;KACxC,mBAAmB,cAAc,MAAM;KACvC,WAAW;MACT,aAAa;MACb,aAAa;MACd;KACD,aAAa;MACX,iBAAiB;MACjB,aAAa;MACb,aAAa;MACb,OAAO,gBAAgB,KAAK;MAC5B,QAAQ,gBAAgB,KAAK;MAC7B,cAAc;MACf;MACD;IAEF,oBAAC;KAAgB,MAAK;eACnB,QAAQ,SACP,oBAAC,OAAO;MAEN,UAAU;MACV,SAAQ;MACR,SAAQ;MACR,MAAK;gBAEL,oBAAC;OACC,WAAU;OACV,UAAU,SAAS;OACnB,MAAK;OACL,OAAO;QACL,OAAO,gBAAgB,SAAS;QAChC,QAAQ,gBAAgB,SAAS;QAClC;QACD;QAdE,gBAeO,GACX;MACY;IAElB,oBAAC;KAAgB,MAAK;eACnB,QAAQ,SACP,oBAAC,OAAO;MAEN,UAAU;MACV,SAAQ;MACR,SAAQ;MACR,MAAK;gBAEL,oBAAC;OACC,WAAU;OACV,UAAU,SAAS;OACnB,MAAK;OACL,OAAO;QACL,OAAO,gBAAgB,SAAS;QAChC,QAAQ,gBAAgB,SAAS;QAClC;QACD;QAdE,gBAeO,GACX;MACY;IAEjB;;IACI;GACI"}

package/dist/components-ai-workflows/toolbar/index.d.mts

@@ -0,0 +1,19 @@
+
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { NodeToolbar } from "@xyflow/react";
+
+//#region src/components/ai-workflows/toolbar/toolbar.d.ts
+type ToolbarProps = ComponentProps<typeof NodeToolbar> & {
+  isVisible?: boolean;
+  isLoading?: boolean;
+};
+declare const Toolbar: ({
+  className,
+  isVisible,
+  isLoading,
+  ...props
+}: ToolbarProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Toolbar, ToolbarProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components-ai-workflows/toolbar/index.mjs

@@ -0,0 +1,91 @@
+'use client';
+import { t as cn } from "../../utils-D2bGp2p_.mjs";
+import { r as SPRING_FLUID } from "../../motion-zelaDelJ.mjs";
+import { AI_FOCUS } from "../../components-ai-elements-constants.mjs";
+import { useMemo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+import { NodeToolbar } from "@xyflow/react";
+
+//#region src/components/ai-workflows/toolbar/toolbar.tsx
+/**
+* @fileoverview Toolbar Component - Premium Harmony V2
+*
+* A toolbar component that appears when a workflow node is selected or hovered.
+* Built on React Flow's NodeToolbar with Premium Harmony V2 motion, accessibility,
+* and responsive design patterns.
+*
+* Features:
+* - React Flow NodeToolbar integration with motion animations
+* - Context-aware positioning (appears on node selection)
+* - Premium Harmony V2 spring physics (SPRING_FLUID)
+* - Touch-optimized targets (44px minimum on touch devices)
+* - Reduced motion support (prefers-reduced-motion)
+* - Focus-visible ring styles for keyboard navigation
+* - Semantic color tokens (card, border, foreground)
+* - Data attributes for state tracking
+* - Responsive spacing and elevation
+*
+* @module @od-oneapp/uni-ui/components/ai-workflows/toolbar
+* @component Toolbar
+*
+* @useCases
+* - Workflow node action toolbar (edit, delete, duplicate actions)
+* - Context menu for selected nodes (quick actions on hover/select)
+* - Node configuration controls (settings, properties, connections)
+* - Inline node editing tools (text formatting, style options)
+* - Node metadata display (status, labels, badges)
+*
+* @example
+* <Node>
+*   <NodeContent>...</NodeContent>
+*   <Toolbar>
+*     <Button size="sm" variant="ghost">Edit</Button>
+*     <Button size="sm" variant="ghost">Delete</Button>
+*   </Toolbar>
+* </Node>
+*
+* @example
+* // With custom positioning
+* <Toolbar position="top" offset={10}>
+*   <IconButton icon={Settings} aria-label="Settings" />
+*   <IconButton icon={Trash} aria-label="Delete" />
+* </Toolbar>
+*/
+const Toolbar = ({ className, isVisible, isLoading = false, ...props }) => {
+	const isTouchDevice = useMediaQuery("(hover: none) and (pointer: coarse)");
+	const shouldReduceMotion = useReducedMotion();
+	useMemo(() => ({
+		initial: {
+			opacity: 0,
+			scale: .95,
+			y: -8
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			y: 0,
+			transition: shouldReduceMotion ? { duration: 0 } : {
+				...SPRING_FLUID,
+				opacity: { duration: .15 }
+			}
+		},
+		exit: {
+			opacity: 0,
+			scale: .95,
+			y: -8,
+			transition: shouldReduceMotion ? { duration: 0 } : { duration: .15 }
+		}
+	}), [shouldReduceMotion]);
+	return /* @__PURE__ */ jsx(NodeToolbar, {
+		className: cn("bg-card text-card-foreground", "flex items-center gap-1 rounded-lg border px-2", isTouchDevice ? "min-h-[44px] py-2.5" : "py-1.5", "border-border shadow-md", AI_FOCUS.ring, "transition-colors", className),
+		"data-state": isVisible ? "visible" : "hidden",
+		"data-loading": isLoading ? "true" : "false",
+		"data-touch": isTouchDevice ? "true" : "false",
+		...props
+	});
+};
+
+//#endregion
+export { Toolbar };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-workflows/toolbar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-workflows/toolbar/toolbar.tsx"],"sourcesContent":["/**\n * @fileoverview Toolbar Component - Premium Harmony V2\n *\n * A toolbar component that appears when a workflow node is selected or hovered.\n * Built on React Flow's NodeToolbar with Premium Harmony V2 motion, accessibility,\n * and responsive design patterns.\n *\n * Features:\n * - React Flow NodeToolbar integration with motion animations\n * - Context-aware positioning (appears on node selection)\n * - Premium Harmony V2 spring physics (SPRING_FLUID)\n * - Touch-optimized targets (44px minimum on touch devices)\n * - Reduced motion support (prefers-reduced-motion)\n * - Focus-visible ring styles for keyboard navigation\n * - Semantic color tokens (card, border, foreground)\n * - Data attributes for state tracking\n * - Responsive spacing and elevation\n *\n * @module @od-oneapp/uni-ui/components/ai-workflows/toolbar\n * @component Toolbar\n *\n * @useCases\n * - Workflow node action toolbar (edit, delete, duplicate actions)\n * - Context menu for selected nodes (quick actions on hover/select)\n * - Node configuration controls (settings, properties, connections)\n * - Inline node editing tools (text formatting, style options)\n * - Node metadata display (status, labels, badges)\n *\n * @example\n * <Node>\n *   <NodeContent>...</NodeContent>\n *   <Toolbar>\n *     <Button size=\"sm\" variant=\"ghost\">Edit</Button>\n *     <Button size=\"sm\" variant=\"ghost\">Delete</Button>\n *   </Toolbar>\n * </Node>\n *\n * @example\n * // With custom positioning\n * <Toolbar position=\"top\" offset={10}>\n *   <IconButton icon={Settings} aria-label=\"Settings\" />\n *   <IconButton icon={Trash} aria-label=\"Delete\" />\n * </Toolbar>\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport { useMemo } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { NodeToolbar } from '@xyflow/react';\n\nimport { cn } from '../../../lib/utils';\nimport { AI_FOCUS, SPRING_FLUID } from '../../ai-elements/ai-elements.constants';\n\nexport type ToolbarProps = ComponentProps<typeof NodeToolbar> & {\n  /**\n   * Whether the toolbar is currently visible\n   * Used for data-state attribute\n   */\n  isVisible?: boolean;\n  /**\n   * Whether the toolbar is in a loading state\n   * Used for data-loading attribute\n   */\n  isLoading?: boolean;\n};\n\nexport const Toolbar = ({ className, isVisible, isLoading = false, ...props }: ToolbarProps) => {\n  // Premium Harmony V2: Touch vs Desktop Detection\n  const isTouchDevice = useMediaQuery('(hover: none) and (pointer: coarse)');\n\n  // Premium Harmony V2: Reduced Motion Support\n  const shouldReduceMotion = useReducedMotion();\n\n  // Premium Harmony V2: Memoized animation variants\n  const animationVariants = useMemo(\n    () => ({\n      initial: { opacity: 0, scale: 0.95, y: -8 },\n      animate: {\n        opacity: 1,\n        scale: 1,\n        y: 0,\n        transition: shouldReduceMotion\n          ? { duration: 0 }\n          : {\n              ...SPRING_FLUID,\n              opacity: { duration: 0.15 },\n            },\n      },\n      exit: {\n        opacity: 0,\n        scale: 0.95,\n        y: -8,\n        transition: shouldReduceMotion\n          ? { duration: 0 }\n          : {\n              duration: 0.15,\n            },\n      },\n    }),\n    [shouldReduceMotion],\n  );\n\n  return (\n    <NodeToolbar\n      className={cn(\n        // Base styling with semantic color tokens\n        'bg-card text-card-foreground',\n        // Layout with responsive spacing\n        'flex items-center gap-1 rounded-lg border px-2',\n        // Premium Harmony V2: Touch-optimized targets (44px minimum on touch)\n        isTouchDevice ? 'min-h-[44px] py-2.5' : 'py-1.5',\n        // Elevation and borders\n        'border-border shadow-md',\n        // Premium Harmony V2: Focus-visible ring styles\n        AI_FOCUS.ring,\n        // Transitions\n        'transition-colors',\n        className,\n      )}\n      // Premium Harmony V2: Data attributes for state tracking\n      data-state={isVisible ? 'visible' : 'hidden'}\n      data-loading={isLoading ? 'true' : 'false'}\n      data-touch={isTouchDevice ? 'true' : 'false'}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAa,WAAW,EAAE,WAAW,WAAW,YAAY,OAAO,GAAG,YAA0B;CAE9F,MAAM,gBAAgB,cAAc,sCAAsC;CAG1E,MAAM,qBAAqB,kBAAkB;AAGnB,gBACjB;EACL,SAAS;GAAE,SAAS;GAAG,OAAO;GAAM,GAAG;GAAI;EAC3C,SAAS;GACP,SAAS;GACT,OAAO;GACP,GAAG;GACH,YAAY,qBACR,EAAE,UAAU,GAAG,GACf;IACE,GAAG;IACH,SAAS,EAAE,UAAU,KAAM;IAC5B;GACN;EACD,MAAM;GACJ,SAAS;GACT,OAAO;GACP,GAAG;GACH,YAAY,qBACR,EAAE,UAAU,GAAG,GACf,EACE,UAAU,KACX;GACN;EACF,GACD,CAAC,mBAAmB,CACrB;AAED,QACE,oBAAC;EACC,WAAW,GAET,gCAEA,kDAEA,gBAAgB,wBAAwB,UAExC,2BAEA,SAAS,MAET,qBACA,UACD;EAED,cAAY,YAAY,YAAY;EACpC,gBAAc,YAAY,SAAS;EACnC,cAAY,gBAAgB,SAAS;EACrC,GAAI;GACJ"}

package/dist/components-auth-client-nav-user.d.mts

@@ -0,0 +1,3 @@
+
+import { n as AuthNavUserProps, t as AuthNavUser } from "./auth-nav-user-CRxDpY_7.mjs";
+export { AuthNavUser, type AuthNavUser as AuthNavUserType, type AuthNavUserProps };

package/dist/components-auth-client-nav-user.mjs

@@ -0,0 +1,4 @@
+'use client';
+import { t as AuthNavUser } from "./auth-nav-user-DPFv8dTp.mjs";
+
+export { AuthNavUser };

package/dist/components-auth-client-providers.d.mts

@@ -0,0 +1,13 @@
+
+import * as React$1 from "react";
+
+//#region src/components/auth/client/providers.d.ts
+interface ProvidersProps {
+  children: React$1.ReactNode;
+}
+declare function Providers({
+  children
+}: ProvidersProps): React$1.ReactElement;
+//#endregion
+export { Providers, ProvidersProps };
+//# sourceMappingURL=components-auth-client-providers.d.mts.map

package/dist/components-auth-client-providers.mjs

@@ -0,0 +1,89 @@
+'use client';
+'use client';
+
+import { t as ThemeProvider } from "./theme-provider-4D34sBmG.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/auth/client/providers.tsx
+/**
+* Root providers wrapper for OneApp applications.
+*
+* Composes essential application-level context providers in a single wrapper
+* component. Currently includes theme provider for dark mode support with
+* system preference detection and color scheme synchronization.
+*
+* Premium Harmony V2 Features:
+* - Type-safe provider composition with explicit return type
+* - Client-side rendering optimized for Next.js App Router
+* - Hydration-safe theme initialization
+* - Extensible architecture for future provider additions
+* - Zero-configuration dark mode with sensible defaults
+*
+* Current Provider Stack:
+* - ThemeProvider: next-themes based dark mode with class attribute strategy
+*
+* @param props - Component props
+* @param props.children - Application content to wrap with providers
+* @returns React element with composed provider tree
+*
+* @example
+* ```tsx
+* // Basic implementation in root layout
+* import { Providers } from '@od-oneapp/uni-ui/components/auth/client/providers';
+*
+* export default function RootLayout({
+*   children,
+* }: {
+*   children: React.ReactNode;
+* }) {
+*   return (
+*     <html lang="en" suppressHydrationWarning>
+*       <body>
+*         <Providers>{children}</Providers>
+*       </body>
+*     </html>
+*   );
+* }
+* ```
+*
+* @example
+* ```tsx
+* // Composing with additional app-specific providers
+* import { Providers } from '@od-oneapp/uni-ui/components/auth/client/providers';
+* import { AnalyticsProvider } from '#/lib/analytics';
+* import { FeatureFlagProvider } from '#/lib/feature-flags';
+*
+* export default function RootLayout({
+*   children,
+* }: {
+*   children: React.ReactNode;
+* }) {
+*   return (
+*     <html lang="en" suppressHydrationWarning>
+*       <body>
+*         <Providers>
+*           <AnalyticsProvider>
+*             <FeatureFlagProvider>{children}</FeatureFlagProvider>
+*           </AnalyticsProvider>
+*         </Providers>
+*       </body>
+*     </html>
+*   );
+* }
+* ```
+*/
+function Providers({ children }) {
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		attribute: "class",
+		defaultTheme: "system",
+		enableSystem: true,
+		disableTransitionOnChange: true,
+		enableColorScheme: true,
+		children
+	});
+}
+
+//#endregion
+export { Providers };
+//# sourceMappingURL=components-auth-client-providers.mjs.map

package/dist/components-auth-client-providers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components-auth-client-providers.mjs","names":[],"sources":["../src/components/auth/client/providers.tsx"],"sourcesContent":["'use client';\n\n/**\n * @fileoverview Providers Component - Premium Harmony V2\n *\n * Root provider wrapper component that composes essential application-level\n * context providers for OneApp applications. Provides theme support via\n * next-themes for both onstage and backstage, ensuring consistent dark mode\n * behavior across all microfrontends.\n *\n * Features:\n * - Type-safe provider composition with explicit return type\n * - Hydration-safe theme initialization with system preference detection\n * - Client-side rendering optimized for Next.js App Router\n * - Color scheme synchronization across microfrontends\n * - Zero-configuration dark mode with sensible defaults\n * - Extensible architecture for future provider additions\n *\n * @module @od-oneapp/uni-ui/components/auth/client/providers\n * @component Providers\n *\n * @useCases\n * - Root layout provider wrapper in Next.js App Router applications\n * - Microfrontend theme synchronization across onstage/backstage apps\n * - System-preference-aware dark mode implementation\n * - Shared provider composition for multi-app monorepo architecture\n * - Extensible foundation for adding auth, i18n, or feature flag providers\n *\n * @example <Providers>{children}</Providers>\n * @example <Providers><AuthProvider>{children}</AuthProvider></Providers>\n */\n\nimport * as React from 'react';\n\nimport { ThemeProvider } from '../../layout/theme-provider';\n\n/**\n * Props for the Providers component.\n *\n * @property children - React children to be wrapped by all providers\n */\nexport interface ProvidersProps {\n  /**\n   * The application content to be wrapped by the provider composition.\n   * Typically the entire app tree in a root layout.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Root providers wrapper for OneApp applications.\n *\n * Composes essential application-level context providers in a single wrapper\n * component. Currently includes theme provider for dark mode support with\n * system preference detection and color scheme synchronization.\n *\n * Premium Harmony V2 Features:\n * - Type-safe provider composition with explicit return type\n * - Client-side rendering optimized for Next.js App Router\n * - Hydration-safe theme initialization\n * - Extensible architecture for future provider additions\n * - Zero-configuration dark mode with sensible defaults\n *\n * Current Provider Stack:\n * - ThemeProvider: next-themes based dark mode with class attribute strategy\n *\n * @param props - Component props\n * @param props.children - Application content to wrap with providers\n * @returns React element with composed provider tree\n *\n * @example\n * ```tsx\n * // Basic implementation in root layout\n * import { Providers } from '@od-oneapp/uni-ui/components/auth/client/providers';\n *\n * export default function RootLayout({\n *   children,\n * }: {\n *   children: React.ReactNode;\n * }) {\n *   return (\n *     <html lang=\"en\" suppressHydrationWarning>\n *       <body>\n *         <Providers>{children}</Providers>\n *       </body>\n *     </html>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Composing with additional app-specific providers\n * import { Providers } from '@od-oneapp/uni-ui/components/auth/client/providers';\n * import { AnalyticsProvider } from '#/lib/analytics';\n * import { FeatureFlagProvider } from '#/lib/feature-flags';\n *\n * export default function RootLayout({\n *   children,\n * }: {\n *   children: React.ReactNode;\n * }) {\n *   return (\n *     <html lang=\"en\" suppressHydrationWarning>\n *       <body>\n *         <Providers>\n *           <AnalyticsProvider>\n *             <FeatureFlagProvider>{children}</FeatureFlagProvider>\n *           </AnalyticsProvider>\n *         </Providers>\n *       </body>\n *     </html>\n *   );\n * }\n * ```\n */\nexport function Providers({ children }: ProvidersProps): React.ReactElement {\n  return (\n    <ThemeProvider\n      attribute=\"class\"\n      defaultTheme=\"system\"\n      enableSystem\n      disableTransitionOnChange\n      enableColorScheme\n    >\n      {children}\n    </ThemeProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoHA,SAAgB,UAAU,EAAE,YAAgD;AAC1E,QACE,oBAAC;EACC,WAAU;EACV,cAAa;EACb;EACA;EACA;EAEC;GACa"}

package/dist/components-auth-client.d.mts

@@ -0,0 +1,5 @@
+
+import { n as AuthNavUserProps, t as AuthNavUser } from "./auth-nav-user-CRxDpY_7.mjs";
+import "./components-auth-client-nav-user.mjs";
+import { Providers, ProvidersProps } from "./components-auth-client-providers.mjs";
+export { AuthNavUser, AuthNavUser as AuthNavUserType, AuthNavUserProps, Providers, ProvidersProps };

package/dist/components-auth-client.mjs

@@ -0,0 +1,5 @@
+'use client';
+import { t as AuthNavUser } from "./auth-nav-user-DPFv8dTp.mjs";
+import { Providers } from "./components-auth-client-providers.mjs";
+
+export { AuthNavUser, Providers };