@superxd-studio/adptr 0.5.0

package/source/components/icons.tsx

@@ -0,0 +1,275 @@
+import type { SVGProps } from "react";
+import { cn } from "../lib/cn.js";
+
+/*
+ * Icons drawn from Lucide (https://lucide.dev), ISC licence:
+ * Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part
+ * of Feather (MIT). All other copyright (c) for Lucide are held by Lucide
+ * Contributors 2022. Permission to use, copy, modify, and/or distribute this
+ * software for any purpose with or without fee is hereby granted.
+ *
+ * Complete Lucide ISC and Feather MIT notices are in licenses/lucide.txt;
+ * retain those notices when copying or distributing these paths.
+ *
+ * Icons are decorative by default (hidden from screen readers). Give the
+ * control around an icon its own label. Stroke width comes from the
+ * --icon-stroke token.
+ */
+
+export type IconProps = Omit<SVGProps<SVGSVGElement>, "children">;
+
+function createIcon(name: string, paths: React.ReactNode) {
+  function Icon({ className, ...props }: IconProps) {
+    return (
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        focusable="false"
+        className={cn("size-4 shrink-0 [stroke-width:var(--icon-stroke)]", className)}
+        {...props}
+      >
+        {paths}
+      </svg>
+    );
+  }
+  Icon.displayName = `Icon${name}`;
+  return Icon;
+}
+
+export const IconClock = createIcon(
+  "Clock",
+  <>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 6v6l4 2" />
+  </>,
+);
+
+export const IconVideo = createIcon(
+  "Video",
+  <>
+    <path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5" />
+    <rect x="2" y="6" width="14" height="12" rx="2" />
+  </>,
+);
+
+export const IconGlobe = createIcon(
+  "Globe",
+  <>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
+    <path d="M2 12h20" />
+  </>,
+);
+
+export const IconCalendar = createIcon(
+  "Calendar",
+  <>
+    <path d="M8 2v4" />
+    <path d="M16 2v4" />
+    <rect width="18" height="18" x="3" y="4" rx="2" />
+    <path d="M3 10h18" />
+  </>,
+);
+
+export const IconCalendarPlus = createIcon(
+  "CalendarPlus",
+  <>
+    <path d="M8 2v4" />
+    <path d="M16 2v4" />
+    <path d="M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
+    <path d="M3 10h18" />
+    <path d="M16 19h6" />
+    <path d="M19 16v6" />
+  </>,
+);
+
+export const IconGrid = createIcon(
+  "Grid",
+  <>
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M3 9h18" />
+    <path d="M3 15h18" />
+    <path d="M9 3v18" />
+    <path d="M15 3v18" />
+  </>,
+);
+
+export const IconColumns = createIcon(
+  "Columns",
+  <>
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+    <path d="M9 3v18" />
+    <path d="M15 3v18" />
+  </>,
+);
+
+export const IconChevronLeft = createIcon("ChevronLeft", <path d="m15 18-6-6 6-6" />);
+export const IconChevronRight = createIcon("ChevronRight", <path d="m9 18 6-6-6-6" />);
+export const IconChevronDown = createIcon("ChevronDown", <path d="m6 9 6 6 6-6" />);
+export const IconArrowUp = createIcon("ArrowUp", <path d="m5 12 7-7 7 7M12 5v14" />);
+export const IconDownload = createIcon(
+  "Download",
+  <>
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+    <path d="m7 10 5 5 5-5M12 15V3" />
+  </>,
+);
+
+export const IconArrowDown = createIcon("ArrowDown", <path d="m5 12 7 7 7-7M12 5v14" />);
+export const IconSquare = createIcon("Square", <rect x="6" y="6" width="12" height="12" rx="2" />);
+export const IconCopy = createIcon(
+  "Copy",
+  <>
+    <rect x="9" y="9" width="13" height="13" rx="2" />
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+  </>,
+);
+export const IconEdit = createIcon(
+  "Edit",
+  <>
+    <path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L9 17l-4 1 1-4Z" />
+    <path d="m15 5 3 3" />
+  </>,
+);
+export const IconCheck = createIcon("Check", <path d="M20 6 9 17l-5-5" />);
+
+export const IconX = createIcon(
+  "X",
+  <>
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </>,
+);
+export const IconPaperclip = createIcon(
+  "Paperclip",
+  <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.9-9.9a4 4 0 0 1 5.66 5.66l-9.9 9.9a2 2 0 0 1-2.83-2.83l9.2-9.19" />,
+);
+export const IconFile = createIcon(
+  "File",
+  <>
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+    <path d="M14 2v6h6M8 13h8M8 17h5" />
+  </>,
+);
+
+export const IconArrowLeft = createIcon(
+  "ArrowLeft",
+  <>
+    <path d="m12 19-7-7 7-7" />
+    <path d="M19 12H5" />
+  </>,
+);
+
+export const IconInfo = createIcon(
+  "Info",
+  <>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 16v-4" />
+    <path d="M12 8h.01" />
+  </>,
+);
+
+export const IconAlert = createIcon(
+  "Alert",
+  <>
+    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+  </>,
+);
+
+export const IconCircleCheck = createIcon(
+  "CircleCheck",
+  <>
+    <circle cx="12" cy="12" r="10" />
+    <path d="m9 12 2 2 4-4" />
+  </>,
+);
+
+export const IconCircleAlert = createIcon(
+  "CircleAlert",
+  <>
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 8v4" />
+    <path d="M12 16h.01" />
+  </>,
+);
+
+export const IconHourglass = createIcon(
+  "Hourglass",
+  <>
+    <path d="M5 22h14" />
+    <path d="M5 2h14" />
+    <path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22" />
+    <path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2" />
+  </>,
+);
+
+export const IconMapPin = createIcon(
+  "MapPin",
+  <>
+    <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+    <circle cx="12" cy="10" r="3" />
+  </>,
+);
+
+export const IconSearch = createIcon(
+  "Search",
+  <>
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </>,
+);
+
+export const IconRotate = createIcon(
+  "Rotate",
+  <>
+    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+    <path d="M3 3v5h5" />
+  </>,
+);
+
+export const IconUser = createIcon(
+  "User",
+  <>
+    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </>,
+);
+
+export const IconMail = createIcon(
+  "Mail",
+  <>
+    <rect width="20" height="16" x="2" y="4" rx="2" />
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+  </>,
+);
+
+export const IconPlus = createIcon(
+  "Plus",
+  <>
+    <path d="M5 12h14" />
+    <path d="M12 5v14" />
+  </>,
+);
+
+export const IconSun = createIcon(
+  "Sun",
+  <>
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2" />
+    <path d="M12 20v2" />
+    <path d="m4.93 4.93 1.41 1.41" />
+    <path d="m17.66 17.66 1.41 1.41" />
+    <path d="M2 12h2" />
+    <path d="M20 12h2" />
+    <path d="m6.34 17.66-1.41 1.41" />
+    <path d="m19.07 4.93-1.41 1.41" />
+  </>,
+);
+
+export const IconMoon = createIcon("Moon", <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />);

