@arbidocs/blocks 0.5.120 → 0.5.121

package/dist/connection/mail/useMailboxDefaults.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/connection/mail/useMailboxDefaults.tsx"],
-  "sourcesContent": ["/**\n * What the mail kits take from the signed-in session: how a person is named (contacts and\n * workspace co-members), recipient suggestions (the one people source), the open workspace's\n * documents to attach, and saving an email into a workspace.\n */\n\nimport { useCallback, useMemo } from 'react'\nimport {\n  documentMailAttachment,\n  useArbi,\n  useArbiSessionState,\n  useDocuments,\n  usePeople,\n  usePeopleSearch,\n  useWorkspaces,\n  type MailAddress,\n} from '@arbidocs/react'\nimport { getDocumentTitle, getFileTypeIcon } from '@arbidocs/react/ui'\nimport type { MailDocumentSource, MailRecipientSuggestions, MailWorkspaces } from './types'\n\n/** Recipient suggestions while an address is typed: contacts and workspace co-members. */\nexport const peopleRecipients: MailRecipientSuggestions = {\n  useSuggestions: (query) => usePeopleSearch(query).people,\n}\n\n/**\n * How a mail address is shown: the name on the message, else the name of a person you know with\n * that address (a contact's card, a workspace co-member), else the address. Recipients are stored\n * as bare addresses when composed, so the lookup is what lets sent mail show \"Pat Quinn\".\n */\nexport function useMailPersonLabel(): (person: MailAddress) => string {\n  const { byEmail } = usePeople()\n  return useCallback(\n    (person: MailAddress) => person.name || byEmail(person.email)?.name || person.email,\n    [byEmail]\n  )\n}\n\n/**\n * The open workspace's documents, attachable as their files (\"From workspace\"); drafts never\n * uploaded as a file are left out. None without an open workspace.\n */\nexport function useWorkspaceMailDocuments(): MailDocumentSource | undefined {\n  const workspaceId = useArbiSessionState((s) => s.workspaceId)\n  const { data: workspaceDocuments = [] } = useDocuments()\n  const arbi = useArbi()\n  return useMemo<MailDocumentSource | undefined>(() => {\n    if (!workspaceId) return undefined\n    const files = workspaceDocuments.filter((doc) => Boolean(doc.file_name))\n    return {\n      documents: files.map((doc) => {\n        const Icon = getFileTypeIcon(doc.file_name, { mime: doc.file_type })\n        return { id: doc.external_id, title: getDocumentTitle(doc), icon: <Icon size={14} /> }\n      }),\n      toAttachment: async (id, maxBytes) => {\n        const doc = files.find((d) => d.external_id === id)\n        if (!doc) throw new Error('Could not attach the document')\n        return documentMailAttachment(arbi, doc, maxBytes)\n      },\n    }\n  }, [workspaceId, workspaceDocuments, arbi])\n}\n\n/**\n * The user's workspaces mail can be added to: the private ones (mail added is private, and a\n * public workspace's key is shared with everyone); the open one is preselected.\n */\nexport function useMailWorkspaces(): MailWorkspaces {\n  const workspaceId = useArbiSessionState((s) => s.workspaceId)\n  const { data: workspaces = [] } = useWorkspaces()\n  return useMemo<MailWorkspaces>(() => {\n    const own = workspaces.filter((w) => !w.is_public)\n    return {\n      workspaces: own.map((w) => ({ id: w.external_id, name: w.name })),\n      defaultWorkspaceId: own.some((w) => w.external_id === workspaceId) ? workspaceId : undefined,\n    }\n  }, [workspaces, workspaceId])\n}\n"],
-  "mappings": ";AAoD0E;AA9C1E,SAAS,aAAa,eAAe;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kBAAkB,uBAAuB;AAI3C,MAAM,mBAA6C;AAAA,EACxD,gBAAgB,CAAC,UAAU,gBAAgB,KAAK,EAAE;AACpD;AAOO,SAAS,qBAAsD;AACpE,QAAM,EAAE,QAAQ,IAAI,UAAU;AAC9B,SAAO;AAAA,IACL,CAAC,WAAwB,OAAO,QAAQ,QAAQ,OAAO,KAAK,GAAG,QAAQ,OAAO;AAAA,IAC9E,CAAC,OAAO;AAAA,EACV;AACF;AAMO,SAAS,4BAA4D;AAC1E,QAAM,cAAc,oBAAoB,CAAC,MAAM,EAAE,WAAW;AAC5D,QAAM,EAAE,MAAM,qBAAqB,CAAC,EAAE,IAAI,aAAa;AACvD,QAAM,OAAO,QAAQ;AACrB,SAAO,QAAwC,MAAM;AACnD,QAAI,CAAC,YAAa,QAAO;AACzB,UAAM,QAAQ,mBAAmB,OAAO,CAAC,QAAQ,QAAQ,IAAI,SAAS,CAAC;AACvE,WAAO;AAAA,MACL,WAAW,MAAM,IAAI,CAAC,QAAQ;AAC5B,cAAM,OAAO,gBAAgB,IAAI,WAAW,EAAE,MAAM,IAAI,UAAU,CAAC;AACnE,eAAO,EAAE,IAAI,IAAI,aAAa,OAAO,iBAAiB,GAAG,GAAG,MAAM,oBAAC,QAAK,MAAM,IAAI,EAAG;AAAA,MACvF,CAAC;AAAA,MACD,cAAc,OAAO,IAAI,aAAa;AACpC,cAAM,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,gBAAgB,EAAE;AAClD,YAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+BAA+B;AACzD,eAAO,uBAAuB,MAAM,KAAK,QAAQ;AAAA,MACnD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,oBAAoB,IAAI,CAAC;AAC5C;AAMO,SAAS,oBAAoC;AAClD,QAAM,cAAc,oBAAoB,CAAC,MAAM,EAAE,WAAW;AAC5D,QAAM,EAAE,MAAM,aAAa,CAAC,EAAE,IAAI,cAAc;AAChD,SAAO,QAAwB,MAAM;AACnC,UAAM,MAAM,WAAW,OAAO,CAAC,MAAM,CAAC,EAAE,SAAS;AACjD,WAAO;AAAA,MACL,YAAY,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,aAAa,MAAM,EAAE,KAAK,EAAE;AAAA,MAChE,oBAAoB,IAAI,KAAK,CAAC,MAAM,EAAE,gBAAgB,WAAW,IAAI,cAAc;AAAA,IACrF;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,CAAC;AAC9B;",
+  "sourcesContent": ["/**\n * What the mail kits take from the signed-in session: how a person is named (contacts and\n * workspace co-members), recipient suggestions (the one people source), the open workspace's\n * documents to attach, and saving an email into a workspace.\n */\n\nimport { useCallback, useMemo } from 'react'\nimport {\n  documentMailAttachment,\n  useArbi,\n  useArbiSessionState,\n  useDocuments,\n  usePeople,\n  usePeopleSearch,\n  useWorkspaces,\n  type MailAddress,\n} from '@arbidocs/react'\nimport { getDocumentTitle, getFileTypeIcon } from '@arbidocs/react/ui'\nimport type { MailDocumentSource, MailRecipientSuggestions, MailWorkspaces } from './types'\n\n/** Recipient suggestions while an address is typed: contacts and workspace co-members. */\nexport const peopleRecipients: MailRecipientSuggestions = {\n  useSuggestions: (query) => usePeopleSearch(query).people,\n}\n\n/**\n * How a mail address is shown: the name on the message, else the name of a person you know with\n * that address (a contact's card, a workspace co-member), else the address. Recipients are stored\n * as bare addresses when composed, so the lookup is what lets sent mail show \"Pat Quinn\".\n */\nexport function useMailPersonLabel(): (person: MailAddress) => string {\n  const { byEmail } = usePeople()\n  return useCallback(\n    (person: MailAddress) => person.name || byEmail(person.email)?.name || person.email,\n    [byEmail]\n  )\n}\n\n/**\n * The open workspace's documents, attachable as their files (\"From workspace\"); drafts never\n * uploaded as a file are left out. None without an open workspace.\n */\nexport function useWorkspaceMailDocuments(): MailDocumentSource | undefined {\n  const workspaceId = useArbiSessionState((s) => s.workspaceId)\n  const { data: workspaceDocuments = [] } = useDocuments()\n  const arbi = useArbi()\n  return useMemo<MailDocumentSource | undefined>(() => {\n    if (!workspaceId) return undefined\n    const files = workspaceDocuments.filter((doc) => Boolean(doc.file_name))\n    return {\n      documents: files.map((doc) => {\n        const Icon = getFileTypeIcon(doc.file_name, { mime: doc.file_type, folder: doc.folder })\n        return { id: doc.external_id, title: getDocumentTitle(doc), icon: <Icon size={14} /> }\n      }),\n      toAttachment: async (id, maxBytes) => {\n        const doc = files.find((d) => d.external_id === id)\n        if (!doc) throw new Error('Could not attach the document')\n        return documentMailAttachment(arbi, doc, maxBytes)\n      },\n    }\n  }, [workspaceId, workspaceDocuments, arbi])\n}\n\n/**\n * The user's workspaces mail can be added to: the private ones (mail added is private, and a\n * public workspace's key is shared with everyone); the open one is preselected.\n */\nexport function useMailWorkspaces(): MailWorkspaces {\n  const workspaceId = useArbiSessionState((s) => s.workspaceId)\n  const { data: workspaces = [] } = useWorkspaces()\n  return useMemo<MailWorkspaces>(() => {\n    const own = workspaces.filter((w) => !w.is_public)\n    return {\n      workspaces: own.map((w) => ({ id: w.external_id, name: w.name })),\n      defaultWorkspaceId: own.some((w) => w.external_id === workspaceId) ? workspaceId : undefined,\n    }\n  }, [workspaces, workspaceId])\n}\n"],
+  "mappings": ";AAoD0E;AA9C1E,SAAS,aAAa,eAAe;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kBAAkB,uBAAuB;AAI3C,MAAM,mBAA6C;AAAA,EACxD,gBAAgB,CAAC,UAAU,gBAAgB,KAAK,EAAE;AACpD;AAOO,SAAS,qBAAsD;AACpE,QAAM,EAAE,QAAQ,IAAI,UAAU;AAC9B,SAAO;AAAA,IACL,CAAC,WAAwB,OAAO,QAAQ,QAAQ,OAAO,KAAK,GAAG,QAAQ,OAAO;AAAA,IAC9E,CAAC,OAAO;AAAA,EACV;AACF;AAMO,SAAS,4BAA4D;AAC1E,QAAM,cAAc,oBAAoB,CAAC,MAAM,EAAE,WAAW;AAC5D,QAAM,EAAE,MAAM,qBAAqB,CAAC,EAAE,IAAI,aAAa;AACvD,QAAM,OAAO,QAAQ;AACrB,SAAO,QAAwC,MAAM;AACnD,QAAI,CAAC,YAAa,QAAO;AACzB,UAAM,QAAQ,mBAAmB,OAAO,CAAC,QAAQ,QAAQ,IAAI,SAAS,CAAC;AACvE,WAAO;AAAA,MACL,WAAW,MAAM,IAAI,CAAC,QAAQ;AAC5B,cAAM,OAAO,gBAAgB,IAAI,WAAW,EAAE,MAAM,IAAI,WAAW,QAAQ,IAAI,OAAO,CAAC;AACvF,eAAO,EAAE,IAAI,IAAI,aAAa,OAAO,iBAAiB,GAAG,GAAG,MAAM,oBAAC,QAAK,MAAM,IAAI,EAAG;AAAA,MACvF,CAAC;AAAA,MACD,cAAc,OAAO,IAAI,aAAa;AACpC,cAAM,MAAM,MAAM,KAAK,CAAC,MAAM,EAAE,gBAAgB,EAAE;AAClD,YAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+BAA+B;AACzD,eAAO,uBAAuB,MAAM,KAAK,QAAQ;AAAA,MACnD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,aAAa,oBAAoB,IAAI,CAAC;AAC5C;AAMO,SAAS,oBAAoC;AAClD,QAAM,cAAc,oBAAoB,CAAC,MAAM,EAAE,WAAW;AAC5D,QAAM,EAAE,MAAM,aAAa,CAAC,EAAE,IAAI,cAAc;AAChD,SAAO,QAAwB,MAAM;AACnC,UAAM,MAAM,WAAW,OAAO,CAAC,MAAM,CAAC,EAAE,SAAS;AACjD,WAAO;AAAA,MACL,YAAY,IAAI,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,aAAa,MAAM,EAAE,KAAK,EAAE;AAAA,MAChE,oBAAoB,IAAI,KAAK,CAAC,MAAM,EAAE,gBAAgB,WAAW,IAAI,cAAc;AAAA,IACrF;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,CAAC;AAC9B;",
   "names": []
 }

