@pantheon-systems/puck-css 0.4.0

package/dist/collaboration/useSitePresence.js

@@ -0,0 +1,94 @@
+/**
+ * useSitePresence Hook
+ *
+ * Provides site-level presence aggregation with polling.
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { usePresenceContext } from '../core/PresenceContext.js';
+/**
+ * Hook for consuming site-level presence data.
+ *
+ * @param options - Configuration options
+ * @returns Site presence state and operations
+ *
+ * @example
+ * ```tsx
+ * function SiteCollaborators() {
+ *   const { presence, activeBranches, totalActors } = useSitePresence();
+ *
+ *   return (
+ *     <div>
+ *       <span>{totalActors} collaborators on this site</span>
+ *       {activeBranches.map(branch => (
+ *         <BranchBadge key={branch.branchId} name={branch.branchName} />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSitePresence(options = {}) {
+    const { pollingInterval = 10000 } = options;
+    const { client, siteId } = usePresenceContext();
+    const [presence, setPresence] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Track mounted state to avoid state updates after unmount
+    const mountedRef = useRef(true);
+    // Ref for fetchPresence to avoid restarting polling interval
+    const fetchPresenceRef = useRef(async () => { });
+    // Fetch presence data
+    const fetchPresence = useCallback(async () => {
+        try {
+            const sitePresence = await client.presence.getSitePresence(siteId);
+            if (!mountedRef.current)
+                return;
+            setPresence(sitePresence);
+            setError(null);
+        }
+        catch (err) {
+            if (!mountedRef.current)
+                return;
+            setError(err instanceof Error ? err : new Error(String(err)));
+        }
+        finally {
+            if (mountedRef.current) {
+                setIsLoading(false);
+            }
+        }
+    }, [client, siteId]);
+    // Keep ref in sync with callback
+    useEffect(() => {
+        fetchPresenceRef.current = fetchPresence;
+    }, [fetchPresence]);
+    // Manual refresh function
+    const refresh = useCallback(async () => {
+        await fetchPresence();
+    }, [fetchPresence]);
+    // Initial fetch and polling
+    useEffect(() => {
+        mountedRef.current = true;
+        // Initial fetch
+        void fetchPresenceRef.current();
+        // Set up polling - use ref to avoid restarting interval when callback changes
+        const intervalId = setInterval(() => {
+            void fetchPresenceRef.current();
+        }, pollingInterval);
+        return () => {
+            mountedRef.current = false;
+            clearInterval(intervalId);
+        };
+    }, [pollingInterval]);
+    // Derived values
+    const activeBranches = presence?.branches ?? [];
+    const totalActors = presence?.summary.totalActors ?? 0;
+    return {
+        presence,
+        activeBranches,
+        totalActors,
+        isLoading,
+        error,
+        refresh,
+    };
+}
+//# sourceMappingURL=useSitePresence.js.map

package/dist/collaboration/useSitePresence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSitePresence.js","sourceRoot":"","sources":["../../src/collaboration/useSitePresence.ts"],"names":[],"mappings":"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"}

package/dist/collaboration/utils/avatarColor.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+/** Returns a stable HSL color string for a given user/actor ID. */
+export declare function getAvatarColor(id: string): string;
+/**
+ * Returns a React style object that overrides all PDS Avatar gradient CSS custom
+ * properties with our stable per-user color. PDS Avatar v2 picks one of 16
+ * --pds-gradient-avatar-* variables based on uniqueId; overriding all of them
+ * ensures our color wins regardless of which the component selects.
+ */
+export declare function getAvatarStyleOverride(id: string): React.CSSProperties;
+//# sourceMappingURL=avatarColor.d.ts.map

package/dist/collaboration/utils/avatarColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarColor.d.ts","sourceRoot":"","sources":["../../../src/collaboration/utils/avatarColor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,mEAAmE;AACnE,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAGjD;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,MAAM,GAAG,KAAK,CAAC,aAAa,CAsBtE"}

package/dist/collaboration/utils/avatarColor.js

