@bpmnkit/plugins 0.0.19 → 0.0.23

package/dist/connector-catalog/css.d.ts

@@ -1,4 +1,4 @@
 export declare const CONNECTOR_CATALOG_STYLE_ID = "bpmnkit-connector-catalog-v1";
-export declare const CONNECTOR_CATALOG_CSS = "\n/* \u2500\u2500 Toast notifications \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cc-toast {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  border-radius: 8px;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  z-index: 99999;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);\n  animation: bpmnkit-cc-fadein 0.15s ease;\n  max-width: 420px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n@keyframes bpmnkit-cc-fadein {\n  from { opacity: 0; transform: translateX(-50%) translateY(6px); }\n  to   { opacity: 1; transform: translateX(-50%) translateY(0); }\n}\n.bpmnkit-cc-toast--loading {\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  color: var(--bpmnkit-fg-muted, #8888a8);\n}\n.bpmnkit-cc-toast--success {\n  background: rgba(22, 163, 74, 0.12);\n  border: 1px solid rgba(22, 163, 74, 0.35);\n  color: var(--bpmnkit-success, #22c55e);\n}\n.bpmnkit-cc-toast--error {\n  background: rgba(220, 38, 38, 0.12);\n  border: 1px solid rgba(220, 38, 38, 0.35);\n  color: var(--bpmnkit-danger, #f87171);\n}\n/* Light theme */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-toast--loading {\n  background: var(--bpmnkit-surface-2, #eeeef8);\n  border-color: var(--bpmnkit-border, #d0d0e8);\n  color: var(--bpmnkit-fg-muted, #6666a0);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-toast--success {\n  background: rgba(22, 163, 74, 0.07);\n  border-color: rgba(22, 163, 74, 0.3);\n  color: var(--bpmnkit-success, #16a34a);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-toast--error {\n  background: rgba(220, 38, 38, 0.07);\n  border-color: rgba(220, 38, 38, 0.3);\n  color: var(--bpmnkit-danger, #dc2626);\n}\n";
+export declare const CONNECTOR_CATALOG_CSS = "\n/* \u2500\u2500 Catalog panel overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cc-panel-overlay {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.55);\n  z-index: 99990;\n  animation: bpmnkit-cc-fadein 0.12s ease;\n}\n.bpmnkit-cc-panel {\n  display: flex;\n  flex-direction: column;\n  width: min(720px, 92vw);\n  max-height: 80vh;\n  background: var(--bpmnkit-surface, #161626);\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n  overflow: hidden;\n  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);\n  font-size: 13px;\n  color: var(--bpmnkit-fg, #cdd6f4);\n}\n/* Header */\n.bpmnkit-cc-panel__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px 12px;\n  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);\n  flex-shrink: 0;\n}\n.bpmnkit-cc-panel__title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--bpmnkit-fg, #cdd6f4);\n}\n.bpmnkit-cc-panel__close {\n  background: none;\n  border: none;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n  font-size: 16px;\n  line-height: 1;\n  padding: 4px 6px;\n  border-radius: 4px;\n  transition: color 0.1s, background 0.1s;\n}\n.bpmnkit-cc-panel__close:hover {\n  color: var(--bpmnkit-fg, #cdd6f4);\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n}\n/* Search */\n.bpmnkit-cc-panel__search {\n  padding: 12px 16px 0;\n  flex-shrink: 0;\n}\n.bpmnkit-cc-panel__search-input {\n  width: 100%;\n  box-sizing: border-box;\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  border-radius: 6px;\n  color: var(--bpmnkit-fg, #cdd6f4);\n  font-family: inherit;\n  font-size: 13px;\n  outline: none;\n  padding: 7px 10px;\n  transition: border-color 0.15s;\n}\n.bpmnkit-cc-panel__search-input:focus {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n}\n.bpmnkit-cc-panel__search-input::placeholder {\n  color: var(--bpmnkit-fg-muted, #8888a8);\n}\n/* Tabs */\n.bpmnkit-cc-panel__tabs {\n  display: flex;\n  gap: 2px;\n  padding: 10px 16px 0;\n  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);\n  flex-shrink: 0;\n}\n.bpmnkit-cc-tab {\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 13px;\n  font-weight: 500;\n  margin-bottom: -1px;\n  padding: 6px 12px 8px;\n  transition: color 0.1s, border-color 0.1s;\n}\n.bpmnkit-cc-tab:hover {\n  color: var(--bpmnkit-fg, #cdd6f4);\n}\n.bpmnkit-cc-tab--active {\n  border-bottom-color: var(--bpmnkit-accent, #6b9df7);\n  color: var(--bpmnkit-accent, #6b9df7);\n}\n/* Content */\n.bpmnkit-cc-panel__content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n/* Built-in card grid */\n.bpmnkit-cc-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 10px;\n}\n.bpmnkit-cc-card {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  border-radius: 8px;\n  cursor: pointer;\n  padding: 12px;\n  transition: border-color 0.15s, background 0.15s;\n}\n.bpmnkit-cc-card:hover {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.08));\n}\n.bpmnkit-cc-card__icon {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n.bpmnkit-cc-card__icon svg {\n  width: 20px;\n  height: 20px;\n}\n.bpmnkit-cc-card__body {\n  flex: 1;\n}\n.bpmnkit-cc-card__name {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--bpmnkit-fg, #cdd6f4);\n  margin-bottom: 3px;\n}\n.bpmnkit-cc-card__desc {\n  font-size: 11px;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.bpmnkit-cc-card__use {\n  align-self: flex-start;\n  background: var(--bpmnkit-accent, #6b9df7);\n  border: none;\n  border-radius: 4px;\n  color: #fff;\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 11px;\n  font-weight: 600;\n  padding: 4px 10px;\n  transition: opacity 0.1s;\n}\n.bpmnkit-cc-card__use:hover {\n  opacity: 0.85;\n}\n/* Community row list */\n.bpmnkit-cc-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.bpmnkit-cc-row {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  border-radius: 6px;\n  cursor: pointer;\n  padding: 10px 12px;\n  transition: border-color 0.15s, background 0.15s;\n}\n.bpmnkit-cc-row:hover {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.08));\n}\n.bpmnkit-cc-row__body {\n  flex: 1;\n  min-width: 0;\n}\n.bpmnkit-cc-row__name {\n  font-weight: 600;\n  color: var(--bpmnkit-fg, #cdd6f4);\n}\n.bpmnkit-cc-row__desc {\n  font-size: 11px;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bpmnkit-cc-row__import {\n  background: none;\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  border-radius: 4px;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n  flex-shrink: 0;\n  font-family: inherit;\n  font-size: 11px;\n  padding: 4px 10px;\n  transition: border-color 0.1s, color 0.1s;\n  white-space: nowrap;\n}\n.bpmnkit-cc-row__import:hover {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  color: var(--bpmnkit-accent, #6b9df7);\n}\n/* Empty state */\n.bpmnkit-cc-empty {\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  font-size: 13px;\n  padding: 32px 0;\n  text-align: center;\n}\n/* Footer */\n.bpmnkit-cc-panel__footer {\n  border-top: 1px solid var(--bpmnkit-border, #2a2a42);\n  display: flex;\n  gap: 8px;\n  padding: 10px 16px;\n  flex-shrink: 0;\n}\n.bpmnkit-cc-footer-btn {\n  background: none;\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  border-radius: 5px;\n  color: var(--bpmnkit-fg-muted, #8888a8);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: 12px;\n  padding: 5px 12px;\n  transition: border-color 0.1s, color 0.1s;\n}\n.bpmnkit-cc-footer-btn:hover {\n  border-color: var(--bpmnkit-accent, #6b9df7);\n  color: var(--bpmnkit-accent, #6b9df7);\n}\n/* Light theme overrides */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-panel {\n  background: var(--bpmnkit-surface, #ffffff);\n  border-color: var(--bpmnkit-border, #d0d0e8);\n  color: var(--bpmnkit-fg, #1a1a2e);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-panel__header,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-panel__tabs,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-panel__footer {\n  border-color: var(--bpmnkit-border, #d0d0e8);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-panel__title,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-card__name,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-row__name {\n  color: var(--bpmnkit-fg, #1a1a2e);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-panel__search-input,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-card,\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-row {\n  background: var(--bpmnkit-surface-2, #eeeef8);\n  border-color: var(--bpmnkit-border, #d0d0e8);\n}\n/* \u2500\u2500 Toast notifications \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-cc-toast {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 9px 16px;\n  border-radius: 8px;\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  z-index: 99999;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);\n  animation: bpmnkit-cc-fadein 0.15s ease;\n  max-width: 420px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n@keyframes bpmnkit-cc-fadein {\n  from { opacity: 0; transform: translateX(-50%) translateY(6px); }\n  to   { opacity: 1; transform: translateX(-50%) translateY(0); }\n}\n.bpmnkit-cc-toast--loading {\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border: 1px solid var(--bpmnkit-border, #2a2a42);\n  color: var(--bpmnkit-fg-muted, #8888a8);\n}\n.bpmnkit-cc-toast--success {\n  background: rgba(22, 163, 74, 0.12);\n  border: 1px solid rgba(22, 163, 74, 0.35);\n  color: var(--bpmnkit-success, #22c55e);\n}\n.bpmnkit-cc-toast--error {\n  background: rgba(220, 38, 38, 0.12);\n  border: 1px solid rgba(220, 38, 38, 0.35);\n  color: var(--bpmnkit-danger, #f87171);\n}\n/* Light theme */\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-toast--loading {\n  background: var(--bpmnkit-surface-2, #eeeef8);\n  border-color: var(--bpmnkit-border, #d0d0e8);\n  color: var(--bpmnkit-fg-muted, #6666a0);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-toast--success {\n  background: rgba(22, 163, 74, 0.07);\n  border-color: rgba(22, 163, 74, 0.3);\n  color: var(--bpmnkit-success, #16a34a);\n}\n[data-bpmnkit-hud-theme=\"light\"] .bpmnkit-cc-toast--error {\n  background: rgba(220, 38, 38, 0.07);\n  border-color: rgba(220, 38, 38, 0.3);\n  color: var(--bpmnkit-danger, #dc2626);\n}\n";
 export declare function injectConnectorCatalogStyles(): void;
 //# sourceMappingURL=css.d.ts.map

