@inkandswitch/patchwork-pkg-base 0.0.101 → 0.0.103

package/packages/account/dist/index.css

@@ -17,7 +17,7 @@
   flex-shrink: 0;
   overflow: hidden;
   border-radius: 9999px;
-  border: 1px solid var(--contact-border);
+  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--contact-border);
   min-width: 2rem;
   min-height: 2rem;
   max-width: 2rem;
@@ -109,14 +109,27 @@
     --account-picker-hover: var(--studio-fill-offset-10, #e5e5e5);
     --account-picker-tooltip-bg: var(--studio-line, black);
     --account-picker-tooltip-fg: var(--studio-fill, white);
+    --account-picker-quick: max(1ms, calc(120ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));
+    --account-picker-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
   }
 }
 .account-picker {
   width: 100%;
   height: 100%;
   overflow: auto;
-  padding: 1.5rem 2rem;
+  padding: 1.5rem clamp(1rem, 6%, 2rem);
   color: var(--account-picker-fg);
+  &,
+  & *,
+  & *::before,
+  & *::after {
+    box-sizing: border-box;
+  }
+  & .auth {
+    width: 100%;
+    max-width: 22rem;
+    margin-inline: auto;
+  }
   & .profile-header {
     position: relative;
     display: flex;
@@ -148,7 +161,7 @@
     width: 56px;
     height: 56px;
     display: block;
-    cursor: pointer;
+    cursor: var(--studio-cursor-pointer, pointer);
     &::after {
       content: "";
       position: absolute;
@@ -156,7 +169,7 @@
       border-radius: 50%;
       background: rgb(0 0 0 / 30%);
       opacity: 0;
-      transition: opacity 100ms;
+      transition: opacity max(1ms, calc(100ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));
     }
     &:hover::after,
     &:focus-visible::after {
@@ -181,14 +194,14 @@
     margin-top: 12px;
     font-size: 1.125rem;
     font-weight: 600;
-    border: 1px solid transparent;
+    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) transparent;
     background: transparent;
     padding: 0.25rem 0.375rem;
     border-radius: 4px;
     height: auto;
     &:focus-visible {
-      outline: 2px solid var(--account-picker-fg);
-      outline-offset: 1px;
+      outline: var(--studio-focus-ring, 2px solid var(--account-picker-fg));
+      outline-offset: var(--studio-focus-ring-offset, 1px);
     }
   }
   & .actions {
@@ -213,6 +226,13 @@
   & .input-row {
     display: flex;
     gap: 0.25rem;
+    & .input {
+      flex: 1;
+      min-width: 0;
+    }
+    & .btn {
+      flex-shrink: 0;
+    }
   }
   & .tabs-list {
     display: grid;
@@ -232,11 +252,16 @@
     padding: 0.25rem 0.5rem;
     font-size: 0.8125rem;
     font-weight: 500;
-    cursor: pointer;
+    cursor: var(--studio-cursor-pointer, pointer);
     border: none;
     background: transparent;
     color: inherit;
-    transition: all 100ms;
+    transition-property:
+      background-color,
+      color,
+      box-shadow;
+    transition-duration: var(--account-picker-quick);
+    transition-timing-function: ease;
     &[data-selected] {
       background: var(--account-picker-bg);
       color: var(--account-picker-fg);
@@ -247,7 +272,7 @@
     margin-top: 0.5rem;
   }
   & .btn {
-    cursor: pointer;
+    cursor: var(--studio-cursor-pointer, pointer);
     display: inline-flex;
     align-items: center;
     border-radius: 4px;
@@ -255,9 +280,17 @@
     font-weight: 500;
     border: none;
     height: 2rem;
+    justify-content: center;
     padding: 0 0.75rem;
-    transition: all 100ms;
+    transition:
+      background-color var(--account-picker-quick) ease,
+      box-shadow var(--account-picker-quick) ease,
+      opacity var(--account-picker-quick) ease,
+      transform var(--account-picker-quick) var(--account-picker-ease-out);
     color: var(--account-picker-fg);
+    &:active {
+      transform: scale(0.97);
+    }
     &:disabled {
       pointer-events: none;
       opacity: 0.3;
@@ -273,10 +306,10 @@
     &.secondary,
     &.ghost {
       background: var(--account-picker-bg);
-      border: 1px solid var(--account-picker-border);
+      border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);
       box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
       &:hover {
-        background: var(--account-picker-hover);
+        background: var(--studio-chrome-hover-fill, var(--account-picker-hover));
         box-shadow: none;
       }
     }
@@ -286,7 +319,7 @@
     height: 2rem;
     width: 100%;
     border-radius: 4px;
-    border: 1px solid var(--account-picker-border);
+    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);
     background: var(--account-picker-bg);
     padding: 0.375rem 0.5rem;
     font-size: 0.8125rem;
@@ -295,11 +328,11 @@
       color: var(--account-picker-muted);
     }
     &:focus-visible {
-      outline: 2px solid var(--account-picker-fg);
-      outline-offset: 1px;
+      outline: var(--studio-focus-ring, 2px solid var(--account-picker-fg));
+      outline-offset: var(--studio-focus-ring-offset, 1px);
     }
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--studio-disabled-opacity, 0.5);
     }
     &.valid {
       border-color: hsl(140 40% 60%);
@@ -311,7 +344,7 @@
     color: var(--account-picker-muted);
   }
   & .tooltip-trigger {
-    cursor: pointer;
+    cursor: var(--studio-cursor-pointer, pointer);
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -322,11 +355,11 @@
     background: transparent;
     color: inherit;
     &:hover {
-      background: var(--account-picker-hover);
+      background: var(--studio-chrome-hover-fill, var(--account-picker-hover));
     }
   }
   & .tooltip-content {
-    z-index: 50;
+    z-index: var(--studio-layer-tooltip, 50);
     border-radius: 4px;
     background: var(--account-picker-tooltip-bg);
     padding: 0.25rem 0.5rem;
@@ -339,7 +372,7 @@
     background: none;
     border: none;
     padding: 0;
-    cursor: pointer;
+    cursor: var(--studio-cursor-pointer, pointer);
     &:hover .presence-nametag {
       opacity: 0.85;
     }
@@ -370,10 +403,10 @@
     left: 0;
     padding: 6px;
     background: var(--account-picker-bg);
-    border: 1px solid var(--account-picker-border);
+    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);
     border-radius: 8px;
     box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
