feat(studio): add 3-tier value/label color resolver for the flat inspector

packages/studio/src/components/editor/propertyPanelValueTier.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveValueTier,
+  VALUE_TIER_LABEL_CLASS,
+  VALUE_TIER_VALUE_CLASS,
+} from "./propertyPanelValueTier";
+
+describe("resolveValueTier", () => {
+  it("is 'default' when there is no explicit declaration", () => {
+    expect(resolveValueTier(undefined, "400")).toBe("default");
+    expect(resolveValueTier("", "400")).toBe("default");
+  });
+
+  it("is 'explicitDefault' when the explicit value equals the default", () => {
+    expect(resolveValueTier("400", "400")).toBe("explicitDefault");
+    expect(resolveValueTier(" normal ", "normal")).toBe("explicitDefault");
+  });
+
+  it("is 'explicitCustom' when the explicit value differs from the default", () => {
+    expect(resolveValueTier("3.96px", "0px")).toBe("explicitCustom");
+  });
+});
+
+describe("value tier class maps", () => {
+  it("covers all three tiers for both label and value", () => {
+    for (const tier of ["default", "explicitDefault", "explicitCustom"] as const) {
+      expect(VALUE_TIER_LABEL_CLASS[tier]).toBeTruthy();
+      expect(VALUE_TIER_VALUE_CLASS[tier]).toBeTruthy();
+    }
+    expect(VALUE_TIER_VALUE_CLASS.explicitCustom).toBe("text-panel-accent");
+  });
+});

packages/studio/src/components/editor/propertyPanelValueTier.ts

@@ -0,0 +1,28 @@
+/**
+ * The flat inspector's 3-state value coloring (design_handoff_studio_inspector,
+ * verified against Studio Panel Redesign.dc.html #10a): a property row is either
+ * unset (no explicit declaration), explicitly declared but equal to its default
+ * (no visual "set" signal), or explicitly declared and different from its default
+ * (mint value + emphasized label + reset affordance).
+ */
+export type PropertyValueTier = "default" | "explicitDefault" | "explicitCustom";
+
+export function resolveValueTier(
+  explicitValue: string | undefined,
+  defaultValue: string,
+): PropertyValueTier {
+  if (explicitValue == null || explicitValue.trim() === "") return "default";
+  return explicitValue.trim() === defaultValue.trim() ? "explicitDefault" : "explicitCustom";
+}
+
+export const VALUE_TIER_LABEL_CLASS: Record<PropertyValueTier, string> = {
+  default: "text-panel-text-3",
+  explicitDefault: "text-panel-text-2",
+  explicitCustom: "text-panel-text-0",
+};
+
+export const VALUE_TIER_VALUE_CLASS: Record<PropertyValueTier, string> = {
+  default: "text-panel-text-3",
+  explicitDefault: "text-panel-text-0",
+  explicitCustom: "text-panel-accent",
+};