package/dist/connector-catalog/css.js

@@ -1,5 +1,287 @@
 export const CONNECTOR_CATALOG_STYLE_ID = "bpmnkit-connector-catalog-v1";
 export const CONNECTOR_CATALOG_CSS = `
+/* ── Catalog panel overlay ───────────────────────────────────────────────── */
+.bpmnkit-cc-panel-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  z-index: 99990;
+  animation: bpmnkit-cc-fadein 0.12s ease;
+}
+.bpmnkit-cc-panel {
+  display: flex;
+  flex-direction: column;
+  width: min(720px, 92vw);
+  max-height: 80vh;
+  background: var(--bpmnkit-surface, #161626);
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  border-radius: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  font-family: var(--bpmnkit-font, system-ui, -apple-system, sans-serif);
+  font-size: 13px;
+  color: var(--bpmnkit-fg, #cdd6f4);
+}
+/* Header */
+.bpmnkit-cc-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px 12px;
+  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);
+  flex-shrink: 0;
+}
+.bpmnkit-cc-panel__title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--bpmnkit-fg, #cdd6f4);
+}
+.bpmnkit-cc-panel__close {
+  background: none;
+  border: none;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 4px 6px;
+  border-radius: 4px;
+  transition: color 0.1s, background 0.1s;
+}
+.bpmnkit-cc-panel__close:hover {
+  color: var(--bpmnkit-fg, #cdd6f4);
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+}
+/* Search */
+.bpmnkit-cc-panel__search {
+  padding: 12px 16px 0;
+  flex-shrink: 0;
+}
+.bpmnkit-cc-panel__search-input {
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  border-radius: 6px;
+  color: var(--bpmnkit-fg, #cdd6f4);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+  padding: 7px 10px;
+  transition: border-color 0.15s;
+}
+.bpmnkit-cc-panel__search-input:focus {
+  border-color: var(--bpmnkit-accent, #6b9df7);
+}
+.bpmnkit-cc-panel__search-input::placeholder {
+  color: var(--bpmnkit-fg-muted, #8888a8);
+}
+/* Tabs */
+.bpmnkit-cc-panel__tabs {
+  display: flex;
+  gap: 2px;
+  padding: 10px 16px 0;
+  border-bottom: 1px solid var(--bpmnkit-border, #2a2a42);
+  flex-shrink: 0;
+}
+.bpmnkit-cc-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: -1px;
+  padding: 6px 12px 8px;
+  transition: color 0.1s, border-color 0.1s;
+}
+.bpmnkit-cc-tab:hover {
+  color: var(--bpmnkit-fg, #cdd6f4);
+}
+.bpmnkit-cc-tab--active {
+  border-bottom-color: var(--bpmnkit-accent, #6b9df7);
+  color: var(--bpmnkit-accent, #6b9df7);
+}
+/* Content */
+.bpmnkit-cc-panel__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+/* Built-in card grid */
+.bpmnkit-cc-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 10px;
+}
+.bpmnkit-cc-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 12px;
+  transition: border-color 0.15s, background 0.15s;
+}
+.bpmnkit-cc-card:hover {
+  border-color: var(--bpmnkit-accent, #6b9df7);
+  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.08));
+}
+.bpmnkit-cc-card__icon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+.bpmnkit-cc-card__icon svg {
+  width: 20px;
+  height: 20px;
+}
+.bpmnkit-cc-card__body {
+  flex: 1;
+}
+.bpmnkit-cc-card__name {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--bpmnkit-fg, #cdd6f4);
+  margin-bottom: 3px;
+}
+.bpmnkit-cc-card__desc {
+  font-size: 11px;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.bpmnkit-cc-card__use {
+  align-self: flex-start;
+  background: var(--bpmnkit-accent, #6b9df7);
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 10px;
+  transition: opacity 0.1s;
+}
+.bpmnkit-cc-card__use:hover {
+  opacity: 0.85;
+}
+/* Community row list */
+.bpmnkit-cc-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.bpmnkit-cc-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 10px 12px;
+  transition: border-color 0.15s, background 0.15s;
+}
+.bpmnkit-cc-row:hover {
+  border-color: var(--bpmnkit-accent, #6b9df7);
+  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.08));
+}
+.bpmnkit-cc-row__body {
+  flex: 1;
+  min-width: 0;
+}
+.bpmnkit-cc-row__name {
+  font-weight: 600;
+  color: var(--bpmnkit-fg, #cdd6f4);
+}
+.bpmnkit-cc-row__desc {
+  font-size: 11px;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bpmnkit-cc-row__import {
+  background: none;
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  border-radius: 4px;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+  flex-shrink: 0;
+  font-family: inherit;
+  font-size: 11px;
+  padding: 4px 10px;
+  transition: border-color 0.1s, color 0.1s;
+  white-space: nowrap;
+}
+.bpmnkit-cc-row__import:hover {
+  border-color: var(--bpmnkit-accent, #6b9df7);
+  color: var(--bpmnkit-accent, #6b9df7);
+}
+/* Empty state */
+.bpmnkit-cc-empty {
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  font-size: 13px;
+  padding: 32px 0;
+  text-align: center;
+}
+/* Footer */
+.bpmnkit-cc-panel__footer {
+  border-top: 1px solid var(--bpmnkit-border, #2a2a42);
+  display: flex;
+  gap: 8px;
+  padding: 10px 16px;
+  flex-shrink: 0;
+}
+.bpmnkit-cc-footer-btn {
+  background: none;
+  border: 1px solid var(--bpmnkit-border, #2a2a42);
+  border-radius: 5px;
+  color: var(--bpmnkit-fg-muted, #8888a8);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  padding: 5px 12px;
+  transition: border-color 0.1s, color 0.1s;
+}
+.bpmnkit-cc-footer-btn:hover {
+  border-color: var(--bpmnkit-accent, #6b9df7);
+  color: var(--bpmnkit-accent, #6b9df7);
+}
+/* Light theme overrides */
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-panel {
+  background: var(--bpmnkit-surface, #ffffff);
+  border-color: var(--bpmnkit-border, #d0d0e8);
+  color: var(--bpmnkit-fg, #1a1a2e);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-panel__header,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-panel__tabs,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-panel__footer {
+  border-color: var(--bpmnkit-border, #d0d0e8);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-panel__title,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-card__name,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-row__name {
+  color: var(--bpmnkit-fg, #1a1a2e);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-panel__search-input,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-card,
+[data-bpmnkit-hud-theme="light"] .bpmnkit-cc-row {
+  background: var(--bpmnkit-surface-2, #eeeef8);
+  border-color: var(--bpmnkit-border, #d0d0e8);
+}
 /* ── Toast notifications ─────────────────────────────────────────────────── */
 .bpmnkit-cc-toast {
   position: fixed;

package/dist/connector-catalog/index.d.ts

@@ -1,15 +1,13 @@
 /**
  * @bpmnkit/canvas-plugin-connector-catalog — Import API connectors from
- * OpenAPI specs into the BPMN editor via the command palette.
+ * OpenAPI specs into the BPMN editor via the command palette and a visual
+ * catalog panel.
  *
- * Exposes 30+ pre-configured APIs (GitHub, Stripe, Slack, …) as searchable
- * commands in Ctrl+K / ⌘K. Selecting one fetches the spec, generates connector
- * templates via `@bpmnkit/connector-gen`, and registers them in the
- * config-panel-bpmn connector selector — no restart required.
+ * The catalog panel (Ctrl+K → "Browse connectors…") shows two tabs:
+ *   • Built-in Workers — bpmnkit workers, always available without a proxy
+ *   • Community APIs  — 30+ pre-configured OpenAPI specs (GitHub, Stripe, …)
  *
- * Additional commands accept any OpenAPI 3.x spec URL ("Import from OpenAPI
- * URL…") or a local file upload ("Import from OpenAPI file…") for custom,
- * private, or CORS-restricted APIs.
+ * Additional commands accept any OpenAPI 3.x spec URL or a local file upload.
  *
  * ## Usage
  * ```typescript