@@ -0,0 +1,42 @@
+function hashString(str) {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash * 33) ^ str.charCodeAt(i);
+    }
+    return hash >>> 0;
+}
+/** Returns a stable HSL color string for a given user/actor ID. */
+export function getAvatarColor(id) {
+    const hue = hashString(id) % 360;
+    return `hsl(${hue}, 65%, 45%)`;
+}
+/**
+ * Returns a React style object that overrides all PDS Avatar gradient CSS custom
+ * properties with our stable per-user color. PDS Avatar v2 picks one of 16
+ * --pds-gradient-avatar-* variables based on uniqueId; overriding all of them
+ * ensures our color wins regardless of which the component selects.
+ */
+export function getAvatarStyleOverride(id) {
+    const color = getAvatarColor(id);
+    // PDS Avatar uses background-image, so the value must be a valid <image> type.
+    const gradient = `linear-gradient(${color}, ${color})`;
+    return {
+        '--pds-gradient-avatar-midnight': gradient,
+        '--pds-gradient-avatar-twilight': gradient,
+        '--pds-gradient-avatar-sunrise': gradient,
+        '--pds-gradient-avatar-dawn': gradient,
+        '--pds-gradient-avatar-sundown': gradient,
+        '--pds-gradient-avatar-dusk': gradient,
+        '--pds-gradient-avatar-plum': gradient,
+        '--pds-gradient-avatar-grape': gradient,
+        '--pds-gradient-avatar-dragonfruit': gradient,
+        '--pds-gradient-avatar-winter': gradient,
+        '--pds-gradient-avatar-spring': gradient,
+        '--pds-gradient-avatar-summer': gradient,
+        '--pds-gradient-avatar-fall': gradient,
+        '--pds-gradient-avatar-earth': gradient,
+        '--pds-gradient-avatar-moon': gradient,
+        '--pds-gradient-avatar-sun': gradient,
+    };
+}
+//# sourceMappingURL=avatarColor.js.map

package/dist/collaboration/utils/avatarColor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatarColor.js","sourceRoot":"","sources":["../../../src/collaboration/utils/avatarColor.ts"],"names":[],"mappings":"AAEA,SAAS,UAAU,CAAC,GAAW;IAC7B,IAAI,IAAI,GAAG,IAAI,CAAC;IAChB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACpC,IAAI,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACzC,CAAC;IACD,OAAO,IAAI,KAAK,CAAC,CAAC;AACpB,CAAC;AAED,mEAAmE;AACnE,MAAM,UAAU,cAAc,CAAC,EAAU;IACvC,MAAM,GAAG,GAAG,UAAU,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC;IACjC,OAAO,OAAO,GAAG,aAAa,CAAC;AACjC,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,EAAU;IAC/C,MAAM,KAAK,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;IACjC,+EAA+E;IAC/E,MAAM,QAAQ,GAAG,mBAAmB,KAAK,KAAK,KAAK,GAAG,CAAC;IACvD,OAAO;QACL,gCAAgC,EAAE,QAAQ;QAC1C,gCAAgC,EAAE,QAAQ;QAC1C,+BAA+B,EAAE,QAAQ;QACzC,4BAA4B,EAAE,QAAQ;QACtC,+BAA+B,EAAE,QAAQ;QACzC,4BAA4B,EAAE,QAAQ;QACtC,4BAA4B,EAAE,QAAQ;QACtC,6BAA6B,EAAE,QAAQ;QACvC,mCAAmC,EAAE,QAAQ;QAC7C,8BAA8B,EAAE,QAAQ;QACxC,8BAA8B,EAAE,QAAQ;QACxC,8BAA8B,EAAE,QAAQ;QACxC,4BAA4B,EAAE,QAAQ;QACtC,6BAA6B,EAAE,QAAQ;QACvC,4BAA4B,EAAE,QAAQ;QACtC,2BAA2B,EAAE,QAAQ;KACf,CAAC;AAC3B,CAAC"}

