@drawnagency/primitives 0.1.61 → 0.1.63

package/src/components/sections/DoDontMedia/index.tsx

@@ -0,0 +1,84 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { Image as ImageIcon } from "lucide-react";
+import { SingleMediaReferenceSchema } from "../../../schemas/shared";
+import { LinkValueSchema, DEFAULT_LINK } from "../../../schemas/link";
+import { DoDontMediaBlock } from "./DoDontMediaBlock";
+
+const schema = z.object({
+  type: z.literal("dodont_media"),
+  content: z.object({
+    ref: SingleMediaReferenceSchema,
+    link: LinkValueSchema.optional(),
+    dodont: z.enum(["do", "dont"]),
+  }),
+  options: z
+    .object({
+      square: z.boolean().optional(),
+      showCaption: z.boolean().optional(),
+      border: z.boolean().optional(),
+      objectFit: z.enum(["cover", "contain"]).optional(),
+    })
+    .default({}),
+});
+
+export default defineSection({
+  type: "dodont_media",
+  label: "Do / Don't Media",
+  category: "brand-guide",
+  icon: <ImageIcon size={18} />,
+  schema,
+  component: ({ content, options, onChange }) => (
+    <DoDontMediaBlock
+      refValue={content.content.ref}
+      options={(options ?? {}) as { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" }}
+      link={content.content.link}
+      dodont={content.content.dodont}
+      isEditMode={!!onChange}
+      onRefChange={
+        onChange ? (ref) => onChange({ ...content, content: { ...content.content, ref } }) : undefined
+      }
+    />
+  ),
+  defaults: () => ({
+    type: "dodont_media" as const,
+    content: { ref: { type: "image" as const, imageId: "" }, dodont: "do" as const },
+    options: {},
+  }),
+  getLabel: () => "Do / Don't Media",
+  getThumbnails: (content) =>
+    content.content.ref.imageId
+      ? [{ type: "image" as const, src: content.content.ref.imageId }]
+      : [],
+  settings: {
+    square: { type: "checkbox", label: "Square aspect ratio", default: false },
+    showCaption: { type: "checkbox", label: "Show caption", default: false },
+    border: { type: "checkbox", label: "Border", default: false },
+    objectFit: {
+      type: "select",
+      label: "Image fit",
+      default: "contain",
+      options: [
+        { label: "Contain", value: "contain" },
+        { label: "Cover", value: "cover" },
+      ],
+    },
+    link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
+    dodont: {
+      type: "select",
+      label: "Do / Don't",
+      target: "content",
+      default: "do",
+      options: [
+        { label: "Do", value: "do" },
+        { label: "Don't", value: "dont" },
+      ],
+    },
+  },
+  inheritableSettings: ["square", "showCaption", "border", "objectFit"],
+  settingsTabs: [
+    { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
+    { label: "Link", fields: ["link"] },
+    { label: "Do / Don't", fields: ["dodont"] },
+  ],
+});

package/src/components/sections/IconList/DoDontToggle.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useRef } from "react";
+import { Check, X } from "lucide-react";
+import { cn } from "../../../lib/cn";
+
+interface DoDontToggleProps {
+  value?: "do" | "dont";
+  onSelect: (v: "do" | "dont" | undefined) => void;
+  onClose: () => void;
+}
+
+/**
+ * Brand-guide do/dont tagging control. Kept OUT of the generic IconPicker so
+ * that primitive stays brand-agnostic — do/dont semantics (do = check/green,
+ * dont = x/red) live here, in the brand-guide layer. This is the reference
+ * example of extending a true primitive with a branded composition.
+ */
+export function DoDontToggle({ value, onSelect, onClose }: DoDontToggleProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleMouseDown(e: MouseEvent) {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) onClose();
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [onClose]);
+
+  return (
+    <div
+      ref={panelRef}
+      className="absolute z-50 w-44 rounded-lg border border-base-200 bg-base p-2 shadow-lg"
+    >
+      <div className="grid grid-cols-3 gap-2">
+        <button
+          type="button"
+          aria-label="No do/don't tag"
+          className={cn(
+            "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+            "text-base-contrast-light hover:bg-base-accent",
+            value === undefined && "ring-2 ring-primary bg-base-accent",
+          )}
+          onClick={() => onSelect(undefined)}
+        >
+          <span className="flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" />
+          <span className="text-xs font-medium">None</span>
+        </button>
+        <button
+          type="button"
+          aria-label="Do"
+          className={cn(
+            "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+            "text-green-600 hover:bg-base-accent",
+            value === "do" && "ring-2 ring-primary bg-base-accent",
+          )}
+          onClick={() => onSelect("do")}
+        >
+          <Check size={20} />
+          <span className="text-xs font-medium">Do</span>
+        </button>
+        <button
+          type="button"
+          aria-label="Don't"
+          className={cn(
+            "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+            "text-red-600 hover:bg-base-accent",
+            value === "dont" && "ring-2 ring-primary bg-base-accent",
+          )}
+          onClick={() => onSelect("dont")}
+        >
+          <X size={20} />
+          <span className="text-xs font-medium">Don't</span>
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/sections/IconList/IconList.tsx

@@ -5,9 +5,10 @@ import { getIcon } from "../../../lib/icons";
 import { useEditableCollection } from "../../primitives/useEditableCollection";
 import { EditablePlainText } from "../../primitives/EditablePlainText";
 import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
-import { CopyPlus, Pencil } from "lucide-react";
+import { Check, CopyPlus, Pencil, X } from "lucide-react";
 import { IconButton } from "../../shared/IconButton";
 import { IconPicker } from "../../primitives/IconPicker";
+import { DoDontToggle } from "./DoDontToggle";
 import type { IconListItem } from "./index";
 
 interface Props {
@@ -298,6 +299,7 @@ function EditableRow({
   const handleRef = useRef<HTMLButtonElement>(null);
   const [iconHover, setIconHover] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
+  const [dodontOpen, setDodontOpen] = useState(false);
   const [editingSuppressed, setEditingSuppressed] = useState(false);
 
   const iconEntry = resolveIcon(item, defaultIcon);
@@ -387,7 +389,7 @@ function EditableRow({
           <button
             className="cursor-pointer transition-opacity hover:opacity-70"
             aria-label="Change icon"
-            onClick={() => setPickerOpen((prev) => !prev)}
+            onClick={() => { setPickerOpen((prev) => !prev); setDodontOpen(false); }}
           >
             {iconHover && !pickerOpen ? (
               <Pencil size={18} className="text-base-contrast-light" />
@@ -403,23 +405,11 @@ function EditableRow({
               <IconPicker
                 selected={effectiveIconId}
                 showRemove={true}
-                allowDoDont={true}
-                dodont={item.dodont}
                 onSelect={(newIcon) => {
                   onUpdateItem({ icon: newIcon ?? undefined, dodont: undefined });
                   setPickerOpen(false);
                   setIconHover(false);
                 }}
-                onSelectDoDont={(v) => {
-                  onUpdateItem({ dodont: v });
-                  // Switching to None mode (v === undefined) clears the tag but
-                  // keeps the picker open so the grid is reachable; choosing a
-                  // Do/Don't tile commits and closes.
-                  if (v !== undefined) {
-                    setPickerOpen(false);
-                    setIconHover(false);
-                  }
-                }}
                 onClose={() => {
                   setPickerOpen(false);
                   setIconHover(false);
@@ -462,6 +452,26 @@ function EditableRow({
             : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100",
         )}
       >
+        <div className="relative">
+          <button
+            aria-label="Set do/don't"
+            onClick={() => { setDodontOpen((p) => !p); setPickerOpen(false); }}
+            className="cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary"
+          >
+            {item.dodont === "do" ? <Check size={14} className="text-green-600" />
+              : item.dodont === "dont" ? <X size={14} className="text-red-600" />
+              : <Pencil size={14} />}
+          </button>
+          {dodontOpen && (
+            <div className="absolute top-full right-0 z-50 mt-1">
+              <DoDontToggle
+                value={item.dodont}
+                onSelect={(v) => { onUpdateItem({ dodont: v }); setDodontOpen(false); }}
+                onClose={() => setDodontOpen(false)}
+              />
+            </div>
+          )}
+        </div>
         <IconButton
           ref={handleRef}
           icon={<DragHandle size={14} />}

package/src/components/sections/IconList/index.tsx

@@ -27,6 +27,7 @@ const schema = z.object({
 
 export default defineSection({
   type: "icon_list",
+  category: "brand-guide",
   label: "Icon List",
   icon: <List size={18} />,
   schema,

package/src/components/sections/Media/MediaBlock.tsx

@@ -1,6 +1,5 @@
 import type { SingleMediaReference } from "../../../schemas/shared";
 import type { LinkValue } from "../../../schemas/link";
-import { Check, X } from "lucide-react";
 import { cn } from "../../../lib/cn";
 import { ResolvedMedia } from "../../primitives/ResolvedMedia";
 import { ImageDropZone } from "../../primitives/ImageDropZone";
@@ -12,13 +11,11 @@ export interface MediaBlockProps {
   options: { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" };
   /** Per-item link (viewer: already resolved to kind:"external" upstream). */
   link?: LinkValue;
-  /** Per-item do/dont badge. */
-  dodont?: "do" | "dont";
   isEditMode: boolean;
   onRefChange?: (ref: SingleMediaReference) => void;
 }
 
-export function MediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }: MediaBlockProps) {
+export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }: MediaBlockProps) {
   const mediaLibrary = useMediaLibrary();
   // Per-item ref value overrides the inherited option (childDefaults); default contain.
   const fit = refValue.objectFit ?? options.objectFit;
@@ -30,9 +27,18 @@ export function MediaBlock({ refValue, options, link, dodont, isEditMode, onRefC
 
   const replace = onRefChange ? (imageId: string) => onRefChange({ ...refValue, imageId }) : undefined;
 
+  // The zero-JS viewer has no MediaLibraryContext, so useResolvedMedia() can't
+  // resolve the URL. The SSR pass (resolveManifestReferences) bakes src/srcset/alt
+  // onto the ref instead — forward them so a real <img> renders rather than the
+  // placeholder. In edit mode these are absent and ResolvedMedia falls back to the
+  // live manifest via context. (Mirrors a3e8913, which did this for MediaGrid/SplitContent.)
+  const baked = refValue as Record<string, unknown>;
   const resolved = (
     <ResolvedMedia
       imageId={refValue.imageId || undefined}
+      src={baked.src as string | undefined}
+      srcset={baked.srcset as string | undefined}
+      alt={baked.alt as string | undefined}
       className="h-full w-full"
       imgClassName={fitClass}
       invertFrom={refValue.invertFrom}
@@ -61,13 +67,6 @@ export function MediaBlock({ refValue, options, link, dodont, isEditMode, onRefC
 
   return (
     <figure>
-      {dodont && (
-        <div className="flex h-10 items-center justify-center pb-1">
-          {dodont === "do"
-            ? <Check size={28} className="text-green-600" />
-            : <X size={28} className="text-red-600" />}
-        </div>
-      )}
       <div
         data-testid="media-open-surface"
         className={cn(

package/src/components/sections/Media/index.tsx

@@ -10,7 +10,6 @@ const schema = z.object({
   content: z.object({
     ref: SingleMediaReferenceSchema,
     link: LinkValueSchema.optional(),
-    dodont: z.enum(["do", "dont"]).optional(),
   }),
   options: z
     .object({
@@ -32,7 +31,6 @@ export default defineSection({
       refValue={content.content.ref}
       options={(options ?? {}) as { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" }}
       link={content.content.link}
-      dodont={content.content.dodont}
       isEditMode={!!onChange}
       onRefChange={
         onChange ? (ref) => onChange({ ...content, content: { ...content.content, ref } }) : undefined
@@ -63,23 +61,10 @@ export default defineSection({
       ],
     },
     link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
-    dodont: {
-      type: "select",
-      label: "Do / Don't",
-      target: "content",
-      default: "",
-      emptyIsUndefined: true,
-      options: [
-        { label: "None", value: "" },
-        { label: "Do", value: "do" },
-        { label: "Don't", value: "dont" },
-      ],
-    },
   },
   inheritableSettings: ["square", "showCaption", "border", "objectFit"],
   settingsTabs: [
     { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
     { label: "Link", fields: ["link"] },
-    { label: "Do / Don't", fields: ["dodont"] },
   ],
 });

package/src/components/sections/all-sections.ts

@@ -1,40 +1,12 @@
-import linkHeading from "./LinkHeading";
-import subHeading from "./SubHeading";
-import subSubHeading from "./SubSubHeading";
-import prose from "./Prose";
-import media from "./Media";
-import button from "./Button";
-import colors from "./Colors";
-import iconList from "./IconList";
-import container from "./Container";
-import spacer from "./Spacer";
+import { coreSectionDefs } from "./core-sections";
+import { brandGuideSectionDefs } from "./brand-guide";
 
 /**
- * The single ordered list of built-in section definitions.
- *
- * Both `register.ts` (full registration for rendering) and `register-schemas.ts`
- * (schema-only registration for /api/save validation) derive from this one
- * array, so the two can no longer drift — previously they hand-maintained
- * parallel 11-entry lists, and a section added to one but not the other would
- * make the editor render a type that save rejects with a 400 (or vice versa).
+ * The single ordered list of built-in section definitions, composed from the
+ * core (generic) and brand-guide groups. Both `register.ts` and
+ * `register-schemas.ts` derive from this one array, so they cannot drift.
  *
  * Retired: split_content, media_grid, do_dont_grid, do_dont — fully decomposable
- * into container sections. The loader fallback in mergeSiteContent transforms any
- * legacy-typed JSON to container before validation.
+ * into container sections by the loader fallback (mergeSiteContent).
  */
-// Intentionally un-annotated: each section is SectionDefinition<its-own-shape>,
-// and a wider `SectionDefinition<unknown>[]` annotation isn't assignable from
-// them (generic param variance). The inferred union is what registerSection /
-// registerSchema already accept.
-export const allSectionDefs = [
-  linkHeading,
-  subHeading,
-  subSubHeading,
-  prose,
-  media,
-  button,
-  colors,
-  iconList,
-  container,
-  spacer,
-];
+export const allSectionDefs = [...coreSectionDefs, ...brandGuideSectionDefs];

package/src/components/sections/brand-guide.ts

@@ -0,0 +1,13 @@
+import colors from "./Colors";
+import iconList from "./IconList";
+import doDontMedia from "./DoDontMedia";
+
+/** Opinionated brand-guide sections. Self-contained subtree: a build that does
+ *  not import this module drops these sections (and their cmyk/pantone schemas
+ *  and do/dont compositions) entirely. Exposed at
+ *  `@drawnagency/primitives/components/sections/brand-guide`. */
+// Un-annotated for the same generic-variance reason as coreSectionDefs.
+export const brandGuideSectionDefs = [colors, iconList, doDontMedia];
+
+export { ColorSpaceSchema, ColorItemSchema } from "./Colors/schema";
+export type { ColorSpace, ColorItem } from "./Colors/schema";

package/src/components/sections/core-sections.ts

@@ -0,0 +1,26 @@
+import linkHeading from "./LinkHeading";
+import subHeading from "./SubHeading";
+import subSubHeading from "./SubSubHeading";
+import prose from "./Prose";
+import media from "./Media";
+import button from "./Button";
+import container from "./Container";
+import spacer from "./Spacer";
+
+/** Generic, brand-agnostic built-in sections. A non-brand site can register
+ *  exactly these (plus its own custom sections) and tree-shake the brand-guide
+ *  group out of its bundle. */
+// Intentionally un-annotated: each section is SectionDefinition<its-own-shape>,
+// and a wider `SectionDefinition<unknown>[]` annotation isn't assignable from
+// them (generic param variance). The inferred union is what registerSection /
+// registerSchema already accept.
+export const coreSectionDefs = [
+  linkHeading,
+  subHeading,
+  subSubHeading,
+  prose,
+  media,
+  button,
+  container,
+  spacer,
+];

package/src/components/shell/EditorShell.tsx

@@ -69,6 +69,7 @@ import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
 import { IconButton } from "../shared/IconButton";
 import { SegmentedControl } from "../shared/SegmentedControl";
+import { isSectionVisibleInViewBranch } from "./view-branch";
 import { SettingsIcon } from "../shared/icons";
 import { ImageIcon, ListOrderedIcon, FilesIcon, X } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
@@ -1216,12 +1217,13 @@ function EditorContent({
   const editingEnabled = isEditMode && !isPublishing;
 
   // View mode: render the active page's sections from the fetched branch, in page
-  // order (Live additionally filters to status === "live"). Edit mode: the active
-  // page's in-memory sections (the `sections` prop is already `activeSections`).
+  // order. "Published" (live) shows only status === "live"; "Unpublished" (saved)
+  // shows all in-progress edits except archived (see view-branch.ts). Edit mode:
+  // the active page's in-memory sections (the `sections` prop is already `activeSections`).
   const displaySections = !isEditMode && viewSections !== null
     ? activePageSectionIds
         .map((id) => viewSections.find((s) => s.section.id === id))
-        .filter((s): s is LoadedSection => !!s && (viewBranch !== "live" || s.meta.status === "live"))
+        .filter((s): s is LoadedSection => !!s && isSectionVisibleInViewBranch(s.meta.status, viewBranch))
     : sections;
 
   useEffect(() => {
@@ -1642,8 +1644,8 @@ function EditorToolbar({
           <div className="mx-auto max-w-screen-xl flex items-center justify-center px-4 py-2">
             <SegmentedControl
               options={[
-                { value: "saved", label: "Draft" },
-                { value: "live", label: "Live" },
+                { value: "live", label: "Published" },
+                { value: "saved", label: "Unpublished" },
               ]}
               value={viewBranch}
               onChange={(v) => setViewBranch(v as "saved" | "live")}

package/src/components/shell/view-branch.ts

@@ -0,0 +1,14 @@
+export type ViewBranch = "saved" | "live";
+
+/**
+ * Section visibility for the editor's view-mode toggle.
+ *
+ * - `"live"` ("Published"): mirrors what an anonymous visitor sees on the
+ *   deployed site — only `status === "live"` (the same predicate the real viewer
+ *   applies in `viewer-page.ts`).
+ * - `"saved"` ("Unpublished"): all in-progress edits — every status EXCEPT
+ *   `archived` — so edits to live content show alongside drafts.
+ */
+export function isSectionVisibleInViewBranch(status: string, viewBranch: ViewBranch): boolean {
+  return viewBranch === "live" ? status === "live" : status !== "archived";
+}

package/src/lib/loader.ts

@@ -35,13 +35,19 @@ export function mergeSiteContent(
       console.warn(`Section file missing for id: ${id}, skipping`);
       continue;
     }
-    // Transitional upgrade: rewrite legacy-typed JSON to a container BEFORE
-    // validation, so retired/legacy files render on every load path. Returns the
-    // same reference for non-legacy input (idempotent). We normalize the emitted
+    // Transitional upgrade: rewrite legacy-typed JSON BEFORE validation so
+    // retired/legacy files render on every load path. Handles: (1) plain section
+    // types promoted to container, (2) media+dodont → dodont_media (and the same
+    // for doDontImage grid items), and (3) recursion into container children so
+    // persisted containers with legacy children are also upgraded. Returns the same
+    // reference for non-legacy input (idempotent). We normalize the emitted
     // section's meta.type when an upgrade happens (no mutation of the caller's index).
     const raw = upgradeLegacySection(rawFile);
     const baseMeta = index.sections[id];
-    const meta = raw !== rawFile ? { ...baseMeta, type: "container" } : baseMeta;
+    const upgradedType = raw && typeof raw === "object" ? (raw as Record<string, unknown>).type : undefined;
+    const meta = raw !== rawFile && typeof upgradedType === "string"
+      ? { ...baseMeta, type: upgradedType }
+      : baseMeta;
 
     if (canValidate && schema) {
       const result = schema.safeParse(raw);

package/src/lib/migrate-sections-transform.ts

@@ -16,12 +16,36 @@ const RETIRED = new Set(["split_content", "media_grid", "do_dont_grid", "do_dont
 export function upgradeLegacySection(raw: unknown): unknown {
   if (!raw || typeof raw !== "object") return raw;
   const section = raw as Obj;
-  if (!RETIRED.has(section.type as string)) return raw; // same reference → idempotent
-  if (section.type === "split_content") return upgradeSplitContent(section);
-  if (section.type === "do_dont") return upgradeDoDont(section);
+  const type = section.type as string;
+  if (type === "media" && hasDoDont(section)) return { ...section, type: "dodont_media" };
+  if (type === "container") return upgradeContainerChildren(section);
+  if (!RETIRED.has(type)) return raw; // same reference → idempotent
+  if (type === "split_content") return upgradeSplitContent(section);
+  if (type === "do_dont") return upgradeDoDont(section);
   return upgradeGrid(section); // media_grid | do_dont_grid (per-item type drives the mapping)
 }
 
+function hasDoDont(section: Obj): boolean {
+  const content = section.content;
+  return !!content && typeof content === "object" && (content as Obj).dodont != null;
+}
+
+/** Recurse into container children, upgrading media+dodont (and nested legacy)
+ *  in place. Returns the SAME reference when nothing changed (idempotent). */
+function upgradeContainerChildren(section: Obj): unknown {
+  const content = section.content as Obj | undefined;
+  const children = content && Array.isArray(content.children) ? (content.children as unknown[]) : null;
+  if (!children) return section;
+  let changed = false;
+  const mapped = children.map((child) => {
+    const up = upgradeLegacySection(child);
+    if (up !== child) changed = true;
+    return up;
+  });
+  if (!changed) return section;
+  return { ...section, content: { ...content, children: mapped } };
+}
+
 /** Carry only known BaseMediaRef (+ video) fields; drops render artifacts (src/srcset/alt) and any stray keys. */
 function buildRef(item: Obj, forceImage: boolean): Obj {
   const type = forceImage ? "image" : (item.type as string);
@@ -42,16 +66,20 @@ function buildRef(item: Obj, forceImage: boolean): Obj {
 
 function mapRefItem(item: Obj, parentId: string, index: number): Obj {
   const content: Obj = {};
+  let type = "media";
   if (item.type === "linkedImage") {
     content.ref = buildRef(item, true);
     content.link = { kind: "external", href: item.href ?? "", target: item.target === "_blank" ? "_blank" : "_self" };
   } else if (item.type === "doDontImage") {
     content.ref = buildRef(item, true);
-    if (item.doDont !== undefined) content.dodont = item.doDont;
+    if (item.doDont !== undefined) {
+      content.dodont = item.doDont;
+      type = "dodont_media";
+    }
   } else {
     content.ref = buildRef(item, false); // image | video
   }
-  return { id: `${parentId}__media_${index}`, type: "media", content, options: {} };
+  return { id: `${parentId}__media_${index}`, type, content, options: {} };
 }
 
 function upgradeGrid(section: Obj): Obj {

package/src/lib/registry.ts

@@ -35,7 +35,7 @@ export type SettingsFieldDef =
       coerce?: "number";
       /** When set, an empty-string ("") selection is normalized to `undefined`
        * before the content/options split, so an optional-enum field clears cleanly
-       * (e.g. Media `dodont`, whose enum is strictly ["do","dont"]). Opt-in so other
+       * (e.g. an optional-enum content field). Opt-in so other
        * selects keep their "" value. */
       emptyIsUndefined?: boolean;
       options: { label: string; value: string }[];
@@ -108,6 +108,10 @@ export interface WrapperProps {
 
 export interface SectionDefinition<T = unknown> {
   type: string;
+  /** Grouping label. `"brand-guide"` marks opinionated sections separable from the
+   *  generic core set; omitted/`"core"` is a generic section. Presentation/grouping
+   *  only — does not affect registration. */
+  category?: "core" | "brand-guide";
   label: string;
   icon?: ReactNode;
   schema: ZodType<T>;
@@ -138,6 +142,7 @@ export interface SectionDefinition<T = unknown> {
 
 type DefineSectionInput<S extends ZodType> = {
   type: string;
+  category?: "core" | "brand-guide";
   label: string;
   icon?: ReactNode;
   schema: S;

package/src/schemas/shared.ts

@@ -92,21 +92,3 @@ export const FontNameSchema = z
   .max(120)
   .regex(/^[a-zA-Z0-9 ,'"-]+$/, "contains invalid font-name characters");
 
-export const ColorSpaceSchema = z.object({
-  hex: HexColorSchema.optional(),
-  rgb: z.string().optional(),
-  cmyk: z.string().optional(),
-  pantone: z.string().optional(),
-}).refine(
-  (data) => data.hex !== undefined || data.rgb !== undefined || data.cmyk !== undefined || data.pantone !== undefined,
-  { message: "At least one color space must be defined" },
-);
-
-export type ColorSpace = z.infer<typeof ColorSpaceSchema>;
-
-export const ColorItemSchema = z.object({
-  name: z.string().optional(),
-  spaces: z.array(ColorSpaceSchema).min(1),
-});
-
-export type ColorItem = z.infer<typeof ColorItemSchema>;