@@ -27,24 +25,39 @@
 import type { CanvasPlugin } from "@bpmnkit/canvas";
 import type { CommandPalettePlugin } from "../command-palette/index.js";
 import type { ElementTemplate } from "../config-panel-bpmn/index.js";
+import { BUILTIN_WORKER_TEMPLATES } from "./builtin-templates.js";
 import { CONNECTOR_CATALOG_CSS, CONNECTOR_CATALOG_STYLE_ID, injectConnectorCatalogStyles } from "./css.js";
 export { CONNECTOR_CATALOG_CSS, CONNECTOR_CATALOG_STYLE_ID, injectConnectorCatalogStyles };
+export { BUILTIN_WORKER_TEMPLATES };
 /** Subset of the config-panel-bpmn plugin API needed by this plugin. */
 export interface TemplateRegistrar {
     registerTemplate(template: ElementTemplate): void;
 }
+export interface ConnectorCatalogOptions {
+    /** Base URL of the bpmnkit proxy (e.g. "http://localhost:3033"). When set,
+     * built-in worker templates are fetched from `<proxyUrl>/worker-templates`
+     * and registered automatically on plugin install. */
+    proxyUrl?: string;
+}
+/** Extended plugin interface — exposes `openCatalog()` for programmatic use. */
+export interface ConnectorCatalogPlugin extends CanvasPlugin {
+    openCatalog(): void;
+}
 /**
  * Creates the connector catalog plugin.
  *
- * Registers one command per built-in catalog entry plus an "Import from
- * OpenAPI URL" command. All commands appear in the command palette (Ctrl+K /
- * ⌘K). Selecting a catalog entry fetches the spec, generates connector
- * templates, and registers them immediately in the config panel connector
- * selector.
+ * Registers a visual catalog panel (two tabs: Built-in Workers + Community
+ * APIs) plus command palette commands for all catalog entries. The panel is
+ * accessible via the "Browse connectors…" palette command.
+ *
+ * Built-in worker templates are registered immediately (static, no proxy).
+ * When `options.proxyUrl` is set, additional templates are fetched from the
+ * local proxy at startup.
  *
  * @param registrar - The config-panel-bpmn plugin (or any object with
  *   `registerTemplate`).
  * @param palette - The command palette plugin.
+ * @param options - Optional configuration.
  */
