@hamzasaleemorg/convex-comments 1.0.0

package/dist/component/zones.js

@@ -0,0 +1,159 @@
+import { v } from "convex/values";
+import { mutation, query } from "./_generated/server.js";
+// ============================================================================
+// Zone Validators
+// ============================================================================
+const zoneValidator = v.object({
+    _id: v.id("zones"),
+    _creationTime: v.number(),
+    entityId: v.string(),
+    metadata: v.optional(v.any()),
+    createdAt: v.number(),
+});
+// ============================================================================
+// Zone Functions
+// ============================================================================
+/**
+ * Get or create a zone for an entity.
+ * This is the main entry point - lazily creates a zone if it doesn't exist.
+ */
+export const getOrCreateZone = mutation({
+    args: {
+        entityId: v.string(),
+        metadata: v.optional(v.any()),
+    },
+    returns: v.id("zones"),
+    handler: async (ctx, args) => {
+        // Check if zone already exists
+        const existing = await ctx.db
+            .query("zones")
+            .withIndex("entityId", (q) => q.eq("entityId", args.entityId))
+            .first();
+        if (existing) {
+            return existing._id;
+        }
+        // Create new zone
+        const zoneId = await ctx.db.insert("zones", {
+            entityId: args.entityId,
+            metadata: args.metadata,
+            createdAt: Date.now(),
+        });
+        return zoneId;
+    },
+});
+/**
+ * List all zones with optional pagination.
+ */
+export const listZones = query({
+    args: {
+        limit: v.optional(v.number()),
+    },
+    returns: v.array(zoneValidator),
+    handler: async (ctx, args) => {
+        const limit = args.limit ?? 100;
+        return await ctx.db.query("zones").take(limit);
+    },
+});
+/**
+ * Get a zone by entity ID (without creating).
+ */
+export const getZone = query({
+    args: {
+        entityId: v.string(),
+    },
+    returns: v.union(v.null(), zoneValidator),
+    handler: async (ctx, args) => {
+        return await ctx.db
+            .query("zones")
+            .withIndex("entityId", (q) => q.eq("entityId", args.entityId))
+            .first();
+    },
+});
+/**
+ * Get a zone by its ID.
+ */
+export const getZoneById = query({
+    args: {
+        zoneId: v.id("zones"),
+    },
+    returns: v.union(v.null(), zoneValidator),
+    handler: async (ctx, args) => {
+        return await ctx.db.get(args.zoneId);
+    },
+});
+/**
+ * Update zone metadata.
+ */
+export const updateZoneMetadata = mutation({
+    args: {
+        zoneId: v.id("zones"),
+        metadata: v.any(),
+    },
+    returns: v.null(),
+    handler: async (ctx, args) => {
+        await ctx.db.patch(args.zoneId, {
+            metadata: args.metadata,
+        });
+        return null;
+    },
+});
+/**
+ * Delete a zone and all its threads/messages.
+ * Use with caution - this is a destructive operation.
+ */
+export const deleteZone = mutation({
+    args: {
+        zoneId: v.id("zones"),
+    },
+    returns: v.object({
+        deletedThreads: v.number(),
+        deletedMessages: v.number(),
+        deletedReactions: v.number(),
+    }),
+    handler: async (ctx, args) => {
+        let deletedThreads = 0;
+        let deletedMessages = 0;
+        let deletedReactions = 0;
+        // Get all threads in this zone
+        const threads = await ctx.db
+            .query("threads")
+            .withIndex("zoneId", (q) => q.eq("zoneId", args.zoneId))
+            .collect();
+        for (const thread of threads) {
+            // Get all messages in this thread
+            const messages = await ctx.db
+                .query("messages")
+                .withIndex("threadId", (q) => q.eq("threadId", thread._id))
+                .collect();
+            for (const message of messages) {
+                // Delete reactions on this message
+                const reactions = await ctx.db
+                    .query("reactions")
+                    .withIndex("messageId", (q) => q.eq("messageId", message._id))
+                    .collect();
+                for (const reaction of reactions) {
+                    await ctx.db.delete(reaction._id);
+                    deletedReactions++;
+                }
+                // Delete the message
+                await ctx.db.delete(message._id);
+                deletedMessages++;
+            }
+            // Delete typing indicators for this thread
+            const typingIndicators = await ctx.db
+                .query("typingIndicators")
+                .withIndex("threadId", (q) => q.eq("threadId", thread._id))
+                .collect();
+            for (const indicator of typingIndicators) {
+                await ctx.db.delete(indicator._id);
+            }
+            // Delete the thread
+            await ctx.db.delete(thread._id);
+            deletedThreads++;
+        }
+        // Delete the zone
+        await ctx.db.delete(args.zoneId);
+        return { deletedThreads, deletedMessages, deletedReactions };
+    },
+});
+//# sourceMappingURL=zones.js.map