package/dist/connection/panels/useSessionPanelMode.js

@@ -4,16 +4,17 @@ import { useIsPhone } from "../../lib/use-media-query.js";
 import { useArbiSessionState, useArbiSessionStore } from "@arbidocs/react";
 function useSessionPanelMode(panelId, defaultMode = "docked", isOpen = true) {
   const panelModes = useArbiSessionState((s) => s.shell.panels.modes);
+  const openedPoppedOut = useArbiSessionState((s) => s.shell.panels.popout === panelId);
   const setPanelModeStore = useArbiSessionStore().setPanelMode;
   const isSmallScreen = useIsPhone();
   const prevOpenRef = useRef(false);
   const mode = isSmallScreen ? "overlay" : panelModes[panelId] || defaultMode;
   useEffect(() => {
-    if (isOpen && !prevOpenRef.current) {
+    if (isOpen && !prevOpenRef.current && !(openedPoppedOut && !isSmallScreen)) {
       setPanelModeStore(panelId, isSmallScreen ? "overlay" : defaultMode);
     }
     prevOpenRef.current = isOpen;
-  }, [isOpen, panelId, defaultMode, isSmallScreen, setPanelModeStore]);
+  }, [isOpen, panelId, defaultMode, isSmallScreen, setPanelModeStore, openedPoppedOut]);
   useEffect(() => {
     if (isSmallScreen && isOpen && panelModes[panelId] && panelModes[panelId] !== "overlay") {
       setPanelModeStore(panelId, "overlay");

package/dist/connection/panels/useSessionPanelMode.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/connection/panels/useSessionPanelMode.ts"],
-  "sourcesContent": ["/**\n * useSessionPanelMode Hook\n *\n * Reads and writes a panel's display mode (floating/docked/popout) from the shared session.\n *\n * defaultMode is applied every time the panel opens (isOpen transitions to true),\n * so a panel with defaultMode=\"docked\" will always dock on open \u2014 even if it was\n * previously kicked to floating by another panel docking.\n *\n * Users can still switch modes manually; the switch is respected until the panel\n * closes and reopens.\n */\n\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useIsPhone } from '../../lib/use-media-query'\nimport { useArbiSessionState, useArbiSessionStore, type ArbiPanelMode } from '@arbidocs/react'\n\nexport type PanelMode = ArbiPanelMode\n\nexport function useSessionPanelMode(\n  panelId: string,\n  defaultMode: PanelMode = 'docked',\n  isOpen = true\n) {\n  const panelModes = useArbiSessionState((s) => s.shell.panels.modes)\n  const setPanelModeStore = useArbiSessionStore().setPanelMode\n  const isSmallScreen = useIsPhone()\n  const prevOpenRef = useRef(false)\n\n  // The right-hand panel mirrors the left sidebar: parked in the layout\n  // ('docked', which pushes content) or floating over it ('overlay', a\n  // slide-out sheet + backdrop). On phones the parked split and popout windows\n  // don't fit, so coerce to 'overlay' below the breakpoint \u2014 only the *default*\n  // changes with screen size. Driving the *stored* mode keeps every consumer\n  // consistent (slot placement + the FloatingPanel renderer all agree).\n  const mode: PanelMode = isSmallScreen ? 'overlay' : panelModes[panelId] || defaultMode\n\n  // Reset to the effective default when the panel opens (small screen always\n  // 'overlay'), so sidebar buttons reliably bring panels back to their mode.\n  useEffect(() => {\n    if (isOpen && !prevOpenRef.current) {\n      setPanelModeStore(panelId, isSmallScreen ? 'overlay' : defaultMode)\n    }\n    prevOpenRef.current = isOpen\n  }, [isOpen, panelId, defaultMode, isSmallScreen, setPanelModeStore])\n\n  // If the viewport shrinks past the breakpoint while a panel is open and still\n  // parked/popout, snap it to 'overlay' so the split layout never clips.\n  useEffect(() => {\n    if (isSmallScreen && isOpen && panelModes[panelId] && panelModes[panelId] !== 'overlay') {\n      setPanelModeStore(panelId, 'overlay')\n    }\n  }, [isSmallScreen, isOpen, panelId, panelModes, setPanelModeStore])\n\n  const setPanelMode = useCallback(\n    (newMode: PanelMode) => {\n      // Mode switching is a desktop affordance; on phones everything is 'main'.\n      if (isSmallScreen) return\n      setPanelModeStore(panelId, newMode)\n    },\n    [panelId, isSmallScreen, setPanelModeStore]\n  )\n\n  return { mode, setPanelMode }\n}\n"],
-  "mappings": ";AAaA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB,2BAA+C;AAItE,SAAS,oBACd,SACA,cAAyB,UACzB,SAAS,MACT;AACA,QAAM,aAAa,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK;AAClE,QAAM,oBAAoB,oBAAoB,EAAE;AAChD,QAAM,gBAAgB,WAAW;AACjC,QAAM,cAAc,OAAO,KAAK;AAQhC,QAAM,OAAkB,gBAAgB,YAAY,WAAW,OAAO,KAAK;AAI3E,YAAU,MAAM;AACd,QAAI,UAAU,CAAC,YAAY,SAAS;AAClC,wBAAkB,SAAS,gBAAgB,YAAY,WAAW;AAAA,IACpE;AACA,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,SAAS,aAAa,eAAe,iBAAiB,CAAC;AAInE,YAAU,MAAM;AACd,QAAI,iBAAiB,UAAU,WAAW,OAAO,KAAK,WAAW,OAAO,MAAM,WAAW;AACvF,wBAAkB,SAAS,SAAS;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,eAAe,QAAQ,SAAS,YAAY,iBAAiB,CAAC;AAElE,QAAM,eAAe;AAAA,IACnB,CAAC,YAAuB;AAEtB,UAAI,cAAe;AACnB,wBAAkB,SAAS,OAAO;AAAA,IACpC;AAAA,IACA,CAAC,SAAS,eAAe,iBAAiB;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM,aAAa;AAC9B;",
+  "sourcesContent": ["/**\n * useSessionPanelMode Hook\n *\n * Reads and writes a panel's display mode (floating/docked/popout) from the shared session.\n *\n * defaultMode is applied every time the panel opens (isOpen transitions to true),\n * so a panel with defaultMode=\"docked\" will always dock on open \u2014 even if it was\n * previously kicked to floating by another panel docking.\n *\n * Users can still switch modes manually; the switch is respected until the panel\n * closes and reopens.\n */\n\nimport { useCallback, useEffect, useRef } from 'react'\nimport { useIsPhone } from '../../lib/use-media-query'\nimport { useArbiSessionState, useArbiSessionStore, type ArbiPanelMode } from '@arbidocs/react'\n\nexport type PanelMode = ArbiPanelMode\n\nexport function useSessionPanelMode(\n  panelId: string,\n  defaultMode: PanelMode = 'docked',\n  isOpen = true\n) {\n  const panelModes = useArbiSessionState((s) => s.shell.panels.modes)\n  // Opened straight into a window of its own (`openPanel(id, 'popout')`, e.g. a document opened to\n  // share in a call): that is where it opens, not its default place.\n  const openedPoppedOut = useArbiSessionState((s) => s.shell.panels.popout === panelId)\n  const setPanelModeStore = useArbiSessionStore().setPanelMode\n  const isSmallScreen = useIsPhone()\n  const prevOpenRef = useRef(false)\n\n  // The right-hand panel mirrors the left sidebar: parked in the layout\n  // ('docked', which pushes content) or floating over it ('overlay', a\n  // slide-out sheet + backdrop). On phones the parked split and popout windows\n  // don't fit, so coerce to 'overlay' below the breakpoint \u2014 only the *default*\n  // changes with screen size. Driving the *stored* mode keeps every consumer\n  // consistent (slot placement + the FloatingPanel renderer all agree).\n  const mode: PanelMode = isSmallScreen ? 'overlay' : panelModes[panelId] || defaultMode\n\n  // Reset to the effective default when the panel opens (small screen always\n  // 'overlay'), so sidebar buttons reliably bring panels back to their mode.\n  useEffect(() => {\n    if (isOpen && !prevOpenRef.current && !(openedPoppedOut && !isSmallScreen)) {\n      setPanelModeStore(panelId, isSmallScreen ? 'overlay' : defaultMode)\n    }\n    prevOpenRef.current = isOpen\n  }, [isOpen, panelId, defaultMode, isSmallScreen, setPanelModeStore, openedPoppedOut])\n\n  // If the viewport shrinks past the breakpoint while a panel is open and still\n  // parked/popout, snap it to 'overlay' so the split layout never clips.\n  useEffect(() => {\n    if (isSmallScreen && isOpen && panelModes[panelId] && panelModes[panelId] !== 'overlay') {\n      setPanelModeStore(panelId, 'overlay')\n    }\n  }, [isSmallScreen, isOpen, panelId, panelModes, setPanelModeStore])\n\n  const setPanelMode = useCallback(\n    (newMode: PanelMode) => {\n      // Mode switching is a desktop affordance; on phones everything is 'main'.\n      if (isSmallScreen) return\n      setPanelModeStore(panelId, newMode)\n    },\n    [panelId, isSmallScreen, setPanelModeStore]\n  )\n\n  return { mode, setPanelMode }\n}\n"],
+  "mappings": ";AAaA,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB,2BAA+C;AAItE,SAAS,oBACd,SACA,cAAyB,UACzB,SAAS,MACT;AACA,QAAM,aAAa,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK;AAGlE,QAAM,kBAAkB,oBAAoB,CAAC,MAAM,EAAE,MAAM,OAAO,WAAW,OAAO;AACpF,QAAM,oBAAoB,oBAAoB,EAAE;AAChD,QAAM,gBAAgB,WAAW;AACjC,QAAM,cAAc,OAAO,KAAK;AAQhC,QAAM,OAAkB,gBAAgB,YAAY,WAAW,OAAO,KAAK;AAI3E,YAAU,MAAM;AACd,QAAI,UAAU,CAAC,YAAY,WAAW,EAAE,mBAAmB,CAAC,gBAAgB;AAC1E,wBAAkB,SAAS,gBAAgB,YAAY,WAAW;AAAA,IACpE;AACA,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,QAAQ,SAAS,aAAa,eAAe,mBAAmB,eAAe,CAAC;AAIpF,YAAU,MAAM;AACd,QAAI,iBAAiB,UAAU,WAAW,OAAO,KAAK,WAAW,OAAO,MAAM,WAAW;AACvF,wBAAkB,SAAS,SAAS;AAAA,IACtC;AAAA,EACF,GAAG,CAAC,eAAe,QAAQ,SAAS,YAAY,iBAAiB,CAAC;AAElE,QAAM,eAAe;AAAA,IACnB,CAAC,YAAuB;AAEtB,UAAI,cAAe;AACnB,wBAAkB,SAAS,OAAO;AAAA,IACpC;AAAA,IACA,CAAC,SAAS,eAAe,iBAAiB;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM,aAAa;AAC9B;",
   "names": []
 }

package/dist/connection/presentation/ClippingMediaViewer.d.ts

@@ -0,0 +1,12 @@
+/**
+ * An image or a video while clipping for a presentation: drag over it and that area becomes a clip
+ * (of a video: from the moment on screen). A video has its own small bar (play / pause, scrub, and
+ * "Add whole frame"), since the drag area covers the picture.
+ */
+export interface ClippingMediaViewerProps {
+    file: Blob;
+    kind: 'image' | 'video';
+    documentId: string;
+    fileName: string;
+}
+export declare function ClippingMediaViewer({ file, kind, documentId, fileName, }: ClippingMediaViewerProps): import("react").JSX.Element;

package/dist/connection/presentation/ClippingMediaViewer.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Pause, Play, Plus } from "lucide-react";
+import { Button } from "@arbidocs/react/ui";
+import { ClipCaptureOverlay } from "../../presentation/ClipCaptureOverlay.js";
+import { formatTime, mediaCaption } from "../../presentation/model.js";
+import { usePresentation } from "../../presentation/store.js";
+import { useObjectUrl } from "../../presentation/useObjectUrl.js";
+const WHOLE = { x: 0, y: 0, w: 1, h: 1 };
+function ClippingMediaViewer({
+  file,
+  kind,
+  documentId,
+  fileName
+}) {
+  const url = useObjectUrl(file);
+  const videoRef = useRef(null);
+  const imageRef = useRef(null);
+  const [natural, setNatural] = useState(null);
+  const [time, setTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  useEffect(() => {
+    const media = videoRef.current ?? imageRef.current;
+    if (!media || !url) return;
+    const read = () => {
+      const width = media instanceof HTMLVideoElement ? media.videoWidth : media.naturalWidth;
+      const height = media instanceof HTMLVideoElement ? media.videoHeight : media.naturalHeight;
+      if (width && height) setNatural(width / height);
+      if (media instanceof HTMLVideoElement) setDuration(media.duration || 0);
+    };
+    read();
+    const event = media instanceof HTMLVideoElement ? "loadedmetadata" : "load";
+    media.addEventListener(event, read);
+    return () => media.removeEventListener(event, read);
+  }, [url]);
+  const capture = useCallback(
+    ({ rect, aspect }) => {
+      const start = kind === "video" ? videoRef.current?.currentTime ?? 0 : void 0;
+      usePresentation.getState().addClip({
+        kind,
+        documentId,
+        fileName,
+        page: 1,
+        rect,
+        aspect,
+        masks: [],
+        source: file,
+        start,
+        caption: mediaCaption(fileName, start)
+      });
+    },
+    [kind, documentId, fileName, file]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "clipping-media-viewer", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground", children: kind === "video" ? "Drag over the video to clip that area from this moment, or add the whole frame." : "Drag over the part of the image to show it in the presentation." }),
+    /* @__PURE__ */ jsx("div", { className: "relative min-h-0 flex-1 bg-black", style: { containerType: "size" }, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute inset-0 m-auto",
+        style: natural ? {
+          width: `min(100cqw, calc(100cqh * ${natural}))`,
+          height: `min(100cqh, calc(100cqw / ${natural}))`
+        } : { width: "100%", height: "100%" },
+        children: [
+          kind === "video" ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              ref: videoRef,
+              src: url,
+              playsInline: true,
+              preload: "auto",
+              className: "block h-full w-full",
+              onTimeUpdate: (event) => setTime(event.currentTarget.currentTime),
+              onPlay: () => setPlaying(true),
+              onPause: () => setPlaying(false)
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              ref: imageRef,
+              src: url,
+              alt: fileName,
+              draggable: false,
+              className: "block h-full w-full select-none"
+            }
+          ),
+          natural && /* @__PURE__ */ jsx(ClipCaptureOverlay, { page: 1, onCapture: capture })
+        ]
+      }
+    ) }),
+    kind === "video" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-border px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "ghost",
+          className: "size-8",
+          onClick: () => {
+            const v = videoRef.current;
+            if (!v) return;
+            if (v.paused) void v.play();
+            else v.pause();
+          },
+          "aria-label": playing ? "Pause" : "Play",
+          children: playing ? /* @__PURE__ */ jsx(Pause, { className: "size-4" }) : /* @__PURE__ */ jsx(Play, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: duration || 0,
+          step: 0.1,
+          value: time,
+          onChange: (event) => {
+            const v = videoRef.current;
+            if (v) v.currentTime = Number(event.target.value);
+          },
+          className: "min-w-0 flex-1",
+          "aria-label": "Position in the video"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+        formatTime(time),
+        " / ",
+        formatTime(duration)
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          disabled: !natural,
+          onClick: () => natural && capture({ rect: WHOLE, aspect: natural }),
+          "data-testid": "clip-whole-frame",
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "mr-1 size-4" }),
+            "Add whole frame"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ClippingMediaViewer
+};
+//# sourceMappingURL=ClippingMediaViewer.js.map

