@drawnagency/primitives 0.1.0

package/src/components/brandguide/ColorSwatchSettings.tsx

@@ -0,0 +1,34 @@
+import { Input } from "../shared/Input";
+import type { ColorItem, ColorSpace } from "../../schemas/shared";
+
+interface Props {
+  color: ColorItem;
+  onChange: (color: ColorItem) => void;
+}
+
+export default function ColorSwatchSettings({ color, onChange }: Props) {
+  const space = color.spaces[0] || {};
+
+  const updateSpace = (key: keyof ColorSpace, value: string) => {
+    const newSpace = { ...space, [key]: value || undefined };
+    onChange({ ...color, spaces: [newSpace, ...color.spaces.slice(1)] });
+  };
+
+  return (
+    <div className="space-y-3">
+      <Input
+        label="Name"
+        value={color.name || ""}
+        onChange={(value) => onChange({ ...color, name: value })}
+      />
+      {(["hex", "rgb", "cmyk", "pantone"] as const).map((key) => (
+        <Input
+          key={key}
+          label={key.toUpperCase()}
+          value={space[key] || ""}
+          onChange={(value) => updateSpace(key, value)}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/brandguide/Colors.tsx

@@ -0,0 +1,277 @@
+import { useState, useEffect } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { gridColsClass } from "../../lib/grid";
+import { EditableGrid } from "../primitives/EditableGrid";
+import { EditablePlainText } from "../primitives/EditablePlainText";
+import type { ReactNode } from "react";
+import ColorSwatchSettings from "./ColorSwatchSettings";
+import type { ColorItem } from "../../schemas/shared";
+import type { SectionContent } from "../../schemas/sections";
+
+interface Props {
+  colors: ColorItem[];
+  columns?: number;
+  label?: string;
+  collapsing?: boolean;
+  showLabel?: boolean;
+  onChange?: (content: SectionContent) => void;
+  openModal?: (title: string, content: ReactNode) => void;
+}
+
+function getContrastClass(hex: string | undefined): string {
+  if (!hex) return "text-white";
+  const h = hex.replace("#", "");
+  if (h.length < 6) return "text-white";
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+  return yiq >= 128 ? "text-black" : "text-white";
+}
+
+const createColorItem = (): ColorItem => ({
+  name: "",
+  spaces: [{ hex: "#cccccc" }],
+});
+
+function buildContent(
+  colors: ColorItem[],
+  options: { label?: string; columns?: number; collapsing?: boolean; showLabel?: boolean },
+): SectionContent {
+  const { label, columns, collapsing, showLabel } = options;
+  return {
+    type: "colors",
+    content: { colors },
+    ...(label || columns || collapsing !== undefined || showLabel !== undefined
+      ? { options: { label, columns, collapsing, showLabel } }
+      : {}),
+  };
+}
+
+export default function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal }: Props) {
+  if (onChange && openModal) {
+    return (
+      <ColorsEditable
+        colors={colors}
+        columns={columns}
+        label={label}
+        collapsing={collapsing}
+        showLabel={showLabel}
+        onChange={onChange}
+        openModal={openModal}
+      />
+    );
+  }
+
+  return <ColorsView colors={colors} columns={columns} label={label} collapsing={collapsing} showLabel={showLabel} />;
+}
+
+function ColorsView({
+  colors,
+  columns,
+  label,
+  collapsing,
+  showLabel,
+}: {
+  colors: ColorItem[];
+  columns: number;
+  label?: string;
+  collapsing?: boolean;
+  showLabel?: boolean;
+}) {
+  const [expanded, setExpanded] = useState(!collapsing);
+  const [copiedValue, setCopiedValue] = useState<string | null>(null);
+
+  const handleCopy = (value: string) => {
+    navigator.clipboard.writeText(value);
+    setCopiedValue(value);
+    setTimeout(() => setCopiedValue(null), 1500);
+  };
+
+  return (
+    <div>
+      {(showLabel && !!label || collapsing) && (
+        <div className="mb-4 flex items-center gap-2">
+          {showLabel && !!label && (
+            <span className="text-lg font-bold">{label}</span>
+          )}
+          {collapsing && (
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast"
+            >
+              <span>{expanded ? "Hide Details" : "Show Details"}</span>
+              {expanded ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          )}
+        </div>
+      )}
+
+      <div className={cn("grid gap-4", gridColsClass[columns] || "grid-cols-3")}>
+        {colors.map((color, i) => {
+          const hex = color.spaces[0]?.hex;
+          const contrast = getContrastClass(hex);
+          return (
+            <div key={i} className="overflow-hidden rounded-md border border-base-200">
+              <div className={cn("flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
+                {color.name && <span className="text-sm font-bold">{color.name}</span>}
+              </div>
+              {expanded && (
+                <div className="space-y-1 bg-base-accent p-3 text-sm">
+                  {color.spaces.map((space, j) =>
+                    Object.entries(space).map(([key, value]) =>
+                      value ? (
+                        <button key={`${j}-${key}`} onClick={() => handleCopy(value)} className="cursor-pointer flex w-full justify-between hover:text-primary">
+                          <span className="font-medium uppercase">{key}</span>
+                          <span>{copiedValue === value ? "Copied!" : value}</span>
+                        </button>
+                      ) : null
+                    )
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function ColorsEditable({
+  colors,
+  columns,
+  label,
+  collapsing,
+  showLabel,
+  onChange,
+  openModal,
+}: {
+  colors: ColorItem[];
+  columns: number;
+  label?: string;
+  collapsing?: boolean;
+  showLabel?: boolean;
+  onChange: (content: SectionContent) => void;
+  openModal: (title: string, content: ReactNode) => void;
+}) {
+  const [expanded, setExpanded] = useState(!collapsing);
+  const options = { label, columns, collapsing, showLabel };
+
+  // Sync expanded state when collapsing option changes via settings
+  useEffect(() => {
+    setExpanded(!collapsing);
+  }, [collapsing]);
+
+  const handleItemSettings = (index: number) => {
+    const color = colors[index];
+    openModal(
+      "Color Settings",
+      <ColorSwatchSettings color={color} onChange={(updated) => {
+        const newColors = colors.map((c, i) => (i === index ? updated : c));
+        onChange(buildContent(newColors, options));
+      }} />,
+    );
+  };
+
+  return (
+    <div>
+      {(showLabel && !!label || collapsing) && (
+        <div className="mb-4 flex items-center gap-2">
+          {showLabel && !!label && (
+            <EditablePlainText
+              tag="span"
+              value={label}
+              onChange={(newLabel) => onChange(buildContent(colors, { ...options, label: newLabel }))}
+              isEditMode={true}
+              className="text-lg font-bold"
+            />
+          )}
+          {collapsing && (
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast"
+            >
+              <span>{expanded ? "Hide Details" : "Show Details"}</span>
+              {expanded ? <EyeOff size={16} /> : <Eye size={16} />}
+            </button>
+          )}
+        </div>
+      )}
+
+      <EditableGrid
+        items={colors}
+        columns={columns}
+        onChange={(newColors) => onChange(buildContent(newColors, options))}
+        createItem={createColorItem}
+        isEditMode={true}
+        onItemSettings={handleItemSettings}
+        renderItem={(color, { index }) => (
+          <ColorSwatchEditable
+            color={color}
+            index={index}
+            colors={colors}
+            options={options}
+            onChange={onChange}
+            expanded={expanded}
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+function ColorSwatchEditable({
+  color,
+  index,
+  colors,
+  options,
+  onChange,
+  expanded,
+}: {
+  color: ColorItem;
+  index: number;
+  colors: ColorItem[];
+  options: { label?: string; columns?: number; collapsing?: boolean; showLabel?: boolean };
+  onChange: (content: SectionContent) => void;
+  expanded: boolean;
+}) {
+  const hex = color.spaces[0]?.hex;
+  const contrast = getContrastClass(hex);
+
+  const updateColor = (updated: ColorItem) => {
+    const newColors = colors.map((c, i) => (i === index ? updated : c));
+    onChange(buildContent(newColors, options));
+  };
+
+  return (
+    <div className="overflow-hidden rounded-md border border-base-200">
+      <div className={cn("flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
+        <EditablePlainText
+          tag="span"
+          value={color.name || ""}
+          onChange={(name) => updateColor({ ...color, name })}
+          isEditMode={true}
+          placeholder="Color name"
+          className="text-sm font-bold"
+        />
+      </div>
+      {expanded && (
+        <div className="space-y-1 bg-base-accent p-3 text-sm">
+          {color.spaces.map((space, j) =>
+            Object.entries(space).map(([key, value]) =>
+              value ? (
+                <div key={`${j}-${key}`} className="flex w-full justify-between">
+                  <span className="font-medium uppercase">{key}</span>
+                  <span>{value}</span>
+                </div>
+              ) : null
+            )
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/brandguide/DoDontList.tsx

@@ -0,0 +1,67 @@
+import { useRef, useEffect } from "react";
+import type { SectionContent } from "../../schemas/sections";
+import IconList from "../sections/IconList/IconList";
+
+interface DoDontItem {
+  label: string;
+  text: string;
+  icon?: string;
+}
+
+interface Props {
+  doItems: DoDontItem[];
+  dontItems: DoDontItem[];
+  showLabel?: boolean;
+  stackText?: boolean;
+  onChange?: (content: SectionContent) => void;
+}
+
+export default function DoDontList({
+  doItems,
+  dontItems,
+  showLabel = true,
+  stackText = false,
+  onChange,
+}: Props) {
+  const doRef = useRef(doItems);
+  const dontRef = useRef(dontItems);
+  useEffect(() => { doRef.current = doItems; }, [doItems]);
+  useEffect(() => { dontRef.current = dontItems; }, [dontItems]);
+
+  return (
+    <div className="grid gap-16 lg:grid-cols-2">
+      <IconList
+        items={doItems}
+        icon="check"
+        showLabel={showLabel}
+        stackText={stackText}
+        labelClassName="font-bold text-base-contrast"
+        textClassName="text-base-contrast"
+        iconClassName="text-green-600"
+        onItemsChange={onChange ? (items) => {
+          onChange({
+            type: "do_dont",
+            content: { doItems: items as DoDontItem[], dontItems: dontRef.current },
+            options: { showLabel, stackText },
+          });
+        } : undefined}
+      />
+      <IconList
+        items={dontItems}
+        icon="x"
+        showLabel={showLabel}
+        stackText={stackText}
+        labelClassName="font-bold text-base-contrast"
+        textClassName="text-base-contrast"
+        iconClassName="text-red-600"
+        onItemsChange={onChange ? (items) => {
+          onChange({
+            type: "do_dont",
+            content: { doItems: doRef.current, dontItems: items as DoDontItem[] },
+            options: { showLabel, stackText },
+          });
+        } : undefined}
+      />
+    </div>
+  );
+}

package/src/components/brandguide/DoDontMediaGrid.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import type { MediaReference } from "../../schemas/shared";
+import type { SectionContent } from "../../schemas/sections";
+import MediaGrid from "../sections/MediaGrid/MediaGrid";
+
+interface Props {
+  media: MediaReference[];
+  columns: number;
+  square?: boolean;
+  border?: boolean;
+  crop?: boolean;
+  showCaptions?: boolean;
+  onChange?: (content: SectionContent) => void;
+  openModal?: (title: string, content: ReactNode) => void;
+}
+
+export default function DoDontMediaGrid(props: Props) {
+  return <MediaGrid {...props} sectionType="do_dont_grid" />;
+}

package/src/components/editor/AudiencePicker.tsx

@@ -0,0 +1,103 @@
+import { useRef, useState } from "react";
+import { Check } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Popover } from "../shared/Popover";
+import { PopoverItem } from "../shared/PopoverItem";
+import type { Audience } from "../../auth/types";
+
+interface Props {
+  access: string[];
+  audiences: Audience[];
+  onChange: (access: string[]) => void;
+}
+
+export function AudiencePicker({ access, audiences, onChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const selected = audiences.filter((a) => access.includes(a.name));
+  const visibleCircles = selected.slice(0, 3);
+
+  function toggle(name: string) {
+    const next = access.includes(name)
+      ? access.filter((n) => n !== name)
+      : [...access, name];
+    onChange(next);
+  }
+
+  return (
+    <div className="relative">
+      <button
+        ref={buttonRef}
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          "cursor-pointer inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
+          "border border-base-200 hover:bg-base-accent",
+          selected.length === 0 && "text-base-contrast-light",
+        )}
+      >
+        {selected.length === 0 && <span>No audience</span>}
+        {selected.length >= 1 && (
+          <span className="flex -space-x-1.5">
+            {visibleCircles.map((a) => (
+              <span
+                key={a.name}
+                className="h-3 w-3 rounded-full border border-base"
+                style={{ backgroundColor: a.color ?? "#9ca3af" }}
+              />
+            ))}
+          </span>
+        )}
+        {selected.length === 1 && <span>{selected[0].displayName}</span>}
+        {selected.length >= 2 && <span>{selected.length} audiences</span>}
+      </button>
+
+      <Popover
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        anchorRef={buttonRef}
+        align="end"
+        className="w-56"
+      >
+        {audiences.length === 0 ? (
+          <div className="px-3 py-2 text-xs text-base-contrast-light">
+            No audiences configured. Add audiences in Site Settings → Viewer Access.
+          </div>
+        ) : (
+          <ul role="list" className="py-1">
+            {audiences.map((a) => {
+              const checked = access.includes(a.name);
+              return (
+                <li key={a.name}>
+                  <PopoverItem
+                    role="checkbox"
+                    aria-checked={checked}
+                    onClick={() => toggle(a.name)}
+                  >
+                    <span
+                      aria-hidden="true"
+                      className={cn(
+                        "flex h-5 w-5 shrink-0 items-center justify-center rounded border transition-colors",
+                        checked
+                          ? "border-primary bg-primary text-primary-contrast"
+                          : "border-base-300 bg-base",
+                      )}
+                    >
+                      {checked && <Check size={14} strokeWidth={3} />}
+                    </span>
+                    <span
+                      className="h-3 w-3 shrink-0 rounded-full border border-base-200"
+                      style={{ backgroundColor: a.color ?? "#9ca3af" }}
+                    />
+                    <span className="text-sm font-medium text-base-contrast">{a.displayName}</span>
+                  </PopoverItem>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </Popover>
+    </div>
+  );
+}

package/src/components/editor/DeleteButton.tsx

@@ -0,0 +1,18 @@
+import { DeleteIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+
+interface DeleteButtonProps {
+  onDelete: () => void;
+}
+
+export function DeleteButton({ onDelete }: DeleteButtonProps) {
+  return (
+    <IconButton
+      icon={<DeleteIcon size={16} />}
+      label="Delete section"
+      intent="destructive"
+      onClick={onDelete}
+      className="pointer-events-auto"
+    />
+  );
+}

package/src/components/editor/DragHandle.tsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import { DragHandle as DragHandleIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { Tooltip, Kbd } from "../shared/Tooltip";
+
+export const DragHandle = forwardRef<HTMLButtonElement>(function DragHandle(_, ref) {
+  return (
+    <Tooltip content={<><Kbd>Drag</Kbd> to move</>} className="-ml-[34px]">
+      <IconButton
+        ref={ref}
+        icon={<DragHandleIcon size={18} />}
+        label="Drag to reorder section"
+        className="pointer-events-auto cursor-grab active:cursor-grabbing rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast"
+        tabIndex={-1}
+      />
+    </Tooltip>
+  );
+});

package/src/components/editor/InsertButton.tsx

@@ -0,0 +1,22 @@
+import { AddIcon } from "../shared/icons";
+import { IconButton } from "../shared/IconButton";
+import { Tooltip, Kbd } from "../shared/Tooltip";
+
+interface InsertButtonProps {
+  index: number;
+  onInsert: (index: number) => void;
+}
+
+export function InsertButton({ index, onInsert }: InsertButtonProps) {
+  return (
+    <Tooltip content={<><Kbd>Click</Kbd> to add below<br /><Kbd>Alt+Click</Kbd> to add above</>}>
+      <IconButton
+        icon={<AddIcon size={18} />}
+        label="Add section"
+        className="pointer-events-auto rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast"
+        tabIndex={-1}
+        onClick={(e) => onInsert(e.altKey ? index : index + 1)}
+      />
+    </Tooltip>
+  );
+}