@agent-native/core 0.85.6 → 0.86.0

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

@@ -0,0 +1,342 @@
+import {
+  useT,
+  VisualControlRow,
+  VisualInspectorPanel,
+  VisualInspectorSection,
+  VisualScrubInput,
+  VisualSegmentedControl,
+  VisualSwatchControl,
+} from "@agent-native/core/client";
+import type { DesignSystemData } from "@shared/api";
+import {
+  IconAlignCenter,
+  IconAlignJustified,
+  IconAlignLeft,
+  IconAlignRight,
+  IconBorderRadius,
+  IconBoxPadding,
+  IconDroplet,
+  IconLetterCase,
+  IconX,
+} from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+
+export interface SlideStyleSnapshot {
+  selector: string;
+  label: string;
+  tagName: string;
+  textPreview: string;
+  isText: boolean;
+  isImage: boolean;
+  color: string;
+  backgroundColor: string;
+  fontSize: number;
+  fontWeight: string;
+  lineHeight: number;
+  textAlign: string;
+  opacity: number;
+  borderRadius: number;
+  borderWidth: number;
+  borderColor: string;
+  paddingX: number;
+  paddingY: number;
+}
+
+export type SlideStylePatch = Partial<{
+  color: string;
+  backgroundColor: string;
+  fontSize: string;
+  fontWeight: string;
+  lineHeight: string;
+  textAlign: string;
+  opacity: string;
+  borderRadius: string;
+  borderWidth: string;
+  borderColor: string;
+  paddingLeft: string;
+  paddingRight: string;
+  paddingTop: string;
+  paddingBottom: string;
+}>;
+
+function tokenPalette(
+  designSystem: DesignSystemData | undefined,
+  t: (key: string) => string,
+) {
+  const colors = designSystem?.colors;
+  const base = colors
+    ? [
+        {
+          label: t("styleInspector.primary"),
+          value: colors.primary,
+          color: colors.primary,
+        },
+        {
+          label: t("styleInspector.secondary"),
+          value: colors.secondary,
+          color: colors.secondary,
+        },
+        {
+          label: t("styleInspector.accent"),
+          value: colors.accent,
+          color: colors.accent,
+        },
+        {
+          label: t("styleInspector.surface"),
+          value: colors.surface,
+          color: colors.surface,
+        },
+        {
+          label: t("styleInspector.background"),
+          value: colors.background,
+          color: colors.background,
+        },
+        {
+          label: t("styleInspector.text"),
+          value: colors.text,
+          color: colors.text,
+        },
+        {
+          label: t("styleInspector.muted"),
+          value: colors.textMuted,
+          color: colors.textMuted,
+        },
+      ]
+    : [];
+
+  return [
+    ...base,
+    { label: t("styleInspector.white"), value: "#ffffff", color: "#ffffff" },
+    { label: t("styleInspector.black"), value: "#000000", color: "#000000" },
+    { label: t("styleInspector.slate"), value: "#1f2937", color: "#1f2937" },
+    { label: t("styleInspector.blue"), value: "#609ff8", color: "#609ff8" },
+    { label: t("styleInspector.cyan"), value: "#22d3ee", color: "#22d3ee" },
+    {
+      label: t("styleInspector.emerald"),
+      value: "#34d399",
+      color: "#34d399",
+    },
+    { label: t("styleInspector.amber"), value: "#fbbf24", color: "#fbbf24" },
+    { label: t("styleInspector.rose"), value: "#fb7185", color: "#fb7185" },
+  ];
+}
+
+export function SlideStyleInspector({
+  snapshot,
+  designSystem,
+  onChange,
+  onClose,
+}: {
+  snapshot: SlideStyleSnapshot;
+  designSystem?: DesignSystemData;
+  onChange: (patch: SlideStylePatch) => void;
+  onClose: () => void;
+}) {
+  const t = useT();
+  const palette = tokenPalette(designSystem, t);
+  const targetLabel =
+    snapshot.textPreview || snapshot.label || snapshot.tagName.toUpperCase();
+
+  return (
+    <VisualInspectorPanel
+      title={t("styleInspector.title")}
+      subtitle={targetLabel}
+      className="pointer-events-auto"
+      headerAction={
+        <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>
+      }
+    >
+      {snapshot.isText && (
+        <VisualInspectorSection
+          title={
+            <span className="inline-flex items-center gap-1.5">
+              <IconLetterCase className="size-3" />
+              {t("styleInspector.type")}
+            </span>
+          }
+        >
+          <VisualControlRow label={t("styleInspector.color")}>
+            <VisualSwatchControl
+              options={palette}
+              value={snapshot.color}
+              onChange={(value) => onChange({ color: value })}
+            />
+          </VisualControlRow>
+          <div className="grid grid-cols-2 gap-2">
+            <VisualScrubInput
+              label={t("styleInspector.size")}
+              value={snapshot.fontSize}
+              min={8}
+              max={160}
+              step={1}
+              unit="px"
+              onChange={(value) => onChange({ fontSize: `${value}px` })}
+            />
+            <VisualScrubInput
+              label={t("styleInspector.line")}
+              value={snapshot.lineHeight}
+              min={0.8}
+              max={3}
+              step={0.05}
+              onChange={(value) => onChange({ lineHeight: String(value) })}
+            />
+          </div>
+          <VisualSegmentedControl
+            value={snapshot.fontWeight}
+            onChange={(value) => onChange({ fontWeight: value })}
+            options={[
+              { label: t("styleInspector.regular"), value: "400" },
+              { label: t("styleInspector.medium"), value: "500" },
+              { label: t("styleInspector.semi"), value: "600" },
+              { label: t("styleInspector.bold"), value: "700" },
+            ]}
+          />
+          <VisualSegmentedControl
+            value={snapshot.textAlign}
+            onChange={(value) => onChange({ textAlign: value })}
+            options={[
+              { label: t("styleInspector.left"), value: "left" },
+              { label: t("styleInspector.center"), value: "center" },
+              { label: t("styleInspector.right"), value: "right" },
+              { label: t("styleInspector.justify"), value: "justify" },
+            ]}
+          />
+          <div className="flex justify-between px-1 text-muted-foreground">
+            <IconAlignLeft className="size-3.5" />
+            <IconAlignCenter className="size-3.5" />
+            <IconAlignRight className="size-3.5" />
+            <IconAlignJustified className="size-3.5" />
+          </div>
+        </VisualInspectorSection>
+      )}
+
+      <VisualInspectorSection
+        title={
+          <span className="inline-flex items-center gap-1.5">
+            <IconDroplet className="size-3" />
+            {t("styleInspector.fill")}
+          </span>
+        }
+      >
+        <VisualControlRow
+          label={
+            snapshot.isImage
+              ? t("styleInspector.tint")
+              : t("styleInspector.fill")
+          }
+        >
+          <VisualSwatchControl
+            options={[
+              {
+                label: t("styleInspector.transparent"),
+                value: "transparent",
+                color: "transparent",
+              },
+              ...palette,
+            ]}
+            value={snapshot.backgroundColor}
+            onChange={(value) => onChange({ backgroundColor: value })}
+          />
+        </VisualControlRow>
+        <VisualScrubInput
+          label={t("styleInspector.alpha")}
+          value={snapshot.opacity}
+          min={0}
+          max={100}
+          step={5}
+          unit="%"
+          onChange={(value) => onChange({ opacity: String(value / 100) })}
+        />
+      </VisualInspectorSection>
+
+      <VisualInspectorSection
+        title={
+          <span className="inline-flex items-center gap-1.5">
+            <IconBorderRadius className="size-3" />
+            {t("styleInspector.stroke")}
+          </span>
+        }
+      >
+        <div className="grid grid-cols-2 gap-2">
+          <VisualScrubInput
+            label={t("styleInspector.radius")}
+            value={snapshot.borderRadius}
+            min={0}
+            max={96}
+            step={1}
+            unit="px"
+            onChange={(value) => onChange({ borderRadius: `${value}px` })}
+          />
+          <VisualScrubInput
+            label={t("styleInspector.line")}
+            value={snapshot.borderWidth}
+            min={0}
+            max={16}
+            step={1}
+            unit="px"
+            onChange={(value) => onChange({ borderWidth: `${value}px` })}
+          />
+        </div>
+        <VisualControlRow label={t("styleInspector.strokeColor")}>
+          <VisualSwatchControl
+            options={palette}
+            value={snapshot.borderColor}
+            onChange={(value) => onChange({ borderColor: value })}
+          />
+        </VisualControlRow>
+      </VisualInspectorSection>
+
+      {!snapshot.isImage && (
+        <VisualInspectorSection
+          title={
+            <span className="inline-flex items-center gap-1.5">
+              <IconBoxPadding className="size-3" />
+              {t("styleInspector.spacing")}
+            </span>
+          }
+        >
+          <div className="grid grid-cols-2 gap-2">
+            <VisualScrubInput
+              label={t("styleInspector.x")}
+              value={snapshot.paddingX}
+              min={0}
+              max={120}
+              step={2}
+              unit="px"
+              onChange={(value) =>
+                onChange({
+                  paddingLeft: `${value}px`,
+                  paddingRight: `${value}px`,
+                })
+              }
+            />
+            <VisualScrubInput
+              label={t("styleInspector.y")}
+              value={snapshot.paddingY}
+              min={0}
+              max={120}
+              step={2}
+              unit="px"
+              onChange={(value) =>
+                onChange({
+                  paddingTop: `${value}px`,
+                  paddingBottom: `${value}px`,
+                })
+              }
+            />
+          </div>
+        </VisualInspectorSection>
+      )}
+    </VisualInspectorPanel>
+  );
+}

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

