@hyperframes/studio 0.8.52 → 0.8.53

package/src/components/sidebar/SidebarLintButton.tsx

@@ -0,0 +1,50 @@
+export function SidebarLintButton({
+  onLint,
+  linting,
+  findingCount,
+  hasError,
+}: {
+  onLint: () => void;
+  linting: boolean;
+  findingCount?: number;
+  hasError?: boolean;
+}) {
+  return (
+    <div className="border-t border-neutral-800 p-2 shrink-0">
+      <button
+        type="button"
+        onClick={onLint}
+        disabled={linting}
+        className="w-full flex items-center justify-center gap-1.5 px-2 py-1.5 rounded-md text-[11px] font-medium text-neutral-500 enabled:hover:text-amber-300 enabled:hover:bg-neutral-800 enabled:active:scale-[0.98] transition-colors disabled:opacity-40"
+      >
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M9 11l3 3L22 4" />
+          <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
+        </svg>
+        {linting ? "Linting…" : "Lint"}
+        {!linting && findingCount != null && findingCount > 0 && (
+          <span
+            data-lint-badge={hasError ? "error" : "warning"}
+            className={
+              hasError
+                ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none"
+                : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400"
+            }
+          >
+            {findingCount}
+            <span className="sr-only">
+              {hasError ? " lint findings, including errors" : " lint findings, warnings only"}
+            </span>
+          </span>
+        )}
+      </button>
+    </div>
+  );
+}

package/src/components/ui/Select.tsx

