npm - @campfire-interactive/shell-header - Versions diffs - 0.16.1 → 0.18.0 - Mend

@campfire-interactive/shell-header 0.16.1 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/index.js +298 -180
package/package.json +1 -1

package/dist/index.js CHANGED Viewed

@@ -24,7 +24,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 // src/styles.css
-styleInject(".cfi-sh-header {\n  display: flex;\n  align-items: center;\n  height: var(--cfi-shell-header-height, 48px);\n  padding: 0 var(--cfi-spacing-md, 1rem);\n  background: white;\n  color: var(--cfi-color-gray-900, #111827);\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  position: relative;\n  z-index: 1000;\n}\n.cfi-sh-left {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: var(--cfi-spacing-md, 1rem);\n  overflow: hidden;\n}\n.cfi-sh-app-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  color: white;\n  font-size: 14px;\n  font-weight: 700;\n  font-family: inherit;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-base, 1rem);\n  color: var(--cfi-color-gray-900, #111827);\n  white-space: nowrap;\n}\n.cfi-sh-suite-logo {\n  height: 22px;\n  width: auto;\n  display: block;\n}\n.cfi-sh-right {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  flex-shrink: 0;\n}\n.cfi-sh-icon-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  color: var(--cfi-color-gray-600, #4b5563);\n  cursor: pointer;\n  transition: background 150ms;\n}\n.cfi-sh-icon-btn:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--cfi-color-error, #ef4444);\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  border-radius: 99px;\n}\n.cfi-sh-app-switcher {\n  position: relative;\n}\n.cfi-sh-app-grid {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem);\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  min-width: 280px;\n}\n.cfi-sh-app-grid-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-xs, 0.25rem);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 100ms;\n  font-family: inherit;\n}\n.cfi-sh-app-grid-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-app-grid-item-active {\n  background: var(--cfi-color-primary-50, #fff7ed);\n  color: var(--cfi-color-primary-700, #c2410c);\n}\n.cfi-sh-app-grid-item-active:hover {\n  background: var(--cfi-color-primary-100, #ffedd5);\n}\n.cfi-sh-app-grid-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n.cfi-sh-app-grid-label {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-align: center;\n  line-height: 1.35;\n  max-width: 80px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: normal;\n  overflow: hidden;\n  min-height: 2.7em;\n}\n.cfi-sh-user-menu {\n  position: relative;\n}\n.cfi-sh-avatar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: opacity 150ms;\n}\n.cfi-sh-avatar-btn:hover {\n  opacity: 0.85;\n}\n.cfi-sh-avatar-img {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n.cfi-sh-avatar-initials {\n  color: white;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n}\n.cfi-sh-user-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n}\n.cfi-sh-user-header {\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n}\n.cfi-sh-user-name {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-user-email {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n}\n.cfi-sh-divider {\n  height: 1px;\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-family: inherit;\n  text-align: left;\n  text-decoration: none;\n  box-sizing: border-box;\n  transition: background 100ms;\n}\n.cfi-sh-menu-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-menu-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.cfi-sh-locale-switcher {\n  position: relative;\n}\n.cfi-sh-locale-btn {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  height: 32px;\n  padding: 0 var(--cfi-spacing-sm, 0.5rem);\n  background: transparent;\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-locale-btn:hover:not(:disabled) {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-locale-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.cfi-sh-locale-label {\n  letter-spacing: 0.02em;\n}\n.cfi-sh-locale-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 180px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  padding: var(--cfi-spacing-xs, 0.25rem) 0;\n}\n.cfi-sh-locale-dropdown .cfi-sh-menu-item {\n  justify-content: space-between;\n}\n.cfi-sh-locale-item-active {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-locale-item-label {\n  flex: 1;\n  text-align: left;\n}\n.cfi-sh-locale-item-code {\n  color: var(--cfi-color-gray-400, #9ca3af);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  letter-spacing: 0.02em;\n}\n.cfi-sh-locale-row {\n  justify-content: flex-start;\n}\n.cfi-sh-locale-row-label {\n  flex: 1;\n  text-align: left;\n}\n.cfi-sh-locale-row-current {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  margin-right: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-locale-chevron {\n  transition: transform 150ms ease;\n  flex-shrink: 0;\n}\n.cfi-sh-locale-chevron-open {\n  transform: rotate(180deg);\n}\n.cfi-sh-locale-sublist {\n  border-top: 1px solid var(--cfi-color-gray-100, #f3f4f6);\n  background: var(--cfi-color-gray-50, #f9fafb);\n}\n.cfi-sh-locale-sub-item {\n  padding-left: calc(var(--cfi-spacing-md, 1rem) + var(--cfi-spacing-md, 1rem));\n  justify-content: space-between;\n}\n.cfi-sh-tenant-static {\n  cursor: default;\n  pointer-events: none;\n}\n.cfi-sh-tenant-check {\n  color: var(--cfi-color-violet-600, #7c3aed);\n}\n.cfi-sh-notif {\n  position: relative;\n}\n.cfi-sh-notif-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  width: 360px;\n  max-height: 480px;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  overflow: hidden;\n}\n.cfi-sh-notif-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  flex-shrink: 0;\n}\n.cfi-sh-notif-title {\n  font-weight: 600;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-notif-mark-all {\n  background: none;\n  border: none;\n  color: var(--cfi-color-primary-600, #ea580c);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-family: inherit;\n  padding: 0;\n}\n.cfi-sh-notif-mark-all:hover {\n  text-decoration: underline;\n}\n.cfi-sh-notif-list {\n  overflow-y: auto;\n  flex: 1;\n}\n.cfi-sh-notif-empty {\n  padding: var(--cfi-spacing-lg, 1.5rem) var(--cfi-spacing-md, 1rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n  text-align: center;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-notif-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  border-bottom: 1px solid var(--cfi-color-gray-100, #f3f4f6);\n  text-align: left;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-notif-item:hover {\n  background: var(--cfi-color-gray-50, #f9fafb);\n}\n.cfi-sh-notif-item:last-child {\n  border-bottom: none;\n}\n.cfi-sh-notif-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  margin-top: 6px;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border-radius: 50%;\n}\n.cfi-sh-notif-dot-placeholder {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  margin-top: 6px;\n}\n.cfi-sh-notif-content {\n  flex: 1;\n  min-width: 0;\n}\n.cfi-sh-notif-item-title {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  margin-bottom: 2px;\n}\n.cfi-sh-notif-item-unread .cfi-sh-notif-item-title {\n  font-weight: 600;\n}\n.cfi-sh-notif-item-body {\n  color: var(--cfi-color-gray-600, #4b5563);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.cfi-sh-notif-item-time {\n  color: var(--cfi-color-gray-400, #9ca3af);\n  font-size: 11px;\n  margin-top: 4px;\n}\n.cfi-sh-about-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n}\n.cfi-sh-about-card {\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n  min-width: 360px;\n  max-width: 500px;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-about-header {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-md, 1rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-about-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-lg, 1.125rem);\n  flex: 1;\n}\n.cfi-sh-about-env {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  color: var(--cfi-color-gray-700, #374151);\n  padding: 2px 8px;\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  font-weight: 600;\n}\n.cfi-sh-about-close {\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: var(--cfi-color-gray-500, #6b7280);\n  padding: 0 4px;\n  font-family: inherit;\n}\n.cfi-sh-about-close:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-about-body {\n  padding: var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n  gap: var(--cfi-spacing-md, 1rem);\n}\n.cfi-sh-about-section-title {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-weight: 600;\n  color: var(--cfi-color-gray-500, #6b7280);\n  margin-bottom: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-about-list {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-md, 1rem);\n  margin: 0;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-about-list dt {\n  color: var(--cfi-color-gray-600, #4b5563);\n  font-weight: 500;\n}\n.cfi-sh-about-list dd {\n  margin: 0;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-about-list code {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Consolas,\n    monospace;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  padding: 1px 6px;\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n}\n.cfi-sh-about-date {\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-about-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: var(--cfi-spacing-md, 1rem);\n  border-top: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-about-copy {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  color: var(--cfi-color-gray-900, #111827);\n  padding: 6px 12px;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 150ms;\n}\n.cfi-sh-about-copy:hover {\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-bug-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n}\n.cfi-sh-bug-card {\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  color: var(--cfi-color-gray-900, #111827);\n  display: flex;\n  flex-direction: column;\n}\n.cfi-sh-bug-card-wide {\n  width: min(1100px, calc(100vw - 64px));\n}\n.cfi-sh-bug-header {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-md, 1rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-bug-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-lg, 1.125rem);\n  flex: 1;\n}\n.cfi-sh-bug-env {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  color: var(--cfi-color-gray-700, #374151);\n  padding: 2px 8px;\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  font-weight: 600;\n}\n.cfi-sh-bug-close {\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: var(--cfi-color-gray-500, #6b7280);\n  padding: 0 4px;\n  font-family: inherit;\n}\n.cfi-sh-bug-close:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-body {\n  padding: var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n}\n.cfi-sh-bug-label {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-weight: 600;\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-input,\n.cfi-sh-bug-textarea {\n  font-family: inherit;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  color: var(--cfi-color-gray-900, #111827);\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  padding: 8px 10px;\n  outline: none;\n}\n.cfi-sh-bug-input:focus,\n.cfi-sh-bug-textarea:focus {\n  border-color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-textarea {\n  resize: vertical;\n  min-height: 72px;\n}\n.cfi-sh-bug-shot {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-wrap: wrap;\n  padding-top: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-thumb {\n  max-width: 200px;\n  max-height: 120px;\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  display: block;\n}\n.cfi-sh-bug-shot-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-files {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding-top: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-file-row {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  max-width: 100%;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  color: var(--cfi-color-gray-700, #374151);\n}\n.cfi-sh-bug-file-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cfi-sh-bug-file-size {\n  flex-shrink: 0;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-file-remove {\n  flex-shrink: 0;\n  border: none;\n  background: none;\n  padding: 0 0.25rem;\n  cursor: pointer;\n  font-size: var(--cfi-font-size-md, 1rem);\n  line-height: 1;\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-file-remove:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-meta {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n}\n.cfi-sh-bug-modes {\n  display: flex;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-hint {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-canvas-wrap {\n  overflow: auto;\n  max-height: 65vh;\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.cfi-sh-bug-canvas {\n  max-width: 100%;\n  max-height: 65vh;\n  cursor: crosshair;\n  touch-action: none;\n  display: block;\n}\n.cfi-sh-bug-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-md, 1rem);\n  border-top: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-bug-btn {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  color: var(--cfi-color-gray-900, #111827);\n  padding: 6px 12px;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 150ms;\n}\n.cfi-sh-bug-btn:hover {\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-bug-btn:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.cfi-sh-bug-btn-primary {\n  background: var(--cfi-color-gray-900, #111827);\n  border-color: var(--cfi-color-gray-900, #111827);\n  color: white;\n}\n.cfi-sh-bug-btn-primary:hover:not(:disabled) {\n  background: var(--cfi-color-gray-700, #374151);\n}\n.cfi-sh-bug-btn-active {\n  background: var(--cfi-color-gray-900, #111827);\n  border-color: var(--cfi-color-gray-900, #111827);\n  color: white;\n}\n.cfi-sh-bug-error {\n  color: var(--cfi-color-red-600, #dc2626);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  margin-right: auto;\n}\n.cfi-sh-bug-success {\n  color: var(--cfi-color-green-600, #16a34a);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-weight: 500;\n}\n.cfi-sh-bug-done {\n  gap: var(--cfi-spacing-md, 1rem);\n}\n.cfi-sh-bug-done-msg {\n  margin: 0;\n  font-size: var(--cfi-font-size-base, 1rem);\n  font-weight: 600;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-done-link {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-wrap: wrap;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  color: var(--cfi-color-gray-600, #4b5563);\n}\n.cfi-sh-bug-done-url {\n  color: var(--cfi-color-primary-600, #2563eb);\n  text-decoration: underline;\n  overflow-wrap: anywhere;\n}\n.cfi-sh-bug-copy-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  background: white;\n  color: var(--cfi-color-gray-600, #4b5563);\n  cursor: pointer;\n  line-height: 0;\n}\n.cfi-sh-bug-copy-btn:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-issues-link {\n  color: var(--cfi-color-gray-600, #4b5563);\n  text-decoration: underline;\n}\n.cfi-sh-bug-issues-link:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n");
+styleInject(".cfi-sh-header {\n  display: flex;\n  align-items: center;\n  height: var(--cfi-shell-header-height, 48px);\n  padding: 0 var(--cfi-spacing-md, 1rem);\n  background: white;\n  color: var(--cfi-color-gray-900, #111827);\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  position: relative;\n  z-index: 1000;\n}\n.cfi-sh-left {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: var(--cfi-spacing-md, 1rem);\n  overflow: hidden;\n}\n.cfi-sh-app-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  color: white;\n  font-size: 14px;\n  font-weight: 700;\n  font-family: inherit;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-base, 1rem);\n  color: var(--cfi-color-gray-900, #111827);\n  white-space: nowrap;\n}\n.cfi-sh-suite-logo {\n  height: 22px;\n  width: auto;\n  display: block;\n}\n.cfi-sh-right {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  flex-shrink: 0;\n}\n.cfi-sh-icon-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  color: var(--cfi-color-gray-600, #4b5563);\n  cursor: pointer;\n  transition: background 150ms;\n}\n.cfi-sh-icon-btn:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--cfi-color-error, #ef4444);\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  border-radius: 99px;\n}\n.cfi-sh-app-switcher {\n  position: relative;\n}\n.cfi-sh-app-grid {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem);\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  min-width: 280px;\n}\n.cfi-sh-app-grid-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-xs, 0.25rem);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 100ms;\n  font-family: inherit;\n}\n.cfi-sh-app-grid-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-app-grid-item-active {\n  background: var(--cfi-color-primary-50, #fff7ed);\n  color: var(--cfi-color-primary-700, #c2410c);\n}\n.cfi-sh-app-grid-item-active:hover {\n  background: var(--cfi-color-primary-100, #ffedd5);\n}\n.cfi-sh-app-grid-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n.cfi-sh-app-grid-label {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-align: center;\n  line-height: 1.35;\n  max-width: 80px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  white-space: normal;\n  overflow: hidden;\n  min-height: 2.7em;\n}\n.cfi-sh-user-menu {\n  position: relative;\n}\n.cfi-sh-avatar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: opacity 150ms;\n}\n.cfi-sh-avatar-btn:hover {\n  opacity: 0.85;\n}\n.cfi-sh-avatar-img {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n.cfi-sh-avatar-initials {\n  color: white;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n}\n.cfi-sh-user-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n}\n.cfi-sh-user-header {\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n}\n.cfi-sh-user-name {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-user-email {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n}\n.cfi-sh-divider {\n  height: 1px;\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-family: inherit;\n  text-align: left;\n  text-decoration: none;\n  box-sizing: border-box;\n  transition: background 100ms;\n}\n.cfi-sh-menu-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-menu-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.cfi-sh-locale-switcher {\n  position: relative;\n}\n.cfi-sh-locale-btn {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  height: 32px;\n  padding: 0 var(--cfi-spacing-sm, 0.5rem);\n  background: transparent;\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-locale-btn:hover:not(:disabled) {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-locale-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.cfi-sh-locale-label {\n  letter-spacing: 0.02em;\n}\n.cfi-sh-locale-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 180px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  padding: var(--cfi-spacing-xs, 0.25rem) 0;\n}\n.cfi-sh-locale-dropdown .cfi-sh-menu-item {\n  justify-content: space-between;\n}\n.cfi-sh-locale-item-active {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-locale-item-label {\n  flex: 1;\n  text-align: left;\n}\n.cfi-sh-locale-item-code {\n  color: var(--cfi-color-gray-400, #9ca3af);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  letter-spacing: 0.02em;\n}\n.cfi-sh-locale-row {\n  justify-content: flex-start;\n}\n.cfi-sh-locale-row-label {\n  flex: 1;\n  text-align: left;\n}\n.cfi-sh-locale-row-current {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  margin-right: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-locale-chevron {\n  transition: transform 150ms ease;\n  flex-shrink: 0;\n}\n.cfi-sh-locale-chevron-open {\n  transform: rotate(180deg);\n}\n.cfi-sh-locale-sublist {\n  border-top: 1px solid var(--cfi-color-gray-100, #f3f4f6);\n  background: var(--cfi-color-gray-50, #f9fafb);\n}\n.cfi-sh-locale-sub-item {\n  padding-left: calc(var(--cfi-spacing-md, 1rem) + var(--cfi-spacing-md, 1rem));\n  justify-content: space-between;\n}\n.cfi-sh-tenant-static {\n  cursor: default;\n  pointer-events: none;\n}\n.cfi-sh-tenant-check {\n  color: var(--cfi-color-violet-600, #7c3aed);\n}\n.cfi-sh-notif {\n  position: relative;\n}\n.cfi-sh-notif-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  width: 360px;\n  max-height: 480px;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  overflow: hidden;\n}\n.cfi-sh-notif-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  flex-shrink: 0;\n}\n.cfi-sh-notif-title {\n  font-weight: 600;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-notif-mark-all {\n  background: none;\n  border: none;\n  color: var(--cfi-color-primary-600, #ea580c);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-family: inherit;\n  padding: 0;\n}\n.cfi-sh-notif-mark-all:hover {\n  text-decoration: underline;\n}\n.cfi-sh-notif-list {\n  overflow-y: auto;\n  flex: 1;\n}\n.cfi-sh-notif-empty {\n  padding: var(--cfi-spacing-lg, 1.5rem) var(--cfi-spacing-md, 1rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n  text-align: center;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-notif-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  border-bottom: 1px solid var(--cfi-color-gray-100, #f3f4f6);\n  text-align: left;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-notif-item:hover {\n  background: var(--cfi-color-gray-50, #f9fafb);\n}\n.cfi-sh-notif-item:last-child {\n  border-bottom: none;\n}\n.cfi-sh-notif-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  margin-top: 6px;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border-radius: 50%;\n}\n.cfi-sh-notif-dot-placeholder {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  margin-top: 6px;\n}\n.cfi-sh-notif-content {\n  flex: 1;\n  min-width: 0;\n}\n.cfi-sh-notif-item-title {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  margin-bottom: 2px;\n}\n.cfi-sh-notif-item-unread .cfi-sh-notif-item-title {\n  font-weight: 600;\n}\n.cfi-sh-notif-item-body {\n  color: var(--cfi-color-gray-600, #4b5563);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.cfi-sh-notif-item-time {\n  color: var(--cfi-color-gray-400, #9ca3af);\n  font-size: 11px;\n  margin-top: 4px;\n}\n.cfi-sh-about-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n}\n.cfi-sh-about-card {\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n  min-width: 360px;\n  max-width: 500px;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-about-header {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-md, 1rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-about-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-lg, 1.125rem);\n  flex: 1;\n}\n.cfi-sh-about-env {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  color: var(--cfi-color-gray-700, #374151);\n  padding: 2px 8px;\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  font-weight: 600;\n}\n.cfi-sh-about-close {\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: var(--cfi-color-gray-500, #6b7280);\n  padding: 0 4px;\n  font-family: inherit;\n}\n.cfi-sh-about-close:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-about-body {\n  padding: var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n  gap: var(--cfi-spacing-md, 1rem);\n}\n.cfi-sh-about-section-title {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-weight: 600;\n  color: var(--cfi-color-gray-500, #6b7280);\n  margin-bottom: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-about-list {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-md, 1rem);\n  margin: 0;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-about-list dt {\n  color: var(--cfi-color-gray-600, #4b5563);\n  font-weight: 500;\n}\n.cfi-sh-about-list dd {\n  margin: 0;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-about-list code {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Consolas,\n    monospace;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  padding: 1px 6px;\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n}\n.cfi-sh-about-date {\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-about-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: var(--cfi-spacing-md, 1rem);\n  border-top: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-about-copy {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  color: var(--cfi-color-gray-900, #111827);\n  padding: 6px 12px;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 150ms;\n}\n.cfi-sh-about-copy:hover {\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-bug-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1100;\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n}\n.cfi-sh-bug-card {\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n  width: 480px;\n  max-width: calc(100vw - 32px);\n  color: var(--cfi-color-gray-900, #111827);\n  display: flex;\n  flex-direction: column;\n}\n.cfi-sh-bug-card-wide {\n  width: min(1100px, calc(100vw - 64px));\n}\n.cfi-sh-bug-header {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-md, 1rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.cfi-sh-bug-header:active {\n  cursor: grabbing;\n}\n.cfi-sh-bug-header .cfi-sh-bug-close {\n  cursor: pointer;\n}\n.cfi-sh-bug-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-lg, 1.125rem);\n  flex: 1;\n}\n.cfi-sh-bug-env {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  color: var(--cfi-color-gray-700, #374151);\n  padding: 2px 8px;\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  font-weight: 600;\n}\n.cfi-sh-bug-close {\n  background: none;\n  border: none;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  color: var(--cfi-color-gray-500, #6b7280);\n  padding: 0 4px;\n  font-family: inherit;\n}\n.cfi-sh-bug-close:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-body {\n  padding: var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n}\n.cfi-sh-bug-label {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  font-weight: 600;\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-input,\n.cfi-sh-bug-textarea {\n  font-family: inherit;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  color: var(--cfi-color-gray-900, #111827);\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  padding: 8px 10px;\n  outline: none;\n}\n.cfi-sh-bug-input:focus,\n.cfi-sh-bug-textarea:focus {\n  border-color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-textarea {\n  resize: vertical;\n  min-height: 72px;\n}\n.cfi-sh-bug-shot {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-wrap: wrap;\n  padding-top: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-thumb {\n  max-width: 200px;\n  max-height: 120px;\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  display: block;\n}\n.cfi-sh-bug-shot-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-files {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding-top: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-file-row {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  max-width: 100%;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  color: var(--cfi-color-gray-700, #374151);\n}\n.cfi-sh-bug-file-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cfi-sh-bug-file-size {\n  flex-shrink: 0;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-file-remove {\n  flex-shrink: 0;\n  border: none;\n  background: none;\n  padding: 0 0.25rem;\n  cursor: pointer;\n  font-size: var(--cfi-font-size-md, 1rem);\n  line-height: 1;\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-file-remove:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-meta {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n}\n.cfi-sh-bug-modes {\n  display: flex;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-bug-hint {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n}\n.cfi-sh-bug-canvas-wrap {\n  overflow: auto;\n  max-height: 65vh;\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  border-radius: var(--cfi-radius-sm, 0.25rem);\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.cfi-sh-bug-canvas {\n  max-width: 100%;\n  max-height: 65vh;\n  cursor: crosshair;\n  touch-action: none;\n  display: block;\n}\n.cfi-sh-bug-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  padding: var(--cfi-spacing-md, 1rem);\n  border-top: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-bug-btn {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  color: var(--cfi-color-gray-900, #111827);\n  padding: 6px 12px;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 150ms;\n}\n.cfi-sh-bug-btn:hover {\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-bug-btn:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.cfi-sh-bug-btn-primary {\n  background: var(--cfi-color-gray-900, #111827);\n  border-color: var(--cfi-color-gray-900, #111827);\n  color: white;\n}\n.cfi-sh-bug-btn-primary:hover:not(:disabled) {\n  background: var(--cfi-color-gray-700, #374151);\n}\n.cfi-sh-bug-btn-active {\n  background: var(--cfi-color-gray-900, #111827);\n  border-color: var(--cfi-color-gray-900, #111827);\n  color: white;\n}\n.cfi-sh-bug-error {\n  color: var(--cfi-color-red-600, #dc2626);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  margin-right: auto;\n}\n.cfi-sh-bug-success {\n  color: var(--cfi-color-green-600, #16a34a);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-weight: 500;\n}\n.cfi-sh-bug-done {\n  gap: var(--cfi-spacing-md, 1rem);\n}\n.cfi-sh-bug-done-msg {\n  margin: 0;\n  font-size: var(--cfi-font-size-base, 1rem);\n  font-weight: 600;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-done-link {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-wrap: wrap;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  color: var(--cfi-color-gray-600, #4b5563);\n}\n.cfi-sh-bug-done-url {\n  color: var(--cfi-color-primary-600, #2563eb);\n  text-decoration: underline;\n  overflow-wrap: anywhere;\n}\n.cfi-sh-bug-copy-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border: 1px solid var(--cfi-color-gray-300, #d1d5db);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  background: white;\n  color: var(--cfi-color-gray-600, #4b5563);\n  cursor: pointer;\n  line-height: 0;\n}\n.cfi-sh-bug-copy-btn:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-bug-issues-link {\n  color: var(--cfi-color-gray-600, #4b5563);\n  text-decoration: underline;\n}\n.cfi-sh-bug-issues-link:hover {\n  color: var(--cfi-color-gray-900, #111827);\n}\n");
 // src/appCatalog.ts
 var appCatalog = [
@@ -83,6 +83,16 @@ var appCatalog = [
     group: "planning",
     localPort: 3200
   },
+  {
+    id: "pm",
+    name: "Program Management",
+    icon: "GanttChart",
+    letter: "P",
+    color: "#e11d48",
+    byline: "Run won business from award to launch \u2014 milestones, changes, and financial performance against the quote.",
+    group: "planning",
+    localPort: 3130
+  },
   // ── Engineering ─────────────────────────────────────────────────────────
   {
     id: "bom",
@@ -95,6 +105,16 @@ var appCatalog = [
     group: "engineering",
     localPort: 3700
   },
+  {
+    id: "plant",
+    name: "Plant Management",
+    icon: "Factory",
+    letter: "P",
+    color: "#65a30d",
+    byline: "The operational home for your plants \u2014 footprint, capacity, and the plant records every app reads.",
+    group: "engineering",
+    localPort: 3140
+  },
   // ── Platform services (available to everyone; no role gate) ─────────────
   {
     // Header title uses `name`; DMS wants its full name there, and it's hidden
@@ -133,6 +153,22 @@ var appCatalog = [
     requiresRole: ["admin", "owner"],
     localPort: 3600,
     path: "/admin/users"
+  },
+  {
+    // Cool charcoal (slate-700). Every other tile here is a saturated hue
+    // standing for a persona's product; integrations is plumbing that carries
+    // other apps' data, and a neutral says that better than a colour competing
+    // with them. Cool rather than warm so it sits with the blues above instead
+    // of reading as a dimmed orange.
+    id: "integrations",
+    name: "Integrations",
+    icon: "Cable",
+    letter: "I",
+    color: "#334155",
+    byline: "Connect Campfire to your ERP, PLM, and data-lake systems \u2014 inbound feeds and outbound extracts.",
+    group: "admin",
+    requiresRole: ["admin", "owner"],
+    localPort: 3110
   }
 ];
 var BASE_DOMAIN = "campfiresuite.com";
@@ -164,8 +200,11 @@ import {
   TrendingUp,
   BarChart3,
   Calculator,
+  Cable,
+  Factory,
   FileText,
   Files,
+  GanttChart,
   Shield,
   GripHorizontal,
   Bell,
@@ -183,8 +222,11 @@ var iconMap = {
   TrendingUp,
   BarChart3,
   Calculator,
+  Cable,
+  Factory,
   FileText,
   Files,
+  GanttChart,
   Shield
 };
 function getIcon(name) {
@@ -843,8 +885,13 @@ async function captureTabScreenshot() {
 var MAX_ENTRIES = 50;
 var MAX_MESSAGE_CHARS = 500;
 var consoleBuffer = [];
-var networkBuffer = [];
+var networkFailureBuffer = [];
+var networkSuccessBuffer = [];
 var installed = false;
+function stripQuery(url) {
+  const i = url.indexOf("?");
+  return i === -1 ? url : url.slice(0, i);
+}
 function push(buffer, entry) {
   buffer.push(entry);
   if (buffer.length > MAX_ENTRIES) buffer.shift();
@@ -893,7 +940,7 @@ function installBugReportCapture() {
     try {
       const res = await originalFetch(input, init);
       if (!res.ok) {
-        push(networkBuffer, {
+        push(networkFailureBuffer, {
           at: (/* @__PURE__ */ new Date()).toISOString(),
           method: method.toUpperCase(),
           url,
@@ -901,10 +948,19 @@ function installBugReportCapture() {
           durationMs: Math.round(performance.now() - started),
           requestId: res.headers.get("x-request-id") ?? void 0
         });
+      } else {
+        push(networkSuccessBuffer, {
+          at: (/* @__PURE__ */ new Date()).toISOString(),
+          method: method.toUpperCase(),
+          url: stripQuery(url),
+          status: res.status,
+          durationMs: Math.round(performance.now() - started),
+          requestId: res.headers.get("x-request-id") ?? void 0
+        });
       }
       return res;
     } catch (err) {
-      push(networkBuffer, {
+      push(networkFailureBuffer, {
         at: (/* @__PURE__ */ new Date()).toISOString(),
         method: method.toUpperCase(),
         url,
@@ -916,7 +972,10 @@ function installBugReportCapture() {
   };
 }
 function snapshotBugReportCapture() {
-  return { console: [...consoleBuffer], network: [...networkBuffer] };
+  const network = [...networkFailureBuffer, ...networkSuccessBuffer].sort(
+    (a, b) => a.at.localeCompare(b.at)
+  );
+  return { console: [...consoleBuffer], network };
 }
 // src/BugReportModal.tsx
@@ -942,6 +1001,40 @@ function BugReportModal({ config, initialScreenshot, onClose }) {
   const [submitError, setSubmitError] = useState6(null);
   const [issueUrl, setIssueUrl] = useState6(null);
   const [linkCopied, setLinkCopied] = useState6(false);
+  const cardRef = useRef4(null);
+  const [cardOffset, setCardOffset] = useState6({ x: 0, y: 0 });
+  const headerDragRef = useRef4(null);
+  function onHeaderPointerDown(e) {
+    if (e.target.closest("button")) return;
+    const card = cardRef.current;
+    if (!card) return;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    headerDragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startY: e.clientY,
+      baseX: cardOffset.x,
+      baseY: cardOffset.y,
+      rect: card.getBoundingClientRect()
+    };
+  }
+  function onHeaderPointerMove(e) {
+    const d = headerDragRef.current;
+    if (!d || d.pointerId !== e.pointerId) return;
+    let dx = e.clientX - d.startX;
+    let dy = e.clientY - d.startY;
+    const minX = 80 - d.rect.right;
+    const maxX = window.innerWidth - 80 - d.rect.left;
+    const minY = -d.rect.top;
+    const maxY = window.innerHeight - 48 - d.rect.top;
+    dx = Math.min(Math.max(dx, minX), maxX);
+    dy = Math.min(Math.max(dy, minY), maxY);
+    setCardOffset({ x: d.baseX + dx, y: d.baseY + dy });
+  }
+  function onHeaderPointerEnd(e) {
+    if (headerDragRef.current?.pointerId !== e.pointerId) return;
+    headerDragRef.current = null;
+  }
   const workCanvasRef = useRef4(null);
   const originalRef = useRef4(null);
   const displayCanvasRef = useRef4(null);
@@ -1165,197 +1258,215 @@ function BugReportModal({ config, initialScreenshot, onClose }) {
       "aria-label": "Report an issue",
       onPointerDown: (e) => e.stopPropagation(),
       onFocus: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsxs6("div", { className: `cfi-sh-bug-card${view === "editor" ? " cfi-sh-bug-card-wide" : ""}`, children: [
-        /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-header", children: [
-          /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-title", children: submitState === "success" ? "Issue submitted" : view === "editor" ? "New Issue - Attach Screenshot (Optional)" : "Report an issue" }),
-          /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-env", children: config.context.environment }),
-          /* @__PURE__ */ jsx6("button", { className: "cfi-sh-bug-close", type: "button", onClick: closeUnlessBusy, "aria-label": "Close", children: "\xD7" })
-        ] }),
-        submitState === "success" ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-          /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-body cfi-sh-bug-done", children: [
-            /* @__PURE__ */ jsx6("p", { className: "cfi-sh-bug-done-msg", children: "Thanks for submitting this issue." }),
-            issueUrl ? /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-done-link", children: [
-              /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-done-label", children: "You can view it here:" }),
-              /* @__PURE__ */ jsx6(
-                "a",
-                {
-                  href: issueUrl,
-                  target: "_blank",
-                  rel: "noreferrer",
-                  className: "cfi-sh-bug-done-url",
-                  children: issueUrl
-                }
-              ),
-              /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          ref: cardRef,
+          className: `cfi-sh-bug-card${view === "editor" ? " cfi-sh-bug-card-wide" : ""}`,
+          style: cardOffset.x !== 0 || cardOffset.y !== 0 ? { transform: `translate(${cardOffset.x}px, ${cardOffset.y}px)` } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: "cfi-sh-bug-header",
+                onPointerDown: onHeaderPointerDown,
+                onPointerMove: onHeaderPointerMove,
+                onPointerUp: onHeaderPointerEnd,
+                onPointerCancel: onHeaderPointerEnd,
+                children: [
+                  /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-title", children: submitState === "success" ? "Issue submitted" : view === "editor" ? "New Issue - Attach Screenshot (Optional)" : "Report an issue" }),
+                  /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-env", children: config.context.environment }),
+                  /* @__PURE__ */ jsx6("button", { className: "cfi-sh-bug-close", type: "button", onClick: closeUnlessBusy, "aria-label": "Close", children: "\xD7" })
+                ]
+              }
+            ),
+            submitState === "success" ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+              /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-body cfi-sh-bug-done", children: [
+                /* @__PURE__ */ jsx6("p", { className: "cfi-sh-bug-done-msg", children: "Thanks for submitting this issue." }),
+                issueUrl ? /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-done-link", children: [
+                  /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-done-label", children: "You can view it here:" }),
+                  /* @__PURE__ */ jsx6(
+                    "a",
+                    {
+                      href: issueUrl,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "cfi-sh-bug-done-url",
+                      children: issueUrl
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      className: "cfi-sh-bug-copy-btn",
+                      title: "Copy link",
+                      "aria-label": "Copy link",
+                      onClick: () => {
+                        void navigator.clipboard.writeText(issueUrl).then(() => {
+                          setLinkCopied(true);
+                          window.setTimeout(() => setLinkCopied(false), 1500);
+                        });
+                      },
+                      children: linkCopied ? /* @__PURE__ */ jsx6(Check2, { size: 16 }) : /* @__PURE__ */ jsx6(Copy, { size: 16 })
+                    }
+                  )
+                ] }) : null
+              ] }),
+              /* @__PURE__ */ jsx6("div", { className: "cfi-sh-bug-footer", children: /* @__PURE__ */ jsx6(
                 "button",
                 {
                   type: "button",
-                  className: "cfi-sh-bug-copy-btn",
-                  title: "Copy link",
-                  "aria-label": "Copy link",
-                  onClick: () => {
-                    void navigator.clipboard.writeText(issueUrl).then(() => {
-                      setLinkCopied(true);
-                      window.setTimeout(() => setLinkCopied(false), 1500);
-                    });
-                  },
-                  children: linkCopied ? /* @__PURE__ */ jsx6(Check2, { size: 16 }) : /* @__PURE__ */ jsx6(Copy, { size: 16 })
+                  className: "cfi-sh-bug-btn cfi-sh-bug-btn-primary",
+                  onClick: closeUnlessBusy,
+                  children: "OK"
                 }
-              )
-            ] }) : null
-          ] }),
-          /* @__PURE__ */ jsx6("div", { className: "cfi-sh-bug-footer", children: /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              className: "cfi-sh-bug-btn cfi-sh-bug-btn-primary",
-              onClick: closeUnlessBusy,
-              children: "OK"
-            }
-          ) })
-        ] }) : view === "editor" ? /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-body", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-toolbar", children: [
-            /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-modes", children: [
+              ) })
+            ] }) : view === "editor" ? /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-body", children: [
+              /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-toolbar", children: [
+                /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-modes", children: [
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      className: `cfi-sh-bug-btn${mode === "crop" ? " cfi-sh-bug-btn-active" : ""}`,
+                      onClick: () => setMode("crop"),
+                      children: "Crop"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      className: `cfi-sh-bug-btn${mode === "redact" ? " cfi-sh-bug-btn-active" : ""}`,
+                      onClick: () => setMode("redact"),
+                      children: "Redact"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-hint", children: mode === "crop" ? "Drag to crop to a region" : "Drag to black out sensitive data" }),
+                /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-modes", children: [
+                  /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: () => setView("form"), children: "Skip" }),
+                  /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleEditorReset, children: "Reset" }),
+                  /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn cfi-sh-bug-btn-primary", onClick: handleEditorDone, children: "Done" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx6("div", { className: "cfi-sh-bug-canvas-wrap", children: /* @__PURE__ */ jsx6(
+                "canvas",
+                {
+                  ref: displayCanvasRef,
+                  className: "cfi-sh-bug-canvas",
+                  onPointerDown: handlePointerDown,
+                  onPointerMove: handlePointerMove,
+                  onPointerUp: handlePointerUp
+                }
+              ) })
+            ] }) : /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-body", children: [
+              /* @__PURE__ */ jsx6("label", { className: "cfi-sh-bug-label", htmlFor: "cfi-sh-bug-title-input", children: "Title" }),
               /* @__PURE__ */ jsx6(
-                "button",
+                "input",
                 {
-                  type: "button",
-                  className: `cfi-sh-bug-btn${mode === "crop" ? " cfi-sh-bug-btn-active" : ""}`,
-                  onClick: () => setMode("crop"),
-                  children: "Crop"
+                  id: "cfi-sh-bug-title-input",
+                  className: "cfi-sh-bug-input",
+                  value: title,
+                  onChange: (e) => setTitle(e.target.value),
+                  placeholder: "What went wrong?",
+                  maxLength: 200,
+                  autoFocus: true
                 }
               ),