-    z-index: 30;
+    z-index: var(--studio-layer-dropdown, 30);
   }
   & .color-grid {
     display: grid;
@@ -383,7 +416,7 @@
   & .color-swatch {
     width: 24px;
     height: 24px;
-    cursor: pointer;
+    cursor: var(--studio-cursor-pointer, pointer);
     padding: 0;
     display: flex;
     align-items: center;
@@ -400,7 +433,7 @@
   & .color-swatch-custom {
     position: relative;
     overflow: hidden;
-    cursor: pointer;
+    cursor: var(--studio-cursor-pointer, pointer);
     background:
       conic-gradient(
         hsl(0 70% 55%),
@@ -414,7 +447,7 @@
       position: absolute;
       inset: 0;
       opacity: 0;
-      cursor: pointer;
+      cursor: var(--studio-cursor-pointer, pointer);
       width: 100%;
       height: 100%;
       border: none;
@@ -449,14 +482,17 @@
     border: 0;
   }
   & .hint {
+    margin: 0;
     font-size: 0.75rem;
     color: var(--account-picker-muted);
     line-height: 1.4;
+    text-wrap: pretty;
   }
   & .error-text {
     font-size: 0.75rem;
-    color: hsl(0 70% 50%);
+    color: var(--studio-danger-text, var(--studio-danger, hsl(0 70% 50%)));
     min-height: 1rem;
+    overflow-wrap: anywhere;
   }
   & .loading-text {
     color: var(--account-picker-muted);
@@ -478,18 +514,18 @@
   & .modal-backdrop {
     position: fixed;
     inset: 0;
-    background: rgb(0 0 0 / 20%);
-    backdrop-filter: blur(2px);
-    z-index: 100;
+    background: var(--studio-backdrop, rgb(0 0 0 / 20%));
+    backdrop-filter: var(--studio-backdrop-blur, blur(2px));
+    z-index: var(--studio-layer-overlay, 100);
   }
   & .modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 101;
+    z-index: var(--studio-layer-modal, 101);
     background: var(--account-picker-bg);
-    border: 1px solid var(--account-picker-border);
+    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);
     border-radius: 8px;
     padding: 1.25rem;
     display: flex;
@@ -510,10 +546,10 @@
     overflow: hidden;
     border-radius: 6px;
     background: var(--account-picker-border);
-    cursor: grab;
+    cursor: var(--studio-cursor-grab, grab);
     touch-action: none;
     &:active {
-      cursor: grabbing;
+      cursor: var(--studio-cursor-grabbing, grabbing);
     }
   }
   & .cropper-image {

package/packages/account/dist/index.css.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/contact/styles.css", "../src/picker/styles.css"],
-  "sourcesContent": ["@layer package {\n:root,\n:host,\n[theme] {\n  --contact-fg: var(--editor-line, black);\n  --contact-muted-fg: var(--editor-line-offset-50, #999);\n  --contact-border: var(--editor-fill-offset-10, #e5e5e5);\n  --contact-fallback-bg: var(--editor-fill-offset-20, #ccc);\n  --contact-fallback-fg: var(--editor-line-offset-30, #4d4d4d);\n  --contact-family: var(--editor-family-sans, system-ui, sans-serif);\n}\n}\n\n/* Avatar */\n\n.contact-avatar {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 9999px;\n  border: 1px solid var(--contact-border);\n  min-width: 2rem;\n  min-height: 2rem;\n  max-width: 2rem;\n  max-height: 2rem;\n  height: 100%;\n  width: 100%;\n}\n\n.contact-avatar--sm {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.contact-avatar--lg {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 64px;\n  height: 64px;\n}\n\n.contact-avatar--present {\n  box-shadow: 0 0 0 2px var(--contact-presence-color, #888);\n}\n\n.contact-avatar-image {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.contact-avatar-fallback {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: var(--contact-fallback-bg);\n  color: var(--contact-fallback-fg);\n}\n\n/* Contact Viewer */\n\n.contact-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--contact-fg);\n}\n\n.contact-viewer-name {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.contact-viewer-label {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--contact-muted-fg);\n}\n\n/* Cursor token (tool id \"contact-cursor\") \u2014 the contact's name on a pill in\n   their presence color. Hosts overlay it next to their own cursor primitive,\n   so it must not intercept pointer events. The pill background is the user's\n   presence color (not a theme surface), so the label uses white ink, which is\n   legible across the whole USER_COLOR_PALETTE. */\n\n.contact-cursor-token {\n  display: inline-block;\n  max-width: 160px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--contact-cursor-color, #888);\n  color: white;\n  font-family: var(--contact-family, system-ui, sans-serif);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  pointer-events: none;\n}\n", "@layer package {\n:root,\n:host,\n[theme] {\n  --account-picker-fg: var(--studio-line, black);\n  --account-picker-muted: var(--studio-line-offset-50, #999);\n  --account-picker-bg: var(--studio-fill, white);\n  --account-picker-border: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-tooltip-bg: var(--studio-line, black);\n  --account-picker-tooltip-fg: var(--studio-fill, white);\n}\n}\n\n.account-picker {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  padding: 1.5rem 2rem;\n  color: var(--account-picker-fg);\n\n  & .profile-header {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n    margin-bottom: 1.5rem;\n  }\n\n  & .identity {\n    position: relative;\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.125rem;\n  }\n\n  & .presence-slot {\n    width: 0;\n    overflow: visible;\n  }\n\n\n  & .avatar-button {\n    position: relative;\n    background: none;\n    border: none;\n    padding: 0;\n    margin-inline-start: 5px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    overflow: hidden;\n    width: 56px;\n    height: 56px;\n    display: block;\n    cursor: pointer;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: 50%;\n      background: rgb(0 0 0 / 30%);\n      opacity: 0;\n      transition: opacity 100ms;\n    }\n\n    &:hover::after,\n    &:focus-visible::after {\n      opacity: 1;\n    }\n\n    & patchwork-view {\n      display: block;\n      width: 56px;\n      height: 56px;\n      overflow: hidden;\n    }\n\n    & img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n      border: none;\n      outline: none;\n    }\n  }\n\n  & .input.profile-name-input {\n    margin-top: 12px;\n    font-size: 1.125rem;\n    font-weight: 600;\n    border: 1px solid transparent;\n    background: transparent;\n    padding: 0.25rem 0.375rem;\n    border-radius: 4px;\n    height: auto;\n\n    &:focus-visible {\n      outline: 2px solid var(--account-picker-fg);\n      outline-offset: 1px;\n    }\n  }\n\n  & .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.375rem;\n    margin-bottom: 1rem;\n  }\n\n  & .section {\n    margin-bottom: 0.25rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.25rem;\n  }\n\n  & .field-group {\n    display: grid;\n    width: 100%;\n    gap: 0.5rem;\n    padding-block: 0.5rem;\n  }\n\n  & .input-row {\n    display: flex;\n    gap: 0.25rem;\n  }\n\n  & .tabs-list {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: 2rem;\n    align-items: center;\n    border-radius: 6px;\n    background: var(--account-picker-border);\n    padding: 2px;\n    color: var(--account-picker-muted);\n  }\n\n  & .tabs-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    cursor: pointer;\n    border: none;\n    background: transparent;\n    color: inherit;\n    transition: all 100ms;\n\n    &[data-selected] {\n      background: var(--account-picker-bg);\n      color: var(--account-picker-fg);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 6%);\n    }\n  }\n\n  & .tabs-content {\n    margin-top: 0.5rem;\n  }\n\n  & .btn {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    border-radius: 4px;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    border: none;\n    height: 2rem;\n    padding: 0 0.75rem;\n    transition: all 100ms;\n    color: var(--account-picker-fg);\n\n    &:disabled {\n      pointer-events: none;\n      opacity: 0.3;\n    }\n\n    &.default {\n      background: var(--account-picker-fg);\n      color: var(--account-picker-bg);\n\n      &:hover {\n        opacity: 0.85;\n      }\n    }\n\n    &.outline,\n    &.secondary,\n    &.ghost {\n      background: var(--account-picker-bg);\n      border: 1px solid var(--account-picker-border);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 5%);\n\n      &:hover {\n        background: var(--account-picker-hover);\n        box-shadow: none;\n      }\n    }\n  }\n\n  & .input {\n    display: flex;\n    height: 2rem;\n    width: 100%;\n    border-radius: 4px;\n    border: 1px solid var(--account-picker-border);\n    background: var(--account-picker-bg);\n    padding: 0.375rem 0.5rem;\n    font-size: 0.8125rem;\n    color: var(--account-picker-fg);\n\n    &::placeholder {\n      color: var(--account-picker-muted);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--account-picker-fg);\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      opacity: 0.5;\n    }\n\n    &.valid {\n      border-color: hsl(140 40% 60%);\n    }\n  }\n\n  & .label {\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--account-picker-muted);\n  }\n\n  & .tooltip-trigger {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    height: 2rem;\n    width: 2rem;\n    border: none;\n    background: transparent;\n    color: inherit;\n\n    &:hover {\n      background: var(--account-picker-hover);\n    }\n  }\n\n  & .tooltip-content {\n    z-index: 50;\n    border-radius: 4px;\n    background: var(--account-picker-tooltip-bg);\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--account-picker-tooltip-fg);\n  }\n\n  /* ---- Color picker ---- */\n\n  & .presence-cursor {\n    display: inline-flex;\n    align-items: flex-start;\n    background: none;\n    border: none;\n    padding: 0;\n    cursor: pointer;\n\n    &:hover .presence-nametag {\n      opacity: 0.85;\n    }\n  }\n\n  & .presence-cursor-arrow {\n    width: 16px;\n    height: 24px;\n    flex-shrink: 0;\n    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%));\n  }\n\n  & .presence-nametag {\n    margin-top: 12px;\n    margin-inline-start: -3px;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.3;\n    color: white;\n    max-width: 12rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  & .color-popup {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    padding: 6px;\n    background: var(--account-picker-bg);\n    border: 1px solid var(--account-picker-border);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);\n    z-index: 30;\n  }\n\n  & .color-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 24px);\n    gap: 2px;\n  }\n\n  & .color-swatch {\n    width: 24px;\n    height: 24px;\n    cursor: pointer;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 3px;\n\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &.selected {\n      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);\n    }\n  }\n\n  & .color-swatch-custom {\n    position: relative;\n    overflow: hidden;\n    cursor: pointer;\n    background: conic-gradient(\n      hsl(0 70% 55%),\n      hsl(60 70% 55%),\n      hsl(120 70% 55%),\n      hsl(180 70% 55%),\n      hsl(240 70% 55%),\n      hsl(300 70% 55%),\n      hsl(360 70% 55%)\n    );\n\n    & input {\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n      cursor: pointer;\n      width: 100%;\n      height: 100%;\n      border: none;\n      padding: 0;\n    }\n  }\n\n  & .icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  & .icon-inline {\n    width: 14px;\n    height: 14px;\n    margin-inline-end: 0.25rem;\n  }\n\n  & .icon-check {\n    width: 14px;\n    height: 14px;\n    margin: auto;\n    color: white;\n    filter: drop-shadow(0 0.5px 1px rgb(0 0 0 / 25%));\n  }\n\n  & .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  & .hint {\n    font-size: 0.75rem;\n    color: var(--account-picker-muted);\n    line-height: 1.4;\n  }\n\n  & .error-text {\n    font-size: 0.75rem;\n    color: hsl(0 70% 50%);\n    min-height: 1rem;\n  }\n\n  & .loading-text {\n    color: var(--account-picker-muted);\n  }\n\n  & .btn.sign-out {\n    color: var(--account-picker-muted);\n\n    &:hover {\n      color: white;\n      background: hsl(0 65% 52%);\n    }\n  }\n\n  & .btn.sign-out-confirm {\n    background: hsl(0 65% 52%);\n    color: white;\n\n    &:hover {\n      opacity: 0.9;\n    }\n  }\n\n  & .modal-backdrop {\n    position: fixed;\n    inset: 0;\n    background: rgb(0 0 0 / 20%);\n    backdrop-filter: blur(2px);\n    z-index: 100;\n  }\n\n  & .modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 101;\n    background: var(--account-picker-bg);\n    border: 1px solid var(--account-picker-border);\n    border-radius: 8px;\n    padding: 1.25rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    width: 20rem;\n    max-width: 90vw;\n    box-shadow: 0 8px 30px rgb(0 0 0 / 10%);\n  }\n\n  & .cropper-modal {\n    width: auto;\n    align-items: center;\n  }\n\n  & .cropper-viewport {\n    position: relative;\n    width: 260px;\n    height: 260px;\n    overflow: hidden;\n    border-radius: 6px;\n    background: var(--account-picker-border);\n    cursor: grab;\n    touch-action: none;\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  & .cropper-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform-origin: 0 0;\n    max-width: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  & .cropper-mask {\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    box-shadow: 0 0 0 9999px rgb(0 0 0 / 45%);\n    pointer-events: none;\n  }\n\n  & .cropper-zoom {\n    width: 260px;\n    accent-color: var(--account-picker-fg);\n  }\n\n  & .modal-title {\n    font-size: 0.875rem;\n    font-weight: 600;\n    margin: 0;\n  }\n\n  & .modal-actions {\n    display: flex;\n    gap: 0.375rem;\n    justify-content: flex-end;\n    margin-top: 0.25rem;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["@layer package {\n:root,\n:host,\n[theme] {\n  --contact-fg: var(--editor-line, black);\n  --contact-muted-fg: var(--editor-line-offset-50, #999);\n  --contact-border: var(--editor-fill-offset-10, #e5e5e5);\n  --contact-fallback-bg: var(--editor-fill-offset-20, #ccc);\n  --contact-fallback-fg: var(--editor-line-offset-30, #4d4d4d);\n  --contact-family: var(--editor-family-sans, system-ui, sans-serif);\n}\n}\n\n/* Avatar */\n\n.contact-avatar {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  overflow: hidden;\n  border-radius: 9999px;\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--contact-border);\n  min-width: 2rem;\n  min-height: 2rem;\n  max-width: 2rem;\n  max-height: 2rem;\n  height: 100%;\n  width: 100%;\n}\n\n.contact-avatar--sm {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n\n.contact-avatar--lg {\n  min-width: initial;\n  min-height: initial;\n  max-width: initial;\n  max-height: initial;\n  width: 64px;\n  height: 64px;\n}\n\n.contact-avatar--present {\n  box-shadow: 0 0 0 2px var(--contact-presence-color, #888);\n}\n\n.contact-avatar-image {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.contact-avatar-fallback {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: var(--contact-fallback-bg);\n  color: var(--contact-fallback-fg);\n}\n\n/* Contact Viewer */\n\n.contact-viewer {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--contact-fg);\n}\n\n.contact-viewer-name {\n  margin: 0;\n  font-size: 1.25rem;\n  font-weight: 600;\n}\n\n.contact-viewer-label {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--contact-muted-fg);\n}\n\n/* Cursor token (tool id \"contact-cursor\") \u2014 the contact's name on a pill in\n   their presence color. Hosts overlay it next to their own cursor primitive,\n   so it must not intercept pointer events. The pill background is the user's\n   presence color (not a theme surface), so the label uses white ink, which is\n   legible across the whole USER_COLOR_PALETTE. */\n\n.contact-cursor-token {\n  display: inline-block;\n  max-width: 160px;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background: var(--contact-cursor-color, #888);\n  color: white;\n  font-family: var(--contact-family, system-ui, sans-serif);\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1.3;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  pointer-events: none;\n}\n", "@layer package {\n:root,\n:host,\n[theme] {\n  --account-picker-fg: var(--studio-line, black);\n  --account-picker-muted: var(--studio-line-offset-50, #999);\n  --account-picker-bg: var(--studio-fill, white);\n  --account-picker-border: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-picker-tooltip-bg: var(--studio-line, black);\n  --account-picker-tooltip-fg: var(--studio-fill, white);\n  --account-picker-quick: max(1ms, calc(120ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));\n  --account-picker-ease-out: cubic-bezier(0.23, 1, 0.32, 1);\n}\n}\n\n.account-picker {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  /* narrow containers get a narrower gutter */\n  padding: 1.5rem clamp(1rem, 6%, 2rem);\n  color: var(--account-picker-fg);\n\n  /* width: 100% plus padding must stay inside the container */\n  &,\n  & *,\n  & *::before,\n  & *::after {\n    box-sizing: border-box;\n  }\n\n  /* sign up / log in: one readable column, centred when there's room */\n  & .auth {\n    width: 100%;\n    max-width: 22rem;\n    margin-inline: auto;\n  }\n\n  & .profile-header {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: 0.75rem;\n    margin-bottom: 1.5rem;\n  }\n\n  & .identity {\n    position: relative;\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.125rem;\n  }\n\n  & .presence-slot {\n    width: 0;\n    overflow: visible;\n  }\n\n\n  & .avatar-button {\n    position: relative;\n    background: none;\n    border: none;\n    padding: 0;\n    margin-inline-start: 5px;\n    border-radius: 50%;\n    flex-shrink: 0;\n    overflow: hidden;\n    width: 56px;\n    height: 56px;\n    display: block;\n    cursor: var(--studio-cursor-pointer, pointer);\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      inset: 0;\n      border-radius: 50%;\n      background: rgb(0 0 0 / 30%);\n      opacity: 0;\n      transition: opacity max(1ms, calc(100ms * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));\n    }\n\n    &:hover::after,\n    &:focus-visible::after {\n      opacity: 1;\n    }\n\n    & patchwork-view {\n      display: block;\n      width: 56px;\n      height: 56px;\n      overflow: hidden;\n    }\n\n    & img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n      border: none;\n      outline: none;\n    }\n  }\n\n  & .input.profile-name-input {\n    margin-top: 12px;\n    font-size: 1.125rem;\n    font-weight: 600;\n    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) transparent;\n    background: transparent;\n    padding: 0.25rem 0.375rem;\n    border-radius: 4px;\n    height: auto;\n\n    &:focus-visible {\n      outline: var(--studio-focus-ring, 2px solid var(--account-picker-fg));\n      outline-offset: var(--studio-focus-ring-offset, 1px);\n    }\n  }\n\n  & .actions {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.375rem;\n    margin-bottom: 1rem;\n  }\n\n  & .section {\n    margin-bottom: 0.25rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 0.25rem;\n  }\n\n  & .field-group {\n    display: grid;\n    width: 100%;\n    gap: 0.5rem;\n    padding-block: 0.5rem;\n  }\n\n  & .input-row {\n    display: flex;\n    gap: 0.25rem;\n\n    /* inputs have an intrinsic width; let them shrink beside the eye button */\n    & .input {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & .btn {\n      flex-shrink: 0;\n    }\n  }\n\n  & .tabs-list {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    height: 2rem;\n    align-items: center;\n    border-radius: 6px;\n    background: var(--account-picker-border);\n    padding: 2px;\n    color: var(--account-picker-muted);\n  }\n\n  & .tabs-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    padding: 0.25rem 0.5rem;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    cursor: var(--studio-cursor-pointer, pointer);\n    border: none;\n    background: transparent;\n    color: inherit;\n    transition-property: background-color, color, box-shadow;\n    transition-duration: var(--account-picker-quick);\n    transition-timing-function: ease;\n\n    &[data-selected] {\n      background: var(--account-picker-bg);\n      color: var(--account-picker-fg);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 6%);\n    }\n  }\n\n  & .tabs-content {\n    margin-top: 0.5rem;\n  }\n\n  & .btn {\n    cursor: var(--studio-cursor-pointer, pointer);\n    display: inline-flex;\n    align-items: center;\n    border-radius: 4px;\n    font-size: 0.8125rem;\n    font-weight: 500;\n    border: none;\n    height: 2rem;\n    justify-content: center;\n    padding: 0 0.75rem;\n    transition:\n      background-color var(--account-picker-quick) ease,\n      box-shadow var(--account-picker-quick) ease,\n      opacity var(--account-picker-quick) ease,\n      transform var(--account-picker-quick) var(--account-picker-ease-out);\n    color: var(--account-picker-fg);\n\n    /* a small press, so the button feels heard */\n    &:active {\n      transform: scale(0.97);\n    }\n\n    &:disabled {\n      pointer-events: none;\n      opacity: 0.3;\n    }\n\n    &.default {\n      background: var(--account-picker-fg);\n      color: var(--account-picker-bg);\n\n      &:hover {\n        opacity: 0.85;\n      }\n    }\n\n    &.outline,\n    &.secondary,\n    &.ghost {\n      background: var(--account-picker-bg);\n      border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);\n      box-shadow: 0 1px 2px rgb(0 0 0 / 5%);\n\n      &:hover {\n        background: var(--studio-chrome-hover-fill, var(--account-picker-hover));\n        box-shadow: none;\n      }\n    }\n  }\n\n  & .input {\n    display: flex;\n    height: 2rem;\n    width: 100%;\n    border-radius: 4px;\n    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);\n    background: var(--account-picker-bg);\n    padding: 0.375rem 0.5rem;\n    font-size: 0.8125rem;\n    color: var(--account-picker-fg);\n\n    &::placeholder {\n      color: var(--account-picker-muted);\n    }\n\n    &:focus-visible {\n      outline: var(--studio-focus-ring, 2px solid var(--account-picker-fg));\n      outline-offset: var(--studio-focus-ring-offset, 1px);\n    }\n\n    &:disabled {\n      opacity: var(--studio-disabled-opacity, 0.5);\n    }\n\n    &.valid {\n      border-color: hsl(140 40% 60%);\n    }\n  }\n\n  & .label {\n    font-size: 0.75rem;\n    font-weight: 500;\n    color: var(--account-picker-muted);\n  }\n\n  & .tooltip-trigger {\n    cursor: var(--studio-cursor-pointer, pointer);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 4px;\n    height: 2rem;\n    width: 2rem;\n    border: none;\n    background: transparent;\n    color: inherit;\n\n    &:hover {\n      background: var(--studio-chrome-hover-fill, var(--account-picker-hover));\n    }\n  }\n\n  & .tooltip-content {\n    z-index: var(--studio-layer-tooltip, 50);\n    border-radius: 4px;\n    background: var(--account-picker-tooltip-bg);\n    padding: 0.25rem 0.5rem;\n    font-size: 0.75rem;\n    color: var(--account-picker-tooltip-fg);\n  }\n\n  /* ---- Color picker ---- */\n\n  & .presence-cursor {\n    display: inline-flex;\n    align-items: flex-start;\n    background: none;\n    border: none;\n    padding: 0;\n    cursor: var(--studio-cursor-pointer, pointer);\n\n    &:hover .presence-nametag {\n      opacity: 0.85;\n    }\n  }\n\n  & .presence-cursor-arrow {\n    width: 16px;\n    height: 24px;\n    flex-shrink: 0;\n    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 25%));\n  }\n\n  & .presence-nametag {\n    margin-top: 12px;\n    margin-inline-start: -3px;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.75rem;\n    font-weight: 500;\n    line-height: 1.3;\n    color: white;\n    max-width: 12rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  & .color-popup {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 0;\n    padding: 6px;\n    background: var(--account-picker-bg);\n    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);\n    z-index: var(--studio-layer-dropdown, 30);\n  }\n\n  & .color-grid {\n    display: grid;\n    grid-template-columns: repeat(7, 24px);\n    gap: 2px;\n  }\n\n  & .color-swatch {\n    width: 24px;\n    height: 24px;\n    cursor: var(--studio-cursor-pointer, pointer);\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 3px;\n\n    &:hover {\n      opacity: 0.75;\n    }\n\n    &.selected {\n      box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);\n    }\n  }\n\n  & .color-swatch-custom {\n    position: relative;\n    overflow: hidden;\n    cursor: var(--studio-cursor-pointer, pointer);\n    background: conic-gradient(\n      hsl(0 70% 55%),\n      hsl(60 70% 55%),\n      hsl(120 70% 55%),\n      hsl(180 70% 55%),\n      hsl(240 70% 55%),\n      hsl(300 70% 55%),\n      hsl(360 70% 55%)\n    );\n\n    & input {\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n      cursor: var(--studio-cursor-pointer, pointer);\n      width: 100%;\n      height: 100%;\n      border: none;\n      padding: 0;\n    }\n  }\n\n  & .icon {\n    width: 14px;\n    height: 14px;\n  }\n\n  & .icon-inline {\n    width: 14px;\n    height: 14px;\n    margin-inline-end: 0.25rem;\n  }\n\n  & .icon-check {\n    width: 14px;\n    height: 14px;\n    margin: auto;\n    color: white;\n    filter: drop-shadow(0 0.5px 1px rgb(0 0 0 / 25%));\n  }\n\n  & .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  & .hint {\n    margin: 0;\n    font-size: 0.75rem;\n    color: var(--account-picker-muted);\n    line-height: 1.4;\n    text-wrap: pretty;\n  }\n\n  & .error-text {\n    font-size: 0.75rem;\n    color: var(--studio-danger-text, var(--studio-danger, hsl(0 70% 50%)));\n    min-height: 1rem;\n    overflow-wrap: anywhere;\n  }\n\n  & .loading-text {\n    color: var(--account-picker-muted);\n  }\n\n  & .btn.sign-out {\n    color: var(--account-picker-muted);\n\n    &:hover {\n      color: white;\n      background: hsl(0 65% 52%);\n    }\n  }\n\n  & .btn.sign-out-confirm {\n    background: hsl(0 65% 52%);\n    color: white;\n\n    &:hover {\n      opacity: 0.9;\n    }\n  }\n\n  & .modal-backdrop {\n    position: fixed;\n    inset: 0;\n    background: var(--studio-backdrop, rgb(0 0 0 / 20%));\n    backdrop-filter: var(--studio-backdrop-blur, blur(2px));\n    z-index: var(--studio-layer-overlay, 100);\n  }\n\n  & .modal {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: var(--studio-layer-modal, 101);\n    background: var(--account-picker-bg);\n    border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-picker-border);\n    border-radius: 8px;\n    padding: 1.25rem;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    width: 20rem;\n    max-width: 90vw;\n    box-shadow: 0 8px 30px rgb(0 0 0 / 10%);\n  }\n\n  & .cropper-modal {\n    width: auto;\n    align-items: center;\n  }\n\n  & .cropper-viewport {\n    position: relative;\n    width: 260px;\n    height: 260px;\n    overflow: hidden;\n    border-radius: 6px;\n    background: var(--account-picker-border);\n    cursor: var(--studio-cursor-grab, grab);\n    touch-action: none;\n\n    &:active {\n      cursor: var(--studio-cursor-grabbing, grabbing);\n    }\n  }\n\n  & .cropper-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform-origin: 0 0;\n    max-width: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n\n  & .cropper-mask {\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    box-shadow: 0 0 0 9999px rgb(0 0 0 / 45%);\n    pointer-events: none;\n  }\n\n  & .cropper-zoom {\n    width: 260px;\n    accent-color: var(--account-picker-fg);\n  }\n\n  & .modal-title {\n    font-size: 0.875rem;\n    font-weight: 600;\n    margin: 0;\n  }\n\n  & .modal-actions {\n    display: flex;\n    gap: 0.375rem;\n    justify-content: flex-end;\n    margin-top: 0.25rem;\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/packages/account/dist/index.js

@@ -63,7 +63,7 @@ var plugins = [
     name: "Account Picker",
     supportedDatatypes: ["account"],
     async load() {
-      const { AccountPickerTool } = await import("./AccountPicker-A2PAS5CG.js");
+      const { AccountPickerTool } = await import("./AccountPicker-DCX77HQI.js");
       const { styled } = await import("./styles-KCFZAQMN.js");
       return styled(AccountPickerTool);
     }

package/packages/account-history/dist/assets/HistoryRecorder-_3PrVW6n.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  /* Colors derived from studio variables */\n  --account-history-primary: var(--studio-secondary, #33ccf8);\n  /* invert ink for text/icons sitting ON the primary (accent) surface. must be\n     the accent's own luminance-adaptive line, NOT --account-history-bg (the page\n     fill), which is only legible when the accent happens to be dark. */\n  --account-history-primary-line: var(--studio-secondary-line, var(--studio-fill, white));\n  --account-history-bg: var(--studio-fill, white);\n  --account-history-text: var(--studio-line, black);\n  --account-history-text-secondary: var(--studio-line-offset-40, #666);\n  --account-history-text-tertiary: var(--studio-line-offset-50, #999);\n  --account-history-border: var(--studio-fill-offset-20, #ccc);\n  --account-history-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-history-family: var(--studio-family-sans, system-ui, sans-serif);\n  --account-history-family-code: var(--studio-family-code, ui-monospace, monospace);\n  --account-history-radius: 4px;\n\n  /* Danger/delete colors */\n  --account-history-danger: var(--studio-danger, #ff6a90);\n  --account-history-danger-bg: color-mix(in oklch, var(--studio-danger, #ff6a90), transparent 90%);\n\n  /* Fluid spacing scale - scales smoothly from mobile to desktop */\n  --account-history-space-2xs: 0.25rem;                        /* 4px - fixed minimal spacing */\n  --account-history-space-xs: clamp(0.375rem, 0.5vw, 0.5rem);  /* 6px → 8px */\n  --account-history-space-sm: clamp(0.5rem, 1vw, 0.75rem);     /* 8px → 12px */\n  --account-history-space-md: clamp(0.75rem, 2vw, 1rem);       /* 12px → 16px */\n  --account-history-space-lg: clamp(1rem, 2.5vw, 1.5rem);      /* 16px → 24px */\n  --account-history-space-xl: 2rem;                            /* 32px - fixed large spacing */\n  --account-history-space-2xl: 4rem;                           /* 64px - fixed extra large spacing */\n\n  /* Fluid typography scale - scales smoothly across viewports */\n  --account-history-text-2xs: clamp(0.625rem, 0.5vw + 0.5rem, 0.6875rem);    /* 10px → 11px */\n  --account-history-text-xs: clamp(0.6875rem, 0.5vw + 0.625rem, 0.8125rem);  /* 11px → 13px */\n  --account-history-text-sm: clamp(0.75rem, 0.5vw + 0.6875rem, 0.875rem);    /* 12px → 14px */\n  --account-history-text-base: clamp(0.8125rem, 0.5vw + 0.75rem, 0.9375rem); /* 13px → 15px */\n  --account-history-text-md: clamp(0.875rem, 0.5vw + 0.8125rem, 1rem);       /* 14px → 16px */\n  --account-history-text-lg: clamp(1rem, 1vw + 0.875rem, 1.125rem);          /* 16px → 18px */\n  --account-history-text-xl: clamp(1.125rem, 1.5vw + 0.9375rem, 1.25rem);    /* 18px → 20px */\n  --account-history-text-2xl: clamp(1.25rem, 2vw + 1rem, 1.375rem);          /* 20px → 22px */\n\n  /* Icon sizes */\n  --account-history-icon-xs: 0.875rem;   /* 14px */\n  --account-history-icon-sm: 1rem;       /* 16px */\n  --account-history-icon-md: 1.125rem;   /* 18px */\n  --account-history-icon-lg: 1.25rem;    /* 20px */\n  --account-history-icon-xl: 1.5rem;     /* 24px */\n  --account-history-icon-2xl: 1.75rem;   /* 28px */\n\n  /* Button/touch target sizes */\n  --account-history-touch-sm: 1.75rem;   /* 28px */\n  --account-history-touch-md: 2rem;      /* 32px */\n  --account-history-touch-lg: 2.75rem;   /* 44px - WCAG minimum touch target */\n\n  /* Transition timing */\n  --account-history-transition-fast: 0.15s;\n  --account-history-transition-base: 0.2s;\n  --easing: ease;\n\n  /* Z-index scale */\n  --account-history-z-sticky-date: 5;\n  --account-history-z-sticky-header: 10;\n}\n}\n\n\n/* History Recorder (toolbar button) */\n.account-history-toolbar-button {\n  padding: 0.5rem;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text);\n  transition: opacity 0.2s ease;\n}\n\n.account-history-toolbar-button:hover {\n  opacity: 0.7;\n}\n\n/* History Viewer */\n.account-history-viewer {\n  padding: var(--account-history-space-md);\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  font-family: var(--account-history-family);\n  color: var(--account-history-text);\n  background: var(--account-history-bg);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.account-history-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: var(--account-history-space-md);\n  padding-bottom: var(--account-history-space-md);\n  border-bottom: 1px solid var(--account-history-border);\n  flex-shrink: 0;\n  gap: var(--account-history-space-md);\n  flex-wrap: wrap;\n  background: var(--account-history-bg);\n  position: sticky;\n  top: 0;\n  z-index: var(--account-history-z-sticky-header);\n  margin-left: calc(-1 * var(--account-history-space-md));\n  margin-right: calc(-1 * var(--account-history-space-md));\n  margin-top: calc(-1 * var(--account-history-space-md));\n  padding-left: var(--account-history-space-md);\n  padding-right: var(--account-history-space-md);\n  padding-top: var(--account-history-space-md);\n}\n\n.account-history-header-controls {\n  display: flex;\n  gap: var(--account-history-space-xs);\n  align-items: center;\n}\n\n.account-history-group-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n}\n\n.account-history-search {\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.account-history-search-icon {\n  position: absolute;\n  left: var(--account-history-space-sm);\n  width: var(--account-history-icon-md);\n  height: var(--account-history-icon-md);\n  color: var(--account-history-text-tertiary);\n  pointer-events: none;\n}\n\n.account-history-search-input {\n  width: 100%;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm) var(--account-history-space-xs) 2.375rem;\n  border: 1px solid var(--account-history-border);\n  border-radius: var(--account-history-radius);\n  background: var(--account-history-bg);\n  color: var(--account-history-text);\n  font-size: var(--account-history-text-md);\n  font-family: inherit;\n  transition: border-color var(--account-history-transition-fast) var(--easing);\n}\n\n.account-history-search-input::placeholder {\n  color: var(--account-history-text-tertiary);\n}\n\n.account-history-search-input:focus {\n  outline: none;\n  border-color: var(--account-history-primary);\n}\n\n.account-history-sort-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n  margin-left: var(--account-history-space-md);\n}\n\n.account-history-sort-button {\n  padding: 0.375rem var(--account-history-space-sm);\n  border-radius: var(--account-history-radius);\n  border: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: pointer;\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-sort-button:hover {\n  background: var(--account-history-hover);\n}\n\n.account-history-sort-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-title {\n  margin: 0;\n  font-size: var(--account-history-text-2xl);\n  font-weight: 600;\n  color: var(--account-history-text);\n}\n\n.account-history-toggle-button {\n  padding: var(--account-history-space-xs) var(--account-history-space-md);\n  border-radius: var(--account-history-radius);\n  border: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: pointer;\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-toggle-button:hover {\n  background: var(--account-history-hover);\n}\n\n.account-history-toggle-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n/* Scrollable Content Area */\n.account-history-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n/* History Groups - Flat Design */\n\n.account-history-group-header {\n  margin-bottom: var(--account-history-space-xs);\n  padding: var(--account-history-space-xs) 0;\n}\n\n/* Sticky date headers in date grouping mode */\n.account-history-group-header:not(.account-history-group-header-clickable) {\n  position: sticky;\n  top: 0;\n  background: var(--account-history-bg);\n  z-index: var(--account-history-z-sticky-date);\n  padding-top: var(--account-history-space-sm);\n  margin-top: calc(-1 * var(--account-history-space-2xs));\n}\n\n.account-history-group-header-clickable {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  border-radius: var(--account-history-radius);\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n}\n\n.account-history-group-header-clickable:hover {\n  background: var(--account-history-hover);\n}\n\n.account-history-group-header-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.account-history-group-toggle {\n  width: var(--account-history-touch-sm);\n  height: var(--account-history-touch-sm);\n  min-width: var(--account-history-touch-sm);\n  border: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: pointer;\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-secondary);\n  font-size: var(--account-history-text-xl);\n  font-weight: 300;\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  line-height: 1;\n}\n\n.account-history-group-toggle:hover {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-group-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 600;\n  margin: 0;\n  color: var(--account-history-text-secondary);\n}\n\n.account-history-group-meta {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-tertiary);\n  margin: var(--account-history-space-2xs) 0 0 0;\n}\n\n.account-history-entries {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 1rem;\n}\n\n/* History Entry - Flat List Design */\n.account-history-entry {\n  display: grid;\n  /* TODO: icon */\n  /* grid-template-columns: auto 28px 1fr 32px; */\n  grid-template-columns: auto 1fr var(--account-history-touch-md);\n  gap: var(--account-history-space-sm);\n  align-items: center;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n  border-bottom: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  min-height: var(--account-history-touch-lg);\n}\n\n.account-history-entry:hover {\n  background: var(--account-history-hover);\n}\n\n/* Time Column */\n.account-history-entry-time {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Content Column - Clickable */\n.account-history-entry-content {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--account-history-space-xs);\n  min-width: 0;\n  cursor: pointer;\n}\n\n.account-history-entry-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 500;\n  color: var(--account-history-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.account-history-entry-content:hover .account-history-entry-title {\n  color: var(--account-history-primary);\n}\n\n.account-history-entry-tool {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* URL - Secondary Appearance (inline with title/tool) */\n.account-history-entry-url {\n  font-size: var(--account-history-text-xs);\n  color: var(--account-history-text-tertiary);\n  opacity: 0.6;\n  font-family: var(--account-history-family-code);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n/* Actions Column */\n.account-history-entry-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.account-history-entry-delete {\n  width: var(--account-history-icon-xl);\n  height: var(--account-history-icon-xl);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-tertiary);\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  opacity: 0;\n}\n\n.account-history-entry:hover .account-history-entry-delete {\n  opacity: 1;\n}\n\n.account-history-entry-delete:hover {\n  background: var(--account-history-danger-bg);\n  color: var(--account-history-danger);\n}\n\n.account-history-entry-delete svg {\n  width: var(--account-history-icon-sm);\n  height: var(--account-history-icon-sm);\n}\n\n/* Empty State */\n.account-history-empty {\n  padding: var(--account-history-space-2xl) var(--account-history-space-lg);\n  text-align: center;\n  color: var(--account-history-text-tertiary);\n  font-size: var(--account-history-text-md);\n}\n\n/* Responsive Design */\n\n/* Mobile (<640px) */\n@media (max-width: 640px) {\n  .account-history-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .account-history-header-controls {\n    width: 100%;\n    flex-wrap: wrap;\n  }\n\n  .account-history-toggle-button {\n    flex: 1;\n  }\n\n  .account-history-sort-label {\n    margin-left: 0;\n    margin-top: var(--account-history-space-xs);\n    width: 100%;\n  }\n\n  .account-history-sort-button {\n    flex: 1;\n  }\n\n  .account-history-group {\n    margin-bottom: var(--account-history-space-lg);\n  }\n\n  .account-history-entry {\n    grid-template-columns: 1fr var(--account-history-touch-sm);\n    grid-template-rows: auto auto;\n    gap: var(--account-history-space-2xs) var(--account-history-space-xs);\n    min-height: auto;\n  }\n\n  .account-history-entry-time {\n    grid-column: 1 / 2;\n    grid-row: 1 / 2;\n  }\n\n  .account-history-entry-content {\n    grid-column: 1 / 2;\n    grid-row: 2 / 3;\n  }\n\n  .account-history-entry-url {\n    display: none;\n  }\n\n  .account-history-entry-actions {\n    grid-column: 2 / 3;\n    grid-row: 1 / 3;\n  }\n\n  .account-history-entry-delete {\n    opacity: 1;\n  }\n\n}"));
+      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  /* Colors derived from studio variables */\n  --account-history-primary: var(--studio-secondary, #33ccf8);\n  /* invert ink for text/icons sitting ON the primary (accent) surface. must be\n     the accent's own luminance-adaptive line, NOT --account-history-bg (the page\n     fill), which is only legible when the accent happens to be dark. */\n  --account-history-primary-line: var(--studio-secondary-line, var(--studio-fill, white));\n  --account-history-bg: var(--studio-fill, white);\n  --account-history-text: var(--studio-line, black);\n  --account-history-text-secondary: var(--studio-line-offset-40, #666);\n  --account-history-text-tertiary: var(--studio-line-offset-50, #999);\n  --account-history-border: var(--studio-fill-offset-20, #ccc);\n  --account-history-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-history-family: var(--studio-family-sans, system-ui, sans-serif);\n  --account-history-family-code: var(--studio-family-code, ui-monospace, monospace);\n  --account-history-radius: 4px;\n\n  /* Danger/delete colors */\n  --account-history-danger: var(--studio-danger, #ff6a90);\n  --account-history-danger-bg: color-mix(in oklch, var(--studio-danger, #ff6a90), transparent 90%);\n\n  /* Fluid spacing scale - scales smoothly from mobile to desktop */\n  --account-history-space-2xs: 0.25rem;                        /* 4px - fixed minimal spacing */\n  --account-history-space-xs: clamp(0.375rem, 0.5vw, 0.5rem);  /* 6px → 8px */\n  --account-history-space-sm: clamp(0.5rem, 1vw, 0.75rem);     /* 8px → 12px */\n  --account-history-space-md: clamp(0.75rem, 2vw, 1rem);       /* 12px → 16px */\n  --account-history-space-lg: clamp(1rem, 2.5vw, 1.5rem);      /* 16px → 24px */\n  --account-history-space-xl: 2rem;                            /* 32px - fixed large spacing */\n  --account-history-space-2xl: 4rem;                           /* 64px - fixed extra large spacing */\n\n  /* Fluid typography scale - scales smoothly across viewports */\n  --account-history-text-2xs: clamp(0.625rem, 0.5vw + 0.5rem, 0.6875rem);    /* 10px → 11px */\n  --account-history-text-xs: clamp(0.6875rem, 0.5vw + 0.625rem, 0.8125rem);  /* 11px → 13px */\n  --account-history-text-sm: clamp(0.75rem, 0.5vw + 0.6875rem, 0.875rem);    /* 12px → 14px */\n  --account-history-text-base: clamp(0.8125rem, 0.5vw + 0.75rem, 0.9375rem); /* 13px → 15px */\n  --account-history-text-md: clamp(0.875rem, 0.5vw + 0.8125rem, 1rem);       /* 14px → 16px */\n  --account-history-text-lg: clamp(1rem, 1vw + 0.875rem, 1.125rem);          /* 16px → 18px */\n  --account-history-text-xl: clamp(1.125rem, 1.5vw + 0.9375rem, 1.25rem);    /* 18px → 20px */\n  --account-history-text-2xl: clamp(1.25rem, 2vw + 1rem, 1.375rem);          /* 20px → 22px */\n\n  /* Icon sizes */\n  --account-history-icon-xs: 0.875rem;   /* 14px */\n  --account-history-icon-sm: 1rem;       /* 16px */\n  --account-history-icon-md: 1.125rem;   /* 18px */\n  --account-history-icon-lg: 1.25rem;    /* 20px */\n  --account-history-icon-xl: 1.5rem;     /* 24px */\n  --account-history-icon-2xl: 1.75rem;   /* 28px */\n\n  /* Button/touch target sizes */\n  --account-history-touch-sm: 1.75rem;   /* 28px */\n  --account-history-touch-md: 2rem;      /* 32px */\n  --account-history-touch-lg: 2.75rem;   /* 44px - WCAG minimum touch target */\n\n  /* Transition timing */\n  --account-history-transition-fast: max(1ms, calc(0.15s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));\n  --account-history-transition-base: max(1ms, calc(0.2s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));\n  --easing: ease;\n\n  /* Z-index scale */\n  --account-history-z-sticky-date: 5;\n  --account-history-z-sticky-header: 10;\n}\n}\n\n\n/* History Recorder (toolbar button) */\n.account-history-toolbar-button {\n  padding: 0.5rem;\n  cursor: var(--studio-cursor-pointer, pointer);\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text);\n  transition: opacity max(1ms, calc(0.2s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) ease;\n}\n\n.account-history-toolbar-button:hover {\n  opacity: 0.7;\n}\n\n/* History Viewer */\n.account-history-viewer {\n  padding: var(--account-history-space-md);\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  font-family: var(--account-history-family);\n  color: var(--account-history-text);\n  background: var(--account-history-bg);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.account-history-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: var(--account-history-space-md);\n  padding-bottom: var(--account-history-space-md);\n  border-bottom: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  flex-shrink: 0;\n  gap: var(--account-history-space-md);\n  flex-wrap: wrap;\n  background: var(--account-history-bg);\n  position: sticky;\n  top: 0;\n  z-index: var(--account-history-z-sticky-header);\n  margin-left: calc(-1 * var(--account-history-space-md));\n  margin-right: calc(-1 * var(--account-history-space-md));\n  margin-top: calc(-1 * var(--account-history-space-md));\n  padding-left: var(--account-history-space-md);\n  padding-right: var(--account-history-space-md);\n  padding-top: var(--account-history-space-md);\n}\n\n.account-history-header-controls {\n  display: flex;\n  gap: var(--account-history-space-xs);\n  align-items: center;\n}\n\n.account-history-group-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n}\n\n.account-history-search {\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.account-history-search-icon {\n  position: absolute;\n  left: var(--account-history-space-sm);\n  width: var(--account-history-icon-md);\n  height: var(--account-history-icon-md);\n  color: var(--account-history-text-tertiary);\n  pointer-events: none;\n}\n\n.account-history-search-input {\n  width: 100%;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm) var(--account-history-space-xs) 2.375rem;\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  border-radius: var(--account-history-radius);\n  background: var(--account-history-bg);\n  color: var(--account-history-text);\n  font-size: var(--account-history-text-md);\n  font-family: inherit;\n  transition: border-color var(--account-history-transition-fast) var(--easing);\n}\n\n.account-history-search-input::placeholder {\n  color: var(--account-history-text-tertiary);\n}\n\n.account-history-search-input:focus {\n  outline: none;\n  border-color: var(--account-history-primary);\n}\n\n.account-history-sort-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n  margin-left: var(--account-history-space-md);\n}\n\n.account-history-sort-button {\n  padding: 0.375rem var(--account-history-space-sm);\n  border-radius: var(--account-history-radius);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: var(--studio-cursor-pointer, pointer);\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-sort-button:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n.account-history-sort-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-title {\n  margin: 0;\n  font-size: var(--account-history-text-2xl);\n  font-weight: 600;\n  color: var(--account-history-text);\n}\n\n.account-history-toggle-button {\n  padding: var(--account-history-space-xs) var(--account-history-space-md);\n  border-radius: var(--account-history-radius);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: var(--studio-cursor-pointer, pointer);\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-toggle-button:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n.account-history-toggle-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n/* Scrollable Content Area */\n.account-history-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n/* History Groups - Flat Design */\n\n.account-history-group-header {\n  margin-bottom: var(--account-history-space-xs);\n  padding: var(--account-history-space-xs) 0;\n}\n\n/* Sticky date headers in date grouping mode */\n.account-history-group-header:not(.account-history-group-header-clickable) {\n  position: sticky;\n  top: 0;\n  background: var(--account-history-bg);\n  z-index: var(--account-history-z-sticky-date);\n  padding-top: var(--account-history-space-sm);\n  margin-top: calc(-1 * var(--account-history-space-2xs));\n}\n\n.account-history-group-header-clickable {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: var(--studio-cursor-pointer, pointer);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  border-radius: var(--account-history-radius);\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n}\n\n.account-history-group-header-clickable:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n.account-history-group-header-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.account-history-group-toggle {\n  width: var(--account-history-touch-sm);\n  height: var(--account-history-touch-sm);\n  min-width: var(--account-history-touch-sm);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: var(--studio-cursor-pointer, pointer);\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-secondary);\n  font-size: var(--account-history-text-xl);\n  font-weight: 300;\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  line-height: 1;\n}\n\n.account-history-group-toggle:hover {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-group-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 600;\n  margin: 0;\n  color: var(--account-history-text-secondary);\n}\n\n.account-history-group-meta {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-tertiary);\n  margin: var(--account-history-space-2xs) 0 0 0;\n}\n\n.account-history-entries {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 1rem;\n}\n\n/* History Entry - Flat List Design */\n.account-history-entry {\n  display: grid;\n  /* TODO: icon */\n  /* grid-template-columns: auto 28px 1fr 32px; */\n  grid-template-columns: auto 1fr var(--account-history-touch-md);\n  gap: var(--account-history-space-sm);\n  align-items: center;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n  border-bottom: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  min-height: var(--account-history-touch-lg);\n}\n\n.account-history-entry:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n/* Time Column */\n.account-history-entry-time {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Content Column - Clickable */\n.account-history-entry-content {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--account-history-space-xs);\n  min-width: 0;\n  cursor: var(--studio-cursor-pointer, pointer);\n}\n\n.account-history-entry-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 500;\n  color: var(--account-history-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.account-history-entry-content:hover .account-history-entry-title {\n  color: var(--account-history-primary);\n}\n\n.account-history-entry-tool {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* URL - Secondary Appearance (inline with title/tool) */\n.account-history-entry-url {\n  font-size: var(--account-history-text-xs);\n  color: var(--account-history-text-tertiary);\n  opacity: 0.6;\n  font-family: var(--account-history-family-code);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n/* Actions Column */\n.account-history-entry-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.account-history-entry-delete {\n  width: var(--account-history-icon-xl);\n  height: var(--account-history-icon-xl);\n  border: none;\n  background: transparent;\n  cursor: var(--studio-cursor-pointer, pointer);\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-tertiary);\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  opacity: 0;\n}\n\n.account-history-entry:hover .account-history-entry-delete {\n  opacity: 1;\n}\n\n.account-history-entry-delete:hover {\n  background: var(--account-history-danger-bg);\n  color: var(--account-history-danger);\n}\n\n.account-history-entry-delete svg {\n  width: var(--account-history-icon-sm);\n  height: var(--account-history-icon-sm);\n}\n\n/* Empty State */\n.account-history-empty {\n  padding: var(--account-history-space-2xl) var(--account-history-space-lg);\n  text-align: center;\n  color: var(--account-history-text-tertiary);\n  font-size: var(--account-history-text-md);\n}\n\n/* Responsive Design */\n\n/* Mobile (<640px) */\n@media (max-width: 640px) {\n  .account-history-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .account-history-header-controls {\n    width: 100%;\n    flex-wrap: wrap;\n  }\n\n  .account-history-toggle-button {\n    flex: 1;\n  }\n\n  .account-history-sort-label {\n    margin-left: 0;\n    margin-top: var(--account-history-space-xs);\n    width: 100%;\n  }\n\n  .account-history-sort-button {\n    flex: 1;\n  }\n\n  .account-history-group {\n    margin-bottom: var(--account-history-space-lg);\n  }\n\n  .account-history-entry {\n    grid-template-columns: 1fr var(--account-history-touch-sm);\n    grid-template-rows: auto auto;\n    gap: var(--account-history-space-2xs) var(--account-history-space-xs);\n    min-height: auto;\n  }\n\n  .account-history-entry-time {\n    grid-column: 1 / 2;\n    grid-row: 1 / 2;\n  }\n\n  .account-history-entry-content {\n    grid-column: 1 / 2;\n    grid-row: 2 / 3;\n  }\n\n  .account-history-entry-url {\n    display: none;\n  }\n\n  .account-history-entry-actions {\n    grid-column: 2 / 3;\n    grid-row: 1 / 3;\n  }\n\n  .account-history-entry-delete {\n    opacity: 1;\n  }\n\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {

package/packages/account-history/dist/assets/HistoryViewer-BmG0rAfK.js

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  /* Colors derived from studio variables */\n  --account-history-primary: var(--studio-secondary, #33ccf8);\n  /* invert ink for text/icons sitting ON the primary (accent) surface. must be\n     the accent's own luminance-adaptive line, NOT --account-history-bg (the page\n     fill), which is only legible when the accent happens to be dark. */\n  --account-history-primary-line: var(--studio-secondary-line, var(--studio-fill, white));\n  --account-history-bg: var(--studio-fill, white);\n  --account-history-text: var(--studio-line, black);\n  --account-history-text-secondary: var(--studio-line-offset-40, #666);\n  --account-history-text-tertiary: var(--studio-line-offset-50, #999);\n  --account-history-border: var(--studio-fill-offset-20, #ccc);\n  --account-history-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-history-family: var(--studio-family-sans, system-ui, sans-serif);\n  --account-history-family-code: var(--studio-family-code, ui-monospace, monospace);\n  --account-history-radius: 4px;\n\n  /* Danger/delete colors */\n  --account-history-danger: var(--studio-danger, #ff6a90);\n  --account-history-danger-bg: color-mix(in oklch, var(--studio-danger, #ff6a90), transparent 90%);\n\n  /* Fluid spacing scale - scales smoothly from mobile to desktop */\n  --account-history-space-2xs: 0.25rem;                        /* 4px - fixed minimal spacing */\n  --account-history-space-xs: clamp(0.375rem, 0.5vw, 0.5rem);  /* 6px → 8px */\n  --account-history-space-sm: clamp(0.5rem, 1vw, 0.75rem);     /* 8px → 12px */\n  --account-history-space-md: clamp(0.75rem, 2vw, 1rem);       /* 12px → 16px */\n  --account-history-space-lg: clamp(1rem, 2.5vw, 1.5rem);      /* 16px → 24px */\n  --account-history-space-xl: 2rem;                            /* 32px - fixed large spacing */\n  --account-history-space-2xl: 4rem;                           /* 64px - fixed extra large spacing */\n\n  /* Fluid typography scale - scales smoothly across viewports */\n  --account-history-text-2xs: clamp(0.625rem, 0.5vw + 0.5rem, 0.6875rem);    /* 10px → 11px */\n  --account-history-text-xs: clamp(0.6875rem, 0.5vw + 0.625rem, 0.8125rem);  /* 11px → 13px */\n  --account-history-text-sm: clamp(0.75rem, 0.5vw + 0.6875rem, 0.875rem);    /* 12px → 14px */\n  --account-history-text-base: clamp(0.8125rem, 0.5vw + 0.75rem, 0.9375rem); /* 13px → 15px */\n  --account-history-text-md: clamp(0.875rem, 0.5vw + 0.8125rem, 1rem);       /* 14px → 16px */\n  --account-history-text-lg: clamp(1rem, 1vw + 0.875rem, 1.125rem);          /* 16px → 18px */\n  --account-history-text-xl: clamp(1.125rem, 1.5vw + 0.9375rem, 1.25rem);    /* 18px → 20px */\n  --account-history-text-2xl: clamp(1.25rem, 2vw + 1rem, 1.375rem);          /* 20px → 22px */\n\n  /* Icon sizes */\n  --account-history-icon-xs: 0.875rem;   /* 14px */\n  --account-history-icon-sm: 1rem;       /* 16px */\n  --account-history-icon-md: 1.125rem;   /* 18px */\n  --account-history-icon-lg: 1.25rem;    /* 20px */\n  --account-history-icon-xl: 1.5rem;     /* 24px */\n  --account-history-icon-2xl: 1.75rem;   /* 28px */\n\n  /* Button/touch target sizes */\n  --account-history-touch-sm: 1.75rem;   /* 28px */\n  --account-history-touch-md: 2rem;      /* 32px */\n  --account-history-touch-lg: 2.75rem;   /* 44px - WCAG minimum touch target */\n\n  /* Transition timing */\n  --account-history-transition-fast: 0.15s;\n  --account-history-transition-base: 0.2s;\n  --easing: ease;\n\n  /* Z-index scale */\n  --account-history-z-sticky-date: 5;\n  --account-history-z-sticky-header: 10;\n}\n}\n\n\n/* History Recorder (toolbar button) */\n.account-history-toolbar-button {\n  padding: 0.5rem;\n  cursor: pointer;\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text);\n  transition: opacity 0.2s ease;\n}\n\n.account-history-toolbar-button:hover {\n  opacity: 0.7;\n}\n\n/* History Viewer */\n.account-history-viewer {\n  padding: var(--account-history-space-md);\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  font-family: var(--account-history-family);\n  color: var(--account-history-text);\n  background: var(--account-history-bg);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.account-history-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: var(--account-history-space-md);\n  padding-bottom: var(--account-history-space-md);\n  border-bottom: 1px solid var(--account-history-border);\n  flex-shrink: 0;\n  gap: var(--account-history-space-md);\n  flex-wrap: wrap;\n  background: var(--account-history-bg);\n  position: sticky;\n  top: 0;\n  z-index: var(--account-history-z-sticky-header);\n  margin-left: calc(-1 * var(--account-history-space-md));\n  margin-right: calc(-1 * var(--account-history-space-md));\n  margin-top: calc(-1 * var(--account-history-space-md));\n  padding-left: var(--account-history-space-md);\n  padding-right: var(--account-history-space-md);\n  padding-top: var(--account-history-space-md);\n}\n\n.account-history-header-controls {\n  display: flex;\n  gap: var(--account-history-space-xs);\n  align-items: center;\n}\n\n.account-history-group-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n}\n\n.account-history-search {\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.account-history-search-icon {\n  position: absolute;\n  left: var(--account-history-space-sm);\n  width: var(--account-history-icon-md);\n  height: var(--account-history-icon-md);\n  color: var(--account-history-text-tertiary);\n  pointer-events: none;\n}\n\n.account-history-search-input {\n  width: 100%;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm) var(--account-history-space-xs) 2.375rem;\n  border: 1px solid var(--account-history-border);\n  border-radius: var(--account-history-radius);\n  background: var(--account-history-bg);\n  color: var(--account-history-text);\n  font-size: var(--account-history-text-md);\n  font-family: inherit;\n  transition: border-color var(--account-history-transition-fast) var(--easing);\n}\n\n.account-history-search-input::placeholder {\n  color: var(--account-history-text-tertiary);\n}\n\n.account-history-search-input:focus {\n  outline: none;\n  border-color: var(--account-history-primary);\n}\n\n.account-history-sort-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n  margin-left: var(--account-history-space-md);\n}\n\n.account-history-sort-button {\n  padding: 0.375rem var(--account-history-space-sm);\n  border-radius: var(--account-history-radius);\n  border: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: pointer;\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-sort-button:hover {\n  background: var(--account-history-hover);\n}\n\n.account-history-sort-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-title {\n  margin: 0;\n  font-size: var(--account-history-text-2xl);\n  font-weight: 600;\n  color: var(--account-history-text);\n}\n\n.account-history-toggle-button {\n  padding: var(--account-history-space-xs) var(--account-history-space-md);\n  border-radius: var(--account-history-radius);\n  border: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: pointer;\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-toggle-button:hover {\n  background: var(--account-history-hover);\n}\n\n.account-history-toggle-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n/* Scrollable Content Area */\n.account-history-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n/* History Groups - Flat Design */\n\n.account-history-group-header {\n  margin-bottom: var(--account-history-space-xs);\n  padding: var(--account-history-space-xs) 0;\n}\n\n/* Sticky date headers in date grouping mode */\n.account-history-group-header:not(.account-history-group-header-clickable) {\n  position: sticky;\n  top: 0;\n  background: var(--account-history-bg);\n  z-index: var(--account-history-z-sticky-date);\n  padding-top: var(--account-history-space-sm);\n  margin-top: calc(-1 * var(--account-history-space-2xs));\n}\n\n.account-history-group-header-clickable {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  border-radius: var(--account-history-radius);\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n}\n\n.account-history-group-header-clickable:hover {\n  background: var(--account-history-hover);\n}\n\n.account-history-group-header-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.account-history-group-toggle {\n  width: var(--account-history-touch-sm);\n  height: var(--account-history-touch-sm);\n  min-width: var(--account-history-touch-sm);\n  border: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: pointer;\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-secondary);\n  font-size: var(--account-history-text-xl);\n  font-weight: 300;\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  line-height: 1;\n}\n\n.account-history-group-toggle:hover {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-group-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 600;\n  margin: 0;\n  color: var(--account-history-text-secondary);\n}\n\n.account-history-group-meta {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-tertiary);\n  margin: var(--account-history-space-2xs) 0 0 0;\n}\n\n.account-history-entries {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 1rem;\n}\n\n/* History Entry - Flat List Design */\n.account-history-entry {\n  display: grid;\n  /* TODO: icon */\n  /* grid-template-columns: auto 28px 1fr 32px; */\n  grid-template-columns: auto 1fr var(--account-history-touch-md);\n  gap: var(--account-history-space-sm);\n  align-items: center;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n  border-bottom: 1px solid var(--account-history-border);\n  background: var(--account-history-bg);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  min-height: var(--account-history-touch-lg);\n}\n\n.account-history-entry:hover {\n  background: var(--account-history-hover);\n}\n\n/* Time Column */\n.account-history-entry-time {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Content Column - Clickable */\n.account-history-entry-content {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--account-history-space-xs);\n  min-width: 0;\n  cursor: pointer;\n}\n\n.account-history-entry-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 500;\n  color: var(--account-history-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.account-history-entry-content:hover .account-history-entry-title {\n  color: var(--account-history-primary);\n}\n\n.account-history-entry-tool {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* URL - Secondary Appearance (inline with title/tool) */\n.account-history-entry-url {\n  font-size: var(--account-history-text-xs);\n  color: var(--account-history-text-tertiary);\n  opacity: 0.6;\n  font-family: var(--account-history-family-code);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n/* Actions Column */\n.account-history-entry-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.account-history-entry-delete {\n  width: var(--account-history-icon-xl);\n  height: var(--account-history-icon-xl);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-tertiary);\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  opacity: 0;\n}\n\n.account-history-entry:hover .account-history-entry-delete {\n  opacity: 1;\n}\n\n.account-history-entry-delete:hover {\n  background: var(--account-history-danger-bg);\n  color: var(--account-history-danger);\n}\n\n.account-history-entry-delete svg {\n  width: var(--account-history-icon-sm);\n  height: var(--account-history-icon-sm);\n}\n\n/* Empty State */\n.account-history-empty {\n  padding: var(--account-history-space-2xl) var(--account-history-space-lg);\n  text-align: center;\n  color: var(--account-history-text-tertiary);\n  font-size: var(--account-history-text-md);\n}\n\n/* Responsive Design */\n\n/* Mobile (<640px) */\n@media (max-width: 640px) {\n  .account-history-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .account-history-header-controls {\n    width: 100%;\n    flex-wrap: wrap;\n  }\n\n  .account-history-toggle-button {\n    flex: 1;\n  }\n\n  .account-history-sort-label {\n    margin-left: 0;\n    margin-top: var(--account-history-space-xs);\n    width: 100%;\n  }\n\n  .account-history-sort-button {\n    flex: 1;\n  }\n\n  .account-history-group {\n    margin-bottom: var(--account-history-space-lg);\n  }\n\n  .account-history-entry {\n    grid-template-columns: 1fr var(--account-history-touch-sm);\n    grid-template-rows: auto auto;\n    gap: var(--account-history-space-2xs) var(--account-history-space-xs);\n    min-height: auto;\n  }\n\n  .account-history-entry-time {\n    grid-column: 1 / 2;\n    grid-row: 1 / 2;\n  }\n\n  .account-history-entry-content {\n    grid-column: 1 / 2;\n    grid-row: 2 / 3;\n  }\n\n  .account-history-entry-url {\n    display: none;\n  }\n\n  .account-history-entry-actions {\n    grid-column: 2 / 3;\n    grid-row: 1 / 3;\n  }\n\n  .account-history-entry-delete {\n    opacity: 1;\n  }\n\n}"));
+      elementStyle.appendChild(document.createTextNode("@layer package {\n:root,\n:host,\n[theme] {\n  /* Colors derived from studio variables */\n  --account-history-primary: var(--studio-secondary, #33ccf8);\n  /* invert ink for text/icons sitting ON the primary (accent) surface. must be\n     the accent's own luminance-adaptive line, NOT --account-history-bg (the page\n     fill), which is only legible when the accent happens to be dark. */\n  --account-history-primary-line: var(--studio-secondary-line, var(--studio-fill, white));\n  --account-history-bg: var(--studio-fill, white);\n  --account-history-text: var(--studio-line, black);\n  --account-history-text-secondary: var(--studio-line-offset-40, #666);\n  --account-history-text-tertiary: var(--studio-line-offset-50, #999);\n  --account-history-border: var(--studio-fill-offset-20, #ccc);\n  --account-history-hover: var(--studio-fill-offset-10, #e5e5e5);\n  --account-history-family: var(--studio-family-sans, system-ui, sans-serif);\n  --account-history-family-code: var(--studio-family-code, ui-monospace, monospace);\n  --account-history-radius: 4px;\n\n  /* Danger/delete colors */\n  --account-history-danger: var(--studio-danger, #ff6a90);\n  --account-history-danger-bg: color-mix(in oklch, var(--studio-danger, #ff6a90), transparent 90%);\n\n  /* Fluid spacing scale - scales smoothly from mobile to desktop */\n  --account-history-space-2xs: 0.25rem;                        /* 4px - fixed minimal spacing */\n  --account-history-space-xs: clamp(0.375rem, 0.5vw, 0.5rem);  /* 6px → 8px */\n  --account-history-space-sm: clamp(0.5rem, 1vw, 0.75rem);     /* 8px → 12px */\n  --account-history-space-md: clamp(0.75rem, 2vw, 1rem);       /* 12px → 16px */\n  --account-history-space-lg: clamp(1rem, 2.5vw, 1.5rem);      /* 16px → 24px */\n  --account-history-space-xl: 2rem;                            /* 32px - fixed large spacing */\n  --account-history-space-2xl: 4rem;                           /* 64px - fixed extra large spacing */\n\n  /* Fluid typography scale - scales smoothly across viewports */\n  --account-history-text-2xs: clamp(0.625rem, 0.5vw + 0.5rem, 0.6875rem);    /* 10px → 11px */\n  --account-history-text-xs: clamp(0.6875rem, 0.5vw + 0.625rem, 0.8125rem);  /* 11px → 13px */\n  --account-history-text-sm: clamp(0.75rem, 0.5vw + 0.6875rem, 0.875rem);    /* 12px → 14px */\n  --account-history-text-base: clamp(0.8125rem, 0.5vw + 0.75rem, 0.9375rem); /* 13px → 15px */\n  --account-history-text-md: clamp(0.875rem, 0.5vw + 0.8125rem, 1rem);       /* 14px → 16px */\n  --account-history-text-lg: clamp(1rem, 1vw + 0.875rem, 1.125rem);          /* 16px → 18px */\n  --account-history-text-xl: clamp(1.125rem, 1.5vw + 0.9375rem, 1.25rem);    /* 18px → 20px */\n  --account-history-text-2xl: clamp(1.25rem, 2vw + 1rem, 1.375rem);          /* 20px → 22px */\n\n  /* Icon sizes */\n  --account-history-icon-xs: 0.875rem;   /* 14px */\n  --account-history-icon-sm: 1rem;       /* 16px */\n  --account-history-icon-md: 1.125rem;   /* 18px */\n  --account-history-icon-lg: 1.25rem;    /* 20px */\n  --account-history-icon-xl: 1.5rem;     /* 24px */\n  --account-history-icon-2xl: 1.75rem;   /* 28px */\n\n  /* Button/touch target sizes */\n  --account-history-touch-sm: 1.75rem;   /* 28px */\n  --account-history-touch-md: 2rem;      /* 32px */\n  --account-history-touch-lg: 2.75rem;   /* 44px - WCAG minimum touch target */\n\n  /* Transition timing */\n  --account-history-transition-fast: max(1ms, calc(0.15s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));\n  --account-history-transition-base: max(1ms, calc(0.2s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1)));\n  --easing: ease;\n\n  /* Z-index scale */\n  --account-history-z-sticky-date: 5;\n  --account-history-z-sticky-header: 10;\n}\n}\n\n\n/* History Recorder (toolbar button) */\n.account-history-toolbar-button {\n  padding: 0.5rem;\n  cursor: var(--studio-cursor-pointer, pointer);\n  background: transparent;\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text);\n  transition: opacity max(1ms, calc(0.2s * var(--studio-motion-scale, 1) * var(--studio-motion-preference, 1))) ease;\n}\n\n.account-history-toolbar-button:hover {\n  opacity: 0.7;\n}\n\n/* History Viewer */\n.account-history-viewer {\n  padding: var(--account-history-space-md);\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  font-family: var(--account-history-family);\n  color: var(--account-history-text);\n  background: var(--account-history-bg);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.account-history-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: var(--account-history-space-md);\n  padding-bottom: var(--account-history-space-md);\n  border-bottom: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  flex-shrink: 0;\n  gap: var(--account-history-space-md);\n  flex-wrap: wrap;\n  background: var(--account-history-bg);\n  position: sticky;\n  top: 0;\n  z-index: var(--account-history-z-sticky-header);\n  margin-left: calc(-1 * var(--account-history-space-md));\n  margin-right: calc(-1 * var(--account-history-space-md));\n  margin-top: calc(-1 * var(--account-history-space-md));\n  padding-left: var(--account-history-space-md);\n  padding-right: var(--account-history-space-md);\n  padding-top: var(--account-history-space-md);\n}\n\n.account-history-header-controls {\n  display: flex;\n  gap: var(--account-history-space-xs);\n  align-items: center;\n}\n\n.account-history-group-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n}\n\n.account-history-search {\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.account-history-search-icon {\n  position: absolute;\n  left: var(--account-history-space-sm);\n  width: var(--account-history-icon-md);\n  height: var(--account-history-icon-md);\n  color: var(--account-history-text-tertiary);\n  pointer-events: none;\n}\n\n.account-history-search-input {\n  width: 100%;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm) var(--account-history-space-xs) 2.375rem;\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  border-radius: var(--account-history-radius);\n  background: var(--account-history-bg);\n  color: var(--account-history-text);\n  font-size: var(--account-history-text-md);\n  font-family: inherit;\n  transition: border-color var(--account-history-transition-fast) var(--easing);\n}\n\n.account-history-search-input::placeholder {\n  color: var(--account-history-text-tertiary);\n}\n\n.account-history-search-input:focus {\n  outline: none;\n  border-color: var(--account-history-primary);\n}\n\n.account-history-sort-label {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  font-weight: 500;\n  margin-left: var(--account-history-space-md);\n}\n\n.account-history-sort-button {\n  padding: 0.375rem var(--account-history-space-sm);\n  border-radius: var(--account-history-radius);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: var(--studio-cursor-pointer, pointer);\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-sort-button:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n.account-history-sort-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-title {\n  margin: 0;\n  font-size: var(--account-history-text-2xl);\n  font-weight: 600;\n  color: var(--account-history-text);\n}\n\n.account-history-toggle-button {\n  padding: var(--account-history-space-xs) var(--account-history-space-md);\n  border-radius: var(--account-history-radius);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: var(--studio-cursor-pointer, pointer);\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  font-weight: 500;\n}\n\n.account-history-toggle-button:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n.account-history-toggle-button.active {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n/* Scrollable Content Area */\n.account-history-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n/* History Groups - Flat Design */\n\n.account-history-group-header {\n  margin-bottom: var(--account-history-space-xs);\n  padding: var(--account-history-space-xs) 0;\n}\n\n/* Sticky date headers in date grouping mode */\n.account-history-group-header:not(.account-history-group-header-clickable) {\n  position: sticky;\n  top: 0;\n  background: var(--account-history-bg);\n  z-index: var(--account-history-z-sticky-date);\n  padding-top: var(--account-history-space-sm);\n  margin-top: calc(-1 * var(--account-history-space-2xs));\n}\n\n.account-history-group-header-clickable {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: var(--studio-cursor-pointer, pointer);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  border-radius: var(--account-history-radius);\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n}\n\n.account-history-group-header-clickable:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n.account-history-group-header-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.account-history-group-toggle {\n  width: var(--account-history-touch-sm);\n  height: var(--account-history-touch-sm);\n  min-width: var(--account-history-touch-sm);\n  border: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  cursor: var(--studio-cursor-pointer, pointer);\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-secondary);\n  font-size: var(--account-history-text-xl);\n  font-weight: 300;\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  line-height: 1;\n}\n\n.account-history-group-toggle:hover {\n  background: var(--account-history-primary);\n  color: var(--account-history-primary-line);\n  border-color: var(--account-history-primary);\n}\n\n.account-history-group-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 600;\n  margin: 0;\n  color: var(--account-history-text-secondary);\n}\n\n.account-history-group-meta {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-tertiary);\n  margin: var(--account-history-space-2xs) 0 0 0;\n}\n\n.account-history-entries {\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 1rem;\n}\n\n/* History Entry - Flat List Design */\n.account-history-entry {\n  display: grid;\n  /* TODO: icon */\n  /* grid-template-columns: auto 28px 1fr 32px; */\n  grid-template-columns: auto 1fr var(--account-history-touch-md);\n  gap: var(--account-history-space-sm);\n  align-items: center;\n  padding: var(--account-history-space-xs) var(--account-history-space-sm);\n  border-bottom: var(--studio-border-width, 1px) var(--studio-border-style, solid) var(--account-history-border);\n  background: var(--account-history-bg);\n  transition: background-color var(--account-history-transition-fast) var(--easing);\n  min-height: var(--account-history-touch-lg);\n}\n\n.account-history-entry:hover {\n  background: var(--studio-hover-fill, var(--account-history-hover));\n}\n\n/* Time Column */\n.account-history-entry-time {\n  font-size: var(--account-history-text-sm);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Content Column - Clickable */\n.account-history-entry-content {\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: var(--account-history-space-xs);\n  min-width: 0;\n  cursor: var(--studio-cursor-pointer, pointer);\n}\n\n.account-history-entry-title {\n  font-size: var(--account-history-text-base);\n  font-weight: 500;\n  color: var(--account-history-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.account-history-entry-content:hover .account-history-entry-title {\n  color: var(--account-history-primary);\n}\n\n.account-history-entry-tool {\n  font-size: var(--account-history-text-base);\n  color: var(--account-history-text-secondary);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* URL - Secondary Appearance (inline with title/tool) */\n.account-history-entry-url {\n  font-size: var(--account-history-text-xs);\n  color: var(--account-history-text-tertiary);\n  opacity: 0.6;\n  font-family: var(--account-history-family-code);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n/* Actions Column */\n.account-history-entry-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.account-history-entry-delete {\n  width: var(--account-history-icon-xl);\n  height: var(--account-history-icon-xl);\n  border: none;\n  background: transparent;\n  cursor: var(--studio-cursor-pointer, pointer);\n  border-radius: var(--account-history-radius);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--account-history-text-tertiary);\n  transition: all var(--account-history-transition-fast) var(--easing);\n  padding: 0;\n  opacity: 0;\n}\n\n.account-history-entry:hover .account-history-entry-delete {\n  opacity: 1;\n}\n\n.account-history-entry-delete:hover {\n  background: var(--account-history-danger-bg);\n  color: var(--account-history-danger);\n}\n\n.account-history-entry-delete svg {\n  width: var(--account-history-icon-sm);\n  height: var(--account-history-icon-sm);\n}\n\n/* Empty State */\n.account-history-empty {\n  padding: var(--account-history-space-2xl) var(--account-history-space-lg);\n  text-align: center;\n  color: var(--account-history-text-tertiary);\n  font-size: var(--account-history-text-md);\n}\n\n/* Responsive Design */\n\n/* Mobile (<640px) */\n@media (max-width: 640px) {\n  .account-history-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .account-history-header-controls {\n    width: 100%;\n    flex-wrap: wrap;\n  }\n\n  .account-history-toggle-button {\n    flex: 1;\n  }\n\n  .account-history-sort-label {\n    margin-left: 0;\n    margin-top: var(--account-history-space-xs);\n    width: 100%;\n  }\n\n  .account-history-sort-button {\n    flex: 1;\n  }\n\n  .account-history-group {\n    margin-bottom: var(--account-history-space-lg);\n  }\n\n  .account-history-entry {\n    grid-template-columns: 1fr var(--account-history-touch-sm);\n    grid-template-rows: auto auto;\n    gap: var(--account-history-space-2xs) var(--account-history-space-xs);\n    min-height: auto;\n  }\n\n  .account-history-entry-time {\n    grid-column: 1 / 2;\n    grid-row: 1 / 2;\n  }\n\n  .account-history-entry-content {\n    grid-column: 1 / 2;\n    grid-row: 2 / 3;\n  }\n\n  .account-history-entry-url {\n    display: none;\n  }\n\n  .account-history-entry-actions {\n    grid-column: 2 / 3;\n    grid-row: 1 / 3;\n  }\n\n  .account-history-entry-delete {\n    opacity: 1;\n  }\n\n}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {