@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/design/app/components/design/TweaksPanel.tsx

@@ -1,6 +1,11 @@
 import { useT } from "@agent-native/core/client";
 import type { TweakDefinition } from "@shared/api";
-import { IconX, IconGripHorizontal, IconPlus } from "@tabler/icons-react";
+import {
+  IconX,
+  IconGripHorizontal,
+  IconPlus,
+  IconAdjustmentsHorizontal,
+} from "@tabler/icons-react";
 import { useState, useRef, useCallback } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -22,6 +27,58 @@ interface TweaksPanelProps {
   visible: boolean;
 }
 
+interface TweaksPanelContentProps {
+  tweaks: TweakDefinition[];
+  values: Record<string, string | number | boolean>;
+  onChange: (id: string, value: string | number | boolean) => void;
+  onRequestTweaks?: (anchor: HTMLElement) => void;
+  className?: string;
+}
+
+export function TweaksPanelContent({
+  tweaks,
+  values,
+  onChange,
+  onRequestTweaks,
+  className,
+}: TweaksPanelContentProps) {
+  const t = useT();
+
+  return (
+    <div className={cn("space-y-1.5", className)}>
+      {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">
+          <IconAdjustmentsHorizontal className="size-5 text-muted-foreground/40" />
+          <p className="text-[11px] leading-snug text-muted-foreground/70">
+            {t("designEditor.noTweakControls")}
+          </p>
+          {onRequestTweaks && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="h-6 cursor-pointer px-2.5 text-[11px]"
+              onClick={(e) => onRequestTweaks(e.currentTarget)}
+            >
+              <IconPlus className="size-3" />
+              {t("designEditor.addTweakControls")}
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function TweaksPanel({
   tweaks,
   values,
@@ -85,18 +142,18 @@ export function TweaksPanel({
       className="fixed z-[70] w-60 rounded-xl border border-border bg-card shadow-2xl backdrop-blur-sm"
       style={{ right: position.x, bottom: position.y }}
     >
-      {/* Header — drag handle + collapse toggle */}
+      {/* Header — drag handle + collapse toggle + actions */}
       <div
-        className="flex cursor-grab select-none items-center justify-between px-3 pt-2.5 pb-1.5 active:cursor-grabbing"
+        className="flex min-h-8 cursor-grab select-none items-center justify-between px-3 active:cursor-grabbing"
         onMouseDown={handleMouseDown}
       >
         <div className="flex items-center gap-1.5">
-          <IconGripHorizontal className="h-3 w-3 text-muted-foreground/60" />
+          <IconGripHorizontal className="size-3 text-muted-foreground/40" />
           <button
             type="button"
             onMouseDown={(e) => e.stopPropagation()}
             onClick={() => setCollapsed((c) => !c)}
-            className="cursor-pointer text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-muted-foreground"
+            className="cursor-pointer text-[11px] font-semibold text-foreground hover:text-foreground/80"
           >
             {t("designEditor.tweaks")}
           </button>
@@ -114,10 +171,10 @@ export function TweaksPanel({
                     e.stopPropagation();
                     onRequestTweaks(e.currentTarget);
                   }}
-                  className="size-6 cursor-pointer text-muted-foreground/70 hover:text-foreground"
+                  className="size-6 cursor-pointer text-muted-foreground/60 hover:text-foreground"
                   aria-label={t("designEditor.addTweaks")}
                 >
-                  <IconPlus className="h-3.5 w-3.5" />
+                  <IconPlus className="size-3" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>{t("designEditor.addTweaks")}</TooltipContent>
@@ -130,46 +187,26 @@ export function TweaksPanel({
               e.stopPropagation();
               onClose();
             }}
-            className="flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-muted-foreground"
+            className="flex size-6 cursor-pointer items-center justify-center rounded text-muted-foreground/60 hover:bg-accent hover:text-foreground"
             aria-label={t("designEditor.closeTweaks")}
           >
-            <IconX className="h-3 w-3" />
+            <IconX className="size-3" />
           </button>
         </div>
       </div>
 
       {/* Body */}
       {!collapsed && (
-        <div className="space-y-3.5 px-3 pb-3.5">
-          {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="space-y-2 rounded-lg border border-dashed border-border/80 bg-muted/20 p-3">
-              <p className="text-xs leading-relaxed text-muted-foreground">
-                {t("designEditor.noTweakControls")}
-              </p>
-              {onRequestTweaks && (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  className="h-8 w-full cursor-pointer text-xs"
-                  onClick={(e) => onRequestTweaks(e.currentTarget)}
-                >
-                  <IconPlus className="h-3.5 w-3.5" />
-                  {t("designEditor.addTweakControls")}
-                </Button>
-              )}
-            </div>
-          )}
-        </div>
+        <>
+          <div className="mx-3 border-t border-border/60" />
+          <TweaksPanelContent
+            tweaks={tweaks}
+            values={values}
+            onChange={onChange}
+            onRequestTweaks={onRequestTweaks}
+            className="px-3 py-2"
+          />
+        </>
       )}
     </div>
   );
@@ -184,15 +221,27 @@ function TweakControl({
   value: string | number | boolean;
   onChange: (v: string | number | boolean) => void;
 }) {
-  return (
-    <div>
-      <div className="mb-1.5 text-[11px] text-muted-foreground">
-        {tweak.label}
+  // Toggle gets an inline row; other types get a label above
+  if (tweak.type === "toggle") {
+    return (
+      <div className="flex h-6 items-center justify-between gap-1.5">
+        <span className="text-[11px] text-muted-foreground">{tweak.label}</span>
+        <Switch
+          checked={!!value}
+          onCheckedChange={(checked) => onChange(checked)}
+          className="scale-[0.7] origin-right"
+        />
       </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <span className="text-[11px] text-muted-foreground">{tweak.label}</span>
 
-      {(tweak.type as string) === "color-swatch" ||
-      (tweak.type as string) === "color-swatches" ? (
-        <div className="flex gap-2">
+      {((tweak.type as string) === "color-swatch" ||
+        (tweak.type as string) === "color-swatches") && (
+        <div className="flex gap-1.5">
           {tweak.options?.map((opt) => (
             <Tooltip key={opt.value}>
               <TooltipTrigger asChild>
@@ -200,32 +249,32 @@ function TweakControl({
                   type="button"
                   onClick={() => onChange(opt.value)}
                   className={cn(
-                    "h-6 w-6 cursor-pointer rounded-full",
+                    "size-4 cursor-pointer rounded-sm transition-all",
                     value === opt.value
-                      ? "ring-2 ring-white ring-offset-2 ring-offset-[hsl(240,5%,8%)]"
-                      : "ring-1 ring-white/10 hover:ring-white/30",
+                      ? "ring-2 ring-foreground/80 ring-offset-1 ring-offset-card"
+                      : "ring-1 ring-border/60 hover:ring-border",
                   )}
-                  style={{ backgroundColor: opt.color || opt.value }}
+                  style={{ backgroundColor: opt.color ?? opt.value }}
                 />
               </TooltipTrigger>
               <TooltipContent>{opt.label}</TooltipContent>
             </Tooltip>
           ))}
         </div>
-      ) : null}
+      )}
 
       {tweak.type === "segment" && (
-        <div className="flex overflow-hidden rounded-lg border border-border">
+        <div className="flex h-6 overflow-hidden rounded border border-border">
           {tweak.options?.map((opt) => (
             <button
               type="button"
               key={opt.value}
               onClick={() => onChange(opt.value)}
               className={cn(
-                "flex-1 cursor-pointer px-2.5 py-1 text-[11px] font-medium",
+                "flex flex-1 cursor-pointer items-center justify-center px-2 text-[11px] font-medium transition-colors",
                 value === opt.value
                   ? "bg-accent text-foreground"
-                  : "text-muted-foreground/70 hover:text-muted-foreground",
+                  : "text-muted-foreground/70 hover:bg-accent/50 hover:text-foreground",
               )}
             >
               {opt.label}
@@ -235,7 +284,7 @@ function TweakControl({
       )}
 
       {tweak.type === "slider" && (
-        <div className="flex items-center gap-2">
+        <div className="flex h-6 items-center gap-1.5">
           <Slider
             min={tweak.min ?? 0}
             max={tweak.max ?? 100}
@@ -244,19 +293,12 @@ function TweakControl({
             onValueChange={([v]) => onChange(v)}
             className="flex-1"
           />
-          <span className="min-w-[2rem] text-right text-[11px] text-muted-foreground">
+          <span className="min-w-[2ch] text-right text-[11px] tabular-nums text-muted-foreground">
             {typeof value === "number" ? value : 50}
             {tweak.cssVar?.includes("radius") ? "px" : ""}
           </span>
         </div>
       )}
-
-      {tweak.type === "toggle" && (
-        <Switch
-          checked={!!value}
-          onCheckedChange={(checked) => onChange(checked)}
-        />
-      )}
     </div>
   );
 }

package/corpus/templates/design/app/components/design/index.ts

@@ -1,15 +1,10 @@
 export { DesignCanvas } from "./DesignCanvas";
-export { DesignToolbar } from "./DesignToolbar";
-export type { EditorMode } from "./DesignToolbar";
 export { DeviceFrame } from "./DeviceFrame";
 export { DrawOverlay } from "./DrawOverlay";
 export { EditPanel } from "./EditPanel";
 export { QuestionFlow } from "./QuestionFlow";
 export { TweaksPanel } from "./TweaksPanel";
 export { VariantGrid } from "./VariantGrid";
-export { ViewportTabs } from "./ViewportTabs";
-export { ZoomControls } from "./ZoomControls";
-export { PresentMode } from "./PresentMode";
 export type {
   DrawAnnotation,
   ElementInfo,

package/corpus/templates/design/app/components/design/inspector/AlignmentMatrix.tsx

@@ -0,0 +1,353 @@
+import type { ComponentType } from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+export type AlignmentHorizontal = "left" | "center" | "right";
+export type AlignmentVertical = "top" | "middle" | "bottom";
+export type DistributionAxis = "horizontal" | "vertical";
+export type FlowDirection = "horizontal" | "vertical";
+
+export interface AlignmentMatrixValue {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+}
+
+export interface AlignmentMatrixLabels {
+  title: string;
+  alignTopLeft: string;
+  alignTopCenter: string;
+  alignTopRight: string;
+  alignMiddleLeft: string;
+  alignCenter: string;
+  alignMiddleRight: string;
+  alignBottomLeft: string;
+  alignBottomCenter: string;
+  alignBottomRight: string;
+  distributeHorizontal: string;
+  distributeVertical: string;
+}
+
+export interface AlignmentMatrixProps {
+  value: AlignmentMatrixValue;
+  onChange: (value: AlignmentMatrixValue) => void;
+  onDistribute?: (axis: DistributionAxis) => void;
+  labels?: Partial<AlignmentMatrixLabels>;
+  disabled?: boolean;
+  className?: string;
+  /** Auto-layout flow direction — controls bar orientation in active cell */
+  direction?: FlowDirection;
+}
+
+type MatrixIcon = ComponentType<{ className?: string }>;
+
+const DEFAULT_LABELS: AlignmentMatrixLabels = {
+  title: "Align", // i18n-ignore fallback component label
+  alignTopLeft: "Align top left", // i18n-ignore fallback component label
+  alignTopCenter: "Align top center", // i18n-ignore fallback component label
+  alignTopRight: "Align top right", // i18n-ignore fallback component label
+  alignMiddleLeft: "Align middle left", // i18n-ignore fallback component label
+  alignCenter: "Align center", // i18n-ignore fallback component label
+  alignMiddleRight: "Align middle right", // i18n-ignore fallback component label
+  alignBottomLeft: "Align bottom left", // i18n-ignore fallback component label
+  alignBottomCenter: "Align bottom center", // i18n-ignore fallback component label
+  alignBottomRight: "Align bottom right", // i18n-ignore fallback component label
+  distributeHorizontal: "Distribute horizontal spacing", // i18n-ignore fallback component label
+  distributeVertical: "Distribute vertical spacing", // i18n-ignore fallback component label
+};
+
+const MATRIX_OPTIONS: Array<{
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+  labelKey: keyof AlignmentMatrixLabels;
+}> = [
+  { horizontal: "left", vertical: "top", labelKey: "alignTopLeft" },
+  { horizontal: "center", vertical: "top", labelKey: "alignTopCenter" },
+  { horizontal: "right", vertical: "top", labelKey: "alignTopRight" },
+  { horizontal: "left", vertical: "middle", labelKey: "alignMiddleLeft" },
+  { horizontal: "center", vertical: "middle", labelKey: "alignCenter" },
+  { horizontal: "right", vertical: "middle", labelKey: "alignMiddleRight" },
+  { horizontal: "left", vertical: "bottom", labelKey: "alignBottomLeft" },
+  { horizontal: "center", vertical: "bottom", labelKey: "alignBottomCenter" },
+  { horizontal: "right", vertical: "bottom", labelKey: "alignBottomRight" },
+];
+
+/** Figma-style alignment cell: blue bars when active, faint dot when inactive. */
+function AlignmentCell({
+  horizontal,
+  vertical,
+  active,
+  label,
+  disabled,
+  direction,
+  onClick,
+}: {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+  active: boolean;
+  label: string;
+  disabled: boolean;
+  direction: FlowDirection;
+  onClick: () => void;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          aria-pressed={active}
+          disabled={disabled}
+          onClick={onClick}
+          className={cn(
+            "flex size-[22px] items-center justify-center rounded-sm transition-colors",
+            "hover:bg-[var(--design-editor-control-bg)]",
+            disabled && "pointer-events-none opacity-40",
+          )}
+        >
+          {active ? (
+            <AlignmentBars
+              horizontal={horizontal}
+              vertical={vertical}
+              direction={direction}
+            />
+          ) : (
+            <span
+              className="block size-[3px] rounded-full bg-current opacity-20"
+              aria-hidden="true"
+            />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent className="text-xs">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/**
+ * Renders the Figma-style blue bars for the active alignment cell.
+ *
+ * Bar orientation matches the flow direction:
+ * - HORIZONTAL flow → VERTICAL bars (tall, narrow), packed to the active
+ *   horizontal edge (left/center/right), then aligned vertically.
+ * - VERTICAL flow  → HORIZONTAL bars (wide, short), packed to the active
+ *   vertical edge (top/middle/bottom), then aligned horizontally.
+ *
+ * No outer frame rect — Figma's active cell shows only the bars.
+ */
+function AlignmentBars({
+  horizontal,
+  vertical,
+  direction,
+}: {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+  direction: FlowDirection;
+}) {
+  const accent = "var(--design-editor-accent-color, #18a0fb)";
+  const size = 14; // SVG canvas size
+
+  return (
+    <svg
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      height={size}
+      fill="none"
+      aria-hidden="true"
+    >
+      {direction === "horizontal" ? (
+        <HorizontalFlowBars
+          horizontal={horizontal}
+          vertical={vertical}
+          accent={accent}
+          size={size}
+        />
+      ) : (
+        <VerticalFlowBars
+          horizontal={horizontal}
+          vertical={vertical}
+          accent={accent}
+          size={size}
+        />
+      )}
+    </svg>
+  );
+}
+
+/**
+ * HORIZONTAL flow: items are laid out left→right.
+ * Bars are VERTICAL (tall, narrow) representing child items.
+ * Packed toward the active horizontal edge; aligned vertically.
+ */
+function HorizontalFlowBars({
+  horizontal,
+  vertical,
+  accent,
+  size,
+}: {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+  accent: string;
+  size: number;
+}) {
+  // Two vertical bars of slightly different heights for visual interest
+  const barW = 2; // bar width
+  const barH = [7, 5]; // bar heights
+  const gap = 2; // gap between bars
+  const margin = 1.5; // distance from edge
+
+  // X positions: bars packed toward the horizontal alignment edge
+  const totalW = barW * 2 + gap;
+  const xStart =
+    horizontal === "left"
+      ? margin
+      : horizontal === "right"
+        ? size - margin - totalW
+        : (size - totalW) / 2;
+
+  // Y positions: each bar aligned to the vertical edge
+  const getBarY = (h: number) => {
+    if (vertical === "top") return margin;
+    if (vertical === "bottom") return size - margin - h;
+    return (size - h) / 2;
+  };
+
+  return (
+    <>
+      <rect
+        x={xStart}
+        y={getBarY(barH[0]!)}
+        width={barW}
+        height={barH[0]}
+        rx={0.5}
+        fill={accent}
+      />
+      <rect
+        x={xStart + barW + gap}
+        y={getBarY(barH[1]!)}
+        width={barW}
+        height={barH[1]}
+        rx={0.5}
+        fill={accent}
+      />
+    </>
+  );
+}
+
+/**
+ * VERTICAL flow: items are laid out top→bottom.
+ * Bars are HORIZONTAL (wide, short) representing child items.
+ * Packed toward the active vertical edge; aligned horizontally.
+ */
+function VerticalFlowBars({
+  horizontal,
+  vertical,
+  accent,
+  size,
+}: {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+  accent: string;
+  size: number;
+}) {
+  // Two horizontal bars of slightly different widths for visual interest
+  const barH = 2; // bar height
+  const barW = [7, 5]; // bar widths
+  const gap = 2; // gap between bars
+  const margin = 1.5; // distance from edge
+
+  // Y positions: bars packed toward the vertical alignment edge
+  const totalH = barH * 2 + gap;
+  const yStart =
+    vertical === "top"
+      ? margin
+      : vertical === "bottom"
+        ? size - margin - totalH
+        : (size - totalH) / 2;
+
+  // X positions: each bar aligned to the horizontal edge
+  const getBarX = (w: number) => {
+    if (horizontal === "left") return margin;
+    if (horizontal === "right") return size - margin - w;
+    return (size - w) / 2;
+  };
+
+  return (
+    <>
+      <rect
+        x={getBarX(barW[0]!)}
+        y={yStart}
+        width={barW[0]}
+        height={barH}
+        rx={0.5}
+        fill={accent}
+      />
+      <rect
+        x={getBarX(barW[1]!)}
+        y={yStart + barH + gap}
+        width={barW[1]}
+        height={barH}
+        rx={0.5}
+        fill={accent}
+      />
+    </>
+  );
+}
+
+export function AlignmentMatrix({
+  value,
+  onChange,
+  onDistribute,
+  labels,
+  disabled = false,
+  className,
+  direction = "horizontal",
+}: AlignmentMatrixProps) {
+  const copy = { ...DEFAULT_LABELS, ...labels };
+
+  return (
+    <TooltipProvider delayDuration={250}>
+      <div className={cn("flex flex-col gap-0", className)}>
+        {/*
+         * 3×3 dot grid — Figma style.
+         * NO border, NO background box — bare grid of cells.
+         * Each cell is 22px; 3 cols = 66px total.
+         */}
+        <div
+          className="grid grid-cols-3"
+          style={{ width: 66 }}
+          role="group"
+          aria-label={copy.title}
+        >
+          {MATRIX_OPTIONS.map((option) => {
+            const active =
+              option.horizontal === value.horizontal &&
+              option.vertical === value.vertical;
+            return (
+              <AlignmentCell
+                key={`${option.horizontal}-${option.vertical}`}
+                horizontal={option.horizontal}
+                vertical={option.vertical}
+                active={active}
+                label={copy[option.labelKey]}
+                disabled={disabled}
+                direction={direction}
+                onClick={() =>
+                  onChange({
+                    horizontal: option.horizontal,
+                    vertical: option.vertical,
+                  })
+                }
+              />
+            );
+          })}
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}