@agent-native/core 0.131.5 → 0.131.7

package/corpus/templates/slides/app/components/editor/SlideOverflowWarning.tsx

@@ -0,0 +1,53 @@
+import { IconAlertTriangle, IconX } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+
+interface SlideOverflowWarningProps {
+  verticalOverflow: number;
+  isAskingAgentToFix: boolean;
+  dismissLabel: string;
+  onFix: () => void;
+  onDismiss: () => void;
+}
+
+export function SlideOverflowWarning({
+  verticalOverflow,
+  isAskingAgentToFix,
+  dismissLabel,
+  onFix,
+  onDismiss,
+}: SlideOverflowWarningProps) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="absolute top-3 left-3 z-20 flex items-center gap-2 rounded-md border border-amber-400/70 bg-amber-950/95 px-2.5 py-1.5 text-xs text-amber-50 shadow-lg"
+      onPointerDown={(event) => event.stopPropagation()}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <IconAlertTriangle className="h-3.5 w-3.5 flex-shrink-0" stroke={2} />
+      <span className="leading-tight">
+        Layout overflows by {verticalOverflow}px
+      </span>
+      <Button
+        size="sm"
+        variant="ghost"
+        className="ml-1 h-6 cursor-pointer px-2 text-[11px] font-medium text-amber-50 hover:bg-amber-400/20 hover:text-white"
+        onClick={onFix}
+        disabled={isAskingAgentToFix}
+      >
+        {isAskingAgentToFix ? "Asking…" : "Fix with AI"}
+      </Button>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="size-6 cursor-pointer text-amber-50 hover:bg-amber-400/20 hover:text-white"
+        onClick={onDismiss}
+        aria-label={dismissLabel}
+        title={dismissLabel}
+      >
+        <IconX className="size-3.5" />
+      </Button>
+    </div>
+  );
+}

package/corpus/templates/slides/app/components/editor/SlideStyleInspector.tsx

@@ -9,12 +9,20 @@ import {
 } from "@agent-native/toolkit/design-tweaks";
 import type { DesignSystemData } from "@shared/api";
 import {
+  IconAngle,
+  IconArrowAutofitHeight,
+  IconArrowAutofitWidth,
   IconBorderRadius,
+  IconBorderStyle,
   IconBoxPadding,
   IconDroplet,
+  IconGridDots,
   IconLetterCase,
   IconRuler2,
   IconSpacingHorizontal,
+  IconSpacingVertical,
+  IconStackBack,
+  IconStackFront,
   IconX,
 } from "@tabler/icons-react";
 
