@vadimcomanescu/nadicode-design-system 5.0.2 → 6.0.1

package/dist/{chunk-EJQ73FJ5.js → chunk-DW3XHDFX.js}

@@ -4,7 +4,7 @@ import { Timeline } from './chunk-YQIABLDO.js';
 import { Spinner } from './chunk-ZLSWCV55.js';
 import { SuccessCheck } from './chunk-7X3GXC7C.js';
 import { RoleBadge } from './chunk-OHCQPI3W.js';
-import { SettingsModal } from './chunk-KKBTPNXT.js';
+import { SettingsModal } from './chunk-QJ5ODJTH.js';
 import { NotificationCenter } from './chunk-KL43KGCK.js';
 import { Progress } from './chunk-JWQXBRE7.js';
 import { ProgressRing } from './chunk-2LBEV4YF.js';
@@ -14,7 +14,7 @@ import { TrendIndicator } from './chunk-3R2VLZUR.js';
 import { StatusDot } from './chunk-B5QL76GA.js';
 import { Item } from './chunk-34MKVVGB.js';
 import { DataFreshness } from './chunk-WST5NLLC.js';
-import { DataTable } from './chunk-V5RSV4ZV.js';
+import { DataTable } from './chunk-VTIT5C7L.js';
 import { Table, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-PXDHNGTG.js';
 import { DiffStat } from './chunk-ZSU5ZI4O.js';
 import { CheckStatus } from './chunk-TV6CJ5NI.js';
@@ -29,6 +29,8 @@ import { AnnouncementBanner } from './chunk-44NVO477.js';
 import { AudioWaveform } from './chunk-5UESKK6S.js';
 import { Badge } from './chunk-S4JAHKOP.js';
 import { Alert, AlertTitle, AlertDescription } from './chunk-6CLSVCWP.js';
+import { useCallback } from 'react';
+import { useBoundProp } from '@json-render/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var displayComponents = {
@@ -64,9 +66,12 @@ var displayComponents = {
       }
     );
   },
