@bycrux/editor 0.4.3 → 0.4.5

package/package.json

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

package/src/carousel/CarouselEditor.tsx

@@ -365,10 +365,10 @@ 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. Given a generous viewport-relative height so
-          the slide renders large; the below-panels region flows beneath and the
-          whole editor scrolls vertically. */}
-      <div className="flex flex-shrink-0 min-h-[80vh] overflow-hidden">
+      {/* 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">
       <SlideGrid
         project={project}
         slides={slides}
@@ -493,50 +493,50 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           </div>
         )}
         </div>
-      </div>
 
-      {/* BELOW: the slide editor, stacked vertically full-width under the canvas.
-          Flows beneath the tall canvas region and scrolls with the page (the root
-          is overflow-y-auto). Order: add-element toolbar → property panel →
-          project media (assets) at the very bottom. */}
-      <div className="flex-shrink-0 border-t border-[var(--editor-border)] bg-[var(--editor-bg)] flex flex-col">
-        {selectedSlide && project.status !== 'pending' && (
-          <div className="px-4 py-2 border-b border-[var(--editor-border)] bg-[var(--editor-bg)]">
-            <AddElementMenu
-              project={project}
-              selectedSlideId={selectedSlideId}
-              adapter={adapter}
-              onAddElement={handleAddElement}
-            />
-          </div>
-        )}
-        <SlidePropertyPanel
-          project={project}
-          slide={selectedSlide}
-          element={selectedElement}
-          adapter={adapter}
-          onSlideChange={handleSlideChange}
-          onElementChange={handlePanelElementChange}
-          onDeleteSlide={handleDeleteSlide}
-          onDuplicateSlide={handleDuplicateSlide}
-          onDeleteElement={handleDeleteElement}
-          onDuplicateElement={handleDuplicateElement}
-          onReorderElement={handleReorderElement}
-          onEnterCrop={(_slideId, elementId) => { setSelectedElementId(elementId); setCropElementId(elementId) }}
-          updateOverlayProp={state.updateOverlayProp}
-          hiddenElementIds={hiddenElementIds}
-          onToggleElementVisibility={onToggleElementVisibility}
-          // Stacked full-width here (drop the default w-80 sidebar + left border).
-          className="w-full border-l-0 border-b border-[var(--editor-border)]"
-        />
-        {slots?.assetsPanel && (
-          // Project media — at the very bottom, full width.
-          <div className="w-full flex flex-col">
-            {slots.assetsPanel}
-          </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)]">
+          {selectedSlide && project.status !== 'pending' && (
+            <div className="px-4 py-2 border-b border-[var(--editor-border)]">
+              <AddElementMenu
+                project={project}
+                selectedSlideId={selectedSlideId}
+                adapter={adapter}
+                onAddElement={handleAddElement}
+              />
+            </div>
+          )}
+          <SlidePropertyPanel
+            project={project}
+            slide={selectedSlide}
+            element={selectedElement}
+            adapter={adapter}
+            onSlideChange={handleSlideChange}
+            onElementChange={handlePanelElementChange}
+            onDeleteSlide={handleDeleteSlide}
+            onDuplicateSlide={handleDuplicateSlide}
+            onDeleteElement={handleDeleteElement}
+            onDuplicateElement={handleDuplicateElement}
+            onReorderElement={handleReorderElement}
+            onEnterCrop={(_slideId, elementId) => { setSelectedElementId(elementId); setCropElementId(elementId) }}
+            updateOverlayProp={state.updateOverlayProp}
+            hiddenElementIds={hiddenElementIds}
+            onToggleElementVisibility={onToggleElementVisibility}
+            // Fills the right column (drop the default w-80 width + left border).
+            className="w-full border-l-0"
+          />
+        </div>
       </div>
 
+      {/* BELOW: Project media, full width at the bottom. Flows beneath the top
+          region and scrolls with the page (the root is overflow-y-auto). */}
+      {slots?.assetsPanel && (
+        <div className="flex-shrink-0 border-t border-[var(--editor-border)] w-full flex flex-col">
+          {slots.assetsPanel}
+        </div>
+      )}
+
       {renderOpen && (
         <CarouselRenderModal
           projectId={project.id}

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/carousel/__tests__/CarouselEditor.test.tsx

@@ -97,9 +97,9 @@ describe('CarouselEditor — editor-core integration', () => {
       />,
     )
     await waitFor(() => getByTestId('assets'))
-    // The assets slot lives in the below-canvas region, stacked full-width at the
-    // very bottom (no longer capped to a 320px sidebar) so the host panel spans
-    // the editor width beneath the property panel.
+    // The assets slot lives in the below-canvas region, full-width at the very
+    // bottom (no longer capped to a 320px sidebar) so the host panel spans the
+    // editor width beneath the top canvas/editing region.
     const wrapper = getByTestId('assets').parentElement
     expect(wrapper?.className).toContain('w-full')
     expect(wrapper?.className).not.toContain('w-80')

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) {