@adatechnology/conversations-ui 0.1.0-rc.21 → 0.1.0-rc.23

package/dist/preview/index.d.ts

@@ -1,6 +1,7 @@
 import { G as MessagePayload, o as ConversationSummary, m as ConversationEventSource, q as ConversationsApi, L as ListConversationsParams, n as ConversationPage, S as SSEProvider, k as ConversationDocument, N as ResolveMediaUrl } from '../types-C6A_9edv.js';
 export { A as AudioRecorderButton, a as AudioRecorderButtonLabels, b as AudioRecorderButtonProps, D as DEFAULT_AUDIO_RECORDER_BUTTON_LABELS } from '../types-C6A_9edv.js';
 import * as react from 'react';
+import { ReactNode } from 'react';
 import { InteractiveReplyOption, InboundMediaType } from '@adatechnology/meta-whatsapp-contracts/testing';
 export { PREVIEW_MEDIA_ID_PREFIX } from '@adatechnology/meta-whatsapp-contracts';
 
@@ -296,6 +297,27 @@ type PreviewUploadedMedia = {
 declare function mediaTypeOf(mimeType: string): SendPreviewMediaParams['mediaType'];
 declare function ConversationPreview({ client, sse, conversationId, loadMessages, placeholder, pollIntervalMs, uploadMedia, }: ConversationPreviewProps): react.JSX.Element;
 
+type ConversationSimulatorPanelLabels = {
+    readonly title: string;
+    /** Complementa o telefone no subtítulo, explicando para onde a mensagem realmente vai. */
+    readonly destinationHint: string;
+    readonly close: string;
+    readonly placeholder: string;
+};
+declare const DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS: ConversationSimulatorPanelLabels;
+type ConversationSimulatorPanelProps = Omit<ConversationPreviewProps, 'placeholder'> & {
+    readonly onClose: () => void;
+    /**
+     * Telefone já formatado para leitura. É o host que formata: máscara de telefone é convenção
+     * regional, e o pacote não tem como saber a do produto.
+     */
+    readonly displayNumber?: string;
+    readonly labels?: Partial<ConversationSimulatorPanelLabels>;
+    /** Ações extras no cabeçalho — roteiro automático, limpar conversa, trocar de contato. */
+    readonly headerActions?: ReactNode;
+};
+declare function ConversationSimulatorPanel({ onClose, displayNumber, labels, headerActions, ...previewProps }: ConversationSimulatorPanelProps): react.JSX.Element;
+
 /**
  * Cliente do preview que NÃO carrega segredo: em vez de montar e assinar o payload da Meta no
  * navegador, manda um comando semântico (`{ kind: 'text', text }`) para uma rota do próprio host,
@@ -467,4 +489,4 @@ type MediaTypesPreviewProps = {
 };
 declare function MediaTypesPreview({ conversationId, className, }: MediaTypesPreviewProps): react.JSX.Element;
 
-export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewBridgeClientParams, type CreatePreviewMediaUploaderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_MEDIA_UPLOAD_PATH, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, PreviewBridgeRejectedError, type PreviewEmission, PreviewInProductionError, type PreviewInboundCommand, PreviewMediaUploadRejectedError, type PreviewMediaUploadRequest, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewInboundCommand, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewBridgeClient, createPreviewMediaPoster, createPreviewMediaResolver, createPreviewMediaUploader, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };
+export { type AppendMessageParams, ConversationPreview, type ConversationPreviewProps, ConversationSimulatorPanel, type ConversationSimulatorPanelLabels, type ConversationSimulatorPanelProps, type CreateMockConversationsApiParams, type CreateMockSSEProviderParams, type CreatePreviewBridgeClientParams, type CreatePreviewMediaUploaderParams, type CreatePreviewStoreParams, type CreatePreviewWebhookClientParams, DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, DEFAULT_MEDIA_UPLOAD_PATH, DEFAULT_PREVIEW_SCRIPT, GLOBAL_CHANNEL, type ListConversationsFilters, MEDIA_TYPES_CONVERSATION_ID, MediaTypesPreview, type MediaTypesPreviewProps, type MockEventSource, PREVIEW_CONVERSATIONS, PREVIEW_DOCUMENTS, PREVIEW_FILE_SAMPLES, PREVIEW_MESSAGES, PreviewBridgeRejectedError, type PreviewEmission, PreviewInProductionError, type PreviewInboundCommand, PreviewMediaUploadRejectedError, type PreviewMediaUploadRequest, type PreviewScriptStep, type PreviewStore, type PreviewStoreListener, type PreviewUploadedMedia, type PreviewWebhookClient, PreviewWebhookRejectedError, type SendPreviewInboundCommand, type SendPreviewMediaParams, type SetModeParams, type StartPreviewScriptParams, assertPreviewEnvironment, conversationChannel, createMockConversationsApi, createMockEventSource, createMockSSEProvider, createPreviewBridgeClient, createPreviewMediaPoster, createPreviewMediaResolver, createPreviewMediaUploader, createPreviewStore, createPreviewWebhookClient, mediaTypeOf, previewFileBase64, previewFileUrl, resolvePreviewFileSample, signPreviewPayload, startPreviewScript };

package/dist/preview/index.js

@@ -1034,6 +1034,38 @@ function ConversationPreview({
   ] });
 }
 
+// src/preview/ConversationSimulatorPanel.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS = {
+  title: "Simulador do cliente",
+  destinationHint: "entrega no webhook real",
+  close: "Fechar simulador",
+  placeholder: "Escreva como o cliente\u2026"
+};
+function ConversationSimulatorPanel({
+  onClose,
+  displayNumber,
+  labels,
+  headerActions,
+  ...previewProps
+}) {
+  const text = { ...DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS, ...labels };
+  const subtitle = [displayNumber ?? previewProps.conversationId, text.destinationHint].join(" \xB7 ");
+  return /* @__PURE__ */ jsxs2("aside", { className: "cv-simulator-panel", "aria-label": text.title, children: [
+    /* @__PURE__ */ jsxs2("header", { className: "cv-simulator-panel__header", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "cv-simulator-panel__heading", children: [
+        /* @__PURE__ */ jsx2("h2", { className: "cv-simulator-panel__title", children: text.title }),
+        /* @__PURE__ */ jsx2("p", { className: "cv-simulator-panel__subtitle", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "cv-simulator-panel__actions", children: [
+        headerActions,
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: onClose, title: text.close, "aria-label": text.close, className: "cv-simulator-panel__close", children: /* @__PURE__ */ jsx2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "cv-simulator-panel__body", children: /* @__PURE__ */ jsx2(ConversationPreview, { ...previewProps, placeholder: text.placeholder }) })
+  ] });
+}
+
 // src/preview/createPreviewWebhookClient.ts
 import {
   buildInboundAudioPayload,
@@ -1244,7 +1276,7 @@ function startPreviewScript(params) {
 
 // src/preview/MediaTypesPreview.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var MEDIA_TYPES_CONVERSATION_ID = "5511944443333";
 function MediaTypesPreview({
   conversationId = MEDIA_TYPES_CONVERSATION_ID,
@@ -1259,26 +1291,26 @@ function MediaTypesPreview({
   const messages = PREVIEW_MESSAGES[conversationId] ?? [];
   const documents = PREVIEW_DOCUMENTS[conversationId] ?? [];
   const mimeTypes = [...new Set(documents.map((document) => document.mimeType))];
-  return /* @__PURE__ */ jsx2(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs2("div", { className, children: [
-    /* @__PURE__ */ jsxs2("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx2("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
-      /* @__PURE__ */ jsxs2("p", { className: "text-sm text-gray-500", children: [
+  return /* @__PURE__ */ jsx3(ConversationsProvider, { api, sse, children: /* @__PURE__ */ jsxs3("div", { className, children: [
+    /* @__PURE__ */ jsxs3("header", { className: "border-b px-4 py-3 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx3("h1", { className: "text-lg font-semibold", children: "Teste manual de m\xEDdia" }),
+      /* @__PURE__ */ jsxs3("p", { className: "text-sm text-gray-500", children: [
         documents.length,
         " arquivos, ",
         mimeTypes.length,
         " tipos. Clique no olho para abrir em aba nova e no bot\xE3o da bolha para carregar a m\xEDdia na thread \u2014 \xE9 o que teste automatizado n\xE3o v\xEA."
       ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs2("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
-        /* @__PURE__ */ jsx2(DocumentsLibrary, { perPage: documents.length || 20 })
+    /* @__PURE__ */ jsxs3("div", { className: "grid gap-4 p-4 lg:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Biblioteca da empresa" }),
+        /* @__PURE__ */ jsx3(DocumentsLibrary, { perPage: documents.length || 20 })
       ] }),
-      /* @__PURE__ */ jsxs2("section", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
-        /* @__PURE__ */ jsx2(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
-        /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
-        /* @__PURE__ */ jsx2(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsxs3("section", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Painel da conversa" }),
+        /* @__PURE__ */ jsx3(ConversationDocumentsPanel, { conversationId, open: true, perPage: documents.length || 20 }),
+        /* @__PURE__ */ jsx3("h2", { className: "text-sm font-semibold uppercase tracking-wide text-gray-500", children: "Bolhas na thread" }),
+        /* @__PURE__ */ jsx3(ConversationWallpaper, { className: "max-h-[70vh] overflow-y-auto rounded-lg px-3 py-2", children: messages.map((message, index) => /* @__PURE__ */ jsx3(
           MessageBubble,
           {
             message,
@@ -1294,7 +1326,9 @@ function MediaTypesPreview({
 export {
   AudioRecorderButton,
   ConversationPreview,
+  ConversationSimulatorPanel,
   DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_CONVERSATION_SIMULATOR_PANEL_LABELS,
   DEFAULT_MEDIA_UPLOAD_PATH,
   DEFAULT_PREVIEW_SCRIPT,
   GLOBAL_CHANNEL,

package/dist/styles.css

@@ -237,3 +237,562 @@
 :where(button:not(:disabled), [role=button]:not(:disabled), summary) {
   cursor: pointer;
 }
+.cv-simulator-panel {
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  flex-shrink: 0;
+  border-left: 1px solid rgb(229 231 235);
+  background: #fff;
+}
+.cv-simulator-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.cv-simulator-panel__heading {
+  min-width: 0;
+}
+.cv-simulator-panel__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(17 24 39);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-simulator-panel__subtitle {
+  font-size: 0.75rem;
+  color: rgb(156 163 175);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-simulator-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.cv-simulator-panel__close {
+  display: inline-flex;
+  padding: 0.375rem;
+  border: 0;
+  border-radius: 0.5rem;
+  background: transparent;
+  color: rgb(156 163 175);
+  transition: color 150ms, background-color 150ms;
+}
+.cv-simulator-panel__close:hover {
+  color: rgb(55 65 81);
+  background: rgb(243 244 246);
+}
+.cv-simulator-panel__body {
+  flex: 1;
+  min-height: 0;
+}
+.dark .cv-simulator-panel {
+  border-left-color: rgb(31 41 55);
+  background: rgb(17 24 39);
+}
+.dark .cv-simulator-panel__header {
+  border-bottom-color: rgb(31 41 55);
+}
+.dark .cv-simulator-panel__title {
+  color: rgb(243 244 246);
+}
+.dark .cv-simulator-panel__subtitle {
+  color: rgb(107 114 128);
+}
+.dark .cv-simulator-panel__close:hover {
+  color: rgb(229 231 235);
+  background: rgb(31 41 55);
+}
+@media (max-width: 1023px) {
+  .cv-simulator-panel {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    z-index: 40;
+    border-left: 0;
+  }
+}
+.cv-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.cv-workspace-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.dark .cv-workspace-header {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-header__titles {
+  min-width: 0;
+}
+.cv-workspace-header__titles h1 {
+  font-size: 1.125rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cv-workspace-header__titles p {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+.cv-workspace-header__waiting {
+  color: rgb(217 119 6);
+}
+.dark .cv-workspace-header__waiting {
+  color: rgb(251 191 36);
+}
+.cv-workspace-header__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.5rem;
+}
+.cv-workspace-toggle {
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  min-height: 2.75rem;
+}
+.cv-workspace-toggle:disabled {
+  opacity: 0.5;
+}
+.cv-workspace-toggle--on {
+  background: rgb(37 99 235);
+  color: #fff;
+  border-color: rgb(37 99 235);
+}
+.dark .cv-workspace-toggle {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-workspace-failure {
+  border-bottom: 1px solid rgb(253 230 138);
+  background: rgb(255 251 235);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(146 64 14);
+}
+.dark .cv-workspace-failure {
+  background: rgb(69 26 3);
+  color: rgb(253 230 138);
+  border-color: rgb(120 53 15);
+}
+.cv-workspace-grid {
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgb(243 244 246);
+}
+.dark .cv-workspace-grid {
+  background: rgb(17 24 39);
+}
+.cv-workspace-list,
+.cv-workspace-detail,
+.cv-workspace-simulator {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.75rem;
+  background: #fff;
+}
+.dark .cv-workspace-list,
+.dark .cv-workspace-detail,
+.dark .cv-workspace-simulator {
+  background: rgb(31 41 55);
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-simulator {
+  flex-direction: row;
+}
+@media (max-width: 1023px) {
+  .cv-workspace-grid[data-detail=open] .cv-workspace-list {
+    display: none;
+  }
+  .cv-workspace-grid[data-detail=closed] .cv-workspace-detail {
+    display: none;
+  }
+}
+@media (min-width: 1024px) {
+  .cv-workspace-grid {
+    grid-template-columns: 360px minmax(0, 1fr);
+  }
+  .cv-workspace-grid--with-simulator {
+    grid-template-columns: minmax(0, 1fr) 24rem;
+  }
+  .cv-workspace-grid--with-simulator .cv-workspace-list {
+    display: none;
+  }
+}
+@media (min-width: 1280px) {
+  .cv-workspace-grid--with-simulator {
+    grid-template-columns: 320px minmax(0, 1fr) 24rem;
+  }
+  .cv-workspace-grid--with-simulator .cv-workspace-list {
+    display: flex;
+  }
+}
+.cv-workspace-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.cv-workspace-transcript {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-failure__link {
+  text-decoration: underline;
+}
+.cv-workspace-selection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid #bfdbfe;
+  background: #eff6ff;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: #1d4ed8;
+}
+.cv-workspace-selection__actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.cv-workspace-selection__actions button {
+  min-height: 2.75rem;
+  border-radius: 0.375rem;
+  border: 1px solid #bfdbfe;
+  padding: 0 0.625rem;
+}
+.dark .cv-workspace-selection {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+.dark .cv-workspace-selection__actions button {
+  border-color: #1e40af;
+}
+.cv-workspace-notice {
+  border-top: 1px solid var(--cv-border, #e5e7eb);
+  background: #f3f4f6;
+  padding: 0.75rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+.dark .cv-workspace-notice {
+  border-top-color: #374151;
+  background: #1f2937;
+  color: #9ca3af;
+}
+.cv-workspace-alert {
+  border-top: 1px solid rgb(254 202 202);
+  background: rgb(254 242 242);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: rgb(185 28 28);
+}
+.dark .cv-workspace-alert {
+  background: rgb(69 10 10);
+  color: rgb(252 165 165);
+  border-color: rgb(127 29 29);
+}
+.cv-workspace-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid rgb(229 231 235);
+}
+.dark .cv-workspace-filters {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-search {
+  width: 100%;
+  border: 1px solid rgb(229 231 235);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: transparent;
+}
+.dark .cv-workspace-search {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-workspace-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-chips__legend {
+  color: rgb(107 114 128);
+}
+.cv-workspace-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-chip--on {
+  background: rgb(229 231 235);
+}
+.dark .cv-workspace-chip--on {
+  background: rgb(51 65 85);
+}
+.cv-workspace-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+}
+.cv-workspace-selectall {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+.cv-workspace-rows {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.cv-workspace-empty {
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: rgb(107 114 128);
+}
+.cv-workspace-bulk {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid rgb(191 219 254);
+  background: rgb(239 246 255);
+  font-size: 0.75rem;
+}
+.dark .cv-workspace-bulk {
+  background: rgb(23 37 84);
+  border-color: rgb(30 58 138);
+}
+.cv-workspace-bulk__count {
+  font-weight: 500;
+  color: rgb(29 78 216);
+}
+.dark .cv-workspace-bulk__count {
+  color: rgb(147 197 253);
+}
+.cv-workspace-bulk__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.cv-workspace-bulk__actions button {
+  border: 1px solid rgb(191 219 254);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+}
+.cv-workspace-bulk__actions button:disabled {
+  opacity: 0.5;
+}
+.cv-workspace-pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  border-top: 1px solid rgb(229 231 235);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: rgb(107 114 128);
+}
+.dark .cv-workspace-pager {
+  border-color: rgb(51 65 85);
+}
+.cv-workspace-pager__buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.cv-workspace-pager__buttons button {
+  padding: 0 0.5rem;
+}
+.cv-workspace-pager__buttons button:disabled {
+  opacity: 0.4;
+}
+.cv-workspace-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgb(0 0 0 / 50%);
+}
+.cv-workspace-modal__box {
+  display: flex;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 80vh;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 25%);
+}
+.cv-workspace-modal__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 1.25rem;
+}
+.cv-workspace-modal__header h3 {
+  font-weight: 600;
+}
+.cv-workspace-modal__header p {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+.cv-workspace-modal__search {
+  border-bottom: 1px solid #f3f4f6;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-modal__search input {
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+}
+.cv-workspace-modal__item {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: 0.125rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__item:hover {
+  background: #f9fafb;
+}
+.cv-workspace-modal__item--on {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+.cv-workspace-modal__item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+.cv-workspace-modal__item-meta {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}
+.cv-workspace-modal__warning {
+  border-top: 1px solid #fde68a;
+  background: #fffbeb;
+  padding: 0.5rem 1rem;
+  font-size: 0.75rem;
+  color: #b45309;
+}
+.cv-workspace-modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  border-top: 1px solid #e5e7eb;
+  padding: 0.75rem 1rem;
+}
+.cv-workspace-modal__footer button {
+  min-height: 2.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  padding: 0 0.875rem;
+  font-size: 0.875rem;
+}
+.cv-workspace-modal__footer button:last-child {
+  border-color: transparent;
+  background: #2563eb;
+  color: #fff;
+}
+.cv-workspace-modal__footer button:disabled {
+  opacity: 0.5;
+}
+.dark .cv-workspace-modal__box {
+  border-color: #374151;
+  background: #1f2937;
+}
+.dark .cv-workspace-modal__header,
+.dark .cv-workspace-modal__footer {
+  border-color: #374151;
+}
+.dark .cv-workspace-modal__search {
+  border-color: #374151;
+}
+.dark .cv-workspace-modal__search input {
+  border-color: #4b5563;
+  background: #374151;
+  color: #f3f4f6;
+}
+.dark .cv-workspace-modal__item:hover {
+  background: rgb(55 65 81 / 50%);
+}
+.dark .cv-workspace-modal__item--on {
+  border-color: #1e40af;
+  background: rgb(23 37 84 / 40%);
+  color: #93c5fd;
+}
+.dark .cv-workspace-modal__warning {
+  border-color: #92400e;
+  background: rgb(69 26 3 / 40%);
+  color: #fbbf24;
+}
+.dark .cv-workspace-modal__footer button {
+  border-color: #4b5563;
+  color: #f3f4f6;
+}