package/dist/collaboration/utils/focusHighlightConfig.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Focus Highlight Config Utility
+ *
+ * Creates a Puck config wrapper that adds visual focus highlighting
+ * to show which components other actors are viewing or editing.
+ *
+ * IMPORTANT: This utility supports two modes:
+ * 1. Context-based (preferred): Create config once, use FocusHighlightProvider to update highlights
+ * 2. Direct focusMap (legacy): Pass focusMap directly, config recreated on each change
+ *
+ * The context-based approach prevents Puck re-renders when focus regions change.
+ */
+import type { FocusHighlight } from './focusRegionMap.js';
+/**
+ * Puck Config structure (flexible to accept Puck's Config type)
+ */
+export type PuckConfig = Record<string, any>;
+/**
+ * Creates a Puck config with focus highlight wrappers.
+ *
+ * When used with FocusHighlightProvider (context mode), the config only needs
+ * to be created once - highlights update via context without config recreation.
+ *
+ * When used without FocusHighlightProvider (legacy mode), pass focusMap directly
+ * but this will cause config recreation on every focusMap change.
+ *
+ * @param config - The original Puck config
+ * @param focusMap - Optional static focusMap for legacy mode (prefer using context instead)
+ * @returns A new config with wrapped render functions that add focus highlighting
+ *
+ * @example Context mode (preferred - no flicker):
+ * ```tsx
+ * // Create config once with no focusMap
+ * const highlightedConfig = useMemo(
+ *   () => createFocusHighlightConfig(baseConfig),
+ *   [baseConfig]
+ * );
+ *
+ * // Wrap Puck with provider that can update without config recreation
+ * <FocusHighlightProvider focusMap={focusMap}>
+ *   <Puck config={highlightedConfig} data={data} />
+ * </FocusHighlightProvider>
+ * ```
+ *
+ * @example Legacy mode (may cause flicker):
+ * ```tsx
+ * const focusMap = createFocusRegionMap(puckData, otherActors);
+ * const highlightedConfig = createFocusHighlightConfig(baseConfig, focusMap);
+ *
+ * <Puck config={highlightedConfig} data={data} />
+ * ```
+ */
+export declare function createFocusHighlightConfig(config: PuckConfig, focusMap?: Map<string, FocusHighlight>): PuckConfig;
+//# sourceMappingURL=focusHighlightConfig.d.ts.map

package/dist/collaboration/utils/focusHighlightConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusHighlightConfig.d.ts","sourceRoot":"","sources":["../../../src/collaboration/utils/focusHighlightConfig.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAG1D;;GAEG;AAEH,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AA4C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,0BAA0B,CACxC,MAAM,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,GACrC,UAAU,CAmCZ"}

package/dist/collaboration/utils/focusHighlightConfig.js

