@agent-native/toolkit 0.21.3 → 0.22.0-nightly-20260926081002

package/src/app-shell/TemplatePreviewDialog.tsx

@@ -0,0 +1,224 @@
+import {
+  ActionButton,
+  Dialog,
+  Skeleton,
+  Surface,
+} from "@agent-native/toolkit/design-system";
+import {
+  useRef,
+  type KeyboardEvent,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+export interface TemplatePreviewThumbnail {
+  id: string;
+  title: string;
+  preview: ReactNode;
+  disabled?: boolean;
+}
+
+export type TemplatePreviewDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: ReactNode;
+  children: ReactNode;
+  size?: "large" | "viewport";
+  loading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  onUseTemplate?: () => void;
+  useTemplatePending?: boolean;
+  useTemplateDisabled?: boolean;
+  empty?: boolean;
+  labels: {
+    close: string;
+    useTemplate: string;
+    loading: string;
+    empty: string;
+    retry: string;
+    thumbnails: string;
+  };
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  restoreFocusRef?: RefObject<HTMLElement | null>;
+} & (
+  | {
+      thumbnails: readonly TemplatePreviewThumbnail[];
+      selectedId: string;
+      onSelectedIdChange: (id: string) => void;
+    }
+  | { thumbnails?: never; selectedId?: never; onSelectedIdChange?: never }
+);
+
+export function TemplatePreviewDialog({
+  open,
+  onOpenChange,
+  title,
+  children,
+  size = "viewport",
+  loading = false,
+  error,
+  onRetry,
+  empty = false,
+  labels,
+  thumbnails,
+  selectedId,
+  onSelectedIdChange,
+  initialFocusRef,
+  restoreFocusRef,
+  onUseTemplate,
+  useTemplatePending = false,
+  useTemplateDisabled = false,
+}: TemplatePreviewDialogProps) {
+  const thumbnailElements = useRef(new Map<string, HTMLDivElement>());
+  const ready = !loading && !error && !empty;
+  const onRailKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    const target = event.target;
+    if (
+      !(target instanceof HTMLElement) ||
+      !target.closest('button, [role="button"]')
+    )
+      return;
+    const enabled = thumbnails?.filter((item) => !item.disabled) ?? [];
+    if (!enabled.length) return;
+    const currentId = target.closest<HTMLElement>(
+      "[data-template-preview-thumbnail]",
+    )?.dataset.templatePreviewThumbnail;
+    const index = enabled.findIndex((item) => item.id === currentId);
+    if (index < 0) return;
+    const offset = ["ArrowRight", "ArrowDown"].includes(event.key)
+      ? 1
+      : ["ArrowLeft", "ArrowUp"].includes(event.key)
+        ? -1
+        : 0;
+    const next =
+      event.key === "Home"
+        ? 0
+        : event.key === "End"
+          ? enabled.length - 1
+          : offset
+            ? (index + offset + enabled.length) % enabled.length
+            : -1;
+    if (next < 0) return;
+    event.preventDefault();
+    const item = enabled[next]!;
+    onSelectedIdChange?.(item.id);
+    thumbnailElements.current
+      .get(item.id)
+      ?.querySelector<HTMLElement>('button, [role="button"]')
+      ?.focus();
+  };
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={onOpenChange}
+      title={title}
+      size={size}
+      className="agent-template-preview-dialog"
+      closeLabel={labels.close}
+      hideClose={Boolean(onUseTemplate)}
+      headerAction={
+        onUseTemplate ? (
+          <ActionButton
+            intent="primary"
+            emphasis="solid"
+            size="compact"
+            pending={useTemplatePending}
+            disabled={useTemplateDisabled || useTemplatePending || !ready}
+            onPress={onUseTemplate}
+          >
+            {labels.useTemplate}
+          </ActionButton>
+        ) : undefined
+      }
+      initialFocusRef={initialFocusRef}
+      restoreFocusRef={restoreFocusRef}
+    >
+      <div
+        className="agent-template-preview-viewer"
+        data-size={size}
+        data-has-rail={(ready && Boolean(thumbnails?.length)) || undefined}
+        aria-busy={loading || undefined}
+      >
+        {ready && thumbnails?.length ? (
+          <nav
+            className="agent-template-preview-rail"
+            aria-label={labels.thumbnails}
+            onKeyDown={onRailKeyDown}
+          >
+            {thumbnails.map((item) => (
+              <div
+                key={item.id}
+                className="agent-template-preview-thumbnail"
+                data-template-preview-thumbnail={item.id}
+                data-selected={item.id === selectedId || undefined}
+                role={item.disabled ? "button" : undefined}
+                aria-label={item.disabled ? item.title : undefined}
+                aria-disabled={item.disabled || undefined}
+                ref={(element) => {
+                  if (element) thumbnailElements.current.set(item.id, element);
+                  else thumbnailElements.current.delete(item.id);
+                }}
+              >
+                <Surface
+                  padding="compact"
+                  interactive={!item.disabled}
+                  aria-label={item.title}
+                  aria-pressed={
+                    !item.disabled ? item.id === selectedId : undefined
+                  }
+                  onPress={
+                    item.disabled
+                      ? undefined
+                      : () => onSelectedIdChange?.(item.id)
+                  }
+                >
+                  <div className="agent-template-library-preview" inert>
+                    {item.preview}
+                  </div>
+                  <div className="truncate pt-2 text-sm">{item.title}</div>
+                </Surface>
+              </div>
+            ))}
+          </nav>
+        ) : null}
+        <div className="agent-template-preview-content">
+          {error ? (
+            <div
+              role="alert"
+              className="flex flex-wrap items-center justify-center gap-3 p-6"
+            >
+              <span className="text-sm text-destructive">{error}</span>
+              {onRetry ? (
+                <ActionButton
+                  emphasis="outline"
+                  disabled={loading}
+                  onPress={onRetry}
+                >
+                  {labels.retry}
+                </ActionButton>
+              ) : null}
+            </div>
+          ) : loading ? (
+            <div
+              role="status"
+              aria-label={labels.loading}
+              className="h-full p-4"
+            >
+              <Skeleton shape="rectangle" width="100%" height="100%" />
+            </div>
+          ) : empty ? (
+            <div
+              role="status"
+              className="p-6 text-center text-sm text-muted-foreground"
+            >
+              {labels.empty}
+            </div>
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+    </Dialog>
+  );
+}

