@bycrux/editor 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "private": false,
   "type": "module",
   "exports": {

package/src/carousel/AddElementMenu.tsx

@@ -122,14 +122,14 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
 
   return (
     <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-2">
+      <div className="grid grid-cols-2 gap-2">
         {adapter.generateImage && (
           <Button
             size="sm"
             variant="outline"
             disabled={disabled}
             onClick={() => { setShowPrompt(p => !p); setGenError(null) }}
-            className="text-xs"
+            className="text-xs w-full justify-center whitespace-nowrap"
           >
             + AI Image
           </Button>
@@ -139,7 +139,7 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
           variant="outline"
           disabled={disabled}
           onClick={() => fileInputRef.current?.click()}
-          className="text-xs"
+          className="text-xs w-full justify-center whitespace-nowrap"
         >
           + Upload Image
         </Button>
@@ -156,7 +156,7 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
             variant="outline"
             disabled={disabled || addingText}
             onClick={handleAddText}
-            className="text-xs"
+            className="text-xs w-full justify-center whitespace-nowrap"
           >
             {addingText ? 'Adding…' : '+ Text'}
           </Button>
@@ -166,7 +166,7 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
           variant="outline"
           disabled={disabled}
           onClick={() => setShowOverlayPicker(true)}
-          className="text-xs"
+          className="text-xs w-full justify-center whitespace-nowrap"
         >
           + Overlay
         </Button>

package/src/carousel/CarouselEditor.tsx

@@ -70,7 +70,7 @@ function SlideGrid({
   }
 
   return (
-    <div className="w-56 flex-shrink-0 flex flex-col border-r border-[var(--editor-border)] bg-[var(--editor-bg)] overflow-y-auto">
+    <div className="w-56 flex-shrink-0 flex flex-col border-r border-[var(--editor-border)] bg-[var(--editor-bg)] overflow-y-auto min-h-0 h-full">
       <div className="px-3 py-2 border-b border-[var(--editor-border)]">
         <span className="text-xs font-semibold text-[var(--editor-text)]/60 uppercase tracking-wider">Slides</span>
       </div>
@@ -365,10 +365,11 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
 
   return (
     <div ref={containerRef} className="flex flex-col h-full overflow-y-auto bg-[var(--editor-bg)]">
-      {/* TOP: slide rail | canvas | editing panel (right). Given a generous
-          viewport-relative height so the slide renders large; the project-media
-          region flows beneath and the whole editor scrolls vertically. */}
-      <div className="flex flex-shrink-0 min-h-[62vh] overflow-hidden">
+      {/* TOP: slide rail | canvas | editing panel (right). Fixed viewport-relative
+          height with min-h-0 so each of the three columns establishes its own
+          independent scroll context; the project-media region flows beneath and
+          the whole editor scrolls vertically. */}
+      <div className="flex flex-shrink-0 h-[78vh] min-h-0 overflow-hidden">
       <SlideGrid
         project={project}
         slides={slides}
@@ -382,40 +383,49 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
         compileOverlay={(t) => adapter.compileOverlay(t)}
       />
 
-      <div ref={canvasContainerRef} className="relative flex-1 flex flex-col items-center justify-center gap-4 overflow-hidden p-4">
-        <button
-          onClick={handleRefresh}
-          disabled={refreshing}
-          className={`absolute top-3 left-3 z-30 flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
-            refreshState === 'err'
-              ? 'text-red-300 border-red-500/40 bg-red-950/60 hover:bg-red-900/70'
-              : 'text-[var(--editor-text)] border-[var(--editor-border)] bg-[var(--editor-surface)]/80 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)]'
-          }`}
-          title={refreshState === 'err' ? 'Refresh failed — check connection' : 'Refresh project'}
-        >
-          {refreshState === 'err' ? <AlertCircle size={18} /> : <RefreshCw size={18} className={refreshing ? 'animate-spin' : ''} />}
-          <span className="text-xs font-medium">Refresh</span>
-        </button>
-
-        <div className="absolute top-3 right-3 z-30 flex items-center gap-2">
-          {slots?.toolbarActions}
+      {/* CANVAS COLUMN: a pinned toolbar row on top, then the independently
+          scrolling slide-rendering area below it. */}
+      <div className="relative flex-1 flex flex-col min-h-0 overflow-hidden">
+        {/* TOOLBAR ROW: Refresh on the left; host toolbar actions + Render on the
+            right. Pinned (shrink-0) above the scrolling canvas area. */}
+        <div className="flex-shrink-0 flex items-center justify-between gap-2 px-4 py-3 border-b border-[var(--editor-border)]">
           <button
-            onClick={handleRender}
-            disabled={rendering || project.status === 'pending' || slides.length === 0}
-            className="flex items-center gap-2 px-3 py-2 rounded-md border border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-            title={
-              project.status === 'pending'
-                ? 'Wait for the agent to finish before rendering'
-                : slides.length === 0
-                ? 'Add slides before rendering'
-                : 'Render all slides as PNGs'
-            }
+            onClick={handleRefresh}
+            disabled={refreshing}
+            className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
+              refreshState === 'err'
+                ? 'text-red-300 border-red-500/40 bg-red-950/60 hover:bg-red-900/70'
+                : 'text-[var(--editor-text)] border-[var(--editor-border)] bg-[var(--editor-surface)]/80 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)]'
+            }`}
+            title={refreshState === 'err' ? 'Refresh failed — check connection' : 'Refresh project'}
           >
-            <Download size={18} />
-            <span className="text-xs font-medium">{rendering ? 'Starting…' : 'Render'}</span>
+            {refreshState === 'err' ? <AlertCircle size={18} /> : <RefreshCw size={18} className={refreshing ? 'animate-spin' : ''} />}
+            <span className="text-xs font-medium">Refresh</span>
           </button>
+
+          <div className="flex items-center gap-2">
+            {slots?.toolbarActions}
+            <button
+              onClick={handleRender}
+              disabled={rendering || project.status === 'pending' || slides.length === 0}
+              className="flex items-center gap-2 px-3 py-2 rounded-md border border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              title={
+                project.status === 'pending'
+                  ? 'Wait for the agent to finish before rendering'
+                  : slides.length === 0
+                  ? 'Add slides before rendering'
+                  : 'Render all slides as PNGs'
+              }
+            >
+              <Download size={18} />
+              <span className="text-xs font-medium">{rendering ? 'Starting…' : 'Render'}</span>
+            </button>
+          </div>
         </div>
 
+        {/* SCROLL AREA: the slide viewport. ResizeObserver lives here so
+            canvasScale measures the slide-rendering area, not the toolbar. */}
+        <div ref={canvasContainerRef} className="relative flex-1 flex flex-col items-center justify-center gap-4 overflow-y-auto min-h-0 p-4">
         {project.status === 'pending' ? (
           <div className="flex flex-col items-center gap-6 text-center max-w-lg w-full">
             {slots?.pendingStatus ?? (
@@ -493,10 +503,11 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           </div>
         )}
         </div>
+      </div>
 
         {/* RIGHT: the slide editor (add-element toolbar + property panel),
-            beside the canvas with its own vertical scroll. */}
-        <div className="w-[24rem] flex-shrink-0 border-l border-[var(--editor-border)] flex flex-col overflow-y-auto bg-[var(--editor-bg)]">
+            beside the canvas with its own independent vertical scroll. */}
+        <div className="w-[24rem] flex-shrink-0 border-l border-[var(--editor-border)] flex flex-col overflow-y-auto min-h-0 h-full bg-[var(--editor-bg)]">
           {selectedSlide && project.status !== 'pending' && (
             <div className="px-4 py-2 border-b border-[var(--editor-border)]">
               <AddElementMenu

package/src/carousel/SlidePropertyPanel.tsx

@@ -9,7 +9,7 @@ import type {
   GlobalOverlayProp,
   EditorAdapter,
 } from '../types'
-import { Button, cn } from '../ui'
+import { Button, cn, inspectorInputClass } from '../ui'
 import { TextFormattingToolbar } from '../text/TextFormattingToolbar'
 
 function parseNumber(v: string): number | null {
@@ -17,6 +17,13 @@ function parseNumber(v: string): number | null {
   return Number.isFinite(n) ? n : null
 }
 
+// Shared small muted label that sits just above an inspector control.
+const fieldLabelClass = 'text-[11px] uppercase tracking-wide text-[var(--editor-text)]/55'
+
+// Section header: SLIDE / OVERLAY / IMAGE.
+const sectionHeaderClass =
+  'text-xs font-semibold uppercase tracking-wider text-[var(--editor-text)]/70'
+
 interface Props {
   project: Project
   slide?: Slide
@@ -64,7 +71,7 @@ function HideToggle({
       title={isHidden ? 'Show in editor' : 'Hide from editor'}
       aria-label={isHidden ? 'Show in editor' : 'Hide from editor'}
       aria-pressed={isHidden}
-      className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] px-1"
+      className="flex h-7 w-7 items-center justify-center rounded text-[var(--editor-text)]/60 hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
     >
       {isHidden ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
     </button>
@@ -78,8 +85,8 @@ function numInput(
   opts?: { min?: number; max?: number; step?: number }
 ) {
   return (
-    <label className="flex flex-col gap-0.5">
-      <span className="text-xs text-[var(--editor-text)]/60">{label}</span>
+    <label className="flex flex-col gap-1">
+      <span className={fieldLabelClass}>{label}</span>
       <input
         type="number"
         value={value}
@@ -90,7 +97,7 @@ function numInput(
           const parsed = parseNumber(e.target.value)
           if (parsed !== null) onChange(parsed)
         }}
-        className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1 text-xs text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] w-full"
+        className={cn(inspectorInputClass, 'text-right')}
       />
     </label>
   )
@@ -109,36 +116,35 @@ function PropEditor({
 
   if (type === 'bool') {
     return (
-      <label className="flex items-center gap-2 cursor-pointer" title={description}>
+      <label className="flex cursor-pointer items-center gap-2" title={description}>
         <input
           type="checkbox"
           checked={Boolean(value)}
           onChange={e => onChange(e.target.checked)}
-          className="accent-[var(--editor-accent)]"
+          className="h-4 w-4 accent-[var(--editor-accent)]"
         />
-        <span className="text-xs text-[var(--editor-text)]">{name}</span>
+        <span className="text-sm text-[var(--editor-text)]">{name}</span>
       </label>
     )
   }
 
   if (type === 'color') {
     return (
-      <label className="flex flex-col gap-0.5" title={description}>
-        <span className="text-xs text-[var(--editor-text)]/60">{name}</span>
-        <input
-          type="color"
+      <div className="flex flex-col gap-1" title={description}>
+        <span className={fieldLabelClass}>{name}</span>
+        <SwatchInput
           value={String(value ?? '#000000')}
-          onChange={e => onChange(e.target.value)}
-          className="w-full h-7 bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded cursor-pointer"
+          onChange={v => onChange(v)}
+          ariaLabel={name}
         />
-      </label>
+      </div>
     )
   }
 
   if (type === 'int' || type === 'float') {
     return (
-      <label className="flex flex-col gap-0.5" title={description}>
-        <span className="text-xs text-[var(--editor-text)]/60">{name}</span>
+      <label className="flex flex-col gap-1" title={description}>
+        <span className={fieldLabelClass}>{name}</span>
         <input
           type="number"
           value={Number(value ?? 0)}
@@ -147,7 +153,7 @@ function PropEditor({
             const parsed = parseNumber(e.target.value)
             if (parsed !== null) onChange(parsed)
           }}
-          className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1 text-xs text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] w-full"
+          className={cn(inspectorInputClass, 'text-right')}
         />
       </label>
     )
@@ -155,18 +161,52 @@ function PropEditor({
 
   // string fallback
   return (
-    <label className="flex flex-col gap-0.5" title={description}>
-      <span className="text-xs text-[var(--editor-text)]/60">{name}</span>
+    <label className="flex flex-col gap-1" title={description}>
+      <span className={fieldLabelClass}>{name}</span>
       <input
         type="text"
         value={String(value ?? '')}
         onChange={e => onChange(e.target.value)}
-        className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1 text-xs text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] w-full"
+        className={inspectorInputClass}
       />
     </label>
   )
 }
 
+// Color control that actually reads as one: a filled rounded swatch (the live
+// value) sitting next to the hex string, the whole row clickable to open the
+// native color picker. The transparent <input type="color"> overlays the
+// swatch so the OS picker anchors there.
+function SwatchInput({
+  value,
+  onChange,
+  ariaLabel,
+}: {
+  value: string
+  onChange: (v: string) => void
+  ariaLabel: string
+}) {
+  return (
+    <div className="flex items-center gap-2.5">
+      <label className="relative h-7 w-7 shrink-0 cursor-pointer">
+        <span
+          className="block h-full w-full rounded-md border border-[var(--editor-border)] shadow-sm"
+          style={{ backgroundColor: value }}
+          aria-hidden
+        />
+        <input
+          type="color"
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+          aria-label={ariaLabel}
+        />
+      </label>
+      <span className="font-mono text-sm uppercase text-[var(--editor-text)]/80">{value}</span>
+    </div>
+  )
+}
+
 export default function SlidePropertyPanel({
   project,
   slide,
@@ -222,48 +262,45 @@ export default function SlidePropertyPanel({
 
   return (
     <div className={cn('w-80 flex-shrink-0 border-l border-[var(--editor-border)] flex flex-col overflow-y-auto bg-[var(--editor-bg)]', className)}>
-      {/* Slide header */}
-      <div className="px-4 py-3 border-b border-[var(--editor-border)]">
-        <div className="text-xs font-semibold text-[var(--editor-text)]/60 uppercase tracking-wider mb-2">Slide</div>
-        <div className="flex flex-col gap-2">
-          <label className="flex flex-col gap-0.5">
-            <span className="text-xs text-[var(--editor-text)]/60">Background color</span>
-            <input
-              type="color"
-              value={slide.base_color || '#ffffff'}
-              onChange={e => onSlideChange({ base_color: e.target.value })}
-              className="w-full h-7 bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded cursor-pointer"
-            />
-          </label>
-          <div className="flex gap-2">
-            <Button
-              size="sm"
-              variant="outline"
-              className="flex-1 text-xs"
-              onClick={() => onDuplicateSlide(slide.id)}
-            >
-              Duplicate
-            </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              className="flex-1 text-xs text-red-400 hover:text-red-300"
-              onClick={() => onDeleteSlide(slide.id)}
-            >
-              Delete
-            </Button>
-          </div>
+      {/* Slide section */}
+      <div className="flex flex-col gap-4 p-4">
+        <div className={sectionHeaderClass}>Slide</div>
+        <div className="flex flex-col gap-1">
+          <span className={fieldLabelClass}>Background color</span>
+          <SwatchInput
+            value={slide.base_color || '#ffffff'}
+            onChange={v => onSlideChange({ base_color: v })}
+            ariaLabel="Background color"
+          />
+        </div>
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="secondary"
+            className="flex-1"
+            onClick={() => onDuplicateSlide(slide.id)}
+          >
+            Duplicate
+          </Button>
+          <Button
+            size="sm"
+            variant="danger"
+            className="flex-1"
+            onClick={() => onDeleteSlide(slide.id)}
+          >
+            Delete
+          </Button>
         </div>
       </div>
 
       {/* Element section */}
       {element && (
-        <div className="px-4 py-3 flex flex-col gap-3">
+        <div className="flex flex-col gap-4 border-t border-[var(--editor-border)] p-4">
           <div className="flex items-center justify-between">
-            <span className="text-xs font-semibold text-[var(--editor-text)]/60 uppercase tracking-wider">
+            <span className={sectionHeaderClass}>
               {element.type === 'image' ? 'Image' : 'Overlay'}
             </span>
-            <div className="flex items-center gap-1">
+            <div className="flex items-center gap-0.5">
               <HideToggle
                 elementId={element.id}
                 isHidden={hiddenElementIds?.includes(element.id) ?? false}
@@ -271,14 +308,14 @@ export default function SlidePropertyPanel({
               />
               <button
                 onClick={() => onReorderElement(slide.id, element.id, 'forward')}
-                className="text-xs text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] px-1"
+                className="flex h-7 w-7 items-center justify-center rounded text-[var(--editor-text)]/60 hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
                 title="Bring forward"
               >
                 ↑
               </button>
               <button
                 onClick={() => onReorderElement(slide.id, element.id, 'backward')}
-                className="text-xs text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] px-1"
+                className="flex h-7 w-7 items-center justify-center rounded text-[var(--editor-text)]/60 hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
                 title="Send backward"
               >
                 ↓
@@ -287,27 +324,29 @@ export default function SlidePropertyPanel({
           </div>
 
           {/* Transform */}
-          <div className="grid grid-cols-2 gap-2">
-            {numInput('X', element.x, v => onElementChange({ x: v }))}
-            {numInput('Y', element.y, v => onElementChange({ y: v }))}
-            {numInput('W', element.w, v => onElementChange({ w: v }), { min: 1 })}
-            {numInput('H', element.h, v => onElementChange({ h: v }), { min: 1 })}
+          <div className="flex flex-col gap-3">
+            <div className="grid grid-cols-2 gap-3">
+              {numInput('X', element.x, v => onElementChange({ x: v }))}
+              {numInput('Y', element.y, v => onElementChange({ y: v }))}
+              {numInput('W', element.w, v => onElementChange({ w: v }), { min: 1 })}
+              {numInput('H', element.h, v => onElementChange({ h: v }), { min: 1 })}
+            </div>
             {numInput('Rotation', element.rotation ?? 0, v => onElementChange({ rotation: v }), { min: -360, max: 360 })}
           </div>
 
           {/* Image-specific */}
           {element.type === 'image' && (
-            <div className="flex flex-col gap-1.5">
-              <div className="flex flex-col gap-0.5">
-                <span className="text-xs text-[var(--editor-text)]/60">Source</span>
-                <span className="text-xs text-[var(--editor-text)] truncate" title={element.src}>
+            <div className="flex flex-col gap-2">
+              <div className="flex flex-col gap-1">
+                <span className={fieldLabelClass}>Source</span>
+                <span className="truncate text-sm text-[var(--editor-text)]" title={element.src}>
                   {element.src.split('/').pop() || element.src}
                 </span>
               </div>
               <Button
                 size="sm"
-                variant="outline"
-                className="text-xs flex items-center gap-1.5"
+                variant="secondary"
+                className="flex items-center gap-1.5"
                 disabled={(element.rotation ?? 0) !== 0 || !onEnterCrop}
                 title={
                   (element.rotation ?? 0) !== 0
@@ -324,7 +363,7 @@ export default function SlidePropertyPanel({
 
           {/* Overlay-specific */}
           {overlayEl && (
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-4">
               {/* Rich-text formatting (bold/italic/case/color/align + font family
                   & size pickers) for overlays exposing the standard text contract. */}
               {updateOverlayProp && (
@@ -335,17 +374,17 @@ export default function SlidePropertyPanel({
                 />
               )}
 
-              <div className="grid grid-cols-2 gap-2">
+              <div className="grid grid-cols-2 gap-3">
                 {numInput('Frame', overlayEl.frame, v => onElementChange({ frame: v }), { min: 0 })}
               </div>
 
               {schemasLoading && (
-                <div className="text-xs text-[var(--editor-text)]/60">Loading overlay props…</div>
+                <div className="text-xs text-[var(--editor-text)]/55">Loading overlay props…</div>
               )}
 
               {!schemasLoading && overlaySchema && overlaySchema.props.length > 0 && (
-                <div className="flex flex-col gap-2">
-                  <span className="text-xs text-[var(--editor-text)]/60 font-medium">Props</span>
+                <div className="flex flex-col gap-3">
+                  <span className={fieldLabelClass}>Props</span>
                   {overlaySchema.props.map(prop => (
                     <PropEditor
                       key={prop.name}
@@ -367,19 +406,19 @@ export default function SlidePropertyPanel({
           )}
 
           {/* Element actions */}
-          <div className="flex gap-2 pt-1">
+          <div className="flex gap-2">
             <Button
               size="sm"
-              variant="outline"
-              className="flex-1 text-xs"
+              variant="secondary"
+              className="flex-1"
               onClick={() => onDuplicateElement(slide.id, element.id)}
             >
               Duplicate
             </Button>
             <Button
               size="sm"
-              variant="outline"
-              className="flex-1 text-xs text-red-400 hover:text-red-300"
+              variant="danger"
+              className="flex-1"
               onClick={() => onDeleteElement(slide.id, element.id)}
             >
               Delete

package/src/text/FontPicker.tsx

@@ -95,7 +95,7 @@ export function FontFamilyPicker({ value, onChange, disabled, className, buttonC
         onClick={() => setOpen((o) => !o)}
         className={
           buttonClassName ??
-          'flex w-full items-center gap-1 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2 py-1 text-sm text-[var(--editor-text)] hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] disabled:opacity-50'
+          'flex h-8 w-full items-center gap-1 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2.5 text-sm text-[var(--editor-text)] hover:border-[var(--editor-accent)] focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] disabled:opacity-50'
         }
         style={displayStyle}
         aria-haspopup="listbox"
@@ -210,7 +210,7 @@ export function FontSizePicker({ value, onChange, disabled, min = 8, max = 9999,
       }}
       className={
         className ??
-        'w-14 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2 py-1 text-sm text-[var(--editor-text)] focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] disabled:opacity-50'
+        'h-8 w-14 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2.5 text-sm text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] focus:ring-1 focus:ring-[var(--editor-accent)] disabled:opacity-50'
       }
       aria-label="Font size"
     />

package/src/text/TextFormattingToolbar.tsx

@@ -96,15 +96,16 @@ export function TextFormattingToolbar({
   const rawColor = readPropAsString(element, 'color')
   const colorValue = HEX_PATTERN.test(rawColor) && rawColor.length === 7 ? rawColor : '#111111'
 
-  // Themed button styles: surface base, accent-tinted hover/active, accent ring.
-  const toolbarBtnBase = 'flex items-center justify-center rounded px-1.5 py-1 text-sm transition-colors hover:bg-[var(--editor-accent)]/20 focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)]'
-  const toolbarBtnActive = 'bg-[var(--editor-accent)]/20 text-[var(--editor-text)]'
-  const toolbarBtnInactive = 'text-[var(--editor-text)]/60'
-
-  // Divider visibility helpers
+  // Themed toggle styles: consistent square buttons. Active = solid accent fill
+  // with accent-foreground text; inactive = themed surface + border that hovers
+  // toward the surface tone. One look for B / I / case / align across the bar.
+  const toolbarBtnBase = 'flex h-7 min-w-[1.75rem] items-center justify-center rounded-md border px-1.5 text-sm transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)]'
+  const toolbarBtnActive = 'border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)]'
+  const toolbarBtnInactive = 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)]'
+
+  // Segment visibility helpers — group toggles vs size/font vs alignment.
   const hasLeftGroup = supported.has('fontWeight') || supported.has('fontStyle') || supported.has('textTransform') || supported.has('color')
   const hasMidGroup = supported.has('fontSize') || supported.has('fontFamily')
-  const hasRightGroup = supported.has('textAlign')
 
   return (
     <div
@@ -116,88 +117,91 @@ export function TextFormattingToolbar({
       <div
         role="toolbar"
         aria-label="Text formatting"
-        className="flex items-center gap-0.5 p-1.5"
+        className="flex flex-wrap items-center gap-x-3 gap-y-2 p-2"
       >
-        {supported.has('fontWeight') && (
-          <button
-            type="button"
-            aria-label="Bold"
-            aria-pressed={boldActive}
-            onClick={handleBoldClick}
-            className={`${toolbarBtnBase} ${boldActive ? toolbarBtnActive : toolbarBtnInactive}`}
-          >
-            <Bold className="h-3.5 w-3.5" />
-          </button>
-        )}
-
-        {supported.has('fontStyle') && (
-          <button
-            type="button"
-            aria-label="Italic"
-            aria-pressed={italicActive}
-            onClick={handleItalicClick}
-            className={`${toolbarBtnBase} ${italicActive ? toolbarBtnActive : toolbarBtnInactive}`}
-          >
-            <Italic className="h-3.5 w-3.5" />
-          </button>
-        )}
-
-        {supported.has('textTransform') && (
-          <button
-            type="button"
-            aria-label={`Text case (currently ${textTransformDisplay})`}
-            onClick={handleCaseClick}
-            className={`${toolbarBtnBase} min-w-[2rem] font-mono text-xs ${caseActive ? toolbarBtnActive : toolbarBtnInactive}`}
-          >
-            {caseLabel(props.textTransform)}
-          </button>
-        )}
-
-        {supported.has('color') && (
-          <label
-            className={`${toolbarBtnBase} ${toolbarBtnInactive} relative cursor-pointer`}
-            title="Text color"
-          >
-            <span
-              className="block h-3.5 w-3.5 rounded-sm border border-[var(--editor-border)]"
-              style={{ backgroundColor: colorValue }}
-              aria-hidden
-            />
-            <input
-              type="color"
-              value={colorValue}
-              onChange={(e) => handleColorChange(e.target.value)}
-              className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-              aria-label="Text color"
-            />
-          </label>
-        )}
-
-        {hasLeftGroup && hasMidGroup && (
-          <div className="mx-1 h-4 w-px bg-[var(--editor-border)]" aria-hidden />
-        )}
-
-        {supported.has('fontSize') && (
-          <FontSizePicker
-            value={fontSizeValue}
-            onChange={handleFontSizeChange}
-          />
-        )}
-
-        {supported.has('fontFamily') && (
-          <FontFamilyPicker
-            value={fontFamilyValue}
-            onChange={handleFontFamilyChange}
-            className="w-32"
-          />
+        {/* Segment 1: B / I / case / color toggles */}
+        {hasLeftGroup && (
+          <div className="flex items-center gap-1">
+            {supported.has('fontWeight') && (
+              <button
+                type="button"
+                aria-label="Bold"
+                aria-pressed={boldActive}
+                onClick={handleBoldClick}
+                className={`${toolbarBtnBase} ${boldActive ? toolbarBtnActive : toolbarBtnInactive}`}
+              >
+                <Bold className="h-3.5 w-3.5" />
+              </button>
+            )}
+
+            {supported.has('fontStyle') && (
+              <button
+                type="button"
+                aria-label="Italic"
+                aria-pressed={italicActive}
+                onClick={handleItalicClick}
+                className={`${toolbarBtnBase} ${italicActive ? toolbarBtnActive : toolbarBtnInactive}`}
+              >
+                <Italic className="h-3.5 w-3.5" />
+              </button>
+            )}
+
+            {supported.has('textTransform') && (
+              <button
+                type="button"
+                aria-label={`Text case (currently ${textTransformDisplay})`}
+                onClick={handleCaseClick}
+                className={`${toolbarBtnBase} font-mono text-xs ${caseActive ? toolbarBtnActive : toolbarBtnInactive}`}
+              >
+                {caseLabel(props.textTransform)}
+              </button>
+            )}
+
+            {supported.has('color') && (
+              <label
+                className={`${toolbarBtnBase} ${toolbarBtnInactive} relative cursor-pointer`}
+                title="Text color"
+              >
+                <span
+                  className="block h-4 w-4 rounded-sm border border-[var(--editor-border)]"
+                  style={{ backgroundColor: colorValue }}
+                  aria-hidden
+                />
+                <input
+                  type="color"
+                  value={colorValue}
+                  onChange={(e) => handleColorChange(e.target.value)}
+                  className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                  aria-label="Text color"
+                />
+              </label>
+            )}
+          </div>
         )}
 
-        {hasMidGroup && hasRightGroup && (
-          <div className="mx-1 h-4 w-px bg-[var(--editor-border)]" aria-hidden />
+        {/* Segment 2: size + font */}
+        {hasMidGroup && (
+          <div className="flex items-center gap-1.5">
+            {supported.has('fontSize') && (
+              <FontSizePicker
+                value={fontSizeValue}
+                onChange={handleFontSizeChange}
+              />
+            )}
+
+            {supported.has('fontFamily') && (
+              <FontFamilyPicker
+                value={fontFamilyValue}
+                onChange={handleFontFamilyChange}
+                className="w-32"
+              />
+            )}
+          </div>
         )}
 
+        {/* Segment 3: alignment */}
         {supported.has('textAlign') && (
-          <div role="radiogroup" aria-label="Text alignment" className="flex items-center gap-0.5">
+          <div role="radiogroup" aria-label="Text alignment" className="flex items-center gap-1">
             {(
               [
                 { value: 'left', Icon: AlignLeft, label: 'Align left' },
@@ -224,23 +228,20 @@ export function TextFormattingToolbar({
         )}
 
         {!hasAnyControlProp && (
-          <span className="px-2 py-1 text-xs text-[var(--editor-text)]/60">
+          <span className="px-1 py-1 text-xs text-[var(--editor-text)]/55">
             Edit via property panel
           </span>
         )}
 
         {onDelete && (
-          <>
-            {hasAnyControlProp && <div className="mx-1 h-4 w-px bg-[var(--editor-border)]" aria-hidden />}
-            <button
-              type="button"
-              aria-label="Delete text overlay"
-              onClick={onDelete}
-              className={`${toolbarBtnBase} text-[var(--editor-text)]/60 hover:bg-red-900/30 hover:text-red-400`}
-            >
-              <Trash2 className="h-3.5 w-3.5" />
-            </button>
-          </>
+          <button
+            type="button"
+            aria-label="Delete text overlay"
+            onClick={onDelete}
+            className={`${toolbarBtnBase} border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/60 hover:border-red-500/50 hover:bg-red-900/30 hover:text-red-400`}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </button>
         )}
       </div>
     </div>

package/src/ui/index.ts

@@ -4,7 +4,7 @@
 export { cn } from './utils'
 export { Button } from './button'
 export type { ButtonProps } from './button'
-export { Input } from './input'
+export { Input, inspectorInputClass } from './input'
 export type { InputProps } from './input'
 export { Label } from './label'
 export { Select } from './select'

package/src/ui/input.tsx

@@ -1,5 +1,11 @@
 import { cn } from './utils'
 
+// Shared inspector-input style. One consistent height/border/focus treatment
+// for every text/number/select control in the editor chrome so the property
+// panel reads as a single coherent surface. Reuse via `cn(inspectorInputClass, …)`.
+export const inspectorInputClass =
+  'h-8 w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2.5 py-1.5 text-sm text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] focus:ring-1 focus:ring-[var(--editor-accent)]'
+
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 
 export function Input({ className, ...props }: InputProps) {