@woodsportal/hubspot-kit 1.0.3 → 1.0.5

package/src/dev-module-config/ui/module-config-motion.css

@@ -0,0 +1,134 @@
+@keyframes mc-enter-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mc-enter-from-left {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mc-enter-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes mc-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.mc-enter-from-right {
+  animation: mc-enter-from-right 220ms ease-out both;
+}
+
+.mc-enter-from-left {
+  animation: mc-enter-from-left 220ms ease-out both;
+}
+
+.mc-enter-from-bottom {
+  animation: mc-enter-from-bottom 220ms ease-out both;
+}
+
+.mc-fade-in {
+  animation: mc-fade-in 220ms ease-out both;
+}
+
+.mc-field-enter {
+  animation: mc-enter-from-bottom 220ms ease-out both;
+}
+
+.mc-collapsible-grid {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows 220ms ease-out,
+    opacity 180ms ease-out;
+}
+
+.mc-collapsible-grid.mc-collapsible-open {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+
+.mc-collapsible-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.mc-slide-panel {
+  transition:
+    transform 220ms ease-out,
+    opacity 220ms ease-out;
+}
+
+.mc-slide-panel[data-visible='false'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.mc-slide-panel[data-visible='false'][data-enter-from='right'] {
+  transform: translateX(100%);
+}
+
+.mc-slide-panel[data-visible='false'][data-enter-from='left'] {
+  transform: translateX(-100%);
+}
+
+.mc-slide-panel[data-visible='true'] {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mc-enter-from-right,
+  .mc-enter-from-left,
+  .mc-enter-from-bottom,
+  .mc-fade-in,
+  .mc-field-enter {
+    animation: none;
+  }
+
+  .mc-collapsible-grid {
+    transition: none;
+  }
+
+  .mc-collapsible-grid:not(.mc-collapsible-open) {
+    display: none;
+  }
+
+  .mc-collapsible-grid.mc-collapsible-open {
+    opacity: 1;
+  }
+
+  .mc-slide-panel {
+    transition: none;
+  }
+
+  .mc-slide-panel[data-visible='false'] {
+    display: none;
+  }
+}

package/src/dev-module-config/ui/module-config-motion.ts

@@ -0,0 +1,28 @@
+export const MODULE_CONFIG_MOTION_MS = 220
+
+export function getModuleConfigMotionMs(): number {
+  if (typeof window === 'undefined') return MODULE_CONFIG_MOTION_MS
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : MODULE_CONFIG_MOTION_MS
+}
+
+export const mcMotion = {
+  transition: 'transition-all duration-200 ease-out motion-reduce:transition-none motion-reduce:duration-0',
+  transform: 'transition-transform duration-200 ease-out motion-reduce:transition-none motion-reduce:duration-0',
+  colors: 'transition-colors duration-200 ease-out motion-reduce:transition-none motion-reduce:duration-0',
+  opacity: 'transition-opacity duration-200 ease-out motion-reduce:transition-none motion-reduce:duration-0',
+  fieldControl:
+    'transition-[border-color,box-shadow,background-color] duration-200 ease-out motion-reduce:transition-none',
+} as const
+
+export type ModuleConfigEnterFrom = 'left' | 'right' | 'bottom'
+
+export function enterFromClass(enterFrom: ModuleConfigEnterFrom): string {
+  switch (enterFrom) {
+    case 'left':
+      return 'mc-enter-from-left'
+    case 'bottom':
+      return 'mc-enter-from-bottom'
+    default:
+      return 'mc-enter-from-right'
+  }
+}

package/src/dev-module-config/ui/module-config-overlay-side.ts

@@ -0,0 +1,29 @@
+export type ModuleConfigOverlaySide = 'left' | 'right'
+
+const STORAGE_KEY = 'woodsportal:module-config-overlay-side'
+
+export function loadModuleConfigOverlaySide(): ModuleConfigOverlaySide {
+  if (typeof window === 'undefined') return 'right'
+  try {
+    const value = window.localStorage.getItem(STORAGE_KEY)
+    return value === 'left' ? 'left' : 'right'
+  } catch {
+    return 'right'
+  }
+}
+
+export function saveModuleConfigOverlaySide(side: ModuleConfigOverlaySide): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, side)
+  } catch {
+    // ignore quota / private mode
+  }
+}
+
+export function toggleModuleConfigOverlaySide(
+  side: ModuleConfigOverlaySide,
+): ModuleConfigOverlaySide {
+  const next: ModuleConfigOverlaySide = side === 'right' ? 'left' : 'right'
+  saveModuleConfigOverlaySide(next)
+  return next
+}