package/src/app-shell/index.ts

@@ -1,3 +1,6 @@
+export * from "./PromptHome.js";
+export * from "./TemplateLibraryGrid.js";
+export * from "./TemplatePreviewDialog.js";
 export * from "./header-actions.js";
 export * from "./sidebar-footer-actions.js";
 export * from "./sidebar.js";

package/src/app-shell/prompt-home.css

@@ -0,0 +1,159 @@
+.agent-prompt-home {
+  max-width: 92.5rem;
+}
+
+.agent-prompt-home-hero {
+  position: relative;
+  display: flex;
+  min-height: clamp(36rem, 64svh, 44rem);
+  flex-direction: column;
+  align-items: center;
+  padding-block-start: clamp(12rem, 33svh, 22rem);
+  text-align: center;
+}
+
+.agent-prompt-home-composer {
+  width: 100%;
+  max-width: 43.75rem;
+}
+
+.agent-prompt-home-library {
+  padding-block-start: 2rem;
+}
+
+.agent-template-library-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
+}
+
+.agent-template-library-preview {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: inherit;
+}
+
+.agent-template-library-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto 5rem;
+}
+
+.agent-template-library-primary {
+  grid-area: 1 / 1 / 3 / 3;
+  min-width: 0;
+}
+
+.agent-template-library-caption {
+  height: 5rem;
+  padding-inline-end: 3rem;
+}
+
+.agent-template-library-actions {
+  grid-column: 2;
+  grid-row: 2;
+  align-self: start;
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .agent-template-library-actions {
+    opacity: 0;
+  }
+
+  .agent-template-library-card:hover .agent-template-library-actions,
+  .agent-template-library-card:focus-within .agent-template-library-actions {
+    opacity: 1;
+  }
+}
+
+.agent-template-preview-dialog {
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.agent-template-preview-dialog[data-size="large"] {
+  height: min(85dvh, 60rem);
+}
+
+.agent-template-preview-viewer {
+  display: grid;
+  min-height: 0;
+  height: 100%;
+  grid-template-rows: minmax(0, 1fr);
+}
+
+.agent-template-preview-viewer[data-has-rail] {
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 1rem;
+}
+
+.agent-template-preview-rail {
+  display: flex;
+  gap: 0.75rem;
+  overflow: auto;
+  padding: 0.25rem;
+}
+
+.agent-template-preview-thumbnail {
+  flex: 0 0 10rem;
+  min-width: 0;
+}
+
+.agent-template-preview-thumbnail:focus-within,
+.agent-template-preview-thumbnail[data-selected] {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+.agent-template-preview-content {
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+@media (min-width: 48rem) {
+  .agent-template-preview-viewer[data-has-rail] {
+    grid-template-columns: 12rem minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  .agent-template-preview-rail {
+    display: block;
+  }
+
+  .agent-template-preview-thumbnail + .agent-template-preview-thumbnail {
+    margin-block-start: 0.75rem;
+  }
+}
+
+.agent-template-library-card:focus-within {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+.agent-template-library-card[data-selected] {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+@media (min-width: 40rem) {
+  .agent-template-library-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 64rem) {
+  .agent-template-library-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 80rem) {
+  .agent-template-library-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}