From 797df2a64a6395d8c1fb0c92232cc829608f91c5 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Wed, 8 Jul 2026 20:36:24 -0700
Subject: [PATCH] feat(studio): add 3-tier value/label color resolver for the
 flat inspector

---
 .../editor/propertyPanelValueTier.test.ts     | 32 +++++++++++++++++++
 .../editor/propertyPanelValueTier.ts          | 28 ++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/studio/src/components/editor/propertyPanelValueTier.test.ts
 create mode 100644 packages/studio/src/components/editor/propertyPanelValueTier.ts

diff --git a/packages/studio/src/components/editor/propertyPanelValueTier.test.ts b/packages/studio/src/components/editor/propertyPanelValueTier.test.ts
new file mode 100644
index 000000000..80e4c2204
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelValueTier.ts b/packages/studio/src/components/editor/propertyPanelValueTier.ts
new file mode 100644
index 000000000..0e92f8b04
--- /dev/null
+++ b/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",
+};