@@ -0,0 +1,98 @@
+/**
+ * Focus Highlight Config Utility
+ *
+ * Creates a Puck config wrapper that adds visual focus highlighting
+ * to show which components other actors are viewing or editing.
+ *
+ * IMPORTANT: This utility supports two modes:
+ * 1. Context-based (preferred): Create config once, use FocusHighlightProvider to update highlights
+ * 2. Direct focusMap (legacy): Pass focusMap directly, config recreated on each change
+ *
+ * The context-based approach prevents Puck re-renders when focus regions change.
+ */
+import React from 'react';
+import { FocusHighlightContext } from '../../core/FocusHighlightContext.js';
+/**
+ * Component wrapper that renders focus highlight from context.
+ * This allows the highlight to change without recreating the config.
+ */
+function FocusHighlightWrapper({ id, children, staticFocus, }) {
+    // Try context first (for dynamic updates without config recreation)
+    const context = React.useContext(FocusHighlightContext);
+    const focus = context?.focusMap.get(id) ?? staticFocus;
+    // Always render a stable wrapper div AND badge to avoid DOM insertions/removals
+    // that can trigger browser scroll-into-view behavior.
+    // When not focused, the wrapper has no visual effect and badge is hidden via CSS.
+    const className = focus
+        ? (focus.isEditing
+            ? 'focus-region-highlight focus-region-highlight--editing'
+            : 'focus-region-highlight')
+        : 'focus-region-highlight focus-region-highlight--inactive';
+    return React.createElement('div', {
+        className,
+        style: focus ? { '--focus-color': focus.color } : undefined,
+        'data-actor-id': focus?.actorId,
+    }, children, React.createElement('div', { className: 'focus-region-highlight__badge' }, focus ? focus.actorName.charAt(0).toUpperCase() : ''));
+}
+/**
+ * Creates a Puck config with focus highlight wrappers.
+ *
+ * When used with FocusHighlightProvider (context mode), the config only needs
+ * to be created once - highlights update via context without config recreation.
+ *
+ * When used without FocusHighlightProvider (legacy mode), pass focusMap directly
+ * but this will cause config recreation on every focusMap change.
+ *
+ * @param config - The original Puck config
+ * @param focusMap - Optional static focusMap for legacy mode (prefer using context instead)
+ * @returns A new config with wrapped render functions that add focus highlighting
+ *
+ * @example Context mode (preferred - no flicker):
+ * ```tsx
+ * // Create config once with no focusMap
+ * const highlightedConfig = useMemo(
+ *   () => createFocusHighlightConfig(baseConfig),
+ *   [baseConfig]
+ * );
+ *
+ * // Wrap Puck with provider that can update without config recreation
+ * <FocusHighlightProvider focusMap={focusMap}>
+ *   <Puck config={highlightedConfig} data={data} />
+ * </FocusHighlightProvider>
+ * ```
+ *
+ * @example Legacy mode (may cause flicker):
+ * ```tsx
+ * const focusMap = createFocusRegionMap(puckData, otherActors);
+ * const highlightedConfig = createFocusHighlightConfig(baseConfig, focusMap);
+ *
+ * <Puck config={highlightedConfig} data={data} />
+ * ```
+ */
+export function createFocusHighlightConfig(config, focusMap) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const wrappedComponents = {};
+    const components = config.components;
+    for (const [componentName, componentConfig] of Object.entries(components)) {
+        // Cast render to the function type we need
+        const originalRender = componentConfig.render;
+        wrappedComponents[componentName] = {
+            ...componentConfig,
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            render: (props) => {
+                const id = props.id;
+                const renderedContent = originalRender(props);
+                // Use wrapper component for context-based focus detection
+                // Pass static focus for legacy mode fallback
+                // eslint-disable-next-line react/no-children-prop
+                return React.createElement(FocusHighlightWrapper, {
+                    id,
+                    staticFocus: focusMap?.get(id),
+                    children: renderedContent,
+                });
+            },
+        };
+    }
+    return { ...config, components: wrappedComponents };
+}
+//# sourceMappingURL=focusHighlightConfig.js.map

package/dist/collaboration/utils/focusHighlightConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusHighlightConfig.js","sourceRoot":"","sources":["../../../src/collaboration/utils/focusHighlightConfig.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAQ5E;;;GAGG;AACH,SAAS,qBAAqB,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,WAAW,GAKZ;IACC,oEAAoE;IACpE,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC;IACxD,MAAM,KAAK,GAAG,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,WAAW,CAAC;IAEvD,gFAAgF;IAChF,sDAAsD;IACtD,kFAAkF;IAClF,MAAM,SAAS,GAAG,KAAK;QACrB,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS;YACd,CAAC,CAAC,wDAAwD;YAC1D,CAAC,CAAC,wBAAwB,CAAC;QAC/B,CAAC,CAAC,yDAAyD,CAAC;IAE9D,OAAO,KAAK,CAAC,aAAa,CACxB,KAAK,EACL;QACE,SAAS;QACT,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,KAAK,EAAyB,CAAC,CAAC,CAAC,SAAS;QAClF,eAAe,EAAE,KAAK,EAAE,OAAO;KAChC,EACD,QAAQ,EACR,KAAK,CAAC,aAAa,CACjB,KAAK,EACL,EAAE,SAAS,EAAE,+BAA+B,EAAE,EAC9C,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CACrD,CACF,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,0BAA0B,CACxC,MAAkB,EAClB,QAAsC;IAEtC,8DAA8D;IAC9D,MAAM,iBAAiB,GAAwB,EAAE,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAC,UAAiD,CAAC;IAE5E,KAAK,MAAM,CAAC,aAAa,EAAE,eAAe,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC;QAC1E,2CAA2C;QAC3C,MAAM,cAAc,GAAG,eAAe,CAAC,MAGnB,CAAC;QAErB,iBAAiB,CAAC,aAAa,CAAC,GAAG;YACjC,GAAG,eAAe;YAClB,8DAA8D;YAC9D,MAAM,EAAE,CAAC,KAAU,EAAE,EAAE;gBACrB,MAAM,EAAE,GAAG,KAAK,CAAC,EAAY,CAAC;gBAC9B,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;gBAE9C,0DAA0D;gBAC1D,6CAA6C;gBAC7C,kDAAkD;gBAClD,OAAO,KAAK,CAAC,aAAa,CACxB,qBAAqB,EACrB;oBACE,EAAE;oBACF,WAAW,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC;oBAC9B,QAAQ,EAAE,eAAe;iBAC1B,CACF,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC;IAED,OAAO,EAAE,GAAG,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC;AACtD,CAAC"}

