@agent-native/core-corpus 0.214.0 → 0.216.0

package/corpus/templates/slides-2/app/components/editor/SlidesComposerContextProvider.tsx

@@ -0,0 +1,74 @@
+import { useSession } from "@agent-native/core/client/hooks";
+import type { AssistantChatComposerContextProviderProps } from "@agent-native/toolkit/app/chat/chat";
+import { useNavigate } from "react-router";
+
+import { useDesignSystemWorkflows } from "@/hooks/use-design-system-workflows";
+import { useDesignSystems } from "@/hooks/use-design-systems";
+
+import { useSlidesComposerContext } from "./SlidesComposerContext";
+
+export function SlidesComposerContextProvider(
+  props: AssistantChatComposerContextProviderProps,
+) {
+  const { session } = useSession();
+  const scopeKey = JSON.stringify([
+    "slides-2",
+    session?.authUserId,
+    session?.email,
+    session?.orgId,
+    props.threadId,
+    props.tabId,
+  ]);
+  const draftScope = JSON.stringify([
+    "slides-2",
+    session?.authUserId,
+    session?.email,
+    session?.orgId,
+    props.threadId,
+  ]);
+  return (
+    <SlidesComposerContext
+      key={scopeKey}
+      {...props}
+      scopeKey={scopeKey}
+      draftScope={draftScope}
+    />
+  );
+}
+
+function SlidesComposerContext({
+  children,
+  isActive,
+  scopeKey,
+  draftScope,
+}: AssistantChatComposerContextProviderProps & {
+  scopeKey: string;
+  draftScope: string;
+}) {
+  const navigate = useNavigate();
+  const systemsEnabled = useDesignSystemWorkflows();
+  const systems = useDesignSystems(systemsEnabled && isActive);
+  const context = useSlidesComposerContext({
+    active: isActive,
+    scopeKey,
+    draftScope,
+    persistSelection: false,
+    defaultDesignSystemId: null,
+    systems: systems.designSystems,
+    systemsError: systems.error,
+    systemsLoading: systems.isLoading,
+    retrySystems: systems.refetch,
+    onCreateDesignSystem: () => navigate("/design-systems"),
+  });
+  return children({
+    menuItems: context.props.contextMenuItems,
+    contextItems: context.props.contextItems,
+    onRemoveContextItem: context.props.onRemoveContextItem,
+    onRetryContextItem: context.props.onRetryContextItem,
+    onInspectContextItem: context.props.onInspectContextItem,
+    dialogs: context.dialogs,
+    prepareSubmission: async (snapshot) =>
+      (await context.beforeSend(snapshot)).items,
+    submissionAccepted: context.submissionAccepted,
+  });
+}

package/corpus/templates/slides-2/app/components/editor/SlidesLayersPanel.tsx