@@ -24,6 +32,8 @@ import { cn } from "@/lib/utils";
 import type { InlineTextStyleKey } from "./rich-text-selection";
 
 export interface SlideStyleSnapshot {
+  /** Omitted snapshots are existing object snapshots for backward compatibility. */
+  mode?: "object";
   selector: string;
   label: string;
   tagName: string;
@@ -50,10 +60,25 @@ export interface SlideStyleSnapshot {
   borderColor: string;
   paddingX: number;
   paddingY: number;
+  zIndex: number;
   textStyleScope?: "block" | "selection";
   mixedTextStyles?: InlineTextStyleKey[];
 }
 
+/**
+ * Slide backgrounds are a surface, rather than selectable canvas objects.
+ * The editor passes this mode while its Style panel is open without an object
+ * selection, so the inspector exposes only background-safe controls.
+ */
+export interface SlideBackgroundStyleSnapshot {
+  mode: "background";
+  backgroundColor: string;
+}
+
+export type SlideStyleInspectorSnapshot =
+  | SlideStyleSnapshot
+  | SlideBackgroundStyleSnapshot;
+
 export type SlideStylePatch = Partial<{
   color: string;
   backgroundColor: string;
@@ -74,8 +99,13 @@ export type SlideStylePatch = Partial<{
   width: string;
   height: string;
   transform: string;
+  zIndex: string;
 }>;
 
+export type SlideBackgroundStylePatch = Required<
+  Pick<SlideStylePatch, "backgroundColor">
+>;
+
 function tokenPalette(
   designSystem: DesignSystemData | undefined,
   t: (key: string) => string,
@@ -138,6 +168,85 @@ function tokenPalette(
   ];
 }
 
+// `slide.background` holds either a raw CSS value or a Tailwind arbitrary
+// class (`bg-[#000000]`), which SlideRenderer applies as a class rather than
+// an inline style. The picker only speaks CSS colors, so unwrap the arbitrary
+// form and report anything else (named utilities, gradients) as unreadable
+// rather than guessing a hex the slide is not actually using.
+function backgroundCssValue(background: string | undefined): string | null {
+  // SlideRenderer's own fallback when the field is unset.
+  if (!background) return "#000000";
+  const arbitrary = background.match(/^bg-\[(.+)\]$/);
+  if (arbitrary) return arbitrary[1].replace(/_/g, " ");
+  return background.startsWith("bg-") ? null : background;
+}
+
+/**
+ * Rendered in the style dock when no element is selected — otherwise the
+ * slide's own background is unreachable from the editor UI.
+ */
+export function SlideBackgroundInspector({
+  background,
+  designSystem,
+  className,
+  onChange,
+  onClose,
+}: {
+  background: string | undefined;
+  designSystem?: DesignSystemData;
+  className?: string;
+  onChange: (background: string) => void;
+  onClose?: () => void;
+}) {
+  const t = useT();
+  const documentColors = tokenPalette(designSystem, t).map(
+    (option) => option.value,
+  );
+  const solid = backgroundCssValue(background);
+
+  return (
+    <VisualInspectorPanel
+      title={t("styleInspector.title")}
+      subtitle={t("styleInspector.slide")}
+      className={className}
+      headerAction={
+        onClose ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 cursor-pointer text-muted-foreground hover:text-foreground"
+            onClick={onClose}
+            aria-label={t("styleInspector.close")}
+          >
+            <IconX className="size-3.5" />
+          </Button>
+        ) : undefined
+      }
+    >
+      <VisualInspectorSection
+        title={
+          <span className="inline-flex items-center gap-1.5">
+            <IconDroplet className="size-3" />
+            {t("styleInspector.slideBackground")}
+          </span>
+        }
+      >
+        <VisualControlRow label={t("styleInspector.background")}>
+          <VisualColorPicker
+            label={t("styleInspector.slideBackground")}
+            value={solid ?? "#000000"}
+            mixed={solid === null}
+            mixedLabel={t("styleInspector.mixed")}
+            documentColors={documentColors}
+            onChange={onChange}
+          />
+        </VisualControlRow>
+      </VisualInspectorSection>
+    </VisualInspectorPanel>
+  );
+}
+
 function formatValue(value: number) {
   return Number.isInteger(value)
     ? String(value)
@@ -153,21 +262,79 @@ export function SlideStyleInspector({
   designSystem,
   className,
   onChange,
+  onArrange,
   onClose,
 }: {
-  snapshot: SlideStyleSnapshot;
+  snapshot: SlideStyleInspectorSnapshot;
   designSystem?: DesignSystemData;
   className?: string;
   onChange: (patch: SlideStylePatch) => void;
+  /** Bring-to-front / send-to-back for the selected freeform object. Omitted
+   *  (or the snapshot not being a freeform object) hides the Arrange row. */
+  onArrange?: (target: "front" | "back") => void;
   onClose: () => void;
 }) {
   const t = useT();
   const palette = tokenPalette(designSystem, t);
   const documentColors = palette.map((option) => option.value);
-  const mixedTextStyles = snapshot.mixedTextStyles ?? [];
   const inlineEditSurfaceProps = {
     "data-slide-inline-edit-surface": "true",
   };
+  const inspectorClassName = cn(
+    "slide-style-inspector h-full w-full rounded-none border-0 bg-transparent text-foreground shadow-none backdrop-blur-none",
+    className,
+  );
+  const headerAction = (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className="size-7 shrink-0 text-muted-foreground hover:text-foreground"
+      onClick={onClose}
+      aria-label={t("styleInspector.close")}
+    >
+      <IconX className="size-3.5" />
+    </Button>
+  );
+
+  if (snapshot.mode === "background") {
+    return (
+      <VisualInspectorPanel
+        title={t("styleInspector.title")}
+        subtitle={t("styleInspector.background")}
+        className={inspectorClassName}
+        headerAction={headerAction}
+      >
+        <VisualInspectorSection
+          title={
+            <span className="inline-flex items-center gap-1.5">
+              <IconDroplet className="size-3.5" />
+              {t("styleInspector.fill")}
+            </span>
+          }
+          className="slides-inspector-section"
+        >
+          <VisualControlRow
+            label={t("styleInspector.color")}
+            className="slides-inspector-control"
+          >
+            <VisualColorPicker
+              label={t("styleInspector.fill")}
+              value={snapshot.backgroundColor}
+              documentColors={documentColors}
+              allowTransparent
+              variant="filled"
+              className="rounded-sm bg-[var(--slides-inspector-control-background)] hover:bg-[var(--slides-inspector-control-background)]"
+              contentProps={inlineEditSurfaceProps}
+              onChange={(value) => onChange({ backgroundColor: value })}
+            />
+          </VisualControlRow>
+        </VisualInspectorSection>
+      </VisualInspectorPanel>
+    );
+  }
+
+  const mixedTextStyles = snapshot.mixedTextStyles ?? [];
   const targetLabel =
     snapshot.textPreview || snapshot.label || snapshot.tagName.toUpperCase();
   const horizontalAlignment =
@@ -208,22 +375,8 @@ export function SlideStyleInspector({
     <VisualInspectorPanel
       title={t("styleInspector.title")}
       subtitle={targetLabel}
-      className={cn(
-        "slide-style-inspector h-full w-full rounded-none border-0 bg-transparent text-foreground shadow-none backdrop-blur-none",
-        className,
-      )}
-      headerAction={
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          className="size-7 shrink-0 text-muted-foreground hover:text-foreground"
-          onClick={onClose}
-          aria-label={t("styleInspector.close")}
-        >
-          <IconX className="size-3.5" />
-        </Button>
-      }
+      className={inspectorClassName}
+      headerAction={headerAction}
     >
       {snapshot.isAbsolute ? (
         <VisualInspectorSection
@@ -268,12 +421,16 @@ export function SlideStyleInspector({
           <div className="grid grid-cols-2 gap-2">
             <VisualScrubInput
               label={t("styleInspector.x")}
+              icon={null}
+              labelClassName="w-8 justify-center"
               value={snapshot.x}
               unit="px"
               onChange={(x) => onChange({ left: `${formatValue(x)}px` })}
             />
             <VisualScrubInput
               label={t("styleInspector.y")}
+              icon={null}
+              labelClassName="w-8 justify-center"
               value={snapshot.y}
               unit="px"
               onChange={(y) => onChange({ top: `${formatValue(y)}px` })}
@@ -281,6 +438,8 @@ export function SlideStyleInspector({
           </div>
           <VisualScrubInput
             label={t("styleInspector.rotation")}
+            icon={IconAngle}
+            prefix="icon"
             value={snapshot.rotation}
             min={-360}
             max={360}
@@ -292,6 +451,46 @@ export function SlideStyleInspector({
         </VisualInspectorSection>
       ) : null}
 
+      {snapshot.isAbsolute && onArrange ? (
+        <VisualInspectorSection
+          title={
+            <span className="inline-flex items-center gap-1.5">
+              <IconStackFront className="size-3.5" />
+              {t("styleInspector.arrange")}
+            </span>
+          }
+          className="slides-inspector-section"
+        >
+          <VisualControlRow
+            label={t("styleInspector.order")}
+            className="slides-inspector-control"
+          >
+            <div className="flex items-center gap-1">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 cursor-pointer rounded-sm bg-[var(--slides-inspector-control-background)] text-muted-foreground hover:bg-[var(--slides-inspector-control-background)] hover:text-foreground"
+                onClick={() => onArrange("back")}
+                aria-label={t("styleInspector.sendToBack")}
+              >
+                <IconStackBack className="size-3.5" />
+              </Button>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 cursor-pointer rounded-sm bg-[var(--slides-inspector-control-background)] text-muted-foreground hover:bg-[var(--slides-inspector-control-background)] hover:text-foreground"
+                onClick={() => onArrange("front")}
+                aria-label={t("styleInspector.bringToFront")}
+              >
+                <IconStackFront className="size-3.5" />
+              </Button>
+            </div>
+          </VisualControlRow>
+        </VisualInspectorSection>
+      ) : null}
+
       <VisualInspectorSection
         title={
           <span className="inline-flex items-center gap-1.5">
@@ -304,6 +503,8 @@ export function SlideStyleInspector({
         <div className="grid grid-cols-2 gap-2">
           <VisualScrubInput
             label={t("styleInspector.width")}
+            icon={IconArrowAutofitWidth}
+            prefix="icon"
             value={snapshot.width}
             min={0}
             unit="px"
@@ -311,6 +512,8 @@ export function SlideStyleInspector({
           />
           <VisualScrubInput
             label={t("styleInspector.height")}
+            icon={IconArrowAutofitHeight}
+            prefix="icon"
             value={snapshot.height}
             min={0}
             unit="px"
@@ -333,6 +536,8 @@ export function SlideStyleInspector({
         <div className="grid grid-cols-2 gap-2">
           <VisualScrubInput
             label={t("styleInspector.opacity")}
+            icon={IconGridDots}
+            prefix="icon"
             value={snapshot.opacity}
             min={0}
             max={100}
@@ -342,6 +547,8 @@ export function SlideStyleInspector({
           />
           <VisualScrubInput
             label={t("styleInspector.cornerRadius")}
+            icon={IconBorderRadius}
+            prefix="icon"
             value={snapshot.borderRadius}
             min={0}
             max={96}
@@ -396,6 +603,8 @@ export function SlideStyleInspector({
       >
         <VisualScrubInput
           label={t("styleInspector.strokeWeight")}
+          icon={IconBorderStyle}
+          prefix="icon"
           value={snapshot.borderWidth}
           min={0}
           max={16}
@@ -449,6 +658,8 @@ export function SlideStyleInspector({
           <div className="grid grid-cols-2 gap-2">
             <VisualScrubInput
               label={t("styleInspector.size")}
+              icon={IconLetterCase}
+              prefix="icon"
               value={snapshot.fontSize}
               min={8}
               max={160}
@@ -461,6 +672,8 @@ export function SlideStyleInspector({
             />
             <VisualScrubInput
               label={t("styleInspector.line")}
+              icon={IconArrowAutofitHeight}
+              prefix="icon"
               value={snapshot.lineHeight}
               min={0.8}
               max={3}
@@ -512,6 +725,8 @@ export function SlideStyleInspector({
           <div className="grid grid-cols-2 gap-2">
             <VisualScrubInput
               label={t("styleInspector.horizontal")}
+              icon={IconSpacingHorizontal}
+              prefix="icon"
               value={snapshot.paddingX}
               min={0}
               max={120}
@@ -526,6 +741,8 @@ export function SlideStyleInspector({
             />
             <VisualScrubInput
               label={t("styleInspector.vertical")}
+              icon={IconSpacingVertical}
+              prefix="icon"
               value={snapshot.paddingY}
               min={0}
               max={120}

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

@@ -7,6 +7,7 @@ interface SpeakerNotesPanelProps {
   onChange: (notes: string) => void;
   slideIndex: number;
   slideCount: number;
+  readOnly?: boolean;
 }
 
 const MIN_NOTES_HEIGHT = 72;
@@ -22,6 +23,7 @@ export function SpeakerNotesPanel({
   onChange,
   slideIndex,
   slideCount,
+  readOnly = false,
 }: SpeakerNotesPanelProps) {
   const t = useT();
   const [expanded, setExpanded] = useState(() => {
@@ -105,7 +107,8 @@ export function SpeakerNotesPanel({
           <textarea
             value={notes || ""}
             onChange={(e) => onChange(e.target.value)}
-            placeholder={t("raw.addSpeakerNotes")}
+            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>

package/corpus/templates/slides/app/components/editor/canvas-interactions/index.ts

@@ -0,0 +1,11 @@
+export {
+  createSlidesCanvasGestureController,
+  createSlidesCanvasInteractionCore,
+  isWithinSlidesCanvasEdgeMoveBand,
+  resolveSlidesCanvasPointerIntent,
+  slidesCanvasInteractionCore,
+  SLIDES_CANVAS_EDGE_MOVE_BAND,
+  type SlidesCanvasHtmlMutationAdapter,
+  type SlidesCanvasGestureAdapter,
+  type SlidesCanvasPointerIntent,
+} from "./slides-canvas-adapter";

package/corpus/templates/slides/app/components/editor/canvas-interactions/slides-canvas-adapter.ts

@@ -0,0 +1,129 @@
+import {
+  createCanvasGestureController,
+  createCanvasInteractionCore,
+  type CanvasGestureAdapter,
+  type CanvasInteractionAdapter,
+} from "@agent-native/toolkit/canvas-interactions";
+
+import { MIN_SLIDE_OBJECT_SIZE } from "../slide-object-interactions";
+
+export const SLIDES_CANVAS_EDGE_MOVE_BAND = 8;
+
+export function isWithinSlidesCanvasEdgeMoveBand(
+  rect: Pick<DOMRect, "left" | "right" | "top" | "bottom" | "width" | "height">,
+  clientX: number,
+  clientY: number,
+): boolean {
+  // Tiny labels still need a usable center click target. Cap the move band at
+  // one quarter of either dimension so its opposite edges never consume it.
+  const edgeBand = Math.min(
+    SLIDES_CANVAS_EDGE_MOVE_BAND,
+    rect.width / 4,
+    rect.height / 4,
+  );
+  const outerBand = edgeBand / 2;
+  const withinExpandedBounds =
+    clientX >= rect.left - outerBand &&
+    clientX <= rect.right + outerBand &&
+    clientY >= rect.top - outerBand &&
+    clientY <= rect.bottom + outerBand;
+  if (!withinExpandedBounds) return false;
+
+  return (
+    Math.abs(clientX - rect.left) <= edgeBand ||
+    Math.abs(clientX - rect.right) <= edgeBand ||
+    Math.abs(clientY - rect.top) <= edgeBand ||
+    Math.abs(clientY - rect.bottom) <= edgeBand
+  );
+}
+
+/**
+ * Slides owns its persistence adapter: it translates shared semantic commands
+ * into mutations of the selected slide's HTML. Toolkit remains unaware of the
+ * DOM, coordinate containers, and the one-write-per-gesture boundary.
+ */
+export type SlidesCanvasHtmlMutationAdapter = CanvasInteractionAdapter<string>;
+export type SlidesCanvasGestureAdapter = CanvasGestureAdapter<string>;
+
+const slidesCanvasInteractionConfig = {
+  textEditing: {
+    activation: "single-click" as const,
+    escapeBehavior: "select-object" as const,
+  },
+  drag: {
+    threshold: 2,
+    duplicateModifier: "alt" as const,
+  },
+  nudge: {
+    amount: 1,
+    acceleratedAmount: 10,
+  },
+  minSize: MIN_SLIDE_OBJECT_SIZE,
+  capabilities: {
+    multiSelection: true,
+    snapping: false,
+    alignment: false,
+    distribution: false,
+    grouping: false,
+    rotation: false,
+    marquee: true,
+  },
+};
+
+export function createSlidesCanvasInteractionCore(
+  adapter?: SlidesCanvasHtmlMutationAdapter,
+) {
+  return createCanvasInteractionCore(slidesCanvasInteractionConfig, adapter);
+}
+
+/** Creates one shared controller per live Slides pointer gesture. */
+export function createSlidesCanvasGestureController(
+  adapter: SlidesCanvasGestureAdapter,
+) {
+  return createCanvasGestureController({
+    ...slidesCanvasInteractionConfig,
+    adapter,
+  });
+}
+
+/** Shared Slides policy for callers that do not need an HTML command adapter. */
+export const slidesCanvasInteractionCore = createSlidesCanvasInteractionCore();
+
+export type SlidesCanvasPointerIntent =
+  | "edit-text"
+  | "move-object-body"
+  | "move-object-perimeter"
+  | "none";
+
+/**
+ * Slides supplies hit testing and this policy decision, while the shared
+ * gesture controller owns threshold, coordinate, modifier, and resize math.
+ * A selected object's body begins a thresholded move candidate. An unmoved
+ * press still falls through to the click handler for text editing, while a
+ * real drag consumes that trailing click.
+ */
+export function resolveSlidesCanvasPointerIntent({
+  hasSelectedObject,
+  targetWithinSelectedObject,
+  targetContainsSelectedObject,
+  pointerWithinMoveBand,
+  targetIsEditableText,
+}: {
+  hasSelectedObject: boolean;
+  targetWithinSelectedObject: boolean;
+  targetContainsSelectedObject: boolean;
+  pointerWithinMoveBand: boolean;
+  targetIsEditableText: boolean;
+}): SlidesCanvasPointerIntent {
+  if (
+    hasSelectedObject &&
+    (targetWithinSelectedObject || targetContainsSelectedObject) &&
+    pointerWithinMoveBand
+  ) {
+    return "move-object-perimeter";
+  }
+  if (hasSelectedObject && targetWithinSelectedObject) {
+    return "move-object-body";
+  }
+  return targetIsEditableText ? "edit-text" : "none";
+}

package/corpus/templates/slides/app/components/editor/selection-overlay-measurement.ts

@@ -0,0 +1,70 @@
+export interface SelectionOverlayMeasurement {
+  key: string;
+  rect: DOMRect;
+}
+
+export interface SelectionOverlayMeasurementIdentity {
+  slideId: string;
+  content: string;
+  objectId: string | null;
+  selector: string | null;
+  path: number[] | null;
+  canvasZoom: number;
+  stylePanelOpen: boolean;
+  revision: number;
+}
+
+/**
+ * The portal paints in viewport coordinates. Its measurement is only valid
+ * for this exact rendered selection and canvas geometry.
+ */
+export function createSelectionOverlayMeasurementKey({
+  slideId,
+  content,
+  objectId,
+  selector,
+  path,
+  canvasZoom,
+  stylePanelOpen,
+  revision,
+}: SelectionOverlayMeasurementIdentity): string {
+  return JSON.stringify([
+    slideId,
+    content,
+    objectId,
+    selector,
+    path,
+    canvasZoom,
+    stylePanelOpen,
+    revision,
+  ]);
+}
+
+/** AutoFit only depends on the rendered slide, not editor-only canvas chrome. */
+export function createSelectionOverlayAutofitKey(
+  slideId: string,
+  content: string,
+): string {
+  return JSON.stringify([slideId, content]);
+}
+
+export function currentSelectionOverlayRect(
+  measurement: SelectionOverlayMeasurement | null,
+  currentKey: string,
+): DOMRect | null {
+  return measurement?.key === currentKey ? measurement.rect : null;
+}
+
+export function isSelectionOverlayAutofitSettled(
+  settledAutofitKey: string | null,
+  canvasAutofitKey: string,
+): boolean {
+  return settledAutofitKey === canvasAutofitKey;
+}
+
+export function isSelectionOverlayOnActiveSlide(
+  selectedSlideId: string | null,
+  activeSlideId: string,
+): boolean {
+  return selectedSlideId === activeSlideId;
+}