@viamrobotics/test-widgets 0.10.2 → 0.11.1

package/dist/components/widgets/motor/motor.svelte

@@ -76,107 +76,109 @@
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		<div class="flex flex-row divide-x">
-			<div class="flex w-full flex-col divide-y">
-				<MutationSection
-					title="Quick move"
-					lastError={quickSetPowerMutation.error}
-				>
-					<QuickMove setPower={quickSetPower} />
-				</MutationSection>
-				<MutationSection
-					title="SetPower"
-					api="rdk:component:motor"
-					description="Move continuously"
-					lastError={setPowerMutation.error}
-				>
-					<SetPower {setPower} />
-				</MutationSection>
-				{#if propertiesQuery.data?.positionReporting}
+		<div class="@container">
+			<div class="flex flex-col divide-y @2xl:flex-row @2xl:divide-x @2xl:divide-y-0">
+				<div class="flex w-full flex-col divide-y">
 					<MutationSection
-						title="SetRPM"
-						api="rdk:component:motor"
-						description="Move indefinitely at a specified speed."
-						lastError={setRPMMutation.error}
-					>
-						<SetRPM {setRPM} />
-					</MutationSection>
-					<MutationSection
-						title="GoFor"
-						api="rdk:component:motor"
-						description="Move a specified number of revolutions"
-						lastError={goForMutation.error}
+						title="Quick move"
+						lastError={quickSetPowerMutation.error}
 					>
-						<GoFor {goFor} />
+						<QuickMove setPower={quickSetPower} />
 					</MutationSection>
 					<MutationSection
-						title="GoTo"
+						title="SetPower"
 						api="rdk:component:motor"
-						description="Turn to a specified position"
-						lastError={goToMutation.error}
+						description="Move continuously"
+						lastError={setPowerMutation.error}
 					>
-						<GoTo {goTo} />
+						<SetPower {setPower} />
 					</MutationSection>
-				{/if}
-			</div>
-
-			<div class="ml-auto flex w-full max-w-1/2 flex-col divide-y sm:max-w-1/3">
-				<ApiSection
-					title="Stop"
-					api="rdk:component:motor"
-				>
-					<StopButton
-						error={stopMutation.error}
-						onStop={() => {
-							stopMutation.mutate([])
-						}}
-					/>
-				</ApiSection>
-				<IsMoving
-					client={MotorClient}
-					api="rdk:component:motor"
-					{partID}
-					{resourceName}
-				>
-					<div class="flex flex-col gap-6 pt-2">
-						<ApiSection
-							title="IsPowered"
+					{#if propertiesQuery.data?.positionReporting}
+						<MutationSection
+							title="SetRPM"
 							api="rdk:component:motor"
-							class="gap-3 p-0"
-							tooltip="Returns whether or not the motor is running and the current portion of max power.
-
-  Stepper motors will report ”true” if they are being powered while holding
-  a position and while they are turning."
+							description="Move indefinitely at a specified speed."
+							lastError={setRPMMutation.error}
 						>
-							<Query query={isPoweredQuery}>
-								{#if isPoweredQuery.data !== undefined}
-									{@const [isPowered, powerPct] = isPoweredQuery.data}
-									<span class="font-roboto-mono flex flex-row gap-1 text-xs">
-										<p class="text-default">{isPowered}</p>
-										<p class="text-disabled">/</p>
-										<p class="text-subtle-1">
-											{formatNumeric(powerPct * 100, 1)}%
-										</p>
-									</span>
-								{/if}
-							</Query>
-						</ApiSection>
-						{#if propertiesQuery.data?.positionReporting === true}
+							<SetRPM {setRPM} />
+						</MutationSection>
+						<MutationSection
+							title="GoFor"
+							api="rdk:component:motor"
+							description="Move a specified number of revolutions"
+							lastError={goForMutation.error}
+						>
+							<GoFor {goFor} />
+						</MutationSection>
+						<MutationSection
+							title="GoTo"
+							api="rdk:component:motor"
+							description="Turn to a specified position"
+							lastError={goToMutation.error}
+						>
+							<GoTo {goTo} />
+						</MutationSection>
+					{/if}
+				</div>
+
+				<div class="flex w-full flex-col divide-y @2xl:ml-auto @2xl:max-w-1/2 @4xl:max-w-1/3">
+					<ApiSection
+						title="Stop"
+						api="rdk:component:motor"
+					>
+						<StopButton
+							error={stopMutation.error}
+							onStop={() => {
+								stopMutation.mutate([])
+							}}
+						/>
+					</ApiSection>
+					<IsMoving
+						client={MotorClient}
+						api="rdk:component:motor"
+						{partID}
+						{resourceName}
+					>
+						<div class="flex flex-col gap-6 pt-2">
 							<ApiSection
-								title="GetPosition"
+								title="IsPowered"
 								api="rdk:component:motor"
 								class="gap-3 p-0"
-								tooltip="Reports the position of an encoded motor in revolutions from zero/home."
+								tooltip="Returns whether or not the motor is running and the current portion of max power.
+
+  Stepper motors will report ”true” if they are being powered while holding
+  a position and while they are turning."
 							>
-								<Query query={positionQuery}>
-									<p class="font-roboto-mono text-default text-xs">
-										{formatNumeric(positionQuery.data, 4)}
-									</p>
+								<Query query={isPoweredQuery}>
+									{#if isPoweredQuery.data !== undefined}
+										{@const [isPowered, powerPct] = isPoweredQuery.data}
+										<span class="font-roboto-mono flex flex-row gap-1 text-xs">
+											<p class="text-default">{isPowered}</p>
+											<p class="text-disabled">/</p>
+											<p class="text-subtle-1">
+												{formatNumeric(powerPct * 100, 1)}%
+											</p>
+										</span>
+									{/if}
 								</Query>
 							</ApiSection>
-						{/if}
-					</div>
-				</IsMoving>
+							{#if propertiesQuery.data?.positionReporting === true}
+								<ApiSection
+									title="GetPosition"
+									api="rdk:component:motor"
+									class="gap-3 p-0"
+									tooltip="Reports the position of an encoded motor in revolutions from zero/home."
+								>
+									<Query query={positionQuery}>
+										<p class="font-roboto-mono text-default text-xs">
+											{formatNumeric(positionQuery.data, 4)}
+										</p>
+									</Query>
+								</ApiSection>
+							{/if}
+						</div>
+					</IsMoving>
+				</div>
 			</div>
 		</div>
 	{/snippet}

package/dist/components/widgets/pcd/inputs.svelte

@@ -40,7 +40,7 @@
 	}
 </script>
 
-<div class="flex w-1/3 flex-col gap-2">
+<div class="flex flex-col gap-2 @2xl:w-1/3">
 	<Label>
 		Point size
 

package/dist/components/widgets/pcd/pcd-widget.svelte

@@ -24,22 +24,24 @@
 	}
 </script>
 
-<div class="flex h-120 gap-4">
-	<Inputs
-		{pointSize}
-		{up}
-		{data}
-		onPointSizeChange={handlePointSizeChange}
-		onUpChange={handleUpChange}
-	/>
-
-	<div class="relative h-full w-2/3 overflow-hidden border">
-		<Canvas>
-			<Scene
-				{data}
-				{up}
-				{pointSize}
-			/>
-		</Canvas>
+<div class="@container">
+	<div class="flex flex-col gap-4 @2xl:h-120 @2xl:flex-row">
+		<Inputs
+			{pointSize}
+			{up}
+			{data}
+			onPointSizeChange={handlePointSizeChange}
+			onUpChange={handleUpChange}
+		/>
+
+		<div class="relative h-80 overflow-hidden border @2xl:h-full @2xl:w-2/3">
+			<Canvas>
+				<Scene
+					{data}
+					{up}
+					{pointSize}
+				/>
+			</Canvas>
+		</div>
 	</div>
 </div>

package/dist/components/widgets/servo/servo.svelte

@@ -48,71 +48,76 @@
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		<div class="flex flex-row divide-x">
-			<div class="grid grow grid-cols-3 divide-x">
-				<ApiSection
-					title="GetPosition"
-					api="rdk:component:servo"
-					bottomText="Updates automatically"
-				>
-					<Query query={positionQuery}>
-						{#if positionQuery.data !== undefined}
-							<!-- span required to get unit closer to position reading -->
-							<span class="flex flex-row gap-1">
-								<span class="font-roboto-mono font-normal">{formatNumeric(positionQuery.data)}</span
-								>
-								<abbr class="text-subtle-2">º</abbr>
-							</span>
-						{/if}
-					</Query>
-				</ApiSection>
-				<ApiSection
-					title="Move"
-					api="rdk:component:servo"
-				>
-					<Query query={positionQuery}>
-						{#if positionQuery.data !== undefined}
-							<Move
-								currentPosition={positionQuery.data}
-								{moveTo}
-								lastError={moveMutation.error}
-							/>
-						{/if}
-					</Query>
-				</ApiSection>
-				<ApiSection
-					title="Quick move"
-					bottomText="Press a button to execute"
-				>
-					<Query query={positionQuery}>
-						{#if positionQuery.data !== undefined}
-							<QuickMove
-								currentPosition={positionQuery.data}
-								moveTo={quickMoveTo}
-								lastError={quickMoveMutation.error}
-							/>
-						{/if}
-					</Query>
-				</ApiSection>
-			</div>
-			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
-				<ApiSection
-					title="Stop"
-					api="rdk:component:servo"
-				>
-					<StopButton
-						error={stopMutation.error}
-						onStop={() => {
-							stopMutation.mutate([])
-						}}
+		<div class="@container">
+			<div class="flex flex-col divide-y @4xl:flex-row @4xl:divide-x @4xl:divide-y-0">
+				<div class="@container grow">
+					<div class="grid grid-cols-1 divide-y @2xl:grid-cols-3 @2xl:divide-x @2xl:divide-y-0">
+						<ApiSection
+							title="GetPosition"
+							api="rdk:component:servo"
+							bottomText="Updates automatically"
+						>
+							<Query query={positionQuery}>
+								{#if positionQuery.data !== undefined}
+									<!-- span required to get unit closer to position reading -->
+									<span class="flex flex-row gap-1">
+										<span class="font-roboto-mono font-normal"
+											>{formatNumeric(positionQuery.data)}</span
+										>
+										<abbr class="text-subtle-2">º</abbr>
+									</span>
+								{/if}
+							</Query>
+						</ApiSection>
+						<ApiSection
+							title="Move"
+							api="rdk:component:servo"
+						>
+							<Query query={positionQuery}>
+								{#if positionQuery.data !== undefined}
+									<Move
+										currentPosition={positionQuery.data}
+										{moveTo}
+										lastError={moveMutation.error}
+									/>
+								{/if}
+							</Query>
+						</ApiSection>
+						<ApiSection
+							title="Quick move"
+							bottomText="Press a button to execute"
+						>
+							<Query query={positionQuery}>
+								{#if positionQuery.data !== undefined}
+									<QuickMove
+										currentPosition={positionQuery.data}
+										moveTo={quickMoveTo}
+										lastError={quickMoveMutation.error}
+									/>
+								{/if}
+							</Query>
+						</ApiSection>
+					</div>
+				</div>
+				<div class="flex flex-col divide-y @4xl:ml-auto @4xl:w-full @4xl:max-w-40">
+					<ApiSection
+						title="Stop"
+						api="rdk:component:servo"
+					>
+						<StopButton
+							error={stopMutation.error}
+							onStop={() => {
+								stopMutation.mutate([])
+							}}
+						/>
+					</ApiSection>
+					<IsMoving
+						client={ServoClient}
+						api="rdk:component:servo"
+						{partID}
+						{resourceName}
 					/>
-				</ApiSection>
-				<IsMoving
-					client={ServoClient}
-					api="rdk:component:servo"
-					{partID}
-					{resourceName}
-				/>
+				</div>
 			</div>
 		</div>
 	{/snippet}

package/dist/components/widgets/vision-service/image.svelte

@@ -70,6 +70,9 @@
 
 	let container = $state<HTMLElement>()
 	let size = $state<Size>()
+	let isStacked = $state(false)
+
+	const STACK_WIDTH_PX = 672
 
 	useResizeObserver(
 		() => container,
@@ -80,6 +83,7 @@
 
 	const setSize = () => {
 		if (container) {
+			isStacked = container.clientWidth < STACK_WIDTH_PX
 			size = getImageSize(img, container)
 		}
 	}
@@ -101,7 +105,10 @@
 </script>
 
 <div
-	class="flex h-full min-h-0 w-full min-w-0 gap-2 py-2 pl-2"
+	class={[
+		'flex min-h-0 w-full min-w-0 gap-2 py-2 pl-2',
+		isStacked ? 'flex-col' : 'h-full flex-row',
+	]}
 	bind:this={container}
 >
 	{#if !size}
@@ -129,8 +136,8 @@
 			</Canvas>
 		</div>
 		<div
-			class="flex grow flex-col pr-2"
-			style:height={`${size.height.toString()}px`}
+			class={['flex grow flex-col pr-2', isStacked && 'min-h-40']}
+			style:height={isStacked ? undefined : `${size.height.toString()}px`}
 		>
 			<Legend
 				classifications={data?.classifications}

package/dist/components/widgets/vision-service/object-point-clouds.svelte

@@ -61,7 +61,7 @@
 </script>
 
 <div class="relative h-[600px] max-h-[80vh] bg-white">
-	<div class="relative z-10 h-full overflow-y-scroll p-4">
+	<div class="relative z-10 h-full overflow-x-auto overflow-y-scroll p-4">
 		<div class="grid grid-cols-[repeat(auto-fit,320px)] justify-center gap-4">
 			{#each items as item (item.id)}
 				<div class="w-[320px] shadow-sm">

package/dist/components/widgets/vision-service/vision-service.svelte

@@ -122,8 +122,8 @@
 <ConnectionStatus {partID}>
 	{#snippet connected()}
 		<div class="flex flex-col gap-2 px-4 pt-4 pb-3">
-			<div class="flex flex-row gap-4">
-				<div class="w-50">
+			<div class="flex flex-wrap gap-4">
+				<div class="w-50 max-w-full">
 					<Label position="top">
 						Camera
 						<Select
@@ -160,7 +160,7 @@
 
 			<h6 class="text-subtle-1 font-semibold">Detections/Classifications</h6>
 
-			<div class="flex gap-4">
+			<div class="flex flex-wrap gap-4">
 				<RefetchController
 					allowLive
 					{refetchInterval}
@@ -218,8 +218,8 @@
 			</Queries>
 
 			<h6 class="text-subtle-1 mt-4 font-semibold">Object point clouds</h6>
-			<div class="flex items-center gap-4">
-				<div class="w-50">
+			<div class="flex flex-wrap items-center gap-4">
+				<div class="w-50 max-w-full">
 					<Label position="left">
 						Show object point clouds
 						<Switch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/test-widgets",
-  "version": "0.10.2",
+  "version": "0.11.1",
   "license": "Apache-2.0",
   "type": "module",
   "wireit": {
@@ -103,7 +103,8 @@
         "!coverage/**",
         "!test-results/**",
         "!.env*",
-        "!**/*.tgz"
+        "!**/*.tgz",
+        "!.claude/**"
       ],
       "output": [],
       "packageLocks": [
@@ -120,7 +121,8 @@
         "!coverage/**",
         "!test-results/**",
         "!.env*",
-        "!**/*.tgz"
+        "!**/*.tgz",
+        "!.claude/**"
       ],
       "output": [],
       "packageLocks": [
@@ -216,18 +218,27 @@
     "@fontsource-variable/public-sans": "^5.2.7",
     "@fontsource-variable/roboto-mono": "^5.2.8",
     "@fontsource-variable/space-grotesk": "^5.2.10",
+    "@houserules/cli": "^0.4.1",
+    "@houserules/plugin-accessibility": "^0.1.3",
+    "@houserules/plugin-changesets": "^0.2.2",
+    "@houserules/plugin-design": "^0.2.2",
+    "@houserules/plugin-prose": "^0.1.4",
+    "@houserules/plugin-svelte": "^0.1.2",
+    "@houserules/plugin-testing": "^0.2.1",
+    "@houserules/plugin-three": "^0.2.1",
+    "@houserules/plugin-typescript": "^0.1.2",
     "@playwright/test": "^1.59.1",
     "@sentry/svelte": "^10.50.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.69.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@tailwindcss/oxide": "^4.2.4",
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",
     "@tanstack/svelte-query": "^6.1.25",
     "@tanstack/svelte-query-devtools": "^6.1.25",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@threlte/core": "^8.5.9",
@@ -239,7 +250,7 @@
     "@viamrobotics/prime-core": "^0.1.22",
     "@viamrobotics/sdk": "^0.69.0",
     "@viamrobotics/svelte-sdk": "^1.2.1",
-    "@viamrobotics/tailwind-config": "^1.0.0",
+    "@viamrobotics/tailwind-config": "^1.2.0",
     "@vitest/browser": "^4.1.10",
     "@vitest/browser-playwright": "^4.1.5",
     "@vitest/coverage-v8": "^4.1.5",
@@ -252,7 +263,6 @@
     "globals": "^17.5.0",
     "lodash-es": "^4.18.1",
     "maplibre-gl": "^5.24.0",
-    "mock-match-media": "^1.0.3",
     "playwright": "^1.59.1",
     "prettier": "^3.8.3",
     "prettier-plugin-svelte": "^3.5.1",