@@ -11,6 +11,8 @@ import type { PreviewState } from "./Button";
 export interface SelectOption {
   label: string;
   value: string;
+  /** Offered but not choosable; the label stays visible so the reason stays visible too. */
+  disabled?: boolean;
 }
 
 export interface SelectProps {
@@ -81,11 +83,13 @@ export function Select({
                 <BaseSelect.Item
                   key={option.value}
                   value={option.value}
+                  disabled={option.disabled}
                   className={cn(
                     "flex h-ctl-sm cursor-pointer select-none items-center gap-2 px-2.5",
                     "text-step-11 text-text-2 outline-hidden",
                     "data-[highlighted]:bg-hover data-[highlighted]:text-text-0",
                     "data-[selected]:text-text-0",
+                    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40",
                   )}
                 >
                   <BaseSelect.ItemText className="truncate">{option.label}</BaseSelect.ItemText>

package/src/contexts/PanelLayoutContext.tsx

@@ -13,69 +13,15 @@ export function usePanelLayoutContext(): PanelLayoutValue {
 }
 
 export function PanelLayoutProvider({
-  value: {
-    leftWidth,
-    rightWidth,
-    adjustPanelWidth,
-    leftCollapsed,
-    rightCollapsed,
-    setRightCollapsed,
-    effectiveLeftCollapsed,
-    effectiveRightCollapsed,
-    rightPanelTab,
-    setRightPanelTab,
-    rightInspectorPanes,
-    toggleRightInspectorPane,
-    setExclusiveRightInspectorPane,
-    toggleLeftSidebar,
-    handlePanelResizeStart,
-    handlePanelResizeMove,
-    handlePanelResizeEnd,
-  },
+  value: { rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab },
   children,
 }: {
   value: PanelLayoutValue;
   children: ReactNode;
 }) {
   const stable = useMemo<PanelLayoutValue>(
-    () => ({
-      leftWidth,
-      rightWidth,
-      adjustPanelWidth,
-      leftCollapsed,
-      rightCollapsed,
-      setRightCollapsed,
-      effectiveLeftCollapsed,
-      effectiveRightCollapsed,
-      rightPanelTab,
-      setRightPanelTab,
-      rightInspectorPanes,
-      toggleRightInspectorPane,
-      setExclusiveRightInspectorPane,
-      toggleLeftSidebar,
-      handlePanelResizeStart,
-      handlePanelResizeMove,
-      handlePanelResizeEnd,
-    }),
-    [
-      leftWidth,
-      rightWidth,
-      adjustPanelWidth,
-      leftCollapsed,
-      rightCollapsed,
-      setRightCollapsed,
-      effectiveLeftCollapsed,
-      effectiveRightCollapsed,
-      rightPanelTab,
-      setRightPanelTab,
-      rightInspectorPanes,
-      toggleRightInspectorPane,
-      setExclusiveRightInspectorPane,
-      toggleLeftSidebar,
-      handlePanelResizeStart,
-      handlePanelResizeMove,
-      handlePanelResizeEnd,
-    ],
+    () => ({ rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab }),
+    [rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab],
   );
   return <PanelLayoutContext value={stable}>{children}</PanelLayoutContext>;
 }

package/src/headerExports.test.tsx

@@ -0,0 +1,23 @@
+// @vitest-environment happy-dom
+// Imports the header logo and button size classes the way a host app does: by package name.
+import { createRoot } from "react-dom/client";
+import { act } from "react";
+import { describe, expect, it } from "vitest";
+import { HyperframesLogo, buttonSizes } from "@hyperframes/studio";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+describe("header package exports", () => {
+  it("mounts the logo mark", async () => {
+    const el = document.createElement("div");
+    document.body.append(el);
+    const root = createRoot(el);
+    await act(async () => root.render(<HyperframesLogo />));
+    expect(el.querySelector("svg")).not.toBeNull();
+    await act(async () => root.unmount());
+  });
+
+  it("exposes the button size classes a host reuses for matching chrome", () => {
+    expect(buttonSizes.md).toEqual(expect.any(String));
+  });
+});

package/src/hooks/appHotkeysDispatch.ts

@@ -2,7 +2,7 @@ import { automationOwnsKey } from "./useAutomationSelectionKeyboard";
 import { usePlayerStore } from "../player";
 import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
+import { useDockLayoutStore } from "../components/dock/dockLayoutStore";
 import { isTypingTarget } from "../utils/typingTarget";
 import { isEditableTarget } from "../utils/timelineDiscovery";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
@@ -52,7 +52,6 @@ export interface HotkeyCallbacks {
   onToggleRecording?: () => void;
   onGroupSelection?: () => void;
   onUngroupSelection?: () => void;
-  leftSidebarRef: React.RefObject<LeftSidebarHandle | null>;
   domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
   showToast: (message: string, tone?: "error" | "info") => void;
 }
@@ -84,13 +83,13 @@ export function dispatchModifierKey(
   if (event.key === "1") {
     event.preventDefault();
     trackStudioEvent("keyboard_shortcut", { action: "tab_compositions" });
-    cb.leftSidebarRef.current?.selectTab("compositions");
+    useDockLayoutStore.getState().activatePanel("compositions");
     return true;
   }
   if (event.key === "2") {
     event.preventDefault();
     trackStudioEvent("keyboard_shortcut", { action: "tab_assets" });
-    cb.leftSidebarRef.current?.selectTab("assets");
+    useDockLayoutStore.getState().activatePanel("assets");
     return true;
   }
 

package/src/hooks/useAppHotkeys.previewForwarding.test.tsx

@@ -4,7 +4,6 @@ import React, { act, useRef } from "react";
 import type { Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
 import { usePlayerStore } from "../player/store/playerStore";
 import { useAppHotkeys } from "./useAppHotkeys";
 import { mountReactHarness } from "./domSelectionTestHarness";
@@ -46,7 +45,6 @@ function Harness() {
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
     waitForPendingDomEditSaves: vi.fn(async () => undefined),
-    leftSidebarRef: useRef<LeftSidebarHandle | null>(null),
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(() => false),
     handleCut: vi.fn(() => false),

package/src/hooks/useAppHotkeys.test.ts

@@ -33,7 +33,6 @@ function callbacks() {
     onResetKeyframes: vi.fn(() => true),
     onDeleteSelectedKeyframes: vi.fn(),
     showToast: vi.fn(),
-    leftSidebarRef: { current: null },
     domEditSelectionRef: { current: null },
   };
 }

package/src/hooks/useAppHotkeys.textEditing.test.tsx

@@ -5,7 +5,6 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { TextAreaField } from "../components/editor/propertyPanelSections";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
 import { usePlayerStore } from "../player/store/playerStore";
 import { useAppHotkeys } from "./useAppHotkeys";
 
@@ -70,7 +69,6 @@ function Harness() {
   const [selectionRefreshed, setSelectionRefreshed] = useState(false);
   const selectionRef = useRef<DomEditSelection | null>(parentWithTextChild());
   const clearSelectionRef = useRef<() => void>(() => undefined);
-  const leftSidebarRef = useRef<LeftSidebarHandle | null>(null);
 
   useAppHotkeys({
     handleTimelineElementsDelete: timelineDeleteMany,
@@ -89,7 +87,6 @@ function Harness() {
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
     waitForPendingDomEditSaves: vi.fn(async () => undefined),
-    leftSidebarRef,
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => undefined),
     handleCut: vi.fn(async () => false),

package/src/hooks/useAppHotkeys.ts

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef } from "react";
 import { usePlayerStore } from "../player";
 import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
 import { isTypingTarget } from "../utils/typingTarget";
 import { useCaptionStore } from "../captions/store";
 import {
@@ -88,7 +87,6 @@ interface UseAppHotkeysParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   syncHistoryPreviewAfterApply: UseEditHistoryActionsOptions["syncHistoryPreviewAfterApply"];
   waitForPendingDomEditSaves: () => Promise<void>;
-  leftSidebarRef: React.RefObject<LeftSidebarHandle | null>;
   handleCopy: () => boolean;
   handlePaste: () => Promise<void>;
   handleCut: () => Promise<boolean>;
@@ -125,7 +123,6 @@ export function useAppHotkeys({
   showToast,
   syncHistoryPreviewAfterApply,
   waitForPendingDomEditSaves,
-  leftSidebarRef,
   handleCopy,
   handlePaste,
   handleCut,
@@ -204,7 +201,6 @@ export function useAppHotkeys({
     onToggleRecording,
     onGroupSelection,
     onUngroupSelection,
-    leftSidebarRef,
     domEditSelectionRef,
     showToast,
   };

package/src/hooks/useDomEditPreviewSync.ts

@@ -6,7 +6,7 @@
 import { useEffect, useRef } from "react";
 import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
-import type { SidebarTab } from "../components/sidebar/LeftSidebar";
+import { useDockLayoutStore } from "../components/dock/dockLayoutStore";
 import type { PatchTarget } from "../utils/sourcePatcher";
 import { logSelect } from "../utils/selectDebug";
 
@@ -30,7 +30,6 @@ interface UseDomEditPreviewSyncParams {
     (iframe: HTMLIFrameElement) => Promise<void>
   >;
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
-  getSidebarTab?: () => SidebarTab;
   gsapCacheVersion?: number;
 }
 
@@ -48,7 +47,6 @@ export function useDomEditPreviewSync({
   syncPreviewHotkeys,
   applyStudioManualEditsToPreviewRef,
   openSourceForSelection,
-  getSidebarTab,
   gsapCacheVersion,
 }: UseDomEditPreviewSyncParams): void {
   // Sync selection from preview document on load / refresh
@@ -142,15 +140,15 @@ export function useDomEditPreviewSync({
   useEffect(
     // fallow-ignore-next-line complexity
     () => {
-      if (!domEditSelection || !openSourceRef.current || !getSidebarTab) return;
+      if (!domEditSelection || !openSourceRef.current) return;
       if (!domEditSelection.sourceFile) return;
-      if (getSidebarTab() !== "code") return;
+      if (!useDockLayoutStore.getState().visiblePanels.has("code")) return;
       openSourceRef.current(domEditSelection.sourceFile, {
         id: domEditSelection.id,
         selector: domEditSelection.selector,
         selectorIndex: domEditSelection.selectorIndex,
       });
     },
-    [domEditSelection, getSidebarTab],
+    [domEditSelection],
   );
 }

package/src/hooks/useDomEditSession.ts

@@ -5,7 +5,6 @@ import type { TimelineElement } from "../player";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { RightPanelTab } from "../utils/studioHelpers";
 import type { PatchTarget } from "../utils/sourcePatcher";
-import type { SidebarTab } from "../components/sidebar/LeftSidebar";
 import type { Composition } from "@hyperframes/sdk";
 import { sdkCutoverPersist, sdkDeletePersist, type PublishSdkSession } from "../utils/sdkCutover";
 import { runResolverShadow, recordResolverParity } from "../utils/sdkResolverShadow";
@@ -53,8 +52,6 @@ export interface UseDomEditSessionParams extends DomEditTimelineParams {
   reloadPreview: () => void;
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
-  selectSidebarTab?: (tab: SidebarTab) => void;
-  getSidebarTab?: () => SidebarTab;
   sdkSession?: Composition | null;
   publishSdkSession?: PublishSdkSession;
   forceReloadSdkSession?: () => void;
@@ -97,8 +94,6 @@ export function useDomEditSession({
   reloadPreview,
   setRefreshKey: _setRefreshKey,
   openSourceForSelection,
-  selectSidebarTab,
-  getSidebarTab,
   sdkSession,
   publishSdkSession,
   forceReloadSdkSession,
@@ -430,8 +425,6 @@ export function useDomEditSession({
     applyDomSelection,
     buildDomSelectionFromTarget,
     openSourceForSelection,
-    selectSidebarTab,
-    getSidebarTab,
     updateGsapProperty,
     updateGsapMeta,
     deleteGsapAnimation,

package/src/hooks/useDomEditWiring.ts

@@ -16,7 +16,7 @@ import { useGsapAnimationFetchFallback } from "./useGsapAnimationFetchFallback";
 import { useGsapInteractionFailureTelemetry } from "./useGsapInteractionFailureTelemetry";
 import { useGsapSelectionHandlers } from "./useGsapSelectionHandlers";
 import type { PatchTarget } from "../utils/sourcePatcher";
-import type { SidebarTab } from "../components/sidebar/LeftSidebar";
+import { useDockLayoutStore } from "../components/dock/dockLayoutStore";
 
 export interface UseDomEditWiringParams {
   projectId: string | null;
@@ -43,8 +43,6 @@ export interface UseDomEditWiringParams {
   ) => void;
   buildDomSelectionFromTarget: (element: HTMLElement) => Promise<DomEditSelection | null>;
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
-  selectSidebarTab?: (tab: SidebarTab) => void;
-  getSidebarTab?: () => SidebarTab;
   // GSAP script commit ops (from useGsapScriptCommits)
   updateGsapProperty: (
     sel: DomEditSelection,
@@ -132,8 +130,6 @@ export function useDomEditWiring({
   applyDomSelection,
   buildDomSelectionFromTarget,
   openSourceForSelection,
-  selectSidebarTab,
-  getSidebarTab,
   updateGsapProperty,
   updateGsapMeta,
   deleteGsapAnimation,
@@ -157,16 +153,16 @@ export function useDomEditWiring({
 
   const onClickToSource = useCallback(
     (selection: DomEditSelection) => {
-      if (!openSourceForSelection || !selectSidebarTab) return;
+      if (!openSourceForSelection) return;
       if (!selection.sourceFile) return;
-      selectSidebarTab("code");
+      useDockLayoutStore.getState().activatePanel("code");
       openSourceForSelection(selection.sourceFile, {
         id: selection.id,
         selector: selection.selector,
         selectorIndex: selection.selectorIndex,
       });
     },
-    [openSourceForSelection, selectSidebarTab],
+    [openSourceForSelection],
   );
 
   // ── DOM selection -> timeline element sync ──
@@ -267,7 +263,6 @@ export function useDomEditWiring({
     syncPreviewHotkeys,
     applyStudioManualEditsToPreviewRef,
     openSourceForSelection,
-    getSidebarTab,
     gsapCacheVersion,
   });