+              /* @__PURE__ */ jsx6("label", { className: "cfi-sh-bug-label", htmlFor: "cfi-sh-bug-desc-input", children: "Details" }),
               /* @__PURE__ */ jsx6(
-                "button",
+                "textarea",
                 {
-                  type: "button",
-                  className: `cfi-sh-bug-btn${mode === "redact" ? " cfi-sh-bug-btn-active" : ""}`,
-                  onClick: () => setMode("redact"),
-                  children: "Redact"
+                  id: "cfi-sh-bug-desc-input",
+                  className: "cfi-sh-bug-textarea",
+                  value: description,
+                  onChange: (e) => setDescription(e.target.value),
+                  placeholder: "What did you expect? What happened instead? Steps to reproduce\u2026",
+                  rows: 4,
+                  maxLength: 1e4
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-hint", children: mode === "crop" ? "Drag to crop to a region" : "Drag to black out sensitive data" }),
-            /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-modes", children: [
-              /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: () => setView("form"), children: "Skip" }),
-              /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleEditorReset, children: "Reset" }),
-              /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn cfi-sh-bug-btn-primary", onClick: handleEditorDone, children: "Done" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx6("div", { className: "cfi-sh-bug-canvas-wrap", children: /* @__PURE__ */ jsx6(
-            "canvas",
-            {
-              ref: displayCanvasRef,
-              className: "cfi-sh-bug-canvas",
-              onPointerDown: handlePointerDown,
-              onPointerMove: handlePointerMove,
-              onPointerUp: handlePointerUp
-            }
-          ) })
-        ] }) : /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-body", children: [
-          /* @__PURE__ */ jsx6("label", { className: "cfi-sh-bug-label", htmlFor: "cfi-sh-bug-title-input", children: "Title" }),
-          /* @__PURE__ */ jsx6(
-            "input",
-            {
-              id: "cfi-sh-bug-title-input",
-              className: "cfi-sh-bug-input",
-              value: title,
-              onChange: (e) => setTitle(e.target.value),
-              placeholder: "What went wrong?",
-              maxLength: 200,
-              autoFocus: true
-            }
-          ),
-          /* @__PURE__ */ jsx6("label", { className: "cfi-sh-bug-label", htmlFor: "cfi-sh-bug-desc-input", children: "Details" }),
-          /* @__PURE__ */ jsx6(
-            "textarea",
-            {
-              id: "cfi-sh-bug-desc-input",
-              className: "cfi-sh-bug-textarea",
-              value: description,
-              onChange: (e) => setDescription(e.target.value),
-              placeholder: "What did you expect? What happened instead? Steps to reproduce\u2026",
-              rows: 4,
-              maxLength: 1e4
-            }
-          ),
-          /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-shot", children: [
-            screenshot ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-              /* @__PURE__ */ jsx6("img", { className: "cfi-sh-bug-thumb", src: screenshot.previewUrl, alt: "Screenshot preview" }),
-              /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-shot-actions", children: [
-                /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleCapture, children: "Retake" }),
-                /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleRemoveScreenshot, children: "Remove" })
+              ),
+              /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-shot", children: [
+                screenshot ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+                  /* @__PURE__ */ jsx6("img", { className: "cfi-sh-bug-thumb", src: screenshot.previewUrl, alt: "Screenshot preview" }),
+                  /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-shot-actions", children: [
+                    /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleCapture, children: "Retake" }),
+                    /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleRemoveScreenshot, children: "Remove" })
+                  ] })
+                ] }) : /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleCapture, children: "Capture screenshot" }),
+                captureError && /* @__PURE__ */ jsx6("div", { className: "cfi-sh-bug-error", children: captureError })
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-files", children: [
+                attachments.map((file, i) => /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-file-row", children: [
+                  /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-file-name", title: file.name, children: file.name }),
+                  /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-file-size", children: formatFileSize(file.size) }),
+                  /* @__PURE__ */ jsx6(
+                    "button",
+                    {
+                      type: "button",
+                      className: "cfi-sh-bug-file-remove",
+                      onClick: () => handleRemoveAttachment(i),
+                      "aria-label": `Remove ${file.name}`,
+                      children: "\xD7"
+                    }
+                  )
+                ] }, `${file.name}-${file.size}-${i}`)),
+                /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    type: "button",
+                    className: "cfi-sh-bug-btn",
+                    onClick: () => fileInputRef.current?.click(),
+                    children: "Attach files\u2026"
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: true,
+                    style: { display: "none" },
+                    onChange: (e) => handleFilesPicked(e.target.files)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-meta", children: [
+                "Includes: URL, app version, recent console errors and failed requests.",
+                config.context.issuesUrl && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+                  " ",
+                  /* @__PURE__ */ jsx6(
+                    "a",
+                    {
+                      className: "cfi-sh-bug-issues-link",
+                      href: config.context.issuesUrl,
+                      target: "_blank",
+                      rel: "noreferrer",
+                      children: "View known issues"
+                    }
+                  )
+                ] })
               ] })