package/dist/component/zones.js.map

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

package/dist/react/AddComment.d.ts

@@ -0,0 +1,57 @@
+/**
+ * AddComment Component
+ *
+ * Composer for adding new comments with mention autocomplete.
+ */
+export interface MentionableUser {
+    /** User ID */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Optional avatar URL */
+    avatar?: string;
+}
+export interface AddCommentProps {
+    /** Callback when a comment is submitted */
+    onSubmit?: (body: string, attachments?: Array<{
+        type: "url" | "file" | "image";
+        url: string;
+        name?: string;
+    }>) => void;
+    /** Callback when typing state changes */
+    onTypingChange?: (isTyping: boolean) => void;
+    /** List of users that can be mentioned */
+    mentionableUsers?: MentionableUser[];
+    /** Whether editing features are enabled */
+    allowEditing?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Initial value */
+    initialValue?: string;
+    /** Whether the composer is disabled */
+    disabled?: boolean;
+    /** Auto-focus on mount */
+    autoFocus?: boolean;
+    /** Minimum height of the textarea */
+    minHeight?: number;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Comment composer with mention autocomplete support.
+ *
+ * Usage:
+ * ```tsx
+ * <AddComment
+ *   onSubmit={(body) => addComment({ threadId, body })}
+ *   onTypingChange={(isTyping) => setIsTyping({ threadId, isTyping })}
+ *   mentionableUsers={[
+ *     { id: "user1", name: "Alice" },
+ *     { id: "user2", name: "Bob" },
+ *   ]}
+ *   placeholder="Write a comment..."
+ * />
+ * ```
+ */
+export declare function AddComment({ onSubmit, onTypingChange, mentionableUsers, placeholder, initialValue, disabled, autoFocus, minHeight, className, }: AddCommentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AddComment.d.ts.map

package/dist/react/AddComment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddComment.d.ts","sourceRoot":"","sources":["../../src/react/AddComment.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,MAAM,WAAW,eAAe;IAC5B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CACP,IAAI,EAAE,MAAM,EACZ,WAAW,CAAC,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;QAC/B,GAAG,EAAE,MAAM,CAAC;QACZ,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC,KACD,IAAI,CAAC;IACV,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,2CAA2C;IAC3C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EACvB,QAAQ,EACR,cAAc,EACd,gBAAqB,EACrB,WAAkC,EAClC,YAAiB,EACjB,QAAgB,EAChB,SAAiB,EACjB,SAAc,EACd,SAAc,GACjB,EAAE,eAAe,2CA4XjB"}

package/dist/react/AddComment.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AddComment Component
+ *
+ * Composer for adding new comments with mention autocomplete.
+ */
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useComments } from "./CommentsProvider";
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Comment composer with mention autocomplete support.
+ *
+ * Usage:
+ * ```tsx
+ * <AddComment
+ *   onSubmit={(body) => addComment({ threadId, body })}
+ *   onTypingChange={(isTyping) => setIsTyping({ threadId, isTyping })}
+ *   mentionableUsers={[
+ *     { id: "user1", name: "Alice" },
+ *     { id: "user2", name: "Bob" },
+ *   ]}
+ *   placeholder="Write a comment..."
+ * />
+ * ```
+ */
+export function AddComment({ onSubmit, onTypingChange, mentionableUsers = [], placeholder = "Write a comment...", initialValue = "", disabled = false, autoFocus = false, minHeight = 60, className = "", }) {
+    const { userId, styles } = useComments();
+    const [body, setBody] = useState(initialValue);
+    const [isTyping, setIsTyping] = useState(false);
+    const textareaRef = useRef(null);
+    const typingTimeoutRef = useRef(null);
+    // Mention autocomplete state
+    const [showMentionPicker, setShowMentionPicker] = useState(false);
+    const [mentionQuery, setMentionQuery] = useState("");
+    const [mentionStartPos, setMentionStartPos] = useState(0);
+    const [selectedMentionIndex, setSelectedMentionIndex] = useState(0);
+    const mentionPickerRef = useRef(null);
+    // Filter mentionable users based on query
+    const filteredUsers = mentionableUsers.filter((user) => user.name.toLowerCase().includes(mentionQuery.toLowerCase()) ||
+        user.id.toLowerCase().includes(mentionQuery.toLowerCase()));
+    // Debounced typing indicator
+    const updateTypingState = useCallback((typing) => {
+        if (typing !== isTyping) {
+            setIsTyping(typing);
+            onTypingChange?.(typing);
+        }
+    }, [isTyping, onTypingChange]);
+    const handleChange = (e) => {
+        const value = e.target.value;
+        const cursorPos = e.target.selectionStart;
+        setBody(value);
+        // Check for mention trigger
+        if (mentionableUsers.length > 0) {
+            // Find the last @ before cursor that's not already complete
+            const textBeforeCursor = value.slice(0, cursorPos);
+            const lastAtIndex = textBeforeCursor.lastIndexOf("@");
+            if (lastAtIndex >= 0) {
+                const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1);
+                // Check if there's no space after @ (still typing the mention)
+                if (!textAfterAt.includes(" ") && !textAfterAt.includes("\n")) {
+                    setShowMentionPicker(true);
+                    setMentionQuery(textAfterAt);
+                    setMentionStartPos(lastAtIndex);
+                    setSelectedMentionIndex(0);
+                }
+                else {
+                    setShowMentionPicker(false);
+                }
+            }
+            else {
+                setShowMentionPicker(false);
+            }
+        }
+        // Start typing indicator
+        if (value.length > 0) {
+            updateTypingState(true);
+            // Clear existing timeout
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
+            // Set new timeout to stop typing
+            typingTimeoutRef.current = setTimeout(() => {
+                updateTypingState(false);
+            }, 2000);
+        }
+        else {
+            updateTypingState(false);
+        }
+    };
+    const insertMention = (user) => {
+        const beforeMention = body.slice(0, mentionStartPos);
+        const afterMention = body.slice(mentionStartPos + 1 + mentionQuery.length);
+        const newBody = `${beforeMention}@${user.id} ${afterMention}`;
+        setBody(newBody);
+        setShowMentionPicker(false);
+        setMentionQuery("");
+        // Focus textarea and set cursor position
+        if (textareaRef.current) {
+            const newCursorPos = mentionStartPos + user.id.length + 2; // +2 for @ and space
+            textareaRef.current.focus();
+            setTimeout(() => {
+                textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+            }, 0);
+        }
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!body.trim() || disabled)
+            return;
+        // Clear typing indicator
+        updateTypingState(false);
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current);
+        }
+        onSubmit?.(body.trim());
+        setBody("");
+        setShowMentionPicker(false);
+        // Reset textarea height
+        if (textareaRef.current) {
+            textareaRef.current.style.height = `${minHeight}px`;
+        }
+    };
+    const handleKeyDown = (e) => {
+        // Handle mention picker navigation
+        if (showMentionPicker && filteredUsers.length > 0) {
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setSelectedMentionIndex((prev) => prev < filteredUsers.length - 1 ? prev + 1 : prev);
+                return;
+            }
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setSelectedMentionIndex((prev) => (prev > 0 ? prev - 1 : prev));
+                return;
+            }
+            if (e.key === "Enter" || e.key === "Tab") {
+                e.preventDefault();
+                insertMention(filteredUsers[selectedMentionIndex]);
+                return;
+            }
+            if (e.key === "Escape") {
+                e.preventDefault();
+                setShowMentionPicker(false);
+                return;
+            }
+        }
+        // Submit on Enter (without Shift)
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSubmit(e);
+        }
+    };
+    // Auto-resize textarea
+    useEffect(() => {
+        if (textareaRef.current) {
+            textareaRef.current.style.height = `${minHeight}px`;
+            textareaRef.current.style.height = `${Math.max(minHeight, textareaRef.current.scrollHeight)}px`;
+        }
+    }, [body, minHeight]);
+    // Cleanup typing timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current);
+            }
+            if (isTyping) {
+                onTypingChange?.(false);
+            }
+        };
+    }, [isTyping, onTypingChange]);
+    // Close mention picker on click outside
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (mentionPickerRef.current &&
+                !mentionPickerRef.current.contains(e.target) &&
+                textareaRef.current &&
+                !textareaRef.current.contains(e.target)) {
+                setShowMentionPicker(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    if (!userId) {
+        return (_jsx("div", { className: className, style: {
+                padding: "12px 16px",
+                textAlign: "center",
+                color: "#6b7280",
+                fontSize: "13px",
+            }, children: "Sign in to comment" }));
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit, className: `add-comment ${className}`, style: {
+            padding: "12px",
+        }, children: [_jsxs("div", { style: { position: "relative" }, children: [_jsx("textarea", { ref: textareaRef, value: body, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, autoFocus: autoFocus, style: {
+                            width: "100%",
+                            padding: "10px 12px",
+                            paddingRight: "80px",
+                            border: "1px solid #d1d5db",
+                            borderRadius: styles?.borderRadius ?? "8px",
+                            fontSize: "14px",
+                            fontFamily: styles?.fontFamily ?? "inherit",
+                            resize: "none",
+                            minHeight: `${minHeight}px`,
+                            outline: "none",
+                            transition: "border-color 0.15s",
+                        }, onFocus: (e) => {
+                            e.target.style.borderColor = styles?.accentColor ?? "#3b82f6";
+                        }, onBlur: (e) => {
+                            e.target.style.borderColor = "#d1d5db";
+                        } }), showMentionPicker && filteredUsers.length > 0 && (_jsx("div", { ref: mentionPickerRef, style: {
+                            position: "absolute",
+                            bottom: "100%",
+                            left: "0",
+                            right: "0",
+                            marginBottom: "4px",
+                            maxHeight: "200px",
+                            overflowY: "auto",
+                            backgroundColor: "#fff",
+                            border: "1px solid #d1d5db",
+                            borderRadius: "8px",
+                            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                            zIndex: 100,
+                        }, children: filteredUsers.map((user, index) => (_jsxs("div", { onClick: () => insertMention(user), style: {
+                                padding: "8px 12px",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "8px",
+                                backgroundColor: index === selectedMentionIndex
+                                    ? "#f3f4f6"
+                                    : "transparent",
+                            }, onMouseEnter: () => setSelectedMentionIndex(index), children: [user.avatar ? (_jsx("img", { src: user.avatar, alt: user.name, style: {
+                                        width: "24px",
+                                        height: "24px",
+                                        borderRadius: "50%",
+                                        objectFit: "cover",
+                                    } })) : (_jsx("div", { style: {
+                                        width: "24px",
+                                        height: "24px",
+                                        borderRadius: "50%",
+                                        backgroundColor: "#e5e7eb",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        fontSize: "12px",
+                                        fontWeight: 500,
+                                        color: "#6b7280",
+                                    }, children: user.name.charAt(0).toUpperCase() })), _jsxs("div", { children: [_jsx("div", { style: { fontWeight: 500, fontSize: "13px" }, children: user.name }), _jsxs("div", { style: { fontSize: "11px", color: "#9ca3af" }, children: ["@", user.id] })] })] }, user.id))) })), showMentionPicker && filteredUsers.length === 0 && mentionQuery.length > 0 && (_jsxs("div", { style: {
+                            position: "absolute",
+                            bottom: "100%",
+                            left: "0",
+                            right: "0",
+                            marginBottom: "4px",
+                            padding: "12px",
+                            backgroundColor: "#fff",
+                            border: "1px solid #d1d5db",
+                            borderRadius: "8px",
+                            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                            color: "#9ca3af",
+                            fontSize: "13px",
+                            textAlign: "center",
+                        }, children: ["No users found matching \"", mentionQuery, "\""] })), _jsx("button", { type: "submit", disabled: !body.trim() || disabled, style: {
+                            position: "absolute",
+                            right: "8px",
+                            bottom: "8px",
+                            padding: "6px 14px",
+                            fontSize: "13px",
+                            fontWeight: 500,
+                            border: "none",
+                            borderRadius: "6px",
+                            backgroundColor: !body.trim() || disabled
+                                ? "#e5e7eb"
+                                : styles?.accentColor ?? "#3b82f6",
+                            color: !body.trim() || disabled ? "#9ca3af" : "white",
+                            cursor: !body.trim() || disabled ? "not-allowed" : "pointer",
+                            transition: "background-color 0.15s",
+                        }, children: "Send" })] }), _jsxs("div", { style: {
+                    marginTop: "6px",
+                    fontSize: "11px",
+                    color: "#9ca3af",
+                }, children: ["Press Enter to send, Shift+Enter for new line", mentionableUsers.length > 0 && " • Type @ to mention"] })] }));
+}
+//# sourceMappingURL=AddComment.js.map

