@drawnagency/primitives 0.1.87 → 0.1.88

package/src/components/brandguide/ColorsView.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { containerGridClass } from "../../lib/container-grid";
+import { getContrastClass } from "./colors-shared";
+import type { ColorItem } from "../sections/Colors/schema";
+
+export default function ColorsView({
+  colors,
+  columns,
+  label,
+  collapsing,
+  showLabel,
+}: {
+  colors: ColorItem[];
+  columns: number;
+  label?: string;
+  collapsing?: boolean;
+  showLabel?: boolean;
+}) {
+  const [expanded, setExpanded] = useState(!collapsing);
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+  const handleCopy = (value: string, colorIndex: number) => {
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(value);
+    } else {
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
+    setCopiedIndex(colorIndex);
+    setTimeout(() => setCopiedIndex(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="@container">
+        <div className={cn("grid gap-4", containerGridClass[columns] || containerGridClass[3])}>
+          {colors.map((color, i) => {
+            const hex = color.spaces[0]?.hex;
+            const contrast = getContrastClass(hex);
+            return (
+              <div key={i} className="flex h-full flex-col overflow-hidden rounded-outer border border-base-200">
+                <div className={cn("relative flex min-h-[80px] items-end p-3", contrast)} style={{ backgroundColor: hex || "#ccc" }}>
+                  {color.name && <span className="text-sm font-bold">{color.name}</span>}
+                  {copiedIndex === i && (
+                    <span className={cn(
+                      "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
+                      getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white",
+                    )}>
+                      Copied!
+                    </span>
+                  )}
+                </div>
+                {expanded && (
+                  // flex-1 so every swatch's label block grows to the tallest in its row.
+                  <div className="flex-1 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, i)} className="cursor-pointer flex w-full justify-between hover:text-primary">
+                            <span className="font-medium uppercase">{key}</span>
+                            <span>{value}</span>
+                          </button>
+                        ) : null
+                      )
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/brandguide/colors-shared.ts

@@ -0,0 +1,17 @@
+import type { ColorItem } from "../sections/Colors/schema";
+
+export 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";
+}
+
+export const createColorItem = (): ColorItem => ({
+  name: "",
+  spaces: [{ hex: "#cccccc" }],
+});

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

@@ -24,6 +24,7 @@ const schema = z.object({
 
 export default defineSection({
   type: "colors",
+  interactive: true,
   category: "brand-guide",
   label: "Colors",
   icon: <Palette size={18} />,

package/src/components/sections/SectionIsland.tsx

@@ -0,0 +1,21 @@
+import { ensureSectionsRegistered } from "./register";
+import { getSection } from "../../lib/registry";
+
+// Registering on import means the registry is populated both during SSR of the
+// island and after it hydrates client-side (register runs again in the browser
+// bundle; the Symbol.for-keyed singleton dedupes).
+ensureSectionsRegistered();
+
+interface Props {
+  type: string;
+  content: unknown;
+  options?: Record<string, unknown>;
+}
+
+export default function SectionIsland({ type, content, options }: Props) {
+  const def = getSection(type);
+  if (!def) return null;
+  const Component = def.component;
+  // Viewer mode: no onChange / openModal callbacks -> the view (not editable) path.
+  return <Component content={content} options={options} isEditMode={false} />;
+}

package/src/hooks/useCollabSession.ts

@@ -5,6 +5,13 @@ import type {
 } from "../collab/types";
 
 const REJOIN_DELAYS_MS = [5_000, 15_000, 30_000, 60_000];
+// Circuit breaker: after this many consecutive failed rejoins (~3.5 min of
+// backoff), stop the auto-rejoin loop and stay in solo mode rather than retry
+// forever — an unbounded reconnect loop is itself a way to hammer the backend.
+// Refocusing the tab (visibilitychange → visible) resets the breaker and
+// retries, so a user returning to a long-idle/offline tab reconnects without a
+// manual reload.
+const MAX_REJOIN_ATTEMPTS = 6;
 
 export interface UseCollabSessionArgs {
   provider: CollabProvider | null;
@@ -129,14 +136,34 @@ export function useCollabSession(args: UseCollabSessionArgs): UseCollabSessionRe
       // race two concurrent joins into two sessions, and the orphaned timer
       // would survive unmount (the cleanup only clears the tracked one).
       if (timer) clearTimeout(timer);
+      // Circuit breaker: give up after a capped number of consecutive failures
+      // rather than rejoin forever. onVisible() below rearms it on refocus.
+      if (attempt >= MAX_REJOIN_ATTEMPTS) {
+        console.warn(`Collab: stopped auto-rejoining after ${attempt} consecutive failures; staying solo until the tab is refocused.`);
+        return;
+      }
       const delay = REJOIN_DELAYS_MS[Math.min(attempt, REJOIN_DELAYS_MS.length - 1)];
       attempt += 1;
       timer = setTimeout(() => { timer = null; void join(); }, delay);
     }
 
+    // Rearm the breaker (and reconnect immediately) when the user tabs back to
+    // a disconnected editor — the common recovery from a laptop-sleep / network
+    // blip that exhausted the rejoin budget. No-op while already live/connecting.
+    function onVisible() {
+      if (cancelled) return;
+      if (typeof document !== "undefined" && document.visibilityState !== "visible") return;
+      if (sessionRef.current || joining) return;
+      if (timer) { clearTimeout(timer); timer = null; }
+      attempt = 0;
+      void join();
+    }
+    if (typeof document !== "undefined") document.addEventListener("visibilitychange", onVisible);
+
     void join();
     return () => {
       cancelled = true;
+      if (typeof document !== "undefined") document.removeEventListener("visibilitychange", onVisible);
       if (timer) clearTimeout(timer);
       void sessionRef.current?.disconnect().catch(() => {});
       sessionRef.current = null;

package/src/lib/registry.ts

@@ -176,6 +176,12 @@ export interface SectionDefinition<T = unknown> {
    * top-level `description`. Presentation/metadata only — not validated.
    */
   authoringNote?: string;
+  /**
+   * When true, this section must run client-side on the viewer page: the viewer
+   * renderer hydrates it as an Astro island (`client:visible`) instead of
+   * emitting static HTML. Opt-in per type; default (absent/false) stays zero-JS.
+   */
+  interactive?: boolean;
 }
 
 // --- defineSection ---
@@ -204,6 +210,7 @@ type DefineSectionInput<S extends ZodType> = {
   settingsTabs?: { label: string; fields: string[] }[];
   presets?: SectionPreset[];
   authoringNote?: string;
+  interactive?: boolean;
 };
 
 export function defineSection<S extends ZodType>(