package/dist/collaboration/utils/focusRegionMap.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Focus Region Map Utilities
+ *
+ * Utilities for mapping focus region paths to component IDs
+ * and creating focus highlight information from actor presence data.
+ */
+import type { PuckData, ActorPresence } from '@pantheon-systems/css-client';
+/**
+ * Information about a focus highlight for a component.
+ */
+export interface FocusHighlight {
+    /** Actor ID who has focus on this component */
+    actorId: string;
+    /** Actor display name */
+    actorName: string;
+    /** Color to use for highlighting (hex format) */
+    color: string;
+    /** Whether the actor is actively editing (vs just viewing) */
+    isEditing: boolean;
+}
+/**
+ * Convert a focus region path to a component ID.
+ *
+ * Supported path formats:
+ * - "/content/N" - Content array at index N
+ * - "/zones/ZoneName/N" - Zone array at index N
+ *
+ * @param data - Puck data containing content and zones
+ * @param path - Focus region path (e.g., "/content/0" or "/zones/Header:left/1")
+ * @returns Component ID if found, null otherwise
+ *
+ * @example
+ * ```typescript
+ * const id = pathToComponentId(puckData, '/content/0');
+ * // Returns the ID of the first component in content array
+ *
+ * const zoneId = pathToComponentId(puckData, '/zones/Header:left/0');
+ * // Returns the ID of the first component in Header:left zone
+ * ```
+ */
+export declare function pathToComponentId(data: PuckData, path: string): string | null;
+/**
+ * Create a map of component IDs to focus highlight information.
+ *
+ * Processes actor presence data to determine which components are being
+ * focused on by which actors, including their display info and state.
+ *
+ * @param data - Puck data containing content and zones
+ * @param actors - Array of actor presence information
+ * @returns Map from component ID to focus highlight info
+ *
+ * @example
+ * ```typescript
+ * const focusMap = createFocusRegionMap(puckData, otherActors);
+ *
+ * // Check if a component is focused
+ * const highlight = focusMap.get('hero-component-1');
+ * if (highlight) {
+ *   console.log(`${highlight.actorName} is ${highlight.isEditing ? 'editing' : 'viewing'}`);
+ * }
+ * ```
+ */
+export declare function createFocusRegionMap(data: PuckData, actors: ActorPresence[]): Map<string, FocusHighlight>;
+/**
+ * Generate a consistent color from an actor ID.
+ *
+ * Uses the djb2 hash algorithm to generate a hex color that:
+ * - Is deterministic (same ID always produces same color)
+ * - Matches the avatar color algorithm in CollaboratorAvatars.tsx
+ * - Has consistent saturation (65%) and lightness (45%) for readability
+ *
+ * @param actorId - Actor identifier
+ * @returns Hex color string (e.g., "#6366f1")
+ *
+ * @example
+ * ```typescript
+ * const color = generateActorColor('user-alice');
+ * // Returns a consistent hex color for this actor
+ * ```
+ */
+export declare function generateActorColor(actorId: string): string;
+//# sourceMappingURL=focusRegionMap.d.ts.map

package/dist/collaboration/utils/focusRegionMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusRegionMap.d.ts","sourceRoot":"","sources":["../../../src/collaboration/utils/focusRegionMap.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,OAAO,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CA4C7E;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,QAAQ,EACd,MAAM,EAAE,aAAa,EAAE,GACtB,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,CA0B7B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAgB1D"}

