@drawnagency/primitives 0.1.12 → 0.1.14

package/src/schemas/site-config.ts

@@ -2,9 +2,13 @@ import { z } from "zod";
 import { MediaConfigSchema } from "./media";
 import { HexColorSchema } from "./shared";
 
+const StatusSchema = z.enum(["draft", "live", "archived", "published"]).transform(
+  (val) => val === "published" ? "live" as const : val,
+);
+
 export const SectionMetaSchema = z.object({
   type: z.string(),
-  status: z.enum(["draft", "live", "archived"]),
+  status: StatusSchema,
   access: z.array(z.string()),
 });
 

package/dist/components/editor/AudiencePicker.d.ts

@@ -1,9 +0,0 @@
-import type { Audience } from "../../auth/types";
-interface Props {
-    access: string[];
-    audiences: Audience[];
-    onChange: (access: string[]) => void;
-}
-export declare function AudiencePicker({ access, audiences, onChange }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=AudiencePicker.d.ts.map

package/dist/components/editor/AudiencePicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AudiencePicker.d.ts","sourceRoot":"","sources":["../../../src/components/editor/AudiencePicker.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyFpE"}

package/dist/components/editor/StatusBadge.d.ts

@@ -1,7 +0,0 @@
-interface StatusBadgeProps {
-    status: string;
-    dirty?: boolean;
-}
-export declare function StatusBadge({ status, dirty }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/editor/StatusBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/editor/StatusBadge.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAQD,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAc9D"}

package/dist/components/editor/StatusDots.d.ts

@@ -1,25 +0,0 @@
-type StatusColor = "draft" | "live" | "archived" | "modified";
-interface DotDef {
-    color: StatusColor;
-}
-interface DeriveInput {
-    mainStatus: string | null;
-    savedStatus: string;
-    contentDiffers: boolean;
-    isLocalOnly: boolean;
-}
-interface DeriveResult {
-    dots: DotDef[];
-    label: "unsaved" | null;
-    description: string;
-}
-export declare function deriveStatusDots({ mainStatus, savedStatus, contentDiffers, isLocalOnly }: DeriveInput): DeriveResult;
-interface StatusDotsProps {
-    mainStatus: string | null;
-    savedStatus: string;
-    contentDiffers: boolean;
-    isLocalOnly: boolean;
-}
-export declare function StatusDots(props: StatusDotsProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=StatusDots.d.ts.map

package/dist/components/editor/StatusDots.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusDots.d.ts","sourceRoot":"","sources":["../../../src/components/editor/StatusDots.tsx"],"names":[],"mappings":"AAIA,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,UAAU,MAAM;IACd,KAAK,EAAE,WAAW,CAAC;CACpB;AAED,UAAU,WAAW;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;CACrB;AAqBD,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,WAAW,GAAG,YAAY,CA8CpH;AAED,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAiChD"}

package/dist/components/editor/StatusPicker.d.ts

@@ -1,9 +0,0 @@
-type Status = "draft" | "live" | "archived";
-interface Props {
-    status: Status;
-    dirty?: boolean;
-    onChange: (status: Status) => void;
-}
-export declare function StatusPicker({ status, dirty, onChange }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=StatusPicker.d.ts.map

package/dist/components/editor/StatusPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusPicker.d.ts","sourceRoot":"","sources":["../../../src/components/editor/StatusPicker.tsx"],"names":[],"mappings":"AAMA,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AAE5C,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAgBD,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyD9D"}

package/src/components/editor/StatusBadge.tsx

@@ -1,30 +0,0 @@
-import { cn } from "../../lib/cn";
-
-type Status = "live" | "draft" | "archived";
-
-interface StatusBadgeProps {
-  status: string;
-  dirty?: boolean;
-}
-
-const statusClasses: Record<Status, string> = {
-  live: "bg-status-live-bg text-status-live-text",
-  draft: "bg-status-draft-bg text-status-draft-text",
-  archived: "bg-status-archived-bg text-status-archived-text",
-};
-
-export function StatusBadge({ status, dirty }: StatusBadgeProps) {
-  return (
-    <span
-      className={cn(
-        "rounded-full px-2 py-0.5 text-xs font-medium",
-        statusClasses[status as Status] ?? statusClasses.archived,
-      )}
-    >
-      {status}
-      {dirty && (
-        <span className="ml-1 opacity-70">· Unsaved</span>
-      )}
-    </span>
-  );
-}

package/src/components/editor/StatusDots.tsx

@@ -1,131 +0,0 @@
-import { useRef, useState } from "react";
-import { cn } from "../../lib/cn";
-import { Popover } from "../shared/Popover";
-
-type StatusColor = "draft" | "live" | "archived" | "modified";
-
-interface DotDef {
-  color: StatusColor;
-}
-
-interface DeriveInput {
-  mainStatus: string | null;
-  savedStatus: string;
-  contentDiffers: boolean;
-  isLocalOnly: boolean;
-}
-
-interface DeriveResult {
-  dots: DotDef[];
-  label: "unsaved" | null;
-  description: string;
-}
-
-const dotColorClasses: Record<StatusColor, string> = {
-  live: "bg-green-500",
-  draft: "bg-gray-400",
-  archived: "bg-white border-gray-300",
-  modified: "bg-orange-400",
-};
-
-const descriptions: Record<string, string> = {
-  "live": "Live — synced",
-  "live,modified": "Live — unpublished content edits",
-  "live,draft": "Live on site, changed to draft",
-  "live,archived": "Live on site, will be hidden on publish",
-  "draft": "Draft — editor only",
-  "draft,live": "Draft, will become live on publish",
-  "archived": "Archived",
-  "archived,live": "Archived, will become live on publish",
-  "modified": "Unpublished content edits",
-};
-
-export function deriveStatusDots({ mainStatus, savedStatus, contentDiffers, isLocalOnly }: DeriveInput): DeriveResult {
-  const label: "unsaved" | null = isLocalOnly ? "unsaved" : null;
-
-  // New section — no main status
-  if (!mainStatus) {
-    return {
-      dots: [{ color: savedStatus as StatusColor }],
-      label,
-      description: `${savedStatus} — new section`,
-    };
-  }
-
-  // Status changed between main and saved
-  if (mainStatus !== savedStatus) {
-    const key = `${mainStatus},${savedStatus}`;
-    return {
-      dots: [{ color: mainStatus as StatusColor }, { color: savedStatus as StatusColor }],
-      label,
-      description: descriptions[key] ?? `${mainStatus} → ${savedStatus}`,
-    };
-  }
-
-  // Same status — check content differences
-  if (contentDiffers) {
-    // Only show orange (modified) dot for live sections
-    if (mainStatus === "live") {
-      return {
-        dots: [{ color: "live" }, { color: "modified" }],
-        label,
-        description: descriptions["live,modified"]!,
-      };
-    }
-    // Draft/archived with content changes — no second dot
-    return {
-      dots: [{ color: mainStatus as StatusColor }],
-      label,
-      description: `${mainStatus} — with edits`,
-    };
-  }
-
-  // Fully synced
-  return {
-    dots: [{ color: mainStatus as StatusColor }],
-    label: null,
-    description: descriptions[mainStatus] ?? mainStatus,
-  };
-}
-
-interface StatusDotsProps {
-  mainStatus: string | null;
-  savedStatus: string;
-  contentDiffers: boolean;
-  isLocalOnly: boolean;
-}
-
-export function StatusDots(props: StatusDotsProps) {
-  const { dots, label, description } = deriveStatusDots(props);
-  const [open, setOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  return (
-    <div className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        className="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"
-        aria-label={description}
-      >
-        <span className="flex -space-x-1">
-          {dots.map((dot, i) => (
-            <span
-              key={i}
-              aria-hidden="true"
-              className={cn("h-3 w-3 rounded-full border border-base", dotColorClasses[dot.color])}
-            />
-          ))}
-        </span>
-        {label && <span className="opacity-70">(unsaved)</span>}
-      </button>
-
-      <Popover isOpen={open} onClose={() => setOpen(false)} anchorRef={buttonRef} align="end" className="w-56">
-        <div className="px-3 py-2 text-xs text-base-contrast">
-          {description}
-        </div>
-      </Popover>
-    </div>
-  );
-}

package/src/components/editor/StatusPicker.tsx

@@ -1,86 +0,0 @@
-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";
-
-type Status = "draft" | "live" | "archived";
-
-interface Props {
-  status: Status;
-  dirty?: boolean;
-  onChange: (status: Status) => void;
-}
-
-const STATUSES: Status[] = ["draft", "live", "archived"];
-
-const statusClasses: Record<Status, string> = {
-  live: "bg-status-live-bg text-status-live-text",
-  draft: "bg-status-draft-bg text-status-draft-text",
-  archived: "bg-status-archived-bg text-status-archived-text",
-};
-
-const dotClasses: Record<Status, string> = {
-  live: "bg-green-500",
-  draft: "bg-gray-400",
-  archived: "bg-white",
-};
-
-export function StatusPicker({ status, dirty, onChange }: Props) {
-  const [open, setOpen] = useState(false);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  function handleSelect(next: Status) {
-    if (next !== status) onChange(next);
-    setOpen(false);
-  }
-
-  return (
-    <div className="relative">
-      <button
-        ref={buttonRef}
-        type="button"
-        onClick={() => setOpen((v) => !v)}
-        aria-haspopup="true"
-        aria-expanded={open}
-        className={cn(
-          "cursor-pointer rounded-full px-2 py-0.5 text-xs font-medium",
-          statusClasses[status] ?? statusClasses.archived,
-        )}
-      >
-        {status}
-        {dirty && <span className="ml-1 opacity-70">· Unsaved</span>}
-      </button>
-
-      <Popover
-        isOpen={open}
-        onClose={() => setOpen(false)}
-        anchorRef={buttonRef}
-        align="end"
-        className="w-44"
-      >
-        <ul role="radiogroup" aria-label="Section status" className="py-1">
-          {STATUSES.map((s) => {
-            const checked = s === status;
-            return (
-              <li key={s}>
-                <PopoverItem
-                  role="radio"
-                  aria-checked={checked}
-                  onClick={() => handleSelect(s)}
-                >
-                  <span
-                    aria-hidden="true"
-                    className={cn("h-3 w-3 shrink-0 rounded-full border border-base-200", dotClasses[s])}
-                  />
-                  <span className="flex-1 text-sm font-medium capitalize text-base-contrast">{s}</span>
-                  {checked && <Check size={14} strokeWidth={3} className="text-primary" />}
-                </PopoverItem>
-              </li>
-            );
-          })}
-        </ul>
-      </Popover>
-    </div>
-  );
-}