@agent-native/core 0.165.4 → 0.167.0

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -1,94 +1,24 @@
-import {
-  useActionMutation,
-  useActionQuery,
-} from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import type { TweakDefinition } from "@shared/api";
-import {
-  getBreakpointOverrideState,
-  type BreakpointOverrideState,
-} from "@shared/breakpoint-media";
-import {
-  composeTransform3D,
-  isTransform3DActive,
-  parseTransform3DParts,
-  type Transform3DParts,
-} from "@shared/canvas-math";
-import {
-  alphaToOpacity,
-  parseCssColor,
-  rgbaToCss,
-  rgbaToHex,
-  withColorOpacity,
-} from "@shared/color-utils";
-import { propNameToDataAttribute } from "@shared/component-model";
+import { alphaToOpacity, parseCssColor } from "@shared/color-utils";
 import {
   listInteractionStates,
   readResolvedStateStyles,
   type InteractionState,
 } from "@shared/interaction-states";
 import {
-  IconAlignCenter,
-  IconAlignJustified,
-  IconAlignLeft,
-  IconAlignRight,
-  IconAngle,
-  IconArrowAutofitHeight,
-  IconArrowAutofitWidth,
-  IconArrowRight,
-  IconAxisX,
-  IconAxisY,
-  IconBackground,
-  IconBlur,
-  IconBorderCorners,
-  IconBorderRadius,
-  IconBorderStyle,
-  IconCheck,
   IconChevronDown,
   IconChevronRight,
   IconCode,
   IconComponents,
   IconDeviceMobile,
   IconExternalLink,
-  IconDroplet,
-  IconEye,
-  IconEyeOff,
-  IconFlipHorizontal,
-  IconFlipVertical,
   IconFrame,
-  IconGridDots,
-  IconGripVertical,
-  IconLayoutDistributeHorizontal,
-  IconLayoutGrid,
-  IconLoader2,
-  IconLayoutAlignBottom,
-  IconLayoutAlignCenter,
-  IconLayoutAlignLeft,
-  IconLayoutAlignMiddle,
-  IconLayoutAlignRight,
-  IconLayoutAlignTop,
-  IconLetterCase,
-  IconLetterSpacing,
-  IconLineHeight,
-  IconLink,
-  IconLinkOff,
-  IconMinus,
-  IconPerspective,
   IconPhoto,
   IconPlus,
-  IconRadiusBottomLeft,
-  IconRadiusBottomRight,
-  IconRadiusTopLeft,
-  IconRadiusTopRight,
   IconRefresh,
-  IconRotate3d,
-  IconShadow,
-  IconSquare,
-  IconUnlink,
   IconVector,
-  IconWaveSine,
 } from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
 import {
   memo,
   useCallback,
@@ -96,20 +26,10 @@ import {
   useMemo,
   useRef,
   useState,
-  type DragEvent,
   type ReactNode,
 } from "react";
-import { useParams } from "react-router";
-import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -117,15 +37,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Slider } from "@/components/ui/slider";
-import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   Tooltip,
@@ -135,11 +46,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
-import {
-  AppearanceProperties,
-  AppearanceScrubField,
-  CornerRadiusControl,
-} from "./edit-panel/appearance-properties";
+import { AppearanceProperties } from "./edit-panel/appearance-properties";
 import {
   alpineDataValueLiteral,
   canRebuildAlpineDataLosslessly,
@@ -163,54 +70,27 @@ import {
 } from "./edit-panel/document-colors";
 import { EffectsProperties } from "./edit-panel/effects-properties";
 import {
-  autoLayoutAlignmentFromStyles,
-  availableSizingForElement,
-  commitElementMinMax,
-  commitElementSizing,
-  componentNameForElementInfo,
-  cssElementSize,
-  displayLabel,
   elementIsComponentSelection,
-  horizontalToJustify,
-  inferElementSizing,
   inspectorObjectTitle,
   isContainerElement,
-  isParentFlex,
-  isParentGrid,
   isTextElement,
-  justifyToHorizontal,
-  parentFlexDirection,
-  readElementMinMax,
   TEXT_TAGS,
-  verticalToAlign,
 } from "./edit-panel/element-classification";
 import {
   deriveLockedAspectSize,
   interactionStateSelectionKey,
-  useAspectRatioLock,
 } from "./edit-panel/element-identity";
-import {
-  commitStylePatch,
-  DesignSpacingControl,
-  FieldTrailer,
-  ScrubStyleInput,
-} from "./edit-panel/field-primitives";
+import { commitStylePatch } from "./edit-panel/field-primitives";
 import {
   averageGradientOpacity,
   buildGradientLayer,
   DEFAULT_EXPORT_SETTINGS,
-  defaultGradientLayer,
   defaultGradientStops,
-  clampNumber,
-  fillLayerId,
-  fillLayerIndex,
   type FillLayerArrays,
-  gradientLabel,
   isLayerHiddenBySize,
   joinCssLayers,
   parseGradientLayer,
   removeFillLayerAtIndex,
-  SOLID_FILL_ID,
   solidToGradientPatch,
   splitCssLayers,
   withLayerSizeMarker,
@@ -218,13 +98,7 @@ import {
 import { FillProperties } from "./edit-panel/fill-properties";
 import { FramePresetsPanel } from "./edit-panel/frame-presets-panel";
 import type { InspectCodeSourceLocation } from "./edit-panel/inspect-code-source";
-import {
-  InspectorIconButton,
-  InspectorSegment,
-  RowDragHandle,
-  SectionIconButton,
-  useRowDragReorder,
-} from "./edit-panel/inspector-controls";
+import { SectionIconButton } from "./edit-panel/inspector-controls";
 import {
   authoredStyleValue,
   elementWithInteractionStateStyles,
@@ -236,18 +110,13 @@ import {
 } from "./edit-panel/layout-properties";
 import {
   ColorInput,
-  FieldLabel,
   PanelSection,
   PropInput,
   PropSelect,
-  PropSlider,
   SubsectionLabel,
 } from "./edit-panel/panel-primitives";
 import {
-  colorHasVisibleAlpha,
-  compactCssValue,
   cssColorOrFallback,
-  cssLengthNumber,
   fourValuesEqual,
   outlineOffsetForPosition,
   readStrokeOutlinePosition,
@@ -255,86 +124,41 @@ import {
   resolveTextStrokeColor,
   roundToOneDecimal,
   strokeHiddenByColor,
-  strokeIsVisible,
   swatchStyle,
   textStrokeIsVisible,
 } from "./edit-panel/position-helpers";
 import { PositionLayoutProperties } from "./edit-panel/position-layout-properties";
-import {
-  isMixedValue,
-  MIXED_VALUE,
-  mixedElementFromSelection,
-  sameOrMixed,
-} from "./edit-panel/selection-helpers";
+import { mixedElementFromSelection } from "./edit-panel/selection-helpers";
 import { StrokeProperties } from "./edit-panel/stroke-properties";
 import {
   type BreakpointOverrideFieldContext,
   type MotionKeyframeFieldContext,
-  resolveBreakpointOverride,
   type StyleChangeHandler,
   type StyleChangeMeta,
   type StylesChangeHandler,
 } from "./edit-panel/style-change-types";
-import {
-  ALIGN_SELF_OPTIONS,
-  BLEND_MODE_OPTIONS,
-  optionValue,
-  parseNumericValue,
-  resolveLineHeight,
-  sidesAreLinked,
-  STROKE_POSITION_OPTIONS,
-} from "./edit-panel/style-options";
 import {
   mergeRotationValue,
-  mergeTranslateFunction,
   normalizeRotationDegrees,
-  parseRotationValue,
-  parseScaleValue,
 } from "./edit-panel/transform-helpers";
 import {
   displayFontFamilyName,
   FONT_FAMILY_OPTIONS,
-  FONT_WEIGHT_OPTIONS,
   resolveFontFamilySelectValue,
-  splitFontFamilyList,
-  type TextResizeMode,
 } from "./edit-panel/typography-helpers";
 import { TypographyProperties } from "./edit-panel/typography-properties";
 import {
-  AutoLayoutMatrix,
-  BreakpointOverrideIndicator,
-  ConstraintsPreview,
-  ConstraintsWidget,
   ExportSettingsPanel,
   DesignColorPicker,
-  FRAME_SIZE_PRESET_CATEGORIES,
-  MotionKeyframeDiamond,
-  motionPropertyHasKeyframe,
   ScrubInput,
-  SizingField,
-  type AlignmentMatrixValue,
-  type AutoLayoutMatrixValue,
-  type AutoLayoutSizing,
-  type AutoLayoutSizingAxis,
-  type ConstraintsValue,
   type ExportSettingsValue,
   type FrameSizePreset,
-  type FrameSizePresetCategoryKey,
   InteractionStatePanel,
   type ActiveInteractionState,
-  type DesignFillRow,
-  type DesignGradientStop,
-  type DesignGradientType,
-  type ImageFillValue,
   type MotionKeyframeCssProperty,
-  type ScrubInputChangeMeta,
 } from "./inspector";
-import { IconLayoutSettings, IconText } from "./inspector/design-icons";
-import type { DesignPaintType } from "./inspector/DesignColorPicker";
-import {
-  GlslShaderEffectSection,
-  type GlslShaderPanelContext,
-} from "./inspector/GlslShaderPanel";
+import { IconText } from "./inspector/design-icons";
+import { type GlslShaderPanelContext } from "./inspector/GlslShaderPanel";
 import {
   ReviewCommentsPanel,
   type ReviewCommentsPanelProps,
@@ -583,6 +407,8 @@ interface EditPanelProps {
    *   always shows this row) but no-op, since EditPanel has no selection
    *   bbox/parent geometry of its own to act on.
    */
+  /** Convert this container to freeform, pinning children where they render. */
+  onDisableAutoLayout?: (nodeId: string) => void;
   onAlignSelection?: (
     edge: "left" | "center-h" | "right" | "top" | "center-v" | "bottom",
   ) => void;
@@ -1837,6 +1663,7 @@ export const EditPanel = memo(function EditPanel({
   activeTool,
   onCreateScreenFromPreset,
   onAlignSelection,
+  onDisableAutoLayout,
   onInteractionStateChange,
   availableInteractionStates,
   onEditCode,
@@ -2360,6 +2187,7 @@ export const EditPanel = memo(function EditPanel({
                     element={stateResolvedInspectorElement ?? inspectorElement}
                     onStyleChange={onStyleChange}
                     onStylesChange={onStylesChange}
+                    onDisableAutoLayout={onDisableAutoLayout}
                     motionKeyframeContext={motionKeyframeFieldContext}
                     breakpointOverrideContext={breakpointOverrideFieldContext}
                   />

package/corpus/templates/design/app/components/design/MultiScreenCanvas.tsx

@@ -2258,7 +2258,11 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
         sourceScreenId !== boardFileId &&
         boardFileId &&
         boardFrameGeometry &&
-        geometryContainsPoint(boardFrameGeometry, boardPoint)
+        boardSurfaceRenderGeometry &&
+        // boardFrameGeometry is a 131,072px square centred on the origin, so
+        // testing against it makes every pointer a board hit and silently
+        // relocates the layer into an invisible file.
+        geometryContainsPoint(boardSurfaceRenderGeometry, boardPoint)
       ) {
         const nextTarget = { id: boardFileId, geometry: boardFrameGeometry };
         if (crossScreenTargetRef.current?.id !== boardFileId) {
@@ -2323,14 +2327,27 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
           ? "discarded — pointer never left the source screen"
           : candidate
             ? "moving into candidate"
-            : "no candidate; falling back to the board",
+            : "no candidate — refused unless over the board surface",
       });
+      const boardSurfaceHit =
+        !!boardFileId &&
+        sourceScreenId !== boardFileId &&
+        !!boardFrameGeometry &&
+        !!boardSurfaceRenderGeometry &&
+        geometryContainsPoint(boardSurfaceRenderGeometry, lastBoardPoint);
       const targetCandidate =
         candidate ??
-        (boardFileId && sourceScreenId !== boardFileId && boardFrameGeometry
+        (boardSurfaceHit && boardFileId && boardFrameGeometry
           ? { id: boardFileId, geometry: boardFrameGeometry }
           : null);
-      if (!targetCandidate) return;
+      if (!targetCandidate) {
+        trace("drop", "refused", {
+          reason: "no screen under the pointer and not over the board surface",
+          sourceScreen: sourceScreenId,
+          lastBoardPoint,
+        });
+        return;
+      }
 
       if (targetCandidate.id === boardFileId) {
         void runHitTest(targetCandidate, lastBoardPoint).then(

package/corpus/templates/design/app/components/design/QuestionFlow.tsx

@@ -69,16 +69,12 @@ export function QuestionFlow({
       return v.trim().length > 0;
     return hasGuidedAnswer(v);
   };
-  const answeredCount = guidedQuestions.filter(isAnswered).length;
+
   const requiredQuestions = guidedQuestions.filter(
     (question) => question.required,
   );
   const requiredAnswered = requiredQuestions.filter(isAnswered).length;
   const allRequiredAnswered = requiredAnswered === requiredQuestions.length;
-  const progress =
-    guidedQuestions.length === 0
-      ? 0
-      : Math.round((answeredCount / guidedQuestions.length) * 100);
 
   return (
     /* `items-start` is what makes the trailing space real: stretched, this

package/corpus/templates/design/app/components/design/bridge/codegen.ts

@@ -25,7 +25,7 @@
  */
 
 import { execSync } from "node:child_process";
-import { readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { readdirSync, writeFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -2937,7 +2937,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   } | null = null;
   var suppressNextShieldClick = false;
   var suppressNextShieldClickTimer: ReturnType<typeof setTimeout> | null = null;
-  var selectedSpacingHovered = false;
   var hoveredSpacingHandleKey = "";
   var spacingHoverClearTimer: ReturnType<typeof setTimeout> | null = null;
   var lastSpacingPointerPoint: { x: number; y: number } | null = null;
@@ -2971,7 +2970,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     clearHoverGate();
     setPassiveSelectionElements([]);
     clearSpacingHoverTimer();
-    selectedSpacingHovered = false;
     hoveredSpacingHandleKey = "";
     lastSpacingPointerPoint = null;
     spacingDrag = null;
@@ -3291,7 +3289,13 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       lastSourceHeadHtml = nextHeadHtml;
     }
     var currentHeadHtml = lastSourceHeadHtml;
-    if (nextHeadHtml === currentHeadHtml && activeCandidates.length > 0) {
+    // The subtree path rewrites one selector's match. A forced replacement can
+    // have changed any number of nodes, so taking it leaves the rest stale.
+    if (
+      !forceFullDocument &&
+      nextHeadHtml === currentHeadHtml &&
+      activeCandidates.length > 0
+    ) {
       var currentMatch = null;
       var nextMatch = null;
       var matchedSelector = "";
@@ -4244,7 +4248,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   function activateSpacingHandle(spacingKey: string): void {
     if (!spacingKey) return;
     clearSpacingHoverTimer();
-    selectedSpacingHovered = true;
     setHoverToSelectedElementFromSpacingSurface();
     if (
       hoveredSpacingHandleKey !== spacingKey ||
@@ -4336,7 +4339,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       hit &&
       (hit === selectedEl || (selectedEl.contains && selectedEl.contains(hit)))
     ) {
-      selectedSpacingHovered = true;
       return true;
     }
     return false;
@@ -4355,7 +4357,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         updateSpacingOverlay(selectedEl);
         return;
       }
-      selectedSpacingHovered = false;
       hoveredSpacingHandleKey = "";
       updateSpacingOverlay(selectedEl);
     }, 80);
@@ -5532,7 +5533,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       (window.parent as Window).postMessage({ type: "clear-selection" }, "*");
       return;
     }
-    selectedSpacingHovered = false;
     hoveredSpacingHandleKey = "";
     var previousSelectedEl = selectedEl;
     selectedEl = selectionTargetForHit(target);
@@ -5844,7 +5844,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     var target = candidateElements[0] || null;
     var info = null;
     if (target) {
-      selectedSpacingHovered = false;
       hoveredSpacingHandleKey = "";
       selectedEl = selectionTargetForHit(target);
       if (selectedEl && !isLayerInteractionBlocked(selectedEl)) {
@@ -6825,7 +6824,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     var startY = e.clientY;
     lastSpacingPointerPoint = { x: startX, y: startY };
     hoveredSpacingHandleKey = key;
-    selectedSpacingHovered = true;
     spacingDrag = {
       handle: handle,
       currentValue: originValue,
@@ -9292,10 +9290,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         ctrl: Boolean(e.ctrlKey),
         target: dndTarget(currentTarget),
       });
-      // Cross-screen drag state: true when the pointer is outside this iframe's
-      // viewport bounds.  The host frame renders the ghost + highlight and owns
-      // the drop when this is true; the bridge suppresses its in-iframe reorder.
-      var pointerOutsideIframe = false;
       var reorderSelector = getSelector(reorderEl);
       var reorderSourceId = getSourceId(reorderEl);
       var reorderStyleSnapshot = collectPortableStyleSnapshot(reorderEl);
@@ -9655,7 +9649,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         var dx = cx - reorderPointerStart.clientX;
         var dy = cy - reorderPointerStart.clientY;
         var outside = cx < 0 || cy < 0 || cx > vw || cy > vh;
-        pointerOutsideIframe = outside;
         // Always notify the host frame so it can track the cursor position,
         // render the ghost, and highlight the target screen. Group drags stay
         // in-iframe (the host's cross-screen drop moves a single element and
@@ -9806,8 +9799,8 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         // avoid a ghost element left in screen A's DOM. For group drags an
         // outside release is simply a no-op (nothing moved during a flow
         // reorder drag, so there is nothing to restore).
-        // Use outsideOnDrop only — pointerOutsideIframe is stale when the user
-        // briefly exits the iframe and re-enters before releasing.  The host
+        // Use outsideOnDrop only — a live pointer-outside flag is stale when the
+        // user briefly exits the iframe and re-enters before releasing.  The host
         // already clears cross-screen state on re-entry so checking the
         // momentary excursion flag here would wrongly drop the element nowhere.
         if (outsideOnDrop) return;
@@ -9959,7 +9952,7 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     });
     var gestureState =
       memberStates[groupEls.indexOf(gestureEl)] || memberStates[0];
-    var originalInlineOpacity = gestureState.originalOpacity;
+
     var originLeft = gestureState.originLeft;
     var originTop = gestureState.originTop;
     function setMembersOpacity(value: string | null): void {
@@ -12023,7 +12016,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         );
         if (hoveringSelectedSpacingSurface) {
           clearSpacingHoverTimer();
-          selectedSpacingHovered = true;
           lastSpacingPointerPoint = { x: e.clientX, y: e.clientY };
           updateSpacingOverlay(selectedEl);
           // Reliable padding/gap hover: hit-test the handle geometry
@@ -12580,7 +12572,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
       // replay must be a no-op for hover state.
       var selectionChangedByHost = target !== selectedEl;
       if (selectionChangedByHost) {
-        selectedSpacingHovered = false;
         hoveredSpacingHandleKey = "";
       }
       selectedEl = target;

package/corpus/templates/design/app/components/design/edit-panel/appearance-properties.tsx

@@ -12,7 +12,7 @@ import {
   IconRadiusTopLeft,
   IconRadiusTopRight,
 } from "@tabler/icons-react";
-import { useEffect, useState, type ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 
 import { Button } from "@/components/ui/button";
 import {

package/corpus/templates/design/app/components/design/edit-panel/layout-properties.tsx

@@ -17,7 +17,6 @@ import { cn } from "@/lib/utils";
 
 import {
   AutoLayoutMatrix,
-  ScrubInput,
   SizingField,
   type AutoLayoutFlow,
   type AutoLayoutGridTrackSizing,
@@ -45,7 +44,7 @@ import {
   elementStableKey,
   useAspectRatioLock,
 } from "./element-identity";
-import { FieldTrailer, ScrubStyleInput } from "./field-primitives";
+import { FieldTrailer } from "./field-primitives";
 import { joinCssLayers, splitCssLayers } from "./fill-gradient-helpers";
 import { SectionIconButton } from "./inspector-controls";
 import {
@@ -213,12 +212,13 @@ function FlexContainerControls({
   element,
   onStyleChange,
   onStylesChange,
+  onDisableAutoLayout,
 }: {
   element: ElementInfo;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
+  onDisableAutoLayout?: (nodeId: string) => void;
 }) {
-  const t = useT();
   const styles = element.computedStyles;
   // The element's CURRENT layout flow as authored in code, read from its own
   // computed `display`: block/flow-root/grid/etc. = "normal flow",
@@ -372,6 +372,13 @@ function FlexContainerControls({
       <AutoLayoutMatrix
         value={autoLayoutValue}
         onFlowChange={(flow) => {
+          const nodeId = element.sourceId ?? element.pendingNodeId;
+          // A raw display:block leaves the children in flow, so they re-stack
+          // and stop being draggable. The command measures and pins them.
+          if (flow === "normal" && onDisableAutoLayout && nodeId) {
+            onDisableAutoLayout(nodeId);
+            return;
+          }
           const patch = autoLayoutStylesForFlow(flow, {
             ...styles,
             ...element.inlineStyles,
@@ -641,12 +648,14 @@ export function LayoutContextProperties({
   element,
   onStyleChange,
   onStylesChange,
+  onDisableAutoLayout,
   motionKeyframeContext,
   breakpointOverrideContext,
 }: {
   element: ElementInfo;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
+  onDisableAutoLayout?: (nodeId: string) => void;
   motionKeyframeContext?: MotionKeyframeFieldContext;
   breakpointOverrideContext?: BreakpointOverrideFieldContext;
 }) {
@@ -875,6 +884,7 @@ export function LayoutContextProperties({
         element={element}
         onStyleChange={onStyleChange}
         onStylesChange={onStylesChange}
+        onDisableAutoLayout={onDisableAutoLayout}
       />
       {childControls}
     </PanelSection>