@@ -0,0 +1,377 @@
+import {
+  IconCode,
+  IconChevronDown,
+  IconChevronRight,
+  IconHash,
+  IconPhoto,
+  IconSearch,
+  IconSquare,
+  IconVectorBezier2,
+  IconVideo,
+  IconX,
+} from "@tabler/icons-react";
+import { useState, type DragEvent, type ReactNode } from "react";
+
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { Input } from "@/components/ui/input";
+
+export type SlidesLayerKind =
+  | "code"
+  | "container"
+  | "image"
+  | "shape"
+  | "text"
+  | "video"
+  | "vector";
+
+export interface SlidesLayerNode {
+  id: string;
+  label: string;
+  kind?: SlidesLayerKind;
+  children?: SlidesLayerNode[];
+}
+
+export type SlidesLayerPlacement = "before" | "after" | "inside";
+
+export interface SlidesLayersPanelLabels {
+  title: string;
+  close: string;
+  search: string;
+  expand: string;
+  collapse: string;
+}
+
+export interface SlidesLayersPanelProps {
+  layers: SlidesLayerNode[];
+  selectedIds: string[] | ReadonlySet<string>;
+  onSelectLayer: (id: string, additive: boolean) => void;
+  onHoverLayer?: (id: string) => void;
+  onLeaveLayer?: (id: string) => void;
+  contextMenuContent?: ReactNode;
+  onContextMenuLayer?: (id: string) => void;
+  onContextMenuClose?: () => void;
+  onMoveLayer: (
+    sourceId: string,
+    targetId: string,
+    placement: SlidesLayerPlacement,
+  ) => void;
+  onClose: () => void;
+  labels: SlidesLayersPanelLabels;
+}
+
+function filterLayers(
+  nodes: SlidesLayerNode[],
+  query: string,
+): SlidesLayerNode[] {
+  return nodes.flatMap((node) => {
+    if (node.label.toLowerCase().includes(query)) return [node];
+    const children = filterLayers(node.children ?? [], query);
+    return children.length ? [{ ...node, children }] : [];
+  });
+}
+
+function dropPlacement(event: DragEvent<HTMLElement>): SlidesLayerPlacement {
+  const bounds = event.currentTarget.getBoundingClientRect();
+  const position = (event.clientY - bounds.top) / bounds.height;
+  return position < 0.3 ? "after" : position > 0.7 ? "before" : "inside";
+}
+
+// Tabler has no large/small "Aa" glyph; this is Lucide's a-large-small, which the Figma spec uses for text layers.
+function TextLayerIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16" />
+      <path d="M15.697 14h5.606" />
+      <path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
+      <path d="M3.304 13h6.392" />
+    </svg>
+  );
+}
+
+function LayerGlyph({
+  kind,
+  hasChildren,
+}: {
+  kind?: SlidesLayerKind;
+  hasChildren: boolean;
+}) {
+  const className = "size-4";
+  switch (kind) {
+    case "text":
+      return <TextLayerIcon className={className} />;
+    case "image":
+      return <IconPhoto className={className} />;
+    case "video":
+      return <IconVideo className={className} />;
+    case "vector":
+      return <IconVectorBezier2 className={className} />;
+    case "code":
+      return <IconCode className={className} />;
+    case "shape":
+      return <IconSquare className={className} />;
+    case "container":
+      return <IconHash className={className} />;
+    default:
+      return hasChildren ? (
+        <IconHash className={className} />
+      ) : (
+        <IconSquare className={className} />
+      );
+  }
+}
+
+function LayerRow({
+  node,
+  depth,
+  selectedIds,
+  onHoverLayer,
+  onLeaveLayer,
+  contextMenuContent,
+  onContextMenuLayer,
+  onContextMenuClose,
+  labels,
+  onSelectLayer,
+  onMoveLayer,
+  searching,
+}: {
+  node: SlidesLayerNode;
+  depth: number;
+  searching: boolean;
+  selectedIds: string[] | ReadonlySet<string>;
+  onHoverLayer?: SlidesLayersPanelProps["onHoverLayer"];
+  onLeaveLayer?: SlidesLayersPanelProps["onLeaveLayer"];
+  labels: SlidesLayersPanelLabels;
+  onSelectLayer: SlidesLayersPanelProps["onSelectLayer"];
+  contextMenuContent?: SlidesLayersPanelProps["contextMenuContent"];
+  onContextMenuLayer?: SlidesLayersPanelProps["onContextMenuLayer"];
+  onContextMenuClose?: SlidesLayersPanelProps["onContextMenuClose"];
+  onMoveLayer: SlidesLayersPanelProps["onMoveLayer"];
+}) {
+  const [collapsedState, setExpanded] = useState(true);
+  const expanded = searching || collapsedState;
+  const [dragging, setDragging] = useState(false);
+  const children = node.children ?? [];
+  const displayChildren = [...children].reverse();
+  const selected = Array.isArray(selectedIds)
+    ? selectedIds.includes(node.id)
+    : selectedIds.has(node.id);
+
+  const handleDrop = (event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const sourceId = event.dataTransfer.getData("text/plain");
+    if (sourceId && sourceId !== node.id) {
+      onMoveLayer(sourceId, node.id, dropPlacement(event));
+    }
+    setDragging(false);
+  };
+
+  const rowContent = (
+    <div
+      data-layer-row-content
+      data-layer-depth={depth}
+      style={{ paddingLeft: 16 + depth * 24 }}
+      data-layer-selection={selected ? "primary" : undefined}
+      className={`group flex h-8 w-full items-center gap-2 pr-12 text-[11px] font-[450] leading-4 tracking-[0.055px] text-foreground ${selected ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-foreground"} ${dragging ? "opacity-50" : ""}`}
+      onMouseEnter={() => onHoverLayer?.(node.id)}
+      onMouseLeave={() => onLeaveLayer?.(node.id)}
+      onDragOver={(event) => event.preventDefault()}
+      onDragEnter={() => setDragging(true)}
+      onDragLeave={() => setDragging(false)}
+      onDrop={handleDrop}
+    >
+      {children.length ? (
+        <button
+          type="button"
+          className="flex size-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring"
+          aria-label={expanded ? labels.collapse : labels.expand}
+          onClick={() => setExpanded(!collapsedState)}
+        >
+          {expanded ? (
+            <IconChevronDown className="size-4" />
+          ) : (
+            <IconChevronRight className="size-4" />
+          )}
+        </button>
+      ) : null}
+      <button
+        type="button"
+        data-layer-row-button
+        className="flex min-w-0 flex-1 items-center gap-2 rounded-sm py-0 text-left outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        onClick={(event) =>
+          onSelectLayer(
+            node.id,
+            event.metaKey || event.ctrlKey || event.shiftKey,
+          )
+        }
+      >
+        <span className="flex size-4 shrink-0 items-center justify-center text-muted-foreground">
+          <LayerGlyph kind={node.kind} hasChildren={children.length > 0} />
+        </span>
+        <span className="min-w-0 flex-1 truncate">{node.label}</span>
+      </button>
+    </div>
+  );
+
+  const contextMenuRowContent =
+    contextMenuContent && onContextMenuLayer ? (
+      <ContextMenu>
+        <ContextMenuTrigger
+          asChild
+          onContextMenu={(event) => {
+            event.stopPropagation();
+            onContextMenuLayer(node.id);
+          }}
+        >
+          {rowContent}
+        </ContextMenuTrigger>
+        <ContextMenuContent onCloseAutoFocus={onContextMenuClose}>
+          {contextMenuContent}
+        </ContextMenuContent>
+      </ContextMenu>
+    ) : (
+      rowContent
+    );
+
+  return (
+    <div
+      role="treeitem"
+      aria-level={depth + 1}
+      aria-expanded={children.length ? expanded : undefined}
+      aria-selected={selected}
+      data-layer-node-id={node.id}
+      draggable
+      onDragStart={(event) => {
+        event.dataTransfer.setData("text/plain", node.id);
+        event.dataTransfer.effectAllowed = "move";
+        event.stopPropagation();
+        setDragging(true);
+      }}
+      onDragEnd={() => setDragging(false)}
+    >
+      {contextMenuRowContent}
+      {expanded && children.length ? (
+        <div role="group">
+          {displayChildren.map((child) => (
+            <LayerRow
+              key={child.id}
+              node={child}
+              depth={depth + 1}
+              selectedIds={selectedIds}
+              onHoverLayer={onHoverLayer}
+              onLeaveLayer={onLeaveLayer}
+              contextMenuContent={contextMenuContent}
+              onContextMenuLayer={onContextMenuLayer}
+              onContextMenuClose={onContextMenuClose}
+              labels={labels}
+              onSelectLayer={onSelectLayer}
+              onMoveLayer={onMoveLayer}
+              searching={searching}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export function SlidesLayersPanel({
+  layers,
+  selectedIds,
+  onHoverLayer,
+  onLeaveLayer,
+  contextMenuContent,
+  onContextMenuLayer,
+  onContextMenuClose,
+  onSelectLayer,
+  onMoveLayer,
+  onClose,
+  labels,
+}: SlidesLayersPanelProps) {
+  const [searching, setSearching] = useState(false);
+  const [query, setQuery] = useState("");
+  const needle = searching ? query.trim().toLowerCase() : "";
+  const visibleLayers = needle ? filterLayers(layers, needle) : layers;
+
+  return (
+    <aside
+      className="flex h-full w-full min-w-0 flex-col bg-background"
+      aria-label={labels.title}
+    >
+      <header className="flex h-10 shrink-0 items-center justify-between border-t border-border pl-4 pr-2">
+        <h2 className="text-[11px] font-[550] leading-4 tracking-[0.055px] text-foreground">
+          {labels.title}
+        </h2>
+        <div className="flex items-center">
+          <button
+            type="button"
+            className={`flex size-[22px] items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground ${searching ? "bg-accent text-foreground" : ""}`}
+            onClick={() => {
+              setSearching((value) => !value);
+              setQuery("");
+            }}
+            aria-label={labels.search}
+            aria-pressed={searching}
+          >
+            <IconSearch className="size-3" />
+          </button>
+          <button
+            type="button"
+            className="flex size-[22px] items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+            onClick={onClose}
+            aria-label={labels.close}
+          >
+            <IconX className="size-3" />
+          </button>
+        </div>
+      </header>
+      {searching ? (
+        <div className="shrink-0 px-2 pb-2">
+          <Input
+            autoFocus
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={labels.search}
+            aria-label={labels.search}
+            className="h-7 text-[11px]"
+          />
+        </div>
+      ) : null}
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        <div className="w-full" role="tree" aria-label={labels.title}>
+          {[...visibleLayers].reverse().map((node) => (
+            <LayerRow
+              key={node.id}
+              node={node}
+              depth={0}
+              selectedIds={selectedIds}
+              onHoverLayer={onHoverLayer}
+              onLeaveLayer={onLeaveLayer}
+              contextMenuContent={contextMenuContent}
+              onContextMenuLayer={onContextMenuLayer}
+              onContextMenuClose={onContextMenuClose}
+              labels={labels}
+              onSelectLayer={onSelectLayer}
+              onMoveLayer={onMoveLayer}
+              searching={needle !== ""}
+            />
+          ))}
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+export default SlidesLayersPanel;

package/corpus/templates/slides-2/app/components/editor/SpeakerNotesPanel.tsx

@@ -0,0 +1,119 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { appStorageKey } from "@shared/app-storage";
+import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import { useState, type PointerEvent as ReactPointerEvent } from "react";
+
+interface SpeakerNotesPanelProps {
+  notes: string;
+  onChange: (notes: string) => void;
+  readOnly?: boolean;
+}
+
+const MIN_NOTES_HEIGHT = 72;
+const MAX_NOTES_HEIGHT = 260;
+const DEFAULT_NOTES_HEIGHT = 112;
+const NOTES_EXPANDED_STORAGE_KEY = appStorageKey("speaker-notes-expanded");
+const NOTES_HEIGHT_STORAGE_KEY = appStorageKey("speaker-notes-height");
+
+function clampNotesHeight(value: number) {
+  return Math.min(MAX_NOTES_HEIGHT, Math.max(MIN_NOTES_HEIGHT, value));
+}
+
+export function SpeakerNotesPanel({
+  notes,
+  onChange,
+  readOnly = false,
+}: SpeakerNotesPanelProps) {
+  const t = useT();
+  const [expanded, setExpanded] = useState(() => {
+    try {
+      return localStorage.getItem(NOTES_EXPANDED_STORAGE_KEY) === "true";
+    } catch {
+      // coercion-ok: browser storage is optional; the collapsed state is the default.
+      return false;
+    }
+  });
+  const [height, setHeight] = useState(() => {
+    try {
+      const stored = Number(localStorage.getItem(NOTES_HEIGHT_STORAGE_KEY));
+      return Number.isFinite(stored)
+        ? clampNotesHeight(stored)
+        : DEFAULT_NOTES_HEIGHT;
+    } catch {
+      return DEFAULT_NOTES_HEIGHT;
+    }
+  });
+
+  const toggle = () => {
+    const next = !expanded;
+    setExpanded(next);
+    try {
+      localStorage.setItem(NOTES_EXPANDED_STORAGE_KEY, String(next));
+    } catch {
+      // coercion-ok: The current React state remains authoritative when browser storage is unavailable.
+    }
+  };
+
+  const startResize = (event: ReactPointerEvent<HTMLDivElement>) => {
+    if (!expanded) return;
+    event.preventDefault();
+    const startY = event.clientY;
+    const startHeight = height;
+    let latestHeight = startHeight;
+    const onMove = (moveEvent: PointerEvent) => {
+      latestHeight = clampNotesHeight(startHeight + startY - moveEvent.clientY);
+      setHeight(latestHeight);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      try {
+        localStorage.setItem(NOTES_HEIGHT_STORAGE_KEY, String(latestHeight));
+      } catch {
+        // coercion-ok: The resized height applies now even when it cannot persist across reloads.
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp, { once: true });
+  };
+
+  return (
+    <div className="flex-shrink-0 bg-[var(--slides-editor-surface)]">
+      {expanded && (
+        <div
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label={t("raw.speakerNotes")}
+          className="group flex h-2 cursor-row-resize items-center justify-center"
+          onPointerDown={startResize}
+        >
+          <div className="h-px w-10 rounded-full bg-muted-foreground/30 transition-colors group-hover:bg-muted-foreground/70" />
+        </div>
+      )}
+      <button
+        onClick={toggle}
+        className="group flex w-full cursor-pointer items-center justify-between px-4 py-1.5"
+      >
+        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider transition-colors group-hover:text-foreground/80">
+          {t("raw.speakerNotes")}
+        </span>
+        {expanded ? (
+          <IconChevronDown className="w-3 h-3 text-muted-foreground" />
+        ) : (
+          <IconChevronUp className="w-3 h-3 text-muted-foreground" />
+        )}
+      </button>
+      {expanded && (
+        <div className="px-4 pb-3" style={{ height }}>
+          <textarea
+            value={notes || ""}
+            onChange={(e) => onChange(e.target.value)}
+            readOnly={readOnly}
+            placeholder={readOnly ? undefined : t("raw.addSpeakerNotes")}
+            className="h-full w-full resize-none bg-transparent font-mono text-xs text-muted-foreground outline-none placeholder:text-muted-foreground/70"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/corpus/templates/slides-2/app/components/editor/TweaksPanel.tsx

@@ -0,0 +1,77 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  VisualInspectorPanel,
+  VisualInspectorSection,
+  VisualTweakControl,
+} from "@agent-native/toolkit/design-tweaks";
+import { IconAdjustmentsHorizontal, IconX } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import type { TweakDefinition } from "@/lib/design-systems";
+
+interface TweaksPanelProps {
+  tweaks: TweakDefinition[];
+  values: Record<string, string | number | boolean>;
+  onChange: (id: string, value: string | number | boolean) => void;
+  onClose: () => void;
+}
+
+export function TweaksPanel({
+  tweaks,
+  values,
+  onChange,
+  onClose,
+}: TweaksPanelProps) {
+  const t = useT();
+  return (
+    <div className="absolute bottom-4 right-4 z-20">
+      <VisualInspectorPanel
+        title={t("styleInspector.deckStyle")}
+        subtitle={t("styleInspector.designSystemTweaks")}
+        className="w-64"
+        headerAction={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 cursor-pointer text-muted-foreground hover:text-foreground"
+            onClick={onClose}
+            aria-label={t("styleInspector.closeTweaks")}
+          >
+            <IconX className="size-3.5" />
+          </Button>
+        }
+      >
+        <VisualInspectorSection title={t("styleInspector.controls")}>
+          {tweaks.length > 0 ? (
+            tweaks.map((tweak) => (
+              <TweakControl
+                key={tweak.id}
+                tweak={tweak}
+                value={values[tweak.id] ?? tweak.defaultValue}
+                onChange={(v) => onChange(tweak.id, v)}
+              />
+            ))
+          ) : (
+            <div className="flex flex-col items-center gap-2 py-6 text-center text-[11px] text-muted-foreground">
+              <IconAdjustmentsHorizontal className="size-5 text-muted-foreground/40" />
+              <span>{t("styleInspector.noDeckStyleControls")}</span>
+            </div>
+          )}
+        </VisualInspectorSection>
+      </VisualInspectorPanel>
+    </div>
+  );
+}
+
+function TweakControl({
+  tweak,
+  value,
+  onChange,
+}: {
+  tweak: TweakDefinition;
+  value: string | number | boolean;
+  onChange: (v: string | number | boolean) => void;
+}) {
+  return <VisualTweakControl tweak={tweak} value={value} onChange={onChange} />;
+}

package/corpus/templates/slides-2/app/components/editor/UploadStorageGate.tsx

@@ -0,0 +1,37 @@
+import { FileStorageSetupPopover } from "@agent-native/toolkit/app/chat/FileStorageSetupPopover";
+import type { RefObject } from "react";
+import { useEffect } from "react";
+
+export function UploadStorageGate({
+  configured,
+  unavailable,
+  open,
+  onOpenChange,
+  onRetry,
+  onConnected,
+  anchorRef,
+}: {
+  configured: boolean;
+  unavailable: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onRetry: () => void;
+  onConnected?: () => void;
+  anchorRef?: RefObject<HTMLElement | null>;
+}) {
+  useEffect(() => {
+    if (configured && open) onOpenChange(false);
+  }, [configured, onOpenChange, open]);
+  if (!open || configured) return null;
+  return (
+    <FileStorageSetupPopover
+      open
+      onOpenChange={onOpenChange}
+      onConnected={onConnected}
+      anchorRef={anchorRef}
+      {...(unavailable
+        ? { status: "unavailable" as const, onRetry }
+        : { status: "missing" as const })}
+    />
+  );
+}