@jimmy_harika/websitekit 0.5.4 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jimmy_harika/websitekit",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Snow Labs website builder engine. Block-agnostic, curated-section. One shared builder across every Snow Labs app — engine + design-system-agnostic blocks + per-industry catalogs (author, photographer, …). Each app plugs in a catalog + theme + persistence adapter.",
   "license": "UNLICENSED",
   "private": false,

package/src/editor/Canvas.tsx

@@ -89,7 +89,7 @@ export function Canvas({ catalog }: { catalog: Catalog }) {
                 e.stopPropagation();
                 ui.openLibrary(0);
               }}
-              className="flex min-h-[60vh] w-full flex-col items-center justify-center gap-3 text-muted-foreground/70 transition hover:text-sky-500"
+              className="flex min-h-[60vh] w-full flex-col items-center justify-center gap-3 text-muted-foreground/70 transition hover:text-primary"
             >
               <span className="flex size-12 items-center justify-center rounded-full border-2 border-dashed border-current">
                 <Plus className="size-6" />

package/src/editor/EditorDock.tsx

@@ -29,7 +29,7 @@ export function EditorDock({
     <aside
       data-editor-dock
       className={cn(
-        "flex h-full shrink-0 flex-col border-l border-border/50 bg-card/90 text-foreground shadow-[-12px_0_40px_-20px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
+        "flex h-full shrink-0 flex-col border-l border-border/50 bg-card/90 text-foreground shadow-none backdrop-blur-2xl",
         wide ? "w-[min(36rem,100vw)]" : "w-[min(22rem,100vw)]",
         "max-md:fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-auto max-md:z-50 max-md:h-[min(78vh,100%)] max-md:w-full max-md:rounded-t-2xl max-md:border-l-0 max-md:border-t max-md:shadow-2xl",
         className,
@@ -79,7 +79,7 @@ export function EditorRail({
       data-editor-rail
       aria-label="Editor tools"
       className={cn(
-        "z-20 hidden w-[4.25rem] shrink-0 flex-col items-stretch gap-0.5 border-r border-border/40 bg-card/50 py-2 backdrop-blur-xl md:flex",
+        "z-20 hidden w-[4.25rem] shrink-0 flex-col items-stretch gap-0.5 border-r border-border bg-card/80 py-2 backdrop-blur-xl md:flex",
         className,
       )}
     >
@@ -92,7 +92,7 @@ export function EditorRail({
           className={cn(
             "mx-1 flex flex-col items-center gap-0.5 rounded-xl px-1 py-2 text-[9px] font-medium uppercase tracking-[0.08em] transition",
             item.active
-              ? "bg-foreground text-background shadow-sm"
+              ? "bg-primary text-primary-foreground shadow-sm"
               : "text-muted-foreground hover:bg-muted hover:text-foreground",
           )}
         >

package/src/editor/InsertPoint.tsx

@@ -12,19 +12,19 @@ export function InsertPoint({ index }: { index: number }) {
       {/* Always visible on touch/small screens (group-hover doesn't fire on touch);
           hover-reveal on desktop. Without this a mobile user can't add a 2nd section. */}
       <div className="pointer-events-none absolute inset-x-0 -top-4 flex h-8 items-center justify-center px-6 opacity-100 transition group-hover/ins:opacity-100 md:opacity-0 md:group-hover/ins:opacity-100">
-        <div className="h-px flex-1 bg-sky-400/70" />
+        <div className="h-px flex-1 bg-primary/70" />
         <button
           type="button"
           onClick={(e) => {
             e.stopPropagation();
             ui.openLibrary(index);
           }}
-          className="pointer-events-auto mx-2 flex size-7 items-center justify-center rounded-full bg-sky-500 text-white shadow-md transition hover:scale-105 hover:bg-sky-600"
+          className="pointer-events-auto mx-2 flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md transition hover:scale-105 hover:bg-primary/90"
           title="Add section here"
         >
           <Plus className="size-4" />
         </button>
-        <div className="h-px flex-1 bg-sky-400/70" />
+        <div className="h-px flex-1 bg-primary/70" />
       </div>
     </div>
   );

package/src/editor/Inspector.tsx

@@ -17,7 +17,14 @@ const BP: { id: Breakpoint; icon: typeof Monitor; label: string }[] = [
   { id: "desktop", icon: Monitor, label: "Desktop" },
 ];
 
-export function Inspector({ catalog }: { catalog: Catalog }) {
+export function Inspector({
+  catalog,
+  /** When true (docked mode), skip the outer chrome — parent dock owns the title bar. */
+  embedded,
+}: {
+  catalog: Catalog;
+  embedded?: boolean;
+}) {
   const ui = useEditorUi();
   const selectedId = useBuilder((s) => s.selectedId);
   const section = useBuilder(
@@ -29,7 +36,9 @@ export function Inspector({ catalog }: { catalog: Catalog }) {
   const remove = useBuilder((s) => s.removeSection);
   const duplicate = useBuilder((s) => s.duplicateSection);
 
-  if (!ui.inspectorOpen || !section) return null;
+  // In embedded/dock mode the parent already decided to show us — don't require inspectorOpen.
+  if (!embedded && !ui.inspectorOpen) return null;
+  if (!section) return null;
   const def = getDefinition(catalog, section.type);
   if (!def) return null;
 
@@ -43,18 +52,27 @@ export function Inspector({ catalog }: { catalog: Catalog }) {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <div className="flex items-center justify-between border-b px-4 py-3">
-        <div>
-          <p className="text-[11px] uppercase tracking-wider text-muted-foreground/70">Section</p>
-          <h3 className="text-sm font-semibold">{def.label}</h3>
+      {!embedded && (
+        <div className="flex items-center justify-between border-b border-border px-4 py-3">
+          <div>
+            <p className="text-[11px] uppercase tracking-wider text-muted-foreground">
+              Section
+            </p>
+            <h3 className="text-sm font-semibold text-foreground">{def.label}</h3>
+          </div>
+          <button
+            onClick={() => ui.setInspectorOpen(false)}
+            className="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
         </div>
-        <button
-          onClick={() => ui.setInspectorOpen(false)}
-          className="rounded p-1 hover:bg-accent"
-        >
-          <X className="size-4" />
-        </button>
-      </div>
+      )}
+      {embedded && (
+        <div className="border-b border-border px-4 py-2.5">
+          <p className="text-sm font-semibold text-foreground">{def.label}</p>
+        </div>
+      )}
       <div className="flex-1 space-y-5 overflow-auto p-4">
         <div>
           <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
@@ -137,7 +155,7 @@ export function Inspector({ catalog }: { catalog: Catalog }) {
         </button>
         <button
           onClick={() => remove(section.id)}
-          className="flex-1 rounded-md border border-red-200 px-3 py-2 text-xs text-red-600 hover:bg-red-50"
+          className="flex-1 rounded-md border border-destructive/30 px-3 py-2 text-xs text-destructive hover:bg-destructive/10"
         >
           Delete
         </button>
@@ -328,7 +346,7 @@ function ImageField({
         <img
           src={value}
           alt={altValue ?? ""}
-          className={`h-24 w-full rounded-md object-cover ${dragOver ? "ring-2 ring-sky-400" : ""}`}
+          className={`h-24 w-full rounded-md object-cover ${dragOver ? "ring-2 ring-primary" : ""}`}
           onDragOver={(e) => {
             e.preventDefault();
             setDragOver(true);
@@ -344,7 +362,7 @@ function ImageField({
       ) : (
         <div
           className={`flex h-24 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70 ${
-            dragOver ? "border-sky-400 bg-sky-400/10" : ""
+            dragOver ? "border-primary bg-primary/10" : ""
           }`}
           onDragOver={(e) => {
             e.preventDefault();
@@ -377,7 +395,7 @@ function ImageField({
           </button>
         )}
       </div>
-      {err && <p className="text-[10px] text-red-600 dark:text-red-400">{err}</p>}
+      {err && <p className="text-[10px] text-destructive">{err}</p>}
       <input ref={ref} type="file" accept="image/*,.heic,.heif,image/heic,image/heif" hidden onChange={pick} />
       <input
         value={value}
@@ -482,7 +500,7 @@ function ImageListField({
             <div key={`${url}-${i}`} className="group relative">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={url} alt="" className="aspect-square w-full rounded-md object-cover" />
-              <div className="absolute inset-0 hidden items-end justify-between rounded-md bg-black/40 p-1 group-hover:flex">
+              <div className="absolute inset-0 hidden items-end justify-between rounded-md bg-foreground/40 p-1 group-hover:flex">
                 <div className="flex gap-0.5">
                   <button
                     title="Move left"
@@ -515,7 +533,7 @@ function ImageListField({
       ) : (
         <div
           className={`flex h-16 items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground/70 ${
-            dragOver ? "border-sky-400 bg-sky-400/10" : ""
+            dragOver ? "border-primary bg-primary/10" : ""
           }`}
           onDragOver={(e) => {
             e.preventDefault();
@@ -535,7 +553,7 @@ function ImageListField({
         onClick={() => ref.current?.click()}
         disabled={busy || room === 0}
         className={`w-full rounded-md border px-2 py-1.5 text-xs hover:bg-muted disabled:opacity-50 ${
-          dragOver ? "border-sky-400" : ""
+          dragOver ? "border-primary" : ""
         }`}
         onDragOver={(e) => {
           e.preventDefault();
@@ -670,7 +688,7 @@ function ItemListField({
               <button
                 title="Remove"
                 onClick={() => onChange(value.filter((_, j) => j !== i))}
-                className="rounded border px-1 text-[10px] leading-4 text-red-600"
+                className="rounded border px-1 text-[10px] leading-4 text-destructive"
               >
                 ×
               </button>

package/src/editor/PageBuilder.tsx

@@ -306,19 +306,16 @@ function PageBuilderInner({
               onClose={closeDock}
               wide={dock === "library"}
             >
-              {dock === "sections" && <SectionsPanel catalog={catalog} />}
+              {dock === "sections" && <SectionsPanel catalog={catalog} embedded />}
               {dock === "design" && <ThemePanel />}
-              {dock === "inspector" && (
-                <div className="p-1">
-                  {selectedId ? (
-                    <Inspector catalog={catalog} />
-                  ) : (
-                    <p className="p-4 text-sm text-muted-foreground">
-                      Click a section on the page to edit its content and layout.
-                    </p>
-                  )}
-                </div>
-              )}
+              {dock === "inspector" &&
+                (selectedId ? (
+                  <Inspector catalog={catalog} embedded />
+                ) : (
+                  <p className="p-4 text-sm text-muted-foreground">
+                    Click a section on the page to edit its content and layout.
+                  </p>
+                ))}
               {dock === "library" && <BlockLibraryBody catalog={catalog} />}
               {dock === "host" && hostDock?.body}
             </EditorDock>

package/src/editor/SectionFrame.tsx

@@ -61,14 +61,14 @@ export function SectionFrame({
           className={cn(
             "pointer-events-none absolute inset-0 z-10 ring-inset transition",
             selected
-              ? "ring-2 ring-sky-500"
-              : "ring-1 ring-transparent group-hover/sec:ring-2 group-hover/sec:ring-sky-300",
-            over && "ring-2 ring-sky-400",
+              ? "ring-2 ring-primary"
+              : "ring-1 ring-transparent group-hover/sec:ring-2 group-hover/sec:ring-primary/40",
+            over && "ring-2 ring-primary",
           )}
         />
         <div
           className={cn(
-            "absolute right-3 top-3 z-20 flex items-center gap-0.5 rounded-lg border border-black/10 bg-background/95 p-1 text-foreground shadow-sm backdrop-blur transition",
+            "absolute right-3 top-3 z-20 flex items-center gap-0.5 rounded-lg border border-border bg-card/95 p-1 text-foreground shadow-sm backdrop-blur transition",
             selected
               ? "opacity-100"
               : "pointer-events-none opacity-0 group-hover/sec:pointer-events-auto group-hover/sec:opacity-100",
@@ -103,7 +103,7 @@ export function SectionFrame({
           <button
             title="Delete"
             onClick={stop(() => remove(section.id))}
-            className="rounded p-1.5 text-red-600 hover:bg-red-50"
+            className="rounded p-1.5 text-destructive hover:bg-destructive/10"
           >
             <Trash2 className="size-4" />
           </button>
@@ -111,7 +111,7 @@ export function SectionFrame({
         {section.hideOn && section.hideOn.length > 0 && (
           <div
             title={`Hidden on ${section.hideOn.join(", ")}`}
-            className="absolute left-3 top-3 z-20 flex items-center gap-1 rounded-md border border-black/10 bg-background/95 px-1.5 py-1 text-foreground/70 shadow-sm backdrop-blur"
+            className="absolute left-3 top-3 z-20 flex items-center gap-1 rounded-md border border-border bg-background/95 px-1.5 py-1 text-foreground/70 shadow-sm backdrop-blur"
           >
             <EyeOff className="size-3.5" />
             {section.hideOn.map((bp) => {

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/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>
       )}