@hyperframes/studio 0.8.5 → 0.8.7

package/src/components/editor/BlockParamsPanel.tsx

@@ -1,5 +1,8 @@
-import { memo, useState, useCallback } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import type { BlockParam } from "@hyperframes/core/registry";
+import { useFileManagerContextOptional } from "../../contexts/FileManagerContext";
+import { useStudioPlaybackContext } from "../../contexts/StudioContext";
+import { trackBlockParamCommit } from "../../telemetry/events";
 
 interface BlockParamsPanelProps {
   blockName: string;
@@ -9,12 +12,17 @@ interface BlockParamsPanelProps {
   onClose: () => void;
 }
 
+type CommitState = { tone: "idle" | "saving" | "saved" | "error"; message?: string };
+
 export const BlockParamsPanel = memo(function BlockParamsPanel({
+  blockName,
   blockTitle,
   params,
-  compositionPath: _compositionPath,
+  compositionPath,
   onClose,
 }: BlockParamsPanelProps) {
+  const fileManager = useFileManagerContextOptional();
+  const { setRefreshKey } = useStudioPlaybackContext();
   const [values, setValues] = useState<Record<string, string>>(() => {
     const initial: Record<string, string> = {};
     for (const p of params) {
@@ -22,10 +30,107 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
     }
     return initial;
   });
+  // Last value actually written to the block file per param — the literal we
+  // substitute when the next commit rewrites the file.
+  const appliedRef = useRef<Record<string, string>>(
+    Object.fromEntries(params.map((p) => [p.key, p.default])),
+  );
+  const [commitState, setCommitState] = useState<CommitState>({ tone: "idle" });
+  // Per-param debounce timers: a single shared timer would let a second
+  // param's edit silently cancel the first param's pending commit.
+  const commitTimersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
 
-  const handleChange = useCallback((key: string, value: string) => {
-    setValues((prev) => ({ ...prev, [key]: value }));
-  }, []);
+  const commitParamNow = useCallback(
+    async (key: string, nextValue: string) => {
+      if (!fileManager) return;
+      const previous = appliedRef.current[key];
+      if (previous === undefined || previous === nextValue || !nextValue.trim()) return;
+      setCommitState({ tone: "saving" });
+      try {
+        const content = await fileManager.readProjectFile(compositionPath);
+        // Token-boundary match so "#0c0c0c" never rewrites part of "#0c0c0cff".
+        const matcher = new RegExp(
+          `(?<![-\\w#])${previous.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![-\\w])`,
+          "g",
+        );
+        const matches = content.match(matcher)?.length ?? 0;
+        if (matches === 0) {
+          setCommitState({
+            tone: "error",
+            message: `Couldn't find the current value in ${compositionPath} — it may have been edited by hand.`,
+          });
+          trackBlockParamCommit({ tone: "error", blockName, key });
+          return;
+        }
+        // The panel maps a param to a bare literal, with no per-occurrence
+        // binding metadata. At the string level it cannot tell "both of these
+        // belong to this param" from "one is unrelated adjacent content" (a
+        // sibling block, a decoration, a comment). A blind replace of a literal
+        // that appears more than once could silently mutate that unrelated
+        // content — so refuse and tell the user to disambiguate by hand. Only a
+        // unique single occurrence is safe to rewrite automatically.
+        if (matches > 1) {
+          setCommitState({
+            tone: "error",
+            message: `"${previous}" appears ${matches}× in ${compositionPath} — the panel can't tell which one belongs to this parameter, so it won't risk changing unrelated content. Edit the file directly to disambiguate.`,
+          });
+          trackBlockParamCommit({ tone: "error", blockName, key });
+          return;
+        }
+        await fileManager.writeProjectFile(compositionPath, content.replace(matcher, nextValue));
+        appliedRef.current[key] = nextValue;
+        setCommitState({ tone: "saved" });
+        trackBlockParamCommit({ tone: "saved", blockName, key });
+        setRefreshKey((k) => k + 1);
+      } catch {
+        setCommitState({ tone: "error", message: "Couldn't save the block file. Retry?" });
+        trackBlockParamCommit({ tone: "error", blockName, key });
+      }
+    },
+    [fileManager, compositionPath, setRefreshKey, blockName],
+  );
+
+  // Commits are serialized: two params committing concurrently would each
+  // read-modify-write the same file and the second write would drop the first.
+  const commitChainRef = useRef<Promise<void>>(Promise.resolve());
+  const commitParam = useCallback(
+    (key: string, nextValue: string) => {
+      const run = commitChainRef.current.then(() => commitParamNow(key, nextValue));
+      commitChainRef.current = run.catch(() => undefined);
+      return run;
+    },
+    [commitParamNow],
+  );
+
+  const handleChange = useCallback(
+    (key: string, value: string) => {
+      setValues((prev) => ({ ...prev, [key]: value }));
+      const timers = commitTimersRef.current;
+      const existing = timers.get(key);
+      if (existing) clearTimeout(existing);
+      timers.set(
+        key,
+        setTimeout(() => {
+          timers.delete(key);
+          void commitParam(key, value);
+        }, 300),
+      );
+    },
+    [commitParam],
+  );
+
+  // Flush (not discard) pending commits on unmount so closing the panel
+  // within the debounce window doesn't silently drop the last edit.
+  const flushRef = useRef<() => void>(() => {});
+  flushRef.current = () => {
+    for (const [key, timer] of commitTimersRef.current) {
+      clearTimeout(timer);
+      const value = values[key];
+      if (value !== undefined) void commitParam(key, value);
+    }
+    commitTimersRef.current.clear();
+  };
+  useEffect(() => () => flushRef.current(), []);
 
   return (
     <div className="flex flex-col h-full">
@@ -34,7 +139,8 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
         <button
           type="button"
           onClick={onClose}
-          className="text-neutral-500 hover:text-neutral-300 transition-colors"
+          aria-label="Close block parameters"
+          className="p-1.5 -m-1 text-neutral-500 hover:text-neutral-300 active:scale-[0.97] transition-colors"
         >
           <svg
             width="14"
@@ -56,14 +162,38 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
         <div className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
           Parameters
         </div>
+        {params.length === 0 && (
+          <div className="text-[10px] text-neutral-500">This block has no editable parameters.</div>
+        )}
+        {!fileManager && params.length > 0 && (
+          <div className="text-[10px] text-amber-400/90">
+            Block params can't be edited here — no project file access.
+          </div>
+        )}
         {params.map((param) => (
           <ParamControl
             key={param.key}
             param={param}
             value={values[param.key] ?? param.default}
+            disabled={!fileManager}
             onChange={(v) => handleChange(param.key, v)}
           />
         ))}
+        {commitState.tone === "saving" && (
+          <div className="text-[10px] text-neutral-500" role="status">
+            Saving…
+          </div>
+        )}
+        {commitState.tone === "saved" && (
+          <div className="text-[10px] text-emerald-500/90" role="status">
+            Saved to {compositionPath}
+          </div>
+        )}
+        {commitState.tone === "error" && (
+          <div className="text-[10px] text-red-400" role="alert">
+            {commitState.message}
+          </div>
+        )}
       </div>
     </div>
   );
@@ -72,10 +202,12 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
 function ParamControl({
   param,
   value,
+  disabled,
   onChange,
 }: {
   param: BlockParam;
   value: string;
+  disabled?: boolean;
   onChange: (value: string) => void;
 }) {
   return (
@@ -87,14 +219,18 @@ function ParamControl({
           <input
             type="color"
             value={value}
+            disabled={disabled}
+            aria-label={`${param.label} color`}
             onChange={(e) => onChange(e.target.value)}
-            className="w-7 h-7 rounded border border-neutral-700 bg-transparent cursor-pointer"
+            className="w-7 h-7 rounded border border-neutral-700 bg-transparent cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
           />
           <input
             type="text"
             value={value}
+            disabled={disabled}
+            aria-label={`${param.label} value`}
             onChange={(e) => onChange(e.target.value)}
-            className="flex-1 bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 font-mono focus:outline-none focus:border-neutral-700"
+            className="flex-1 bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 font-mono focus:outline-none focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
           />
         </div>
       )}
@@ -107,8 +243,10 @@ function ParamControl({
             max={param.max ?? 100}
             step={param.step ?? 1}
             value={value}
+            disabled={disabled}
+            aria-label={param.label}
             onChange={(e) => onChange(e.target.value)}
-            className="flex-1"
+            className="flex-1 disabled:cursor-not-allowed disabled:opacity-50"
           />
           <span className="text-[10px] text-neutral-400 w-8 text-right tabular-nums">{value}</span>
         </div>
@@ -118,16 +256,20 @@ function ParamControl({
         <input
           type="text"
           value={value}
+          disabled={disabled}
+          aria-label={param.label}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700"
+          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
         />
       )}
 
       {param.type === "select" && param.options && (
         <select
           value={value}
+          disabled={disabled}
+          aria-label={param.label}
           onChange={(e) => onChange(e.target.value)}
-          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700"
+          className="w-full bg-neutral-900 border border-neutral-800 rounded px-2 py-1 text-[10px] text-neutral-200 focus:outline-none focus:border-neutral-700 disabled:cursor-not-allowed disabled:opacity-50"
         >
           {param.options.map((opt) => (
             <option key={opt.value} value={opt.value}>

package/src/components/editor/BorderRadiusEditor.tsx

@@ -79,34 +79,15 @@ export function BorderRadiusEditor({
             stroke="rgba(255,255,255,0.24)"
             strokeWidth={1.5}
           />
-          <circle
-            cx={sTL}
-            cy={sTL}
-            r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
-            className="cursor-pointer"
-          />
-          <circle
-            cx={PREVIEW_W - sTR}
-            cy={sTR}
-            r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
-            className="cursor-pointer"
-          />
+          <circle cx={sTL} cy={sTL} r={3} fill={linked ? "#3b82f6" : "#a78bfa"} />
+          <circle cx={PREVIEW_W - sTR} cy={sTR} r={3} fill={linked ? "#3b82f6" : "#a78bfa"} />
           <circle
             cx={PREVIEW_W - sBR}
             cy={PREVIEW_H - sBR}
             r={3}
             fill={linked ? "#3b82f6" : "#a78bfa"}
-            className="cursor-pointer"
-          />
-          <circle
-            cx={sBL}
-            cy={PREVIEW_H - sBL}
-            r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
-            className="cursor-pointer"
           />
+          <circle cx={sBL} cy={PREVIEW_H - sBL} r={3} fill={linked ? "#3b82f6" : "#a78bfa"} />
         </svg>
 
         <button

package/src/components/editor/FileTree.tsx

@@ -49,7 +49,12 @@ export const FileTree = memo(function FileTree({
 
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
   const [inlineInput, setInlineInput] = useState<InlineInputState | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<{
+    path: string;
+    isFolder: boolean;
+    x: number;
+    y: number;
+  } | null>(null);
   const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
   const dragSourceRef = useRef<string | null>(null);
 
@@ -145,13 +150,23 @@ export const FileTree = memo(function FileTree({
 
   // ── Delete ──
 
-  const handleDelete = useCallback((path: string) => {
-    setDeleteTarget(path);
-  }, []);
+  const handleDelete = useCallback(
+    (path: string) => {
+      // Anchor the confirm near where the context menu was opened so it
+      // appears next to the row the user acted on.
+      setDeleteTarget({
+        path,
+        isFolder: contextMenu?.targetIsFolder ?? false,
+        x: contextMenu?.x ?? window.innerWidth / 2,
+        y: contextMenu?.y ?? window.innerHeight / 2,
+      });
+    },
+    [contextMenu],
+  );
 
   const handleDeleteConfirm = useCallback(() => {
     if (deleteTarget) {
-      onDeleteFile?.(deleteTarget);
+      onDeleteFile?.(deleteTarget.path);
       setDeleteTarget(null);
     }
   }, [deleteTarget, onDeleteFile]);
@@ -227,15 +242,17 @@ export const FileTree = memo(function FileTree({
           <div className="flex items-center gap-0.5">
             <button
               onClick={() => handleNewFile("")}
-              className="p-0.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 transition-colors"
+              className="p-1.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
               title="New File"
+              aria-label="New File"
             >
               <Plus size={12} weight="bold" />
             </button>
             <button
               onClick={() => handleNewFolder("")}
-              className="p-0.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 transition-colors"
+              className="p-1.5 rounded hover:bg-neutral-800 text-neutral-600 hover:text-neutral-400 active:scale-[0.97] transition-colors"
               title="New Folder"
+              aria-label="New Folder"
             >
               <FolderSimplePlus size={12} weight="duotone" />
             </button>
@@ -274,6 +291,11 @@ export const FileTree = memo(function FileTree({
               onCancel={() => inlineInput.onCancel?.()}
             />
           )}
+        {children.length === 0 && !inlineInput && (
+          <div className="px-3 py-4 text-center text-[11px] text-neutral-600">
+            No files yet{hasFileOps ? " — use + above to create one" : ""}.
+          </div>
+        )}
         {children.map((child) =>
           child.isFile && child.children.size === 0 ? (
             <TreeFile
@@ -308,15 +330,22 @@ export const FileTree = memo(function FileTree({
         )}
       </div>
 
-      {/* Delete confirmation overlay */}
+      {/* Delete confirmation — anchored near the row it was invoked on */}
       {deleteTarget && (
-        <div className="border-t border-neutral-800/50 flex-shrink-0">
+        <div
+          className="fixed z-50 w-56"
+          style={{
+            left: Math.min(deleteTarget.x, window.innerWidth - 240),
+            top: Math.min(deleteTarget.y, window.innerHeight - 120),
+          }}
+        >
           <DeleteConfirm
             name={
-              deleteTarget.includes("/")
-                ? deleteTarget.slice(deleteTarget.lastIndexOf("/") + 1)
-                : deleteTarget
+              deleteTarget.path.includes("/")
+                ? deleteTarget.path.slice(deleteTarget.path.lastIndexOf("/") + 1)
+                : deleteTarget.path
             }
+            isFolder={deleteTarget.isFolder}
             onConfirm={handleDeleteConfirm}
             onCancel={handleDeleteCancel}
           />

package/src/components/editor/FileTreeNodes.tsx

@@ -43,9 +43,14 @@ export function ContextMenu({
   onDelete: (path: string) => void;
 }) {
   const menuRef = useRef<HTMLDivElement>(null);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
+    restoreFocusRef.current =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const firstItem = menuRef.current?.querySelector("button");
+    if (firstItem instanceof HTMLElement) firstItem.focus();
     const handleClickOutside = (e: MouseEvent) => {
       if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
         onClose();
@@ -59,9 +64,28 @@ export function ContextMenu({
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
       document.removeEventListener("keydown", handleEscape);
+      restoreFocusRef.current?.focus();
     };
   }, [onClose]);
 
+  const handleMenuKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") {
+      return;
+    }
+    const menu = menuRef.current;
+    if (!menu) return;
+    e.preventDefault();
+    const items = Array.from(menu.querySelectorAll("button"));
+    if (items.length === 0) return;
+    const current = items.indexOf(document.activeElement as HTMLButtonElement);
+    let next = 0;
+    if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % items.length;
+    else if (e.key === "ArrowUp") {
+      next = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length;
+    } else if (e.key === "End") next = items.length - 1;
+    items[next]?.focus();
+  };
+
   const adjustedX = Math.min(state.x, window.innerWidth - 180);
   const adjustedY = Math.min(state.y, window.innerHeight - 200);
 
@@ -74,13 +98,16 @@ export function ContextMenu({
   return (
     <div
       ref={menuRef}
+      role="menu"
+      onKeyDown={handleMenuKeyDown}
       className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[160px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
       {state.targetIsFolder && (
         <>
           <button
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+            role="menuitem"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
             onClick={() => {
               onNewFile(state.targetPath);
               onClose();
@@ -90,7 +117,8 @@ export function ContextMenu({
             New File
           </button>
           <button
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+            role="menuitem"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
             onClick={() => {
               onNewFolder(state.targetPath);
               onClose();
@@ -105,7 +133,8 @@ export function ContextMenu({
       {!state.targetIsFolder && (
         <>
           <button
-            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+            role="menuitem"
+            className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
             onClick={() => {
               onNewFile(parentPath);
               onClose();
@@ -118,7 +147,8 @@ export function ContextMenu({
         </>
       )}
       <button
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+        role="menuitem"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
         onClick={() => {
           onRename(state.targetPath);
           onClose();
@@ -129,7 +159,8 @@ export function ContextMenu({
       </button>
       {!state.targetIsFolder && (
         <button
-          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
+          role="menuitem"
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 active:bg-neutral-700 outline-none cursor-pointer text-left"
           onClick={() => {
             onDuplicate(state.targetPath);
             onClose();
@@ -141,7 +172,8 @@ export function ContextMenu({
       )}
       <div className="border-t border-neutral-700 my-1" />
       <button
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 cursor-pointer text-left"
+        role="menuitem"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-900/30 focus-visible:bg-red-900/30 active:bg-red-900/50 outline-none cursor-pointer text-left"
         onClick={() => {
           onDelete(state.targetPath);
           onClose();
@@ -172,6 +204,13 @@ export function InlineInput({
   const inputRef = useRef<HTMLInputElement>(null);
   const committedRef = useRef(false);
   const [value, setValue] = useState(defaultValue);
+  const [error, setError] = useState<string | null>(null);
+
+  const validate = (name: string): string | null => {
+    if (/[/\\]/.test(name)) return "Name can't contain / or \\";
+    if (name.includes("..")) return "Name can't contain ..";
+    return null;
+  };
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -196,8 +235,16 @@ export function InlineInput({
     if (e.key === "Enter") {
       e.preventDefault();
       const trimmed = value.trim();
-      if (trimmed && !(/[/\\]/.test(trimmed) || trimmed.includes(".."))) commit(trimmed);
-      else onCancel();
+      if (!trimmed) {
+        onCancel();
+        return;
+      }
+      const invalid = validate(trimmed);
+      if (invalid) {
+        setError(invalid);
+        return;
+      }
+      commit(trimmed);
     } else if (e.key === "Escape") {
       e.preventDefault();
       onCancel();
@@ -206,8 +253,7 @@ export function InlineInput({
 
   const handleBlur = () => {
     const trimmed = value.trim();
-    if (trimmed && trimmed !== defaultValue && !(/[/\\]/.test(trimmed) || trimmed.includes("..")))
-      commit(trimmed);
+    if (trimmed && trimmed !== defaultValue && !validate(trimmed)) commit(trimmed);
     else onCancel();
   };
 
@@ -221,15 +267,28 @@ export function InlineInput({
       ) : (
         <FileIcon path={value} />
       )}
-      <input
-        ref={inputRef}
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        onKeyDown={handleKeyDown}
-        onBlur={handleBlur}
-        className="flex-1 min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border border-neutral-600 outline-none focus:border-[#3CE6AC]"
-        spellCheck={false}
-      />
+      <div className="flex-1 min-w-0">
+        <input
+          ref={inputRef}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value);
+            if (error) setError(null);
+          }}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          aria-invalid={error ? true : undefined}
+          className={`w-full min-w-0 bg-neutral-800 text-neutral-200 text-xs px-1.5 py-0.5 rounded border outline-none ${
+            error ? "border-red-500/70" : "border-neutral-600 focus:border-[#3CE6AC]"
+          }`}
+          spellCheck={false}
+        />
+        {error && (
+          <div className="mt-0.5 text-[10px] text-red-400" role="alert">
+            {error}
+          </div>
+        )}
+      </div>
     </div>
   );
 }
@@ -238,10 +297,12 @@ export function InlineInput({
 
 export function DeleteConfirm({
   name,
+  isFolder,
   onConfirm,
   onCancel,
 }: {
   name: string;
+  isFolder?: boolean;
   onConfirm: () => void;
   onCancel: () => void;
 }) {
@@ -269,7 +330,16 @@ export function DeleteConfirm({
       className="mx-1 my-0.5 p-2 bg-neutral-800 border border-neutral-700 rounded-md text-xs"
     >
       <p className="text-neutral-300 mb-2">
-        Delete <span className="font-medium text-neutral-100">{name}</span>?
+        {isFolder ? (
+          <>
+            Delete folder <span className="font-medium text-neutral-100">{name}</span> and
+            everything inside it?
+          </>
+        ) : (
+          <>
+            Delete <span className="font-medium text-neutral-100">{name}</span>?
+          </>
+        )}
       </p>
       <div className="flex gap-1.5">
         <button

package/src/components/editor/GsapAnimationList.tsx

@@ -61,6 +61,11 @@ export function GsapAnimationList({
 
   return (
     <div className="space-y-2">
+      {animations.length === 0 && (
+        <p className="text-[11px] leading-4 text-neutral-500">
+          No animations on this element yet — add an effect below to animate it.
+        </p>
+      )}
       {animations.map((animation, index) => (
         <AnimationCard
           {...trackedCallbacks}

package/src/components/editor/KeyframeDiamond.tsx

@@ -29,9 +29,11 @@ export const KeyframeDiamond = memo(function KeyframeDiamond({
         e.stopPropagation();
         onClick();
       }}
-      className="flex-shrink-0 p-0.5 transition-opacity hover:opacity-100"
+      className="relative flex-shrink-0 p-0.5 transition-opacity hover:opacity-100 before:absolute before:-inset-1.5 before:content-['']"
       style={{ color, opacity }}
       title={title}
+      aria-label={title}
+      aria-pressed={state === "active"}
     >
       <svg width={size} height={size} viewBox="0 0 10 10">
         {isHold ? (

package/src/components/editor/KeyframeEaseList.tsx

@@ -104,7 +104,8 @@ export function KeyframeEaseList({
             <button
               type="button"
               onClick={() => onToggle(isExpanded ? null : kf.percentage)}
-              className="flex w-full items-center gap-2 px-2 py-1.5 text-left"
+              aria-expanded={isExpanded}
+              className="flex w-full items-center gap-2 px-2 py-1.5 text-left active:scale-[0.99]"
             >
               <span className="text-[10px] font-medium text-neutral-400">{label}</span>
               <span className="ml-auto text-[9px] text-neutral-500">{easeLabel}</span>
@@ -113,7 +114,7 @@ export function KeyframeEaseList({
                 height="8"
                 viewBox="0 0 10 10"
                 fill="currentColor"
-                className={`text-neutral-500 transition-transform ${isExpanded ? "" : "-rotate-90"}`}
+                className={`text-neutral-500 transition-transform duration-150 ${isExpanded ? "" : "-rotate-90"}`}
               >
                 <path d="M2 3l3 4 3-4z" />
               </svg>