package/dist/react/AddComment.js.map

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

package/dist/react/Comment.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Comment Component
+ *
+ * Displays a single comment/message with reactions and actions.
+ */
+export interface MessageData {
+    message: {
+        _id: string;
+        threadId: string;
+        authorId: string;
+        body: string;
+        mentions: Array<{
+            userId: string;
+            start: number;
+            end: number;
+        }>;
+        links: Array<{
+            url: string;
+            start: number;
+            end: number;
+        }>;
+        attachments: Array<{
+            type: "url" | "file" | "image";
+            url: string;
+            name?: string;
+            mimeType?: string;
+            size?: number;
+        }>;
+        isEdited: boolean;
+        isDeleted: boolean;
+        createdAt: number;
+        editedAt?: number;
+    };
+    reactions: Array<{
+        emoji: string;
+        count: number;
+        users: string[];
+        includesMe: boolean;
+    }>;
+}
+export interface CommentProps {
+    /** Comment data */
+    comment: MessageData;
+    /** Whether this comment belongs to the current user */
+    mine?: boolean;
+    /** Callback when a reaction is toggled */
+    onToggleReaction?: (emoji: string) => void;
+    /** Callback when the comment is edited */
+    onEdit?: (newBody: string) => void;
+    /** Callback when the comment is deleted */
+    onDelete?: () => void;
+    /** CSS class name */
+    className?: string;
+}
+/**
+ * Component to display a single comment with reactions and actions.
+ *
+ * Usage:
+ * ```tsx
+ * <Comment
+ *   comment={messageData}
+ *   mine={true}
+ *   onToggleReaction={(emoji) => toggleReaction({ messageId, emoji })}
+ *   onEdit={(newBody) => editMessage({ messageId, body: newBody })}
+ *   onDelete={() => deleteMessage({ messageId })}
+ * />
+ * ```
+ */
+export declare function Comment({ comment, mine, onToggleReaction, onEdit, onDelete, className, }: CommentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Comment.d.ts.map

package/dist/react/Comment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Comment.d.ts","sourceRoot":"","sources":["../../src/react/Comment.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH,MAAM,WAAW,WAAW;IACxB,OAAO,EAAE;QACL,GAAG,EAAE,MAAM,CAAC;QACZ,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC;YAAE,MAAM,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAChE,KAAK,EAAE,KAAK,CAAC;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAC1D,WAAW,EAAE,KAAK,CAAC;YACf,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;YAC/B,GAAG,EAAE,MAAM,CAAC;YACZ,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,QAAQ,CAAC,EAAE,MAAM,CAAC;YAClB,IAAI,CAAC,EAAE,MAAM,CAAC;SACjB,CAAC,CAAC;QACH,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,SAAS,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,UAAU,EAAE,OAAO,CAAC;KACvB,CAAC,CAAC;CACN;AAED,MAAM,WAAW,YAAY;IACzB,mBAAmB;IACnB,OAAO,EAAE,WAAW,CAAC;IACrB,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,0CAA0C;IAC1C,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AA8GD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,EACpB,OAAO,EACP,IAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,QAAQ,EACR,SAAc,GACjB,EAAE,YAAY,2CA4Ud"}