@open-aippt/core 1.13.2

package/src/app/components/panel/panel-shell.tsx

@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { ScrollArea } from '@/components/ui/scroll-area';
+
+export const PANEL_W = 320;
+export const PANEL_TRANSITION_MS = 240;
+
+// Defer the width expansion to the next frame so the browser paints once
+// at width=0 first; otherwise the transition has no starting frame.
+export function useAnimatedOpen(open: boolean): boolean {
+  const [animVisible, setAnimVisible] = useState(false);
+  useEffect(() => {
+    if (open) {
+      const id = requestAnimationFrame(() => setAnimVisible(true));
+      return () => cancelAnimationFrame(id);
+    }
+    setAnimVisible(false);
+  }, [open]);
+  return animVisible;
+}
+
+// Stay mounted through the close-out width transition so the panel
+// visibly collapses instead of vanishing.
+export function usePanelMount(open: boolean): { mounted: boolean; animVisible: boolean } {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return;
+    }
+    const t = setTimeout(() => setMounted(false), PANEL_TRANSITION_MS);
+    return () => clearTimeout(t);
+  }, [open]);
+  const animVisible = useAnimatedOpen(open && mounted);
+  return { mounted, animVisible };
+}
+
+type PanelShellProps = {
+  animVisible: boolean;
+  uiAttr: 'inspector' | 'design';
+  header: React.ReactNode;
+  banner?: React.ReactNode;
+  footer?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export function PanelShell({
+  animVisible,
+  uiAttr,
+  header,
+  banner,
+  footer,
+  children,
+}: PanelShellProps) {
+  const dataAttrs = uiAttr === 'inspector' ? { 'data-inspector-ui': '' } : { 'data-design-ui': '' };
+  return (
+    <aside
+      {...dataAttrs}
+      className="flex h-full shrink-0 justify-end overflow-hidden bg-sidebar transition-[width,border-left-width] ease-out"
+      style={{
+        width: animVisible ? PANEL_W : 0,
+        borderLeftWidth: animVisible ? 1 : 0,
+        borderLeftColor: 'var(--hairline)',
+        transitionDuration: `${PANEL_TRANSITION_MS}ms`,
+      }}
+    >
+      <div style={{ width: PANEL_W }} className="flex h-full shrink-0 flex-col">
+        <header className="flex h-9 shrink-0 items-center justify-between gap-2 border-b border-hairline px-3">
+          {header}
+        </header>
+        {banner}
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="flex min-h-full flex-col">
+            {children}
+            {footer && <div className="mt-auto border-t border-hairline">{footer}</div>}
+          </div>
+        </ScrollArea>
+      </div>
+    </aside>
+  );
+}

package/src/app/components/panel/save-card.tsx

@@ -0,0 +1,142 @@
+import { Check, Loader2, Redo2, Save, Undo2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { useLocale } from '@/lib/use-locale';
+
+type SaveCardProps = {
+  dirty: boolean;
+  committing: boolean;
+  onSave: () => Promise<void> | void;
+  onDiscard: () => void;
+  unsavedLabel: React.ReactNode;
+  savedLabel?: string;
+  uiAttr: 'inspector' | 'design';
+  onUndo?: () => void;
+  onRedo?: () => void;
+  canUndo?: boolean;
+  canRedo?: boolean;
+};
+
+// Optimistic DOM updates make the canvas *look* saved, so without this
+// affordance a user could close the tab thinking their tweaks hit disk
+// when they're still buffered in memory.
+export function SaveCard({
+  dirty,
+  committing,
+  onSave,
+  onDiscard,
+  unsavedLabel,
+  savedLabel,
+  uiAttr,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+}: SaveCardProps) {
+  const t = useLocale();
+  const [justSaved, setJustSaved] = useState(false);
+  const resolvedSavedLabel = savedLabel ?? t.common.saved;
+
+  useEffect(() => {
+    if (!justSaved) return;
+    const t = setTimeout(() => setJustSaved(false), 1200);
+    return () => clearTimeout(t);
+  }, [justSaved]);
+
+  const visible = dirty || committing || justSaved || canUndo || canRedo;
+  if (!visible) return null;
+
+  const handleSave = async () => {
+    await onSave();
+    setJustSaved(true);
+  };
+
+  const dataAttrs = uiAttr === 'inspector' ? { 'data-inspector-ui': '' } : { 'data-design-ui': '' };
+
+  const showHistory = !justSaved && (onUndo || onRedo);
+
+  return (
+    <div
+      {...dataAttrs}
+      className="pointer-events-none absolute bottom-6 left-1/2 z-30 -translate-x-1/2 animate-in fade-in slide-in-from-bottom-2 duration-200 ease-out"
+    >
+      <div className="pointer-events-auto flex h-9 items-center gap-1 rounded-[8px] border border-border bg-popover/95 py-0.5 pr-0.5 pl-1 shadow-overlay backdrop-blur-md">
+        {showHistory && (
+          <div className="flex items-center">
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onUndo}
+              disabled={committing || !canUndo}
+              aria-label={t.common.undo}
+              title={t.common.undo}
+            >
+              <Undo2 className="size-3.5" />
+            </Button>
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onRedo}
+              disabled={committing || !canRedo}
+              aria-label={t.common.redo}
+              title={t.common.redo}
+            >
+              <Redo2 className="size-3.5" />
+            </Button>
+            {(justSaved || dirty || committing) && (
+              <span aria-hidden className="ml-1 mr-0.5 h-4 w-px bg-hairline" />
+            )}
+          </div>
+        )}
+        {justSaved ? (
+          <span className="flex items-center gap-1.5 whitespace-nowrap px-2.5 text-[12px] font-medium text-foreground">
+            <Check className="size-3.5 shrink-0 text-[oklch(0.55_0.13_165)]" strokeWidth={2.5} />
+            {resolvedSavedLabel}
+          </span>
+        ) : dirty || committing ? (
+          <span className="inline-flex items-center gap-1.5 whitespace-nowrap px-2.5 text-[12px] font-medium text-foreground">
+            <span
+              aria-hidden
+              className="size-1.5 shrink-0 rounded-full bg-brand shadow-[0_0_0_3px_var(--brand-soft)]"
+            />
+            <span className="nums">{unsavedLabel}</span>
+          </span>
+        ) : null}
+        {!justSaved && dirty && (
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground hover:text-foreground"
+            onClick={onDiscard}
+            disabled={committing || !dirty}
+          >
+            {t.common.discard}
+          </Button>
+        )}
+        {(dirty || committing) && (
+          <Button
+            size="sm"
+            variant="brand"
+            className="h-7 px-3"
+            onClick={handleSave}
+            disabled={committing || !dirty}
+          >
+            {committing ? (
+              <>
+                <Loader2 className="size-3.5 animate-spin" />
+                {t.common.saving}
+              </>
+            ) : (
+              <>
+                <Save className="size-3.5" />
+                {t.common.save}
+              </>
+            )}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/app/components/pdf-progress-toast.tsx

@@ -0,0 +1,32 @@
+import { Loader2 } from 'lucide-react';
+import { format, useLocale } from '@/lib/use-locale';
+import type { PdfExportProgress } from '../lib/export-pdf';
+import { Progress } from './ui/progress';
+
+export function PdfProgressToast({ progress }: { progress: PdfExportProgress }) {
+  const t = useLocale();
+  const text =
+    progress.phase === 'processing'
+      ? format(t.pdfToast.processing, {
+          current: progress.current.toString().padStart(2, '0'),
+          total: progress.total.toString().padStart(2, '0'),
+        })
+      : progress.phase === 'printing'
+        ? t.pdfToast.printing
+        : t.pdfToast.done;
+
+  return (
+    <div className="flex w-80 items-start gap-3 rounded-[8px] border border-border bg-popover px-3.5 py-3 text-popover-foreground shadow-floating">
+      <Loader2 className="mt-0.5 size-3.5 shrink-0 animate-spin text-brand" />
+      <div className="min-w-0 flex-1">
+        <p className="font-heading text-[12.5px] font-semibold tracking-tight">
+          {t.pdfToast.title}
+        </p>
+        <p className="truncate font-mono text-[10.5px] tracking-[0.04em] text-muted-foreground">
+          {text}
+        </p>
+        <Progress value={Math.round(progress.percent)} className="mt-2 h-[3px]" />
+      </div>
+    </div>
+  );
+}