@hyperframes/studio 0.8.104 → 0.8.106

package/src/components/dock/dock.css

@@ -1,9 +1,17 @@
 @import "dockview-react/dist/styles/dockview.css";
 
+.dv-shell:has(.hf-dock) {
+  /* dockview's runtime stylesheet pins `color-scheme: dark` on its theme class, which sits on
+   * the shell around the dock. */
+  color-scheme: inherit;
+}
+
 .hf-dock {
   --dv-group-view-background-color: var(--panel-card-bg);
   --dv-tabs-and-actions-container-background-color: var(--panel-strip-bg);
   --dv-tabs-and-actions-container-height: 36px;
+  --dv-icon-hover-background-color: var(--color-hover);
+  --dv-tabs-container-scrollbar-color: var(--color-text-muted);
   /* The fill paints the shown tab, so every tab state is transparent. */
   --dv-activegroup-visiblepanel-tab-background-color: transparent;
   --dv-activegroup-hiddenpanel-tab-background-color: transparent;
@@ -178,7 +186,7 @@
 }
 
 .dv-groupview:hover .hf-dock-strip-actions {
-  opacity: 0.5;
+  opacity: 0.8;
 }
 
 .hf-dock-strip-actions:hover,

package/src/components/editor/AnimationCard.tsx