package/dist/collaboration/utils/focusRegionMap.js

@@ -0,0 +1,188 @@
+/**
+ * Focus Region Map Utilities
+ *
+ * Utilities for mapping focus region paths to component IDs
+ * and creating focus highlight information from actor presence data.
+ */
+/**
+ * Convert a focus region path to a component ID.
+ *
+ * Supported path formats:
+ * - "/content/N" - Content array at index N
+ * - "/zones/ZoneName/N" - Zone array at index N
+ *
+ * @param data - Puck data containing content and zones
+ * @param path - Focus region path (e.g., "/content/0" or "/zones/Header:left/1")
+ * @returns Component ID if found, null otherwise
+ *
+ * @example
+ * ```typescript
+ * const id = pathToComponentId(puckData, '/content/0');
+ * // Returns the ID of the first component in content array
+ *
+ * const zoneId = pathToComponentId(puckData, '/zones/Header:left/0');
+ * // Returns the ID of the first component in Header:left zone
+ * ```
+ */
+export function pathToComponentId(data, path) {
+    if (!path || path.length === 0) {
+        return null;
+    }
+    // Parse content paths: /content/N
+    const contentMatch = path.match(/^\/content\/(\d+)$/);
+    if (contentMatch && contentMatch[1] !== undefined) {
+        const index = parseInt(contentMatch[1], 10);
+        const component = data.content[index];
+        return component?.props?.id ?? null;
+    }
+    // Parse Puck's root zone path: /root/default-zone/N
+    // Puck uses "root:default-zone" internally for the main content area
+    const rootZoneMatch = path.match(/^\/root\/default-zone\/(\d+)$/);
+    if (rootZoneMatch && rootZoneMatch[1] !== undefined) {
+        const index = parseInt(rootZoneMatch[1], 10);
+        const component = data.content[index];
+        return component?.props?.id ?? null;
+    }
+    // Parse zone paths: /zones/ZoneName/N
+    // Zone names can contain colons (e.g., "Header:left")
+    const zoneMatch = path.match(/^\/zones\/(.+)\/(\d+)$/);
+    if (zoneMatch && zoneMatch[1] !== undefined && zoneMatch[2] !== undefined) {
+        const zoneName = zoneMatch[1];
+        const index = parseInt(zoneMatch[2], 10);
+        if (!data.zones) {
+            return null;
+        }
+        const zone = data.zones[zoneName];
+        if (!zone) {
+            return null;
+        }
+        const component = zone[index];
+        return component?.props?.id ?? null;
+    }
+    // Unknown path format
+    return null;
+}
+/**
+ * Create a map of component IDs to focus highlight information.
+ *
+ * Processes actor presence data to determine which components are being
+ * focused on by which actors, including their display info and state.
+ *
+ * @param data - Puck data containing content and zones
+ * @param actors - Array of actor presence information
+ * @returns Map from component ID to focus highlight info
+ *
+ * @example
+ * ```typescript
+ * const focusMap = createFocusRegionMap(puckData, otherActors);
+ *
+ * // Check if a component is focused
+ * const highlight = focusMap.get('hero-component-1');
+ * if (highlight) {
+ *   console.log(`${highlight.actorName} is ${highlight.isEditing ? 'editing' : 'viewing'}`);
+ * }
+ * ```
+ */
+export function createFocusRegionMap(data, actors) {
+    const map = new Map();
+    for (const actor of actors) {
+        const focusRegions = actor.focusRegions ?? [];
+        for (const path of focusRegions) {
+            const componentId = pathToComponentId(data, path);
+            if (componentId === null) {
+                // Skip invalid paths
+                continue;
+            }
+            // Create highlight info for this component
+            const highlight = {
+                actorId: actor.actorId,
+                actorName: actor.name,
+                color: generateActorColor(actor.actorId),
+                isEditing: actor.state === 'editing',
+            };
+            map.set(componentId, highlight);
+        }
+    }
+    return map;
+}
+/**
+ * Generate a consistent color from an actor ID.
+ *
+ * Uses the djb2 hash algorithm to generate a hex color that:
+ * - Is deterministic (same ID always produces same color)
+ * - Matches the avatar color algorithm in CollaboratorAvatars.tsx
+ * - Has consistent saturation (65%) and lightness (45%) for readability
+ *
+ * @param actorId - Actor identifier
+ * @returns Hex color string (e.g., "#6366f1")
+ *
+ * @example
+ * ```typescript
+ * const color = generateActorColor('user-alice');
+ * // Returns a consistent hex color for this actor
+ * ```
+ */
+export function generateActorColor(actorId) {
+    // djb2 hash algorithm - must match CollaboratorAvatars.tsx for consistent colors
+    let hash = 5381;
+    for (let i = 0; i < actorId.length; i++) {
+        hash = (hash * 33) ^ actorId.charCodeAt(i);
+    }
+    hash = hash >>> 0; // Convert to unsigned 32-bit integer
+    // Use hash to generate HSL color with fixed saturation/lightness
+    // Must match CollaboratorAvatars.tsx: hsl(hue, 65%, 45%)
+    const hue = hash % 360;
+    const saturation = 65;
+    const lightness = 45;
+    // Convert HSL to hex
+    return hslToHex(hue, saturation, lightness);
+}
+/**
+ * Convert HSL color to hex string.
+ */
+function hslToHex(h, s, l) {
+    const sNorm = s / 100;
+    const lNorm = l / 100;
+    const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+    const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+    const m = lNorm - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h >= 0 && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (h >= 60 && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (h >= 120 && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (h >= 180 && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (h >= 240 && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    const toHex = (n) => {
+        const hex = Math.round((n + m) * 255).toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+//# sourceMappingURL=focusRegionMap.js.map

package/dist/collaboration/utils/focusRegionMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusRegionMap.js","sourceRoot":"","sources":["../../../src/collaboration/utils/focusRegionMap.ts"],"names":[],"mappings":"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"}

package/dist/core/FocusHighlightContext.d.ts

@@ -0,0 +1,54 @@
+/**
+ * FocusHighlightContext
+ *
+ * Provides focus highlight state to components without requiring config recreation.
+ * This context allows the focusMap to change without recreating Puck config,
+ * which prevents flickering during collaborative editing.
+ */
+import React from 'react';
+import type { FocusHighlight } from '../collaboration/utils/focusRegionMap.js';
+/**
+ * Context value for focus highlighting.
+ */
+export interface FocusHighlightContextValue {
+    /** Map of component IDs to their focus highlight info */
+    focusMap: Map<string, FocusHighlight>;
+}
+/**
+ * Context for providing focus highlight state to wrapped components.
+ */
+export declare const FocusHighlightContext: React.Context<FocusHighlightContextValue | null>;
+/**
+ * Props for FocusHighlightProvider.
+ */
+export interface FocusHighlightProviderProps {
+    /** Map of component IDs to their focus highlight info */
+    focusMap: Map<string, FocusHighlight>;
+    /** Child components */
+    children: React.ReactNode;
+}
+/**
+ * Provider for focus highlight context.
+ * Wrap your Puck editor with this to enable focus highlighting without config recreation.
+ *
+ * @example
+ * ```tsx
+ * const focusMap = createFocusRegionMap(data, otherActors);
+ *
+ * <FocusHighlightProvider focusMap={focusMap}>
+ *   <Puck config={stableConfig} data={data} />
+ * </FocusHighlightProvider>
+ * ```
+ */
+export declare function FocusHighlightProvider({ focusMap, children, }: FocusHighlightProviderProps): React.ReactElement;
+/**
+ * Hook to access focus highlight context.
+ * Returns null if not within a FocusHighlightProvider.
+ */
+export declare function useFocusHighlight(): FocusHighlightContextValue | null;
+/**
+ * Hook to get focus highlight for a specific component ID.
+ * Returns undefined if the component has no focus highlight.
+ */
+export declare function useFocusHighlightForComponent(id: string): FocusHighlight | undefined;
+//# sourceMappingURL=FocusHighlightContext.d.ts.map