package/source/components/responsive-overlay.tsx

@@ -0,0 +1,91 @@
+import { useSyncExternalStore, type ReactNode, type RefObject } from "react";
+import { Dialog, Modal, ModalOverlay, Popover } from "react-aria-components";
+import { cn } from "../lib/cn.js";
+
+const mobileQuery = "(max-width: 639px)";
+const sideQuery = "(min-width: 960px)";
+/** Shared by anchored content and its read-only canvas presentation. */
+export const overlaySurfaceClassName =
+  "flex min-h-0 flex-col overflow-hidden bg-surface text-fg shadow-dialog";
+function subscribe(callback: () => void) {
+  const queries = [window.matchMedia(mobileQuery), window.matchMedia(sideQuery)];
+  queries.forEach((query) => query.addEventListener("change", callback));
+  return () => queries.forEach((query) => query.removeEventListener("change", callback));
+}
+function presentation() {
+  return window.matchMedia(mobileQuery).matches
+    ? "drawer"
+    : window.matchMedia(sideQuery).matches
+      ? "side"
+      : "below";
+}
+
+export interface ResponsiveOverlayProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerRef: RefObject<HTMLElement | null>;
+  "aria-label": string;
+  /** Keep an in-flight mutation visible until the adapter reports its result. */
+  isDismissDisabled?: boolean;
+  children: ReactNode;
+  className?: string;
+}
+
+/** The same contextual content, anchored on desktop and in a bottom drawer on phones. */
+export function ResponsiveOverlay({
+  isOpen,
+  onOpenChange,
+  triggerRef,
+  "aria-label": label,
+  isDismissDisabled = false,
+  children,
+  className,
+}: ResponsiveOverlayProps) {
+  const layout = useSyncExternalStore(subscribe, presentation, () => "side");
+  const dialog = (
+    <Dialog aria-label={label} className="flex min-h-0 flex-1 flex-col outline-none">
+      {children}
+    </Dialog>
+  );
+  const surface = overlaySurfaceClassName;
+  if (layout === "drawer") {
+    return (
+      <ModalOverlay
+        isOpen={isOpen}
+        onOpenChange={onOpenChange}
+        isDismissable={!isDismissDisabled}
+        isKeyboardDismissDisabled={isDismissDisabled}
+        className="fixed inset-0 z-50 flex items-end justify-center bg-overlay data-entering:animate-fade-in data-exiting:animate-fade-out"
+      >
+        <Modal
+          data-presentation="drawer"
+          className={cn(
+            surface,
+            "max-h-[calc(100dvh-1rem)] w-full rounded-t-surface pb-[env(safe-area-inset-bottom)] data-entering:animate-drawer-settle data-exiting:animate-drawer-out",
+            className,
+          )}
+        >
+          {dialog}
+        </Modal>
+      </ModalOverlay>
+    );
+  }
+  return (
+    <Popover
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      triggerRef={triggerRef}
+      placement={layout === "side" ? "right" : "bottom start"}
+      isKeyboardDismissDisabled={isDismissDisabled}
+      shouldCloseOnInteractOutside={() => !isDismissDisabled}
+      data-presentation="popover"
+      className={cn(
+        surface,
+        "z-50 max-h-[min(48rem,calc(100dvh-2rem))] w-96 max-w-[calc(100vw-2rem)] origin-(--trigger-anchor-point) rounded-surface border border-line shadow-popover data-entering:animate-pop-in data-exiting:animate-pop-out",
+        className,
+      )}
+    >
+      {dialog}
+    </Popover>
+  );
+}

