@industry-theme/github-panels 0.1.59 → 0.1.61

package/dist/panels.bundle.js

@@ -1,3 +1,6 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React2 from "react";
 import React2__default, { createContext, useContext, forwardRef, createElement, useState, useRef, useEffect, useCallback, useMemo, useLayoutEffect, useImperativeHandle } from "react";
@@ -1038,10 +1041,10 @@ const GitHubProjectsPanelContent = ({
   const [expandedSections, setExpandedSections] = useState(
     /* @__PURE__ */ new Set(["owned", "starred"])
   );
-  const githubSlice = context.getSlice("github-repositories");
-  const isLoading = context.isSliceLoading("github-repositories");
-  const hasData = context.hasSlice("github-repositories");
-  const data = githubSlice == null ? void 0 : githubSlice.data;
+  const { githubRepositories } = context;
+  const isLoading = (githubRepositories == null ? void 0 : githubRepositories.loading) ?? false;
+  const hasData = !!githubRepositories;
+  const data = githubRepositories == null ? void 0 : githubRepositories.data;
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
@@ -1424,7 +1427,8 @@ const GitHubProjectsPanelMetadata = {
   description: "Browse and manage your GitHub repositories",
   icon: "github",
   version: "0.1.0",
-  slices: ["github-repositories"],
+  slices: ["githubRepositories"],
+  // Typed context slice declaration
   surfaces: ["sidebar", "panel"]
 };
 const RepositoryAvatar = ({
@@ -1477,6 +1481,101 @@ const RepositoryAvatar = ({
     }
   );
 };
+createContext(null);
+class PanelErrorBoundary extends React2__default.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "reset", () => {
+      this.setState({ error: null });
+    });
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("Panel error:", error, errorInfo);
+  }
+  render() {
+    if (this.state.error) {
+      const Fallback = this.props.fallback;
+      return /* @__PURE__ */ jsx(Fallback, {
+        error: this.state.error,
+        reset: this.reset
+      });
+    }
+    return this.props.children;
+  }
+}
+var PANEL_DATA_MIME_TYPE = "application/x-panel-data";
+function createDragPreview(content2, options) {
+  const preview = document.createElement("div");
+  preview.style.cssText = `
+    position: absolute;
+    top: -1000px;
+    left: -1000px;
+    padding: 8px 12px;
+    background: ${"#3b82f6"};
+    color: ${"white"};
+    border-radius: 6px;
+    font-size: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+  `;
+  const text2 = document.createElement("span");
+  text2.textContent = content2;
+  preview.appendChild(text2);
+  return preview;
+}
+function useDraggable(config) {
+  const [isDragging, setIsDragging] = useState(false);
+  const handleDragStart = useCallback((e) => {
+    var _a;
+    setIsDragging(true);
+    e.dataTransfer.setData("text/plain", config.primaryData);
+    const panelData = {
+      sourcePanel: config.sourcePanel || "unknown",
+      dataType: config.dataType,
+      primaryData: config.primaryData,
+      metadata: config.metadata,
+      suggestedActions: config.suggestedActions,
+      version: "1.0"
+    };
+    e.dataTransfer.setData(PANEL_DATA_MIME_TYPE, JSON.stringify(panelData));
+    e.dataTransfer.effectAllowed = "copy";
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.style.opacity = "0.5";
+    }
+    if (config.dragPreview) {
+      if (config.dragPreview instanceof HTMLElement) {
+        e.dataTransfer.setDragImage(config.dragPreview, 0, 0);
+      } else {
+        const preview = createDragPreview(config.dragPreview);
+        document.body.appendChild(preview);
+        e.dataTransfer.setDragImage(preview, 0, 0);
+        setTimeout(() => document.body.removeChild(preview), 0);
+      }
+    }
+    (_a = config.onDragStart) == null ? void 0 : _a.call(config, e);
+  }, [config]);
+  const handleDragEnd = useCallback((e) => {
+    var _a;
+    setIsDragging(false);
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.style.opacity = "1";
+    }
+    (_a = config.onDragEnd) == null ? void 0 : _a.call(config, e);
+  }, [config]);
+  return {
+    draggable: true,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    isDragging
+  };
+}
 const GitHubRepositoryCard = ({
   repository,
   localRepo,
@@ -1492,6 +1591,23 @@ const GitHubRepositoryCard = ({
   const { theme: theme2 } = useTheme();
   const [isHovered, setIsHovered] = useState(false);
   const isCloned = Boolean(localRepo);
+  const { isDragging, ...dragProps } = useDraggable({
+    dataType: "repository-github",
+    primaryData: repository.full_name,
+    metadata: {
+      name: repository.name,
+      owner: repository.owner.login,
+      description: repository.description,
+      language: repository.language,
+      stars: repository.stargazers_count,
+      isPrivate: repository.private,
+      htmlUrl: repository.html_url,
+      cloneUrl: repository.clone_url
+    },
+    suggestedActions: ["add-to-collection"],
+    sourcePanel: "github-repositories",
+    dragPreview: repository.full_name
+  });
   const handleClone = useCallback(
     (e) => {
       e.stopPropagation();
@@ -1549,6 +1665,7 @@ const GitHubRepositoryCard = ({
       onClick: handleClick,
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
+      ...isInCollection ? {} : dragProps,
       style: {
         display: "flex",
         alignItems: "flex-start",
@@ -1557,8 +1674,9 @@ const GitHubRepositoryCard = ({
         borderRadius: "8px",
         backgroundColor: isSelected ? `${theme2.colors.primary}15` : isHovered ? theme2.colors.backgroundTertiary : "transparent",
         border: `1px solid ${isSelected ? theme2.colors.primary : "transparent"}`,
-        cursor: onSelect ? "pointer" : "default",
-        transition: "background-color 0.15s, border-color 0.15s"
+        cursor: isInCollection ? "not-allowed" : isDragging ? "grabbing" : onSelect ? "grab" : "default",
+        opacity: isDragging ? 0.5 : isInCollection ? 0.7 : 1,
+        transition: "background-color 0.15s, border-color 0.15s, opacity 0.15s"
       },
       children: [
         /* @__PURE__ */ jsx(
@@ -1869,8 +1987,7 @@ const GitHubSearchPanelContent = ({ context, actions, events }) => {
   const [selectedRepoId, setSelectedRepoId] = useState(null);
   const searchTimeoutRef = useRef(null);
   const inputRef = useRef(null);
-  const workspaceSlice = context.getSlice("workspace");
-  const workspaceReposSlice = context.getSlice("workspaceRepositories");
+  const { workspace: workspaceSlice, workspaceRepositories: workspaceReposSlice } = context;
   const currentWorkspace = (_a = workspaceSlice == null ? void 0 : workspaceSlice.data) == null ? void 0 : _a.workspace;
   const collectionName = currentWorkspace == null ? void 0 : currentWorkspace.name;
   const collectionRepos = useMemo(
@@ -3687,13 +3804,16 @@ function C$1(e) {
   return { "--panel-background": e.colors.background, "--panel-border": e.colors.border, "--panel-handle": e.colors.backgroundSecondary, "--panel-handle-hover": e.colors.backgroundHover, "--panel-handle-active": e.colors.primary, "--panel-button-bg": e.colors.surface, "--panel-button-hover": e.colors.backgroundHover, "--panel-button-border": e.colors.border, "--panel-button-icon": e.colors.textSecondary, "--panel-accent-bg": e.colors.primary + "15" };
 }
 const z$1 = forwardRef(({ panels: o, className: a = "", style: s2, theme: d, minPanelWidth: u = 350, idealPanelWidth: p2 = 0.333, showSeparator: h2 = false, onPanelChange: m, preventKeyboardScroll: f = true, disableSwipe: g = false }, v) => {
-  const b = useRef(null), y = C$1(d);
+  const b = useRef(null), y = useRef(false), w = useRef(null), x = C$1(d);
   useImperativeHandle(v, () => ({ scrollToPanel: (e) => {
     if (!b.current) return;
     const t = b.current, n = t.children[e];
     if (n) {
+      y.current = true, w.current && clearTimeout(w.current);
       const e2 = n.offsetLeft;
-      t.scrollTo({ left: e2, behavior: "smooth" });
+      t.scrollTo({ left: e2, behavior: "smooth" }), w.current = setTimeout(() => {
+        y.current = false;
+      }, 500);
     }
   }, getCurrentPanel: () => {
     if (!b.current || 0 === b.current.children.length) return 0;
@@ -3715,24 +3835,27 @@ const z$1 = forwardRef(({ panels: o, className: a = "", style: s2, theme: d, min
     return e.addEventListener("keydown", t), () => {
       e.removeEventListener("keydown", t);
     };
-  }, [f]);
-  const w = o.length, x = 2 * u;
-  let S;
-  S = 1 === w || 2 === w ? "100%" : `max(${u}px, ${100 * p2}%)`;
-  const R = React2__default.useId().replace(/:/g, "_");
+  }, [f]), useEffect(() => () => {
+    w.current && clearTimeout(w.current);
+  }, []);
+  const S = o.length, R = 2 * u;
+  let N;
+  N = 1 === S || 2 === S ? "100%" : `max(${u}px, ${100 * p2}%)`;
+  const E = React2__default.useId().replace(/:/g, "_");
   return jsxs(Fragment, { children: [
-    2 === w && /* @__PURE__ */ jsx("style", { children: `
-            .snap-carousel-container[data-carousel-id="${R}"][data-panel-count="2"] .snap-carousel-panel {
+    2 === S && /* @__PURE__ */ jsx("style", { children: `
+            .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
               width: 100%;
             }
-            @container (min-width: ${x}px) {
-              .snap-carousel-container[data-carousel-id="${R}"][data-panel-count="2"] .snap-carousel-panel {
+            @container (min-width: ${R}px) {
+              .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
                 width: 50%;
               }
             }
           ` }),
-    /* @__PURE__ */ jsx("div", { ref: b, className: `snap-carousel-container ${g ? "swipe-disabled" : ""} ${a}`, style: { ...y, ...s2, "--snap-carousel-min-width": `${u}px`, "--snap-carousel-ideal-width": 100 * p2 + "%", "--snap-carousel-gap": h2 ? "1px" : "0px", "--snap-carousel-panel-width": S, "--snap-carousel-panel-count": w, "--snap-carousel-two-panel-threshold": `${x}px` }, onScroll: (e) => {
+    /* @__PURE__ */ jsx("div", { ref: b, className: `snap-carousel-container ${g ? "swipe-disabled" : ""} ${a}`, style: { ...x, ...s2, "--snap-carousel-min-width": `${u}px`, "--snap-carousel-ideal-width": 100 * p2 + "%", "--snap-carousel-gap": h2 ? "1px" : "0px", "--snap-carousel-panel-width": N, "--snap-carousel-panel-count": S, "--snap-carousel-two-panel-threshold": `${R}px` }, onScroll: (e) => {
       if (!m || !b.current || 0 === b.current.children.length) return;
+      if (y.current) return;
       const t = b.current, n = t.getBoundingClientRect().left;
       let r2 = 0, o2 = 1 / 0;
       for (let i = 0; i < t.children.length; i++) {
@@ -3740,7 +3863,7 @@ const z$1 = forwardRef(({ panels: o, className: a = "", style: s2, theme: d, min
         a2 < o2 && (o2 = a2, r2 = i);
       }
       m(r2);
-    }, "data-panel-count": w, "data-carousel-id": R, children: o.map((t, n) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t }, n)) })
+    }, "data-panel-count": S, "data-carousel-id": E, children: o.map((t, n) => /* @__PURE__ */ jsx("div", { className: "snap-carousel-panel", children: t }, n)) })
   ] });
 });
 z$1.displayName = "SnapCarousel";
@@ -3749,8 +3872,8 @@ var le$2, se$1;
 const de$1 = /* @__PURE__ */ Object.freeze({ x: 0, y: 0 });
 var Te$1, Ae$1;
 (Ae$1 = Te$1 || (Te$1 = {}))[Ae$1.Forward = 1] = "Forward", Ae$1[Ae$1.Backward = -1] = "Backward";
-var _e$2, je$1, He$1, Ke$1;
-(je$1 = _e$2 || (_e$2 = {})).Click = "click", je$1.DragStart = "dragstart", je$1.Keydown = "keydown", je$1.ContextMenu = "contextmenu", je$1.Resize = "resize", je$1.SelectionChange = "selectionchange", je$1.VisibilityChange = "visibilitychange", (Ke$1 = He$1 || (He$1 = {})).Space = "Space", Ke$1.Down = "ArrowDown", Ke$1.Right = "ArrowRight", Ke$1.Left = "ArrowLeft", Ke$1.Up = "ArrowUp", Ke$1.Esc = "Escape", Ke$1.Enter = "Enter", Ke$1.Tab = "Tab";
+var _e$1, je$1, He$1, Ke$1;
+(je$1 = _e$1 || (_e$1 = {})).Click = "click", je$1.DragStart = "dragstart", je$1.Keydown = "keydown", je$1.ContextMenu = "contextmenu", je$1.Resize = "resize", je$1.SelectionChange = "selectionchange", je$1.VisibilityChange = "visibilitychange", (Ke$1 = He$1 || (He$1 = {})).Space = "Space", Ke$1.Down = "ArrowDown", Ke$1.Right = "ArrowRight", Ke$1.Left = "ArrowLeft", Ke$1.Up = "ArrowUp", Ke$1.Esc = "Escape", Ke$1.Enter = "Enter", Ke$1.Tab = "Tab";
 ({ start: [He$1.Space, He$1.Enter], cancel: [He$1.Esc], end: [He$1.Space, He$1.Enter, He$1.Tab] });
 var rt$1, ot$1;
 (ot$1 = rt$1 || (rt$1 = {}))[ot$1.RightClick = 2] = "RightClick";
@@ -3771,10 +3894,10 @@ var Ut$1;
   }
   return Ut$1 || (Ut$1 = createContext(void 0)), Ut$1;
 })();
-var _e$1 = Object.defineProperty;
-var Ee = (o, e, t) => e in o ? _e$1(o, e, { enumerable: true, configurable: true, writable: true, value: t }) : o[e] = t;
-var le$1 = (o, e, t) => Ee(o, typeof e != "symbol" ? e + "" : e, t);
-class De {
+var Ee = Object.defineProperty;
+var Re = (o, e, t) => e in o ? Ee(o, e, { enumerable: true, configurable: true, writable: true, value: t }) : o[e] = t;
+var le$1 = (o, e, t) => Re(o, typeof e != "symbol" ? e + "" : e, t);
+class Me {
   constructor() {
     le$1(this, "PRESETS_KEY", "panel-layouts:workspace-presets");
     le$1(this, "REPO_STATE_PREFIX", "panel-layouts:repo-state:");
@@ -3841,10 +3964,10 @@ class De {
           if (i)
             try {
               e[s2] = JSON.parse(i);
-            } catch (l) {
+            } catch (a) {
               console.error(
                 `Failed to parse repository state for ${s2}:`,
-                l
+                a
               );
             }
         }
@@ -3915,11 +4038,11 @@ class O {
       createdAt: s2.createdAt,
       // Preserve creation time
       updatedAt: Date.now()
-    }, l = {
+    }, a = {
       ...r2,
       [e]: i
     };
-    return await this.adapter.saveWorkspacePresets(l), i;
+    return await this.adapter.saveWorkspacePresets(a), i;
   }
   /**
    * Delete a workspace layout
@@ -4244,13 +4367,13 @@ class O {
     Object.keys(e).length;
   }
 }
-le$1(O, "adapter", new De());
+le$1(O, "adapter", new Me());
 function gt(o, e, t, r2) {
   useEffect(() => {
     const s2 = e.on(
       "panel:focus",
-      (l) => {
-        l.payload.panelId === o && t();
+      (a) => {
+        a.payload.panelId === o && t();
       }
     );
     return () => {
@@ -4714,9 +4837,9 @@ const GitHubIssuesPanelContent = ({
       return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
     }
   );
-  const issuesSlice = context.getSlice("github-issues");
-  const isLoading = context.isSliceLoading("github-issues");
-  const hasData = context.hasSlice("github-issues");
+  const { githubIssues: issuesSlice } = context;
+  const isLoading = (issuesSlice == null ? void 0 : issuesSlice.loading) ?? false;
+  const hasData = !!issuesSlice;
   const issues = ((_a = issuesSlice == null ? void 0 : issuesSlice.data) == null ? void 0 : _a.issues) ?? [];
   const owner = ((_b = issuesSlice == null ? void 0 : issuesSlice.data) == null ? void 0 : _b.owner) ?? "";
   const repo = ((_c = issuesSlice == null ? void 0 : issuesSlice.data) == null ? void 0 : _c.repo) ?? "";
@@ -5327,7 +5450,8 @@ const GitHubIssuesPanelMetadata = {
   description: "View and manage GitHub repository issues",
   icon: "circle-dot",
   version: "0.1.0",
-  slices: ["github-issues"],
+  slices: ["githubIssues"],
+  // Typed context slice declaration
   surfaces: ["panel"]
 };
 const VOID = -1;
@@ -51413,6 +51537,7 @@ const TimelineEventRenderer = ({ event, onToggleReaction, getMergedReactions })
 };
 const GitHubMessagesPanelContent = ({ context, events }) => {
   var _a;
+  const { githubMessages: messagesSlice } = context;
   const { theme: theme2 } = useTheme();
   const panelRef = useRef(null);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -51430,8 +51555,7 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
   const [sendError, setSendError] = useState(null);
   const textareaRef = useRef(null);
   const handleDelete2 = () => {
-    const messagesSlice2 = context.getSlice("github-messages");
-    const messagesData2 = messagesSlice2 == null ? void 0 : messagesSlice2.data;
+    const messagesData2 = messagesSlice == null ? void 0 : messagesSlice.data;
     if ((messagesData2 == null ? void 0 : messagesData2.target) && events) {
       const { target: target2, owner, repo } = messagesData2;
       events.emit({
@@ -51448,8 +51572,7 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
     setShowDeleteConfirm(false);
   };
   const handleToggleReaction = useCallback((itemId, itemType, reactionType, currentReactionId) => {
-    const messagesSlice2 = context.getSlice("github-messages");
-    const messagesData2 = messagesSlice2 == null ? void 0 : messagesSlice2.data;
+    const messagesData2 = messagesSlice == null ? void 0 : messagesSlice.data;
     if (!(messagesData2 == null ? void 0 : messagesData2.target) || !events) return;
     const { owner, repo, target: target2 } = messagesData2;
     const key = `${itemType}-${itemId}`;
@@ -51522,8 +51645,7 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
     }
   }, [context, events]);
   const handleSendComment = useCallback(() => {
-    const messagesSlice2 = context.getSlice("github-messages");
-    const messagesData2 = messagesSlice2 == null ? void 0 : messagesSlice2.data;
+    const messagesData2 = messagesSlice == null ? void 0 : messagesSlice.data;
     if (!events || !(messagesData2 == null ? void 0 : messagesData2.target) || !commentText.trim() || isSending) return;
     const { owner, repo, target: target2 } = messagesData2;
     setIsSending(true);
@@ -51588,9 +51710,8 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
       return (_a2 = panelRef.current) == null ? void 0 : _a2.focus();
     }
   );
-  const messagesSlice = context.getSlice("github-messages");
-  const isLoading = context.isSliceLoading("github-messages");
-  const hasData = context.hasSlice("github-messages");
+  const isLoading = (messagesSlice == null ? void 0 : messagesSlice.loading) ?? false;
+  const hasData = !!messagesSlice;
   const messagesData = messagesSlice == null ? void 0 : messagesSlice.data;
   useEffect(() => {
     if (!events) return;
@@ -51643,8 +51764,7 @@ const GitHubMessagesPanelContent = ({ context, events }) => {
   }, [commentText]);
   useEffect(() => {
     if (!events) return;
-    const messagesSlice2 = context.getSlice("github-messages");
-    const messagesData2 = messagesSlice2 == null ? void 0 : messagesSlice2.data;
+    const messagesData2 = messagesSlice == null ? void 0 : messagesSlice.data;
     const unsubscribers = [
       events.on("github-messages:comment:created", (event) => {
         const payload = event.payload;
@@ -52278,7 +52398,8 @@ const GitHubMessagesPanelMetadata = {
   description: "View conversation threads for GitHub issues and pull requests",
   icon: "message-square",
   version: "0.1.0",
-  slices: ["github-messages"],
+  slices: ["githubMessages"],
+  // Typed context slice declaration
   surfaces: ["panel"]
 };
 const OwnerRepositoriesPanelContent = ({
@@ -52307,8 +52428,8 @@ const OwnerRepositoriesPanelContent = ({
     setFilter("");
   }, []);
   const owner = propOwner || ((_b = (_a = context == null ? void 0 : context.currentScope) == null ? void 0 : _a.repository) == null ? void 0 : _b.name);
-  const ownerSlice = context.getSlice("owner-repositories");
-  const isLoading = context.isSliceLoading("owner-repositories");
+  const { ownerRepositories: ownerSlice } = context;
+  const isLoading = (ownerSlice == null ? void 0 : ownerSlice.loading) ?? false;
   ((_c = ownerSlice == null ? void 0 : ownerSlice.data) == null ? void 0 : _c.owner) ?? null;
   const repositories = ((_d = ownerSlice == null ? void 0 : ownerSlice.data) == null ? void 0 : _d.repositories) ?? [];
   const error = ((_e2 = ownerSlice == null ? void 0 : ownerSlice.data) == null ? void 0 : _e2.error) ?? null;
@@ -52929,7 +53050,8 @@ const OwnerRepositoriesPanelMetadata = {
   description: "Browse repositories for a GitHub user or organization",
   icon: "github",
   version: "0.2.0",
-  slices: ["owner-repositories"],
+  slices: ["ownerRepositories"],
+  // Typed context slice declaration
   surfaces: ["panel"]
 };
 const STORAGE_KEY = "recent-repositories";
@@ -53947,7 +54069,7 @@ const panels = [
     component: GitHubProjectsPanel,
     onMount: async (context) => {
       console.log("GitHub Projects Panel mounted");
-      const slice = context.getSlice("github-repositories");
+      const slice = context.getSlice("githubRepositories");
       if (slice && !slice.loading) {
         await slice.refresh();
       }
@@ -53971,7 +54093,7 @@ const panels = [
     component: GitHubIssuesPanel,
     onMount: async (context) => {
       console.log("GitHub Issues Panel mounted");
-      const slice = context.getSlice("github-issues");
+      const slice = context.getSlice("githubIssues");
       if (slice && !slice.loading) {
         await slice.refresh();
       }