@@ -201,7 +201,7 @@ export const AnimationCard = memo(function AnimationCard({
         className="flex w-full items-center gap-2 py-1.5 active:scale-[0.99]"
       >
         <span
-          className="rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent"
+          className="rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-accent-ink"
           title={METHOD_TOOLTIPS[animation.method]}
         >
           {methodLabel}
@@ -354,7 +354,7 @@ export const AnimationCard = memo(function AnimationCard({
 
             {animation.method === "fromTo" && (
               <div className="space-y-1">
-                <p className="text-[9px] font-semibold uppercase tracking-wider text-orange-400/70">
+                <p className="text-[9px] font-semibold uppercase tracking-wider text-warning-ink">
                   From
                 </p>
                 <div className="space-y-1.5">
@@ -378,14 +378,14 @@ export const AnimationCard = memo(function AnimationCard({
                     onAdd={(prop) => onAddFromProperty?.(animation.id, prop)}
                     onOpen={() => setAddingFromProp(true)}
                     onClose={() => setAddingFromProp(false)}
-                    buttonClassName="text-[11px] font-medium text-orange-400/70 transition-colors hover:text-orange-300"
+                    buttonClassName="text-[11px] font-medium text-warning-ink transition-colors hover:text-text-0"
                   />
                 </div>
               </div>
             )}
 
             {animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && (
-              <p className="text-[9px] font-semibold uppercase tracking-wider text-panel-accent/70">
+              <p className="text-[9px] font-semibold uppercase tracking-wider text-accent-ink">
                 To
               </p>
             )}
@@ -455,7 +455,7 @@ export const AnimationCard = memo(function AnimationCard({
               <button
                 type="button"
                 onClick={() => onDeleteAnimation(animation.id)}
-                className="ml-auto text-[11px] font-medium text-red-400 transition-colors hover:text-red-300"
+                className="ml-auto text-[11px] font-medium rounded-sm text-danger-ink transition-colors hover:bg-danger/15"
                 title="Remove this animation"
               >
                 Remove

package/src/components/editor/AnimationCardParts.tsx

@@ -46,7 +46,7 @@ function RemoveButton({ onClick, title }: { onClick: () => void; title: string }
     <button
       type="button"
       onClick={onClick}
-      className="relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400 active:scale-[0.95]"
+      className="relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-danger-ink active:scale-[0.95]"
       title={title}
       aria-label={title}
     >

package/src/components/editor/BlockParamsPanel.tsx

@@ -170,7 +170,7 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
           <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">
+          <div className="text-[10px] text-warning-ink">
             Block params can't be edited here — no project file access.
           </div>
         )}
@@ -189,12 +189,12 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
           </div>
         )}
         {commitState.tone === "saved" && (
-          <div className="text-[10px] text-emerald-500/90" role="status">
+          <div className="text-[10px] text-accent-ink" role="status">
             Saved to {compositionPath}
           </div>
         )}
         {commitState.tone === "error" && (
-          <div className="text-[10px] text-red-400" role="alert">
+          <div className="text-[10px] text-danger-ink" role="alert">
             {commitState.message}
           </div>
         )}

package/src/components/editor/BorderRadiusEditor.tsx

@@ -63,6 +63,9 @@ export function BorderRadiusEditor({
   }, [linked, uniform, tl, onCommit]);
 
   const path = buildRoundedRectPath(PREVIEW_W, PREVIEW_H, sTL, sTR, sBR, sBL);
+  const dotFill = linked
+    ? "fill-[light-dark(oklch(0.5_0.2_260),#3b82f6)]"
+    : "fill-[light-dark(oklch(0.55_0.2_294),#a78bfa)]";
 
   return (
     <div className="space-y-3">
@@ -73,21 +76,11 @@ export function BorderRadiusEditor({
           viewBox={`0 0 ${PREVIEW_W} ${PREVIEW_H}`}
           className="shrink-0"
         >
-          <path
-            d={path}
-            fill="rgba(255,255,255,0.06)"
-            stroke="rgba(255,255,255,0.24)"
-            strokeWidth={1.5}
-          />
-          <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"}
-          />
-          <circle cx={sBL} cy={PREVIEW_H - sBL} r={3} fill={linked ? "#3b82f6" : "#a78bfa"} />
+          <path d={path} className="fill-text-0/[0.06] stroke-text-0/25" strokeWidth={1.5} />
+          <circle cx={sTL} cy={sTL} r={3} className={dotFill} />
+          <circle cx={PREVIEW_W - sTR} cy={sTR} r={3} className={dotFill} />
+          <circle cx={PREVIEW_W - sBR} cy={PREVIEW_H - sBR} r={3} className={dotFill} />
+          <circle cx={sBL} cy={PREVIEW_H - sBL} r={3} className={dotFill} />
         </svg>
 
         <button

package/src/components/editor/CanvasContextMenu.tsx

@@ -257,7 +257,7 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
       {hasDelete && (
         <button
           type="button"
-          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
+          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 cursor-pointer text-left"
           onPointerDown={(e) => {
             if (e.button !== 0) return;
             e.preventDefault();

package/src/components/editor/ComputedTweenNotice.tsx

@@ -29,7 +29,7 @@ export function ComputedTweenNotice({
         <button
           type="button"
           onClick={onUnroll}
-          className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-panel-accent hover:bg-neutral-800"
+          className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-accent-ink hover:bg-neutral-800"
           title="Rewrite the helper/loop into explicit tweens so this keyframe edits directly"
         >
           Unroll to edit

package/src/components/editor/DomEditOverlay.tsx

@@ -31,6 +31,8 @@ import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
 import { CanvasContextMenu } from "./CanvasContextMenu";
 import { useInlineTextEditing } from "./useInlineTextEditing";
 import { usePreviewReadOnly } from "./previewReadOnlyContext";
+import { useMountEffect } from "../../hooks/useMountEffect";
+import { noteStudioManualEditSave as noteSave } from "./manualEditsDom";
 import type { ZOrderAction, ZOrderPatch } from "./canvasContextMenuZOrder";
 import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
 import { logSelect } from "../../utils/selectDebug";
@@ -193,16 +195,34 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     onTextEditingChangeRef.current?.(true);
     return () => onTextEditingChangeRef.current?.(false);
   }, [inlineText.editing]);
+  // Each canvas save is counted before it starts, so a reload requested earlier loads again.
   const onPathOffsetCommitRef = useRef(onPathOffsetCommit);
-  onPathOffsetCommitRef.current = onPathOffsetCommit;
+  onPathOffsetCommitRef.current = (sel, ...rest) => {
+    noteSave(sel.element);
+    return onPathOffsetCommit(sel, ...rest);
+  };
   const onGroupPathOffsetCommitRef = useRef(onGroupPathOffsetCommit);
-  onGroupPathOffsetCommitRef.current = onGroupPathOffsetCommit;
+  onGroupPathOffsetCommitRef.current = (updates) => {
+    if (updates[0]) noteSave(updates[0].selection.element);
+    return onGroupPathOffsetCommit(updates);
+  };
   const onBoxSizeCommitRef = useRef(onBoxSizeCommit);
-  onBoxSizeCommitRef.current = onBoxSizeCommit;
+  onBoxSizeCommitRef.current = (sel, ...rest) => {
+    noteSave(sel.element);
+    return onBoxSizeCommit(sel, ...rest);
+  };
   const onRotationCommitRef = useRef(onRotationCommit);
-  onRotationCommitRef.current = onRotationCommit;
+  onRotationCommitRef.current = (sel, next) => {
+    noteSave(sel.element);
+    return onRotationCommit(sel, next);
+  };
   const onStyleCommitRef = useRef(onStyleCommit);
-  onStyleCommitRef.current = onStyleCommit;
+  onStyleCommitRef.current =
+    onStyleCommit &&
+    ((property, value) => {
+      if (selectionRef.current) noteSave(selectionRef.current.element);
+      return onStyleCommit(property, value);
+    });
   const onBlockedMoveRef = useRef(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;
   const onManualDragStartRef = useRef(onManualDragStart);
@@ -282,6 +302,17 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   useEffect(() => {
     if (readOnly) gestures.clearPointerState(selectionRef);
   }, [gestures, readOnly, selectionRef]);
+  // A gesture that loses its pointer, the window or the overlay is cancelled, so its mark goes too.
+  const cancelGestureRef = useRef(() => {});
+  cancelGestureRef.current = () => gestures.clearPointerState(selectionRef);
+  useMountEffect(() => {
+    const cancel = () => cancelGestureRef.current();
+    window.addEventListener("blur", cancel);
+    return () => {
+      window.removeEventListener("blur", cancel);
+      cancel();
+    };
+  });
 
   // Arrow-key nudge (1px, Shift = 10px) — commits through the same
   // path-offset callbacks as a drag, one undo entry per key burst.
@@ -463,6 +494,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       onPointerLeave={() => onCanvasPointerLeaveRef.current()}
       onPointerUp={marquee.onPointerUp}
       onPointerCancel={marquee.onPointerCancel}
+      onLostPointerCapture={() => cancelGestureRef.current()}
       onContextMenu={hostInput ? undefined : handleContextMenu}
     >
       {!hostInput && hoverSelection && hoverRect && compRect.width > 0 && (

package/src/components/editor/DomEditRotateHandle.tsx

@@ -38,7 +38,7 @@ export function DomEditRotateHandle({
       aria-label="Rotate selection"
       onPointerDown={onStartRotate}
     >
-      <span className="pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-studio-accent shadow-[0_0_3px_rgba(0,0,0,0.45)]">
+      <span className="pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-accent-ink shadow-[0_0_3px_rgba(0,0,0,0.45)]">
         <svg
           width="11"
           height="11"

package/src/components/editor/EaseCurveSection.tsx

@@ -42,7 +42,6 @@ const VMIN = -HR / S; // bottom of visible view (undershoot headroom)
 // of snapping to the view edge; the handle DOT is still clampView'd into view.
 const DRAG_VMAX = 2;
 const DRAG_VMIN = -1;
-const ACCENT = "#3CE6AC";
 
 // Figma-style ease-type dropdown: the current ease (glyph + name) as a button
 // that opens the preset grid in a popover. This is where a preset is selected —
@@ -130,7 +129,7 @@ function EaseTypeDropdown({
         aria-expanded={open}
         aria-controls={open ? menuId : undefined}
         onClick={() => setOpen((prev) => !prev)}
-        className="flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/20 px-2 py-1.5 text-left transition-colors hover:border-white/20"
+        className="flex w-full items-center gap-2 rounded-md border border-border bg-input px-2 py-1.5 text-left transition-colors hover:border-border-strong"
       >
         <MiniCurveSvg ease={ease} active size={16} />
         <span className="text-[11px] text-neutral-200">{label}</span>
@@ -151,7 +150,7 @@ function EaseTypeDropdown({
           role="menu"
           aria-label={`${MODE_LABELS[kind]} ease presets`}
           onKeyDown={handleMenuKeyDown}
-          className="absolute inset-x-0 top-full z-20 mt-1 rounded-md border border-white/10 bg-neutral-900 p-2 shadow-xl"
+          className="absolute inset-x-0 top-full z-20 mt-1 rounded-md border border-border bg-raised p-2 shadow-xl"
         >
           <EasePresetGrid
             kind={kind}
@@ -407,7 +406,7 @@ export function EaseCurveSection({
       {showGraph ? (
         <>
           <div
-            className="mx-auto overflow-hidden rounded-md border border-white/5 bg-black/20"
+            className="mx-auto overflow-hidden rounded-md border border-border bg-input"
             style={{ aspectRatio: `${SVGW} / ${SVGH}`, width: "100%", maxWidth: 230 }}
           >
             <svg
@@ -429,7 +428,7 @@ export function EaseCurveSection({
                   y1={top}
                   x2={xToSvg(q)}
                   y2={bottom}
-                  stroke="white"
+                  className="stroke-text-0"
                   strokeOpacity="0.05"
                   strokeWidth="1"
                 />
@@ -441,7 +440,7 @@ export function EaseCurveSection({
                   y1={yToSvg(q)}
                   x2={right}
                   y2={yToSvg(q)}
-                  stroke="white"
+                  className="stroke-text-0"
                   strokeOpacity="0.05"
                   strokeWidth="1"
                 />
@@ -453,7 +452,7 @@ export function EaseCurveSection({
                 width={S}
                 height={bottom - top}
                 fill="none"
-                stroke="white"
+                className="stroke-text-0"
                 strokeOpacity="0.1"
                 strokeWidth="1"
               />
@@ -463,7 +462,7 @@ export function EaseCurveSection({
                 y1={a0.y}
                 x2={a1.x}
                 y2={a1.y}
-                stroke="white"
+                className="stroke-text-0"
                 strokeOpacity="0.08"
                 strokeWidth="1"
                 strokeDasharray="3 4"
@@ -476,8 +475,7 @@ export function EaseCurveSection({
                     y1={a0.y}
                     x2={p1.x}
                     y2={p1.y}
-                    stroke={ACCENT}
-                    strokeOpacity="0.5"
+                    className="stroke-accent-ink"
                     strokeWidth="1.5"
                   />
                   <line
@@ -485,8 +483,7 @@ export function EaseCurveSection({
                     y1={a1.y}
                     x2={p2.x}
                     y2={p2.y}
-                    stroke={ACCENT}
-                    strokeOpacity="0.5"
+                    className="stroke-accent-ink"
                     strokeWidth="1.5"
                   />
                 </>
@@ -495,13 +492,13 @@ export function EaseCurveSection({
               <path
                 d={curvePath}
                 fill="none"
-                stroke={ACCENT}
+                className="stroke-accent-ink"
                 strokeWidth="2.5"
                 strokeLinecap="round"
               />
               {/* Anchors at (0,0) and (1,1) */}
-              <circle cx={a0.x} cy={a0.y} r="3" fill={ACCENT} />
-              <circle cx={a1.x} cy={a1.y} r="3" fill={ACCENT} />
+              <circle cx={a0.x} cy={a0.y} r="3" className="fill-accent-ink" />
+              <circle cx={a1.x} cy={a1.y} r="3" className="fill-accent-ink" />
               {/* Draggable control handles (large transparent hit area + visible dot) */}
               {showHandles &&
                 [["p1", p1] as const, ["p2", p2] as const].map(([key, pt]) => (
@@ -518,7 +515,7 @@ export function EaseCurveSection({
                       aria-valuemax={1}
                       aria-valuenow={key === "p1" ? x1 : x2}
                       aria-valuetext={`x ${key === "p1" ? x1 : x2}, y ${key === "p1" ? y1 : y2}`}
-                      className="cursor-grab stroke-transparent outline-hidden active:cursor-grabbing focus-visible:stroke-white focus-visible:stroke-[2px]"
+                      className="cursor-grab stroke-transparent outline-hidden active:cursor-grabbing focus-visible:stroke-text-0 focus-visible:stroke-[2px]"
                       onPointerDown={(e) => handlePointerDown(key, e)}
                       onKeyDown={(event) => handleKeyDown(key, event)}
                       onPointerEnter={() => setHover(key)}
@@ -528,10 +525,8 @@ export function EaseCurveSection({
                       cx={pt.x}
                       cy={pt.y}
                       r={hover === key || draggingRef.current === key ? 7 : 5.5}
-                      fill="#0a0a1a"
-                      stroke={ACCENT}
                       strokeWidth="2.5"
-                      className="pointer-events-none transition-[r]"
+                      className="pointer-events-none fill-input stroke-accent-ink transition-[r]"
                     />
                   </g>
                 ))}

package/src/components/editor/EaseModeControls.tsx

@@ -59,7 +59,7 @@ export const EasePresetGrid = function EasePresetGrid({
             <MiniCurveSvg ease={preset.ease} active={isActive} />
             <span
               className={`text-center text-[8px] leading-none ${
-                isActive ? "text-panel-accent" : "text-neutral-500"
+                isActive ? "text-accent-ink" : "text-neutral-500"
               }`}
             >
               {preset.label}
@@ -80,7 +80,7 @@ export function EaseModeToggle({
 }) {
   return (
     <div
-      className="mb-2 grid grid-cols-3 rounded-md bg-black/20 p-0.5"
+      className="mb-2 grid grid-cols-3 rounded-md bg-press p-0.5"
       role="radiogroup"
       aria-label="Ease editor mode"
     >

package/src/components/editor/EaseParamFields.tsx

@@ -93,17 +93,17 @@ export function EaseBezierField({
             }
           }}
           onBlur={(event) => commit(event.currentTarget.value)}
-          className={`w-full rounded border bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${
+          className={`w-full rounded border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden ${
             error
-              ? "border-red-500/70 focus:border-red-400"
-              : "border-white/10 focus:border-panel-accent/50"
+              ? "border-danger-ink/70 focus:border-danger-ink"
+              : "border-border focus:border-panel-accent/50"
           }`}
         />
       </div>
       <p
         id={errorId}
         aria-live="polite"
-        className={`mt-1 text-[9px] text-red-400 ${error ? "" : "sr-only"}`}
+        className={`mt-1 text-[9px] text-danger-ink ${error ? "" : "sr-only"}`}
       >
         {error ?? "Valid bezier values"}
       </p>
@@ -183,7 +183,7 @@ export function SpringBounceField({
           const bounce = parseSpringBounce(`spring(${value})`);
           if (bounce !== null) onCommit(`spring(${round2(bounce)})`);
         }}
-        className="w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+        className="w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
       />
     </div>
   );
@@ -207,7 +207,7 @@ export function WiggleField({
           min={1}
           step={1}
           onCommit={(value) => commitWiggle(onCommit, value, config.type, amplitude)}
-          className="w-14 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className="w-14 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         />
       </div>
       <div className="flex items-center gap-1">
@@ -220,7 +220,7 @@ export function WiggleField({
               commitWiggle(onCommit, config.wiggles, event.currentTarget.value, amplitude);
             }
           }}
-          className="rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className="rounded-sm border border-border bg-input px-1.5 py-1 text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         >
           {WIGGLE_TYPES.map((type) => (
             <option key={type} value={type}>
@@ -238,7 +238,7 @@ export function WiggleField({
           max={1}
           step={0.01}
           onCommit={(value) => commitWiggle(onCommit, config.wiggles, config.type, value)}
-          className="w-16 rounded-sm border border-white/10 bg-black/20 px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
+          className="w-16 rounded-sm border border-border bg-input px-1.5 py-1 font-mono text-[10px] text-neutral-300 outline-hidden focus:border-panel-accent/50"
         />
       </div>
     </div>

package/src/components/editor/FileTree.tsx

@@ -263,7 +263,7 @@ export const FileTree = memo(function FileTree({
       <div
         className={`flex-1 overflow-y-auto py-1 transition-colors ${
           dragOverFolder === ""
-            ? "bg-[#3CE6AC]/5 outline-solid outline-1 outline-[#3CE6AC]/30 -outline-offset-1"
+            ? "bg-accent/5 outline-solid outline-1 outline-accent-ink -outline-offset-1"
             : ""
         }`}
         onContextMenu={handleRootContextMenu}

package/src/components/editor/FileTreeIcons.tsx

@@ -21,34 +21,55 @@ import {
 const SZ = 14;
 const W = "duotone" as const;
 
+type Icon = typeof File;
+// Brand hues; each light half is darkened to hold 3:1 on a hovered or selected row.
+const RED = "text-[light-dark(oklch(0.59_0.194_35),oklch(0.71_0.194_35))]";
+const BLUE = "text-[light-dark(oklch(0.56_0.14_253),oklch(0.69_0.14_253))]";
+const GREEN = "text-[light-dark(oklch(0.53_0.192_150),#22C55E)]";
+const GRAY = "text-[light-dark(oklch(0.56_0.019_261),#9CA3AF)]";
+export const DIM = "text-[light-dark(oklch(0.55_0.023_264),oklch(0.69_0.023_264))]";
+const ICONS = new Map<string, [Icon, string]>([
+  ["html", [FileHtml, RED]],
+  ["css", [FileCss, "text-[light-dark(oklch(0.5_0.2_266),oklch(0.71_0.2_266))]"]],
+  ["js", [FileJs, "text-[light-dark(oklch(0.56_0.156_101),#F0DB4F)]"]],
+  ["jsx", [FileJsx, "text-[light-dark(oklch(0.55_0.117_219),#61DAFB)]"]],
+  ["ts", [FileTs, BLUE]],
+  ["tsx", [FileTsx, BLUE]],
+  ["json", [FileCode, "text-[light-dark(oklch(0.54_0.182_152),#4ADE80)]"]],
+  ["svg", [FileSvg, "text-[light-dark(oklch(0.58_0.187_48),#F97316)]"]],
+  ["md", [FileMd, GRAY]],
+  ["txt", [FileTxt, GRAY]],
+  ["png", [FilePng, GREEN]],
+  ["jpg", [FileJpg, GREEN]],
+  ["webp", [PhImage, GREEN]],
+  ["mp4", [FileVideo, "text-[light-dark(oklch(0.59_0.2_304),oklch(0.71_0.2_304))]"]],
+  ["mp3", [Waveform, "text-[light-dark(oklch(0.53_0.159_165),#3CE6AC)]"]],
+  ["woff", [TextAa, DIM]],
+]);
+const ALIAS = new Map(
+  Object.entries({
+    mjs: "js",
+    cjs: "js",
+    mts: "ts",
+    mdx: "md",
+    jpeg: "jpg",
+    gif: "webp",
+    ico: "webp",
+    webm: "mp4",
+    mov: "mp4",
+    wav: "mp3",
+    ogg: "mp3",
+    m4a: "mp3",
+    woff2: "woff",
+    ttf: "woff",
+    otf: "woff",
+  }),
+);
+
 export function FileIcon({ path }: { path: string }) {
   const ext = path.split(".").pop()?.toLowerCase() ?? "";
-  const c = "shrink-0";
-  if (ext === "html") return <FileHtml size={SZ} weight={W} color="#E44D26" className={c} />;
-  if (ext === "css") return <FileCss size={SZ} weight={W} color="#264DE4" className={c} />;
-  if (ext === "js" || ext === "mjs" || ext === "cjs")
-    return <FileJs size={SZ} weight={W} color="#F0DB4F" className={c} />;
-  if (ext === "jsx") return <FileJsx size={SZ} weight={W} color="#61DAFB" className={c} />;
-  if (ext === "ts" || ext === "mts")
-    return <FileTs size={SZ} weight={W} color="#3178C6" className={c} />;
-  if (ext === "tsx") return <FileTsx size={SZ} weight={W} color="#3178C6" className={c} />;
-  if (ext === "json") return <FileCode size={SZ} weight={W} color="#4ADE80" className={c} />;
-  if (ext === "svg") return <FileSvg size={SZ} weight={W} color="#F97316" className={c} />;
-  if (ext === "md" || ext === "mdx")
-    return <FileMd size={SZ} weight={W} color="#9CA3AF" className={c} />;
-  if (ext === "txt") return <FileTxt size={SZ} weight={W} color="#9CA3AF" className={c} />;
-  if (ext === "png") return <FilePng size={SZ} weight={W} color="#22C55E" className={c} />;
-  if (ext === "jpg" || ext === "jpeg")
-    return <FileJpg size={SZ} weight={W} color="#22C55E" className={c} />;
-  if (ext === "webp" || ext === "gif" || ext === "ico")
-    return <PhImage size={SZ} weight={W} color="#22C55E" className={c} />;
-  if (ext === "mp4" || ext === "webm" || ext === "mov")
-    return <FileVideo size={SZ} weight={W} color="#A855F7" className={c} />;
-  if (ext === "mp3" || ext === "wav" || ext === "ogg" || ext === "m4a")
-    return <Waveform size={SZ} weight={W} color="#3CE6AC" className={c} />;
-  if (ext === "woff" || ext === "woff2" || ext === "ttf" || ext === "otf")
-    return <TextAa size={SZ} weight={W} color="#6B7280" className={c} />;
-  return <File size={SZ} weight={W} color="#6B7280" className={c} />;
+  const [Glyph, color] = ICONS.get(ALIAS.get(ext) ?? ext) ?? [File, DIM];
+  return <Glyph size={SZ} weight={W} className={`shrink-0 ${color}`} />;
 }
 
 // ── Tree Types ──

package/src/components/editor/FileTreeNodes.tsx

@@ -16,6 +16,7 @@ import {
   type TreeNode,
   type ContextMenuState,
   type InlineInputState,
+  DIM,
 } from "./FileTreeIcons";
 
 export type { ContextMenuState, InlineInputState };
@@ -173,7 +174,7 @@ export function ContextMenu({
       <div className="border-t border-neutral-700 my-1" />
       <button
         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-hidden cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 active:bg-danger/25 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDelete(state.targetPath);
           onClose();
@@ -263,7 +264,7 @@ export function InlineInput({
       style={{ paddingLeft: `${8 + depth * 12 + (isFolder ? 0 : 14)}px` }}
     >
       {isFolder ? (
-        <FolderSimple size={SZ_ICON} weight="duotone" color="#6B7280" className="shrink-0" />
+        <FolderSimple size={SZ_ICON} weight="duotone" className={`shrink-0 ${DIM}`} />
       ) : (
         <FileIcon path={value} />
       )}
@@ -279,12 +280,12 @@ export function InlineInput({
           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-hidden ${
-            error ? "border-red-500/70" : "border-neutral-600 focus:border-[#3CE6AC]"
+            error ? "border-danger-ink" : "border-neutral-600 focus:border-accent-ink"
           }`}
           spellCheck={false}
         />
         {error && (
-          <div className="mt-0.5 text-[10px] text-red-400" role="alert">
+          <div className="mt-0.5 text-[10px] text-danger-ink" role="alert">
             {error}
           </div>
         )}
@@ -344,13 +345,13 @@ export function DeleteConfirm({
       <div className="flex gap-1.5">
         <button
           onClick={onCancel}
-          className="flex-1 px-2 py-1 rounded-sm bg-neutral-700 text-neutral-300 hover:bg-neutral-600 transition-colors"
+          className="flex-1 px-2 py-1 rounded-sm bg-hover text-neutral-300 hover:bg-press transition-colors"
         >
           Cancel
         </button>
         <button
           onClick={onConfirm}
-          className="flex-1 px-2 py-1 rounded-sm bg-red-900/60 text-red-300 hover:bg-red-800/60 transition-colors"
+          className="flex-1 px-2 py-1 rounded-sm bg-danger/15 text-danger-ink hover:bg-danger/25 transition-colors"
         >
           Delete
         </button>
@@ -419,7 +420,7 @@ export const TreeFile = memo(function TreeFile({
       <span className="truncate flex-1">{node.name}</span>
       {lintInfo && lintInfo.count > 0 && (
         <span
-          className="shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400 text-center mr-1"
+          className="shrink-0 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-warning-ink text-center mr-1"
           title={lintInfo.messages.join("\n")}
         >
           {lintInfo.count}
@@ -505,7 +506,9 @@ export const TreeFolder = memo(function TreeFolder({
         }}
         onDragLeave={onDragLeave}
         className={`w-full flex items-center gap-1.5 px-2.5 py-1 min-h-7 text-left text-xs text-neutral-400 hover:bg-neutral-800/30 hover:text-neutral-300 transition-colors ${
-          isDragOver ? "bg-[#3CE6AC]/10 outline-solid outline-1 outline-[#3CE6AC]/40" : ""
+          isDragOver
+            ? "bg-accent/10 outline-solid outline-1 outline-accent-ink -outline-offset-1"
+            : ""
         }`}
         style={{ paddingLeft: `${8 + depth * 12}px` }}
       >

package/src/components/editor/GestureRecordControl.tsx

@@ -43,7 +43,7 @@ export function GestureRecordPanelButton({
         }}
         className={`w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${
           recording
-            ? "bg-red-500/15 text-red-400 border border-red-500/30 animate-pulse"
+            ? "bg-red-500/15 text-danger-ink border border-red-500/30 animate-pulse"
             : "bg-panel-input text-panel-text-2 hover:bg-panel-hover border border-panel-border"
         }`}
       >
@@ -77,8 +77,8 @@ export function GestureRecordBadge({
       title={label}
       className={`pointer-events-auto absolute z-20 flex h-7 w-7 items-center justify-center rounded-full border shadow-lg transition-colors ${
         recording
-          ? "border-red-400/60 bg-red-500 text-white animate-pulse"
-          : "border-studio-accent/60 bg-neutral-950 text-studio-accent hover:bg-neutral-900"
+          ? "border-danger/60 bg-danger text-on-danger animate-pulse"
+          : "border-studio-accent/60 bg-neutral-950 text-accent-ink hover:bg-neutral-900"
       }`}
       style={{
         left: Math.max(0, rect.left + rect.width + 8),