package/dist/connection/presentation/ClippingMediaViewer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/ClippingMediaViewer.tsx"],
+  "sourcesContent": ["/**\n * An image or a video while clipping for a presentation: drag over it and that area becomes a clip\n * (of a video: from the moment on screen). A video has its own small bar (play / pause, scrub, and\n * \"Add whole frame\"), since the drag area covers the picture.\n */\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Pause, Play, Plus } from 'lucide-react'\nimport { Button } from '@arbidocs/react/ui'\nimport { ClipCaptureOverlay } from '../../presentation/ClipCaptureOverlay'\nimport { formatTime, mediaCaption, type Rect } from '../../presentation/model'\nimport { usePresentation } from '../../presentation/store'\nimport { useObjectUrl } from '../../presentation/useObjectUrl'\n\nexport interface ClippingMediaViewerProps {\n  file: Blob\n  kind: 'image' | 'video'\n  documentId: string\n  fileName: string\n}\n\nconst WHOLE: Rect = { x: 0, y: 0, w: 1, h: 1 }\n\nexport function ClippingMediaViewer({\n  file,\n  kind,\n  documentId,\n  fileName,\n}: ClippingMediaViewerProps) {\n  const url = useObjectUrl(file)\n  const videoRef = useRef<HTMLVideoElement>(null)\n  const imageRef = useRef<HTMLImageElement>(null)\n  // The picture's own width / height, once known.\n  const [natural, setNatural] = useState<number | null>(null)\n  const [time, setTime] = useState(0)\n  const [duration, setDuration] = useState(0)\n  const [playing, setPlaying] = useState(false)\n\n  // Its size, read as soon as it is known: at once if it already loaded (a cached file can load\n  // before any handler is attached), else when it does.\n  useEffect(() => {\n    const media = videoRef.current ?? imageRef.current\n    if (!media || !url) return\n    const read = () => {\n      const width = media instanceof HTMLVideoElement ? media.videoWidth : media.naturalWidth\n      const height = media instanceof HTMLVideoElement ? media.videoHeight : media.naturalHeight\n      if (width && height) setNatural(width / height)\n      if (media instanceof HTMLVideoElement) setDuration(media.duration || 0)\n    }\n    read()\n    const event = media instanceof HTMLVideoElement ? 'loadedmetadata' : 'load'\n    media.addEventListener(event, read)\n    return () => media.removeEventListener(event, read)\n  }, [url])\n\n  const capture = useCallback(\n    ({ rect, aspect }: { rect: Rect; aspect: number }) => {\n      const start = kind === 'video' ? (videoRef.current?.currentTime ?? 0) : undefined\n      usePresentation.getState().addClip({\n        kind,\n        documentId,\n        fileName,\n        page: 1,\n        rect,\n        aspect,\n        masks: [],\n        source: file,\n        start,\n        caption: mediaCaption(fileName, start),\n      })\n    },\n    [kind, documentId, fileName, file]\n  )\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\" data-testid=\"clipping-media-viewer\">\n      <div className=\"border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground\">\n        {kind === 'video'\n          ? 'Drag over the video to clip that area from this moment, or add the whole frame.'\n          : 'Drag over the part of the image to show it in the presentation.'}\n      </div>\n      <div className=\"relative min-h-0 flex-1 bg-black\" style={{ containerType: 'size' }}>\n        {/* The picture as large as fits, aspect kept; the drag area covers exactly it. */}\n        <div\n          className=\"absolute inset-0 m-auto\"\n          style={\n            natural\n              ? {\n                  width: `min(100cqw, calc(100cqh * ${natural}))`,\n                  height: `min(100cqh, calc(100cqw / ${natural}))`,\n                }\n              : { width: '100%', height: '100%' }\n          }\n        >\n          {kind === 'video' ? (\n            <video\n              ref={videoRef}\n              src={url}\n              playsInline\n              preload=\"auto\"\n              className=\"block h-full w-full\"\n              onTimeUpdate={(event) => setTime(event.currentTarget.currentTime)}\n              onPlay={() => setPlaying(true)}\n              onPause={() => setPlaying(false)}\n            />\n          ) : (\n            <img\n              ref={imageRef}\n              src={url}\n              alt={fileName}\n              draggable={false}\n              className=\"block h-full w-full select-none\"\n            />\n          )}\n          {natural && <ClipCaptureOverlay page={1} onCapture={capture} />}\n        </div>\n      </div>\n      {kind === 'video' && (\n        <div className=\"flex items-center gap-2 border-t border-border px-3 py-1.5\">\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"size-8\"\n            onClick={() => {\n              const v = videoRef.current\n              if (!v) return\n              if (v.paused) void v.play()\n              else v.pause()\n            }}\n            aria-label={playing ? 'Pause' : 'Play'}\n          >\n            {playing ? <Pause className=\"size-4\" /> : <Play className=\"size-4\" />}\n          </Button>\n          <input\n            type=\"range\"\n            min={0}\n            max={duration || 0}\n            step={0.1}\n            value={time}\n            onChange={(event) => {\n              const v = videoRef.current\n              if (v) v.currentTime = Number(event.target.value)\n            }}\n            className=\"min-w-0 flex-1\"\n            aria-label=\"Position in the video\"\n          />\n          <span className=\"text-xs tabular-nums text-muted-foreground\">\n            {formatTime(time)} / {formatTime(duration)}\n          </span>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={!natural}\n            onClick={() => natural && capture({ rect: WHOLE, aspect: natural })}\n            data-testid=\"clip-whole-frame\"\n          >\n            <Plus className=\"mr-1 size-4\" />\n            Add whole frame\n          </Button>\n        </div>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": ";AA4EM,cAOE,YAPF;AAtEN,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,SAAS,OAAO,MAAM,YAAY;AAClC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,YAAY,oBAA+B;AACpD,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAS7B,MAAM,QAAc,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE;AAEtC,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,MAAM,aAAa,IAAI;AAC7B,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAI5C,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS,WAAW,SAAS;AAC3C,QAAI,CAAC,SAAS,CAAC,IAAK;AACpB,UAAM,OAAO,MAAM;AACjB,YAAM,QAAQ,iBAAiB,mBAAmB,MAAM,aAAa,MAAM;AAC3E,YAAM,SAAS,iBAAiB,mBAAmB,MAAM,cAAc,MAAM;AAC7E,UAAI,SAAS,OAAQ,YAAW,QAAQ,MAAM;AAC9C,UAAI,iBAAiB,iBAAkB,aAAY,MAAM,YAAY,CAAC;AAAA,IACxE;AACA,SAAK;AACL,UAAM,QAAQ,iBAAiB,mBAAmB,mBAAmB;AACrE,UAAM,iBAAiB,OAAO,IAAI;AAClC,WAAO,MAAM,MAAM,oBAAoB,OAAO,IAAI;AAAA,EACpD,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,UAAU;AAAA,IACd,CAAC,EAAE,MAAM,OAAO,MAAsC;AACpD,YAAM,QAAQ,SAAS,UAAW,SAAS,SAAS,eAAe,IAAK;AACxE,sBAAgB,SAAS,EAAE,QAAQ;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA,OAAO,CAAC;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA,SAAS,aAAa,UAAU,KAAK;AAAA,MACvC,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM,YAAY,UAAU,IAAI;AAAA,EACnC;AAEA,SACE,qBAAC,SAAI,WAAU,gCAA+B,eAAY,yBACxD;AAAA,wBAAC,SAAI,WAAU,6EACZ,mBAAS,UACN,oFACA,mEACN;AAAA,IACA,oBAAC,SAAI,WAAU,oCAAmC,OAAO,EAAE,eAAe,OAAO,GAE/E;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE,UACI;AAAA,UACE,OAAO,6BAA6B,OAAO;AAAA,UAC3C,QAAQ,6BAA6B,OAAO;AAAA,QAC9C,IACA,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,QAGrC;AAAA,mBAAS,UACR;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,aAAW;AAAA,cACX,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,cAAc,CAAC,UAAU,QAAQ,MAAM,cAAc,WAAW;AAAA,cAChE,QAAQ,MAAM,WAAW,IAAI;AAAA,cAC7B,SAAS,MAAM,WAAW,KAAK;AAAA;AAAA,UACjC,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,KAAK;AAAA,cACL,KAAK;AAAA,cACL,WAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,UAED,WAAW,oBAAC,sBAAmB,MAAM,GAAG,WAAW,SAAS;AAAA;AAAA;AAAA,IAC/D,GACF;AAAA,IACC,SAAS,WACR,qBAAC,SAAI,WAAU,8DACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,MAAM;AACb,kBAAM,IAAI,SAAS;AACnB,gBAAI,CAAC,EAAG;AACR,gBAAI,EAAE,OAAQ,MAAK,EAAE,KAAK;AAAA,gBACrB,GAAE,MAAM;AAAA,UACf;AAAA,UACA,cAAY,UAAU,UAAU;AAAA,UAE/B,oBAAU,oBAAC,SAAM,WAAU,UAAS,IAAK,oBAAC,QAAK,WAAU,UAAS;AAAA;AAAA,MACrE;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK,YAAY;AAAA,UACjB,MAAM;AAAA,UACN,OAAO;AAAA,UACP,UAAU,CAAC,UAAU;AACnB,kBAAM,IAAI,SAAS;AACnB,gBAAI,EAAG,GAAE,cAAc,OAAO,MAAM,OAAO,KAAK;AAAA,UAClD;AAAA,UACA,WAAU;AAAA,UACV,cAAW;AAAA;AAAA,MACb;AAAA,MACA,qBAAC,UAAK,WAAU,8CACb;AAAA,mBAAW,IAAI;AAAA,QAAE;AAAA,QAAI,WAAW,QAAQ;AAAA,SAC3C;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,UAAU,CAAC;AAAA,UACX,SAAS,MAAM,WAAW,QAAQ,EAAE,MAAM,OAAO,QAAQ,QAAQ,CAAC;AAAA,UAClE,eAAY;AAAA,UAEZ;AAAA,gCAAC,QAAK,WAAU,eAAc;AAAA,YAAE;AAAA;AAAA;AAAA,MAElC;AAAA,OACF;AAAA,KAEJ;AAEJ;",
+  "names": []
+}