-  DataTable: ({ props, emit }) => {
+  DataTable: ({ props, bindings, emit }) => {
     const catalogColumns = props.columns ?? [];
     const rows = props.rows ?? [];
+    const [, setBoundSortColumn] = useBoundProp(void 0, bindings?.sortColumn);
+    const [, setBoundSortDirection] = useBoundProp(void 0, bindings?.sortDirection);
+    const [, setBoundFilterValue] = useBoundProp(void 0, bindings?.filterValue);
     const columns = catalogColumns.map((col) => ({
       accessorKey: col.key,
       header: col.header,
@@ -78,7 +83,20 @@ var displayComponents = {
         columns,
         data: rows,
         searchKey: nn(props.searchKey),
-        onRowClick: () => emit("select")
+        onRowClick: () => emit("select"),
+        onSortChange: (sorting) => {
+          if (sorting.length > 0) {
+            setBoundSortColumn(sorting[0].id);
+            setBoundSortDirection(sorting[0].desc ? "desc" : "asc");
+          }
+          emit("sort");
+        },
+        onFilterChange: (filters) => {
+          if (filters.length > 0) {
+            setBoundFilterValue(String(filters[0].value));
+          }
+          emit("filter");
+        }
       }
     );
   },
@@ -225,7 +243,7 @@ var displayComponents = {
       }
     );
   },
-  NotificationCenter: ({ props, emit }) => {
+  NotificationCenter: ({ props, bindings, emit }) => {
     const notifications = (props.notifications ?? []).map((n) => ({
       id: n.id,
       title: n.title,
@@ -234,12 +252,19 @@ var displayComponents = {
       timestamp: nn(n.timestamp),
       read: nn(n.read)
     }));
+    const [, setBoundNotificationId] = useBoundProp(void 0, bindings?.selectedNotificationId);
     return /* @__PURE__ */ jsx(
       NotificationCenter,
       {
         notifications,
-        onDismiss: () => emit("dismiss"),
-        onNotificationClick: () => emit("select"),
+        onDismiss: (id) => {
+          setBoundNotificationId(id);
+          emit("dismiss");
+        },
+        onNotificationClick: (notification) => {
+          setBoundNotificationId(notification.id);
+          emit("select");
+        },
         emptyMessage: nn(props.emptyMessage),
         className: nn(props.className)
       }
@@ -261,12 +286,21 @@ var displayComponents = {
       }
     );
   },
-  Carousel: ({ props, children }) => {
+  Carousel: ({ props, bindings, emit, children }) => {
+    const [, setBoundSelectedIndex] = useBoundProp(void 0, bindings?.selectedIndex);
+    const handleApi = useCallback((api) => {
+      if (!api) return;
+      api.on("select", () => {
+        setBoundSelectedIndex(api.selectedScrollSnap());
+        emit("select");
+      });
+    }, [setBoundSelectedIndex, emit]);
     return /* @__PURE__ */ jsxs(
       Carousel,
       {
         orientation: nn(props.orientation),
         className: nn(props.className),
+        setApi: handleApi,
         children: [
           /* @__PURE__ */ jsx(CarouselContent, { children }),
           /* @__PURE__ */ jsx(CarouselPrevious, {}),
@@ -334,7 +368,8 @@ var displayComponents = {
       }
     );
   },
-  TreeView: ({ props, emit }) => {
+  TreeView: ({ props, bindings, emit }) => {
+    const [, setBoundSelectedNode] = useBoundProp(void 0, bindings?.selectedNode);
     const toTreeNodes = (nodes) => nodes.map((n) => ({
       id: n.id,
       label: n.label,
@@ -344,27 +379,43 @@ var displayComponents = {
       TreeView,
       {
         data: toTreeNodes(props.data),
-        onSelect: () => emit("select"),
+        onSelect: (node) => {
+          setBoundSelectedNode(node.id);
+          emit("select");
+        },
         className: nn(props.className)
       }
     );
   },
-  AvatarUpload: ({ props, emit }) => {
+  AvatarUpload: ({ props, bindings, emit }) => {
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
     return /* @__PURE__ */ jsx(
       AvatarUpload,
       {
-        value: nn(props.value),
-        onChange: () => emit("change"),
+        value: boundValue ?? "",
+        onChange: (file) => {
+          if (file) {
+            const url = URL.createObjectURL(file);
+            setBoundValue(url);
+          } else {
+            setBoundValue("");
+          }
+          emit("change");
+        },
         className: nn(props.className)
       }
     );
   },
-  SettingsModal: ({ props, emit, children }) => {
+  SettingsModal: ({ props, bindings, emit, children }) => {
     const tabs = (props.tabs ?? []).map((t) => ({
       id: t.id,
       label: nn(t.label),
       icon: /* @__PURE__ */ jsx("span", { children: t.id })
     }));
+    const [, setBoundSelectedTab] = useBoundProp(void 0, bindings?.selectedTab);
     return /* @__PURE__ */ jsx(
       SettingsModal,
       {
@@ -374,7 +425,11 @@ var displayComponents = {
         },
         defaultTab: nn(props.defaultTab),
         tabs: tabs.length > 0 ? tabs : void 0,
-        renderContent: () => children
+        renderContent: () => children,
+        onTabChange: (tab) => {
+          setBoundSelectedTab(tab);
+          emit("tabChange");
+        }
       }
     );
   }

package/dist/{chunk-ZL6BPQNN.js → chunk-EKSXBDOA.js}

@@ -53,27 +53,31 @@ var blocksAuthDefinitions = {
   CheckEmailBlock: {
     props: z.object({
       email: z.string().nullable(),
-      type: z.enum(["verification", "reset", "magic-link"]).nullable()
+      type: z.enum(["verification", "reset", "magic-link"]).nullable(),
+      state: z.enum(["idle", "loading", "sent", "error"]).nullable(),
+      error: z.string().nullable()
     }),
     events: ["resend", "backToLogin"],
     description: "Post-submission email check prompt with resend action and step-by-step instructions.",
-    example: { email: "alex@company.com", type: "verification" }
+    example: { email: "alex@company.com", type: "verification", state: null, error: null }
   },
   LoginBlock: {
     props: z.object({
       type: z.enum(["login", "signup"]).nullable(),
       showSocial: z.boolean().nullable(),
       error: z.string().nullable(),
+      loading: z.boolean().nullable(),
       forgotPasswordHref: z.string().nullable(),
       signUpHref: z.string().nullable(),
       signInHref: z.string().nullable(),
       email: z.string().nullable(),
       password: z.string().nullable(),
-      fullName: z.string().nullable()
+      fullName: z.string().nullable(),
+      selectedProvider: z.string().nullable()
     }),
     events: ["submit", "socialLogin"],
     description: "Authentication login form with email/password fields and optional social login buttons.",
-    example: { type: "login", showSocial: true, error: null, forgotPasswordHref: "/reset-password", signUpHref: null, signInHref: null, email: null, password: null, fullName: null }
+    example: { type: "login", showSocial: true, error: null, loading: false, forgotPasswordHref: "/reset-password", signUpHref: null, signInHref: null, email: null, password: null, fullName: null, selectedProvider: null }
   },
   OTPBlock: {
     props: z.object({
@@ -96,22 +100,26 @@ var blocksAuthDefinitions = {
       description: z.string().nullable(),
       buttonText: z.string().nullable(),
       successTitle: z.string().nullable(),
-      email: z.string().nullable()
+      email: z.string().nullable(),
+      state: z.enum(["idle", "loading", "success", "error"]).nullable(),
+      error: z.string().nullable()
     }),
-    events: ["submit", "backToLogin"],
+    events: ["submit", "resend", "backToLogin"],
     description: "Password recovery form with email input. Supports reset and magic-link modes.",
-    example: { mode: "reset", title: "Forgot your password?", description: "Enter your email and we will send a reset link.", buttonText: "Send Reset Link", successTitle: "Check your inbox", email: null }
+    example: { mode: "reset", title: "Forgot your password?", description: "Enter your email and we will send a reset link.", buttonText: "Send Reset Link", successTitle: "Check your inbox", email: null, state: null, error: null }
   },
   ResetPasswordBlock: {
     props: z.object({
       title: z.string().nullable(),
       description: z.string().nullable(),
       password: z.string().nullable(),
-      confirmPassword: z.string().nullable()
+      confirmPassword: z.string().nullable(),
+      state: z.enum(["idle", "loading", "success", "error"]).nullable(),
+      error: z.string().nullable()
     }),
     events: ["submit", "backToLogin"],
     description: "New password form with password confirmation. Shown after recovery link click.",
-    example: { title: "Set New Password", description: "Choose a strong password for your account.", password: null, confirmPassword: null }
+    example: { title: "Set New Password", description: "Choose a strong password for your account.", password: null, confirmPassword: null, state: null, error: null }
   },
   TwoFactorSetupBlock: {
     props: z.object({
@@ -120,7 +128,9 @@ var blocksAuthDefinitions = {
       backupCodes: z.array(z.string()).nullable(),
       title: z.string().nullable(),
       description: z.string().nullable(),
-      verifyCode: z.string().nullable()
+      verifyCode: z.string().nullable(),
+      state: z.enum(["idle", "loading", "success", "error"]).nullable(),
+      error: z.string().nullable()
     }),
     events: ["verify", "complete"],
     description: "Two-factor setup wizard with QR code, secret key display, backup codes, and verification.",
@@ -130,7 +140,9 @@ var blocksAuthDefinitions = {
       backupCodes: ["a1b2c3d4", "e5f6g7h8", "i9j0k1l2"],
       title: "Enable Two-Factor Authentication",
       description: "Scan the QR code with your authenticator app.",
-      verifyCode: null
+      verifyCode: null,
+      state: null,
+      error: null
     }
   }
 };

package/dist/{chunk-UCFR7GLW.js → chunk-EX5AIP2Q.js}

@@ -2,7 +2,6 @@ import { TextReveal } from './chunk-LV4LBWCS.js';
 import { AnimatedGradientText } from './chunk-XZ3A33GP.js';
 import { MouseGlow } from './chunk-MZGGA75L.js';
 import { Heading } from './chunk-UXX6HHPS.js';
-import { siteConfig } from './chunk-A7NUWD76.js';
 import { Card, CardHeader, CardContent } from './chunk-7UY24UWL.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { m, heroStagger } from './chunk-PD2YEH3H.js';
@@ -21,7 +20,7 @@ var TEXT_EFFECTS = {
 };
 var DEFAULT_PRIMARY_ACTION = { label: "Get Started" };
 var DEFAULT_SECONDARY_ACTION = { label: "View Components" };
-var DEFAULT_ANNOUNCEMENT = { label: "New", text: `${siteConfig.name} System v2.0 is now live`, href: "#" };
+var DEFAULT_ANNOUNCEMENT = { label: "New", text: "Design System v2.0 is now live", href: "#" };
 function HeroCenteredVariant({
   headline = "Experience the Future of Synthetic Intelligence",
   subheadline = "Unleash the power of deep learning with our ultra-realistic, high-performance design system. Built for the next generation of AI interfaces.",
@@ -110,9 +109,10 @@ function HeroCenteredVariant({
 }
 var DEFAULT_SPLIT_PRIMARY_ACTION = { label: "Start Building" };
 function HeroSplitVariant({
-  headline = `Build faster with ${siteConfig.name}`,
+  headline = "Build faster with our platform",
   subheadline = "A complete component library for building modern, high-contrast AI applications.",
   primaryAction = DEFAULT_SPLIT_PRIMARY_ACTION,
+  secondaryAction,
   className
 }) {
   const shouldReduceMotion = useReducedMotion();
@@ -140,7 +140,7 @@ function HeroSplitVariant({
               primaryAction.label,
               /* @__PURE__ */ jsx(ZapIcon, { size: 16, className: "ml-2" })
             ] }),
-            /* @__PURE__ */ jsx(Button, { size: "lg", variant: "ghost", children: "Documentation" })
+            /* @__PURE__ */ jsx(Button, { size: "lg", variant: "ghost", onClick: secondaryAction?.onClick, children: secondaryAction?.label ?? "Documentation" })
           ] }) }),
           /* @__PURE__ */ jsx(Item, { ...!shouldReduceMotion && { variants: heroStagger.child }, children: /* @__PURE__ */ jsxs("div", { className: "mt-8 flex items-center gap-4 text-sm text-text-tertiary", children: [
             /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs("div", { className: "h-8 w-8 rounded-full border-2 border-background bg-surface-active flex items-center justify-center text-[10px] font-semibold", children: [

package/dist/chunk-F4BPNMAD.js

@@ -0,0 +1,185 @@
+import { HeatmapChartBlock } from './chunk-767GZSNJ.js';
+import { AreaChart } from './chunk-ZTNHUABC.js';
+import { BarChart } from './chunk-JICACDAV.js';
+import { LineChart } from './chunk-Z2NBLCSD.js';
+import { PieChart } from './chunk-O4QTL2EQ.js';
+import { RadarChart } from './chunk-UFZH45UL.js';
+import { RadialBarChart } from './chunk-RAVRFGA5.js';
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Heading } from './chunk-UXX6HHPS.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-7UY24UWL.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var noop = () => {
+};
+var noopOn = () => ({ emit: noop, shouldPreventDefault: false, bound: false });
+var areaData = [
+  { month: "Jan", desktop: 186, mobile: 80 },
+  { month: "Feb", desktop: 305, mobile: 200 },
+  { month: "Mar", desktop: 237, mobile: 120 },
+  { month: "Apr", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "Jun", desktop: 214, mobile: 140 }
+];
+var chartData = [
+  { browser: "chrome", visitors: 275, fill: "rgb(var(--chart-1))" },
+  { browser: "safari", visitors: 200, fill: "rgb(var(--chart-2))" },
+  { browser: "firefox", visitors: 187, fill: "rgb(var(--chart-3))" },
+  { browser: "edge", visitors: 173, fill: "rgb(var(--chart-4))" },
+  { browser: "other", visitors: 90, fill: "rgb(var(--chart-5))" }
+];
+var radarData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 273 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 }
+];
+var radialData = [
+  { browser: "chrome", visitors: 275, fill: "rgb(var(--chart-1))" },
+  { browser: "safari", visitors: 200, fill: "rgb(var(--chart-2))" },
+  { browser: "firefox", visitors: 187, fill: "rgb(var(--chart-3))" },
+  { browser: "edge", visitors: 173, fill: "rgb(var(--chart-4))" },
+  { browser: "other", visitors: 90, fill: "rgb(var(--chart-5))" }
+];
+var areaConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "rgb(var(--chart-1))"
+  }
+};
+var barLineConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "rgb(var(--chart-1))"
+  }
+};
+var pieConfig = {
+  chrome: { label: "Chrome", color: "rgb(var(--chart-1))" },
+  safari: { label: "Safari", color: "rgb(var(--chart-2))" },
+  firefox: { label: "Firefox", color: "rgb(var(--chart-3))" },
+  edge: { label: "Edge", color: "rgb(var(--chart-4))" },
+  other: { label: "Other", color: "rgb(var(--chart-5))" }
+};
+var radarConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "rgb(var(--chart-1))"
+  }
+};
+var radialConfig = {
+  chrome: { label: "Chrome", color: "rgb(var(--chart-1))" },
+  safari: { label: "Safari", color: "rgb(var(--chart-2))" },
+  firefox: { label: "Firefox", color: "rgb(var(--chart-3))" },
+  edge: { label: "Edge", color: "rgb(var(--chart-4))" },
+  other: { label: "Other", color: "rgb(var(--chart-5))" }
+};
+function ChartCollectionBlock({ props }) {
+  const title = props.title ?? null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    title ? /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", children: title }) : null,
+    /* @__PURE__ */ jsxs(StaggerChildren, { staggerMs: 100, className: "grid gap-6 md:grid-cols-2 lg:grid-cols-3", children: [
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsxs(CardHeader, { children: [
+          /* @__PURE__ */ jsx(CardTitle, { children: "Area Chart" }),
+          /* @__PURE__ */ jsx(CardDescription, { children: "Usage overview" })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: areaData.length > 0 && /* @__PURE__ */ jsx(
+          AreaChart,
+          {
+            data: areaData,
+            config: areaConfig,
+            indexKey: "month",
+            areas: ["desktop"],
+            className: "h-[250px] w-full",
+            showLegend: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Bar Chart" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: areaData.length > 0 && /* @__PURE__ */ jsx(
+          BarChart,
+          {
+            data: areaData,
+            config: barLineConfig,
+            indexKey: "month",
+            bars: ["desktop"],
+            className: "h-[250px] w-full",
+            showLegend: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Line Chart" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: areaData.length > 0 && /* @__PURE__ */ jsx(
+          LineChart,
+          {
+            data: areaData,
+            config: barLineConfig,
+            indexKey: "month",
+            lines: ["desktop"],
+            className: "h-[250px] w-full",
+            showLegend: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Pie Chart" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: chartData.length > 0 && /* @__PURE__ */ jsx(
+          PieChart,
+          {
+            data: chartData,
+            config: pieConfig,
+            dataKey: "visitors",
+            nameKey: "browser",
+            variant: "donut",
+            innerRadius: 60,
+            showLegend: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Radar Chart" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: radarData.length > 0 && /* @__PURE__ */ jsx(
+          RadarChart,
+          {
+            data: radarData,
+            config: radarConfig,
+            indexKey: "month",
+            series: ["desktop"],
+            className: "h-[250px] w-full",
+            showLegend: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(Card, { children: [
+        /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Radial Chart" }) }),
+        /* @__PURE__ */ jsx(CardContent, { children: radialData.length > 0 && /* @__PURE__ */ jsx(
+          RadialBarChart,
+          {
+            data: radialData,
+            config: radialConfig,
+            dataKey: "visitors",
+            nameKey: "browser",
+            innerRadius: 40,
+            outerRadius: 100,
+            className: "h-[250px] w-full",
+            showLegend: false
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        HeatmapChartBlock,
+        {
+          props: { data: null, config: null, title: null, description: null },
+          emit: noop,
+          on: noopOn
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ChartCollectionBlock };

package/dist/{chunk-STNVWBJH.js → chunk-FGGGUS5L.js}

@@ -1,4 +1,4 @@
-import { LOCAL_CLOUD_LOGOS } from './chunk-OWWQP3YW.js';
+import { LOCAL_CLOUD_LOGOS } from './chunk-4DQMGKPG.js';
 import { StaggerChildren } from './chunk-DQPK2XRL.js';
 import { Heading } from './chunk-UXX6HHPS.js';
 import { cn } from './chunk-QYZT24TS.js';

package/dist/{chunk-IZ7A62GI.js → chunk-GBKAQWME.js}

@@ -1,6 +1,5 @@
 import { ScrollArea } from './chunk-GLU236NN.js';
 import { Input } from './chunk-AP3XXYAY.js';
-import { useSafeTimeout } from './chunk-MDAYDDTC.js';
 import { Avatar, AvatarFallback } from './chunk-NAAU5IWU.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
@@ -10,6 +9,7 @@ import { SendIcon } from './chunk-CRZ2JE24.js';
 import { UserIcon } from './chunk-UHXGBV5N.js';
 import { cn } from './chunk-QYZT24TS.js';
 import * as React from 'react';
+import { useBoundProp } from '@json-render/react';
 import { useTranslations } from 'next-intl';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -21,44 +21,44 @@ var defaultInitialMessages = [
   }
 ];
 function ChatLayout({
-  props
+  props,
+  bindings,
+  emit
 }) {
   const initialMessages = props.initialMessages ?? defaultInitialMessages;
+  const messages = props.messages ?? void 0;
   const assistantName = props.assistantName ?? "AI Assistant";
   const assistantStatus = props.assistantStatus ?? "Online";
   const placeholder = props.placeholder ?? "Type a message...";
   const className = props.className;
   const t = useTranslations("blocks.chatLayout");
   const motionConfig = useMotionConfig();
-  const [messages, setMessages] = React.useState(initialMessages);
-  const [input, setInput] = React.useState("");
+  const [localMessages, setLocalMessages] = React.useState(initialMessages);
+  const resolvedMessages = messages ?? localMessages;
+  const [boundInput, setBoundInput] = useBoundProp(props.messageInput, bindings?.messageInput);
+  const [localInput, setLocalInput] = React.useState("");
+  const isInputBound = !!bindings?.messageInput;
+  const input = isInputBound ? boundInput ?? "" : localInput;
+  const setInput = isInputBound ? setBoundInput : setLocalInput;
   const scrollRef = React.useRef(null);
-  const setSafeTimeout = useSafeTimeout();
   const handleSend = () => {
     if (!input.trim()) return;
-    const newMessage = {
-      id: Date.now().toString(),
-      role: "user",
-      content: input
-    };
-    setMessages((prev) => [...prev, newMessage]);
+    if (!messages) {
+      const newMessage = {
+        id: Date.now().toString(),
+        role: "user",
+        content: input
+      };
+      setLocalMessages((prev) => [...prev, newMessage]);
+    }
+    emit("send");
     setInput("");
-    setSafeTimeout(() => {
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: (Date.now() + 1).toString(),
-          role: "assistant",
-          content: "This is a simulated response matching the design system."
-        }
-      ]);
-    }, 1e3);
   };
   React.useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollIntoView({ behavior: "smooth" });
     }
-  }, [messages]);
+  }, [resolvedMessages]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex h-[350px] md:h-[500px] w-full flex-col overflow-hidden rounded-lg glass-panel", className), children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-border/50 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-accent text-accent-foreground", children: /* @__PURE__ */ jsx(BotIcon, { size: 16 }) }) }),
@@ -68,7 +68,7 @@ function ChatLayout({
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 p-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      messages.map((message, index) => /* @__PURE__ */ jsxs(
+      resolvedMessages.map((message, index) => /* @__PURE__ */ jsxs(
         m.div,
         {
           initial: { opacity: 0, y: 8 },

package/dist/{chunk-XYMFKNKG.js → chunk-GW7A5G4W.js}

@@ -5,6 +5,7 @@ import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, Menu
 import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from './chunk-BHPATKC7.js';
 import { FloatingDock } from './chunk-TXRGQO5M.js';
 import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator } from './chunk-35EX5FP5.js';
+import { useBoundProp } from '@json-render/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var navigationComponents = {
@@ -18,12 +19,19 @@ var navigationComponents = {
       ] }) }, i);
     }) }) });
   },
-  NavigationMenu: ({ props, emit }) => {
+  NavigationMenu: ({ props, bindings, emit }) => {
     const items = props.items ?? [];
+    const [, setBoundSelectedHref] = useBoundProp(void 0, bindings?.selectedHref);
     return /* @__PURE__ */ jsx(NavigationMenu, { className: nn(props.className), children: /* @__PURE__ */ jsx(NavigationMenuList, { children: items.map((item, i) => /* @__PURE__ */ jsx(NavigationMenuItem, { children: item.children && item.children.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "grid gap-1 p-3 w-48", children: item.children.map((child, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: child.href, onClick: () => emit("navigate"), className: "block rounded px-3 py-2 text-sm hover:bg-surface-hover transition-colors", children: child.label }) }, j)) }) })
-    ] }) : /* @__PURE__ */ jsx(NavigationMenuLink, { href: item.href ?? "#", onClick: () => emit("navigate"), className: "px-3 py-2 text-sm", children: item.label }) }, i)) }) });
+      /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "grid gap-1 p-3 w-48", children: item.children.map((child, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: child.href, onClick: () => {
+        setBoundSelectedHref(child.href);
+        emit("navigate");
+      }, className: "block rounded px-3 py-2 text-sm hover:bg-surface-hover transition-colors", children: child.label }) }, j)) }) })
+    ] }) : /* @__PURE__ */ jsx(NavigationMenuLink, { href: item.href ?? "#", onClick: () => {
+      setBoundSelectedHref(item.href ?? "#");
+      emit("navigate");
+    }, className: "px-3 py-2 text-sm", children: item.label }) }, i)) }) });
   },
   Sidebar: ({ props, children }) => {
     return /* @__PURE__ */ jsxs(SidebarProvider, { children: [
@@ -42,13 +50,22 @@ var navigationComponents = {
   },
   Drawer: ({
     props,
+    bindings,
     emit,
     children
   }) => {
+    const [boundOpen, setBoundOpen] = useBoundProp(
+      props.open,
+      bindings?.open
+    );
+    const isBound = !!bindings?.open;
+    const openProps = isBound ? { open: boundOpen ?? false } : {};
     return /* @__PURE__ */ jsxs(
       Drawer,
       {
+        ...openProps,
         onOpenChange: (v) => {
+          if (isBound) setBoundOpen(v);
           if (!v) emit("close");
         },
         children: [
@@ -78,11 +95,15 @@ var navigationComponents = {
       }
     );
   },
-  Menubar: ({ props, emit }) => {
+  Menubar: ({ props, bindings, emit }) => {
     const menus = props.menus ?? [];
+    const [, setBoundSelectedItem] = useBoundProp(void 0, bindings?.selectedItem);
     return /* @__PURE__ */ jsx(Menubar, { className: nn(props.className), children: menus.map((menu, i) => /* @__PURE__ */ jsxs(MenubarMenu, { children: [
       /* @__PURE__ */ jsx(MenubarTrigger, { children: menu.label }),
-      /* @__PURE__ */ jsx(MenubarContent, { children: menu.items.map((item) => /* @__PURE__ */ jsxs(MenubarItem, { onSelect: () => emit("select"), children: [
+      /* @__PURE__ */ jsx(MenubarContent, { children: menu.items.map((item) => /* @__PURE__ */ jsxs(MenubarItem, { onSelect: () => {
+        setBoundSelectedItem(item.value);
+        emit("select");
+      }, children: [
         item.label,
         item.shortcut && /* @__PURE__ */ jsx(MenubarShortcut, { children: item.shortcut })
       ] }, item.value)) })