@adea-ai/ui 0.93.2 → 0.95.0

package/registry.json

@@ -1962,6 +1962,30 @@
         }
       ]
     },
+    {
+      "name": "scene-controls",
+      "type": "registry:ui",
+      "title": "Scene Controls",
+      "description": "Shared host-neutral scene movement, jump and zoom controls.",
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/action-button"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/scene-controls/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/scene-controls/index.ts"
+        },
+        {
+          "path": "src/components/composites/scene-controls/scene-controls.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/scene-controls/scene-controls.tsx"
+        }
+      ]
+    },
     {
       "name": "settings",
       "type": "registry:ui",

package/src/components/composites/action-button/action-button.tsx

@@ -84,6 +84,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
     'as',
     'variant',
     'size',
+    'touchTarget',
     'class',
     'children',
     'disabled',
@@ -106,6 +107,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
     ...rest,
     variant: local.variant,
     size: local.size,
+    touchTarget: local.touchTarget,
     class: [local.class, local.tooltip && disabled() && 'aria-disabled:pointer-events-auto']
       .filter(Boolean)
       .join(' '),

package/src/components/composites/scene-controls/index.ts

@@ -0,0 +1,7 @@
+/** Shared host-neutral scene movement, jump and zoom controls. */
+export {
+  SceneControls,
+  type SceneControlLabels,
+  type SceneControlsProps,
+  type SceneMovementDirection,
+} from './scene-controls'

package/src/components/composites/scene-controls/scene-controls.tsx

@@ -0,0 +1,282 @@
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ZoomIn, ZoomOut } from 'lucide-solid'
+import { createSignal, onCleanup, Show, type JSX } from 'solid-js'
+import { ActionButton } from '../action-button'
+
+/** A host-neutral direction reported while a movement control is held. */
+export type SceneMovementDirection = 'forward' | 'left' | 'backward' | 'right'
+
+/** Accessible names and tooltip text for the shared scene controls. */
+export type SceneControlLabels = {
+  movementGroup: string
+  forward: string
+  forwardTooltip: string
+  left: string
+  leftTooltip: string
+  backward: string
+  backwardTooltip: string
+  right: string
+  rightTooltip: string
+  jump: string
+  jumpTooltip: string
+  zoomGroup: string
+  zoomOut: string
+  zoomIn: string
+}
+
+const DEFAULT_LABELS: SceneControlLabels = {
+  movementGroup: 'Scene movement controls',
+  forward: 'Move forward',
+  forwardTooltip: 'Hold to move forward',
+  left: 'Move left',
+  leftTooltip: 'Hold to move left',
+  backward: 'Move backward',
+  backwardTooltip: 'Hold to move backward',
+  right: 'Move right',
+  rightTooltip: 'Hold to move right',
+  jump: 'Jump',
+  jumpTooltip: 'Hold to jump',
+  zoomGroup: 'Camera zoom',
+  zoomOut: 'Zoom out',
+  zoomIn: 'Zoom in',
+}
+
+const pointerSource = (pointerId: number) => `pointer:${pointerId}`
+const keySource = (key: string) => `key:${key}`
+
+export type SceneControlsProps = {
+  /** Called on the transition into and out of each held movement direction. */
+  onMovementChange?: (direction: SceneMovementDirection, pressed: boolean) => void
+  /** Called when the jump action becomes pressed or released. */
+  onJumpChange?: (pressed: boolean) => void
+  /** Called once when zoom in is activated. */
+  onZoomIn?: () => void
+  /** Called once when zoom out is activated. */
+  onZoomOut?: () => void
+  /** Override the default English accessible names and tooltip copy. */
+  labels?: Partial<SceneControlLabels>
+}
+
+type HoldActionProps = {
+  label: string
+  tooltip: string
+  createChangeCallback: () => (pressed: boolean) => void
+  children: JSX.Element
+}
+
+/**
+ * A held action that reports one down/up pair across pointer and keyboard input.
+ *
+ * The arrangement, rounded scrim group surfaces and release policy translate
+ * Adea's on-screen scene controls; host key synthesis and scene APIs are replaced
+ * by callbacks.
+ */
+function HoldAction(props: HoldActionProps) {
+  const [pressed, setPressed] = createSignal(false)
+  const sources = new Set<string>()
+  let activeChangeCallback: ((pressed: boolean) => void) | undefined
+
+  const press = (source: string) => {
+    if (sources.has(source)) return
+    const wasPressed = sources.size > 0
+    sources.add(source)
+    if (!wasPressed) {
+      setPressed(true)
+      activeChangeCallback = props.createChangeCallback()
+      activeChangeCallback(true)
+    }
+  }
+
+  const release = (source: string) => {
+    if (!sources.delete(source) || sources.size > 0) return
+    setPressed(false)
+    const callback = activeChangeCallback
+    activeChangeCallback = undefined
+    callback?.(false)
+  }
+
+  const releaseAll = () => {
+    if (sources.size === 0) return
+    sources.clear()
+    setPressed(false)
+    const callback = activeChangeCallback
+    activeChangeCallback = undefined
+    callback?.(false)
+  }
+
+  const onWindowPointerUp = (event: PointerEvent) => release(pointerSource(event.pointerId))
+  const onWindowBlur = () => releaseAll()
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('pointerup', onWindowPointerUp)
+    window.addEventListener('blur', onWindowBlur)
+  }
+
+  onCleanup(() => {
+    releaseAll()
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('pointerup', onWindowPointerUp)
+      window.removeEventListener('blur', onWindowBlur)
+    }
+  })
+
+  return (
+    <ActionButton
+      type="button"
+      variant="secondary"
+      size="icon-2xl"
+      aria-label={props.label}
+      aria-pressed={pressed()}
+      tooltip={props.tooltip}
+      class="touch-none select-none"
+      onContextMenu={(event) => event.preventDefault()}
+      onPointerDown={(event) => {
+        if (event.button !== 0) return
+        event.preventDefault()
+        const source = pointerSource(event.pointerId)
+        if (sources.has(source)) return
+        try {
+          event.currentTarget.setPointerCapture(event.pointerId)
+        } catch {
+          // Pointer capture is not available in every embedded browser. The
+          // window pointerup fallback still closes this held action.
+        }
+        press(source)
+      }}
+      onPointerUp={(event) => release(pointerSource(event.pointerId))}
+      onPointerCancel={(event) => release(pointerSource(event.pointerId))}
+      onLostPointerCapture={(event) => release(pointerSource(event.pointerId))}
+      onKeyDown={(event) => {
+        if (event.key !== ' ' && event.key !== 'Enter') return
+        event.preventDefault()
+        press(keySource(event.key))
+      }}
+      onKeyUp={(event) => {
+        if (event.key !== ' ' && event.key !== 'Enter') return
+        event.preventDefault()
+        release(keySource(event.key))
+      }}
+      onBlur={releaseAll}
+      onClick={(event) => {
+        // Assistive technology can activate a button without pointer or keyboard
+        // down/up events. Treat that activation as one short held action.
+        if (event.detail !== 0 || sources.size > 0) return
+        press('activation')
+        release('activation')
+      }}
+    >
+      {props.children}
+    </ActionButton>
+  )
+}
+
+/**
+ * Shared movement, jump and zoom controls for a host-rendered scene.
+ *
+ * Movement and jump callbacks receive pressed/released state from pointer and
+ * keyboard input. Zoom callbacks fire on activation. The host owns positioning,
+ * scene state and camera behavior.
+ */
+export function SceneControls(props: SceneControlsProps) {
+  const labels = () => ({ ...DEFAULT_LABELS, ...props.labels })
+
+  return (
+    <div class="flex min-w-0 max-w-full flex-wrap items-end gap-3">
+      <Show when={props.onMovementChange}>
+        <div
+          role="group"
+          aria-label={labels().movementGroup}
+          class="glass-scrim grid min-w-0 max-w-full grid-cols-3 gap-1.5 rounded-3xl p-2"
+        >
+          <span aria-hidden="true" />
+          <HoldAction
+            label={labels().forward}
+            tooltip={labels().forwardTooltip}
+            createChangeCallback={() => {
+              const callback = props.onMovementChange
+              return (pressed) => callback?.('forward', pressed)
+            }}
+          >
+            <ArrowUp aria-hidden="true" />
+          </HoldAction>
+          <span aria-hidden="true" />
+          <HoldAction
+            label={labels().left}
+            tooltip={labels().leftTooltip}
+            createChangeCallback={() => {
+              const callback = props.onMovementChange
+              return (pressed) => callback?.('left', pressed)
+            }}
+          >
+            <ArrowLeft aria-hidden="true" />
+          </HoldAction>
+          <HoldAction
+            label={labels().backward}
+            tooltip={labels().backwardTooltip}
+            createChangeCallback={() => {
+              const callback = props.onMovementChange
+              return (pressed) => callback?.('backward', pressed)
+            }}
+          >
+            <ArrowDown aria-hidden="true" />
+          </HoldAction>
+          <HoldAction
+            label={labels().right}
+            tooltip={labels().rightTooltip}
+            createChangeCallback={() => {
+              const callback = props.onMovementChange
+              return (pressed) => callback?.('right', pressed)
+            }}
+          >
+            <ArrowRight aria-hidden="true" />
+          </HoldAction>
+        </div>
+      </Show>
+      <div class="ml-auto flex min-w-0 max-w-full flex-col items-end gap-2">
+        <Show when={props.onZoomIn || props.onZoomOut}>
+          <div
+            role="group"
+            aria-label={labels().zoomGroup}
+            class="glass-scrim flex min-w-0 max-w-full flex-wrap gap-1.5 rounded-2xl p-1.5"
+          >
+            <Show when={props.onZoomOut}>
+              <ActionButton
+                type="button"
+                variant="secondary"
+                size="icon-2xl"
+                aria-label={labels().zoomOut}
+                tooltip={labels().zoomOut}
+                onClick={() => props.onZoomOut?.()}
+              >
+                <ZoomOut aria-hidden="true" />
+              </ActionButton>
+            </Show>
+            <Show when={props.onZoomIn}>
+              <ActionButton
+                type="button"
+                variant="secondary"
+                size="icon-2xl"
+                aria-label={labels().zoomIn}
+                tooltip={labels().zoomIn}
+                onClick={() => props.onZoomIn?.()}
+              >
+                <ZoomIn aria-hidden="true" />
+              </ActionButton>
+            </Show>
+          </div>
+        </Show>
+        <Show when={props.onJumpChange}>
+          <HoldAction
+            label={labels().jump}
+            tooltip={labels().jumpTooltip}
+            createChangeCallback={() => {
+              const callback = props.onJumpChange
+              return (pressed) => callback?.(pressed)
+            }}
+          >
+            <ArrowUp aria-hidden="true" />
+          </HoldAction>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/components/layout/side-rail/side-rail.tsx

@@ -14,7 +14,7 @@ import { SideRailContext, createSideRailValue } from './side-rail-context'
  * component rather than something each view arranges.
  *
  * Two forms, one component. Collapsed it is an icon column; expanded it carries
- * labels. Both widths come from `--rail-width` (74px) and `--rail-width-expanded`
+ * labels. Both widths come from `--rail-width` (56px) and `--rail-width-expanded`
  * (236px), so an app cannot pick its own and end up a few pixels out of step with
  * the app beside it.
  *
@@ -145,16 +145,24 @@ export const sideRailItemClass = [
    * element, no listener, and it works on whatever element a caller renders the row
    * as — an anchor, a button, a router's own link.
    *
-   * The collapsed rail opts out: a 1.02 scale on a 74px column pushes the row past
+   * The collapsed rail opts out: a 1.02 scale on a 56px column pushes the row past
    * the rail's own edge, which reads as a glitch rather than as feedback.
    */
   'hover:scale-[1.02] active:scale-[0.97] group-data-[collapsed=true]/rail:hover:scale-100 group-data-[collapsed=true]/rail:active:scale-[0.98]',
-  '[&_svg]:size-4 [&_svg]:shrink-0',
+  '[&_svg]:size-5 [&_svg]:shrink-0',
 ].join(' ')
 
+/*
+ * The rail's states are accent-driven: the icon carries `--primary` on hover and
+ * on the active destination, and both states draw the accent's own tint rather
+ * than a neutral fill, so the rail reads as the app's accent chroma instead of a
+ * grey column. The active label stays on `sidebar-foreground` because the accent
+ * presets guarantee their 3:1 interaction minimum against the surface, not the
+ * 4.5:1 small text owes; the icon is a graphic and rides the accent.
+ */
 export const sideRailItemStateClass = {
-  active: 'bg-sidebar-accent text-sidebar-accent-foreground',
-  idle: 'text-sidebar-muted-foreground hover:bg-sidebar-accent/60 hover:text-sidebar-foreground',
+  active: 'bg-primary-subtle text-sidebar-foreground [&_svg]:text-primary',
+  idle: 'text-sidebar-muted-foreground hover:bg-primary-subtle/60 hover:text-primary',
 }
 
 /**
@@ -259,7 +267,7 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
         {...(rest as Record<string, unknown>)}
       >
         <Show when={local.badge}>
-          <span class="relative flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
+          <span class="relative flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
             {local.children}
             <span class="absolute -top-1 -end-1 flex items-center justify-center">
               {local.badge}
@@ -267,7 +275,7 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
           </span>
         </Show>
         <Show when={!local.badge}>
-          <span class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
+          <span class="flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
             {local.children}
           </span>
         </Show>
@@ -307,7 +315,7 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
               }}
             >
               <span
-                class={cn('flex size-4 shrink-0 items-center justify-center [&_svg]:size-4', {
+                class={cn('flex size-5 shrink-0 items-center justify-center [&_svg]:size-5', {
                   'text-primary': local.active,
                 })}
               >
@@ -368,7 +376,7 @@ export function SideRailButton(
         )}
         {...rest}
       >
-        <span class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
+        <span class="flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
           {local.children}
         </span>
         <span class="min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only">
@@ -397,7 +405,7 @@ export function SideRailButton(
                 height: `${position().height}px`,
               }}
             >
-              <span class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
+              <span class="flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
                 {local.children}
               </span>
               {local.label}

package/src/components/ui/button/button.tsx

@@ -47,6 +47,7 @@ export const buttonVariants = cva(
         md: `${controlSize.md} [&_svg]:size-4`,
         lg: `${controlSize.lg} [&_svg]:size-4`,
         xl: `${controlSize.xl} [&_svg]:size-5`,
+        '2xl': `${controlSize['2xl']} [&_svg]:size-6`,
         /* Square, for an icon with no label. The accessible name then has to
            come from `aria-label` or a visually hidden label — an icon-only
            button with neither is the accessibility finding the Storybook lane
@@ -57,6 +58,11 @@ export const buttonVariants = cva(
         'icon-md': 'size-control-md p-0 [&_svg]:size-4',
         'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',
         'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',
+        'icon-2xl': 'size-control-2xl p-0 [&_svg]:size-6',
+      },
+      /** Opt in to a stable touch target on devices with any coarse pointer. */
+      touchTarget: {
+        comfortable: 'touch-target-comfortable',
       },
     },
     defaultVariants: {
@@ -76,13 +82,25 @@ export type ButtonProps<T extends ValidComponent = 'button'> = PolymorphicProps<
 >
 
 export function Button<T extends ValidComponent = 'button'>(props: ButtonProps<T>) {
-  const [local, rest] = splitProps(props as ButtonProps, ['variant', 'size', 'class'])
+  const [local, rest] = splitProps(props as ButtonProps, [
+    'variant',
+    'size',
+    'touchTarget',
+    'class',
+  ])
 
   return (
     <Polymorphic
       as="button"
       type="button"
-      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      class={cn(
+        buttonVariants({
+          variant: local.variant,
+          size: local.size,
+          touchTarget: local.touchTarget,
+        }),
+        local.class
+      )}
       {...(rest as ComponentProps<'button'>)}
     />
   )

package/src/components/ui/toggle/toggle.tsx

@@ -34,12 +34,14 @@ export const toggleVariants = cva(
         md: `${controlSize.md} [&_svg]:size-4`,
         lg: `${controlSize.lg} [&_svg]:size-4`,
         xl: `${controlSize.xl} [&_svg]:size-5`,
+        '2xl': `${controlSize['2xl']} [&_svg]:size-6`,
         'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',
         'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',
         'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',
         'icon-md': 'size-control-md p-0 [&_svg]:size-4',
         'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',
         'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',
+        'icon-2xl': 'size-control-2xl p-0 [&_svg]:size-6',
       },
     },
     defaultVariants: { variant: 'default', size: 'md' },

package/src/index.ts

@@ -104,6 +104,7 @@ export * from './components/composites/catalog-browser'
 export * from './components/composites/list-row'
 export * from './components/composites/tree'
 export * from './components/composites/settings'
+export * from './components/composites/scene-controls'
 export * from './components/composites/stat'
 export * from './components/composites/appearance-editor'
 export * from './components/composites/update-dialog'

package/src/lib/tokens.ts

@@ -480,6 +480,11 @@ export const densityTokens: TokenDefinition[] = [
     kind: 'dimension',
     description: '40px — a hero control in an empty state.',
   },
+  {
+    name: 'control-height-2xl',
+    kind: 'dimension',
+    description: '48px — a stable touch target, unchanged by compact density.',
+  },
   {
     name: 'control-padding-2xs',
     kind: 'dimension',
@@ -510,10 +515,15 @@ export const densityTokens: TokenDefinition[] = [
     kind: 'dimension',
     description: 'Inline padding that pairs with the 40px control.',
   },
+  {
+    name: 'control-padding-2xl',
+    kind: 'dimension',
+    description: 'Inline padding that pairs with the stable 48px touch target.',
+  },
   { name: 'row-height-sm', kind: 'dimension', description: '28px — a dense list row.' },
   { name: 'row-height-md', kind: 'dimension', description: '32px — the default list row.' },
   { name: 'row-height-lg', kind: 'dimension', description: '36px — a two-line list row.' },
-  { name: 'rail-width', kind: 'dimension', description: '58px — the icon-only rail.' },
+  { name: 'rail-width', kind: 'dimension', description: '56px — the icon-only rail.' },
   { name: 'rail-width-expanded', kind: 'dimension', description: '236px — the labelled rail.' },
   {
     name: 'rail-item-height',

package/src/lib/utils.ts

@@ -36,6 +36,7 @@ export const cn: CnFunction = createCn({
             'control-md',
             'control-lg',
             'control-xl',
+            'control-2xl',
             'row-sm',
             'row-md',
             'row-lg',
@@ -61,6 +62,7 @@ export const cn: CnFunction = createCn({
             'control-md',
             'control-lg',
             'control-xl',
+            'control-2xl',
             'rail-item',
           ],
         },

package/src/lib/variants.ts

@@ -11,7 +11,7 @@
  * rather than inventing synonyms:
  *
  *   variant  what the control *is for*  — primary, secondary, destructive, …
- *   size     how much room it takes     — 2xs, xs, sm, md, lg, xl
+ *   size     how much room it takes     — 2xs, xs, sm, md, lg, xl, 2xl
  *   tone     what it *communicates*     — neutral, success, warning, …
  *
  * A component that needs a fourth axis is usually two components.
@@ -32,6 +32,8 @@ export const controlSize = {
   md: 'h-control-md px-control-md text-sm gap-2',
   lg: 'h-control-lg px-control-lg text-sm gap-2',
   xl: 'h-control-xl px-control-xl text-base gap-2.5',
+  /** A stable 48px touch target; compact density intentionally leaves it alone. */
+  '2xl': 'h-control-2xl px-control-2xl text-lg gap-3',
 } as const
 
 /** Square counterparts for icon-only controls: the height, with equal width. */
@@ -42,9 +44,10 @@ export const controlSizeIcon = {
   md: 'size-control-md p-0',
   lg: 'size-control-lg p-0',
   xl: 'size-control-xl p-0',
+  '2xl': 'size-control-2xl p-0',
 } as const
 
-export const controlSizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const
+export const controlSizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
 export type ControlSize = (typeof controlSizes)[number]
 
 /**

package/src/lint/index.ts

@@ -460,6 +460,7 @@ const ICON_BUTTON_SIZES: ReadonlySet<string> = new Set([
   'icon-md',
   'icon-lg',
   'icon-xl',
+  'icon-2xl',
 ])
 
 const staticJsxValues = (value: any): any[] =>

package/src/styles/base.css

@@ -250,6 +250,18 @@
   }
 }
 
+/**
+ * Opt into the stable 2xl control rung only when a coarse pointer is available.
+ * `any-pointer` intentionally includes hybrid devices without changing the
+ * glyph or desktop density of the selected Button size.
+ */
+@utility touch-target-comfortable {
+  @media (any-pointer: coarse) {
+    min-inline-size: var(--control-height-2xl);
+    min-block-size: var(--control-height-2xl);
+  }
+}
+
 /**
  * The drag region of a frameless desktop window.
  *
@@ -422,9 +434,9 @@
   }
 }
 
-/* The glass treatment used by the top bar, the rail, and floating overlays.
-   `--glass-*` are private: a consumer chooses *whether* to be glassy through
-   the component prop, not by reaching for these. */
+/* Glass treatments used by the top bar, rail, scene-control groups and floating
+   overlays. Consumers use the owning component; shared composites use the
+   named utility instead of restyling a primitive. */
 @utility glass-panel {
   background: color-mix(in oklch, var(--chrome) calc(var(--chrome-alpha) * 100%), transparent);
   backdrop-filter: blur(18px) saturate(1.6);
@@ -438,6 +450,12 @@
   -webkit-backdrop-filter: blur(12px) saturate(1.4);
 }
 
+@utility glass-scrim {
+  background: color-mix(in oklch, var(--scrim) 20%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
 /* The focus ring. Applied by components that cannot use the global outline
    because they need the ring to follow their own radius. */
 @utility focus-ring {
@@ -657,7 +675,8 @@
 
 @media (prefers-reduced-transparency: reduce) {
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     background: var(--background) !important;
@@ -670,18 +689,19 @@
   }
 
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     background: var(--background) !important;
     border: 1px solid var(--foreground) !important;
   }
 }
 
-/* An engine without backdrop-filter would render the glass tint alone, which
-   is 3-8% alpha — effectively a transparent panel. Fall back to a solid
-   surface instead, keeping borders and shadows so panels stay delimited. */
+/* Without backdrop-filter there is no blurred context behind a glass surface.
+   Fall back to a solid surface so glass panels and scrim groups stay legible. */
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     background: var(--background) !important;
   }
 }