package/dist/connection/presentation/ClippingPdfViewer.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The PDF while clipping for a presentation: drag over a page and the area becomes a clip in the
+ * presentation (and goes on the current slide while that has fewer than two).
+ *
+ * Redactions are honoured: when the version has markup, its redaction marks (all but rejected
+ * ones) are read first and every clip carries those over its area as black masks, so a redacted
+ * passage never reaches a shared screen. Clipping waits for them, and stays off if they cannot be
+ * read.
+ */
+import { type ComponentType } from 'react';
+import type { PdfViewerProps } from '@arbidocs/react/viewers';
+export interface ClippingPdfViewerProps extends Omit<PdfViewerProps, 'renderPageOverlay'> {
+    file: Blob;
+    documentId: string;
+    /** The version on screen when it is an older one. */
+    version?: number;
+    fileName: string;
+    /** The version has markup, which may hold redactions. */
+    hasMarkup: boolean;
+    viewer: ComponentType<PdfViewerProps>;
+}
+export declare function ClippingPdfViewer({ documentId, version, fileName, hasMarkup, viewer: Viewer, ...viewerProps }: ClippingPdfViewerProps): import("react").JSX.Element;

package/dist/connection/presentation/ClippingPdfViewer.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { createMarkupStore, useDocumentTools } from "@arbidocs/react/document-tools";
+import { ClipCaptureOverlay } from "../../presentation/ClipCaptureOverlay.js";
+import { usePresentation } from "../../presentation/store.js";
+const NO_MASKS = { status: "ready", masks: /* @__PURE__ */ new Map() };
+function useRedactionMasks(documentId, version, hasMarkup) {
+  const { client } = useDocumentTools();
+  const [state, setState] = useState(hasMarkup ? { status: "loading" } : NO_MASKS);
+  useEffect(() => {
+    if (!hasMarkup) {
+      setState(NO_MASKS);
+      return;
+    }
+    let cancelled = false;
+    setState({ status: "loading" });
+    createMarkupStore({ version, client }).load(documentId).then((layer) => {
+      if (cancelled) return;
+      const masks = /* @__PURE__ */ new Map();
+      for (const mark of layer.annotations) {
+        if (mark.kind !== "redaction" || mark.status === "rejected") continue;
+        masks.set(mark.page, [...masks.get(mark.page) ?? [], ...mark.rects]);
+      }
+      setState({ status: "ready", masks });
+    }).catch(() => !cancelled && setState({ status: "error" }));
+    return () => {
+      cancelled = true;
+    };
+  }, [client, documentId, version, hasMarkup]);
+  return state;
+}
+function Notice({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground", children });
+}
+function ClippingPdfViewer({
+  documentId,
+  version,
+  fileName,
+  hasMarkup,
+  viewer: Viewer,
+  ...viewerProps
+}) {
+  const masks = useRedactionMasks(documentId, version, hasMarkup);
+  const file = viewerProps.file;
+  const capture = useCallback(
+    ({ page, rect, aspect }) => {
+      if (masks.status !== "ready") return;
+      usePresentation.getState().addClip({
+        kind: "pdf",
+        documentId,
+        version,
+        fileName,
+        page,
+        rect,
+        aspect,
+        masks: masks.masks.get(page) ?? [],
+        source: file
+      });
+    },
+    [masks, documentId, version, fileName, file]
+  );
+  const renderPageOverlay = useCallback(
+    ({ pageNumber }) => masks.status === "ready" ? /* @__PURE__ */ jsx(ClipCaptureOverlay, { page: pageNumber, onCapture: capture }) : null,
+    [masks.status, capture]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", "data-testid": "clipping-pdf-viewer", children: [
+    /* @__PURE__ */ jsx(Notice, { children: masks.status === "loading" ? "Reading the redactions before clipping\u2026" : masks.status === "error" ? "Couldn't read this document's redactions, so it can't be clipped." : "Drag over the part of a page to show it in the presentation." }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(Viewer, { ...viewerProps, renderPageOverlay }) })
+  ] });
+}
+export {
+  ClippingPdfViewer
+};
+//# sourceMappingURL=ClippingPdfViewer.js.map