@@ -1,10 +1,12 @@
-import { IconX } from "@tabler/icons-react";
-
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+  useT,
+  VisualInspectorPanel,
+  VisualInspectorSection,
+  VisualTweakControl,
+} from "@agent-native/core/client";
+import { IconAdjustmentsHorizontal, IconX } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
 import type { TweakDefinition } from "@/lib/design-systems";
 
 interface TweaksPanelProps {
@@ -20,29 +22,44 @@ export function TweaksPanel({
   onChange,
   onClose,
 }: TweaksPanelProps) {
+  const t = useT();
   return (
-    <div className="absolute bottom-4 right-4 w-64 rounded-xl border border-border bg-card shadow-2xl z-20">
-      <div className="flex items-center justify-between px-4 pt-3 pb-2">
-        <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
-          Tweaks
-        </span>
-        <button
-          onClick={onClose}
-          className="text-muted-foreground/70 hover:text-muted-foreground cursor-pointer"
-        >
-          <IconX className="w-3.5 h-3.5" />
-        </button>
-      </div>
-      <div className="px-4 pb-4 space-y-4">
-        {tweaks.map((tweak) => (
-          <TweakControl
-            key={tweak.id}
-            tweak={tweak}
-            value={values[tweak.id] ?? tweak.defaultValue}
-            onChange={(v) => onChange(tweak.id, v)}
-          />
-        ))}
-      </div>
+    <div className="absolute bottom-4 right-4 z-20">
+      <VisualInspectorPanel
+        title={t("styleInspector.deckStyle")}
+        subtitle={t("styleInspector.designSystemTweaks")}
+        className="w-64"
+        headerAction={
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-7 cursor-pointer text-muted-foreground hover:text-foreground"
+            onClick={onClose}
+            aria-label={t("styleInspector.closeTweaks")}
+          >
+            <IconX className="size-3.5" />
+          </Button>
+        }
+      >
+        <VisualInspectorSection title={t("styleInspector.controls")}>
+          {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 text-[11px] text-muted-foreground">
+              <IconAdjustmentsHorizontal className="size-5 text-muted-foreground/40" />
+              <span>{t("styleInspector.noDeckStyleControls")}</span>
+            </div>
+          )}
+        </VisualInspectorSection>
+      </VisualInspectorPanel>
     </div>
   );
 }
