@hyperframes/studio 0.8.104 → 0.8.105

package/src/styles/theme.test.ts

@@ -2,7 +2,7 @@
 
 /** Guards the ways `theme.css` can silently break: a dropped CSS custom
  * property, a utility that stops compiling, the stock Tailwind palette
- * leaking back in, or the JS preset / legacy colours drifting from it. */
+ * leaking back in, or the legacy colours drifting from it. */
 
 import { readFileSync } from "node:fs";
 import path from "node:path";
@@ -11,7 +11,6 @@ import { createRoot } from "react-dom/client";
 import { Gear, IconContext } from "@phosphor-icons/react";
 import { compile } from "tailwindcss";
 import { afterEach, describe, expect, it } from "vitest";
-import studioPreset from "./tailwind-preset.shared.js";
 import { readIconTokens } from "./iconTokens";
 import { loadStylesheet, STYLES_DIR, TAILWIND_DIR } from "./styleSources";
 
@@ -52,7 +51,9 @@ describe("studio theme", () => {
   it("emits the semantic palette as custom properties and as utilities", async () => {
     const css = await build("studio.css", ["bg-accent", "text-text-2", "border-border"]);
 
-    expect(rootVariables(css).get("--color-accent")).toBe("#3ce6ac");
+    expect(rootVariables(css).get("--color-accent")).toBe(
+      "light-dark(oklch(0.536 0.114 164), oklch(0.82 0.159 164))",
+    );
     expect(css).toContain(".bg-accent {");
     expect(css).toContain("background-color: var(--color-accent)");
   });
@@ -127,7 +128,7 @@ describe("studio theme", () => {
     expect(css).toContain(".duration-open {");
   });
 
-  it("keeps every legacy Tailwind palette entry at its upstream default value", async () => {
+  it("keeps every legacy Tailwind palette entry that is not a role at its upstream value", async () => {
     // These are copies of Tailwind's own values, kept only so existing markup
     // renders unchanged. A Tailwind upgrade that moves one of them would
     // otherwise silently change Studio's colors.
@@ -138,7 +139,9 @@ describe("studio theme", () => {
         ),
       ].map(([, name, value]) => [name, value.trim()]),
     );
-    const legacy = [...themeSource.matchAll(/\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g)];
+    const legacy = [
+      ...themeSource.matchAll(/\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g),
+    ].filter(([, , value]) => !value.trim().startsWith("var("));
 
     expect(legacy.length).toBeGreaterThan(0);
     for (const [, name, value] of legacy) {
@@ -147,11 +150,12 @@ describe("studio theme", () => {
     }
   });
 
-  it("keeps the deprecated JS preset in step with the CSS it shadows", () => {
-    const colors = studioPreset.theme.extend.colors;
+  it("maps every neutral step onto a Graphite role, so the stock scale follows the theme", () => {
+    const steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 
-    expect(colors.studio.accent.toLowerCase()).toBe(declaredValue("--color-accent"));
-    expect(colors.panel.surface.toLowerCase()).toBe(declaredValue("--color-surface"));
+    for (const step of steps) {
+      expect(declaredValue(`--color-neutral-${step}`)).toMatch(/^var\(--color-[a-z0-9-]+\)$/);
+    }
   });
 
   it("reads the icon defaults off the theme rather than hard-coding them", () => {

package/src/utils/blockCategories.ts

@@ -8,15 +8,47 @@ export type { BlockCategory };
 export { BLOCK_CATEGORIES, resolveBlockCategory };
 
 const COLOR_MAP: Record<BlockCategory, { bg: string; text: string; dot: string }> = {
-  transitions: { bg: "bg-blue-500/15", text: "text-blue-400", dot: "bg-blue-400" },
-  vfx: { bg: "bg-purple-500/15", text: "text-purple-400", dot: "bg-purple-400" },
-  social: { bg: "bg-pink-500/15", text: "text-pink-400", dot: "bg-pink-400" },
-  data: { bg: "bg-green-500/15", text: "text-green-400", dot: "bg-green-400" },
-  scenes: { bg: "bg-amber-500/15", text: "text-amber-400", dot: "bg-amber-400" },
-  captions: { bg: "bg-cyan-500/15", text: "text-cyan-400", dot: "bg-cyan-400" },
-  effects: { bg: "bg-rose-500/15", text: "text-rose-400", dot: "bg-rose-400" },
-  "text-effects": { bg: "bg-violet-500/15", text: "text-violet-400", dot: "bg-violet-400" },
-  "code-animation": { bg: "bg-emerald-500/15", text: "text-emerald-400", dot: "bg-emerald-400" },
+  transitions: {
+    bg: "bg-blue-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_255),var(--color-blue-400))]",
+  },
+  vfx: {
+    bg: "bg-purple-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_305),var(--color-purple-400))]",
+  },
+  social: {
+    bg: "bg-pink-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_350),var(--color-pink-400))]",
+  },
+  data: {
+    bg: "bg-green-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_152),var(--color-green-400))]",
+  },
+  scenes: { bg: "bg-amber-500/15", text: "text-warning-ink", dot: "bg-warning-ink" },
+  captions: {
+    bg: "bg-cyan-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_212),var(--color-cyan-400))]",
+  },
+  effects: {
+    bg: "bg-rose-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_13),var(--color-rose-400))]",
+  },
+  "text-effects": {
+    bg: "bg-violet-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_294),var(--color-violet-400))]",
+  },
+  "code-animation": {
+    bg: "bg-emerald-500/15",
+    text: "text-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]",
+    dot: "bg-[light-dark(oklch(0.48_0.12_163),var(--color-emerald-400))]",
+  },
 };
 
 export function getCategoryColors(category: BlockCategory) {

package/src/utils/clipboardPayload.ts

@@ -22,6 +22,7 @@ export type ClipboardPayload =
       kind: "dom-element";
       html: string;
       sourceFile: string;
+      projectId?: string;
       originSelector?: string;
       originSelectorIndex?: number;
     };
@@ -70,6 +71,7 @@ export function deserializeClipboardPayload(json: string): ClipboardPayload | nu
       kind: "dom-element",
       html: obj.html,
       sourceFile: obj.sourceFile,
+      projectId: typeof obj.projectId === "string" ? obj.projectId : undefined,
       originSelector: typeof obj.originSelector === "string" ? obj.originSelector : undefined,
       originSelectorIndex:
         typeof obj.originSelectorIndex === "number" ? obj.originSelectorIndex : undefined,