Add invalid state to prop controls, fix behavior inconsistencies

adeira-source-id: b11fe7882430475f46c099d7eb81127638276989

.changeset/brown-poems-behave.md

@@ -0,0 +1,6 @@
+---
+"@triplex/ux": patch
+"triplex-vsce": patch
+---
+
+Tuple inputs now show invalid state when partially filled out and some required items are missing.

.changeset/heavy-onions-love.md

@@ -0,0 +1,6 @@
+---
+"@triplex/ux": patch
+"triplex-vsce": patch
+---
+
+Add invalid state to all prop controls.

.changeset/long-flies-rule.md

@@ -0,0 +1,6 @@
+---
+"@triplex/ux": patch
+"triplex-vsce": patch
+---
+
+Union inputs now respect default values set on props.

.changeset/odd-feet-turn.md

@@ -0,0 +1,6 @@
+---
+"@triplex/ux": patch
+"triplex-vsce": patch
+---
+
+Fix tuple inputs behavior when required / optional.

.changeset/real-jobs-shave.md

@@ -0,0 +1,6 @@
+---
+"@triplex/ux": patch
+"triplex-vsce": patch
+---
+
+Tuple inputs now respect default values set on props.

.changeset/slimy-carrots-juggle.md

@@ -0,0 +1,6 @@
+---
+"@triplex/ux": patch
+"triplex-vsce": patch
+---
+
+Boolean input now respects default values set on props.

.changeset/swift-rivers-beam.md

@@ -0,0 +1,5 @@
+---
+"@triplex/server": patch
+---
+
+Union literal props are no longer sorted resulting in stable options in the UI.

.changeset/thin-peaches-love.md

@@ -0,0 +1,6 @@
+---
+"@triplex/ux": patch
+"triplex-vsce": patch
+---
+
+Literal union inputs can now be cleared through a UI selection when optional.

examples/test-fixture/src/required-props.tsx

@@ -4,21 +4,46 @@
  * This source code is licensed under the GPL-3.0 license found in the LICENSE
  * file in the root directory of this source tree.
  */
-
 import { Gltf } from "@react-three/drei";
 
-export function RequiredProps({
-  color = "red",
-  size,
+export const RequiredProps = ({
+  defaultBoolean: _ = true,
+  defaultColor: __ = "red",
+  defaultNumber: ___ = 1,
+  defaultString: ____ = "foo",
+  defaultStringLiteral: _____ = "bar",
+  defaultTuple: ______ = [1, 2, 3],
+  defaultUnion: _______ = 333,
 }: {
-  color: string;
-  size: number;
-}) {
+  defaultBoolean?: boolean;
+  defaultColor?: string;
+  defaultNumber?: number;
+  defaultString?: string;
+  defaultStringLiteral?: "foo" | "bar";
+  defaultTuple?: [number, number, number];
+  defaultUnion?: number | boolean | string;
+  optionalBoolean?: boolean;
+  optionalColor?: string;
+  optionalNumber?: number;
+  optionalString?: string;
+  optionalStringLiteral?: "foo" | "bar";
+  optionalTuple?: [number, number, number];
+  optionalUnion?: number | string | boolean;
+  requiredBoolean: boolean;
+  requiredColor: string;
+  requiredNumber: number;
+  requiredString: string;
+  requiredStringLiteral: "foo" | "bar";
+  requiredTuple: [number, number, number];
+  requiredUnion: number | string | boolean;
+}) => {
   return (
     <>
-      <Gltf scale={size} src="assets/pmndrs.glb">
-        <meshStandardMaterial color={color} />
+      <Gltf src="assets/pmndrs.glb">
+        <meshStandardMaterial />
       </Gltf>
     </>
   );
-}
+};
+
+export const RequiredUsage = () => <RequiredProps />;