@@ -56,72 +73,5 @@ function TweakControl({
   value: string | number | boolean;
   onChange: (v: string | number | boolean) => void;
 }) {
-  return (
-    <div>
-      <div className="text-[11px] text-muted-foreground mb-2">
-        {tweak.label}
-      </div>
-      {tweak.type === "color-swatches" && (
-        <div className="flex gap-2">
-          {tweak.options?.map((opt) => (
-            <Tooltip key={opt.value}>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => onChange(opt.value)}
-                  className={`w-7 h-7 rounded-full cursor-pointer ${
-                    value === opt.value
-                      ? "ring-2 ring-foreground ring-offset-2 ring-offset-card"
-                      : ""
-                  }`}
-                  style={{ backgroundColor: opt.color || opt.value }}
-                />
-              </TooltipTrigger>
-              <TooltipContent>{opt.label}</TooltipContent>
-            </Tooltip>
-          ))}
-        </div>
-      )}
-      {tweak.type === "segment" && (
-        <div className="flex rounded-lg overflow-hidden border border-border">
-          {tweak.options?.map((opt) => (
-            <button
-              key={opt.value}
-              onClick={() => onChange(opt.value)}
-              className={`flex-1 px-3 py-1 text-[11px] font-medium cursor-pointer ${
-                value === opt.value
-                  ? "bg-accent text-foreground"
-                  : "text-muted-foreground/70 hover:text-muted-foreground"
-              }`}
-            >
-              {opt.label}
-            </button>
-          ))}
-        </div>
-      )}
-      {tweak.type === "toggle" && (
-        <button
-          onClick={() => onChange(!value)}
-          className={`w-9 h-5 rounded-full cursor-pointer ${
-            value ? "bg-primary/30" : "bg-accent"
-          } relative`}
-        >
-          <span
-            className={`block w-3.5 h-3.5 rounded-full bg-foreground absolute top-0.5 ${
-              value ? "right-0.5" : "left-0.5"
-            }`}
-          />
-        </button>
-      )}
-      {tweak.type === "slider" && (
-        <input
-          type="range"
-          min={0}
-          max={100}
-          value={typeof value === "number" ? value : 50}
-          onChange={(e) => onChange(Number(e.target.value))}
-          className="w-full cursor-pointer"
-        />
-      )}
-    </div>
-  );
+  return <VisualTweakControl tweak={tweak} value={value} onChange={onChange} />;
 }

package/corpus/templates/slides/app/components/visual-editor/SaveStatusIndicator.tsx

@@ -4,7 +4,11 @@ import { IconCloudOff } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
 
 interface SaveStatusIndicatorProps {
-  /** True while a save is in flight or pending (debounced). */
+  /**
+   * True while a save is in flight or pending (debounced). Deliberately NOT
+   * rendered: automatic saving is silent (Figma-style) — a "Saving…/Saved"
+   * ticker is clutter. Only the exceptional offline state gets UI.
+   */
   saving: boolean;
   /** True when offline / save errored. Shows the warning state. */
   offline?: boolean;
@@ -12,10 +16,13 @@ interface SaveStatusIndicatorProps {
 }
 
 export function SaveStatusIndicator({
+  saving: _saving,
   offline,
   className,
 }: SaveStatusIndicatorProps) {
   const t = useT();
+
+  // Only the actionable, exceptional state renders — silent otherwise.
   if (offline) {
     return (
       <div