@superblocksteam/vite-plugin-file-sync 2.0.162 → 2.0.163-next.1

package/dist/migration-templates/app-fullstack/client/components/ui/hover-card.tsx

@@ -55,43 +55,16 @@ const hoverCardPropertiesDefinition: PropertiesPanelDefinition<
   React.ComponentPropsWithoutRef<typeof HoverCard>
 > = {
   general: Section.category(PropsCategory.Content).children({
-    open: Prop.boolean().propertiesPanel({
-      label: "Open",
-      controlType: "SWITCH",
-      description:
-        "The controlled open state of the hover card. Must be used in conjunction with `onOpenChange`.",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
+    open: Prop.boolean(),
     children: Prop.jsx(),
-    openDelay: Prop.number().propertiesPanel({
-      label: "Open delay",
-      description:
-        "The duration from when the mouse enters the trigger until the hover card opens (in milliseconds)",
-    }),
-    closeDelay: Prop.number().propertiesPanel({
-      label: "Close delay",
-      description:
-        "The duration from when the mouse leaves the trigger until the hover card closes (in milliseconds)",
-    }),
+    openDelay: Prop.number(),
+    closeDelay: Prop.number(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    defaultOpen: Prop.boolean().propertiesPanel({
-      label: "Default open",
-      description: "Whether the hover card is open by default",
-    }),
+    defaultOpen: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onOpenChange: Prop.eventHandler().propertiesPanel({
-      label: "onOpenChange",
-      computedArgs: [
-        {
-          name: "open",
-          type: "boolean",
-          description: "Whether the hover card is open",
-        },
-      ],
-    }),
+    onOpenChange: Prop.eventHandler(),
   }),
 };
 
@@ -111,40 +84,11 @@ const hoverCardContentPropertiesDefinition: PropertiesPanelDefinition<
     children: Prop.jsx(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    side: Prop.string<"top" | "right" | "bottom" | "left">().propertiesPanel({
-      label: "Side",
-      controlType: "DROP_DOWN",
-      description: "The preferred side of the trigger to render against",
-      options: [
-        { label: "Top", value: "top" },
-        { label: "Right", value: "right" },
-        { label: "Bottom", value: "bottom" },
-        { label: "Left", value: "left" },
-      ],
-    }),
-    align: Prop.string<"start" | "center" | "end">().propertiesPanel({
-      label: "Align",
-      controlType: "DROP_DOWN",
-      description: "The preferred alignment against the trigger",
-      options: [
-        { label: "Start", value: "start" },
-        { label: "Center", value: "center" },
-        { label: "End", value: "end" },
-      ],
-    }),
-    sideOffset: Prop.number().propertiesPanel({
-      label: "Side offset",
-      description: "The distance in pixels from the trigger",
-    }),
-    alignOffset: Prop.number().propertiesPanel({
-      label: "Align offset",
-      description: "An offset in pixels from the alignment axis",
-    }),
-    avoidCollisions: Prop.boolean().propertiesPanel({
-      label: "Avoid collisions",
-      description:
-        "Whether the content should avoid collisions with other elements",
-    }),
+    side: Prop.string<"top" | "right" | "bottom" | "left">(),
+    align: Prop.string<"start" | "center" | "end">(),
+    sideOffset: Prop.number(),
+    alignOffset: Prop.number(),
+    avoidCollisions: Prop.boolean(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/icon.tsx

@@ -2,12 +2,11 @@ import { DynamicIcon, type IconName } from "lucide-react/dynamic";
 import type { ReactNode } from "react";
 import React from "react";
 
-import { registerComponent } from "@superblocksteam/library";
 import {
+  registerComponent,
   Prop,
   Section,
   PropsCategory,
-  tailwindStylesCategory,
   type EditorConfig,
 } from "@superblocksteam/library";
 
@@ -99,24 +98,12 @@ const Icon = ({
 // Properties Definition
 const propertiesDefinition = {
   general: Section.category(PropsCategory.Content).children({
-    icon: Prop.string<IconName>().propertiesPanel({
-      label: "Icon name",
-      controlType: "ICON_SELECTOR",
-      description: "The name of the Lucide icon (e.g., 'heart', 'arrow-right')",
-      placeholder: "heart" satisfies IconName,
-    }),
-    // no props panel for now
+    icon: Prop.string<IconName>(),
     children: Prop.jsx(),
   }),
-  styles: tailwindStylesCategory({
-    prioritizedTailwindProperties: ["stroke", "stroke-width"],
-  }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler().propertiesPanel({
-      label: "onClick",
-      description: "Triggered when the icon is clicked",
-    }),
+    onClick: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/image.tsx

@@ -5,7 +5,6 @@ import {
   Prop,
   Section,
   PropsCategory,
-  tailwindStylesCategory,
   type PropertiesPanelDefinition,
   type EditorConfig,
 } from "@superblocksteam/library";
@@ -34,23 +33,12 @@ const Image = ({ children: _, ...props }: ImageProps) => {
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<ImageProps> = {
   general: Section.category(PropsCategory.Content).children({
-    src: Prop.string().propertiesPanel({
-      label: "Image URL",
-      description: "The URL of the image to display",
-    }),
-    alt: Prop.string().propertiesPanel({
-      label: "Alt text",
-      description: "Alternative text for the image (for accessibility)",
-    }),
-  }),
-  styles: tailwindStylesCategory({
-    prioritizedTailwindProperties: ["rounded", "object-fit", "object-position"],
+    src: Prop.string(),
+    alt: Prop.string(),
   }),
+
   events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler().propertiesPanel({
-      label: "onClick",
-      description: "Triggered when the image is clicked",
-    }),
+    onClick: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/input.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { registerComponent } from "@superblocksteam/library";
 import {
+  registerComponent,
   Prop,
   Section,
   PropsCategory,
@@ -30,180 +30,39 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 
 type InputProps = React.ComponentProps<typeof Input>;
 
-// Input type constants for property visibility
-const AUTO_COMPLETE_INPUT_TYPES = ["text", "email", "password", "url"];
-const TEXT_INPUT_TYPES = ["text", "email", "password", "url"];
-const NUMERIC_INPUT_TYPES = ["number"];
-const STEP_INPUT_TYPES = ["number"];
-
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<InputProps> = {
   general: Section.category(PropsCategory.Content).children({
-    value: Prop.string().propertiesPanel({
-      label: "Value",
-      controlType: "INPUT_TEXT",
-      description: "The controlled value of the input",
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-    }),
-    defaultValue: Prop.string().propertiesPanel({
-      label: "Default value",
-      controlType: "INPUT_TEXT",
-      description: "The default value of the input",
-    }),
-    placeholder: Prop.string().propertiesPanel({
-      label: "Placeholder",
-      controlType: "INPUT_TEXT",
-      description: "Placeholder text shown when input is empty",
-    }),
-    type: Prop.string<
-      "text" | "email" | "password" | "number" | "url"
-    >().propertiesPanel({
-      label: "Type",
-      controlType: "DROP_DOWN",
-      description: "The type of input",
-      options: [
-        { label: "Text", value: "text" },
-        { label: "Email", value: "email" },
-        { label: "Password", value: "password" },
-        { label: "Number", value: "number" },
-        { label: "URL", value: "url" },
-      ],
-    }),
+    value: Prop.string(),
+    defaultValue: Prop.string(),
+    placeholder: Prop.string(),
+    type: Prop.string<"text" | "email" | "password" | "number" | "url">(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    autoComplete: Prop.string().propertiesPanel({
-      label: "Auto complete",
-      controlType: "DROP_DOWN",
-      description: "Hint for form autofill feature",
-      options: [
-        { label: "Off", value: "off" },
-        { label: "On", value: "on" },
-        { label: "Name", value: "name" },
-        { label: "Email", value: "email" },
-        { label: "Username", value: "username" },
-        { label: "Current password", value: "current-password" },
-        { label: "New password", value: "new-password" },
-        { label: "URL", value: "url" },
-      ],
-      isRemovable: true,
-      visibility: "SHOW_NAME",
-      defaultOnAdd: "off",
-      isVisible: function (this: { type?: string }) {
-        return AUTO_COMPLETE_INPUT_TYPES.includes(this.type ?? "text");
-      },
-    }),
+    autoComplete: Prop.string(),
   }),
 
   interaction: Section.category(PropsCategory.Interaction)
     .children({
-      disabled: Prop.boolean().propertiesPanel({
-        label: "Disabled",
-        controlType: "SWITCH",
-        description: "Whether the input is disabled",
-      }),
-      readOnly: Prop.boolean().propertiesPanel({
-        label: "Read only",
-        controlType: "SWITCH",
-        description: "Whether the input is read only",
-      }),
-      autoFocus: Prop.boolean().propertiesPanel({
-        label: "Auto focus",
-        controlType: "SWITCH",
-        description: "Whether the input should auto focus on page load",
-      }),
+      disabled: Prop.boolean(),
+      readOnly: Prop.boolean(),
+      autoFocus: Prop.boolean(),
     })
     .add({
-      minLength: Prop.number().propertiesPanel({
-        label: "Min length",
-        controlType: "INPUT_TEXT",
-        description: "Minimum number of characters required",
-        isRemovable: true,
-        visibility: "SHOW_NAME",
-        defaultOnAdd: 0,
-        isVisible: function (this: { type?: string }) {
-          return TEXT_INPUT_TYPES.includes(this.type ?? "text");
-        },
-      }),
-      maxLength: Prop.number().propertiesPanel({
-        label: "Max length",
-        controlType: "INPUT_TEXT",
-        description: "Maximum number of characters allowed",
-        isRemovable: true,
-        visibility: "SHOW_NAME",
-        defaultOnAdd: 100,
-        isVisible: function (this: { type?: string }) {
-          return TEXT_INPUT_TYPES.includes(this.type ?? "text");
-        },
-      }),
+      minLength: Prop.number(),
+      maxLength: Prop.number(),
     })
     .add({
-      min: Prop.number().propertiesPanel({
-        label: "Min value",
-        controlType: "INPUT_TEXT",
-        description: "Minimum value for number inputs",
-        isRemovable: true,
-        visibility: "SHOW_NAME",
-        defaultOnAdd: 0,
-        isVisible: function (this: { type?: string }) {
-          return NUMERIC_INPUT_TYPES.includes(this.type ?? "text");
-        },
-      }),
-      max: Prop.number().propertiesPanel({
-        label: "Max value",
-        controlType: "INPUT_TEXT",
-        description: "Maximum value for number inputs",
-        isRemovable: true,
-        visibility: "SHOW_NAME",
-        defaultOnAdd: 100,
-        isVisible: function (this: { type?: string }) {
-          return NUMERIC_INPUT_TYPES.includes(this.type ?? "text");
-        },
-      }),
-      step: Prop.number().propertiesPanel({
-        label: "Step",
-        controlType: "INPUT_TEXT",
-        description: "Step value for number inputs",
-        isRemovable: true,
-        visibility: "SHOW_NAME",
-        defaultOnAdd: 1,
-        isVisible: function (this: { type?: string }) {
-          return STEP_INPUT_TYPES.includes(this.type ?? "text");
-        },
-      }),
+      min: Prop.number(),
+      max: Prop.number(),
+      step: Prop.number(),
     }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onChange: Prop.eventHandler().propertiesPanel({
-      label: "On change",
-      description: "Triggered when the input value changes",
-      computedArgs: [
-        {
-          name: "event",
-          type: "object",
-          description: "The event object",
-        },
-      ],
-    }),
-    onFocus: Prop.eventHandler().propertiesPanel({
-      label: "On focus",
-      description: "Triggered when the input receives focus",
-    }),
-    onBlur: Prop.eventHandler().propertiesPanel({
-      label: "On blur",
-      description: "Triggered when the input loses focus",
-    }),
-    onKeyDown: Prop.eventHandler().propertiesPanel({
-      label: "On key down",
-      description: "Triggered when a key is pressed down",
-      computedArgs: [
-        {
-          name: "event",
-          type: "object",
-          description: "The event object",
-        },
-      ],
-    }),
+    onChange: Prop.eventHandler(),
+    onFocus: Prop.eventHandler(),
+    onBlur: Prop.eventHandler(),
+    onKeyDown: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/label.tsx

@@ -34,10 +34,7 @@ type LabelProps = React.ComponentProps<typeof Label>;
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<LabelProps> = {
   general: Section.category(PropsCategory.Content).children({
-    children: Prop.jsx().propertiesPanel({
-      label: "Text",
-      controlType: "INPUT_TEXT",
-    }),
+    children: Prop.jsx(),
     htmlFor: Prop.string(),
   }),
 };

package/dist/migration-templates/app-fullstack/client/components/ui/line-chart.tsx

@@ -208,123 +208,37 @@ const LineChart = ({ className, ...props }: ComponentProps) => {
 
 registerComponent(LineChart, {
   general: Section.category(PropsCategory.Content).children({
-    data: Prop.array<any>()
-      .propertiesPanel({
-        label: "Data",
-        description: "Array of data objects for the line chart",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of objects where each object represents a data point with X-axis and Y-axis values. Each object should contain the xAxisKey property and properties for each data series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple line series that can be styled independently.",
-      }),
-    xAxisKey: Prop.string()
-      .propertiesPanel({
-        label: "X-axis data key",
-        description: " name for X-axis values (categories)",
-        placeholder: "month",
-        controlType: "DROP_DOWN",
-        options: function (this) {
-          if (!this.data || !Array.isArray(this.data) || !this.data.length) {
-            return [];
-          }
-          return Object.keys(this.data[0]).map((key) => ({
-            label: key,
-            value: key,
-          }));
-        },
-      })
-      .docs({
-        description:
-          "The property name in your data objects that contains the X-axis values (categories, dates, or sequential values). This determines the horizontal positioning and connection order of data points along the line. Should be consistent across all data objects.",
-      }),
-    categories: Prop.array<string>()
-      .propertiesPanel({
-        label: "Categories",
-        description:
-          "Array of data keys to plot as line series (optional, auto-detects numeric properties if not provided)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Array of property names from your data objects to plot as separate line series. Example: ['desktop', 'mobile'] will create two line series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) from the data.",
-      }),
-    seriesLabels: Prop.any<Record<string, string>>()
-      .propertiesPanel({
-        label: "Series labels",
-        description:
-          "Optional labels for series (optional, defaults to category names)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional object mapping category keys to display labels. Example: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. If not provided, the category keys are used as labels.",
-      }),
-    colors: Prop.array<string>()
-      .propertiesPanel({
-        label: "Colors",
-        description: "Array of colors for series (optional)",
-        controlType: "FUNCTION_CODE_EDITOR",
-        isJSConvertible: false,
-      })
-      .docs({
-        description:
-          "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
-      }),
-  }),
-  appearance: Section.category(PropsCategory.Appearance).children({
-    gridStyle: Prop.string<"solid" | "dashed" | "hidden">().propertiesPanel({
-      label: "Grid style",
-      description: "Style of the chart grid lines",
-      controlType: "DROP_DOWN",
-      options: [
-        { label: "Solid", value: "solid" },
-        { label: "Dashed", value: "dashed" },
-        { label: "Hidden", value: "hidden" },
-      ],
-    }),
-    showXAxis: Prop.boolean().propertiesPanel({
-      label: "Show X-axis",
-      description: "Display X-axis with labels",
-      controlType: "SWITCH",
-    }),
-    showYAxis: Prop.boolean().propertiesPanel({
-      label: "Show Y-axis",
-      description: "Display Y-axis with labels",
-      controlType: "SWITCH",
-    }),
-    showTooltip: Prop.boolean().propertiesPanel({
-      label: "Show tooltip",
-      description: "Display tooltip on hover",
-      controlType: "SWITCH",
-    }),
-    showLegend: Prop.boolean().propertiesPanel({
-      label: "Show legend",
-      description: "Display chart legend",
-      controlType: "SWITCH",
+    data: Prop.array<any>().docs({
+      description:
+        "Array of objects where each object represents a data point with X-axis and Y-axis values. Each object should contain the xAxisKey property and properties for each data series defined in categories. Example: [{month: 'January', desktop: 186, mobile: 80}, {month: 'February', desktop: 305, mobile: 200}]. Multiple Y-value properties create multiple line series that can be styled independently.",
     }),
-    showPointLabels: Prop.boolean().propertiesPanel({
-      label: "Show point labels",
-      description: "Display labels on data points",
-      controlType: "SWITCH",
+    xAxisKey: Prop.string().docs({
+      description:
+        "The property name in your data objects that contains the X-axis values (categories, dates, or sequential values). This determines the horizontal positioning and connection order of data points along the line. Should be consistent across all data objects.",
     }),
-    strokeWidth: Prop.number().propertiesPanel({
-      label: "Stroke width",
-      description: "Width of the line stroke",
+    categories: Prop.array<string>().docs({
+      description:
+        "Array of property names from your data objects to plot as separate line series. Example: ['desktop', 'mobile'] will create two line series. Each category should correspond to a numeric property in your data. If not provided, automatically detects all numeric properties (excluding xAxisKey) from the data.",
     }),
-    showDots: Prop.boolean().propertiesPanel({
-      label: "Show dots",
-      description: "Display dots on the line at data points",
-      controlType: "SWITCH",
+    seriesLabels: Prop.any<Record<string, string>>().docs({
+      description:
+        "Optional object mapping category keys to display labels. Example: {desktop: 'Desktop Users', mobile: 'Mobile Users'}. If not provided, the category keys are used as labels.",
     }),
-    connectNulls: Prop.boolean().propertiesPanel({
-      label: "Connect nulls",
-      description: "Connect nulls with the previous non-null value",
-      controlType: "SWITCH",
+    colors: Prop.array<string>().docs({
+      description:
+        "Optional array of color values to use for series in order. Can be hex codes, rgb values, or CSS variables like 'var(--chart-1)'. Falls back to theme colors if not provided.",
     }),
+  }),
+  appearance: Section.category(PropsCategory.Appearance).children({
+    gridStyle: Prop.string<"solid" | "dashed" | "hidden">(),
+    showXAxis: Prop.boolean(),
+    showYAxis: Prop.boolean(),
+    showTooltip: Prop.boolean(),
+    showLegend: Prop.boolean(),
+    showPointLabels: Prop.boolean(),
+    strokeWidth: Prop.number(),
+    showDots: Prop.boolean(),
+    connectNulls: Prop.boolean(),
     lineType: Prop.string<
       | "linear"
       | "bump"
@@ -334,46 +248,16 @@ registerComponent(LineChart, {
       | "stepAfter"
       | "natural"
       | "monotone"
-    >()
-      .propertiesPanel({
-        label: "Line type",
-        description: "Type of line to display",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "Linear", value: "linear" },
-          { label: "Bump", value: "bump" },
-          { label: "Step", value: "step" },
-          { label: "Basis", value: "basis" },
-          { label: "Step Before", value: "stepBefore" },
-          { label: "Step After", value: "stepAfter" },
-          { label: "Natural", value: "natural" },
-          { label: "Monotone", value: "monotone" },
-        ],
-      })
-      .docs({
-        description:
-          "Curve interpolation type for line paths. 'linear' creates straight line segments between points, 'monotone' creates smooth curves that preserve monotonicity (no overshooting), 'natural' creates natural spline curves for smoothest appearance, 'step' creates step functions with sharp transitions, 'basis' creates B-spline curves, 'bump' creates rounded transitions, 'stepBefore' steps before each point, 'stepAfter' steps after each point. Choose 'monotone' for smooth data trends, 'linear' for precise point-to-point connections.",
-      }),
+    >().docs({
+      description:
+        "Curve interpolation type for line paths. 'linear' creates straight line segments between points, 'monotone' creates smooth curves that preserve monotonicity (no overshooting), 'natural' creates natural spline curves for smoothest appearance, 'step' creates step functions with sharp transitions, 'basis' creates B-spline curves, 'bump' creates rounded transitions, 'stepBefore' steps before each point, 'stepAfter' steps after each point. Choose 'monotone' for smooth data trends, 'linear' for precise point-to-point connections.",
+    }),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    enableAnimation: Prop.boolean().propertiesPanel({
-      label: "Enable animation",
-      description: "Enable chart animations on load",
-      controlType: "SWITCH",
-    }),
+    enableAnimation: Prop.boolean(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onDataClick: Prop.eventHandler().propertiesPanel({
-      label: "onDataClick",
-      description: "Triggered when a line is clicked",
-      computedArgs: [
-        {
-          name: "data",
-          type: "object",
-          description: "The data point that was clicked",
-        },
-      ],
-    }),
+    onDataClick: Prop.eventHandler(),
   }),
 }).editorConfig({ icon: "chart" });
 

package/dist/migration-templates/app-fullstack/client/components/ui/link.tsx

@@ -92,34 +92,14 @@ const Link = ({
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<LinkProps> = {
   general: Section.category(PropsCategory.Content).add({
-    children: Prop.jsx().propertiesPanel({
-      label: "Text",
-    }),
-    openInNewTab: Prop.boolean().propertiesPanel({
-      label: "Open in new tab",
-      controlType: "SWITCH",
-      description: "Open the link in a new browser tab",
-    }),
+    children: Prop.jsx(),
+    openInNewTab: Prop.boolean(),
   }),
   appearance: Section.category(PropsCategory.Appearance).children({
-    variant: Prop.string<"link" | "button-default" | "button-secondary">()
-
-      .propertiesPanel({
-        label: "Style",
-        controlType: "DROP_DOWN",
-        options: [
-          { label: "Link", value: "link" },
-          { label: "Default button", value: "button-default" },
-          { label: "Secondary button", value: "button-secondary" },
-        ],
-        description: "Choose how the link should be styled",
-      }),
+    variant: Prop.string<"link" | "button-default" | "button-secondary">(),
   }),
   events: Section.category(PropsCategory.EventHandlers).children({
-    onClick: Prop.eventHandler().propertiesPanel({
-      label: "onClick",
-      description: "Triggered when the badge is clicked",
-    }),
+    onClick: Prop.eventHandler(),
   }),
 };
 

package/dist/migration-templates/app-fullstack/client/components/ui/navigation-menu.tsx

@@ -289,35 +289,14 @@ const NavigationMenu = ({
 // Properties Definition
 const propertiesDefinition: PropertiesPanelDefinition<NavigationMenuProps> = {
   general: Section.category(PropsCategory.Content).children({
-    menuItems: Prop.array<MenuItem>()
-
-      .propertiesPanel({
-        label: "Menu items",
-        controlType: "FUNCTION_CODE_EDITOR",
-        description:
-          "Array of menu items. Items with 'content' array become dropdowns.",
-      }),
+    menuItems: Prop.array<MenuItem>(),
   }),
   interaction: Section.category(PropsCategory.Interaction).children({
-    disabled: Prop.boolean().propertiesPanel({
-      label: "Disabled",
-      controlType: "SWITCH",
-      description: "Whether the navigation menu is disabled",
-    }),
+    disabled: Prop.boolean(),
   }),
 
   events: Section.category(PropsCategory.EventHandlers).children({
-    onItemClick: Prop.eventHandler().propertiesPanel({
-      label: "onItemClick",
-      description: "Triggered when a menu item is clicked",
-      computedArgs: [
-        {
-          name: "href",
-          type: "string",
-          description: "The clicked item's href",
-        },
-      ],
-    }),
+    onItemClick: Prop.eventHandler(),
   }),
 };