-export declare function createConnectorCatalogPlugin(registrar: TemplateRegistrar, palette: CommandPalettePlugin): CanvasPlugin;
+export declare function createConnectorCatalogPlugin(registrar: TemplateRegistrar, palette: CommandPalettePlugin, options?: ConnectorCatalogOptions): ConnectorCatalogPlugin;
 //# sourceMappingURL=index.d.ts.map

package/dist/connector-catalog/index.js

@@ -1,15 +1,13 @@
 /**
  * @bpmnkit/canvas-plugin-connector-catalog — Import API connectors from
- * OpenAPI specs into the BPMN editor via the command palette.
+ * OpenAPI specs into the BPMN editor via the command palette and a visual
+ * catalog panel.
  *
- * Exposes 30+ pre-configured APIs (GitHub, Stripe, Slack, …) as searchable
- * commands in Ctrl+K / ⌘K. Selecting one fetches the spec, generates connector
- * templates via `@bpmnkit/connector-gen`, and registers them in the
- * config-panel-bpmn connector selector — no restart required.
+ * The catalog panel (Ctrl+K → "Browse connectors…") shows two tabs:
+ *   • Built-in Workers — bpmnkit workers, always available without a proxy
+ *   • Community APIs  — 30+ pre-configured OpenAPI specs (GitHub, Stripe, …)
  *
- * Additional commands accept any OpenAPI 3.x spec URL ("Import from OpenAPI
- * URL…") or a local file upload ("Import from OpenAPI file…") for custom,
- * private, or CORS-restricted APIs.
+ * Additional commands accept any OpenAPI 3.x spec URL or a local file upload.
  *
  * ## Usage
  * ```typescript
@@ -25,8 +23,11 @@
  * @packageDocumentation
  */
 import { CATALOG, generate, generateFromCatalog, generateFromUrl, } from "@bpmnkit/connector-gen/browser";