package/source/components/scenario-picker/copy.ts

@@ -0,0 +1,5 @@
+export const scenarioPickerCopy = {
+  label: "Scenario",
+  search: "Search scenarios",
+  empty: "No matching scenarios.",
+} as const;

package/source/components/scenario-picker/index.tsx

@@ -0,0 +1,142 @@
+import { useRef, useState } from "react";
+import {
+  Autocomplete,
+  Input,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  SearchField,
+  Select,
+  SelectValue,
+  Text,
+  useFilter,
+} from "react-aria-components";
+import { Button } from "../button";
+import { IconCheck, IconChevronDown, IconSearch } from "../icons";
+import { cn } from "../../lib/cn.js";
+import { scenarioPickerCopy as copy } from "./copy";
+
+export interface ScenarioOption<K extends string> {
+  id: K;
+  label: string;
+  description: string;
+  isDisabled?: boolean;
+}
+
+/** Chooses demo conditions. The demo owner controls resetting and request cleanup. */
+export function ScenarioPicker<K extends string>({
+  label,
+  value,
+  onChange,
+  options,
+  isDisabled = false,
+}: {
+  label: string;
+  value: K;
+  onChange: (value: K) => void;
+  options: ScenarioOption<K>[];
+  isDisabled?: boolean;
+}) {
+  const root = useRef<HTMLDivElement>(null);
+  const [isOpen, setOpen] = useState(false);
+  const [isDark, setDark] = useState(false);
+  const { contains } = useFilter({ sensitivity: "base" });
+  const selected = options.find((option) => option.id === value);
+  const list = (
+    <ListBox
+      items={options}
+      className="p-1 outline-none"
+      renderEmptyState={() => <p className="px-3 py-5 type-body text-fg-subtle">{copy.empty}</p>}
+    >
+      {(option) => (
+        <ListBoxItem
+          id={option.id}
+          textValue={`${option.label} ${option.description}`}
+          isDisabled={option.isDisabled}
+          className="group flex cursor-pointer items-start gap-3 rounded-cell px-3 py-2.5 text-fg-emphasis outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-focus-visible:focus-ring data-focused:bg-surface-subtle"
+        >
+          <div className="flex min-w-0 flex-1 flex-col gap-1">
+            <Text slot="label" className="type-label">
+              {option.label}
+            </Text>
+            <Text slot="description" className="type-caption font-normal text-fg-subtle">
+              {option.description}
+            </Text>
+          </div>
+          <IconCheck className="invisible mt-0.5 size-4 shrink-0 group-data-selected:visible" />
+        </ListBoxItem>
+      )}
+    </ListBox>
+  );
+  return (
+    <Select
+      ref={root}
+      aria-label={label}
+      value={value}
+      onChange={(next) => {
+        const option = options.find((option) => option.id === next);
+        if (option && option.id !== value && !option.isDisabled) onChange(option.id);
+      }}
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        // Portals sit outside scoped preview themes; retain the trigger's theme.
+        if (open) setDark(Boolean(root.current?.closest(".dark")));
+        setOpen(open);
+      }}
+      isDisabled={isDisabled}
+      className="max-w-full min-w-0 self-start"
+    >
+      <Button size="sm" aria-label={label} className="max-w-full min-w-0 justify-between">
+        <span className="font-normal text-fg-subtle">{copy.label}:</span>
+        <SelectValue className="min-w-0 truncate">{selected?.label}</SelectValue>
+        <IconChevronDown className="size-3.5 shrink-0 text-fg-subtle" />
+      </Button>
+      <Popover
+        placement="bottom start"
+        offset={6}
+        className={cn(
+          "z-50 w-80 max-w-[calc(100vw-2rem)] origin-(--trigger-anchor-point) overflow-hidden rounded-surface border border-line-subtle bg-surface text-fg shadow-popover outline-none data-entering:animate-pop-in data-exiting:animate-pop-out",
+          isDark && "dark",
+        )}
+      >
+        <div
+          onKeyDownCapture={(event) => {
+            if (event.key === "Escape") {
+              event.preventDefault();
+              event.stopPropagation();
+              setOpen(false);
+            }
+          }}
+        >
+          {options.length > 6 ? (
+            <Autocomplete filter={contains}>
+              <SearchField
+                aria-label={copy.search}
+                autoFocus
+                className="border-b border-line-subtle"
+              >
+                <div className="flex items-center gap-2 px-3">
+                  <IconSearch className="size-4 shrink-0 text-fg-subtle" />
+                  <Input
+                    placeholder={copy.search}
+                    className="h-control-md w-full min-w-0 bg-transparent type-body text-fg-emphasis outline-none placeholder:text-fg-subtle [&::-webkit-search-cancel-button]:hidden"
+                  />
+                </div>
+              </SearchField>
+              <div
+                role="region"
+                aria-label={label}
+                tabIndex={0}
+                className="max-h-[min(24rem,60dvh)] overflow-y-auto outline-none focus-visible:focus-ring"
+              >
+                {list}
+              </div>
+            </Autocomplete>
+          ) : (
+            <div className="max-h-[min(24rem,60dvh)] overflow-y-auto">{list}</div>
+          )}
+        </div>
+      </Popover>
+    </Select>
+  );
+}

