@hyperframes/studio 0.8.144 → 0.8.146

package/dist/player.js

@@ -1,10 +1,9 @@
 import {
   Player
-} from "./chunk-G3EDKRZH.js";
-import "./chunk-Y2OHHNM2.js";
-import "./chunk-3GHTHPZD.js";
-import "./chunk-PZ5AY32C.js";
+} from "./chunk-PHGBG7OG.js";
+import "./chunk-PVFBY7KR.js";
+import "./chunk-T43DM7Q6.js";
+import "./chunk-MLKGABMK.js";
 export {
   Player
 };
-//# sourceMappingURL=player.js.map

package/dist/styles/tailwind-preset.js

@@ -1,4 +1,4 @@
-import "../chunk-PZ5AY32C.js";
+import "../chunk-MLKGABMK.js";
 
 // src/styles/tailwind-preset.shared.js
 var studioPreset = {
@@ -47,4 +47,3 @@ var tailwind_preset_default = tailwind_preset_shared_default;
 export {
   tailwind_preset_default as default
 };
-//# sourceMappingURL=tailwind-preset.js.map

package/dist/ui.js

@@ -1,6 +1,6 @@
 import {
   HyperframesLogo
-} from "./chunk-EEXSYY5F.js";
+} from "./chunk-C5BDT7NG.js";
 import {
   Button,
   ContextMenu,
@@ -30,8 +30,8 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-Y2OHHNM2.js";
-import "./chunk-PZ5AY32C.js";
+} from "./chunk-PVFBY7KR.js";
+import "./chunk-MLKGABMK.js";
 export {
   Button,
   ContextMenu,
@@ -63,4 +63,3 @@ export {
   fieldText,
   popupSurface
 };
-//# sourceMappingURL=ui.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.144",
+  "version": "0.8.146",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.144",
-    "@hyperframes/parsers": "0.8.144",
-    "@hyperframes/sdk": "0.8.144",
-    "@hyperframes/player": "0.8.144",
-    "@hyperframes/shader-transitions": "0.8.144",
-    "@hyperframes/studio-server": "0.8.144"
+    "@hyperframes/core": "0.8.146",
+    "@hyperframes/parsers": "0.8.146",
+    "@hyperframes/player": "0.8.146",
+    "@hyperframes/sdk": "0.8.146",
+    "@hyperframes/studio-server": "0.8.146",
+    "@hyperframes/shader-transitions": "0.8.146"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -82,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.144"
+    "@hyperframes/producer": "0.8.146"
   },
   "peerDependencies": {
     "react": "19",

package/src/captions/components/CaptionOverlay.tsx

@@ -408,7 +408,7 @@ export const CaptionOverlay = memo(function CaptionOverlay({ iframeRef }: Captio
       {wordBoxes.length === 0 && model && model.segments.size > 0 && (
         <div className="absolute inset-x-0 top-3 flex justify-center pointer-events-none">
           <span className="px-2.5 py-1 rounded-full bg-black/60 border border-neutral-700 text-2xs text-neutral-300">
-            No captions visible at this frame — scrub to a caption, or select one in the track below
+            No captions visible at this frame. Scrub to a caption, or select one in the track below
           </span>
         </div>
       )}

package/src/captions/hooks/useCaptionSync.ts

@@ -235,7 +235,7 @@ export function useCaptionSync(projectId: string | null) {
       // File exists but is unreadable — previous edits would silently not load.
       useCaptionStore
         .getState()
-        .setSyncError("caption-overrides.json is corrupt — earlier caption edits didn't load");
+        .setSyncError("caption-overrides.json is corrupt, so earlier caption edits didn't load");
     }
   }, []);
 

package/src/components/LinkedSelectionToggle.tsx

@@ -50,8 +50,8 @@ export function LinkedSelectionToggle() {
       <Tooltip
         label={
           linkedSelection
-            ? "Linked Selection on — a click selects both halves (⌥-click for one)"
-            : "Linked Selection off — a click selects one clip"
+            ? "Linked Selection on: a click selects both halves (⌥-click for one)"
+            : "Linked Selection off: a click selects one clip"
         }
       >
         <button

package/src/components/LintModal.tsx

@@ -113,11 +113,7 @@ export function LintModal({
                     : "bg-accent hover:bg-accent-hover text-on-accent"
               }`}
             >
-              {copied
-                ? "Copied!"
-                : copyFailed
-                  ? "Copy failed — check permissions"
-                  : "Copy to Agent"}
+              {copied ? "Copied!" : copyFailed ? "Copy failed. Check permissions" : "Copy to Agent"}
             </button>
           </div>
         )}

package/src/components/MediaPreview.tsx

@@ -23,7 +23,7 @@ function MediaErrorPanel({ name, filePath }: { name: string; filePath: string })
       <span className="text-sm text-neutral-400 font-medium">{name}</span>
       <span className="text-[11px] text-neutral-600 font-mono">{filePath}</span>
       <span className="text-[10px] text-neutral-500">
-        Couldn't load this file — it may be missing or corrupt
+        Couldn't load this file. It may be missing or corrupt
       </span>
     </div>
   );
@@ -110,7 +110,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
       </svg>
       <span className="text-sm text-neutral-400 font-medium">{name}</span>
       <span className="text-[11px] text-neutral-600 font-mono">{filePath}</span>
-      <span className="text-[10px] text-neutral-600">Binary file — preview not available</span>
+      <span className="text-[10px] text-neutral-600">Binary file: preview not available</span>
     </div>
   );
 }

package/src/components/ProjectUnreachableBanner.tsx

@@ -82,7 +82,7 @@ export function ProjectUnreachableBanner({ projectId }: ProjectUnreachableBanner
           </button>
         </>
       ) : (
-        <span>Couldn&apos;t open this project — it may have been renamed, moved, or deleted.</span>
+        <span>Couldn&apos;t open this project. It may have been renamed, moved, or deleted.</span>
       )}
     </div>
   );

package/src/components/StudioLeftPanels.tsx

@@ -75,8 +75,8 @@ export const StudioLeftPanels = memo(function StudioLeftPanels({
         return;
       }
       await waitForPendingDomEditSaves();
-      const { format, quality, fps } = getPersistedRenderSettings();
-      await renderQueue.startRender({ composition: comp, format, quality, fps });
+      const { format, quality, fps, gpu } = getPersistedRenderSettings();
+      await renderQueue.startRender({ composition: comp, format, quality, fps, gpu });
     },
     [renderQueue, waitForPendingDomEditSaves],
   );

package/src/components/StudioRightPanels.tsx

@@ -174,7 +174,7 @@ export const StudioRightPanels = memo(function StudioRightPanels({
     // timeline offers that write as a mute. Checked here as well as in the panel
     // because the button is not the only caller.
     if (!canHideSelections(domEditGroupSelections)) {
-      showToast("Audio can't be hidden — use the group's own controls", "info");
+      showToast("Audio can't be hidden. Use the group's own controls", "info");
       return;
     }
     const { elements } = usePlayerStore.getState();

package/src/components/TimelineToolbar.test.tsx

@@ -82,7 +82,7 @@ describe("TimelineToolbar — adaptive thumbnails", () => {
   it("keeps a user-controlled hidden mode as the rollback path", () => {
     const { host, root } = renderToolbar();
     const button = host.querySelector<HTMLButtonElement>(
-      'button[aria-label="Hide thumbnails — labels only"]',
+      'button[aria-label="Hide thumbnails: labels only"]',
     );
     if (!button) throw new Error("thumbnail toggle not rendered");
 
@@ -90,7 +90,7 @@ describe("TimelineToolbar — adaptive thumbnails", () => {
 
     expect(usePlayerStore.getState().thumbnailMode).toBe("hidden");
     expect(button.getAttribute("aria-label")).toBe(
-      "Show thumbnails — posters stay visible; richer previews appear on interaction",
+      "Show thumbnails: posters stay visible; richer previews appear on interaction",
     );
     act(() => root.unmount());
   });

package/src/components/TimelineToolbar.tsx

@@ -235,8 +235,8 @@ export const TimelineToolbar = memo(function TimelineToolbar({
           <Tooltip
             label={
               rippleEditEnabled
-                ? "Ripple on — keeps the main track gapless"
-                : "Ripple off — deleting a main-track clip leaves a gap"
+                ? "Ripple on: keeps the main track gapless"
+                : "Ripple off: deleting a main-track clip leaves a gap"
             }
           >
             <button
@@ -465,16 +465,16 @@ export const TimelineToolbar = memo(function TimelineToolbar({
           <Tooltip
             label={
               thumbnailsVisible
-                ? "Hide thumbnails — labels only"
-                : "Show thumbnails — posters stay visible; richer previews appear on interaction"
+                ? "Hide thumbnails: labels only"
+                : "Show thumbnails: posters stay visible; richer previews appear on interaction"
             }
           >
             <button
               type="button"
               aria-label={
                 thumbnailsVisible
-                  ? "Hide thumbnails — labels only"
-                  : "Show thumbnails — posters stay visible; richer previews appear on interaction"
+                  ? "Hide thumbnails: labels only"
+                  : "Show thumbnails: posters stay visible; richer previews appear on interaction"
               }
               aria-pressed={thumbnailsVisible}
               onClick={() => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive")}

package/src/components/editor/AnimationCard.tsx

@@ -217,7 +217,7 @@ export const AnimationCard = memo(function AnimationCard({
           {typeof animation.position === "number"
             ? `${parseFloat(animation.position.toFixed(3))}s`
             : animation.position}{" "}
-          – {typeof endTime === "number" ? `${parseFloat(endTime.toFixed(3))}s` : endTime}
+          to {typeof endTime === "number" ? `${parseFloat(endTime.toFixed(3))}s` : endTime}
         </span>
         <span
           className={`ml-auto text-[10px] ${flat ? "text-panel-text-3" : "text-neutral-500"}`}
@@ -256,7 +256,7 @@ export const AnimationCard = memo(function AnimationCard({
                         clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)",
                       }}
                     />
-                    Keyframed — click a segment below to edit its curve
+                    Keyframed: click a segment below to edit its curve
                   </p>
                 )}
                 {runEase && runEase !== "none" && (
@@ -273,7 +273,7 @@ export const AnimationCard = memo(function AnimationCard({
                   setTimeout(() => setCopied(false), 1500);
                 }}
                 className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
-                title="Copy description to clipboard — paste into agent prompts"
+                title="Copy description for agent prompts"
               >
                 {copied ? "Copied" : "Copy"}
               </button>

package/src/components/editor/AnimationCardParts.tsx

@@ -93,7 +93,7 @@ export function PropertyRow({
             onClick={() => onCommit(isVisible ? "hidden" : "visible")}
             className="shrink-0 rounded-full transition-colors duration-200 relative"
             style={{ width: 28, height: 16, background: isVisible ? P.accent : P.borderInput }}
-            title={isVisible ? "Visible — click to hide" : "Hidden — click to show"}
+            title={isVisible ? "Visible: click to hide" : "Hidden: click to show"}
           >
             <span
               className="absolute top-[2px] left-0 rounded-full transition-transform duration-200"

package/src/components/editor/BlockParamsPanel.tsx

@@ -58,7 +58,7 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
         if (matches === 0) {
           setCommitState({
             tone: "error",
-            message: `Couldn't find the current value in ${compositionPath} — it may have been edited by hand.`,
+            message: `Couldn't find the current value in ${compositionPath}. It may have been edited by hand.`,
           });
           trackBlockParamCommit({ tone: "error", blockName, key });
           return;
@@ -73,7 +73,7 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
         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.`,
+            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;
@@ -171,7 +171,7 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
         )}
         {!fileManager && params.length > 0 && (
           <div className="text-[10px] text-warning-ink">
-            Block params can't be edited here — no project file access.
+            Block params can't be edited here: no project file access.
           </div>
         )}
         {params.map((param) => (

package/src/components/editor/ComputedTweenNotice.tsx

@@ -17,14 +17,14 @@ export function ComputedTweenNotice({
   if (editability === "source") {
     return (
       <div className="rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400">
-        Computed value — edit it in the Code tab.
+        Computed value. Edit it in the Code tab.
       </div>
     );
   }
   const source = provenance?.fn ? `${provenance.fn}()` : "a loop";
   return (
     <div className="flex items-center justify-between gap-2 rounded-md border border-neutral-800 bg-neutral-900/50 px-2 py-1.5 text-[9px] text-neutral-400">
-      <span>Generated by {source} — not directly editable.</span>
+      <span>Generated by {source}, not directly editable.</span>
       {onUnroll && (
         <button
           type="button"

package/src/components/editor/FileTree.tsx

@@ -293,7 +293,7 @@ export const FileTree = memo(function FileTree({
           )}
         {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" : ""}.
+            No files yet{hasFileOps ? ". Use + above to create one" : ""}.
           </div>
         )}
         {children.map((child) =>

package/src/components/editor/GsapAnimationList.tsx

@@ -63,7 +63,7 @@ export function GsapAnimationList({
     <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.
+          No animations on this element yet. Add an effect below to animate it.
         </p>
       )}
       {animations.map((animation, index) => (

package/src/components/editor/GsapAnimationSection.tsx

@@ -25,8 +25,8 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
     <Section title="Animation" icon={<Film size={15} />}>
       {multipleTimelines && (
         <p className="mb-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
-          This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss
-          — consolidate into a single timeline to enable editing.
+          This file has multiple GSAP timelines. Animation editing is disabled to prevent data loss.
+          Consolidate into a single timeline to enable editing.
         </p>
       )}
       {unsupportedTimelinePattern && (

package/src/components/editor/LayersPanel.test.ts

@@ -9,7 +9,7 @@ import type { DomEditLayerItem } from "./domEditingTypes";
 import { createRafThrottle, LayersPanel, sortLayersByZIndex } from "./LayersPanel";
 import { isLayerDraggable } from "./useLayerDrag";
 import { liveTime } from "../../player";
-import { sceneSwapFor } from "../../player/sceneSwap";
+import { announcePreviewDocumentLoaded, sceneSwapFor } from "../../player/sceneSwap";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -284,12 +284,12 @@ describe("LayersPanel preview promotion", () => {
     mocks.collect.mockClear();
 
     act(() => {
-      a.dispatchEvent(new Event("load"));
+      announcePreviewDocumentLoaded(a);
     });
     expect(mocks.collect).not.toHaveBeenCalled();
 
     act(() => {
-      b.dispatchEvent(new Event("load"));
+      announcePreviewDocumentLoaded(b);
     });
     expect(collectedRootIds()).toEqual(["b"]);
   });
@@ -325,7 +325,7 @@ describe("LayersPanel preview promotion", () => {
     mocks.previewIframeRef.current = iframe;
     usePreviewIframeStore.setState({ iframe });
     act(() => root.render(createElement(LayersPanel)));
-    act(() => void iframe.dispatchEvent(new Event("load")));
+    act(() => void announcePreviewDocumentLoaded(iframe));
 
     const rows = [...host.querySelectorAll("[data-layer-index]")];
     expect(rows).toHaveLength(2);

package/src/components/editor/LayersPanel.tsx

@@ -89,8 +89,8 @@ interface CollapsedState {
   [key: string]: boolean;
 }
 
-/** Studio state the panel reads; passed by hosts outside Studio's providers. Keep previewIframeRef stable,
- * and bump refreshKey when the preview document is rebuilt without an iframe load. */
+/** Studio state the panel reads; passed by hosts outside Studio's providers. Keep previewIframeRef stable;
+ * a host with its own player calls announcePreviewDocumentLoaded on each new page, or bumps refreshKey. */
 export type LayersPanelHost = Pick<
   StudioShellValue,
   "previewIframeRef" | "activeCompPath" | "showToast"

package/src/components/editor/OffCanvasIndicators.tsx

@@ -127,7 +127,7 @@ export function OffCanvasIndicators({
                 aria-label={`Select off-canvas element ${r.key}`}
                 className="pointer-events-auto absolute inset-0 border-2 border-dashed border-studio-accent/10 rounded-md cursor-pointer hover:border-studio-accent hover:bg-studio-accent/10 transition-colors"
                 style={clipOutside ? { clipPath: clipOutside } : undefined}
-                title={`Off-canvas: ${r.key} — click to select`}
+                title={`Off-canvas: ${r.key}. Click to select`}
                 onClick={handleClick}
                 onKeyDown={(e) => {
                   if (e.key === "Enter" || e.key === " ") {

package/src/components/editor/PromotableControl.tsx

@@ -50,7 +50,7 @@ export function PromotableControl({
   useEffect(() => {
     if (danglingId != null) {
       console.warn(
-        `[hyperframes] Control is bound to variable "${danglingId}", but no such declaration exists. The element still carries the binding on disk — re-declare the variable or unbind the element.`,
+        `[hyperframes] Control is bound to variable "${danglingId}", but no such declaration exists. The element still carries the binding on disk. Re-declare the variable or unbind the element.`,
       );
     }
   }, [danglingId]);

package/src/components/editor/PropertyPanel.tsx

@@ -240,13 +240,13 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
     navigator.clipboard
       .writeText(text)
       .then(() => {
-        showToast(`Copied element info for ${element.label} — paste into any AI agent`, "info");
+        showToast(`Copied element info for ${element.label}. Paste it into any AI agent`, "info");
         setClipboardCopied(true);
         clearTimeout(clipboardTimerRef.current);
         clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
       })
       .catch(() => {
-        showToast("Couldn't copy to the clipboard — check browser permissions", "error");
+        showToast("Couldn't copy to the clipboard. Check browser permissions", "error");
       });
   };
 

package/src/components/editor/SnapToolbar.tsx

@@ -160,8 +160,8 @@ export const SnapToolbar = memo(function SnapToolbar() {
           }}
           title={
             prefs.gridVisible
-              ? "Grid visible (G) — right-click for spacing options"
-              : "Grid hidden (G) — right-click for spacing options"
+              ? "Grid visible (G). Right-click for spacing options"
+              : "Grid hidden (G). Right-click for spacing options"
           }
           aria-label="Toggle grid"
         >

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

@@ -5,6 +5,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { studioEditLifecycle, type StudioWriteResult } from "../../webmcp/writeCoordinator";
 import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { announcePreviewDocumentLoaded } from "../../player/sceneSwap";
 import { TopologyLens } from "./TopologyLens";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -259,7 +260,7 @@ describe("TopologyLens", () => {
     mount();
     begin();
 
-    act(() => iframe?.dispatchEvent(new Event("load")));
+    act(() => announcePreviewDocumentLoaded(iframe!));
     expect(host?.querySelector('[data-topology-lens="hidden"]')).not.toBeNull();
 
     begin();
@@ -286,7 +287,7 @@ describe("TopologyLens", () => {
     root = null;
 
     expect(vi.getTimerCount()).toBe(1);
-    expect(removeListener).toHaveBeenCalledWith("load", expect.any(Function));
+    expect(removeListener).toHaveBeenCalledWith("hf-preview-document-loaded", expect.any(Function));
     expect(studioEditLifecycle.getSnapshot()).toMatchObject({ phase: "dispatching" });
     act(() => vi.advanceTimersByTime(0));
     expect(vi.getTimerCount()).toBe(0);
@@ -312,10 +313,10 @@ describe("TopologyLens", () => {
       ref.current = b;
       usePreviewIframeStore.getState().setIframe(b);
     });
-    act(() => a.dispatchEvent(new Event("load")));
+    act(() => announcePreviewDocumentLoaded(a));
     expect(host.querySelector('[data-topology-lens="hidden"]')).toBeNull();
 
-    act(() => b.dispatchEvent(new Event("load")));
+    act(() => announcePreviewDocumentLoaded(b));
     expect(host.querySelector('[data-topology-lens="hidden"]')).not.toBeNull();
     usePreviewIframeStore.setState({ iframe: null });
   });

package/src/components/editor/Transform3DCube.tsx

@@ -308,7 +308,7 @@ export function Transform3DCube({
           onClick={onKeyframe}
           title={
             keyframed
-              ? "3D transform is keyframed — click a field diamond to add keyframes"
+              ? "3D transform is keyframed. Click a field diamond to add keyframes"
               : "Keyframe the 3D transform (animate it over time)"
           }
           aria-label="Keyframe 3D transform"

package/src/components/editor/gsapAnimationConstants.ts

@@ -8,7 +8,7 @@ export const METHOD_LABELS: Record<string, string> = {
 };
 
 export const METHOD_TOOLTIPS: Record<string, string> = {
-  set: "Instantly snap to these values — no transition",
+  set: "Instantly snap to these values, no transition",
   to: "Smoothly animate the element to these target values",
   from: "Element starts at these values and transitions to its normal state",
   fromTo: "Animate from one state to another",
@@ -83,7 +83,7 @@ export const PROP_TOOLTIPS: Record<string, string> = {
   perspective:
     "3D depth context for child elements; set it on a parent when rotating children in 3D",
   transformPerspective:
-    "3D depth for THIS element's own X/Y rotation — lower = stronger perspective (try 600–1000)",
+    "3D depth for THIS element's own X/Y rotation: lower = stronger perspective (try 600 to 1000)",
   transformOrigin: "Pivot point for transforms, for example center center or 50% 50%",
   width: "Element width",
   height: "Element height",

package/src/components/editor/gsapAnimationHelpers.test.ts

@@ -109,7 +109,7 @@ describe("buildTweenSummary", () => {
     const s = buildTweenSummary(
       anim({ method: "fromTo", fromProperties: {}, properties: { scale: 2 } }),
     );
-    expect(s).toContain("from [—]");
+    expect(s).toContain("from [none]");
   });
 
   it("handles no properties", () => {

package/src/components/editor/gsapAnimationHelpers.ts

@@ -64,7 +64,7 @@ export function buildTweenSummary(animation: GsapAnimation): string {
       const label = (PROP_LABELS[p] ?? p).toLowerCase();
       return `${label} ${formatPropValue(p, v)}`;
     });
-    const fromText = fromDescs.length > 0 ? fromDescs.join(", ") : "—";
+    const fromText = fromDescs.length > 0 ? fromDescs.join(", ") : "none";
     return `Starting at ${pos}s, over ${dur}s, ${target} animates from [${fromText}] to [${propText}] using a ${ease.toLowerCase()} curve.`;
   }
   return `Starting at ${pos}s, over ${dur}s, animate ${target}'s ${propText} using a ${ease.toLowerCase()} curve.`;

package/src/components/editor/propertyPanelColorGradingControls.tsx

@@ -423,7 +423,7 @@ export function ColorGradingControls({
                   void actions
                     .importLut(files, onImportAssets, () => track("button", "Import LUT"))
                     .catch(() =>
-                      setLutImportError("LUT import failed — check the .cube file and try again."),
+                      setLutImportError("LUT import failed. Check the .cube file and try again."),
                     )
                     .finally(() => setLutImporting(false));
                   event.currentTarget.value = "";

package/src/components/editor/propertyPanelFill.tsx

@@ -135,7 +135,7 @@ export function ImageFillField({
         commitImage(toProjectRootAssetPath(nextImage), true);
       }
     } catch {
-      setUploadError("Upload failed — check the file and try again.");
+      setUploadError("Upload failed. Check the file and try again.");
     } finally {
       setUploading(false);
     }

package/src/components/editor/propertyPanelFlatMotionSection.tsx

@@ -100,7 +100,7 @@ export function FlatTimingRow({
       {cell("Duration", formatTimingValue(duration), commitDuration)}
       {derived && (
         <p className="col-span-3 mt-1 text-[10px] leading-snug text-panel-text-3">
-          Inferred from this element's animation — edit to pin an explicit clip range.
+          Inferred from this element's animation. Edit to pin an explicit clip range.
         </p>
       )}
     </div>
@@ -150,7 +150,7 @@ export function FlatMotionSection({
           {multipleTimelines && (
             <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
               This file has multiple GSAP timelines. Animation editing is disabled to prevent data
-              loss — consolidate into a single timeline to enable editing.
+              loss. Consolidate into a single timeline to enable editing.
             </p>
           )}
           {unsupportedTimelinePattern && (
@@ -195,7 +195,7 @@ export function motionSectionLabel(args: {
   if (args.timingOnly) {
     return {
       title: "Timing",
-      summary: `${formatTimingValue(args.start)} – ${formatTimingValue(args.start + args.duration)}`,
+      summary: `${formatTimingValue(args.start)} to ${formatTimingValue(args.start + args.duration)}`,
     };
   }
   return {

package/src/components/editor/propertyPanelFlatPrimitives.tsx

@@ -72,7 +72,7 @@ export function FlatRow({
           <button
             type="button"
             data-flat-row-reset="true"
-            title="Remove — fall back to default"
+            title="Remove and fall back to default"
             onClick={() => {
               track("button", `Reset ${label}`);
               onReset();
@@ -556,7 +556,7 @@ export function FlatSlider({
             <button
               type="button"
               data-flat-slider-reset="true"
-              title="Remove — fall back to default"
+              title="Remove and fall back to default"
               disabled={disabled}
               onClick={() => {
                 track("button", `Reset ${label}`);

package/src/components/editor/propertyPanelFlatSelectRow.tsx

@@ -90,7 +90,7 @@ export function FlatSelectRow({
           <button
             type="button"
             data-flat-select-reset="true"
-            title="Remove — fall back to default"
+            title="Remove and fall back to default"
             disabled={disabled}
             onClick={() => {
               track("button", `Reset ${trackName}`);

package/src/components/editor/propertyPanelFlatTextSection.tsx

@@ -35,7 +35,7 @@ const ALIGN_OPTIONS = [
 ];
 
 const CASE_OPTIONS = [
-  { key: "none", label: "none", node: "–" },
+  { key: "none", label: "none", node: "None" },
   { key: "uppercase", label: "uppercase", node: "AG" },
   { key: "lowercase", label: "lowercase", node: "ag" },
   { key: "capitalize", label: "capitalize", node: "Ag" },