+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/App.tsx b/examples/supported-devices-prototypes/src/App.tsx
new file mode 100644
index 000000000..6ae1fc81b
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/App.tsx
@@ -0,0 +1,456 @@
+import { useEffect, useRef, useState } from 'react'
+
+import {
+ getProvidersWithMissingRequirements,
+ resolveProviderRequirements,
+ scopeDeviceModelsToProvider,
+} from 'lib/seam/components/SupportedDevices/device-models.js'
+import { useEcosystemDeviceModelSummaries } from 'lib/seam/ecosystem/use-ecosystem-device-model-summaries.js'
+import { useEcosystemManufacturers } from 'lib/seam/ecosystem/use-ecosystem-manufacturers.js'
+import { useEcosystemProviderRequirements } from 'lib/seam/ecosystem/use-ecosystem-provider-requirements.js'
+
+import { AccessoryCatalog } from './AccessoryCatalog.js'
+import { BrandMark } from './BrandMark.js'
+import { CapabilityFilter } from './CapabilityFilter.js'
+import { CheckInfo } from './CheckInfo.js'
+import { reviewDevice } from './model.js'
+import { PhonePreview } from './PhonePreview.js'
+import { Picker } from './Picker.js'
+import {
+ postPreviewFilters,
+ type PreviewFilters,
+ previewReadyMessage,
+ readPreviewFilters,
+} from './preview-filters.js'
+import { RequirementPills } from './RequirementPills.js'
+import { Legend } from './shared.js'
+import { Stacked } from './Stacked.js'
+
+const variants = [
+ {
+ name: 'Current',
+ title: 'Two-line rows · current version',
+ description:
+ 'Capability-specific icons, with accessory and subscription requirements shown as pills. Open a row for the specific requirements.',
+ component: Stacked,
+ },
+ {
+ name: 'Checks',
+ title: 'Two-line rows · checks and info',
+ description:
+ 'Green checks indicate support. Amber info icons and requirement pills indicate additional setup. Capability names stay visible.',
+ component: CheckInfo,
+ },
+ {
+ name: 'Pills',
+ title: 'Two-line rows · requirement pills',
+ description:
+ 'The same check/info treatment, with accessory and subscription pills. Open a row for the specific requirements.',
+ component: RequirementPills,
+ },
+]
+const brands = [
+ { slug: 'nuki', label: 'Nuki', provider: 'nuki-web' },
+ { slug: 'august', label: 'August', provider: 'august-access' },
+ { slug: 'keyincode', label: 'KeyInCode', provider: 'keyincode' },
+ { slug: 'salto', label: 'Salto', provider: 'salto-ks' },
+]
+const params = new URLSearchParams(window.location.search)
+const isMobilePreview = params.get('view') === 'mobile'
+const requestedVariant = Number(params.get('v')) - 1
+const initialVariant =
+ Number.isInteger(requestedVariant) &&
+ requestedVariant >= 0 &&
+ requestedVariant < variants.length
+ ? requestedVariant
+ : 0
+
+export function App(): JSX.Element {
+ const [active, setActive] = useState(initialVariant)
+ const [replay, setReplay] = useState(0)
+ const [brandSlug, setBrandSlug] = useState(params.get('brand') ?? 'nuki')
+ const [dark, setDark] = useState(params.get('theme') === 'dark')
+ const [compare, setCompare] = useState(params.get('compare') !== '0')
+ const [requirementView, setRequirementView] = useState<'matrix' | 'list'>(
+ params.get('requirements') === 'matrix' ? 'matrix' : 'list'
+ )
+ const [search, setSearch] = useState(params.get('q') ?? '')
+ const [capabilities, setCapabilities] = useState(() => [
+ ...new Set(params.getAll('capability').filter((name) => name !== '')),
+ ])
+ const phoneRef = useRef{label}
+ {catalog.isLoading ? ( ++ Loading accessories… +
+ ) : ( + <> + {models.length > 0 && ( +-
+ {models.map((model) => {
+ const image = getDeviceModelImageUrl(model)
+ const name = getDeviceModelName(model)
+ const manufacturer = model.manufacturer
+ const href =
+ manufacturer == null || model.device_type == null
+ ? null
+ : `https://www.seam.co/${encodeURIComponent(model.device_type.slug)}s/${encodeURIComponent(manufacturer.slug)}_${encodeURIComponent(model.slug)}`
+ const content = (
+ <>
+ {image != null && (
+
-
+ {href == null ? (
+ {content}+ ) : ( + + {content} + + )} +
+ )
+ })}
+
+ {name}
+ {manufacturer != null && (
+
+ {manufacturer.display_name ?? manufacturer.slug}
+
+ )}
+
+ {href != null && (
+
+ ↗
+
+ )}
+
+ )
+ return (
+ + Some accessory details couldn’t be loaded. +
+ )} + + )} +Design review unavailable.
+ const Variant = variant.component + + const catalog = ( +
+ Brand guides / {brand.label}
+
+ View live guide ↗
+
+
+ Supported devices
++ Supported capabilities at a glance. Open a row for setup requirements + and model details. +
+
+
+ {
+ changeFilters({ search, capabilities })
+ }}
+ />
+
+
+
+
+ {loading ? (
+
+
+
+ {loading ? 'Loading…' : `${filtered.length} devices`}
+
+ + Loading capabilities and requirements… +
+ ) : error ? ( +
+
+ ) : filtered.length === 0 ? (
+ We couldn’t load the complete device information.
+ +
+
+ ) : (
+ No devices match these filters.
+ +
+
+ device.providers
+ .filter(
+ (provider) => provider.integrationStatus !== 'unsupported'
+ )
+ .flatMap((provider) =>
+ provider.requirements.flatMap(
+ (requirement) => requirement.deviceSlugs ?? []
+ )
+ )
+ )}
+ >
+
+
+ )}
+
+ View {brand.label} in the device catalog ↗
+
+
+ {catalog}
+
+ )
+
+ return (
+
+
+
+
+
+ Option {active + 1} of {variants.length} · {variant.name}
+
+
+
+ item.name)}
+ active={active}
+ onChange={setActive}
+ onReplay={() => {
+ setReplay((value) => value + 1)
+ }}
+ />
+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/BrandMark.tsx b/examples/supported-devices-prototypes/src/BrandMark.tsx
new file mode 100644
index 000000000..6481e462d
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/BrandMark.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react'
+
+import type { DeviceAsset } from 'lib/seam/ecosystem/types.js'
+
+const logoKinds = [
+ 'square_logo',
+ 'horizontal_logo',
+ 'square_logo_mono',
+ 'horizontal_logo_mono',
+] as const
+
+export function BrandMark({
+ name,
+ logos,
+ className = '',
+}: {
+ name: string
+ logos?: DeviceAsset[]
+ className?: string
+}): JSX.Element {
+ const logo = logoKinds
+ .map((kind) => logos?.find((asset) => asset.kind === kind))
+ .find((asset) => asset != null)
+ const src = logo?.formats.small?.url ?? logo?.url
+ const initial = name.slice(0, 1)
+ return (
+
+ {src == null ? (
+ {initial}
+ ) : (
+ {variant.title}
+{variant.description}
++ Switch below or use keys 1–3 / ← →. R resets open details. +
+
+ Provider details
+
+
+
+
+
+
+ {compare && (
+
+ {compare && (
+
+ Desktop
+
+ {variant.name} · {brand.label}
+
+
+ )}
+ {catalog}
+ + Review prototype · Live Ecosystem catalog ·{' '} + + Dawn’s design feedback ↗ + +
+ {
+ if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false)
+ }}
+ onKeyDown={(event) => {
+ if (open) event.stopPropagation()
+ if (event.key === 'Escape' && open) {
+ event.preventDefault()
+ setOpen(false)
+ trigger.current?.focus()
+ } else if (
+ event.key === 'ArrowDown' &&
+ event.target === trigger.current
+ ) {
+ event.preventDefault()
+ event.stopPropagation()
+ setOpen(true)
+ root.current?.querySelector('input')?.focus()
+ }
+ }}
+ >
+ Capabilities
+
+ {open && (
+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/CheckInfo.tsx b/examples/supported-devices-prototypes/src/CheckInfo.tsx
new file mode 100644
index 000000000..30e0bd02e
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/CheckInfo.tsx
@@ -0,0 +1,28 @@
+import type { VariantProps } from './model.js'
+import { CompactRow, DeviceIdentity, Features } from './shared.js'
+
+export function CheckInfo({
+ devices,
+ requirementView,
+}: VariantProps): JSX.Element {
+ return (
+
+
+ )}
+ Show devices supporting every selected capability.
+ + +
+
+
+
+
+ ))}
+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/HardwareGallery.tsx b/examples/supported-devices-prototypes/src/HardwareGallery.tsx
new file mode 100644
index 000000000..27ddeb3d7
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/HardwareGallery.tsx
@@ -0,0 +1,264 @@
+import { useEffect, useId, useRef, useState } from 'react'
+
+import type {
+ DeviceImage,
+ DeviceModelSummary,
+} from 'lib/seam/ecosystem/types.js'
+
+interface GalleryImage {
+ image: DeviceImage
+ label: string
+}
+
+export function HardwareGallery({
+ source,
+ name,
+}: {
+ source: DeviceModelSummary
+ name: string
+}): JSX.Element {
+ const seen = new Set
+ Device & supported capabilities
+
+ {devices.map((device) => (
+
+ {swatches.length > 0 ? (
+
+ )
+}
+
+function largeImage(image: DeviceImage): string {
+ return image.formats.large?.url ?? image.formats.medium?.url ?? image.url
+}
diff --git a/examples/supported-devices-prototypes/src/HardwareInformation.tsx b/examples/supported-devices-prototypes/src/HardwareInformation.tsx
new file mode 100644
index 000000000..f216e4124
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/HardwareInformation.tsx
@@ -0,0 +1,98 @@
+import type { DeviceModelSummary } from 'lib/seam/ecosystem/types.js'
+
+import { HardwareGallery } from './HardwareGallery.js'
+import type { ReviewDevice } from './model.js'
+
+export function HardwareInformation({
+ device,
+}: {
+ device: ReviewDevice
+}): JSX.Element {
+ const { source, name } = device
+ const facts = hardwareFacts(source)
+ return (
+
+ {swatches.map(({ color, label, index }) => (
+
+ ))}
+ {photos.length > 0 && swatches.every(({ index }) => index < 0) && (
+
+ )}
+
+ ) : photos.length > 0 ? (
+
+ ) : (
+ Not listed
+ )}
+ {hovered != null && hoverPhoto != null && (
+
+ })
+ {hoverPhoto.label === '' ? name : hoverPhoto.label}
+
+ )}
+
+ Hardware information
+-
+ {facts.map(({ label, value }) => (
+
- + {label} + {label === 'Model numbers' && source.manufacturer != null && ( + + ↗ + + )} + +
- {value} +
- Colors +
-
+
+
+
+
+ ))}
+
+
+ Capabilities not confirmed.
+ ) : view === 'matrix' ? ( + {
+ if (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
+ event.stopPropagation()
+ }}
+ >
+
+
+
+ ) : (
+ | Capability | + {visibleColumns.map(({ kind, label }) => ( +
+ |
+ ))}
+
|---|---|
| {capability.label} | + {visibleColumns.map(({ kind, label }) => { + const required = capability.messages.some((message) => + getRequirementKinds(message).includes(kind) + ) + return ( +
+ {required ? (
+
+ |
+ )
+ })}
+
| Capability | ++ Supported + | +Requirements | +
|---|---|---|
| {capability.label} | +
+
+ |
+
+
+ {visibleColumns
+ .filter(({ kind }) =>
+ capability.messages.some((message) =>
+ getRequirementKinds(message).includes(kind)
+ )
+ )
+ .map(({ kind, label }) => (
+
+
+ |
+
+
+
-
+ {provider.requirements.map(({ message, deviceSlugs }) => (
+
-
+
+ ++{message}
++
+ ))}
+
+
+
+
+
+ ))}
+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/Stacked.tsx b/examples/supported-devices-prototypes/src/Stacked.tsx
new file mode 100644
index 000000000..6472a1183
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/Stacked.tsx
@@ -0,0 +1,28 @@
+import type { VariantProps } from './model.js'
+import { CompactRow, DeviceIdentity, Features } from './shared.js'
+
+export function Stacked({
+ devices,
+ requirementView,
+}: VariantProps): JSX.Element {
+ return (
+
+ Device & supported capabilities
+
+ {devices.map((device) => (
+
+
+
+
+
+ ))}
+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/StatusMarks.tsx b/examples/supported-devices-prototypes/src/StatusMarks.tsx
new file mode 100644
index 000000000..3726d71b3
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/StatusMarks.tsx
@@ -0,0 +1,32 @@
+export function InfoMark(): JSX.Element {
+ return (
+
+ )
+}
+
+export function CheckMark(): JSX.Element {
+ return (
+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/main.tsx b/examples/supported-devices-prototypes/src/main.tsx
new file mode 100644
index 000000000..34ce7ef17
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/main.tsx
@@ -0,0 +1,20 @@
+import './theme.scss'
+import './style.css'
+
+import { createRoot } from 'react-dom/client'
+
+import { EcosystemProvider } from 'lib/seam/ecosystem/EcosystemProvider.js'
+
+import { App } from './App.js'
+
+const root = document.getElementById('root')
+if (root != null)
+ createRoot(root).render(
+
+ Device & supported capabilities
+
+ {devices.map((device) => (
+
+
+ {children}
+ {showRequirementPills && conditional ? (
+
+
+ )
+}
+
+function PillDisclosure({ device }: { device: ReviewDevice }): JSX.Element {
+ return (
+
+
+ {getRequirementPills(device).map((pill) => (
+
+ {pill.label}
+
+ ))}
+
+
+
+ Open requirements and model details
+
+
+ )
+}
+
+function ExpandedDetails({
+ device,
+ requirementView,
+}: {
+ device: ReviewDevice
+ requirementView: 'matrix' | 'list'
+}): JSX.Element {
+ return (
+
+ {children}
+ {showRequirementPills && conditional ? (
+
+
+
+
+
+ )
+}
+
+export function Legend(): JSX.Element {
+ return (
+ Available providers
+-
+ {device.providers.map((provider) => (
+
-
+ ++
+ + {provider.display_name ?? provider.slug} + {provider.primary && This guide} + {provider.integrationStatus === 'unsupported' && ( + Not supported + )} +++
+ ))}
+
+
+
+ Supported
+
+
+
+ )
+}
diff --git a/examples/supported-devices-prototypes/src/style.css b/examples/supported-devices-prototypes/src/style.css
new file mode 100644
index 000000000..323d4dd34
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/style.css
@@ -0,0 +1,1515 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ margin: 0;
+}
+.seam-proto-mobile-document {
+ overscroll-behavior-y: contain;
+}
+.seam-proto-page {
+ min-height: 100vh;
+ background: var(--seam-ecosystem-surface-2);
+ font-family:
+ Roboto,
+ -apple-system,
+ BlinkMacSystemFont,
+ 'Segoe UI',
+ sans-serif;
+}
+.seam-proto-page :is(button, input, select) {
+ font: inherit;
+}
+.seam-proto-page :is(button, select, summary) {
+ cursor: pointer;
+}
+.seam-proto-page :focus-visible {
+ outline: 2px solid var(--seam-ecosystem-accent);
+ outline-offset: 3px;
+}
+.seam-proto-page :is(h1, h2, h3, h4, p) {
+ margin: 0;
+}
+.seam-proto-page h1 {
+ font-size: 21px;
+ line-height: 1.3;
+ letter-spacing: -0.4px;
+ font-weight: 550;
+}
+.seam-proto-page h2 {
+ font-size: 22px;
+ font-weight: 550;
+ letter-spacing: -0.5px;
+}
+.seam-proto-page strong {
+ font-weight: 550;
+}
+.seam-proto-muted {
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 13px;
+}
+.seam-proto-page a {
+ color: var(--seam-ecosystem-accent);
+ text-underline-offset: 3px;
+}
+.seam-proto-review-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10px 24px;
+ gap: 16px;
+ border-bottom: 1px solid var(--seam-ecosystem-line-1);
+ background: var(--seam-ecosystem-surface-1);
+ font-size: 14px;
+}
+.seam-proto-review-controls {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+.seam-proto-review-controls label {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 12px;
+ color: var(--seam-ecosystem-fg-2);
+}
+.seam-proto-page :is(input, select),
+.seam-proto-review-controls button,
+.seam-proto-state button {
+ color: var(--seam-ecosystem-fg-1);
+ background: var(--seam-ecosystem-surface-1);
+ border: 1px solid var(--seam-ecosystem-line-2);
+ border-radius: 7px;
+ min-height: 36px;
+ padding: 6px 10px;
+}
+.seam-proto-review-controls button[aria-pressed='true'] {
+ background: var(--seam-ecosystem-surface-2);
+}
+.seam-proto-workspace {
+ max-width: 1010px;
+ margin: 0 auto;
+ padding: 24px 24px 100px;
+}
+.seam-proto-workspace-compare {
+ max-width: 1480px;
+}
+.seam-proto-comparison {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 414px;
+ align-items: start;
+ gap: 28px;
+}
+.seam-proto-browser-preview,
+.seam-proto-phone-preview {
+ min-width: 0;
+}
+.seam-proto-preview-label {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 12px;
+ font-size: 13px;
+}
+.seam-proto-preview-label > span {
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+}
+.seam-proto-phone-preview {
+ width: 414px;
+ max-width: 100%;
+}
+.seam-proto-phone {
+ width: 100%;
+ padding: 10px;
+ border: 2px solid #57595c;
+ border-radius: 52px;
+ background: #17181a;
+ box-shadow:
+ 0 20px 40px -20px #0005,
+ inset 0 0 0 1px #08090a;
+}
+.seam-proto-phone-screen {
+ position: relative;
+ overflow: hidden;
+ border-radius: 40px;
+ background: var(--seam-ecosystem-surface-1);
+}
+.seam-proto-phone-status {
+ position: relative;
+ display: flex;
+ height: 54px;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 26px;
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--seam-ecosystem-fg-1);
+}
+.seam-proto-phone-island {
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ width: 112px;
+ height: 30px;
+ border-radius: 20px;
+ background: #08090a;
+ transform: translateX(-50%);
+}
+.seam-proto-phone-content {
+ display: block;
+ width: 100%;
+ height: 790px;
+ border: 0;
+ background: var(--seam-ecosystem-surface-1);
+}
+.seam-proto-phone-home {
+ position: absolute;
+ bottom: 7px;
+ left: 50%;
+ width: 120px;
+ height: 4px;
+ border-radius: 4px;
+ background: var(--seam-ecosystem-fg-1);
+ pointer-events: none;
+ transform: translateX(-50%);
+}
+.seam-proto-phone-hint {
+ margin-top: 12px !important;
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+ text-align: center;
+}
+.seam-proto-mobile-page .seam-proto-workspace {
+ padding: 0 0 24px;
+}
+.seam-proto-mobile-page .seam-proto-stage {
+ border: 0;
+ border-radius: 0;
+}
+@media (max-width: 1199px) {
+ .seam-proto-comparison {
+ grid-template-columns: minmax(0, 1fr);
+ }
+ .seam-proto-phone-preview {
+ justify-self: center;
+ }
+}
+.seam-proto-intro {
+ margin-bottom: 20px;
+}
+.seam-proto-eyebrow {
+ display: block;
+ font-size: 11px;
+ font-weight: 550;
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+ color: var(--seam-ecosystem-fg-2);
+ margin-bottom: 6px;
+}
+.seam-proto-intro p {
+ font-size: 13px;
+ color: var(--seam-ecosystem-fg-2);
+ margin-top: 6px;
+}
+.seam-proto-intro .seam-proto-shortcuts {
+ font-size: 11px;
+}
+.seam-proto-stage {
+ background: var(--seam-ecosystem-surface-1);
+ border: 1px solid var(--seam-ecosystem-line-1);
+ border-radius: 10px;
+ padding: 24px 20px;
+}
+.seam-proto-context {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 8px;
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+ margin-bottom: 12px;
+}
+.seam-proto-stage-description {
+ font-size: 13px;
+ color: var(--seam-ecosystem-fg-2);
+ margin-top: 4px !important;
+}
+.seam-proto-filters {
+ display: flex;
+ align-items: end;
+ gap: 12px;
+ margin-top: 16px;
+}
+.seam-proto-filters label {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+ min-width: 0;
+}
+.seam-proto-filters :is(input, select) {
+ width: 100%;
+ font-size: 13px;
+}
+.seam-proto-search {
+ flex: 1;
+}
+.seam-proto-capability-filter {
+ position: relative;
+ display: flex;
+ flex: 0 0 200px;
+ flex-direction: column;
+ gap: 4px;
+ min-width: 0;
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+}
+.seam-proto-page .seam-proto-capability-trigger {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ width: 100%;
+ min-height: 36px;
+ padding: 7px 12px;
+ border: 1px solid var(--seam-ecosystem-line-2);
+ border-radius: 7px;
+ color: var(--seam-ecosystem-fg-1);
+ background: var(--seam-ecosystem-surface-1);
+ font-size: 13px;
+ text-align: left;
+}
+.seam-proto-capability-trigger > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.seam-proto-filter-chevron {
+ flex-shrink: 0;
+}
+.seam-proto-capability-trigger[aria-expanded='true']
+ .seam-proto-filter-chevron {
+ transform: rotate(180deg);
+}
+.seam-proto-capability-options {
+ position: absolute;
+ z-index: 10;
+ top: calc(100% + 6px);
+ right: 0;
+ width: 280px;
+ max-width: calc(100vw - 28px);
+ max-height: 60vh;
+ overflow-y: auto;
+ padding: 8px;
+ border: 1px solid var(--seam-ecosystem-line-2);
+ border-radius: 10px;
+ background: var(--seam-ecosystem-surface-1);
+ box-shadow: 0 8px 24px #0002;
+}
+.seam-proto-capability-options > p {
+ padding: 4px 8px 8px;
+ font-size: 12px;
+ line-height: 1.5;
+}
+.seam-proto-capability-options fieldset {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+.seam-proto-filters .seam-proto-capability-option {
+ flex-direction: row;
+ align-items: center;
+ gap: 10px;
+ min-height: 40px;
+ padding: 8px;
+ border-radius: 6px;
+ color: var(--seam-ecosystem-fg-1);
+ font-size: 13px;
+ cursor: pointer;
+}
+.seam-proto-capability-option:hover {
+ background: var(--seam-ecosystem-surface-2);
+}
+.seam-proto-filters .seam-proto-capability-option input {
+ flex: 0 0 16px;
+ width: 16px;
+ height: 16px;
+ min-height: 0;
+ margin: 0;
+ padding: 0;
+ accent-color: var(--seam-ecosystem-accent);
+}
+.seam-proto-page .seam-proto-capability-clear {
+ min-height: 36px;
+ margin-top: 4px;
+ padding: 6px 8px;
+ border: 0;
+ border-radius: 6px;
+ color: var(--seam-ecosystem-accent);
+ background: transparent;
+ font-size: 12px;
+}
+.seam-proto-capability-clear:disabled {
+ opacity: 0.5;
+ cursor: default;
+}
+.seam-proto-catalog-heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ padding: 18px 0 10px;
+ font-size: 16px;
+}
+.seam-proto-manufacturer {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+}
+.seam-proto-brand-mark {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 32px;
+ width: 32px;
+ height: 32px;
+ padding: 4px;
+ border: 1px solid #e5e6e8;
+ border-radius: 7px;
+ background: #fff;
+ color: #33373b;
+ font-size: 15px;
+ font-weight: 600;
+}
+.seam-proto-brand-mark img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+.seam-proto-catalog-heading > span {
+ font-size: 12px;
+ color: var(--seam-ecosystem-fg-2);
+}
+.seam-proto-catalog-link {
+ display: inline-block;
+ font-size: 12px;
+ margin-top: 18px;
+}
+.seam-proto-review-note {
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+ text-align: center;
+ margin-top: 16px !important;
+}
+.seam-proto-state {
+ padding: 28px 0;
+ font-size: 14px;
+ color: var(--seam-ecosystem-fg-2);
+}
+.seam-proto-state button {
+ margin-top: 12px;
+}
+.seam-compact-legend {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px 18px;
+ margin-bottom: 14px;
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+}
+.seam-compact-legend > span {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+}
+.seam-compact-legend > span:first-child svg {
+ color: var(--seam-compact-green);
+}
+.seam-compact-legend > span:last-child svg {
+ color: var(--seam-compact-orange);
+}
+.seam-compact-list-heading {
+ display: grid;
+ grid-template-columns: minmax(230px, 1fr) minmax(0, 1.5fr);
+ padding: 10px 12px;
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+ border-block: 1px solid var(--seam-ecosystem-line-1);
+}
+.seam-compact-row {
+ border-bottom: 1px solid var(--seam-ecosystem-line-1);
+}
+.seam-compact-row-summary {
+ display: grid;
+ grid-template-columns: minmax(210px, 1fr) auto auto;
+ align-items: center;
+ gap: 14px;
+ min-height: 89px;
+ padding: 16px 12px;
+ list-style: none;
+}
+.seam-compact-row-summary::-webkit-details-marker {
+ display: none;
+}
+.seam-compact-row-summary > * {
+ min-width: 0;
+}
+.seam-compact-identity {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ min-width: 0;
+}
+.seam-compact-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 56px;
+ height: 56px;
+ padding: 6px;
+ flex-shrink: 0;
+ border-radius: 8px;
+ background: var(--seam-compact-tile);
+ box-shadow: var(--seam-compact-tile-shadow);
+}
+.seam-compact-image img {
+ width: 44px;
+ height: 44px;
+ object-fit: contain;
+}
+.seam-compact-identity-text {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ min-width: 0;
+}
+.seam-compact-device-type {
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+}
+.seam-compact-device-name {
+ font-size: 15px;
+ line-height: 1.4;
+ font-weight: 500;
+ overflow-wrap: anywhere;
+}
+.seam-compact-device-status {
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+}
+.seam-compact-features {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ align-items: center;
+}
+.seam-compact-feature {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 4px 7px;
+ border-radius: 6px;
+ color: var(--seam-compact-green);
+ background: var(--seam-compact-green-bg);
+ box-shadow: inset 0 0 0 0.5px rgb(9 10 11 / 8%);
+ font-size: 12px;
+ line-height: 16px;
+ white-space: nowrap;
+}
+.seam-compact-feature svg {
+ width: 15px;
+ height: 15px;
+ flex-shrink: 0;
+}
+.seam-compact-feature[data-conditional] {
+ color: var(--seam-compact-orange);
+ background: var(--seam-compact-orange-bg);
+}
+.seam-compact-disclosure {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 5px;
+ justify-self: end;
+ padding: 5px 7px;
+ min-height: 30px;
+ border-radius: 6px;
+ font-size: 12px;
+ color: var(--seam-ecosystem-fg-2);
+ white-space: nowrap;
+}
+.seam-compact-disclosure[data-conditional] {
+ color: var(--seam-compact-orange);
+ background: var(--seam-compact-orange-bg);
+ box-shadow: inset 0 0 0 0.5px rgb(9 10 11 / 8%);
+}
+.seam-compact-chevron {
+ flex-shrink: 0;
+}
+.seam-compact-row[open] > summary .seam-compact-chevron {
+ transform: rotate(180deg);
+}
+.seam-compact-row[open] > summary {
+ background: var(--seam-ecosystem-surface-2);
+}
+.seam-compact-expanded {
+ position: relative;
+ margin: 0 12px 20px 84px;
+ padding: 18px 20px 2px;
+ border-left: 1px dashed var(--seam-ecosystem-line-2);
+}
+.seam-compact-expanded::before {
+ position: absolute;
+ content: '';
+ top: 0;
+ left: -37px;
+ width: 36px;
+ height: 36px;
+ border-left: 1px dashed var(--seam-ecosystem-line-2);
+ border-bottom: 1px dashed var(--seam-ecosystem-line-2);
+ border-bottom-left-radius: 12px;
+}
+.seam-compact-detail-heading {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-size: 14px;
+}
+.seam-compact-detail-heading p {
+ font-size: 12px;
+ color: var(--seam-ecosystem-fg-2);
+ margin-top: 2px;
+}
+.seam-compact-requirements {
+ list-style: none;
+ margin: 16px 0;
+ padding: 0;
+ display: grid;
+ gap: 12px;
+}
+.seam-proto-requirement-picker {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 20px;
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 12px;
+}
+.seam-proto-requirement-picker button {
+ padding: 7px 10px;
+ border: 1px solid var(--seam-ecosystem-line-2);
+ border-radius: 7px;
+ background: var(--seam-ecosystem-surface-1);
+ color: var(--seam-ecosystem-fg-1);
+}
+.seam-proto-requirement-picker button[aria-pressed='true'] {
+ border-color: var(--seam-ecosystem-accent);
+ color: var(--seam-ecosystem-accent);
+}
+.seam-proto-hardware > h3,
+.seam-proto-providers > h3 {
+ font-size: 14px;
+ font-weight: 550;
+}
+.seam-proto-gallery {
+ min-width: 0;
+}
+.seam-proto-gallery-swatches {
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 128px;
+ gap: 0;
+}
+.seam-proto-gallery-swatch {
+ display: flex;
+ flex: 0 0 32px;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ padding: 6px;
+ border: 0;
+ border-radius: 50%;
+ background: transparent;
+ -webkit-tap-highlight-color: transparent;
+}
+.seam-proto-gallery-swatch:hover:not(:disabled) {
+ box-shadow: inset 0 0 0 1px var(--seam-ecosystem-line-2);
+}
+.seam-proto-gallery-color {
+ width: 18px;
+ height: 18px;
+ border: 1px solid rgb(127 127 127 / 40%);
+ border-radius: 50%;
+}
+.seam-proto-gallery-color[data-unknown] {
+ background: repeating-linear-gradient(
+ 135deg,
+ transparent,
+ transparent 3px,
+ var(--seam-ecosystem-line-2) 3px,
+ var(--seam-ecosystem-line-2) 4px
+ );
+}
+.seam-proto-gallery-photos {
+ min-height: 32px;
+ padding: 0;
+ border: 0;
+ background: transparent;
+ color: var(--seam-ecosystem-accent);
+ font-size: 12px;
+}
+.seam-proto-gallery-hover {
+ position: fixed;
+ z-index: 40;
+ width: 280px;
+ padding: 10px;
+ border: 1px solid #d8dce1;
+ border-radius: 12px;
+ background: #fff;
+ color: #33373b;
+ box-shadow: 0 12px 36px #0003;
+ pointer-events: none;
+}
+.seam-proto-gallery-hover img {
+ display: block;
+ width: 100%;
+ height: 260px;
+ object-fit: contain;
+}
+.seam-proto-gallery-hover > span {
+ display: block;
+ margin-top: 6px;
+ font-size: 12px;
+ text-align: center;
+}
+.seam-proto-gallery-dialog {
+ width: min(720px, calc(100vw - 32px));
+ max-width: none;
+ max-height: calc(100dvh - 32px);
+ overflow-y: auto;
+ padding: 16px;
+ border: 1px solid var(--seam-ecosystem-line-2);
+ border-radius: 14px;
+ background: var(--seam-ecosystem-surface-1);
+ color: var(--seam-ecosystem-fg-1);
+}
+.seam-proto-gallery-dialog::backdrop {
+ background: #0009;
+}
+.seam-proto-gallery-dialog header,
+.seam-proto-gallery-dialog footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+}
+.seam-proto-gallery-dialog h4 {
+ font-size: 14px;
+ font-weight: 550;
+}
+.seam-proto-gallery-dialog button {
+ display: inline-flex;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ min-width: 44px;
+ min-height: 44px;
+ border: 1px solid var(--seam-ecosystem-line-2);
+ border-radius: 8px;
+ background: var(--seam-ecosystem-surface-1);
+ color: var(--seam-ecosystem-fg-1);
+}
+.seam-proto-gallery-dialog footer {
+ margin-top: 12px;
+ font-size: 12px;
+}
+.seam-proto-gallery-dialog footer > span {
+ min-width: 0;
+ text-align: center;
+}
+.seam-proto-gallery-large-image {
+ display: block;
+ width: 100%;
+ height: min(65dvh, 600px);
+ margin-top: 12px;
+ border-radius: 8px;
+ background: #fff;
+ object-fit: contain;
+}
+.seam-proto-hardware {
+ container-type: inline-size;
+}
+.seam-proto-hardware-facts {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto auto auto;
+ align-items: start;
+ gap: 10px 20px;
+ margin: 0;
+}
+.seam-proto-hardware-facts > div {
+ min-width: 0;
+}
+.seam-proto-hardware-facts dt {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+}
+.seam-proto-hardware-facts dt a {
+ text-decoration: none;
+}
+.seam-proto-hardware-facts dd {
+ margin: 3px 0 0;
+ overflow-wrap: anywhere;
+ font-size: 12px;
+ line-height: 1.5;
+}
+.seam-proto-hardware-colors dd {
+ margin-top: -3px;
+}
+.seam-proto-providers {
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid var(--seam-ecosystem-line-1);
+}
+.seam-proto-provider-list {
+ display: grid;
+ gap: 20px;
+ margin: 20px 0 0 6px;
+ padding: 0 0 0 20px;
+ list-style: none;
+}
+.seam-proto-provider {
+ position: relative;
+ min-width: 0;
+ padding: 16px;
+ border: 1px solid var(--seam-ecosystem-line-1);
+ border-radius: 8px;
+ background: var(--seam-ecosystem-surface-2);
+ container-type: inline-size;
+}
+.seam-proto-provider::before {
+ position: absolute;
+ top: -20px;
+ bottom: 0;
+ left: -20px;
+ content: '';
+ border-left: 1px dashed var(--seam-ecosystem-line-2);
+}
+.seam-proto-provider::after {
+ position: absolute;
+ top: 32px;
+ left: -20px;
+ width: 20px;
+ content: '';
+ border-top: 1px dashed var(--seam-ecosystem-line-2);
+}
+.seam-proto-provider:last-child::before {
+ bottom: auto;
+ height: 52px;
+}
+.seam-proto-provider > .seam-compact-requirements {
+ margin-bottom: 0;
+}
+.seam-proto-provider-name {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 6px 10px;
+}
+.seam-proto-provider-name > span {
+ padding: 3px 6px;
+ border-radius: 5px;
+ background: var(--seam-ecosystem-surface-1);
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 10px;
+}
+.seam-proto-request-integration {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ min-height: 44px;
+ margin-top: 4px;
+ color: var(--seam-ecosystem-accent);
+ font-size: 12px;
+ text-underline-offset: 3px;
+}
+.seam-proto-matrix-scroll {
+ max-width: min(100%, 440px);
+ overflow-x: auto;
+ margin-top: 12px;
+}
+.seam-proto-requirement-matrix {
+ width: 100%;
+ min-width: 292px;
+ table-layout: fixed;
+ border-collapse: collapse;
+ font-size: 12px;
+}
+.seam-proto-requirement-matrix[data-extra-columns='1'] {
+ min-width: 356px;
+}
+.seam-proto-requirement-matrix[data-extra-columns='2'] {
+ min-width: 420px;
+}
+.seam-proto-requirement-matrix th,
+.seam-proto-requirement-matrix td {
+ padding: 10px 4px;
+ border-bottom: 1px solid var(--seam-ecosystem-line-1);
+ font-weight: 400;
+ text-align: center;
+}
+.seam-proto-requirement-matrix th:first-child {
+ text-align: left;
+}
+.seam-proto-requirement-matrix thead th:not(:first-child) {
+ width: 64px;
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 10px;
+}
+.seam-proto-requirement-matrix thead svg {
+ display: block;
+ width: 17px;
+ height: 17px;
+ margin: 0 auto 5px;
+}
+.seam-proto-matrix-required {
+ display: inline-flex;
+ color: var(--seam-compact-status-amber);
+}
+.seam-proto-matrix-none,
+.seam-proto-provider-empty {
+ color: var(--seam-ecosystem-fg-2);
+}
+.seam-proto-matrix-legend {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px 14px;
+ margin-top: 8px !important;
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 10px;
+}
+.seam-proto-matrix-legend > span {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+}
+.seam-proto-matrix-legend svg {
+ color: var(--seam-compact-status-amber);
+}
+.seam-proto-provider-empty {
+ margin-top: 12px !important;
+ font-size: 12px;
+}
+.seam-proto-capability-requirements {
+ width: min(100%, 560px);
+ table-layout: fixed;
+ border-collapse: collapse;
+ margin: 12px 0 0;
+ font-size: 12px;
+}
+.seam-proto-capability-requirements th,
+.seam-proto-capability-requirements td {
+ padding: 10px 0;
+ border-bottom: 1px solid var(--seam-ecosystem-line-1);
+ text-align: left;
+ vertical-align: top;
+ overflow-wrap: anywhere;
+}
+.seam-proto-capability-requirements th:first-child {
+ padding-right: 12px;
+}
+.seam-proto-capability-name-column {
+ width: 36%;
+}
+.seam-proto-capability-supported-column {
+ width: 72px;
+}
+.seam-proto-capability-requirements .seam-proto-capability-support-cell {
+ text-align: center;
+ padding-right: 12px;
+}
+.seam-proto-capability-supported {
+ display: inline-flex;
+ align-items: center;
+ min-height: 22px;
+ color: var(--seam-compact-green);
+}
+.seam-proto-capability-requirements thead th {
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+ font-weight: 400;
+}
+.seam-proto-capability-requirements tbody th {
+ font-weight: 500;
+ line-height: 22px;
+}
+.seam-proto-capability-pills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ align-items: flex-start;
+}
+.seam-proto-inline-requirement {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 3px 5px;
+ border-radius: 5px;
+ background: var(--seam-compact-status-amber-bg);
+ color: var(--seam-compact-status-amber);
+ font-size: 11px;
+}
+.seam-proto-inline-requirement svg {
+ width: 13px;
+ height: 13px;
+ flex-shrink: 0;
+}
+@container (max-width: 500px) {
+ .seam-proto-capability-name-column {
+ width: 33%;
+ }
+ .seam-proto-capability-supported-column {
+ width: 60px;
+ }
+ .seam-proto-capability-requirements .seam-proto-capability-support-cell {
+ padding-right: 4px;
+ }
+ .seam-proto-hardware-facts {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+ gap: 10px 12px;
+ }
+ .seam-proto-hardware-facts .seam-proto-model-numbers {
+ grid-column: 1 / -1;
+ }
+ .seam-proto-gallery-swatches {
+ max-width: 96px;
+ }
+ .seam-proto-capability-pills {
+ flex-direction: column;
+ flex-wrap: nowrap;
+ }
+}
+.seam-compact-requirements li {
+ display: flex;
+ align-items: start;
+ gap: 9px;
+ font-size: 14px;
+ line-height: 1.5;
+}
+.seam-compact-requirements .seam-supported-devices-requirement-icon {
+ width: 17px;
+ height: 19px;
+ color: var(--seam-compact-orange);
+ flex-shrink: 0;
+}
+.seam-compact-requirements li span {
+ display: block;
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+ margin-top: 2px;
+}
+.seam-proto-requirement-body {
+ flex: 1;
+ min-width: 0;
+}
+.seam-proto-accessories {
+ max-width: 400px;
+ margin-top: 10px;
+}
+.seam-proto-accessories-label,
+.seam-proto-accessories-state {
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+}
+.seam-proto-accessory-list {
+ margin: 4px 0 0;
+ padding: 0;
+ list-style: none;
+}
+.seam-proto-accessory-list > li {
+ display: block;
+}
+.seam-proto-accessory-list > li + li {
+ border-top: 1px solid var(--seam-ecosystem-line-1);
+}
+.seam-proto-accessory-link {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-height: 44px;
+ padding: 6px 0;
+ color: var(--seam-ecosystem-fg-1);
+ font-size: 12px;
+ line-height: 1.4;
+ text-decoration: none;
+}
+a.seam-proto-accessory-link:hover {
+ color: var(--seam-ecosystem-accent);
+}
+.seam-proto-accessory-link img {
+ flex-shrink: 0;
+ object-fit: contain;
+}
+.seam-proto-accessory-link > div {
+ min-width: 0;
+ overflow-wrap: anywhere;
+}
+.seam-compact-requirements .seam-proto-accessory-arrow {
+ margin: 0 0 0 auto;
+ font-size: 14px;
+}
+.seam-compact-model-info {
+ display: grid;
+ grid-template-columns: 1.5fr 1fr;
+ gap: 18px;
+ margin: 16px 0 8px;
+ padding-top: 12px;
+ border-top: 1px solid var(--seam-ecosystem-line-1);
+ font-size: 12px;
+ line-height: 1.5;
+}
+.seam-compact-model-info dt {
+ color: var(--seam-ecosystem-fg-2);
+ font-size: 11px;
+ margin-bottom: 4px;
+}
+.seam-compact-model-info dd {
+ margin: 0;
+ overflow-wrap: anywhere;
+}
+.seam-compact-product-link {
+ display: inline-block;
+ font-size: 12px;
+ margin: 8px 0;
+}
+.seam-compact-columns > summary,
+.seam-compact-column-heading {
+ grid-template-columns: minmax(210px, 1fr) auto 120px;
+}
+.seam-compact-column-heading {
+ display: grid;
+ align-items: center;
+ gap: 14px;
+ padding: 10px 12px;
+ font-size: 11px;
+ color: var(--seam-ecosystem-fg-2);
+ border-block: 1px solid var(--seam-ecosystem-line-1);
+}
+.seam-compact-column-labels,
+.seam-compact-column-cells {
+ display: grid;
+ grid-template-columns: repeat(var(--seam-compact-column-count), 76px);
+ align-items: center;
+ text-align: center;
+}
+.seam-compact-column-labels > span {
+ padding: 0 6px;
+}
+.seam-compact-column-cell {
+ display: inline-flex;
+ justify-content: center;
+}
+.seam-compact-feature-icon-only {
+ width: 32px;
+ height: 30px;
+ padding: 0;
+ justify-content: center;
+}
+.seam-compact-feature-icon-only svg {
+ width: 18px;
+ height: 18px;
+}
+.seam-compact-icon-label,
+.seam-compact-sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+}
+.seam-compact-stacked > summary {
+ grid-template-columns: minmax(0, 1fr) auto;
+}
+.seam-compact-stacked .seam-compact-identity-text {
+ gap: 7px;
+}
+.seam-compact-stacked .seam-compact-features {
+ gap: 14px;
+}
+.seam-compact-stacked .seam-compact-feature {
+ background: none;
+ box-shadow: none;
+ padding: 0;
+ font-size: 12px;
+}
+@media (max-width: 850px) {
+ .seam-compact-chips > summary {
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px 12px;
+ }
+ .seam-compact-chips .seam-compact-features {
+ grid-row: 2;
+ grid-column: 1 / -1;
+ padding-left: 72px;
+ }
+ .seam-compact-chips .seam-compact-disclosure {
+ grid-column: 2;
+ grid-row: 1;
+ }
+ .seam-compact-list-heading {
+ grid-template-columns: 1fr;
+ }
+ .seam-compact-list-heading > span:nth-child(2) {
+ display: none;
+ }
+}
+@media (max-width: 600px) {
+ .seam-proto-review-bar {
+ padding: 10px 14px;
+ flex-wrap: wrap;
+ }
+ .seam-proto-review-controls {
+ width: 100%;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ }
+ .seam-proto-workspace {
+ padding: 20px 10px 100px;
+ }
+ .seam-proto-intro {
+ padding: 0 4px;
+ }
+ .seam-proto-page h1 {
+ font-size: 19px;
+ }
+ .seam-proto-stage {
+ padding: 20px 0;
+ border-radius: 8px;
+ }
+ .seam-proto-stage > :not(.seam-proto-variant) {
+ margin-left: 14px;
+ margin-right: 14px;
+ }
+ .seam-proto-filters {
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+ .seam-proto-filters > label,
+ .seam-proto-capability-filter {
+ width: 100%;
+ flex-basis: 100%;
+ }
+ .seam-proto-filters :is(input, select),
+ .seam-proto-review-controls select {
+ font-size: 16px;
+ min-height: 40px;
+ }
+ .seam-proto-page .seam-proto-capability-trigger {
+ min-height: 40px;
+ font-size: 16px;
+ }
+ .seam-proto-filters .seam-proto-capability-option {
+ min-height: 44px;
+ }
+ .seam-compact-row-summary {
+ min-height: 81px;
+ gap: 10px;
+ padding: 12px 14px;
+ }
+ .seam-compact-image {
+ width: 48px;
+ height: 48px;
+ padding: 6px;
+ }
+ .seam-compact-image img {
+ width: 36px;
+ height: 36px;
+ }
+ .seam-compact-identity {
+ gap: 12px;
+ }
+ .seam-compact-device-name {
+ font-size: 14px;
+ }
+ .seam-compact-disclosure {
+ font-size: 11px;
+ gap: 4px;
+ padding: 5px;
+ }
+ .seam-compact-list-heading {
+ padding: 9px 14px;
+ }
+ .seam-compact-chips .seam-compact-features {
+ padding-left: 60px;
+ }
+ .seam-compact-feature {
+ padding: 3px 5px;
+ font-size: 11px;
+ gap: 4px;
+ }
+ .seam-compact-feature svg {
+ width: 14px;
+ height: 14px;
+ }
+ .seam-compact-expanded {
+ margin: 0 14px 16px;
+ padding: 16px 12px 0;
+ }
+ .seam-compact-expanded::before {
+ display: none;
+ }
+ .seam-proto-provider-list {
+ gap: 16px;
+ margin-left: 0;
+ padding-left: 0;
+ }
+ .seam-proto-provider {
+ padding: 14px 10px;
+ }
+ .seam-proto-provider::before,
+ .seam-proto-provider::after {
+ display: none;
+ }
+ .seam-compact-model-info {
+ grid-template-columns: 1fr;
+ gap: 12px;
+ }
+ .seam-compact-column-heading {
+ grid-template-columns: 1fr;
+ padding: 9px 14px;
+ }
+ .seam-compact-column-heading > :not(:first-child) {
+ display: none;
+ }
+ .seam-compact-columns > summary {
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 8px 12px;
+ }
+ .seam-compact-column-cells {
+ grid-column: 1 / -1;
+ grid-row: 2;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 5px;
+ padding-left: 60px;
+ text-align: left;
+ }
+ .seam-compact-columns .seam-compact-disclosure {
+ grid-column: 2;
+ grid-row: 1;
+ }
+ .seam-compact-feature-icon-only {
+ width: auto;
+ height: auto;
+ padding: 3px 5px;
+ }
+ .seam-compact-icon-label {
+ position: static;
+ width: auto;
+ height: auto;
+ overflow: visible;
+ clip-path: none;
+ white-space: normal;
+ }
+ .seam-compact-stacked > summary {
+ grid-template-columns: 48px minmax(0, 1fr) auto;
+ }
+ .seam-compact-stacked .seam-compact-identity,
+ .seam-compact-stacked .seam-compact-identity-text {
+ display: contents;
+ }
+ .seam-compact-stacked .seam-compact-image {
+ grid-column: 1;
+ grid-row: 1 / 3;
+ align-self: start;
+ }
+ .seam-compact-stacked .seam-compact-device-name {
+ grid-column: 2;
+ grid-row: 1;
+ }
+ .seam-compact-stacked .seam-compact-disclosure {
+ grid-column: 3;
+ grid-row: 1;
+ }
+ .seam-compact-stacked .seam-compact-device-status {
+ grid-column: 2 / -1;
+ }
+ .seam-compact-stacked .seam-compact-features {
+ grid-column: 2 / -1;
+ grid-row: 2;
+ gap: 6px 10px;
+ }
+ .seam-compact-stacked .seam-compact-feature {
+ font-size: 11px;
+ }
+}
+@media (hover: hover) and (pointer: fine) {
+ .seam-compact-row-summary:hover {
+ background: var(--seam-ecosystem-surface-2);
+ }
+ .seam-proto-page a:hover {
+ text-decoration: underline;
+ }
+}
+.seam-compact-feature.seam-compact-status-feature {
+ color: var(--seam-ecosystem-fg-1);
+}
+.seam-compact-status-feature > svg {
+ color: var(--seam-compact-green);
+}
+.seam-compact-status-feature[data-conditional] > svg {
+ color: var(--seam-compact-status-amber);
+}
+.seam-compact-pill-disclosure {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ gap: 8px;
+ max-width: 405px;
+ color: var(--seam-compact-status-amber);
+}
+.seam-compact-requirement-pills {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: end;
+ gap: 5px;
+}
+.seam-compact-requirement-pill {
+ display: inline-flex;
+ align-items: center;
+ min-height: 24px;
+ padding: 3px 7px;
+ border-radius: 6px;
+ background: var(--seam-compact-status-amber-bg);
+ color: var(--seam-compact-status-amber);
+ box-shadow: inset 0 0 0 0.5px currentColor;
+ font-size: 11px;
+ line-height: 16px;
+ white-space: nowrap;
+}
+@media (max-width: 850px) and (min-width: 601px) {
+ .seam-compact-pill-disclosure {
+ max-width: 280px;
+ }
+}
+@media (max-width: 600px) {
+ .seam-compact-with-pills .seam-compact-pill-disclosure {
+ display: contents;
+ }
+ .seam-compact-with-pills .seam-compact-requirement-pills {
+ grid-column: 2 / -1;
+ grid-row: 3;
+ justify-content: start;
+ }
+ .seam-compact-with-pills .seam-compact-image {
+ grid-row: 1 / 4;
+ }
+ .seam-compact-with-pills
+ .seam-compact-pill-disclosure
+ > .seam-compact-chevron {
+ grid-column: 3;
+ grid-row: 1;
+ align-self: center;
+ }
+ .seam-compact-requirement-pill {
+ min-height: 22px;
+ padding: 2px 5px;
+ font-size: 11px;
+ }
+}
+/* Emil's prototype picker: intentionally separate from the product styling. */
+.proto-picker {
+ position: fixed;
+ bottom: 24px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 2147483647;
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ padding: 4px;
+ border-radius: 999px;
+ background: rgba(10, 10, 10, 0.82);
+ -webkit-backdrop-filter: blur(12px) saturate(1.4);
+ backdrop-filter: blur(12px) saturate(1.4);
+ box-shadow:
+ 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
+ 0 8px 24px rgba(0, 0, 0, 0.24),
+ 0 2px 6px rgba(0, 0, 0, 0.12);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ font-size: 13px;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ user-select: none;
+ -webkit-user-select: none;
+}
+.proto-picker-highlight {
+ position: absolute;
+ top: 4px;
+ left: 0;
+ height: 28px;
+ border-radius: 999px;
+ background: rgba(255, 255, 255, 0.12);
+ will-change: transform;
+}
+.proto-picker[data-ready] .proto-picker-highlight {
+ transition:
+ transform 250ms cubic-bezier(0.23, 1, 0.32, 1),
+ width 250ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+ .proto-picker[data-ready] .proto-picker-highlight {
+ transition: none;
+ }
+}
+.proto-picker-item {
+ position: relative;
+ display: flex;
+ align-items: center;
+ height: 28px;
+ padding: 0 12px;
+ border: 0;
+ border-radius: 999px;
+ background: transparent;
+ color: rgba(255, 255, 255, 0.55);
+ font: inherit;
+ cursor: pointer;
+ transition: color 150ms ease-out;
+}
+.proto-picker-item:hover {
+ color: rgba(255, 255, 255, 0.85);
+}
+.proto-picker-item:active {
+ transform: scale(0.97);
+}
+.proto-picker-item:focus-visible {
+ outline: 2px solid rgba(255, 255, 255, 0.4);
+ outline-offset: 2px;
+}
+.proto-picker-item[data-active] {
+ color: #fff;
+}
+.proto-picker-divider {
+ width: 1px;
+ height: 16px;
+ margin: 0 4px;
+ background: rgba(255, 255, 255, 0.12);
+}
+.proto-picker-replay {
+ padding: 0 10px;
+ font-size: 14px;
+}
+.proto-picker[data-position='top'] {
+ bottom: auto;
+ top: 24px;
+}
diff --git a/examples/supported-devices-prototypes/src/theme.scss b/examples/supported-devices-prototypes/src/theme.scss
new file mode 100644
index 000000000..7843cf569
--- /dev/null
+++ b/examples/supported-devices-prototypes/src/theme.scss
@@ -0,0 +1,45 @@
+// Match the original DeviceDB semantic neutrals and status colors.
+.seam-proto-page {
+ --seam-ecosystem-fg-1: #090a0b;
+ --seam-ecosystem-fg-2: #5c6475;
+ --seam-ecosystem-fg-3: #848b9a;
+ --seam-ecosystem-surface-1: #fff;
+ --seam-ecosystem-surface-2: #f5f6f8;
+ --seam-ecosystem-line-1: #e5e7eb;
+ --seam-ecosystem-line-2: #ccd0d7;
+ --seam-ecosystem-accent: #4c45d9;
+ --seam-compact-green: #137413;
+ --seam-compact-green-bg: #edf8ed;
+ --seam-compact-orange: #945313;
+ --seam-compact-orange-bg: #fcf2e9;
+ --seam-compact-status-amber: #946200;
+ --seam-compact-status-amber-bg: #fff8e5;
+ --seam-compact-tile: #fff;
+ --seam-compact-tile-shadow:
+ 0 0 0 0.5px rgb(9 10 11 / 8%), 0 0 2px rgb(9 10 11 / 12%),
+ 0 2px 4px rgb(9 10 11 / 4%);
+
+ color: var(--seam-ecosystem-fg-1);
+ font-size: 15px;
+ line-height: 1.45;
+
+ &.seam-ecosystem-theme-dark {
+ --seam-ecosystem-fg-1: #eeeff2;
+ --seam-ecosystem-fg-2: #acb2be;
+ --seam-ecosystem-fg-3: #848b9a;
+ --seam-ecosystem-surface-1: #090a0b;
+ --seam-ecosystem-surface-2: #191b1f;
+ --seam-ecosystem-line-1: #282a30;
+ --seam-ecosystem-line-2: #31353f;
+ --seam-ecosystem-accent: #b5b1f1;
+ --seam-compact-green: #89d189;
+ --seam-compact-green-bg: rgb(25 143 25 / 16%);
+ --seam-compact-orange: #eaad70;
+ --seam-compact-orange-bg: rgb(154 89 25 / 16%);
+ --seam-compact-status-amber: #f0c462;
+ --seam-compact-status-amber-bg: rgb(240 196 98 / 10%);
+ --seam-compact-tile: #191b1f;
+ --seam-compact-tile-shadow:
+ 0 0 0 0.5px rgb(255 255 255 / 12%), 0 2px 4px rgb(0 0 0 / 12%);
+ }
+}
diff --git a/src/lib/seam/components/SupportedDevices/RequirementIcon.tsx b/src/lib/seam/components/SupportedDevices/RequirementIcon.tsx
index 66f210f2d..454d32ad5 100644
--- a/src/lib/seam/components/SupportedDevices/RequirementIcon.tsx
+++ b/src/lib/seam/components/SupportedDevices/RequirementIcon.tsx
@@ -13,7 +13,14 @@ export function RequirementIcon({ message }: { message: string }): JSX.Element {
strokeLinecap='round'
strokeLinejoin='round'
>
- {/subscription|licen[sc]e|paying|paid|fees?/i.test(message) ? (
+ {/\b(?:legal|eula|waiver|end[- ]user licen[cs]e agreement)\b/i.test(
+ message
+ ) ? (
+ <>
+