-            ] }) : /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: handleCapture, children: "Capture screenshot" }),
-            captureError && /* @__PURE__ */ jsx6("div", { className: "cfi-sh-bug-error", children: captureError })
-          ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-files", children: [
-            attachments.map((file, i) => /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-file-row", children: [
-              /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-file-name", title: file.name, children: file.name }),
-              /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-file-size", children: formatFileSize(file.size) }),
+            ] }),
+            view === "form" && submitState !== "success" && /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-footer", children: [
+              submitState === "error" && submitError && /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-error", children: submitError }),
+              /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: closeUnlessBusy, children: "Cancel" }),
               /* @__PURE__ */ jsx6(
                 "button",
                 {
                   type: "button",
-                  className: "cfi-sh-bug-file-remove",
-                  onClick: () => handleRemoveAttachment(i),
-                  "aria-label": `Remove ${file.name}`,
-                  children: "\xD7"
-                }
-              )
-            ] }, `${file.name}-${file.size}-${i}`)),
-            /* @__PURE__ */ jsx6(
-              "button",
-              {
-                type: "button",
-                className: "cfi-sh-bug-btn",
-                onClick: () => fileInputRef.current?.click(),
-                children: "Attach files\u2026"
-              }
-            ),
-            /* @__PURE__ */ jsx6(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                multiple: true,
-                style: { display: "none" },
-                onChange: (e) => handleFilesPicked(e.target.files)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-meta", children: [
-            "Includes: URL, app version, recent console errors and failed requests.",
-            config.context.issuesUrl && /* @__PURE__ */ jsxs6(Fragment3, { children: [
-              " ",
-              /* @__PURE__ */ jsx6(
-                "a",
-                {
-                  className: "cfi-sh-bug-issues-link",
-                  href: config.context.issuesUrl,
-                  target: "_blank",
-                  rel: "noreferrer",
-                  children: "View known issues"
+                  className: "cfi-sh-bug-btn cfi-sh-bug-btn-primary",
+                  onClick: handleSubmit,
+                  disabled: !title.trim() || submitState === "submitting",
+                  children: submitState === "submitting" ? "Submitting\u2026" : "Submit report"
                 }
               )
             ] })
-          ] })
-        ] }),
-        view === "form" && submitState !== "success" && /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-bug-footer", children: [
-          submitState === "error" && submitError && /* @__PURE__ */ jsx6("span", { className: "cfi-sh-bug-error", children: submitError }),
-          /* @__PURE__ */ jsx6("button", { type: "button", className: "cfi-sh-bug-btn", onClick: closeUnlessBusy, children: "Cancel" }),
-          /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              className: "cfi-sh-bug-btn cfi-sh-bug-btn-primary",
-              onClick: handleSubmit,
-              disabled: !title.trim() || submitState === "submitting",
-              children: submitState === "submitting" ? "Submitting\u2026" : "Submit report"
-            }
-          )
-        ] })
-      ] })
+          ]
+        }
+      )
     }
   );
 }
