fix(studio): refine preset surfaces and repair gallery interactions

packages/design-system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/design-system",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Typed, deterministic design tokens and legacy WrNexus theme integration.",
   "type": "module",
   "main": "src/index.ts",

packages/design-system/src/catalog-recipes.ts

@@ -23,18 +23,35 @@ export function catalogRecipes(): Record<string, ComponentRecipe> {
       const circle = ["circle", "round"].includes(axes.shape?.default ?? "");
       const semanticGeometry =
         /thumb|track|spinner|progress|marker|port$|status|dot|star|srOnly/i.test(part);
+      // Joined surfaces share the outer component's corners. Rounding each
+      // child creates seams, scalloped panels and rounded splitter rails.
+      const joined = (
+        {
+          StatsBar: ["item", "content"],
+          AuthSplitLayout: ["content"],
+          Collapse: ["trigger", "panel", "content"],
+          InputNumber: ["button", "content", "input"],
+          LayoutSplitter: ["handle"],
+        } as Record<string, string[]>
+      )[name]?.includes(part);
       if (
         descriptor.properties.includes("borderRadius") &&
         !roundedFalse &&
         !circle &&
-        !semanticGeometry
+        !semanticGeometry &&
+        !joined
       ) {
         styles.borderRadius = ref(
           descriptor.profile === "control" ? "shape.control" : "shape.panel",
         );
       }
       // Only existing surfaces receive elevation. Layout wrappers and provider hosts are untouched.
-      if (descriptor.profile === "surface" && descriptor.properties.includes("boxShadow"))
+      if (
+        descriptor.profile === "surface" &&
+        descriptor.properties.includes("boxShadow") &&
+        !joined &&
+        !(name === "PreferenceSwitcher" && part === "menu")
+      )
         styles.boxShadow = ref("elevation.panel");
       if (Object.keys(styles).length) base[part] = styles;
     }

packages/design-system/src/presets.ts

@@ -53,7 +53,7 @@ function recipes(angular: boolean, outlined: boolean): Record<string, ComponentR
           paddingInline: ref("space.control"),
           boxShadow: ref("elevation.panel"),
           fontFamily: ref("type.body"),
-          ...(angular ? { rotate: "-2deg" } : {}),
+          ...(angular ? { rotate: "-0.5deg" } : {}),
         },
       },
       variants: [
@@ -84,7 +84,7 @@ function recipes(angular: boolean, outlined: boolean): Record<string, ComponentR
     Radio: recipe({ control: { borderWidth: "1px" } }),
     Switch: recipe({ control: { borderRadius: "999px" } }),
     Card: recipe({
-      panel: { ...surface, ...(angular ? { rotate: "1deg" } : {}) },
+      panel: { ...surface, ...(angular ? { rotate: "0.25deg" } : {}) },
       body: { paddingInline: ref("space.panel"), paddingBlock: ref("space.panel") },
       heading: { fontFamily: ref("type.heading") },
     }),
@@ -132,20 +132,20 @@ function preset(id: string, name: string, soft: boolean, angular: boolean): Desi
       }
     : angular
       ? {
-          bg: "#E8E0C0",
-          background: "#E8E0C0",
-          surface: "#EDE4CF",
-          "surface-2": "#E8E0C0",
+          bg: "#F3ECD7",
+          background: "#F3ECD7",
+          surface: "#FFFBEF",
+          "surface-2": "#E8DFC6",
           text: "#232320",
           foreground: "#232320",
           "text-muted": "#535146",
-          border: "#535146",
-          primary: "#8F2448",
-          "primary-hover": "#701C39",
-          "primary-active": "#59172D",
+          border: "#B9AC8D",
+          primary: "#314B6B",
+          "primary-hover": "#243B57",
+          "primary-active": "#1C2F46",
           "primary-contrast": "#FFFFFF",
-          "primary-text": "#701C39",
-          "primary-soft": "#E8E0C0",
+          "primary-text": "#243B57",
+          "primary-soft": "#E8DFC6",
         }
       : {
           bg: "#FFFFFF",
@@ -190,11 +190,11 @@ function preset(id: string, name: string, soft: boolean, angular: boolean): Desi
           foreground: "#EDE4CF",
           "text-muted": "#D0C7B2",
           border: "#B0A78D",
-          primary: "#FF9FC6",
-          "primary-hover": "#FFC0DA",
-          "primary-active": "#FFD2E5",
+          primary: "#B9CFE8",
+          "primary-hover": "#CEE0F5",
+          "primary-active": "#DDEBFA",
           "primary-contrast": "#25221E",
-          "primary-text": "#FF9FC6",
+          "primary-text": "#B9CFE8",
           "primary-soft": "#454032",
         }
       : {
@@ -224,7 +224,7 @@ function preset(id: string, name: string, soft: boolean, angular: boolean): Desi
     "control.height": token("dimension", soft ? "2.75rem" : "2.5rem", "control-height"),
     "type.body": token("fontFamily", body, "font-sans"),
     "type.heading": token("fontFamily", heading),
-    "elevation.panel": token("shadow", angular ? "3px 3px 0 #535146" : "none", "shadow-1"),
+    "elevation.panel": token("shadow", angular ? "2px 2px 0 #535146" : "none", "shadow-1"),
     ...colors(dark),
   };
   return {

packages/design-system/test/recipes.test.ts

@@ -108,3 +108,20 @@ test("mode-dependent recipe values retain mode rules while identical values are
   expect(css).toContain("9px");
   expect(css).not.toContain('[data-theme="light"]');
 });
+
+test("joined component parts keep their authored geometry instead of receiving independent rounding", () => {
+  for (const system of Object.values(CORE_DESIGN_SYSTEMS)) {
+    for (const [name, parts] of Object.entries({
+      StatsBar: ["item", "content"],
+      AuthSplitLayout: ["content"],
+      Collapse: ["trigger", "panel", "content"],
+      InputNumber: ["button", "input", "content"],
+      LayoutSplitter: ["handle"],
+    })) {
+      for (const part of parts) {
+        expect(system.recipes![name]!.base?.[part]?.borderRadius).toBeUndefined();
+        expect(system.recipes![name]!.base?.[part]?.boxShadow).toBeUndefined();
+      }
+    }
+  }
+});