@agent-native/core 0.90.1 → 0.90.3

package/corpus/templates/design/app/components/design/edit-panel/frame-presets-panel.tsx

@@ -0,0 +1,119 @@
+import { useT } from "@agent-native/core/client";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+import { useState } from "react";
+
+import {
+  FRAME_SIZE_PRESET_CATEGORIES,
+  type FrameSizePreset,
+  type FrameSizePresetCategoryKey,
+} from "../inspector";
+
+/**
+ * One collapsible category group in the frame-tool presets panel — e.g.
+ * "Phone" or "Tablet". Unlike {@link PanelSection} (used for property
+ * sections, which shows no chevron), this renders a leading chevron like
+ * Figma's own preset list and LayersPanel's disclosure triangles.
+ */
+function FramePresetCategoryGroup({
+  title,
+  presets,
+  defaultOpen = false,
+  onPick,
+}: {
+  title: string;
+  presets: FrameSizePreset[];
+  defaultOpen?: boolean;
+  onPick: (preset: FrameSizePreset) => void;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <section className="shrink-0 border-t border-[var(--design-editor-control-border)] first:border-t-0">
+      <button
+        type="button"
+        className="flex h-9 w-full min-w-0 cursor-pointer items-center gap-1.5 px-3 text-left"
+        onClick={() => setOpen((current) => !current)}
+        aria-expanded={open}
+      >
+        {open ? (
+          <IconChevronDown className="size-3.5 shrink-0 text-muted-foreground" />
+        ) : (
+          <IconChevronRight className="size-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100" />
+        )}
+        <h3 className="min-w-0 flex-1 truncate !text-[11px] font-semibold text-foreground">
+          {title}
+        </h3>
+      </button>
+      {open ? (
+        <div className="pb-1.5">
+          {presets.map((preset) => (
+            <button
+              key={preset.name}
+              type="button"
+              className="flex h-8 w-full min-w-0 cursor-pointer items-center gap-2 px-3 pl-8 text-left hover:bg-[var(--design-editor-control-hover-bg)]"
+              onClick={() => onPick(preset)}
+            >
+              <span className="min-w-0 flex-1 truncate !text-[11px] text-foreground">
+                {preset.name}
+              </span>
+              <span className="shrink-0 !text-[11px] tabular-nums text-muted-foreground">
+                {preset.width}
+                {"×" /* × */}
+                {preset.height}
+              </span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+const FRAME_PRESET_CATEGORY_LABEL_KEYS: Record<
+  FrameSizePresetCategoryKey,
+  string
+> = {
+  phone: "editPanel.framePresets.categories.phone",
+  tablet: "editPanel.framePresets.categories.tablet",
+  desktop: "editPanel.framePresets.categories.desktop",
+  presentation: "editPanel.framePresets.categories.presentation",
+  watch: "editPanel.framePresets.categories.watch",
+  paper: "editPanel.framePresets.categories.paper",
+  socialMedia: "editPanel.framePresets.categories.socialMedia",
+};
+
+/**
+ * Figma-parity frame-tool panel: replaces the whole inspector body with a
+ * scrollable, categorized list of screen-size presets while the Frame tool
+ * is armed. Clicking a row calls `onCreateScreenFromPreset` with the exact
+ * size — see the `activeTool`/`onCreateScreenFromPreset` doc comments on
+ * `EditPanelProps` for the parent-side creation/tool-revert contract.
+ */
+export function FramePresetsPanel({
+  onPick,
+}: {
+  onPick: (preset: FrameSizePreset) => void;
+}) {
+  const t = useT();
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div className="flex h-10 shrink-0 items-center border-b border-border/90 px-3">
+        <h3 className="min-w-0 flex-1 truncate text-[13px] font-semibold text-foreground">
+          {t("editPanel.framePresets.title")}
+        </h3>
+      </div>
+      <div className="design-inspector-scroll min-h-0 flex-1 overflow-y-auto overscroll-contain">
+        {FRAME_SIZE_PRESET_CATEGORIES.map((category, index) => (
+          <FramePresetCategoryGroup
+            key={category.key}
+            title={t(FRAME_PRESET_CATEGORY_LABEL_KEYS[category.key])}
+            presets={category.presets}
+            defaultOpen={index === 0}
+            onPick={onPick}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/corpus/templates/design/app/components/design/edit-panel/inspector-controls.tsx

@@ -0,0 +1,248 @@
+import { IconGripVertical } from "@tabler/icons-react";
+import { useRef, useState, type DragEvent, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export function SectionIconButton({
+  label,
+  onClick,
+  children,
+  activateOnPointerDown = false,
+  disabled = false,
+  className,
+}: {
+  label: string;
+  onClick?: () => void;
+  children: ReactNode;
+  activateOnPointerDown?: boolean;
+  disabled?: boolean;
+  className?: string;
+}) {
+  const pointerActivatedRef = useRef(false);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "size-6 shrink-0 cursor-pointer rounded-md text-muted-foreground hover:text-foreground disabled:cursor-not-allowed",
+            className,
+          )}
+          disabled={disabled}
+          onPointerDown={(event) => {
+            if (!activateOnPointerDown || disabled || event.button !== 0) {
+              return;
+            }
+            pointerActivatedRef.current = true;
+            event.preventDefault();
+            event.stopPropagation();
+            onClick?.();
+          }}
+          onClick={() => {
+            if (pointerActivatedRef.current) {
+              pointerActivatedRef.current = false;
+              return;
+            }
+            onClick?.();
+          }}
+          aria-label={label}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/**
+ * Section-header toggle icon (the design editor's right-aligned section actions, e.g. the
+ * auto-layout ⊞ toggle). Highlights with the accent color when active.
+ */
+export function SectionIconToggle({
+  label,
+  active = false,
+  onClick,
+  children,
+}: {
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          aria-label={label}
+          aria-pressed={active}
+          onClick={onClick}
+          className={cn(
+            "size-6 cursor-pointer rounded-md text-muted-foreground hover:text-foreground",
+            active &&
+              "bg-[var(--design-editor-accent-color)]/15 text-[var(--design-editor-accent-color)] hover:text-[var(--design-editor-accent-color)]",
+          )}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/**
+ * Minimal pointer-based reorder for a flat row list (fill layers, shadow
+ * layers). Deliberately not shared with LayersPanel.tsx's tree-drag logic —
+ * that implementation is coupled to nested/multi-select layer nodes, while
+ * this only ever needs "move index A to index B" over a flat array.
+ *
+ * Reads live in a ref (not React state) so a fast pointermove sequence never
+ * reorders against a stale `count`/`onReorder` closure, mirroring why
+ * ScrubInput tracks its draft in a ref alongside state.
+ */
+export function useRowDragReorder(
+  count: number,
+  onReorder: (from: number, to: number) => void,
+) {
+  const [dragIndex, setDragIndex] = useState<number | null>(null);
+  const [overIndex, setOverIndex] = useState<number | null>(null);
+  const liveRef = useRef({ count, onReorder });
+  liveRef.current = { count, onReorder };
+
+  const getRowProps = (index: number) => ({
+    onDragOver: (event: DragEvent<HTMLDivElement>) => {
+      if (dragIndex == null) return;
+      event.preventDefault();
+      event.dataTransfer.dropEffect = "move";
+      if (index !== overIndex) setOverIndex(index);
+    },
+    onDrop: (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const from = dragIndex;
+      setDragIndex(null);
+      setOverIndex(null);
+      if (from == null || from === index) return;
+      const { count: liveCount, onReorder: liveOnReorder } = liveRef.current;
+      if (index < 0 || index >= liveCount) return;
+      liveOnReorder(from, index);
+    },
+  });
+
+  const getHandleProps = (index: number) => ({
+    draggable: true,
+    onDragStart: (event: DragEvent<HTMLSpanElement>) => {
+      // Firefox requires setData to be called for the drag to start at all.
+      event.dataTransfer.setData("text/plain", String(index));
+      event.dataTransfer.effectAllowed = "move";
+      setDragIndex(index);
+    },
+    onDragEnd: () => {
+      setDragIndex(null);
+      setOverIndex(null);
+    },
+  });
+
+  return {
+    dragIndex,
+    overIndex,
+    getRowProps,
+    getHandleProps,
+  };
+}
+
+/** Drag handle + before/after drop-indicator line for a reorderable row.
+ * Grip is hover-revealed (Figma convention); the row itself uses always-visible
+ * eye/remove buttons per this file's existing convention, so only the grip
+ * gets the opacity treatment. */
+export function RowDragHandle({
+  label,
+  dropIndicator,
+  draggable,
+  onDragStart,
+  onDragEnd,
+}: {
+  label: string;
+  dropIndicator?: "before" | "after" | null;
+  draggable: boolean;
+  onDragStart: (event: DragEvent<HTMLSpanElement>) => void;
+  onDragEnd: () => void;
+}) {
+  return (
+    <span
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      role="button"
+      aria-label={label}
+      className="relative flex size-6 shrink-0 cursor-grab items-center justify-center rounded-md text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 active:cursor-grabbing"
+    >
+      <IconGripVertical className="size-3.5" />
+      {dropIndicator === "before" ? (
+        <span className="pointer-events-none absolute -top-[3px] left-0 right-0 h-px bg-[var(--design-editor-accent-color)]" />
+      ) : null}
+      {dropIndicator === "after" ? (
+        <span className="pointer-events-none absolute -bottom-[3px] left-0 right-0 h-px bg-[var(--design-editor-accent-color)]" />
+      ) : null}
+    </span>
+  );
+}
+
+export function InspectorIconButton({
+  label,
+  active,
+  onClick,
+  children,
+  shortcut,
+}: {
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+  children: ReactNode;
+  /** Optional keyboard-shortcut hint (e.g. "⌥A") appended to the tooltip only — aria-label stays plain text. */
+  shortcut?: string;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className={cn(
+            "h-6 min-w-6 cursor-pointer rounded-none border-r border-border/50 text-muted-foreground first:rounded-l-md last:rounded-r-md last:border-r-0 hover:bg-[var(--design-editor-panel-raised-bg)] hover:text-foreground disabled:cursor-not-allowed",
+            active &&
+              "bg-[var(--design-editor-panel-bg)] text-[var(--design-editor-accent-color)] shadow-[inset_0_0_0_1px_var(--design-editor-control-border)]",
+          )}
+          onClick={onClick}
+          aria-label={label}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        {shortcut ? `${label}  ${shortcut}` : label}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function InspectorSegment({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex w-fit max-w-full min-w-0 overflow-hidden rounded-md bg-[var(--design-editor-control-bg)]">
+      {children}
+    </div>
+  );
+}

package/corpus/templates/design/app/components/design/edit-panel/interaction-state-helpers.ts

@@ -0,0 +1,45 @@
+import type { ElementInfo } from "../types";
+
+export function authoredStyleValue(
+  element: ElementInfo,
+  property: string,
+): string | undefined {
+  const inline = element.inlineStyles?.[property];
+  if (inline !== undefined) return inline === "auto" ? "" : inline;
+  return element.computedStyles[property];
+}
+
+/**
+ * While a non-default interaction state is active, style-section fields
+ * display the STATE's value for a property when it has one, else fall back
+ * to the base (Default-state) value — never blank. This is the "overridden
+ * shows the override, else shows the inherited base" convention (documented
+ * choice: values are shown in their normal weight/color either way, since
+ * the state-selector's own accent already signals "you are editing Hover" —
+ * repeating that with dimmed/greyed-out base values on every single field
+ * would be visual noise; the per-property override DOT, rendered via
+ * `InteractionStateOverrideIndicator`, is what marks which specific fields
+ * differ from the base in the active state).
+ *
+ * @param stateStyles  `activeInteractionStateStyles` — the active state's
+ *   declared properties for the selected element, or `undefined` when no
+ *   state is active / nothing is overridden.
+ * @param property  CSS property, camelCase or kebab-case (normalized the
+ *   same way `shared/interaction-states.ts` normalizes keys, so callers can
+ *   pass either).
+ * @param baseValue  The value that would render with no state active
+ *   (typically `authoredStyleValue(element, property)` or a computed style).
+ */
+export function resolveInteractionStateValue(
+  stateStyles: Record<string, string> | undefined,
+  property: string,
+  baseValue: string | undefined,
+): string | undefined {
+  if (!stateStyles) return baseValue;
+  const kebabProperty = property.replace(
+    /[A-Z]/g,
+    (letter) => `-${letter.toLowerCase()}`,
+  );
+  const override = stateStyles[property] ?? stateStyles[kebabProperty];
+  return override !== undefined ? override : baseValue;
+}