package/src/dev-module-config/ui/module-config-surfaces.ts

@@ -0,0 +1,27 @@
+/** Semantic surface classes for the dev module config toolbar (theme via CSS variables). */
+export const mcSurface = {
+  shell: 'bg-[var(--mc-bg-shell)] text-[var(--mc-text)]',
+  surface: 'bg-[var(--mc-bg-surface)]',
+  muted: 'bg-[var(--mc-bg-muted)]',
+  elevated: 'bg-[var(--mc-bg-elevated)]',
+  tabActive: 'bg-[var(--mc-bg-tab-active)]',
+  panel: 'mc-panel',
+  text: 'text-[var(--mc-text)]',
+  textMuted: 'text-[var(--mc-text-muted)]',
+  textFaint: 'text-[var(--mc-text-faint)]',
+  link: 'text-[var(--mc-link)] hover:text-[var(--mc-link-hover)]',
+  hover: 'hover:bg-[var(--mc-bg-hover)]',
+  iconButton:
+    'rounded-md px-2 py-1 text-[var(--mc-text-muted)] hover:bg-[var(--mc-bg-hover)] hover:text-[var(--mc-text)]',
+  linkButton:
+    'rounded-md px-2 py-1 text-[var(--mc-link)] hover:bg-[var(--mc-bg-hover)] hover:text-[var(--mc-link-hover)] disabled:cursor-not-allowed disabled:opacity-50',
+  footerButton: 'mc-btn-ghost text-sm font-medium',
+  primaryButton: 'mc-btn-primary w-full text-sm disabled:opacity-60',
+  tabBar: 'mc-tab-bar flex flex-shrink-0',
+  tabButton: 'mc-tab-btn',
+  tabButtonActive: 'mc-tab-btn mc-tab-btn--active',
+  chromeHeader: 'mc-chrome-header flex-shrink-0 px-4 py-3',
+  chromeFooter: 'mc-chrome-footer flex-shrink-0 space-y-2 p-3',
+  statusChip: 'mc-status-chip text-sm font-medium',
+  infoIcon: 'mc-info-icon',
+} as const

package/src/dev-module-config/ui/module-config-theme.css

