vanilla-breeze 0.3.0 → 0.3.1

package/dist/cdn/components/empathy-map.js

@@ -1,582 +0,0 @@
-var _=`
-  :host {
-    display: block;
-    font-family: var(--_font-sans);
-    line-height: 1.6;
-    color: var(--_text);
-    container-type: inline-size;
-
-    --_bg:     var(--empathy-map-bg, var(--color-surface, #ffffff));
-    --_card:   var(--empathy-map-card, var(--color-surface-raised, #f8f9fa));
-    --_border: var(--empathy-map-border, var(--color-border, #e0e0e0));
-    --_muted:  var(--empathy-map-muted, var(--color-text-muted, #666666));
-    --_text:   var(--empathy-map-text, var(--color-text, #1a1a1a));
-    --_radius: var(--empathy-map-radius, var(--radius-xl, 1rem));
-    --_accent: var(--empathy-map-accent, var(--color-interactive, var(--color-primary, #0066cc)));
-    --_link:   var(--empathy-map-link, var(--color-interactive, var(--color-primary, #6366f1)));
-    --_primary: var(--empathy-map-primary, var(--color-primary, #6366f1));
-    --_accent-bar: var(--empathy-map-accent-bar, var(--color-accent, #8b5cf6));
-    --_says:   var(--empathy-map-says, var(--color-info, #3b82f6));
-    --_thinks: var(--empathy-map-thinks, var(--color-accent, #8b5cf6));
-    --_does:   var(--empathy-map-does, var(--color-warning, #f59e0b));
-    --_feels:  var(--empathy-map-feels, var(--color-error, #ef4444));
-    --_says-bg:   color-mix(in oklch, var(--_says)   16%, var(--_card));
-    --_thinks-bg: color-mix(in oklch, var(--_thinks) 16%, var(--_card));
-    --_does-bg:   color-mix(in oklch, var(--_does)   16%, var(--_card));
-    --_feels-bg:  color-mix(in oklch, var(--_feels)  16%, var(--_card));
-    --_chip-type-bg: color-mix(in oklch, var(--_accent-bar) 18%, var(--_card));
-    --_chip-type-fg: var(--_accent-bar);
-    --_font-sans:    var(--empathy-map-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
-    --_font-xs:      var(--empathy-map-font-xs, var(--font-size-xs, 0.75rem));
-    --_font-sm:      var(--empathy-map-font-sm, var(--font-size-sm, 0.875rem));
-    --_font-md:      var(--empathy-map-font-md, var(--font-size-md, 1rem));
-    --_font-xl:      var(--empathy-map-font-xl, var(--font-size-xl, 1.25rem));
-    --_space-2xs:    var(--empathy-map-space-2xs, var(--size-2xs, 0.25rem));
-    --_space-xs:     var(--empathy-map-space-xs, var(--size-xs, 0.5rem));
-    --_space-s:      var(--empathy-map-space-s, var(--size-s, 0.75rem));
-    --_space-m:      var(--empathy-map-space-m, var(--size-m, 1rem));
-    --_space-l:      var(--empathy-map-space-l, var(--size-l, 1.5rem));
-    --_radius-m:     var(--empathy-map-radius-m, var(--radius-m, 0.5rem));
-    --_radius-full:  var(--empathy-map-radius-full, var(--radius-full, 9999px));
-    --_duration:     var(--empathy-map-duration, var(--duration-normal, 200ms));
-    --_duration-fast: var(--empathy-map-duration-fast, var(--duration-fast, 100ms));
-    --_ease:         var(--empathy-map-ease, var(--ease-default, ease));
-  }
-
-  *, *::before, *::after { box-sizing: border-box; margin: 0; }
-
-  /* \u2500\u2500 Card \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 */
-  .empathy-map {
-    background: var(--_card);
-    border: 1px solid var(--_border);
-    border-radius: var(--_radius);
-    overflow: hidden;
-  }
-
-  /* \u2500\u2500 Header \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 */
-  .empathy-map__header {
-    padding: 20px 24px 16px 28px;
-    border-block-end: 1px solid var(--_border);
-    position: relative;
-  }
-
-  /* Left accent bar */
-  .empathy-map__header::before {
-    content: '';
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    width: 4px;
-    background: linear-gradient(135deg, var(--_primary), var(--_accent-bar));
-  }
-
-  .empathy-map__header-top {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--_space-s);
-    flex-wrap: wrap;
-    margin-block-end: var(--_space-xs);
-  }
-
-  .empathy-map__chips {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 6px;
-  }
-
-  /* \u2500\u2500 Chips \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 */
-  .chip {
-    display: inline-block;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.05em;
-    padding: 2px 9px;
-    border-radius: var(--_radius-full);
-    text-decoration: none;
-    line-height: 1.6;
-  }
-
-  .chip--type {
-    color: var(--_chip-type-fg);
-    background: var(--_chip-type-bg);
-  }
-
-  /* \u2500\u2500 Persona ref \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 */
-  .persona-ref {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--_muted);
-    text-decoration: none;
-    white-space: nowrap;
-  }
-
-  .persona-ref svg {
-    width: 14px;
-    height: 14px;
-    flex-shrink: 0;
-  }
-
-  a.persona-ref:hover { color: var(--_link); text-decoration: underline; }
-
-  /* \u2500\u2500 Title & summary (slotted content) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  .empathy-map__title-wrap {
-    margin-block-end: var(--_space-2xs);
-  }
-
-  .empathy-map__title {
-    font-size: var(--_font-xl);
-    font-weight: 700;
-    color: var(--_text);
-    margin: 0;
-  }
-
-  ::slotted([slot="title"]) {
-    font-size: var(--_font-xl) !important;
-    font-weight: 700 !important;
-    color: var(--_text) !important;
-    margin: 0 !important;
-  }
-
-  .empathy-map__summary-wrap {
-    max-width: 72ch;
-  }
-
-  ::slotted([slot="summary"]) {
-    font-size: var(--_font-sm) !important;
-    color: var(--_muted) !important;
-    margin: 0 !important;
-  }
-
-  /* \u2500\u2500 Grid \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 */
-  .empathy-map__grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1px;
-    background: var(--_border);
-  }
-
-  /* \u2500\u2500 Quadrant \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 */
-  .quadrant {
-    background: var(--_card);
-    padding: 0;
-    position: relative;
-    display: grid;
-  }
-
-  .quadrant::before {
-    content: '';
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    height: 3px;
-  }
-
-  .quadrant--says::before   { background: var(--_says); }
-  .quadrant--thinks::before { background: var(--_thinks); }
-  .quadrant--does::before   { background: var(--_does); }
-  .quadrant--feels::before  { background: var(--_feels); }
-
-  .quadrant__inner {
-    display: grid;
-    padding: 16px 20px;
-    padding-block-start: 19px; /* 16 + 3px top border */
-  }
-
-  /* \u2500\u2500 Quadrant header \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 */
-  .quadrant__header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-block-end: var(--_space-s);
-  }
-
-  .quadrant__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: var(--_radius-m);
-    flex-shrink: 0;
-  }
-
-  .quadrant__icon svg {
-    width: 16px;
-    height: 16px;
-  }
-
-  .quadrant--says   .quadrant__icon { background: var(--_says-bg);   color: var(--_says); }
-  .quadrant--thinks .quadrant__icon { background: var(--_thinks-bg); color: var(--_thinks); }
-  .quadrant--does   .quadrant__icon { background: var(--_does-bg);   color: var(--_does); }
-  .quadrant--feels  .quadrant__icon { background: var(--_feels-bg);  color: var(--_feels); }
-
-  .quadrant__label {
-    font-size: 13px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--_muted);
-    flex: 1;
-  }
-
-  /* \u2500\u2500 Quadrant content / faces \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  .quadrant__face {
-    grid-area: 1 / 1;
-    transition: opacity var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
-  }
-
-  .quadrant__face--front {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .quadrant__face--back {
-    opacity: 0;
-    transform: scale(0.95);
-    pointer-events: none;
-  }
-
-  [data-editing] .quadrant__face--front {
-    opacity: 0;
-    transform: scale(0.95);
-    pointer-events: none;
-  }
-
-  [data-editing] .quadrant__face--back {
-    opacity: 1;
-    transform: scale(1);
-    pointer-events: auto;
-  }
-
-  .quadrant__content {
-    font-size: 14px;
-    line-height: 1.55;
-    color: var(--_text);
-  }
-
-  .quadrant__content p {
-    margin-block: 0 6px;
-  }
-
-  .quadrant__content p:last-child {
-    margin-block-end: 0;
-  }
-
-  /* \u2500\u2500 Slot fallback / placeholder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  .placeholder {
-    font-size: 13px;
-    color: var(--_muted);
-    font-style: italic;
-  }
-
-  ::slotted(ul),
-  ::slotted(ol) {
-    margin: 0;
-    padding-inline-start: 1.4em;
-    font-size: 14px;
-    line-height: 1.55;
-  }
-
-  /* \u2500\u2500 Emotion tags \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 */
-  .emotion-tag {
-    display: inline-block;
-    font-size: 12px;
-    font-weight: 600;
-    padding: 2px 10px;
-    border-radius: var(--_radius-full);
-    margin-block-end: 6px;
-    margin-inline-end: 4px;
-    background: color-mix(in srgb, var(--ec, #94a3b8) 15%, transparent);
-    color: var(--ec, #94a3b8);
-    border: 1px solid color-mix(in srgb, var(--ec, #94a3b8) 30%, transparent);
-  }
-
-  /* \u2500\u2500 Edit / Done buttons \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 */
-  .quadrant__edit-btn,
-  .quadrant__done-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: 1px solid var(--_border);
-    border-radius: 6px;
-    background: var(--_bg);
-    color: var(--_muted);
-    cursor: pointer;
-    line-height: 1;
-    padding: 0;
-    flex-shrink: 0;
-    transition: background var(--_duration-fast) var(--_ease), color var(--_duration-fast) var(--_ease);
-  }
-
-  .quadrant__edit-btn svg,
-  .quadrant__done-btn svg {
-    width: 14px;
-    height: 14px;
-  }
-
-  .quadrant__edit-btn:hover,
-  .quadrant__done-btn:hover {
-    background: var(--_border);
-    color: var(--_text);
-  }
-
-  .quadrant__done-btn {
-    margin-block-start: 8px;
-    width: auto;
-    padding: 0 12px;
-    font-size: 12px;
-    font-weight: 600;
-    gap: 4px;
-  }
-
-  /* \u2500\u2500 Editor textarea \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 */
-  .quadrant__editor {
-    width: 100%;
-    min-height: 100px;
-    padding: 10px 12px;
-    border: 1px solid var(--_border);
-    border-radius: var(--_radius-m);
-    font-family: inherit;
-    font-size: 13px;
-    line-height: 1.55;
-    color: var(--_text);
-    background: var(--_bg);
-    resize: vertical;
-  }
-
-  .quadrant__editor:focus {
-    outline: 2px solid var(--_accent);
-    outline-offset: -1px;
-    border-color: var(--_accent);
-  }
-
-  /* \u2500\u2500 Footer \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 */
-  .empathy-map__footer {
-    display: flex;
-    gap: 1px;
-    background: var(--_border);
-    border-block-start: 1px solid var(--_border);
-  }
-
-  .summary-row {
-    flex: 1;
-    background: var(--_card);
-    padding: 16px 20px;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  .summary-row__icon {
-    line-height: 1;
-    flex-shrink: 0;
-    margin-block-start: 2px;
-    color: var(--_muted);
-  }
-
-  .summary-row__icon svg {
-    width: 18px;
-    height: 18px;
-  }
-
-  .summary-row__body {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .summary-row__label {
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: var(--_muted);
-    margin-block-end: 4px;
-  }
-
-  .summary-row__content {
-    font-size: 14px;
-    line-height: 1.55;
-    color: var(--_text);
-  }
-
-  .summary-row__content p {
-    margin-block: 0 4px;
-  }
-
-  .summary-row__content p:last-child {
-    margin-block-end: 0;
-  }
-
-  /* \u2500\u2500 Compact variant \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 */
-  :host([compact]) .empathy-map__header {
-    padding: 14px 18px 12px 22px;
-  }
-
-  :host([compact]) .empathy-map__title {
-    font-size: 16px;
-  }
-
-  :host([compact]) .empathy-map__summary {
-    font-size: 12px;
-  }
-
-  :host([compact]) .quadrant__inner {
-    padding: 12px 14px;
-    padding-block-start: 15px;
-  }
-
-  :host([compact]) .quadrant__icon {
-    width: 26px;
-    height: 26px;
-    font-size: 13px;
-    border-radius: 6px;
-  }
-
-  :host([compact]) .quadrant__label {
-    font-size: 11px;
-  }
-
-  :host([compact]) .quadrant__content {
-    font-size: 12px;
-  }
-
-  :host([compact]) .summary-row {
-    padding: 12px 14px;
-  }
-
-  :host([compact]) .summary-row__content {
-    font-size: 12px;
-  }
-
-  /* \u2500\u2500 Responsive \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 */
-  @container (max-width: 500px) {
-    .empathy-map__grid {
-      grid-template-columns: 1fr;
-    }
-
-    .empathy-map__header {
-      padding: 14px 16px 12px 20px;
-    }
-
-    .empathy-map__title {
-      font-size: 17px;
-    }
-
-    .empathy-map__footer {
-      flex-direction: column;
-    }
-  }
-
-  /* \u2500\u2500 Motion \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 */
-  @media (prefers-reduced-motion: reduce) {
-    .quadrant__face {
-      transition: none;
-    }
-
-    .quadrant__edit-btn,
-    .quadrant__done-btn {
-      transition: none;
-    }
-  }
-
-  /* \u2500\u2500 Print \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 */
-  @media print {
-    .empathy-map {
-      break-inside: avoid;
-      border-color: var(--_border);
-    }
-
-    .quadrant__edit-btn,
-    .quadrant__done-btn {
-      display: none;
-    }
-
-    .quadrant__face--back {
-      display: none;
-    }
-
-    .empathy-map__footer {
-      flex-direction: column;
-    }
-  }
-
-  /* \u2500\u2500 Utility \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 */
-  .state-msg        { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
-  .state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
-  code { font-family: var(--font-mono, Monaco, Menlo, monospace); font-size: 0.88em; }
-`;var E=window.matchMedia("(prefers-reduced-motion: reduce)");var g=new Map;function y(o,t,e={}){let a=e.priority??10,r={impl:t,bundle:e.bundle,contract:e.contract,priority:a},n=g.get(o);if(customElements.get(o)){if(!n||n.priority>=a){n&&n.priority===a&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${o}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=a){n.priority===a&&console.warn(`[VB Bundle] Tag <${o}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}g.set(o,r),customElements.define(o,t)}var k=0;function x(o,t,e="vb-vt"){if(!o?.isConnected||typeof document>"u"||!("startViewTransition"in document)||matchMedia("(prefers-reduced-motion: reduce)").matches)return t(),null;let a=`${e}-${++k}`;o.style.viewTransitionName=a;let r=document.startViewTransition(t);return r.finished.finally(()=>{o.style.viewTransitionName===a&&(o.style.viewTransitionName="")}),r}function c(o){return String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function p(o){return`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${o}</svg>`}var l={user:'<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',pencil:'<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',check:'<path d="M20 6 9 17l-5-5"/>',target:'<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>',alertTriangle:'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/>',messageCircle:'<path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"/>',lightbulb:'<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/>',wrench:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/>',heart:'<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/>',mapPin:'<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',checkCircle:'<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/>',x:'<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',send:'<path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/>'},f={says:{label:"Says",icon:l.messageCircle,color:"#3b82f6"},thinks:{label:"Thinks",icon:l.lightbulb,color:"#8b5cf6"},does:{label:"Does",icon:l.wrench,color:"#f59e0b"},feels:{label:"Feels",icon:l.heart,color:"#ef4444"}},q={delighted:{emoji:"\u{1F604}",score:.95,color:"#16a34a"},satisfied:{emoji:"\u{1F60A}",score:.8,color:"#22c55e"},hopeful:{emoji:"\u{1F642}",score:.68,color:"#84cc16"},curious:{emoji:"\u{1F914}",score:.55,color:"#eab308"},neutral:{emoji:"\u{1F610}",score:.5,color:"#94a3b8"},uncertain:{emoji:"\u{1F615}",score:.4,color:"#f97316"},confused:{emoji:"\u{1F635}",score:.3,color:"#fb923c"},frustrated:{emoji:"\u{1F624}",score:.18,color:"#ef4444"},angry:{emoji:"\u{1F620}",score:.05,color:"#dc2626"}};var b=["says","thinks","does","feels"],v=class extends HTMLElement{static get observedAttributes(){return["persona","persona-id","src","editable","compact"]}#t=new Map;constructor(){super(),this.attachShadow({mode:"open"}),this.__quadrants=null,this.__goals=null,this.__painPoints=null,this._editingQuadrants=new Set}get quadrants(){return this.__quadrants}set quadrants(t){this.__quadrants=t,this.isConnected&&this._render()}get goals(){return this.__goals}set goals(t){this.__goals=t,this.isConnected&&this._render()}get painPoints(){return this.__painPoints}set painPoints(t){this.__painPoints=t,this.isConnected&&this._render()}#e(){for(let t of this.children){let e=t.getAttribute("slot");e&&this.#t.set(e,t.textContent.trim())}}_resolve(t){return this.getAttribute(t)||this.#t.get(t)||""}connectedCallback(){this.#e(),this.setAttribute("data-upgraded",""),this.hasAttribute("src")?this._loadSrc(this.getAttribute("src")):this._render()}disconnectedCallback(){this.removeAttribute("data-upgraded")}attributeChangedCallback(t){this.isConnected&&(t==="src"?this._loadSrc(this.getAttribute("src")):this._render())}get data(){let t=this.querySelector('[slot="title"]'),e=this.querySelector('[slot="summary"]');return{persona:this.getAttribute("persona")||void 0,personaId:this.getAttribute("persona-id")||void 0,title:t?.textContent?.trim()||void 0,summary:e?.textContent?.trim()||void 0,quadrants:this.__quadrants||void 0,goals:this.__goals||void 0,painPoints:this.__painPoints||void 0}}set data(t){if(!(!t||typeof t!="object")){if(t.persona&&this.setAttribute("persona",String(t.persona)),t.personaId&&this.setAttribute("persona-id",String(t.personaId)),t.title&&!this.querySelector('[slot="title"]')){let e=document.createElement("h2");e.slot="title",e.textContent=t.title,this.appendChild(e)}if(t.summary&&!this.querySelector('[slot="summary"]')){let e=document.createElement("p");e.slot="summary",e.textContent=t.summary,this.appendChild(e)}t.quadrants!=null&&(this.__quadrants=t.quadrants),t.goals!=null&&(this.__goals=t.goals),t.painPoints!=null&&(this.__painPoints=t.painPoints),this.isConnected&&this._render(),this.dispatchEvent(new CustomEvent("empathy-map:data-changed",{detail:{data:this.data,source:"property"},bubbles:!0,composed:!0}))}}editQuadrant(t){b.includes(t)&&this.hasAttribute("editable")&&this._openEdit(t)}closeQuadrant(t){b.includes(t)&&this._closeEdit(t)}async _loadSrc(t){if(!(!t||!this.shadowRoot)){this.shadowRoot.innerHTML=`<style>${_}</style><div class="state-msg">Loading\u2026</div>`;try{let e=await fetch(t);if(!e.ok)throw new Error(`HTTP ${e.status}`);let a=await e.json();if(a.persona&&this.setAttribute("persona",a.persona),a.personaId&&this.setAttribute("persona-id",a.personaId),a.title&&!this.querySelector('[slot="title"]')){let r=document.createElement("h2");r.slot="title",r.textContent=a.title,this.appendChild(r)}if(a.summary&&!this.querySelector('[slot="summary"]')){let r=document.createElement("p");r.slot="summary",r.textContent=a.summary,this.appendChild(r)}this.__quadrants=a.quadrants||null,this.__goals=a.goals||null,this.__painPoints=a.painPoints||null,this._render()}catch(e){if(!this.shadowRoot)return;let a=e instanceof Error?e.message:String(e);this.shadowRoot.innerHTML=`<style>${_}</style><div class="state-msg state-msg--error">Could not load empathy map: ${c(a)}</div>`}}}_render(){let t=this._resolve("persona")||"",e=this._resolve("persona-id")||"",a=this.hasAttribute("compact"),r=this.hasAttribute("editable"),n=!!this.querySelector('[slot="title"]')||this.#t.has("title"),i=!!this.querySelector('[slot="summary"]')||this.#t.has("summary"),d=this.__goals?.length||this.querySelector('[slot="goals"]'),s=this.__painPoints?.length||this.querySelector('[slot="pain-points"]'),m=`<style>${_}</style>
-      <article class="empathy-map${a?" empathy-map--compact":""}">
-
-        <header class="empathy-map__header">
-          <div class="empathy-map__header-top">
-            <div class="empathy-map__chips">
-              <span class="chip chip--type">Empathy Map</span>
-            </div>
-            ${t?`
-              <div class="empathy-map__persona">
-                ${e?`<a class="persona-ref" href="#${c(e)}">${p(l.user)} ${c(t)}</a>`:`<span class="persona-ref">${p(l.user)} ${c(t)}</span>`}
-              </div>`:""}
-          </div>
-          <div class="empathy-map__title-wrap">
-            <slot name="title"><h2 class="empathy-map__title">Empathy Map</h2></slot>
-          </div>
-          ${i?'<div class="empathy-map__summary-wrap"><slot name="summary"></slot></div>':""}
-        </header>
-
-        <div class="empathy-map__grid">
-          ${b.map(h=>this._renderQuadrant(h,r)).join("")}
-        </div>
-
-        ${d||s?`
-          <footer class="empathy-map__footer">
-            ${this._renderSummaryRow("goals",p(l.target),"Goals")}
-            ${this._renderSummaryRow("pain-points",p(l.alertTriangle),"Pain Points")}
-          </footer>
-        `:""}
-
-      </article>`,u=()=>{this.shadowRoot&&(this.shadowRoot.innerHTML=m,r&&this._bindEditListeners())};this.shadowRoot?.querySelector("article")?x(this,u,"em-vt"):u(),this.dispatchEvent(new CustomEvent("empathy-map:ready",{bubbles:!0,composed:!0,detail:{title:this.querySelector('[slot="title"]')?.textContent?.trim()||"Empathy Map",persona:t}}))}_renderQuadrant(t,e){let a=f[t],r=this.__quadrants?.[t],n=this._editingQuadrants.has(t),i=r&&r.length?t==="feels"?r.map(s=>this._renderEmotion(s)).join(""):r.map(s=>`<p>${c(s)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">Add ${a.label.toLowerCase()} items\u2026</p></slot>`,d=r?.length?r.join(`
-`):"";return`
-      <section class="quadrant quadrant--${t}"${n?" data-editing":""}>
-        <div class="quadrant__inner">
-          <div class="quadrant__header">
-            <div class="quadrant__icon" aria-hidden="true">${p(a.icon)}</div>
-            <span class="quadrant__label">${a.label}</span>
-            ${e?`<button class="quadrant__edit-btn" data-quadrant="${t}"
-              aria-label="Edit ${a.label}" title="Edit ${a.label}">${p(l.pencil)}</button>`:""}
-          </div>
-          <div class="quadrant__faces">
-            <div class="quadrant__face quadrant__face--front"${n?" inert":""}>
-              <div class="quadrant__content">
-                ${i}
-              </div>
-            </div>
-            ${e?`
-              <div class="quadrant__face quadrant__face--back"${n?"":" inert"}>
-                <textarea class="quadrant__editor" data-quadrant="${t}"
-                  placeholder="One item per line\u2026"
-                  aria-label="Edit ${a.label} items">${c(d)}</textarea>
-                <button class="quadrant__done-btn" data-quadrant="${t}"
-                  aria-label="Done editing ${a.label}">${p(l.check)} Done</button>
-              </div>
-            `:""}
-          </div>
-        </div>
-      </section>`}_renderEmotion(t){let e=t.toLowerCase().trim(),a=q[e];return a?`<span class="emotion-tag" style="--ec:${a.color}"><span role="img" aria-label="${c(t)}">${a.emoji}</span> ${c(t)}</span>`:`<p>${c(t)}</p>`}_renderSummaryRow(t,e,a){let n=(t==="pain-points"?"painPoints":t)==="painPoints"?this.__painPoints:this.__goals,i=n?.length?n.map(d=>`<p>${c(d)}</p>`).join(""):`<slot name="${t}"><p class="placeholder">No ${a.toLowerCase()} specified.</p></slot>`;return`
-      <div class="summary-row">
-        <span class="summary-row__icon" aria-hidden="true">${e}</span>
-        <div class="summary-row__body">
-          <div class="summary-row__label">${a}</div>
-          <div class="summary-row__content">${i}</div>
-        </div>
-      </div>`}_bindEditListeners(){let t=this.shadowRoot;t&&(t.querySelectorAll(".quadrant__edit-btn").forEach(e=>{e.addEventListener("click",()=>{let a=e.dataset.quadrant;a&&this._openEdit(a)})}),t.querySelectorAll(".quadrant__done-btn").forEach(e=>{e.addEventListener("click",()=>{let a=e.dataset.quadrant;a&&this._closeEdit(a)})}),t.querySelectorAll(".quadrant__editor").forEach(e=>{let a=e;a.addEventListener("keydown",r=>{let n=r;if(n.key==="Escape"){n.preventDefault();let i=a.dataset.quadrant;i&&this._closeEdit(i)}})}))}_openEdit(t){this._editingQuadrants.add(t);let e=this.shadowRoot?.querySelector(`.quadrant--${t}`);if(!e)return;e.setAttribute("data-editing","");let a=e.querySelector(".quadrant__face--front"),r=e.querySelector(".quadrant__face--back");a&&a.setAttribute("inert",""),r&&r.removeAttribute("inert");let n=e.querySelector(".quadrant__editor");if(n){let i=this.__quadrants?.[t];if(i?.length)n.value=i.join(`
-`);else{let d=e.querySelector(`slot[name="${t}"]`);if(d){let s=d.assignedElements();if(s.length){let m=[];s.forEach(u=>{let h=u.querySelectorAll("li");h.length?h.forEach(w=>m.push(w.textContent?.trim()??"")):m.push(u.textContent?.trim()??"")}),n.value=m.filter(Boolean).join(`
-`)}}}n.focus()}}_closeEdit(t){let e=this.shadowRoot?.querySelector(`.quadrant--${t}`);if(!e)return;let a=e.querySelector(".quadrant__editor");if(a){let i=a.value.split(`
-`).map(s=>s.trim()).filter(Boolean);this.__quadrants||(this.__quadrants={}),this.__quadrants[t]=i;let d=e.querySelector(".quadrant__content");if(d)if(i.length)d.innerHTML=t==="feels"?i.map(s=>this._renderEmotion(s)).join(""):i.map(s=>`<p>${c(s)}</p>`).join("");else{let s=f[t];d.innerHTML=`<p class="placeholder">Add ${s.label.toLowerCase()} items\u2026</p>`}}this._editingQuadrants.delete(t),e.removeAttribute("data-editing");let r=e.querySelector(".quadrant__face--front"),n=e.querySelector(".quadrant__face--back");r&&r.removeAttribute("inert"),n&&n.setAttribute("inert",""),this.dispatchEvent(new CustomEvent("empathy-map:update",{bubbles:!0,composed:!0,detail:{quadrant:t,items:this.__quadrants?.[t]||[]}}))}};y("empathy-map",v);export{v as EmpathyMap};
-//# sourceMappingURL=empathy-map.js.map