@@ -1394,14 +1505,16 @@ function useBugReportShortcut(enabled, onShortcut) {
     function handleKeyDown(e) {
       const platformMod = e.ctrlKey || e.metaKey;
       if (!platformMod || !e.altKey || e.shiftKey) return;
-      if (e.code !== "KeyB" && e.key.toLowerCase() !== "b") return;
+      const isB = e.code === "KeyB" || e.key.toLowerCase() === "b";
+      const isS = e.code === "KeyS" || e.key.toLowerCase() === "s";
+      if (!isB && !isS) return;
       const target = e.target;
       if (target) {
         const tag = target.tagName;
         if (tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable) return;
       }
       e.preventDefault();
-      handlerRef.current();
+      handlerRef.current(isS ? "screenshot" : "plain");
     }
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
@@ -1450,12 +1563,17 @@ function ShellHeader({
   const [bugOpen, setBugOpen] = useState7(false);
   const [bugShot, setBugShot] = useState7(null);
   const bugCaptureBusy = useRef6(false);
-  useBugReportShortcut(bugReport !== void 0, () => {
+  useBugReportShortcut(bugReport !== void 0, (variant) => {
     if (bugOpen) {
       setBugOpen(false);
       return;
     }
     if (bugCaptureBusy.current) return;
+    if (variant === "plain") {
+      setBugShot(null);
+      setBugOpen(true);
+      return;
+    }
     bugCaptureBusy.current = true;
     captureTabScreenshot().then((shot) => setBugShot(shot)).catch(() => setBugShot(null)).finally(() => {
       bugCaptureBusy.current = false;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/shell-header",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Shared shell header with app switcher for Campfire Suite",
   "type": "module",
   "main": "dist/index.js",