package/dist/connection/presentation/ClippingPdfViewer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/ClippingPdfViewer.tsx"],
+  "sourcesContent": ["/**\n * The PDF while clipping for a presentation: drag over a page and the area becomes a clip in the\n * presentation (and goes on the current slide while that has fewer than two).\n *\n * Redactions are honoured: when the version has markup, its redaction marks (all but rejected\n * ones) are read first and every clip carries those over its area as black masks, so a redacted\n * passage never reaches a shared screen. Clipping waits for them, and stays off if they cannot be\n * read.\n */\n\nimport { useCallback, useEffect, useState, type ComponentType, type ReactNode } from 'react'\nimport { createMarkupStore, useDocumentTools } from '@arbidocs/react/document-tools'\nimport type { PdfViewerProps } from '@arbidocs/react/viewers'\nimport { ClipCaptureOverlay } from '../../presentation/ClipCaptureOverlay'\nimport type { Rect } from '../../presentation/model'\nimport { usePresentation } from '../../presentation/store'\n\ntype MaskState =\n  | { status: 'loading' }\n  | { status: 'error' }\n  | { status: 'ready'; masks: ReadonlyMap<number, Rect[]> }\n\nconst NO_MASKS: MaskState = { status: 'ready', masks: new Map() }\n\n/** The version's redaction rectangles by page; none to read when it has no markup. */\nfunction useRedactionMasks(documentId: string, version: number | undefined, hasMarkup: boolean) {\n  const { client } = useDocumentTools()\n  const [state, setState] = useState<MaskState>(hasMarkup ? { status: 'loading' } : NO_MASKS)\n  useEffect(() => {\n    if (!hasMarkup) {\n      setState(NO_MASKS)\n      return\n    }\n    let cancelled = false\n    setState({ status: 'loading' })\n    createMarkupStore({ version, client })\n      .load(documentId)\n      .then((layer) => {\n        if (cancelled) return\n        const masks = new Map<number, Rect[]>()\n        for (const mark of layer.annotations) {\n          if (mark.kind !== 'redaction' || mark.status === 'rejected') continue\n          masks.set(mark.page, [...(masks.get(mark.page) ?? []), ...mark.rects])\n        }\n        setState({ status: 'ready', masks })\n      })\n      .catch(() => !cancelled && setState({ status: 'error' }))\n    return () => {\n      cancelled = true\n    }\n  }, [client, documentId, version, hasMarkup])\n  return state\n}\n\nexport interface ClippingPdfViewerProps extends Omit<PdfViewerProps, 'renderPageOverlay'> {\n  file: Blob\n  documentId: string\n  /** The version on screen when it is an older one. */\n  version?: number\n  fileName: string\n  /** The version has markup, which may hold redactions. */\n  hasMarkup: boolean\n  viewer: ComponentType<PdfViewerProps>\n}\n\nfunction Notice({ children }: { children: ReactNode }) {\n  return (\n    <div className=\"border-b border-border bg-muted px-3 py-1.5 text-xs text-muted-foreground\">\n      {children}\n    </div>\n  )\n}\n\nexport function ClippingPdfViewer({\n  documentId,\n  version,\n  fileName,\n  hasMarkup,\n  viewer: Viewer,\n  ...viewerProps\n}: ClippingPdfViewerProps) {\n  const masks = useRedactionMasks(documentId, version, hasMarkup)\n  const file = viewerProps.file\n\n  const capture = useCallback(\n    ({ page, rect, aspect }: { page: number; rect: Rect; aspect: number }) => {\n      if (masks.status !== 'ready') return\n      usePresentation.getState().addClip({\n        kind: 'pdf',\n        documentId,\n        version,\n        fileName,\n        page,\n        rect,\n        aspect,\n        masks: masks.masks.get(page) ?? [],\n        source: file,\n      })\n      // It joins the presentation's tray (the viewer's Presentation pill counts it).\n    },\n    [masks, documentId, version, fileName, file]\n  )\n\n  const renderPageOverlay = useCallback(\n    ({ pageNumber }: { pageNumber: number }) =>\n      masks.status === 'ready' ? (\n        <ClipCaptureOverlay page={pageNumber} onCapture={capture} />\n      ) : null,\n    [masks.status, capture]\n  )\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\" data-testid=\"clipping-pdf-viewer\">\n      <Notice>\n        {masks.status === 'loading'\n          ? 'Reading the redactions before clipping\u2026'\n          : masks.status === 'error'\n            ? \"Couldn't read this document's redactions, so it can't be clipped.\"\n            : 'Drag over the part of a page to show it in the presentation.'}\n      </Notice>\n      <div className=\"min-h-0 flex-1\">\n        <Viewer {...viewerProps} renderPageOverlay={renderPageOverlay} />\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAmEI,cA6CA,YA7CA;AAzDJ,SAAS,aAAa,WAAW,gBAAoD;AACrF,SAAS,mBAAmB,wBAAwB;AAEpD,SAAS,0BAA0B;AAEnC,SAAS,uBAAuB;AAOhC,MAAM,WAAsB,EAAE,QAAQ,SAAS,OAAO,oBAAI,IAAI,EAAE;AAGhE,SAAS,kBAAkB,YAAoB,SAA6B,WAAoB;AAC9F,QAAM,EAAE,OAAO,IAAI,iBAAiB;AACpC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAoB,YAAY,EAAE,QAAQ,UAAU,IAAI,QAAQ;AAC1F,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd,eAAS,QAAQ;AACjB;AAAA,IACF;AACA,QAAI,YAAY;AAChB,aAAS,EAAE,QAAQ,UAAU,CAAC;AAC9B,sBAAkB,EAAE,SAAS,OAAO,CAAC,EAClC,KAAK,UAAU,EACf,KAAK,CAAC,UAAU;AACf,UAAI,UAAW;AACf,YAAM,QAAQ,oBAAI,IAAoB;AACtC,iBAAW,QAAQ,MAAM,aAAa;AACpC,YAAI,KAAK,SAAS,eAAe,KAAK,WAAW,WAAY;AAC7D,cAAM,IAAI,KAAK,MAAM,CAAC,GAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,GAAI,GAAG,KAAK,KAAK,CAAC;AAAA,MACvE;AACA,eAAS,EAAE,QAAQ,SAAS,MAAM,CAAC;AAAA,IACrC,CAAC,EACA,MAAM,MAAM,CAAC,aAAa,SAAS,EAAE,QAAQ,QAAQ,CAAC,CAAC;AAC1D,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,SAAS,SAAS,CAAC;AAC3C,SAAO;AACT;AAaA,SAAS,OAAO,EAAE,SAAS,GAA4B;AACrD,SACE,oBAAC,SAAI,WAAU,6EACZ,UACH;AAEJ;AAEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA2B;AACzB,QAAM,QAAQ,kBAAkB,YAAY,SAAS,SAAS;AAC9D,QAAM,OAAO,YAAY;AAEzB,QAAM,UAAU;AAAA,IACd,CAAC,EAAE,MAAM,MAAM,OAAO,MAAoD;AACxE,UAAI,MAAM,WAAW,QAAS;AAC9B,sBAAgB,SAAS,EAAE,QAAQ;AAAA,QACjC,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,MAAM,MAAM,IAAI,IAAI,KAAK,CAAC;AAAA,QACjC,QAAQ;AAAA,MACV,CAAC;AAAA,IAEH;AAAA,IACA,CAAC,OAAO,YAAY,SAAS,UAAU,IAAI;AAAA,EAC7C;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,EAAE,WAAW,MACZ,MAAM,WAAW,UACf,oBAAC,sBAAmB,MAAM,YAAY,WAAW,SAAS,IACxD;AAAA,IACN,CAAC,MAAM,QAAQ,OAAO;AAAA,EACxB;AAEA,SACE,qBAAC,SAAI,WAAU,gCAA+B,eAAY,uBACxD;AAAA,wBAAC,UACE,gBAAM,WAAW,YACd,iDACA,MAAM,WAAW,UACf,sEACA,gEACR;AAAA,IACA,oBAAC,SAAI,WAAU,kBACb,8BAAC,UAAQ,GAAG,aAAa,mBAAsC,GACjE;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/connection/presentation/ConnectedPresentation.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The presentation's own window, mounted once by the app shell (the session's `PRESENTATION_PANEL`,
+ * a pop-out). It presents: the slides alone, what is shared in a call or put full screen; or, when
+ * the editor is popped out of the viewer's slides tab, it edits there, beside the documents its
+ * clips come from. A window opened only to present closes when presenting ends.
+ *
+ * It also keeps what the presentation needs wherever it is edited: the theme's logo image, read
+ * when the logo changes; and a clean slate when the session signs out or another user signs in
+ * (the presentation holds decrypted files in memory).
+ */
+/** The presentation's window, with the document tools it needs (sources, redactions). */
+export declare function ConnectedPresentation(): import("react").JSX.Element;

