@hyperframes/studio 0.7.58 → 0.7.59

package/src/components/editor/PropertyPanel.tsx

@@ -1,10 +1,10 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Move } from "../../icons/SystemIcons";
-import { Eye, EyeSlash } from "@phosphor-icons/react";
 import { InspectorHeaderActions } from "./InspectorHeaderActions";
 import { useStudioShellContext } from "../../contexts/StudioContext";
 import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
 import {
+  buildElementInfoText,
   EMPTY_STYLES,
   formatPxMetricValue,
   parsePxMetricValue,
@@ -12,6 +12,7 @@ import {
   readGsapRuntimeValuesForPanel,
   readGsapBorderRadiusForPanel,
   isSelectedElementHidden,
+  selectionIdentityKey,
 } from "./propertyPanelHelpers";
 import { MetricField, Section } from "./propertyPanelPrimitives";
 import { createTransformCommitHandlers } from "./propertyPanelTransformCommit";
@@ -24,12 +25,19 @@ import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
 import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import { KeyframeNavigation } from "./KeyframeNavigation";
-import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
+import {
+  STUDIO_FLAT_INSPECTOR_ENABLED,
+  STUDIO_GSAP_PANEL_ENABLED,
+  STUDIO_KEYFRAMES_ENABLED,
+} from "./manualEditingAvailability";
+import { PropertyPanelFlat } from "./PropertyPanelFlat";
+import { createGsapLivePreview } from "./gsapLivePreview";
 import { usePlayerStore, liveTime } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
 import { type PropertyPanelProps } from "./propertyPanelHelpers";
 import { GestureRecordPanelButton } from "./GestureRecordControl";
 import { PropertyPanelEmptyState } from "./PropertyPanelEmptyState";
+import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext";
 
 // Re-export helpers that external consumers import from this module
 export {
@@ -46,61 +54,64 @@ export {
 } from "./propertyPanelHelpers";
 
 // fallow-ignore-next-line complexity
-export const PropertyPanel = memo(function PropertyPanel({
-  projectId,
-  projectDir,
-  assets,
-  element,
-  multiSelectCount = 0,
-  copiedAgentPrompt: _copiedAgentPrompt,
-  onClearSelection,
-  onUngroup,
-  onSetStyle,
-  onSetAttribute,
-  onSetAttributeLive,
-  onApplyColorGradingScope,
-  onSetHtmlAttribute,
-  onRemoveBackground,
-  onSetManualOffset,
-  onSetManualSize,
-  onSetManualRotation,
-  onSetText,
-  onSetTextFieldStyle,
-  onAddTextField,
-  onRemoveTextField,
-  onAskAgent: _onAskAgent,
-  onToggleElementHidden,
-  onImportAssets,
-  fontAssets = [],
-  onImportFonts,
-  previewIframeRef,
-  gsapAnimations = [],
-  gsapMultipleTimelines,
-  gsapUnsupportedTimelinePattern,
-  onUpdateGsapProperty,
-  onUpdateGsapMeta,
-  onDeleteGsapAnimation,
-  onAddGsapProperty,
-  onRemoveGsapProperty,
-  onUpdateGsapFromProperty,
-  onAddGsapFromProperty,
-  onRemoveGsapFromProperty,
-  onAddGsapAnimation,
-  onSetArcPath,
-  onUpdateArcSegment,
-  onUnroll,
-  onUpdateKeyframeEase,
-  onSetAllKeyframeEases,
-  onAddKeyframe,
-  onRemoveKeyframe,
-  onConvertToKeyframes,
-  onCommitAnimatedProperty,
-  onCommitAnimatedProperties,
-  onSeekToTime,
-  recordingState,
-  recordingDuration,
-  onToggleRecording,
-}: PropertyPanelProps) {
+export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelProps) {
+  const {
+    projectId,
+    projectDir,
+    assets,
+    element,
+    multiSelectCount = 0,
+    multiSelectedElements,
+    onGroupSelection,
+    onHideAllSelected,
+    copiedAgentPrompt: _copiedAgentPrompt,
+    onClearSelection,
+    onUngroup,
+    onSetStyle,
+    onSetAttribute,
+    onSetAttributeLive,
+    onApplyColorGradingScope,
+    onSetHtmlAttribute,
+    onRemoveBackground,
+    onSetManualOffset,
+    onSetManualSize,
+    onSetManualRotation,
+    onSetText,
+    onSetTextFieldStyle,
+    onAddTextField,
+    onRemoveTextField,
+    onToggleElementHidden,
+    onImportAssets,
+    fontAssets = [],
+    onImportFonts,
+    previewIframeRef,
+    gsapAnimations = [],
+    gsapMultipleTimelines,
+    gsapUnsupportedTimelinePattern,
+    onUpdateGsapProperty,
+    onUpdateGsapMeta,
+    onDeleteGsapAnimation,
+    onAddGsapProperty,
+    onRemoveGsapProperty,
+    onUpdateGsapFromProperty,
+    onAddGsapFromProperty,
+    onRemoveGsapFromProperty,
+    onAddGsapAnimation,
+    onSetArcPath,
+    onUpdateArcSegment,
+    onUnroll,
+    onUpdateKeyframeEase,
+    onSetAllKeyframeEases,
+    onAddKeyframe,
+    onRemoveKeyframe,
+    onConvertToKeyframes,
+    onCommitAnimatedProperty,
+    onCommitAnimatedProperties,
+    onSeekToTime,
+    recordingState,
+    recordingDuration,
+    onToggleRecording,
+  } = props;
   const styles = element?.computedStyles ?? EMPTY_STYLES;
   const { showToast } = useStudioShellContext();
   const [clipboardCopied, setClipboardCopied] = useState(false);
@@ -170,13 +181,22 @@ export const PropertyPanel = memo(function PropertyPanel({
   };
 
   if (!element) {
-    return <PropertyPanelEmptyState multiSelectCount={multiSelectCount} />;
+    return (
+      <PropertyPanelEmptyState
+        flat={STUDIO_FLAT_INSPECTOR_ENABLED}
+        multiSelectCount={multiSelectCount}
+        multiSelectedElements={multiSelectedElements}
+        onGroupSelection={onGroupSelection}
+        onHideAllSelected={onHideAllSelected}
+        onClearSelection={onClearSelection}
+      />
+    );
   }
 
   const manualOffsetEditingDisabled = !element.capabilities.canApplyManualOffset;
   const manualSizeEditingDisabled = !element.capabilities.canApplyManualSize;
   const manualRotationEditingDisabled = !element.capabilities.canApplyManualRotation;
-  const sourceLabel = element.id ? `#${element.id}` : element.selector;
+  const sourceLabel = element.id ? `#${element.id}` : (element.selector ?? "");
   const showEditableSections = element.capabilities.canEditStyles;
   // Capabilities are already resolved on the selection; recompute only sections,
   // feeding the live GSAP tween count (arrives on the gsapAnimations prop, not the
@@ -234,48 +254,8 @@ export const PropertyPanel = memo(function PropertyPanel({
   const displayH = gsapRuntimeValues?.height ?? resolvedHeight;
   const displayR = gsapRuntimeValues?.rotation ?? manualRotation.angle;
 
-  // fallow-ignore-next-line complexity
   const handleCopyElementInfo = () => {
-    const file = element.sourceFile ?? "index.html";
-    let lineNum: number | null = null;
-    try {
-      const src = previewIframeRef?.current?.contentDocument?.documentElement?.outerHTML ?? "";
-      if (src && element.id) {
-        const idx = src.indexOf(`id="${element.id}"`);
-        if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
-      }
-      if (!lineNum && element.selector) {
-        const tag = element.tagName.toLowerCase();
-        const cls = element.selector.startsWith(".")
-          ? element.selector.slice(1).split(".")[0]
-          : null;
-        const search = cls ? `class="${cls}` : `<${tag}`;
-        const idx = src.indexOf(search);
-        if (idx > -1) lineNum = src.slice(0, idx).split("\n").length;
-      }
-    } catch {}
-    const fileLoc = lineNum ? `${file}:${lineNum}` : file;
-    const lines = [
-      `Element: ${element.label} (${sourceLabel})`,
-      `File: ${fileLoc}`,
-      `Position: x=${Math.round(element.boundingBox.x)}, y=${Math.round(element.boundingBox.y)}`,
-      `Size: ${Math.round(element.boundingBox.width)}×${Math.round(element.boundingBox.height)}`,
-      `Tag: <${element.tagName}>`,
-    ];
-    if (element.computedStyles["z-index"] && element.computedStyles["z-index"] !== "auto") {
-      lines.push(`Z-index: ${element.computedStyles["z-index"]}`);
-    }
-    if (gsapAnimations.length > 0) {
-      const anim = gsapAnimations[0];
-      lines.push(
-        `Animation: ${anim.method}() ${anim.duration}s at ${anim.position}s, ease: ${anim.ease ?? "default"}`,
-      );
-      const props = Object.entries(anim.properties)
-        .map(([k, v]) => `${k}: ${v}`)
-        .join(", ");
-      if (props) lines.push(`Properties: ${props}`);
-    }
-    const text = lines.join("\n");
+    const text = buildElementInfoText(element, sourceLabel, gsapAnimations, previewIframeRef);
     void navigator.clipboard.writeText(text);
     showToast(`Copied element info for ${element.label} — paste into any AI agent`, "info");
     setClipboardCopied(true);
@@ -283,51 +263,80 @@ export const PropertyPanel = memo(function PropertyPanel({
     clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
   };
 
-  return (
+  if (STUDIO_FLAT_INSPECTOR_ENABLED) {
+    // Forward the raw props (handlers, ids, assets, recording, fonts, etc.) and
+    // the values the legacy path already computed above (so they aren't derived
+    // twice). PropertyPanelFlat owns the one-open group state.
+    return (
+      <PropertyPanelFlat
+        {...props}
+        key={selectionIdentityKey(element)}
+        element={element}
+        styles={styles}
+        sections={sections}
+        sourceLabel={sourceLabel}
+        gsapBorderRadius={gsapBorderRadius}
+        showEditableSections={showEditableSections}
+        selectedElementHidden={selectedElementHidden}
+        selectedElementId={selectedElementId}
+        clipboardCopied={clipboardCopied}
+        onCopyElementInfo={handleCopyElementInfo}
+        displayX={displayX}
+        displayY={displayY}
+        displayW={displayW}
+        displayH={displayH}
+        displayR={displayR}
+        manualOffsetEditingDisabled={manualOffsetEditingDisabled}
+        manualSizeEditingDisabled={manualSizeEditingDisabled}
+        manualRotationEditingDisabled={manualRotationEditingDisabled}
+        commitManualOffset={commitManualOffset}
+        commitManualSize={commitManualSize}
+        commitManualRotation={commitManualRotation}
+        gsapAnimId={gsapAnimId}
+        navKeyframes={navKeyframes}
+        currentTime={currentTime}
+        animIdForProp={animIdForProp}
+        gsapRuntimeValues={gsap3dValues}
+        elStart={elStart}
+        elDuration={elDuration}
+      />
+    );
+  }
+
+  const classicPanel = (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-panel-bg text-panel-text-1">
-      <div className="px-4 py-3">
-        <div className="flex items-center justify-between gap-4">
-          <div className="min-w-0">
-            <div className="truncate text-[13px] font-semibold text-neutral-100">
-              {element.label}
+      <DesignPanelInputProvider section="header">
+        <div className="px-4 py-3">
+          <div className="flex items-center justify-between gap-4">
+            <div className="min-w-0">
+              <div className="truncate text-[13px] font-semibold text-neutral-100">
+                {element.label}
+              </div>
+              <div className="mt-0.5 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
             </div>
-            <div className="mt-0.5 truncate text-[11px] text-neutral-500">{sourceLabel}</div>
-          </div>
-          <div className="flex items-center gap-1">
-            {selectedElementId && onToggleElementHidden && (
-              <button
-                type="button"
-                aria-label={visibilityToggleLabel}
-                title={visibilityToggleLabel}
-                onClick={() => {
-                  void onToggleElementHidden(selectedElementId, !selectedElementHidden);
-                }}
-                className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
-              >
-                {selectedElementHidden ? (
-                  <EyeSlash size={13} weight="bold" aria-hidden="true" />
-                ) : (
-                  <Eye size={13} weight="bold" aria-hidden="true" />
-                )}
-              </button>
-            )}
             <InspectorHeaderActions
               element={element}
               copied={clipboardCopied}
               onCopy={handleCopyElementInfo}
               onClear={onClearSelection}
               onUngroup={onUngroup}
+              selectedElementId={selectedElementId}
+              selectedElementHidden={selectedElementHidden}
+              visibilityLabel={visibilityToggleLabel}
+              onToggleHidden={onToggleElementHidden}
             />
           </div>
         </div>
-      </div>
+      </DesignPanelInputProvider>
       <div className="flex-1 overflow-y-auto">
         {onToggleRecording && (
-          <GestureRecordPanelButton
-            recordingState={recordingState}
-            recordingDuration={recordingDuration}
-            onToggleRecording={onToggleRecording}
-          />
+          <DesignPanelInputProvider section="footer">
+            <GestureRecordPanelButton
+              recordingState={recordingState}
+              recordingDuration={recordingDuration}
+              onToggleRecording={onToggleRecording}
+            />
+          </DesignPanelInputProvider>
         )}
 
         <TextSection
@@ -353,12 +362,7 @@ export const PropertyPanel = memo(function PropertyPanel({
         )}
         {sections.colorGrading && (
           <ColorGradingSection
-            key={[
-              element.id ?? "",
-              element.hfId ?? "",
-              element.selector ?? "",
-              String(element.selectorIndex ?? ""),
-            ].join("|")}
+            key={selectionIdentityKey(element)}
             projectId={projectId}
             element={element}
             assets={assets}
@@ -522,16 +526,7 @@ export const PropertyPanel = memo(function PropertyPanel({
             onSeekToTime={onSeekToTime}
             onRemoveKeyframe={onRemoveKeyframe}
             onConvertToKeyframes={onConvertToKeyframes}
-            onLivePreviewProps={(el, props) => {
-              const iframe = iframeRef.current;
-              const win = iframe?.contentWindow as
-                | { gsap?: { set: (t: Element, v: Record<string, number>) => void } }
-                | null
-                | undefined;
-              const sel = el.id ? `#${el.id}` : el.selector;
-              const node = sel ? iframe?.contentDocument?.querySelector(sel) : null;
-              if (win?.gsap && node) win.gsap.set(node, props);
-            }}
+            onLivePreviewProps={createGsapLivePreview(iframeRef)}
           />
           <div className="mt-3">
             <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
@@ -587,4 +582,5 @@ export const PropertyPanel = memo(function PropertyPanel({
       </div>
     </div>
   );
+  return <DesignPanelInputProvider ui="classic">{classicPanel}</DesignPanelInputProvider>;
 });

package/src/components/editor/PropertyPanelEmptyState.test.tsx

@@ -0,0 +1,74 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { PropertyPanelEmptyState } from "./PropertyPanelEmptyState";
+import type { DomEditSelection } from "./domEditingTypes";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderInto(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return { host, root };
+}
+
+describe("PropertyPanelEmptyState — flat empty", () => {
+  it("shows the cursor glyph, headline, and the two shortcut rows", () => {
+    const { host, root } = renderInto(<PropertyPanelEmptyState flat multiSelectCount={0} />);
+    expect(host.textContent).toContain("Nothing selected");
+    expect(host.textContent).toContain("Record a gesture");
+    expect(host.textContent).toContain("Describe a change to the agent");
+    act(() => root.unmount());
+  });
+});
+
+describe("PropertyPanelEmptyState — flat multi-select", () => {
+  const elements = [
+    { id: "mono-label", selector: ".mono-label", label: "Mono Label", tagName: "div" },
+    { id: null, selector: "#s2-chart", label: "S2 Chart", tagName: "div" },
+  ] as unknown as DomEditSelection[];
+
+  it("lists each selected element and wires group/hide-all/clear actions", () => {
+    const onGroupSelection = vi.fn();
+    const onHideAllSelected = vi.fn();
+    const onClearSelection = vi.fn();
+    const { host, root } = renderInto(
+      <PropertyPanelEmptyState
+        flat
+        multiSelectCount={2}
+        multiSelectedElements={elements}
+        onGroupSelection={onGroupSelection}
+        onHideAllSelected={onHideAllSelected}
+        onClearSelection={onClearSelection}
+      />,
+    );
+    expect(host.textContent).toContain("2 elements selected");
+    expect(host.textContent).toContain("Mono Label");
+    expect(host.textContent).toContain("S2 Chart");
+
+    const group = host.querySelector<HTMLButtonElement>('[data-flat-multiselect-group="true"]');
+    act(() => group?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onGroupSelection).toHaveBeenCalledTimes(1);
+
+    const hideAll = host.querySelector<HTMLButtonElement>(
+      '[data-flat-multiselect-hide-all="true"]',
+    );
+    act(() => hideAll?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onHideAllSelected).toHaveBeenCalledTimes(1);
+
+    const clear = host.querySelector<HTMLButtonElement>('[data-flat-multiselect-clear="true"]');
+    act(() => clear?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onClearSelection).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/PropertyPanelEmptyState.tsx

@@ -1,6 +1,184 @@
 import { Eye, Layers } from "../../icons/SystemIcons";
+import type { DomEditSelection } from "./domEditingTypes";
+
+function FlatEmptyState() {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-2.5 px-8 py-10 text-center">
+      <span className="flex h-11 w-11 items-center justify-center rounded-xl border border-panel-border-input bg-panel-input text-panel-text-3">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+        >
+          <path d="M4 3l6 14 2-6 6-2z" strokeLinejoin="round" />
+        </svg>
+      </span>
+      <div className="text-[13px] font-semibold text-panel-text-0">Nothing selected</div>
+      <div className="max-w-[250px] text-[11px] leading-[1.5] text-panel-text-3">
+        Click any element on the canvas to edit it, or drag to select several.
+      </div>
+      <div className="mt-2 flex w-full flex-col gap-1.5">
+        <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
+          <span className="flex items-center gap-2 text-[11px] text-panel-text-2">
+            <span className="text-panel-danger">●</span>
+            Record a gesture
+          </span>
+          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+            R
+          </span>
+        </span>
+        <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
+          <span className="flex items-center gap-2 text-[11px] text-panel-text-2">
+            <span className="text-panel-accent">✦</span>
+            Describe a change to the agent
+          </span>
+          <span className="rounded border border-panel-border-input px-[5px] py-px font-mono text-[9px] text-panel-text-5">
+            ⌘K
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function elementKindGlyph(element: DomEditSelection): { glyph: string; className: string } {
+  if (element.tagName === "video" || element.tagName === "audio" || element.tagName === "img") {
+    return { glyph: "◆", className: "bg-panel-media/10 text-panel-media" };
+  }
+  if (element.textFields?.length > 0) {
+    return { glyph: "T", className: "bg-panel-accent/10 text-panel-accent" };
+  }
+  return { glyph: "▦", className: "bg-panel-container/10 text-panel-container" };
+}
+
+function FlatMultiSelectState({
+  multiSelectCount,
+  multiSelectedElements = [],
+  onGroupSelection,
+  onHideAllSelected,
+  onClearSelection,
+}: {
+  multiSelectCount: number;
+  multiSelectedElements?: DomEditSelection[];
+  onGroupSelection?: () => void;
+  onHideAllSelected?: () => void;
+  onClearSelection?: () => void;
+}) {
+  return (
+    <div className="flex flex-col gap-3 px-4 py-3">
+      <div className="flex items-center gap-3 rounded-xl border border-panel-border bg-panel-surface p-3">
+        <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-panel-accent/10 text-panel-accent">
+          <Layers size={16} />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="text-[13px] font-semibold text-panel-text-0">
+            {multiSelectCount} elements selected
+          </div>
+          <div className="mt-px font-mono text-[10px] text-panel-text-3">
+            shift-click to add or remove
+          </div>
+        </div>
+        <button
+          type="button"
+          data-flat-multiselect-clear="true"
+          aria-label="Clear selection"
+          onClick={onClearSelection}
+          className="flex h-[26px] w-[26px] flex-shrink-0 items-center justify-center text-panel-text-3"
+        >
+          <svg
+            width="13"
+            height="13"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path d="M3 3l10 10M13 3L3 13" />
+          </svg>
+        </button>
+      </div>
+      <div className="flex flex-col gap-1">
+        {multiSelectedElements.map((element) => {
+          const { glyph, className } = elementKindGlyph(element);
+          return (
+            <span
+              key={`${element.id ?? element.selector ?? ""}:${element.selectorIndex ?? 0}`}
+              className="flex items-center gap-2 rounded-lg border border-panel-border bg-panel-bg px-2.5 py-[7px]"
+            >
+              <span
+                className={`flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded text-[9px] font-bold ${className}`}
+              >
+                {glyph}
+              </span>
+              <span className="min-w-0 flex-1 truncate text-[11px] text-panel-text-1">
+                {element.label}
+              </span>
+              <span className="flex-shrink-0 font-mono text-[9px] text-panel-text-4">
+                {element.id ? `#${element.id}` : element.selector}
+              </span>
+            </span>
+          );
+        })}
+      </div>
+      <div className="flex gap-2">
+        <button
+          type="button"
+          data-flat-multiselect-group="true"
+          onClick={onGroupSelection}
+          className="flex h-[34px] flex-1 items-center justify-center gap-2 rounded-lg bg-panel-hover text-[11px] font-semibold text-panel-text-0"
+        >
+          <Layers size={13} />
+          Group selection
+        </button>
+        <button
+          type="button"
+          data-flat-multiselect-hide-all="true"
+          onClick={onHideAllSelected}
+          className="flex h-[34px] items-center gap-1.5 rounded-lg border border-panel-border-input bg-panel-input px-3 text-[11px] font-medium text-panel-text-2"
+        >
+          <Eye size={13} />
+          Hide all
+        </button>
+      </div>
+      <span className="text-center text-[10px] text-panel-text-5">
+        Select a single element to edit its properties
+      </span>
+    </div>
+  );
+}
+
+export function PropertyPanelEmptyState({
+  multiSelectCount,
+  flat,
+  multiSelectedElements,
+  onGroupSelection,
+  onHideAllSelected,
+  onClearSelection,
+}: {
+  multiSelectCount: number;
+  flat?: boolean;
+  multiSelectedElements?: DomEditSelection[];
+  onGroupSelection?: () => void;
+  onHideAllSelected?: () => void;
+  onClearSelection?: () => void;
+}) {
+  if (flat) {
+    return multiSelectCount > 1 ? (
+      <FlatMultiSelectState
+        multiSelectCount={multiSelectCount}
+        multiSelectedElements={multiSelectedElements}
+        onGroupSelection={onGroupSelection}
+        onHideAllSelected={onHideAllSelected}
+        onClearSelection={onClearSelection}
+      />
+    ) : (
+      <FlatEmptyState />
+    );
+  }
 
-export function PropertyPanelEmptyState({ multiSelectCount }: { multiSelectCount: number }) {
   return (
     <div className="flex h-full flex-col bg-neutral-900">
       <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">