+import { BUILTIN_WORKER_TEMPLATES } from "./builtin-templates.js";
 import { CONNECTOR_CATALOG_CSS, CONNECTOR_CATALOG_STYLE_ID, injectConnectorCatalogStyles, } from "./css.js";
+import { CatalogPanel } from "./panel.js";
 export { CONNECTOR_CATALOG_CSS, CONNECTOR_CATALOG_STYLE_ID, injectConnectorCatalogStyles };
+export { BUILTIN_WORKER_TEMPLATES };
 // ── Toast helper ──────────────────────────────────────────────────────────────
 function showToast(message, variant) {
     const el = document.createElement("div");
@@ -102,8 +103,21 @@ function loadFromFile(registrar) {
     };
     input.click();
 }
+async function loadBuiltinWorkers(proxyUrl, registrar) {
+    try {
+        const res = await fetch(`${proxyUrl}/worker-templates`);
+        if (!res.ok)
+            return;
+        const templates = (await res.json());
+        for (const t of templates) {
+            registrar.registerTemplate(t);
+        }
+    }
+    catch {
+        // proxy unavailable — built-in workers simply aren't registered
+    }
+}
 async function loadFromUrl(url, registrar) {
-    // Derive idPrefix and a display prefix from the hostname
     let idPrefix = "io.custom";
     let prefix = "Custom";
     try {
@@ -132,22 +146,61 @@ async function loadFromUrl(url, registrar) {
 /**
  * Creates the connector catalog plugin.
  *
- * Registers one command per built-in catalog entry plus an "Import from
- * OpenAPI URL" command. All commands appear in the command palette (Ctrl+K /
- * ⌘K). Selecting a catalog entry fetches the spec, generates connector
- * templates, and registers them immediately in the config panel connector
- * selector.
+ * Registers a visual catalog panel (two tabs: Built-in Workers + Community
+ * APIs) plus command palette commands for all catalog entries. The panel is
+ * accessible via the "Browse connectors…" palette command.
+ *
+ * Built-in worker templates are registered immediately (static, no proxy).
+ * When `options.proxyUrl` is set, additional templates are fetched from the
+ * local proxy at startup.
  *
  * @param registrar - The config-panel-bpmn plugin (or any object with
  *   `registerTemplate`).
  * @param palette - The command palette plugin.
+ * @param options - Optional configuration.
  */
-export function createConnectorCatalogPlugin(registrar, palette) {
+export function createConnectorCatalogPlugin(registrar, palette, options) {
     let _deregister = null;
-    return {
+    let _panel = null;
+    const plugin = {
         name: "connector-catalog",
         install() {
             injectConnectorCatalogStyles();
+            // Register static built-in worker templates immediately
+            for (const t of BUILTIN_WORKER_TEMPLATES) {
+                registrar.registerTemplate(t);
+            }
+            // Also fetch from proxy if configured (may add more or updated templates)
+            if (options?.proxyUrl) {
+                void loadBuiltinWorkers(options.proxyUrl, registrar);
+            }
+            // Build the visual catalog panel (lazy — created on first open)
+            _panel = new CatalogPanel({
+                builtinTemplates: BUILTIN_WORKER_TEMPLATES,
+                catalogEntries: CATALOG,
+                onUseBuiltin(template) {
+                    // Already registered above — just confirm to the user
+                    const toast = showToast(`"${template.name}" ready — select a service task to apply it`, "success");
+                    setTimeout(() => toast.remove(), 3500);
+                },
+                onLoadCatalogEntry(id) {
+                    void loadCatalogEntry(id, registrar);
+                },
+                onLoadFromUrl(url) {
+                    void loadFromUrl(url, registrar);
+                },
+                onLoadFromFile() {
+                    loadFromFile(registrar);
+                },
+            });
+            const browseCmd = {
+                id: "connector-catalog:browse",
+                title: "Browse connectors\u2026",
+                description: "Open the connector catalog to pick a built-in worker or import an API",
+                action() {
+                    _panel?.open();
+                },
+            };
             const catalogCmds = CATALOG.map((entry) => ({
                 id: `connector-catalog:${entry.id}`,
                 title: `Import API: ${entry.name}`,
@@ -177,12 +230,18 @@ export function createConnectorCatalogPlugin(registrar, palette) {
                     loadFromFile(registrar);
                 },
             };
-            _deregister = palette.addCommands([...catalogCmds, urlCmd, fileCmd]);
+            _deregister = palette.addCommands([browseCmd, ...catalogCmds, urlCmd, fileCmd]);
         },
         uninstall() {
             _deregister?.();
             _deregister = null;
+            _panel?.close();
+            _panel = null;
+        },
+        openCatalog() {
+            _panel?.open();
         },
     };
+    return plugin;
 }
 //# sourceMappingURL=index.js.map

package/dist/connector-catalog/panel.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Connector catalog panel — a visual modal with two tabs:
+ *
+ *   • Built-in Workers  — bpmnkit workers, always available (no proxy needed)
+ *   • Community APIs    — OpenAPI-generated connectors from the catalog
+ *
+ * Usage:
+ *   const panel = new CatalogPanel(registrar, onLoadCatalogEntry, onLoadFromUrl)
+ *   panel.open()
+ */
+import type { CatalogEntry } from "@bpmnkit/connector-gen/browser";
+import type { ElementTemplate } from "../config-panel-bpmn/template-types.js";
+export interface CatalogPanelOptions {
+    builtinTemplates: ElementTemplate[];
+    catalogEntries: CatalogEntry[];
+    onUseBuiltin(template: ElementTemplate): void;
+    onLoadCatalogEntry(id: string): void;
+    onLoadFromUrl(url: string): void;
+    onLoadFromFile(): void;
+}
+export declare class CatalogPanel {
+    private readonly opts;
+    private overlay;
+    private activeTab;
+    private query;
+    constructor(opts: CatalogPanelOptions);
+    open(): void;
+    close(): void;
+    private build;
+    private renderContent;
+    private renderBuiltins;
+    private renderCommunity;
+}
+//# sourceMappingURL=panel.d.ts.map