package/source/components/scroll-area.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+
+export interface ScrollAreaProps {
+  children: ReactNode;
+  className?: string;
+  /** Label for keyboard users when the area scrolls (it becomes focusable). */
+  label?: string;
+  /** Scroll to this position (in pixels) when it first appears or changes. */
+  scrollTo?: number;
+}
+
+/**
+ * A scrolling box whose edges fade when there's more to see, so a list cut
+ * off by the edge reads as "keep scrolling" rather than "broken".
+ */
+export function ScrollArea({ children, className, label, scrollTo }: ScrollAreaProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [edges, setEdges] = useState({ top: false, bottom: false });
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const update = () =>
+      setEdges({
+        top: el.scrollTop > 1,
+        bottom: el.scrollTop + el.clientHeight < el.scrollHeight - 1,
+      });
+    // A ResizeObserver reports once as soon as it starts, which sets the first state.
+    const resize = new ResizeObserver(update);
+    resize.observe(el);
+    for (const child of el.children) resize.observe(child);
+    el.addEventListener("scroll", update, { passive: true });
+    return () => {
+      resize.disconnect();
+      el.removeEventListener("scroll", update);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (scrollTo !== undefined && ref.current) ref.current.scrollTop = scrollTo;
+  }, [scrollTo]);
+
+  const fade = "1.5rem";
+  const mask = `linear-gradient(to bottom, ${edges.top ? "transparent" : "black"} 0, black ${edges.top ? fade : "0"}, black calc(100% - ${edges.bottom ? fade : "0px"}), ${edges.bottom ? "transparent" : "black"} 100%)`;
+
+  return (
+    <div
+      ref={ref}
+      tabIndex={edges.top || edges.bottom ? 0 : undefined}
+      role={edges.top || edges.bottom ? "region" : undefined}
+      aria-label={edges.top || edges.bottom ? label : undefined}
+      className={cn("overflow-y-auto overscroll-contain rounded-[2px]", className)}
+      style={{ maskImage: mask, WebkitMaskImage: mask }}
+    >
+      {children}
+    </div>
+  );
+}