@jimmy_harika/websitekit 0.5.3 → 0.5.5

package/src/editor/SectionsPanel.tsx

@@ -14,21 +14,35 @@ import { useEditorUi } from "./ui-context";
 import { useDraggable, useDropTarget } from "./dnd";
 import { cn } from "../lib/cn";
 
-export function SectionsPanel({ catalog }: { catalog: Catalog }) {
+export function SectionsPanel({
+  catalog,
+  embedded,
+}: {
+  catalog: Catalog;
+  /** Dock owns the title — only show the Add control. */
+  embedded?: boolean;
+}) {
   const sections = useBuilder((s) => s.doc.sections);
   const ui = useEditorUi();
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="flex items-center justify-between border-b border-border px-3 py-2.5">
-        <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-          Sections
-        </span>
+      <div
+        className={cn(
+          "flex items-center border-b border-border px-3 py-2.5",
+          embedded ? "justify-end" : "justify-between",
+        )}
+      >
+        {!embedded && (
+          <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            Sections
+          </span>
+        )}
         <button
           onClick={() => ui.openLibrary(sections.length)}
-          className="flex items-center gap-1 rounded-md bg-secondary px-2 py-1 text-xs font-medium text-secondary-foreground transition hover:opacity-90"
+          className="flex items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition hover:opacity-90"
         >
-          <Plus className="size-3.5" /> Add
+          <Plus className="size-3.5" /> Add block
         </button>
       </div>
       <div className="min-h-0 flex-1 overflow-auto p-2">
@@ -139,7 +153,7 @@ function SectionRow({
         <button
           title="Delete section"
           onClick={stop(() => remove(id))}
-          className="rounded p-0.5 text-muted-foreground hover:text-red-500"
+          className="rounded p-0.5 text-muted-foreground hover:text-destructive"
         >
           <Trash2 className="size-3.5" />
         </button>

package/src/editor/ThemePanel.tsx

@@ -53,7 +53,7 @@ export function ThemePanel() {
                 {[p.colors.bg, p.colors.text, p.colors.accent].map((c, i) => (
                   <span
                     key={i}
-                    className="size-4 rounded-full border border-black/10"
+                    className="size-4 rounded-full border border-border"
                     style={{ background: c }}
                   />
                 ))}

package/src/editor/Toolbar.tsx

@@ -1,14 +1,11 @@
 "use client";
 
-/** Editor header — glass-friendly surface, device switcher, undo/redo, publish. */
+/** Clean editor header: leading · devices · undo · preview · publish. */
 import type { ReactNode } from "react";
 import {
   ExternalLink,
-  LayoutGrid,
-  List,
   Monitor,
-  Palette,
-  PanelRight,
+  Plus,
   Redo2,
   Smartphone,
   Tablet,
@@ -27,30 +24,29 @@ const DEVICES: { id: Device; icon: typeof Monitor; label: string }[] = [
 export function Toolbar({
   onPublish,
   saving = "idle",
-  designOpen,
-  onToggleDesign,
-  hasTemplates,
+  designOpen: _designOpen,
+  onToggleDesign: _onToggleDesign,
+  hasTemplates: _hasTemplates,
   leading,
   viewUrl,
   floating,
-  inspectorOpen,
-  onToggleInspector,
-  sectionsOpen,
-  onToggleSections,
+  compact,
+  onAddBlock,
 }: {
   onPublish?: () => void;
   saving?: "idle" | "saving" | "saved";
-  designOpen: boolean;
-  onToggleDesign: () => void;
+  designOpen?: boolean;
+  onToggleDesign?: () => void;
   hasTemplates?: boolean;
   leading?: ReactNode;
   viewUrl?: string;
   floating?: boolean;
-  inspectorOpen?: boolean;
-  onToggleInspector?: () => void;
-  sectionsOpen?: boolean;
-  onToggleSections?: () => void;
+  compact?: boolean;
+  onAddBlock?: () => void;
 }) {
+  void _designOpen;
+  void _onToggleDesign;
+  void _hasTemplates;
   const ui = useEditorUi();
   const undo = useTemporal((s) => s.undo);
   const redo = useTemporal((s) => s.redo);
@@ -60,45 +56,18 @@ export function Toolbar({
   return (
     <header
       className={cn(
-        "relative z-40 flex h-12 shrink-0 items-center gap-1 px-2 text-foreground sm:px-3",
+        "relative z-40 flex h-12 shrink-0 items-center gap-2 px-2 text-foreground sm:px-3",
         floating
           ? "border-b border-border/40 bg-card/50 backdrop-blur-xl"
           : "border-b border-border bg-card",
       )}
     >
       {leading && (
-        <div className="flex min-w-0 items-center gap-1.5 pr-1.5 sm:border-r sm:border-border/40">
+        <div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
           {leading}
         </div>
       )}
-      <div className="flex items-center gap-0.5 pl-0.5">
-        {floating && onToggleSections && (
-          <ToolButton active={!!sectionsOpen} onClick={onToggleSections} title="Sections">
-            <List className="size-4" />
-            <span className="hidden text-xs lg:inline">Sections</span>
-          </ToolButton>
-        )}
-        <ToolButton active={designOpen} onClick={onToggleDesign} title="Design">
-          <Palette className="size-4" />
-          <span className="hidden text-xs lg:inline">Design</span>
-        </ToolButton>
-        {hasTemplates && (
-          <ToolButton onClick={() => ui.setTemplatesOpen(true)} title="Templates">
-            <LayoutGrid className="size-4" />
-            <span className="hidden text-xs lg:inline">Templates</span>
-          </ToolButton>
-        )}
-        {floating && onToggleInspector && (
-          <ToolButton
-            active={!!inspectorOpen}
-            onClick={onToggleInspector}
-            title="Inspector"
-          >
-            <PanelRight className="size-4" />
-            <span className="hidden text-xs lg:inline">Inspect</span>
-          </ToolButton>
-        )}
-      </div>
+      {!leading && <div className="flex-1" />}
 
       <div className="absolute left-1/2 flex -translate-x-1/2 items-center rounded-xl border border-border/50 bg-background/70 p-0.5 backdrop-blur-md">
         {DEVICES.map((d) => {
@@ -121,7 +90,16 @@ export function Toolbar({
         })}
       </div>
 
-      <div className="ml-auto flex items-center gap-0.5">
+      <div className="ml-auto flex shrink-0 items-center gap-0.5">
+        {onAddBlock && !compact && (
+          <button
+            type="button"
+            onClick={onAddBlock}
+            className="mr-1 hidden items-center gap-1 rounded-xl border border-border/50 px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-muted sm:inline-flex"
+          >
+            <Plus className="size-3.5" /> Add
+          </button>
+        )}
         <button
           onClick={() => undo()}
           disabled={!canUndo}
@@ -143,19 +121,19 @@ export function Toolbar({
             href={viewUrl}
             target="_blank"
             rel="noreferrer"
-            title="View live site"
-            className="ml-1 hidden items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground lg:flex"
+            title="Preview live site"
+            className="ml-0.5 hidden items-center gap-1 rounded-lg px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground sm:flex"
           >
-            <ExternalLink className="size-3.5" /> Preview
+            <ExternalLink className="size-3.5" />
           </a>
         )}
-        <span className="mx-1 w-12 text-right text-[11px] text-muted-foreground/70">
-          {saving === "saving" ? "Saving…" : saving === "saved" ? "Saved" : ""}
+        <span className="mx-1 hidden w-10 text-right text-[10px] text-muted-foreground/70 sm:block">
+          {saving === "saving" ? "…" : saving === "saved" ? "Saved" : ""}
         </span>
         {onPublish && (
           <button
             onClick={onPublish}
-            className="rounded-xl bg-primary px-3.5 py-1.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:opacity-90 sm:px-4"
+            className="rounded-xl bg-primary px-3.5 py-1.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:opacity-90"
           >
             Publish
           </button>
@@ -164,30 +142,3 @@ export function Toolbar({
     </header>
   );
 }
-
-function ToolButton({
-  active,
-  onClick,
-  title,
-  children,
-}: {
-  active?: boolean;
-  onClick: () => void;
-  title: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      onClick={onClick}
-      title={title}
-      className={cn(
-        "flex items-center gap-1.5 rounded-xl px-2 py-1.5 sm:px-2.5",
-        active
-          ? "bg-secondary text-secondary-foreground"
-          : "text-muted-foreground hover:bg-muted hover:text-foreground",
-      )}
-    >
-      {children}
-    </button>
-  );
-}

package/src/editor/edit-primitives.tsx

@@ -62,7 +62,7 @@ function EditableText({
     Tag,
     {
       ref,
-      className: cn("outline-none focus:ring-2 focus:ring-sky-400/60 rounded-sm", className),
+      className: cn("outline-none focus:ring-2 focus:ring-primary/60 rounded-sm", className),
       style,
       contentEditable: true,
       suppressContentEditableWarning: true,
@@ -175,8 +175,8 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
           loading={priority ? "eager" : "lazy"}
           fetchPriority={priority ? "high" : "auto"}
           className={cn(
-            "cursor-pointer outline-2 outline-offset-2 outline-transparent hover:outline-sky-400",
-            dragOver && "outline-sky-400",
+            "cursor-pointer outline-2 outline-offset-2 outline-transparent hover:outline-primary",
+            dragOver && "outline-primary",
             className,
           )}
           style={style}
@@ -187,8 +187,8 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
       ) : (
         <div
           className={cn(
-            "flex cursor-pointer items-center justify-center bg-black/[0.04] text-[11px] uppercase tracking-wider opacity-50 outline-2 outline-dashed outline-black/15 hover:outline-sky-400",
-            dragOver && "outline-sky-400 opacity-80",
+            "flex cursor-pointer items-center justify-center bg-foreground/[0.04] text-[11px] uppercase tracking-wider opacity-50 outline-2 outline-dashed outline-foreground/15 hover:outline-primary",
+            dragOver && "outline-primary opacity-80",
             className,
           )}
           style={style}
@@ -199,7 +199,7 @@ function EditableImage({ field, src, alt, className, style, width, height, prior
         </div>
       )}
       {err && (
-        <p className="mt-1 text-[10px] text-red-600 dark:text-red-400" title={err}>
+        <p className="mt-1 text-[10px] text-destructive" title={err}>
           {err}
         </p>
       )}

package/src/editor/index.tsx

@@ -2,7 +2,13 @@
 
 /** Client editor entry. Production rendering lives at
  *  "@jimmy_harika/websitekit/renderer"; the model/registry at the package root. */
-export { PageBuilder, type PageBuilderProps } from "./PageBuilder";
+export {
+  PageBuilder,
+  type PageBuilderProps,
+  type HostRailItem,
+  type DockMode,
+} from "./PageBuilder";
+export { EditorDock, EditorRail } from "./EditorDock";
 export { type TemplateMeta } from "./TemplateGallery";
 export { type Device } from "./ui-context";
 export { type EditorCapabilities } from "./edit-primitives";