@@ -0,0 +1,483 @@
+[data-mc-theme='light'] {
+  --mc-bg-hard: #eaf0f6;
+  --mc-bg-shell: #f5f8fa;
+  --mc-bg-surface: #ffffff;
+  --mc-bg-muted: #eaf0f6;
+  --mc-bg-hover: #eaf0f6;
+  --mc-bg-tab-active: #e5f5f8;
+  --mc-bg-elevated: #ffffff;
+  --mc-border: #cbd6e2;
+  --mc-border-subtle: #eaf0f6;
+  --mc-text: #33475b;
+  --mc-text-muted: #516f90;
+  --mc-text-faint: #99acc2;
+  --mc-link: #0091ae;
+  --mc-link-hover: #007a8c;
+  --mc-accent: #0091ae;
+  --mc-accent-contrast: #ffffff;
+  --mc-primary: #ff7a59;
+  --mc-primary-hover: #ff8f73;
+  --mc-primary-contrast: #ffffff;
+  --mc-status-dirty-bg: #fff4e5;
+  --mc-status-dirty-text: #b26a00;
+  --mc-status-saved-bg: #e5f5f8;
+  --mc-status-saved-text: #007a8c;
+  --mc-status-default-bg: #eaf0f6;
+  --mc-status-default-text: #516f90;
+  --mc-error-bg: #fef2f2;
+  --mc-error-border: #fecaca;
+  --mc-error-text: #dc2626;
+  --mc-toggle-off: #cbd6e2;
+  --mc-toggle-on: #0091ae;
+  --mc-toggle-knob: #ffffff;
+  --mc-backdrop: rgb(0 0 0 / 0.3);
+  --mc-modal-backdrop: rgb(0 0 0 / 0.4);
+  --mc-shadow: 0 10px 30px rgb(0 0 0 / 0.12);
+  color-scheme: light;
+}
+
+/* Soft dark: hard / medium / soft grays only — no outlines, no accent rainbow */
+[data-mc-theme='dark'] {
+  --mc-bg-hard: #121316;
+  --mc-bg-shell: #17181c;
+  --mc-bg-surface: #17181c;
+  --mc-bg-muted: #1d1f24;
+  --mc-bg-hover: #24262c;
+  --mc-bg-tab-active: #1d1f24;
+  --mc-bg-elevated: #1d1f24;
+  --mc-border: transparent;
+  --mc-border-subtle: transparent;
+  --mc-text: #a3a8af;
+  --mc-text-muted: #737982;
+  --mc-text-faint: #52565d;
+  --mc-link: #a3a8af;
+  --mc-link-hover: #b8bdc4;
+  --mc-accent: #8b9199;
+  --mc-accent-contrast: #17181c;
+  --mc-primary: #24262c;
+  --mc-primary-hover: #2c2f36;
+  --mc-primary-contrast: #b8bdc4;
+  --mc-status-dirty-bg: #1d1f24;
+  --mc-status-dirty-text: #949088;
+  --mc-status-saved-bg: #1d1f24;
+  --mc-status-saved-text: #88918d;
+  --mc-status-default-bg: #1d1f24;
+  --mc-status-default-text: #737982;
+  --mc-error-bg: #1d1f24;
+  --mc-error-border: transparent;
+  --mc-error-text: #9a8585;
+  --mc-toggle-off: #24262c;
+  --mc-toggle-on: #34373f;
+  --mc-toggle-knob: #8b9199;
+  --mc-backdrop: rgb(0 0 0 / 0.5);
+  --mc-modal-backdrop: rgb(0 0 0 / 0.62);
+  --mc-shadow: none;
+  color-scheme: dark;
+}
+
+.mc-toolbar-root {
+  background-color: var(--mc-bg-shell);
+  color: var(--mc-text);
+}
+
+.mc-panel {
+  border: 1px solid var(--mc-border);
+  background-color: var(--mc-bg-elevated);
+  border-radius: 0.375rem;
+}
+
+[data-mc-theme='dark'] .mc-panel {
+  border: none;
+  background-color: var(--mc-bg-muted);
+}
+
+.mc-surface {
+  background-color: var(--mc-bg-surface);
+  border-color: var(--mc-border);
+}
+
+.mc-input,
+.mc-select {
+  background-color: var(--mc-bg-muted);
+  border: 1px solid var(--mc-border);
+  color: var(--mc-text);
+  border-radius: 0.375rem;
+}
+
+[data-mc-theme='dark'] .mc-input,
+[data-mc-theme='dark'] .mc-select {
+  border: none;
+  background-color: var(--mc-bg-muted);
+}
+
+.mc-input:focus,
+.mc-select:focus {
+  border-color: var(--mc-accent);
+  outline: none;
+  box-shadow: 0 0 0 1px var(--mc-accent);
+}
+
+[data-mc-theme='dark'] .mc-input:focus,
+[data-mc-theme='dark'] .mc-select:focus {
+  border: none;
+  box-shadow: none;
+  background-color: var(--mc-bg-hover);
+}
+
+.mc-input::placeholder {
+  color: var(--mc-text-faint);
+}
+
+.mc-checkbox {
+  accent-color: var(--mc-accent);
+}
+
+/* Isolate HubSpot-style switches from portal global button styles */
+[data-mc-theme] button.mc-toggle-switch {
+  appearance: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  min-height: 1.5rem;
+  min-width: 2.75rem;
+  line-height: normal;
+  font: inherit;
+  box-shadow: none;
+  background-color: var(--mc-toggle-off);
+}
+
+[data-mc-theme] button.mc-toggle-switch[aria-checked='true'] {
+  background-color: var(--mc-toggle-on);
+}
+
+/* HubSpot-style object type selector at top of menu object drill-down */
+.mc-object-type-banner .mb-4 > div:first-child {
+  display: none;
+}
+
+.mc-object-type-banner .mc-select {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  border-color: var(--mc-accent);
+}
+
+.mc-tab-bar {
+  background-color: var(--mc-bg-surface);
+  border-bottom: 1px solid var(--mc-border-subtle);
+}
+
+[data-mc-theme='dark'] .mc-tab-bar {
+  border-bottom: none;
+  background-color: var(--mc-bg-shell);
+}
+
+.mc-tab-btn {
+  flex: 1 1 0%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--mc-text-muted);
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.mc-tab-btn:hover {
+  background-color: var(--mc-bg-hover);
+  color: var(--mc-text);
+}
+
+.mc-tab-btn--active {
+  font-weight: 600;
+  color: var(--mc-text);
+  background-color: var(--mc-bg-tab-active);
+  border-bottom: 3px solid var(--mc-accent);
+  margin-bottom: -1px;
+}
+
+[data-mc-theme='dark'] .mc-tab-btn--active {
+  border-bottom: none;
+  margin-bottom: 0;
+  background-color: var(--mc-bg-muted);
+}
+
+[data-mc-theme='dark'] .mc-tab-btn:not(.mc-tab-btn--active) {
+  background-color: transparent;
+}
+
+.mc-chrome-header {
+  background-color: var(--mc-bg-surface);
+  border-bottom: 1px solid var(--mc-border-subtle);
+}
+
+[data-mc-theme='dark'] .mc-chrome-header {
+  border-bottom: none;
+  background-color: var(--mc-bg-shell);
+}
+
+.mc-chrome-footer {
+  background-color: var(--mc-bg-surface);
+  border-top: 1px solid var(--mc-border-subtle);
+}
+
+[data-mc-theme='dark'] .mc-chrome-footer {
+  border-top: none;
+  background-color: var(--mc-bg-hard);
+}
+
+.mc-btn-ghost {
+  border-radius: 0.375rem;
+  border: 1px solid var(--mc-border);
+  background: transparent;
+  padding: 0.375rem 0.625rem;
+  color: var(--mc-text-muted);
+}
+
+.mc-btn-ghost:hover {
+  background-color: var(--mc-bg-hover);
+  color: var(--mc-text);
+}
+
+[data-mc-theme='dark'] .mc-btn-ghost {
+  border: none;
+  background-color: var(--mc-bg-muted);
+}
+
+[data-mc-theme='dark'] .mc-btn-ghost:hover {
+  background-color: var(--mc-bg-hover);
+}
+
+.mc-btn-primary {
+  border-radius: 0.375rem;
+  background-color: var(--mc-primary);
+  padding: 0.625rem 1rem;
+  color: var(--mc-primary-contrast);
+  font-weight: 600;
+}
+
+.mc-btn-primary:hover {
+  background-color: var(--mc-primary-hover);
+}
+
+.mc-status-chip {
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.625rem;
+}
+
+.mc-persistence-status {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  border-radius: 0.5rem;
+  padding: 0.625rem 0.75rem;
+}
+
+.mc-persistence-status__body {
+  min-width: 0;
+  flex: 1 1 0%;
+}
+
+.mc-persistence-status__label {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.mc-persistence-status__hint {
+  display: block;
+  margin-top: 0.125rem;
+  font-size: 0.6875rem;
+  line-height: 1.35;
+  color: var(--mc-text-faint);
+}
+
+.mc-persistence-status__path {
+  display: block;
+  margin-top: 0.2rem;
+  border-radius: 0.25rem;
+  background-color: var(--mc-bg-hover);
+  padding: 0.2rem 0.4rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  color: var(--mc-text-muted);
+  word-break: break-all;
+}
+
+.mc-persistence-status--saved {
+  background-color: var(--mc-status-saved-bg);
+  color: var(--mc-status-saved-text);
+}
+
+.mc-persistence-status--dirty {
+  background-color: var(--mc-status-dirty-bg);
+  color: var(--mc-status-dirty-text);
+}
+
+.mc-persistence-status--info {
+  background-color: var(--mc-status-default-bg);
+  color: var(--mc-status-default-text);
+}
+
+[data-mc-theme='dark'] .mc-persistence-status__path {
+  background-color: var(--mc-bg-hard);
+}
+
+.mc-collapsible-body {
+  border-top: 1px solid var(--mc-border-subtle);
+}
+
+[data-mc-theme='dark'] .mc-collapsible-body {
+  border-top: none;
+  padding-top: 0.25rem;
+}
+
+[data-mc-theme='dark'] .mc-repeater-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  background: transparent;
+  border: none;
+}
+
+[data-mc-theme='dark'] .mc-repeater-row {
+  border: none;
+  border-radius: 0.375rem;
+  background-color: var(--mc-bg-muted);
+}
+
+.mc-empty-slot {
+  border: 1px dashed var(--mc-border-subtle);
+  border-radius: 0.375rem;
+}
+
+[data-mc-theme='dark'] .mc-empty-slot {
+  border: none;
+  background-color: var(--mc-bg-muted);
+}
+
+.mc-info-icon {
+  display: inline-flex;
+  height: 1rem;
+  width: 1rem;
+  shrink: 0;
+  cursor: help;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid var(--mc-border-subtle);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--mc-text-faint);
+}
+
+[data-mc-theme='dark'] .mc-info-icon {
+  border: none;
+  background-color: var(--mc-bg-muted);
+}
+
+.mc-modal-panel {
+  border-radius: 0.5rem;
+  box-shadow: var(--mc-shadow);
+  background-color: var(--mc-bg-elevated);
+  border: 1px solid var(--mc-border);
+}
+
+[data-mc-theme='dark'] .mc-modal-panel {
+  border: none;
+  box-shadow: none;
+  background-color: var(--mc-bg-muted);
+}
+
+.mc-modal-section {
+  border-color: var(--mc-border-subtle);
+}
+
+[data-mc-theme='dark'] .mc-modal-section {
+  border-color: transparent;
+}
+
+.mc-color-swatch-selected {
+  outline: 2px solid var(--mc-accent);
+  outline-offset: 1px;
+}
+
+[data-mc-theme='light'] .mc-repeater-row + .mc-repeater-row {
+  border-top: 1px solid var(--mc-border-subtle);
+}
+
+[data-mc-theme='dark'] .mc-popover-arrow {
+  display: none;
+}
+
+.mc-richtext-toolbar {
+  border-bottom: 1px solid var(--mc-border-subtle);
+  background-color: var(--mc-bg-muted);
+}
+
+[data-mc-theme='dark'] .mc-richtext-toolbar {
+  border-bottom: none;
+  background-color: var(--mc-bg-hover);
+}
+
+/* Overlay drawer — plain CSS so width/position never depend on Tailwind @source */
+[data-mc-theme].mc-ui-overlay-root {
+  display: contents;
+}
+
+.mc-overlay-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background: var(--mc-backdrop);
+  opacity: 0;
+  transition: opacity 300ms ease-out;
+}
+
+.mc-overlay-backdrop.mc-overlay-entered {
+  opacity: 1;
+}
+
+.mc-overlay-drawer {
+  position: fixed;
+  top: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: min(420px, 100vw);
+  max-width: 100vw;
+  transition: transform 300ms ease-out;
+}
+
+.mc-overlay-drawer[data-side='right'] {
+  right: 0;
+  transform: translateX(100%);
+}
+
+.mc-overlay-drawer[data-side='left'] {
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.mc-overlay-drawer.mc-overlay-entered {
+  transform: translateX(0);
+}
+
+.mc-overlay-drawer.mc-overlay-inert {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mc-overlay-backdrop,
+  .mc-overlay-drawer {
+    transition: none;
+  }
+}