package/dist/connection/presentation/ConnectedPresentation.js

@@ -0,0 +1,100 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { PanelLeftClose } from "lucide-react";
+import {
+  isPanelOpen,
+  useArbiSession,
+  useArbiSessionState,
+  useArbiSessionStore
+} from "@arbidocs/react";
+import { Button } from "@arbidocs/react/ui";
+import { ConnectedPanelHost } from "../panels/ConnectedPanelHost.js";
+import { ConnectedDocumentToolsProvider } from "../viewer/ConnectedDocumentToolsProvider.js";
+import { PRESENTATION_PANEL, presentationWindowOnlyPresents } from "../../presentation/panel-id.js";
+import { PresenterView } from "../../presentation/PresenterView.js";
+import { usePresentation } from "../../presentation/store.js";
+import { usePresentationController } from "./usePresentationController.js";
+import { usePresentationFiles } from "./usePresentationFiles.js";
+function ConnectedPresentation() {
+  return /* @__PURE__ */ jsx(ConnectedDocumentToolsProvider, { children: /* @__PURE__ */ jsx(PresentationWindow, {}) });
+}
+function PresentationWindow() {
+  const session = useArbiSessionStore();
+  const notify = usePresentation((s) => s.notify);
+  const presenting = usePresentation((s) => s.presenting);
+  const isOpen = useArbiSessionState((state) => isPanelOpen(state, PRESENTATION_PANEL));
+  const { user } = useArbiSession();
+  const userId = user?.external_id ?? null;
+  const shownFor = useRef(userId);
+  const { downloadFile } = usePresentationFiles();
+  const logoId = usePresentation((s) => s.theme.logo?.documentId ?? null);
+  const controller = usePresentationController(isOpen && !presenting);
+  useEffect(() => {
+    if (shownFor.current === userId) return;
+    shownFor.current = userId;
+    usePresentation.getState().reset();
+    session.closePanel(PRESENTATION_PANEL);
+  }, [userId, session]);
+  useEffect(() => {
+    if (!logoId) return;
+    let current = true;
+    downloadFile(logoId).then((image) => current && usePresentation.getState().setLogoImage(image)).catch(() => current && notify("The logo could not be read", "error"));
+    return () => {
+      current = false;
+    };
+  }, [logoId, downloadFile, notify]);
+  useEffect(() => {
+    if (!isOpen) usePresentation.getState().setPresenting(false);
+  }, [isOpen]);
+  const wasPresenting = useRef(presenting);
+  useEffect(() => {
+    if (wasPresenting.current && !presenting && isOpen && presentationWindowOnlyPresents()) {
+      session.closePanel(PRESENTATION_PANEL);
+    }
+    wasPresenting.current = presenting;
+  }, [presenting, isOpen, session]);
+  const onClose = useCallback(() => session.closePanel(PRESENTATION_PANEL), [session]);
+  return /* @__PURE__ */ jsx(
+    ConnectedPanelHost,
+    {
+      panelId: PRESENTATION_PANEL,
+      isOpen,
+      onClose,
+      title: "Presentation",
+      defaultMode: "popout",
+      defaultWidth: 960,
+      closeTestId: "presentation-panel-close",
+      children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        !presenting && controller.dialogs,
+        /* @__PURE__ */ jsx(
+          PresenterView,
+          {
+            ...controller.editor,
+            actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+              controller.editor.actions,
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  variant: "ghost",
+                  className: "size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11",
+                  title: "Back into the app's viewer",
+                  "aria-label": "Back to the viewer",
+                  onClick: onClose,
+                  "data-testid": "presentation-pop-in",
+                  children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4" })
+                }
+              )
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  ConnectedPresentation
+};
+//# sourceMappingURL=ConnectedPresentation.js.map

package/dist/connection/presentation/ConnectedPresentation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/connection/presentation/ConnectedPresentation.tsx"],
+  "sourcesContent": ["/**\n * The presentation's own window, mounted once by the app shell (the session's `PRESENTATION_PANEL`,\n * a pop-out). It presents: the slides alone, what is shared in a call or put full screen; or, when\n * the editor is popped out of the viewer's slides tab, it edits there, beside the documents its\n * clips come from. A window opened only to present closes when presenting ends.\n *\n * It also keeps what the presentation needs wherever it is edited: the theme's logo image, read\n * when the logo changes; and a clean slate when the session signs out or another user signs in\n * (the presentation holds decrypted files in memory).\n */\n\nimport { useCallback, useEffect, useRef } from 'react'\nimport { PanelLeftClose } from 'lucide-react'\nimport {\n  isPanelOpen,\n  useArbiSession,\n  useArbiSessionState,\n  useArbiSessionStore,\n} from '@arbidocs/react'\nimport { Button } from '@arbidocs/react/ui'\nimport { ConnectedPanelHost } from '../panels/ConnectedPanelHost'\nimport { ConnectedDocumentToolsProvider } from '../viewer/ConnectedDocumentToolsProvider'\nimport { PRESENTATION_PANEL, presentationWindowOnlyPresents } from '../../presentation/panel-id'\nimport { PresenterView } from '../../presentation/PresenterView'\nimport { usePresentation } from '../../presentation/store'\nimport { usePresentationController } from './usePresentationController'\nimport { usePresentationFiles } from './usePresentationFiles'\n\n/** The presentation's window, with the document tools it needs (sources, redactions). */\nexport function ConnectedPresentation() {\n  return (\n    <ConnectedDocumentToolsProvider>\n      <PresentationWindow />\n    </ConnectedDocumentToolsProvider>\n  )\n}\n\nfunction PresentationWindow() {\n  const session = useArbiSessionStore()\n  const notify = usePresentation((s) => s.notify)\n  const presenting = usePresentation((s) => s.presenting)\n  const isOpen = useArbiSessionState((state) => isPanelOpen(state, PRESENTATION_PANEL))\n  const { user } = useArbiSession()\n  const userId = user?.external_id ?? null\n  const shownFor = useRef(userId)\n  const { downloadFile } = usePresentationFiles()\n  const logoId = usePresentation((s) => s.theme.logo?.documentId ?? null)\n  const controller = usePresentationController(isOpen && !presenting)\n\n  useEffect(() => {\n    if (shownFor.current === userId) return\n    shownFor.current = userId\n    usePresentation.getState().reset()\n    session.closePanel(PRESENTATION_PANEL)\n  }, [userId, session])\n\n  // The theme's logo image, fetched whenever the logo changes (the theme keeps a reference only).\n  useEffect(() => {\n    if (!logoId) return\n    let current = true\n    downloadFile(logoId)\n      .then((image) => current && usePresentation.getState().setLogoImage(image))\n      .catch(() => current && notify('The logo could not be read', 'error'))\n    return () => {\n      current = false\n    }\n  }, [logoId, downloadFile, notify])\n\n  // A closed window is not presenting.\n  useEffect(() => {\n    if (!isOpen) usePresentation.getState().setPresenting(false)\n  }, [isOpen])\n\n  // Opened only to present: closed when presenting ends (Escape).\n  const wasPresenting = useRef(presenting)\n  useEffect(() => {\n    if (wasPresenting.current && !presenting && isOpen && presentationWindowOnlyPresents()) {\n      session.closePanel(PRESENTATION_PANEL)\n    }\n    wasPresenting.current = presenting\n  }, [presenting, isOpen, session])\n\n  const onClose = useCallback(() => session.closePanel(PRESENTATION_PANEL), [session])\n\n  return (\n    <ConnectedPanelHost\n      panelId={PRESENTATION_PANEL}\n      isOpen={isOpen}\n      onClose={onClose}\n      title=\"Presentation\"\n      defaultMode=\"popout\"\n      defaultWidth={960}\n      closeTestId=\"presentation-panel-close\"\n    >\n      {/* Inside the panel, so its dialogs open in its window. */}\n      {() => (\n        <>\n          {!presenting && controller.dialogs}\n          <PresenterView\n            {...controller.editor}\n            actions={\n              <>\n                {controller.editor.actions}\n                <Button\n                  type=\"button\"\n                  size=\"icon\"\n                  variant=\"ghost\"\n                  className=\"size-8 text-muted-foreground hover:text-foreground pointer-coarse:size-11\"\n                  title=\"Back into the app's viewer\"\n                  aria-label=\"Back to the viewer\"\n                  onClick={onClose}\n                  data-testid=\"presentation-pop-in\"\n                >\n                  <PanelLeftClose className=\"size-4\" />\n                </Button>\n              </>\n            }\n          />\n        </>\n      )}\n    </ConnectedPanelHost>\n  )\n}\n"],
+  "mappings": ";AAgCM,SAqEQ,UArER,KAqEQ,YArER;AArBN,SAAS,aAAa,WAAW,cAAc;AAC/C,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,oBAAoB,sCAAsC;AACnE,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,iCAAiC;AAC1C,SAAS,4BAA4B;AAG9B,SAAS,wBAAwB;AACtC,SACE,oBAAC,kCACC,8BAAC,sBAAmB,GACtB;AAEJ;AAEA,SAAS,qBAAqB;AAC5B,QAAM,UAAU,oBAAoB;AACpC,QAAM,SAAS,gBAAgB,CAAC,MAAM,EAAE,MAAM;AAC9C,QAAM,aAAa,gBAAgB,CAAC,MAAM,EAAE,UAAU;AACtD,QAAM,SAAS,oBAAoB,CAAC,UAAU,YAAY,OAAO,kBAAkB,CAAC;AACpF,QAAM,EAAE,KAAK,IAAI,eAAe;AAChC,QAAM,SAAS,MAAM,eAAe;AACpC,QAAM,WAAW,OAAO,MAAM;AAC9B,QAAM,EAAE,aAAa,IAAI,qBAAqB;AAC9C,QAAM,SAAS,gBAAgB,CAAC,MAAM,EAAE,MAAM,MAAM,cAAc,IAAI;AACtE,QAAM,aAAa,0BAA0B,UAAU,CAAC,UAAU;AAElE,YAAU,MAAM;AACd,QAAI,SAAS,YAAY,OAAQ;AACjC,aAAS,UAAU;AACnB,oBAAgB,SAAS,EAAE,MAAM;AACjC,YAAQ,WAAW,kBAAkB;AAAA,EACvC,GAAG,CAAC,QAAQ,OAAO,CAAC;AAGpB,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,QAAI,UAAU;AACd,iBAAa,MAAM,EAChB,KAAK,CAAC,UAAU,WAAW,gBAAgB,SAAS,EAAE,aAAa,KAAK,CAAC,EACzE,MAAM,MAAM,WAAW,OAAO,8BAA8B,OAAO,CAAC;AACvE,WAAO,MAAM;AACX,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,MAAM,CAAC;AAGjC,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ,iBAAgB,SAAS,EAAE,cAAc,KAAK;AAAA,EAC7D,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,gBAAgB,OAAO,UAAU;AACvC,YAAU,MAAM;AACd,QAAI,cAAc,WAAW,CAAC,cAAc,UAAU,+BAA+B,GAAG;AACtF,cAAQ,WAAW,kBAAkB;AAAA,IACvC;AACA,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,YAAY,QAAQ,OAAO,CAAC;AAEhC,QAAM,UAAU,YAAY,MAAM,QAAQ,WAAW,kBAAkB,GAAG,CAAC,OAAO,CAAC;AAEnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA,OAAM;AAAA,MACN,aAAY;AAAA,MACZ,cAAc;AAAA,MACd,aAAY;AAAA,MAGX,gBACC,iCACG;AAAA,SAAC,cAAc,WAAW;AAAA,QAC3B;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,WAAW;AAAA,YACf,SACE,iCACG;AAAA,yBAAW,OAAO;AAAA,cACnB;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,OAAM;AAAA,kBACN,cAAW;AAAA,kBACX,SAAS;AAAA,kBACT,eAAY;AAAA,kBAEZ,8BAAC,kBAAe,WAAU,UAAS;AAAA;AAAA,cACrC;AAAA,eACF;AAAA;AAAA,QAEJ;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;",
+  "names": []
+}

package/dist/connection/presentation/ConnectedSlidesTab.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A presentation's slides tab in the document viewer: the slides editor, on the presentation the
+ * viewer shows. Opening a saved presentation loads it (unless it is the one being edited); a new
+ * one (a presentation draft) takes the clips gathered so far. Clips gathered with no presentation
+ * open join the one opened next. Saving a draft makes it a document, and the tab moves to it.
+ *
+ * The editor can also move to the presentation's own window (Pop out), beside the documents its
+ * clips come from; the tab then says so. Present opens that window with the slides alone.
+ */
+export interface ConnectedSlidesTabProps {
+    /** The viewed document's id, or a presentation draft's (`draft-…`). */
+    documentId: string;
+    /** The version on screen, when an older one. */
+    version?: number;
+    /** The document's current version: a newer one than the one being edited is opened. */
+    currentVersion?: number;
+    /** A new presentation, not saved yet: its draft title. */
+    draftTitle?: string;
+}
+export declare function ConnectedSlidesTab({ documentId, version, currentVersion, draftTitle, }: ConnectedSlidesTabProps): import("react").JSX.Element;