@agent-native/core 0.79.27 → 0.80.0

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,60 @@ 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-4 text-center">
+          <div className="flex size-8 items-center justify-center rounded-lg bg-muted/60">
+            <IconAdjustmentsHorizontal className="size-4 text-muted-foreground/70" />
+          </div>
+          <p className="text-[11px] leading-snug text-muted-foreground">
+            {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 +144,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 uppercase tracking-wider text-muted-foreground hover:text-foreground"
           >
             {t("designEditor.tweaks")}
           </button>
@@ -114,10 +173,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 +189,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 +223,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-75 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 +251,32 @@ function TweakControl({
                   type="button"
                   onClick={() => onChange(opt.value)}
                   className={cn(
-                    "h-6 w-6 cursor-pointer rounded-full",
+                    "size-5 cursor-pointer rounded-full 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 +286,7 @@ function TweakControl({
       )}
 
       {tweak.type === "slider" && (
-        <div className="flex items-center gap-2">
+        <div className="flex h-6 items-center gap-2">
           <Slider
             min={tweak.min ?? 0}
             max={tweak.max ?? 100}
@@ -244,19 +295,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,286 @@
+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 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;
+}
+
+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,
+  onClick,
+}: {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+  active: boolean;
+  label: string;
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  // The active cell shows blue bars representing the alignment direction.
+  // Inactive cells show a small faint dot.
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          aria-pressed={active}
+          disabled={disabled}
+          onClick={onClick}
+          className={cn(
+            "flex size-[26px] 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} />
+          ) : (
+            <span
+              className="block size-1 rounded-full bg-current opacity-25"
+              aria-hidden="true"
+            />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent className="text-xs">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
+/**
+ * Renders the Figma-style blue bars for the active alignment cell.
+ * The bars are drawn as short lines showing the items packed
+ * against the given horizontal + vertical edge.
+ */
+function AlignmentBars({
+  horizontal,
+  vertical,
+}: {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+}) {
+  // We draw 2-3 small bars inside a tiny box to indicate alignment direction.
+  // The bars are positioned based on which corner/edge is active.
+  const accent = "var(--design-editor-accent-color, #18a0fb)";
+
+  // Determine the transform for the inner bars container
+  // based on alignment position within the 16×16 drawing area
+  const justifyClass =
+    horizontal === "left"
+      ? "justify-start"
+      : horizontal === "right"
+        ? "justify-end"
+        : "justify-center";
+
+  const alignClass =
+    vertical === "top"
+      ? "items-start"
+      : vertical === "bottom"
+        ? "items-end"
+        : "items-center";
+
+  return (
+    <svg
+      viewBox="0 0 14 14"
+      width={14}
+      height={14}
+      fill="none"
+      aria-hidden="true"
+    >
+      {/* Outer frame (faint) */}
+      <rect
+        x="0.5"
+        y="0.5"
+        width="13"
+        height="13"
+        rx="1"
+        stroke={accent}
+        strokeWidth="1"
+        opacity="0.35"
+      />
+      {/* Inner content bars — positioned by alignment */}
+      <AlignmentBarsContent
+        horizontal={horizontal}
+        vertical={vertical}
+        accent={accent}
+      />
+    </svg>
+  );
+}
+
+function AlignmentBarsContent({
+  horizontal,
+  vertical,
+  accent,
+}: {
+  horizontal: AlignmentHorizontal;
+  vertical: AlignmentVertical;
+  accent: string;
+}) {
+  // Draw 2 bars (representing child items) packed toward the alignment edge.
+  // The bars are thin rectangles with rounded caps.
+  const barH = 2; // bar height in px
+  const barW = [4, 3]; // varying widths for visual interest
+  const gap = 1.5; // gap between bars
+  const totalH = barH * 2 + gap;
+  const totalW = Math.max(...barW);
+
+  // Y position based on vertical alignment
+  const yStart =
+    vertical === "top"
+      ? 2.5
+      : vertical === "bottom"
+        ? 14 - 2.5 - totalH
+        : (14 - totalH) / 2;
+
+  // X positions for the bars based on horizontal alignment
+  const getBarX = (w: number) => {
+    if (horizontal === "left") return 2.5;
+    if (horizontal === "right") return 14 - 2.5 - w;
+    return (14 - 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,
+}: AlignmentMatrixProps) {
+  const copy = { ...DEFAULT_LABELS, ...labels };
+
+  return (
+    <TooltipProvider delayDuration={250}>
+      <div className={cn("space-y-0", className)}>
+        {/* 3×3 dot grid — Figma style */}
+        <div
+          className={cn(
+            "grid grid-cols-3 rounded-md border border-[var(--design-editor-control-border,hsl(var(--border)))]",
+            "bg-[var(--design-editor-control-bg)] p-0.5",
+          )}
+          style={{ width: 84 }}
+        >
+          {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}
+                onClick={() =>
+                  onChange({
+                    horizontal: option.horizontal,
+                    vertical: option.vertical,
+                  })
+                }
+              />
+            );
+          })}
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}