feat(studio): add collapsible sections to Design panel

Section component now supports collapse/expand with a chevron toggle.
Text, Layout, and Fill sections stay expanded by default. Less-used
sections (Flex, Radius, Stroke, Effects, Clip, Transparency) start
collapsed to reduce scrolling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: miguel-heygen

packages/studio/src/components/editor/propertyPanelPrimitives.tsx

@@ -334,24 +334,43 @@ export function Section({
   icon,
   children,
   accessory,
+  defaultCollapsed = false,
 }: {
   title: string;
   icon: ReactNode;
   children: ReactNode;
   accessory?: ReactNode;
+  defaultCollapsed?: boolean;
 }) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+
   return (
-    <section className="min-w-0 border-t border-neutral-800/80 px-4 py-4">
-      <div className="mb-3 flex min-w-0 flex-wrap items-center justify-between gap-2">
+    <section className="min-w-0 border-t border-neutral-800/80">
+      <button
+        type="button"
+        onClick={() => setCollapsed((v) => !v)}
+        className="flex w-full items-center justify-between gap-2 px-4 py-3"
+      >
         <div className="flex min-w-0 items-center gap-2.5">
           <span className="flex-shrink-0 text-neutral-500">{icon}</span>
           <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-neutral-300">
             {title}
           </h3>
         </div>
-        {accessory}
-      </div>
-      {children}
+        <div className="flex items-center gap-2">
+          {accessory}
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className={`flex-shrink-0 text-neutral-500 transition-transform ${collapsed ? "-rotate-90" : ""}`}
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </div>
+      </button>
+      {!collapsed && <div className="px-4 pb-4">{children}</div>}
     </section>
   );
 }

packages/studio/src/components/editor/propertyPanelStyleSections.tsx

@@ -109,7 +109,7 @@ export function StyleSections({
   return (
     <>
       {isFlex && (
-        <Section title="Flex" icon={<Layers size={15} />}>
+        <Section title="Flex" icon={<Layers size={15} />} defaultCollapsed>
           <div className="space-y-4">
             <SegmentedControl
               disabled={styleEditingDisabled}
@@ -154,7 +154,7 @@ export function StyleSections({
       )}
 
       {hasVisualBackground && (
-        <Section title="Radius" icon={<Settings size={15} />}>
+        <Section title="Radius" icon={<Settings size={15} />} defaultCollapsed>
           <SliderControl
             value={radiusValue}
             min={0}
@@ -168,7 +168,7 @@ export function StyleSections({
         </Section>
       )}
 
-      <Section title="Stroke" icon={<Square size={15} />}>
+      <Section title="Stroke" icon={<Square size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <div className={RESPONSIVE_GRID}>
             <MetricField
@@ -226,7 +226,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Effects" icon={<Zap size={15} />}>
+      <Section title="Effects" icon={<Zap size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <SelectField
             label="Shadow"
@@ -279,7 +279,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Clip" icon={<Layers size={15} />}>
+      <Section title="Clip" icon={<Layers size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <div className={RESPONSIVE_GRID}>
             <SelectField
@@ -325,7 +325,7 @@ export function StyleSections({
         </div>
       </Section>
 
-      <Section title="Transparency" icon={<Eye size={15} />}>
+      <Section title="Transparency" icon={<Eye size={15} />} defaultCollapsed>
         <div className="space-y-4">
           <SliderControl
             value={opacityValue}