@open-slide/core 1.1.0 → 1.3.0

package/src/app/components/image-placeholder.tsx

@@ -1,4 +1,7 @@
-import type { CSSProperties, HTMLAttributes } from 'react';
+import { type CSSProperties, type HTMLAttributes, useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { uploadWithAutoRename } from '@/lib/assets';
+import { useLocale } from '@/lib/use-locale';
 
 export type ImagePlaceholderProps = {
   hint: string;
@@ -17,9 +20,56 @@ export function ImagePlaceholder({
   ...rest
 }: ImagePlaceholderProps) {
   const dims = width && height ? `${width} × ${height}` : null;
+  const [dragActive, setDragActive] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const dragDepth = useRef(0);
+  const t = useLocale();
+
+  const dndProps = import.meta.env.DEV
+    ? {
+        onDragEnter: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current += 1;
+          setDragActive(true);
+        },
+        onDragOver: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy';
+        },
+        onDragLeave: () => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setDragActive(false);
+        },
+        onDrop: (e: React.DragEvent<HTMLDivElement>) => {
+          if (uploading || !hasImageFile(e)) return;
+          e.preventDefault();
+          dragDepth.current = 0;
+          setDragActive(false);
+          const file = pickImageFile(e.dataTransfer.files);
+          if (!file) return;
+          const root = e.currentTarget;
+          const slideId = root.closest<HTMLElement>('[data-slide-id]')?.dataset.slideId;
+          const loc = root.dataset.slideLoc;
+          if (!slideId || !loc) return;
+          const idx = loc.indexOf(':');
+          if (idx <= 0) return;
+          const line = Number(loc.slice(0, idx));
+          const column = Number(loc.slice(idx + 1));
+          if (!Number.isFinite(line) || !Number.isFinite(column)) return;
+          setUploading(true);
+          handleDrop(slideId, file, line, column)
+            .catch(() => toast.error(t.imagePlaceholder.uploadFailed))
+            .finally(() => setUploading(false));
+        },
+      }
+    : null;
+
   return (
     <div
       {...rest}
+      {...dndProps}
       data-slide-placeholder={hint}
       data-placeholder-w={width}
       data-placeholder-h={height}
@@ -93,10 +143,82 @@ export function ImagePlaceholder({
           </span>
         )}
       </div>
+      {import.meta.env.DEV && (dragActive || uploading) && (
+        <DropOverlay
+          label={uploading ? t.imagePlaceholder.uploading : t.imagePlaceholder.dropOverlay}
+        />
+      )}
+    </div>
+  );
+}
+
+function DropOverlay({ label }: { label: string }) {
+  return (
+    <div
+      aria-hidden
+      style={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        borderRadius: 12,
+        border: '2px dashed oklch(0.62 0.18 250)',
+        background: 'oklch(0.62 0.18 250 / 0.08)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <span
+        style={{
+          fontSize: 12,
+          fontWeight: 600,
+          letterSpacing: '0.02em',
+          color: 'oklch(0.45 0.16 250)',
+          background: 'rgba(255,255,255,0.92)',
+          padding: '6px 10px',
+          borderRadius: 6,
+          boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
+        }}
+      >
+        {label}
+      </span>
     </div>
   );
 }
 
+function hasImageFile(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}
+
+function pickImageFile(files: FileList): File | null {
+  for (let i = 0; i < files.length; i++) {
+    const f = files[i];
+    if (f.type.startsWith('image/')) return f;
+  }
+  return null;
+}
+
+async function handleDrop(slideId: string, file: File, line: number, column: number) {
+  const { ok, entry } = await uploadWithAutoRename(slideId, file);
+  if (!ok || !entry) throw new Error('upload failed');
+  const res = await fetch('/__edit', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({
+      slideId,
+      line,
+      column,
+      ops: [{ kind: 'replace-placeholder-with-image', assetPath: `./assets/${entry.name}` }],
+    }),
+  });
+  if (!res.ok) throw new Error(`edit failed (${res.status})`);
+}
+
 function PlaceholderIcon() {
   return (
     <svg

package/src/app/components/inspector/image-crop-dialog.tsx

@@ -13,11 +13,9 @@ import {
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useLocale } from '@/lib/use-locale';
 
-export type ImageCropResult = {
-  fit: 'cover' | 'contain';
-  x: number;
-  y: number;
-};
+export type ImageCropRect = { x: number; y: number; width: number; height: number };
+
+export type ImageCropResult = { fit: 'contain' } | { fit: 'cover'; rect: ImageCropRect };
 
 export function ImageCropDialog({
   src,
@@ -25,6 +23,7 @@ export function ImageCropDialog({
   targetHeight,
   initialFit,
   initialPosition,
+  initialRect,
   onClose,
   onApply,
 }: {
@@ -33,6 +32,7 @@ export function ImageCropDialog({
   targetHeight: number;
   initialFit: 'cover' | 'contain';
   initialPosition: { x: number; y: number };
+  initialRect: ImageCropRect | null;
   onClose: () => void;
   onApply: (result: ImageCropResult) => void;
 }) {
@@ -44,26 +44,30 @@ export function ImageCropDialog({
 
   const onImageLoad = (e: SyntheticEvent<HTMLImageElement>) => {
     const im = e.currentTarget;
-    setCrop(makeMaxSizeCrop(im.naturalWidth, im.naturalHeight, aspect, initialPosition));
+    setCrop(initialCrop(im.naturalWidth, im.naturalHeight, aspect, initialRect, initialPosition));
   };
 
   useEffect(() => {
     const im = imgRef.current;
-    if (!im || !im.complete || !im.naturalWidth || !im.naturalHeight) return;
+    if (!im?.complete || !im.naturalWidth || !im.naturalHeight) return;
     setCrop((prev) => {
-      const pos = prev ? deriveObjectPosition(prev as PercentCrop) : initialPosition;
-      return makeMaxSizeCrop(im.naturalWidth, im.naturalHeight, aspect, pos);
+      if (prev && prev.unit === '%') {
+        return clampToAspect(prev as PercentCrop, aspect, im.naturalWidth, im.naturalHeight);
+      }
+      return initialCrop(im.naturalWidth, im.naturalHeight, aspect, initialRect, initialPosition);
     });
-  }, [aspect, initialPosition]);
+  }, [aspect, initialPosition, initialRect]);
 
   const onApplyClick = () => {
     if (fit === 'contain') {
-      onApply({ fit, x: 50, y: 50 });
+      onApply({ fit });
       return;
     }
-    const pos =
-      crop && crop.unit === '%' ? deriveObjectPosition(crop as PercentCrop) : { x: 50, y: 50 };
-    onApply({ fit, x: round2(pos.x), y: round2(pos.y) });
+    const rect =
+      crop && crop.unit === '%'
+        ? roundRect(crop as PercentCrop)
+        : { x: 0, y: 0, width: 100, height: 100 };
+    onApply({ fit, rect });
   };
 
   return (
@@ -98,7 +102,6 @@ export function ImageCropDialog({
               onChange={(_, percentCrop) => setCrop(percentCrop)}
               aspect={aspect}
               keepSelection
-              locked
               className="max-h-full"
             >
               <img
@@ -124,6 +127,19 @@ export function ImageCropDialog({
   );
 }
 
+function initialCrop(
+  naturalW: number,
+  naturalH: number,
+  aspect: number,
+  rect: ImageCropRect | null,
+  position: { x: number; y: number },
+): PercentCrop {
+  if (rect) {
+    return clampToAspect({ unit: '%', ...rect }, aspect, naturalW, naturalH);
+  }
+  return makeMaxSizeCrop(naturalW, naturalH, aspect, position);
+}
+
 function makeMaxSizeCrop(
   naturalW: number,
   naturalH: number,
@@ -150,12 +166,40 @@ function makeMaxSizeCrop(
   return { unit: '%', x, y, width, height };
 }
 
-function deriveObjectPosition(crop: PercentCrop): { x: number; y: number } {
-  const slackX = 100 - crop.width;
-  const slackY = 100 - crop.height;
+function clampToAspect(
+  crop: PercentCrop,
+  aspect: number,
+  naturalW: number,
+  naturalH: number,
+): PercentCrop {
+  const cx = crop.x + crop.width / 2;
+  const cy = crop.y + crop.height / 2;
+  let width = crop.width;
+  let height = crop.height;
+  const targetPctRatio = naturalW > 0 && naturalH > 0 ? (aspect * naturalH) / naturalW : aspect;
+  const currentRatio = height > 0 ? width / height : targetPctRatio;
+  if (Math.abs(currentRatio - targetPctRatio) > 0.0001) {
+    if (currentRatio > targetPctRatio) {
+      height = width / targetPctRatio;
+    } else {
+      width = height * targetPctRatio;
+    }
+  }
+  width = clamp(width, 1, 100);
+  height = clamp(height, 1, 100);
+  let x = cx - width / 2;
+  let y = cy - height / 2;
+  x = clamp(x, 0, 100 - width);
+  y = clamp(y, 0, 100 - height);
+  return { unit: '%', x, y, width, height };
+}
+
+function roundRect(crop: PercentCrop): ImageCropRect {
   return {
-    x: slackX > 0 ? clamp((crop.x / slackX) * 100, 0, 100) : 50,
-    y: slackY > 0 ? clamp((crop.y / slackY) * 100, 0, 100) : 50,
+    x: round2(crop.x),
+    y: round2(crop.y),
+    width: round2(crop.width),
+    height: round2(crop.height),
   };
 }
 

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

@@ -3,12 +3,17 @@ import {
   AlignJustify,
   AlignLeft,
   AlignRight,
+  ArrowDownToLine,
   Bold,
+  Crop,
   ImageIcon,
   Italic,
+  Loader2,
+  Upload,
   X,
 } from 'lucide-react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { toast } from 'sonner';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PANEL_TRANSITION_MS, PanelShell, useAnimatedOpen } from '@/components/panel/panel-shell';
 import { Button } from '@/components/ui/button';
@@ -32,10 +37,12 @@ import { Slider } from '@/components/ui/slider';
 import { Textarea } from '@/components/ui/textarea';
 import { Toggle } from '@/components/ui/toggle';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
-import { type AssetEntry, useAssets } from '@/lib/assets';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { type AssetEntry, uploadWithAutoRename, useAssets } from '@/lib/assets';
 import { findSlideSource } from '@/lib/inspector/fiber';
 import type { EditOp } from '@/lib/inspector/use-editor';
-import { useLocale } from '@/lib/use-locale';
+import { useAgentSocketConnected } from '@/lib/use-agent-socket';
+import { format, useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 import type { Locale } from '../../../locale/types';
 import { type SelectedTarget, useInspector } from './inspector-provider';
@@ -149,15 +156,18 @@ export function InspectorPanel() {
               <{pinSelected.anchor.tagName.toLowerCase()}>
             </span>
           </div>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="text-muted-foreground hover:text-foreground"
-            onClick={() => setSelected(null)}
-            aria-label={t.inspector.deselect}
-          >
-            <X className="size-3.5" />
-          </Button>
+          <div className="flex items-center gap-1.5">
+            <AgentWatchingBadge />
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={() => setSelected(null)}
+              aria-label={t.inspector.deselect}
+            >
+              <X className="size-3.5" />
+            </Button>
+          </div>
         </>
       }
       footer={<CommentsSection selected={pinSelected} onAdd={add} />}
@@ -637,6 +647,7 @@ function ImageField({
               className="flex-1"
               onClick={() => openCrop(anchor as HTMLImageElement)}
             >
+              <Crop className="size-3.5" />
               {t.inspector.crop}
             </Button>
           )}
@@ -740,11 +751,35 @@ function AssetPickerDialog({
   onClose: () => void;
   onPick: (asset: AssetEntry) => void;
 }) {
-  const { assets, loading } = useAssets(slideId);
+  const { assets, loading, refresh } = useAssets(slideId);
   const images = assets.filter((a) => a.mime.startsWith('image/'));
   const t = useLocale();
   const path = `slides/${slideId}/assets/`;
   const [descPrefix, descSuffix] = t.inspector.replaceImageDescription.split('{path}');
+  const [uploading, setUploading] = useState(false);
+  const [dragActive, setDragActive] = useState(false);
+  const dragDepth = useRef(0);
+  const inputId = useId();
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith('image/')) return;
+      setUploading(true);
+      try {
+        const { ok, status, entry } = await uploadWithAutoRename(slideId, file);
+        if (!ok || !entry) {
+          toast.error(format(t.asset.toastUploadFailed, { status }));
+          return;
+        }
+        await refresh().catch(() => {});
+        onPick(entry);
+      } finally {
+        setUploading(false);
+      }
+    },
+    [slideId, refresh, onPick, t],
+  );
+
   return (
     <Dialog open onOpenChange={(o) => !o && onClose()}>
       <DialogContent className="sm:max-w-xl">
@@ -756,7 +791,60 @@ function AssetPickerDialog({
             {descSuffix}
           </DialogDescription>
         </DialogHeader>
-        <div className="max-h-[60vh] overflow-y-auto">
+        <label
+          htmlFor={inputId}
+          className={cn(
+            'absolute right-12 top-3.5 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-[5px] border border-border bg-card px-2 text-[12px] font-medium transition-colors',
+            'hover:bg-muted/60 hover:border-foreground/20 active:translate-y-px',
+            uploading && 'pointer-events-none opacity-60',
+          )}
+        >
+          {uploading ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <Upload className="size-3.5" />
+          )}
+          <span>{t.asset.upload}</span>
+        </label>
+        <input
+          id={inputId}
+          type="file"
+          accept="image/*"
+          className="sr-only"
+          disabled={uploading}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            e.target.value = '';
+            if (file) handleFile(file).catch(() => {});
+          }}
+        />
+        <section
+          aria-label={t.inspector.replaceImageDialogTitle}
+          className="relative max-h-[60vh] overflow-y-auto"
+          onDragEnter={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current += 1;
+            setDragActive(true);
+          }}
+          onDragOver={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+          }}
+          onDragLeave={() => {
+            dragDepth.current = Math.max(0, dragDepth.current - 1);
+            if (dragDepth.current === 0) setDragActive(false);
+          }}
+          onDrop={(e) => {
+            if (uploading || !hasFiles(e)) return;
+            e.preventDefault();
+            dragDepth.current = 0;
+            setDragActive(false);
+            const file = e.dataTransfer.files?.[0];
+            if (file) handleFile(file).catch(() => {});
+          }}
+        >
           {loading ? (
             <p className="px-1 py-6 text-center text-xs text-muted-foreground">
               {t.inspector.pickerLoading}
@@ -794,12 +882,68 @@ function AssetPickerDialog({
               ))}
             </div>
           )}
-        </div>
+          {dragActive && (
+            <div
+              className="pointer-events-none absolute inset-0 z-10 animate-in fade-in-0 duration-200"
+              aria-hidden
+            >
+              <div className="absolute inset-0 bg-brand/5" />
+              <div className="absolute inset-1 rounded-[8px] border border-dashed border-brand/40" />
+              <div className="absolute inset-x-0 bottom-4 flex justify-center">
+                <div className="flex items-center gap-2 rounded-[6px] border border-border bg-card px-3 py-1.5 text-[12px] font-medium shadow-floating">
+                  <ArrowDownToLine className="size-3.5 text-brand" />
+                  <span>{t.asset.dropToUpload}</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </section>
       </DialogContent>
     </Dialog>
   );
 }
 
+function hasFiles(e: React.DragEvent): boolean {
+  const types = e.dataTransfer?.types;
+  if (!types) return false;
+  for (let i = 0; i < types.length; i++) {
+    if (types[i] === 'Files') return true;
+  }
+  return false;
+}
+
+function AgentWatchingBadge() {
+  const t = useLocale();
+  const connected = useAgentSocketConnected();
+  return (
+    <TooltipProvider delayDuration={200}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            className="flex shrink-0 cursor-help items-center gap-1.5 rounded-[3px] border border-hairline bg-card px-1.5 py-px text-[10.5px] text-foreground/85 outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+          >
+            <span aria-hidden className="relative flex size-1.5 items-center justify-center">
+              {connected ? (
+                <>
+                  <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-500 opacity-60" />
+                  <span className="relative inline-flex size-1.5 rounded-full bg-emerald-500" />
+                </>
+              ) : (
+                <span className="relative inline-flex size-1.5 rounded-full bg-rose-500" />
+              )}
+            </span>
+            {connected ? t.inspector.agentWatching : t.inspector.agentNotWatching}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" align="end" className="max-w-[260px] leading-relaxed">
+          {connected ? t.inspector.agentWatchingTooltip : t.inspector.agentNotWatchingTooltip}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
 function CommentsSection({
   selected,
   onAdd,
@@ -824,7 +968,7 @@ function CommentsSection({
   };
 
   return (
-    <Section title={t.inspector.noteForAgent}>
+    <Section title={t.inspector.leaveComment}>
       <div className="flex flex-col gap-2">
         <div className="comment-cue rounded-[6px]">
           <Textarea
@@ -836,16 +980,16 @@ function CommentsSection({
                 submit();
               }
             }}
-            placeholder={t.inspector.noteAgentPlaceholder}
+            placeholder={t.inspector.commentPlaceholder}
             className="min-h-16 resize-none text-[12px]"
           />
         </div>
         <div className="flex items-center justify-between gap-2">
           <span className="font-mono text-[10.5px] text-muted-foreground/70">
-            {t.inspector.noteShortcutHint}
+            {t.inspector.commentShortcutHint}
           </span>
           <Button size="sm" variant="brand" disabled={submitting || !draft.trim()} onClick={submit}>
-            {t.inspector.addNote}
+            {t.inspector.addComment}
           </Button>
         </div>
       </div>

package/src/app/components/inspector/inspector-provider.tsx

@@ -15,7 +15,7 @@ import { Button } from '@/components/ui/button';
 import { type SlideComment, useComments } from '@/lib/inspector/use-comments';
 import { type Edit, type EditOp, type EditResult, useEditor } from '@/lib/inspector/use-editor';
 import { useLocale } from '@/lib/use-locale';
-import { ImageCropDialog } from './image-crop-dialog';
+import { ImageCropDialog, type ImageCropRect } from './image-crop-dialog';
 
 export type SelectedTarget = {
   line: number;
@@ -101,6 +101,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     targetHeight: number;
     initialFit: 'cover' | 'contain';
     initialPosition: { x: number; y: number };
+    initialRect: ImageCropRect | null;
   } | null>(null);
   const t = useLocale();
 
@@ -558,6 +559,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       targetHeight: anchor.offsetHeight || anchor.getBoundingClientRect().height,
       initialFit: cs.objectFit === 'contain' ? 'contain' : 'cover',
       initialPosition: parseObjectPosition(cs.objectPosition),
+      initialRect: parseObjectViewBox(cs.getPropertyValue('object-view-box')),
     });
   }, []);
 
@@ -615,18 +617,30 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
           targetHeight={cropTarget.targetHeight}
           initialFit={cropTarget.initialFit}
           initialPosition={cropTarget.initialPosition}
+          initialRect={cropTarget.initialRect}
           onClose={() => setCropTarget(null)}
           onApply={(result) => {
             const { line, column, anchor } = cropTarget;
             if (anchor.isConnected) {
-              bufferOps(line, column, anchor, [
+              const ops: EditOp[] = [
                 { kind: 'set-style', key: 'objectFit', value: result.fit },
-                {
+                { kind: 'set-style', key: 'objectPosition', value: '50% 50%' },
+              ];
+              if (result.fit === 'cover') {
+                const { x, y, width, height } = result.rect;
+                const top = round2(y);
+                const left = round2(x);
+                const right = round2(100 - x - width);
+                const bottom = round2(100 - y - height);
+                ops.push({
                   kind: 'set-style',
-                  key: 'objectPosition',
-                  value: `${round2(result.x)}% ${round2(result.y)}%`,
-                },
-              ]);
+                  key: 'objectViewBox',
+                  value: `inset(${top}% ${right}% ${bottom}% ${left}%)`,
+                });
+              } else {
+                ops.push({ kind: 'set-style', key: 'objectViewBox', value: null });
+              }
+              bufferOps(line, column, anchor, ops);
             }
             setCropTarget(null);
           }}
@@ -640,6 +654,45 @@ function round2(n: number): number {
   return Math.round(n * 100) / 100;
 }
 
+function parseObjectViewBox(value: string): ImageCropRect | null {
+  const v = value?.trim();
+  if (!v || v === 'none') return null;
+  const m = v.match(/^inset\(([^)]+)\)$/);
+  if (!m?.[1]) return null;
+  const nums = m[1]
+    .trim()
+    .split(/\s+/)
+    .map((p) => {
+      const n = p.match(/^(-?\d+(?:\.\d+)?)%$/);
+      return n?.[1] ? Number(n[1]) : null;
+    });
+  if (nums.some((n) => n === null)) return null;
+  let top: number, right: number, bottom: number, left: number;
+  if (nums.length === 1) {
+    top = right = bottom = left = nums[0] as number;
+  } else if (nums.length === 2) {
+    top = bottom = nums[0] as number;
+    right = left = nums[1] as number;
+  } else if (nums.length === 3) {
+    top = nums[0] as number;
+    right = left = nums[1] as number;
+    bottom = nums[2] as number;
+  } else if (nums.length === 4) {
+    top = nums[0] as number;
+    right = nums[1] as number;
+    bottom = nums[2] as number;
+    left = nums[3] as number;
+  } else {
+    return null;
+  }
+  const x = left;
+  const y = top;
+  const width = 100 - left - right;
+  const height = 100 - top - bottom;
+  if (width <= 0 || height <= 0) return null;
+  return { x, y, width, height };
+}
+
 function parseObjectPosition(value: string): { x: number; y: number } {
   const parts = value.trim().split(/\s+/);
   const xRaw = parts[0] ?? '50%';