@agent-native/core 0.92.11 → 0.93.0

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

@@ -0,0 +1,151 @@
+import { useT } from "@agent-native/core/client";
+import {
+  IconAlertTriangle,
+  IconLayoutColumns,
+  IconLayoutRows,
+} from "@tabler/icons-react";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import type { AutoLayoutSuggestion } from "../../pages/design-editor/auto-layout-suggestion";
+
+export interface AutoLayoutSuggestionDialogProps {
+  open: boolean;
+  suggestion: AutoLayoutSuggestion | null;
+  onOpenChange: (open: boolean) => void;
+  onApply: () => void;
+}
+
+export function AutoLayoutSuggestionDialog({
+  open,
+  suggestion,
+  onOpenChange,
+  onApply,
+}: AutoLayoutSuggestionDialogProps) {
+  const t = useT();
+  const DirectionIcon =
+    suggestion?.direction === "row" ? IconLayoutRows : IconLayoutColumns;
+  const warningLabels = suggestion?.warnings.map((warning) =>
+    t(`designEditor.autoLayoutSuggestion.warnings.${warning}`),
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {t("designEditor.autoLayoutSuggestion.title")}
+          </DialogTitle>
+          <DialogDescription>
+            {t("designEditor.autoLayoutSuggestion.description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        {suggestion ? (
+          <div className="space-y-4">
+            <div
+              aria-label={t("designEditor.autoLayoutSuggestion.preview")}
+              className="grid min-h-32 place-items-center overflow-hidden rounded-lg border bg-muted/30 p-5"
+            >
+              <div
+                className="flex max-w-full rounded border-2 border-dashed border-[var(--design-editor-selection-color)] bg-background p-3"
+                style={{
+                  flexDirection: suggestion.direction,
+                  gap: Math.min(24, Math.max(4, suggestion.gap / 2)),
+                  alignItems: suggestion.alignItems,
+                  justifyContent: suggestion.justifyContent,
+                }}
+              >
+                {suggestion.orderedChildIds.map((id, index) => (
+                  <div
+                    key={id}
+                    className="grid min-h-7 min-w-10 place-items-center rounded bg-[var(--design-editor-selection-color)]/20 px-2 text-[10px] font-medium text-foreground"
+                  >
+                    {index + 1}
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2 text-xs">
+              <PreviewValue
+                label={t("editPanel.labels.direction")}
+                value={t(`editPanel.flexDirections.${suggestion.direction}`)}
+                icon={<DirectionIcon className="size-4" />}
+              />
+              <PreviewValue
+                label={t("editPanel.labels.gap")}
+                value={`${suggestion.gap}px`}
+              />
+              <PreviewValue
+                label={t("editPanel.labels.padding")}
+                value={`${suggestion.padding.top} / ${suggestion.padding.right} / ${suggestion.padding.bottom} / ${suggestion.padding.left}`}
+              />
+              <PreviewValue
+                label={t("designEditor.autoLayoutSuggestion.sizing")}
+                value={`${t(`designEditor.autoLayoutSuggestion.${suggestion.horizontalSizing}`)} × ${t(`designEditor.autoLayoutSuggestion.${suggestion.verticalSizing}`)}`}
+              />
+              <PreviewValue
+                label={t("editPanel.labels.align")}
+                value={suggestion.alignItems}
+              />
+              <PreviewValue
+                label={t("editPanel.labels.order")}
+                value={suggestion.orderedChildIds
+                  .map((_, index) => index + 1)
+                  .join(" → ")}
+              />
+            </div>
+
+            {warningLabels && warningLabels.length > 0 ? (
+              <div className="flex gap-2 rounded-md border border-amber-500/30 bg-amber-500/10 p-3 text-xs text-amber-700 dark:text-amber-300">
+                <IconAlertTriangle className="mt-0.5 size-4 shrink-0" />
+                <span>{warningLabels.join(" ")}</span>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("designEditor.autoLayoutSuggestion.cancel")}
+          </Button>
+          <Button disabled={!suggestion?.safeToApply} onClick={onApply}>
+            {t("designEditor.autoLayoutSuggestion.apply")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function PreviewValue({
+  label,
+  value,
+  icon,
+}: {
+  label: string;
+  value: string;
+  icon?: ReactNode;
+}) {
+  return (
+    <div className="rounded-md border bg-background px-3 py-2">
+      <div className="mb-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+        {label}
+      </div>
+      <div className="flex items-center gap-1.5 font-medium">
+        {icon}
+        <span className="truncate">{value}</span>
+      </div>
+    </div>
+  );
+}

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

@@ -90,6 +90,7 @@ export type CanvasContextMenuAction =
   | "ungroup"
   | "frame-selection"
   | "add-auto-layout"
+  | "suggest-auto-layout"
   | "create-component"
   | "go-to-main-component"
   | "swap-instance"
@@ -155,6 +156,7 @@ export interface CanvasContextMenuLabels {
   ungroup: string;
   frameSelection: string;
   addAutoLayout: string;
+  suggestAutoLayout: string;
   createComponent: string;
   goToMainComponent: string;
   swapInstance: string;
@@ -257,6 +259,7 @@ export interface CanvasContextMenuProps {
   canUngroup?: boolean;
   canFrameSelection?: boolean;
   canAddAutoLayout?: boolean;
+  canSuggestAutoLayout?: boolean;
   canCreateComponent?: boolean;
   // Whether the current selection IS a component instance — gates the
   // whole Go to main component / Swap instance / Detach instance cluster on
@@ -325,6 +328,7 @@ export interface CanvasContextMenuProps {
   onUngroup?: CanvasContextMenuActionHandler;
   onFrameSelection?: CanvasContextMenuActionHandler;
   onAddAutoLayout?: CanvasContextMenuActionHandler;
+  onSuggestAutoLayout?: CanvasContextMenuActionHandler;
   onCreateComponent?: CanvasContextMenuActionHandler;
   onGoToMainComponent?: CanvasContextMenuActionHandler;
   onSwapInstance?: CanvasContextMenuActionHandler;
@@ -378,6 +382,7 @@ const DEFAULT_LABELS: CanvasContextMenuLabels = {
   ungroup: "Ungroup",
   frameSelection: "Frame selection",
   addAutoLayout: "Add auto layout",
+  suggestAutoLayout: "Suggest auto layout…",
   createComponent: "Create component",
   goToMainComponent: "Go to main component",
   swapInstance: "Swap instance",
@@ -493,6 +498,7 @@ export const CanvasContextMenu = forwardRef<
     canUngroup = false,
     canFrameSelection = selectedCount > 0,
     canAddAutoLayout = selectedCount > 0,
+    canSuggestAutoLayout = false,
     canCreateComponent = selectedCount > 0,
     isComponentInstance = false,
     canGoToMainComponent = isComponentInstance,
@@ -532,6 +538,7 @@ export const CanvasContextMenu = forwardRef<
     onUngroup,
     onFrameSelection,
     onAddAutoLayout,
+    onSuggestAutoLayout,
     onCreateComponent,
     onGoToMainComponent,
     onSwapInstance,
@@ -615,6 +622,7 @@ export const CanvasContextMenu = forwardRef<
       ungroup: onUngroup,
       "frame-selection": onFrameSelection,
       "add-auto-layout": onAddAutoLayout,
+      "suggest-auto-layout": onSuggestAutoLayout,
       "create-component": onCreateComponent,
       "go-to-main-component": onGoToMainComponent,
       "swap-instance": onSwapInstance,
@@ -636,6 +644,7 @@ export const CanvasContextMenu = forwardRef<
     }),
     [
       onAddAutoLayout,
+      onSuggestAutoLayout,
       onBringForward,
       onBringToFront,
       onCopy,
@@ -919,6 +928,17 @@ export const CanvasContextMenu = forwardRef<
                 shortcut={shortcuts.addAutoLayout}
                 onSelect={(event) => runAction("add-auto-layout", event)}
               />
+              {onSuggestAutoLayout ? (
+                <CanvasMenuItem
+                  hidden={isHiddenAction("suggest-auto-layout")}
+                  disabled={
+                    !canRun("suggest-auto-layout", canSuggestAutoLayout)
+                  }
+                  label={labels.suggestAutoLayout}
+                  shortcut=""
+                  onSelect={(event) => runAction("suggest-auto-layout", event)}
+                />
+              ) : null}
               <CanvasMenuItem
                 hidden={isHiddenAction("create-component")}
                 disabled={!canRun("create-component", canCreateComponent)}