@viamrobotics/test-widgets 0.10.2 → 0.11.1

package/dist/components/widgets/board/pin-selector.svelte

@@ -31,7 +31,7 @@
 	}
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex shrink-0 flex-col gap-4">
 	<Label>
 		Pin
 

package/dist/components/widgets/board/read-write-pins.svelte

@@ -33,7 +33,7 @@
 </script>
 
 <div class="flex w-full flex-col gap-6">
-	<div class="flex w-full gap-16">
+	<div class="flex w-full flex-wrap gap-x-16 gap-y-6">
 		<PinSelector
 			value={pinSelection}
 			onChange={handleChangedPinSelection}

package/dist/components/widgets/camera/camera.svelte

@@ -181,7 +181,7 @@
 				</Label>
 			</div>
 			{#if isPlaying}
-				<div class="flex gap-4 p-4 pb-3">
+				<div class="flex flex-wrap gap-4 p-4 pb-3">
 					<RefetchController
 						{refetchInterval}
 						allowLive
@@ -216,8 +216,8 @@
 					{/if}
 				</div>
 			{/if}
-			<div class="flex h-full w-full gap-4 p-4">
-				<div class="grow">
+			<div class="flex h-full w-full flex-wrap gap-4 p-4">
+				<div class="min-w-0 grow basis-80">
 					{#if isPlaying}
 						{#if displayAs360}
 							{#if isLive}
@@ -242,6 +242,7 @@
 								{partID}
 								{resourceName}
 								showResolutionOptions
+								videoClass="h-auto max-w-full"
 								{isLive}
 								data={imageQuery.data}
 								error={imageQuery.error}
@@ -252,7 +253,7 @@
 							/>
 						{/if}
 					{:else}
-						<div class="bg-medium flex h-64 w-80 items-center justify-center">
+						<div class="bg-medium flex h-64 w-full max-w-80 items-center justify-center">
 							<Button
 								icon="play-circle-outline"
 								variant="dark"
@@ -266,7 +267,7 @@
 					{/if}
 				</div>
 				{#if isPlaying}
-					<div class="flex flex-col items-start gap-2">
+					<div class="flex shrink-0 flex-col items-start gap-2">
 						<ExportScreenshot
 							name={client.current?.name ?? ''}
 							sourceName={selectedSource}

package/dist/components/widgets/camera/live-or-polling-video.svelte

@@ -339,7 +339,7 @@
 {#if lastError}
 	<ContentRect
 		{contentRect}
-		cx="bg-medium/50 absolute flex h-64 w-80 items-center justify-center"
+		cx="bg-medium/50 absolute flex h-64 w-80 max-w-full items-center justify-center"
 	>
 		<ErrorDisplay
 			class="pb-4"
@@ -349,7 +349,7 @@
 {:else if isLive ? isStreamLoading : isLoading}
 	<ContentRect
 		{contentRect}
-		cx="absolute h-64 w-80"
+		cx="absolute h-64 w-80 max-w-full"
 	>
 		<Progress />
 	</ContentRect>

package/dist/components/widgets/discovery/resources-list.svelte

@@ -66,44 +66,46 @@
 				<div slot="description">Copy JSON</div>
 			</Tooltip>
 		</div>
-		<dl class="font-roboto-mono flex flex-col gap-y-4">
-			{#each sortedData as value (value)}
-				{@const valueString = JSON.stringify(value, null, 2)}
-				{@const preview = previews[value.name]}
-				<div class="flex flex-col gap-y-2">
-					<div class="flex flex-row">
-						<dt class="text-default flex w-50 min-w-50 flex-col gap-2 pr-2 font-medium">
-							<span class="truncate">{value.name}</span>
-							{#if onAddComponent}
+		<div class="@container">
+			<dl class="font-roboto-mono flex flex-col gap-y-4">
+				{#each sortedData as value (value)}
+					{@const valueString = JSON.stringify(value, null, 2)}
+					{@const preview = previews[value.name]}
+					<div class="flex flex-col gap-y-2">
+						<div class="flex flex-col gap-y-2 @lg:flex-row @lg:gap-y-0">
+							<dt class="text-default flex flex-col gap-2 pr-2 font-medium @lg:w-50 @lg:min-w-50">
+								<span class="truncate">{value.name}</span>
+								{#if onAddComponent}
+									<Button
+										class="w-fit"
+										icon="plus"
+										onclick={() => onAddComponent(parseComponentConfig(value))}
+									>
+										Add component
+									</Button>
+								{/if}
 								<Button
 									class="w-fit"
-									icon="plus"
-									onclick={() => onAddComponent(parseComponentConfig(value))}
+									icon="content-copy"
+									onclick={async () => copyAttributes(value)}
 								>
-									Add component
+									Copy attributes
 								</Button>
-							{/if}
-							<Button
-								class="w-fit"
-								icon="content-copy"
-								onclick={async () => copyAttributes(value)}
-							>
-								Copy attributes
-							</Button>
-						</dt>
-						<dd class="text-subtle-1 min-w-50">
-							<div class="border-light bg-extralight relative min-w-50 border px-3 py-2">
-								<pre class="whitespace-pre-wrap"><code>{valueString}</code></pre>
+							</dt>
+							<dd class="text-subtle-1 min-w-0 grow">
+								<div class="border-light bg-extralight relative border px-3 py-2">
+									<pre class="wrap-break-word whitespace-pre-wrap"><code>{valueString}</code></pre>
+								</div>
+							</dd>
+						</div>
+						{#if preview}
+							<div class="flex w-full @lg:pl-50">
+								{@render componentPreview?.(preview)}
 							</div>
-						</dd>
+						{/if}
 					</div>
-					{#if preview}
-						<div class="flex w-full pl-50">
-							{@render componentPreview?.(preview)}
-						</div>
-					{/if}
-				</div>
-			{/each}
-		</dl>
+				{/each}
+			</dl>
+		</div>
 	</div>
 {/if}

package/dist/components/widgets/do-command/do-command.svelte

@@ -79,51 +79,54 @@
 			{@render header({ input: displayInput, setInput })}
 		</div>
 	{/if}
-	<div class="flex flex-row items-center justify-between">
-		<div class="flex w-[45%] flex-col gap-2 border-r py-2">
-			<span class="text-gray-9 px-4 text-sm font-medium">Input</span>
-			<CodeEditor
-				label="input"
-				language="json"
-				value={displayInput}
-				onChange={(nextInput: string) => {
-					updateInput(nextInput)
-				}}
-				class="h-56 overflow-y-auto"
-				errorMessageID={lastErr ? uid : undefined}
-			/>
-		</div>
+	<div class="@container">
+		<div class="flex flex-col @2xl:flex-row">
+			<div class="flex min-w-0 flex-col gap-2 py-2 @2xl:flex-1">
+				<span class="text-gray-9 px-4 text-sm font-medium">Input</span>
+				<CodeEditor
+					label="input"
+					language="json"
+					value={displayInput}
+					onChange={(nextInput: string) => {
+						updateInput(nextInput)
+					}}
+					class="h-40 overflow-y-auto @2xl:h-56"
+					errorMessageID={lastErr ? uid : undefined}
+				/>
+			</div>
+
+			<div
+				class="flex shrink-0 items-center justify-center border-y px-4 py-2 @2xl:border-x @2xl:border-y-0 @2xl:py-0"
+			>
+				<Button onclick={execute}>Execute</Button>
+			</div>
 
-		<Button
-			class="m-auto"
-			onclick={execute}>Execute</Button
-		>
-
-		<div class="flex w-[45%] flex-col gap-2 border-l py-2">
-			<div class="flex flex-row items-center">
-				<span class="text-gray-9 px-4 text-sm font-medium">Output</span>
-				{#if doCommandMutation.isPending}
-					<Progress
-						size="medium"
-						variant="dark"
+			<div class="flex min-w-0 flex-col gap-2 py-2 @2xl:flex-1">
+				<div class="flex flex-row items-center">
+					<span class="text-gray-9 px-4 text-sm font-medium">Output</span>
+					{#if doCommandMutation.isPending}
+						<Progress
+							size="medium"
+							variant="dark"
+						/>
+					{/if}
+				</div>
+				{#if !lastErr}
+					<CodeEditor
+						label="output"
+						language="json"
+						value={output}
+						readonly
+						class="h-40 overflow-y-auto @2xl:h-56"
+					/>
+				{:else}
+					<ErrorDisplay
+						id={uid}
+						class="h-40 px-4 @2xl:h-56"
+						lastError={lastErr}
 					/>
 				{/if}
 			</div>
-			{#if !lastErr}
-				<CodeEditor
-					label="output"
-					language="json"
-					value={output}
-					readonly
-					class="h-56 overflow-y-auto"
-				/>
-			{:else}
-				<ErrorDisplay
-					id={uid}
-					class="h-56 px-4"
-					lastError={lastErr}
-				/>
-			{/if}
 		</div>
 	</div>
 {:else}

package/dist/components/widgets/gantry/gantry.svelte

@@ -45,113 +45,117 @@
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		<div class="flex flex-row divide-x">
-			<div class="flex grow flex-row divide-x">
-				<ApiSection
-					bottomText="Updates automatically"
-					aria-labelledby={positionHeadingID}
-				>
-					<h3
-						class="text-subtle-2 flex flex-row items-center gap-1 text-sm"
-						id={positionHeadingID}
-					>
-						<a
-							href={apiDocsHref('rdk:component:gantry', 'getPosition')}
-							target="_blank"
-							rel="noopener noreferrer external"
-							class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+		<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="flex flex-col divide-y @2xl:flex-row @2xl:divide-x @2xl:divide-y-0">
+						<ApiSection
+							bottomText="Updates automatically"
+							aria-labelledby={positionHeadingID}
 						>
-							GetPosition
-						</a>
-						and
-						<a
-							href={apiDocsHref('rdk:component:gantry', 'getLengths')}
-							target="_blank"
-							rel="noopener noreferrer external"
-							class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+							<h3
+								class="text-subtle-2 flex flex-row items-center gap-1 text-sm"
+								id={positionHeadingID}
+							>
+								<a
+									href={apiDocsHref('rdk:component:gantry', 'getPosition')}
+									target="_blank"
+									rel="noopener noreferrer external"
+									class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+								>
+									GetPosition
+								</a>
+								and
+								<a
+									href={apiDocsHref('rdk:component:gantry', 'getLengths')}
+									target="_blank"
+									rel="noopener noreferrer external"
+									class="decoration-gray-5 hover:decoration-default text-default font-mono font-semibold underline underline-offset-3"
+								>
+									GetLengths
+								</a>
+							</h3>
+							<Queries queries={[positionQuery, lengthsQuery]}>
+								{@const positions = positionQuery.data}
+								{@const lengths = lengthsQuery.data ?? []}
+								{#if positions !== undefined}
+									<PositionAndLengths
+										{positions}
+										{lengths}
+									/>
+								{/if}
+							</Queries>
+						</ApiSection>
+						<ApiSection
+							title="MoveToPosition"
+							api="rdk:component:gantry"
 						>
-							GetLengths
-						</a>
-					</h3>
-					<Queries queries={[positionQuery, lengthsQuery]}>
-						{@const positions = positionQuery.data}
-						{@const lengths = lengthsQuery.data ?? []}
-						{#if positions !== undefined}
-							<PositionAndLengths
-								{positions}
-								{lengths}
-							/>
-						{/if}
-					</Queries>
-				</ApiSection>
-				<ApiSection
-					title="MoveToPosition"
-					api="rdk:component:gantry"
-				>
-					<Query query={positionQuery}>
-						{@const positions = positionQuery.data}
-						{#if positions !== undefined}
-							<MoveToPosition
-								{positions}
-								lastError={moveMutation.error}
-								moveTo={(newPos: number[], speeds: number[]) => {
-									moveMutation.mutate([newPos, speeds], {})
-								}}
-							/>
-						{/if}
-					</Query>
-				</ApiSection>
-				<div class="flex grow flex-col divide-y">
-					<ApiSection
-						title="Quick move"
-						bottomText="Press a button to execute"
-					>
-						<Query
-							query={positionQuery}
-							contentCx="h-6"
-						>
-							{@const positions = positionQuery.data}
-							{#if positions !== undefined}
-								<QuickMove
-									{positions}
-									lastError={quickMoveMutation.error}
-									moveTo={(newPos: number[], speeds: number[]) => {
-										quickMoveMutation.mutate([newPos, speeds], {})
-									}}
+							<Query query={positionQuery}>
+								{@const positions = positionQuery.data}
+								{#if positions !== undefined}
+									<MoveToPosition
+										{positions}
+										lastError={moveMutation.error}
+										moveTo={(newPos: number[], speeds: number[]) => {
+											moveMutation.mutate([newPos, speeds], {})
+										}}
+									/>
+								{/if}
+							</Query>
+						</ApiSection>
+						<div class="flex grow flex-col divide-y">
+							<ApiSection
+								title="Quick move"
+								bottomText="Press a button to execute"
+							>
+								<Query
+									query={positionQuery}
+									contentCx="h-6"
+								>
+									{@const positions = positionQuery.data}
+									{#if positions !== undefined}
+										<QuickMove
+											{positions}
+											lastError={quickMoveMutation.error}
+											moveTo={(newPos: number[], speeds: number[]) => {
+												quickMoveMutation.mutate([newPos, speeds], {})
+											}}
+										/>
+									{/if}
+								</Query>
+							</ApiSection>
+							<ApiSection
+								title="Home"
+								api="rdk:component:gantry"
+								description="Run the homing sequence"
+							>
+								<Home
+									{partID}
+									{resourceName}
 								/>
-							{/if}
-						</Query>
-					</ApiSection>
+							</ApiSection>
+						</div>
+					</div>
+				</div>
+				<div class="flex flex-col divide-y @4xl:ml-auto @4xl:w-full @4xl:max-w-40">
 					<ApiSection
-						title="Home"
+						title="Stop"
 						api="rdk:component:gantry"
-						description="Run the homing sequence"
 					>
-						<Home
-							{partID}
-							{resourceName}
+						<StopButton
+							error={stopMutation.error}
+							onStop={() => {
+								stopMutation.mutate([])
+							}}
 						/>
 					</ApiSection>
-				</div>
-			</div>
-			<div class="ml-auto flex w-full max-w-40 flex-col divide-y">
-				<ApiSection
-					title="Stop"
-					api="rdk:component:gantry"
-				>
-					<StopButton
-						error={stopMutation.error}
-						onStop={() => {
-							stopMutation.mutate([])
-						}}
+					<IsMoving
+						client={GantryClient}
+						api="rdk:component:gantry"
+						{partID}
+						{resourceName}
 					/>
-				</ApiSection>
-				<IsMoving
-					client={GantryClient}
-					api="rdk:component:gantry"
-					{partID}
-					{resourceName}
-				/>
+				</div>
 			</div>
 		</div>
 	{/snippet}

package/dist/components/widgets/gantry/move-to-position.svelte

@@ -109,7 +109,7 @@
 				</span>
 			</Tooltip>
 		</span>
-		<div class="flex flex-row gap-2">
+		<div class="flex flex-wrap gap-2">
 			<Button onclick={resetToZero}>Zero</Button>
 			<Button onclick={resetToCurrent}>Current position</Button>
 		</div>

package/dist/components/widgets/gripper/gripper.svelte

@@ -29,51 +29,53 @@
 
 <ConnectionStatus {partID}>
 	{#snippet connected()}
-		<div class="flex flex-row divide-x">
-			<span class="flex grow flex-row gap-4">
-				<ApiSection
-					title="Open"
-					api="rdk:component:gripper"
-					class="grow-0 gap-3 pr-0"
-				>
-					<Open
+		<div class="@container">
+			<div class="flex flex-col divide-y @lg:flex-row @lg:divide-x @lg:divide-y-0">
+				<span class="flex grow flex-wrap gap-4">
+					<ApiSection
+						title="Open"
+						api="rdk:component:gripper"
+						class="grow-0 gap-3 @xs:pr-0"
+					>
+						<Open
+							{partID}
+							{resourceName}
+						/>
+					</ApiSection>
+					<ApiSection
+						title="Grab"
+						api="rdk:component:gripper"
+						class="grow-0 gap-3 @xs:pl-0"
+					>
+						<Grab
+							{partID}
+							{resourceName}
+						/>
+					</ApiSection>
+				</span>
+				<div class="flex flex-col divide-y">
+					<ApiSection
+						title="Stop"
+						api="rdk:component:gripper"
+					>
+						<StopButton
+							error={stopMutation.error}
+							onStop={() => {
+								stopMutation.mutate([])
+							}}
+						/>
+					</ApiSection>
+					<IsMoving
+						client={GripperClient}
+						api="rdk:component:gripper"
 						{partID}
 						{resourceName}
 					/>
-				</ApiSection>
-				<ApiSection
-					title="Grab"
-					api="rdk:component:gripper"
-					class="grow-0 gap-3 pl-0"
-				>
-					<Grab
+					<IsHoldingSomething
 						{partID}
 						{resourceName}
 					/>
-				</ApiSection>
-			</span>
-			<div class="flex flex-col divide-y">
-				<ApiSection
-					title="Stop"
-					api="rdk:component:gripper"
-				>
-					<StopButton
-						error={stopMutation.error}
-						onStop={() => {
-							stopMutation.mutate([])
-						}}
-					/>
-				</ApiSection>
-				<IsMoving
-					client={GripperClient}
-					api="rdk:component:gripper"
-					{partID}
-					{resourceName}
-				/>
-				<IsHoldingSomething
-					{partID}
-					{resourceName}
-				/>
+				</div>
 			</div>
 		</div>
 	{/snippet}

package/dist/components/widgets/motor/go-for.svelte

@@ -13,7 +13,7 @@
 	let rpm = $state(10)
 </script>
 
-<div class="flex flex-row gap-4">
+<div class="flex flex-wrap gap-4">
 	<Label cx="max-w-[96px] grow gap-1 text-xs">
 		<p class="flex flex-row gap-1">
 			RPM

package/dist/components/widgets/motor/go-to.svelte

@@ -13,7 +13,7 @@
 	let rpm = $state(10)
 </script>
 
-<div class="flex flex-row gap-4">
+<div class="flex flex-wrap gap-4">
 	<Label cx="max-w-[96px] grow gap-1 text-xs">
 		<p class="flex flex-row gap-1">
 			RPM