@hearthscale/app-ui 0.2.4 → 0.4.0-rc.1

package/dist/ui.css

@@ -447,9 +447,10 @@
     display: flex;
     min-height: var(--h-ctl);
     flex-shrink: 0;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
-    gap: calc(var(--space) * 3);
+    gap: calc(var(--space) * 2) calc(var(--space) * 3);
     font-size: var(--fs-md);
     font-weight: var(--fw-semi);
     color: var(--mut);
@@ -463,6 +464,7 @@
     font-weight: 400;
     margin-left: auto;
     min-width: 0;
+    max-width: 100%;
     flex-wrap: wrap;
     justify-content: flex-end;
   }
@@ -483,6 +485,22 @@
   .hs-select-wrap {
     position: relative;
     flex: none;
+    max-width: 100%;
+  }
+  .hs-select-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .hs-select-note {
+    flex: none;
+    max-width: 50%;
+    margin-inline-start: auto;
+    overflow: hidden;
+    color: var(--mut);
+    font-size: var(--fs-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
   .hs-select > :is(svg, .hs-icon), .hs-settings-search > :is(svg, .hs-icon) {
     flex: none;
@@ -502,6 +520,7 @@
     align-items: center;
     gap: calc(var(--space) * 2);
     height: var(--h-ctl);
+    max-width: 100%;
     box-sizing: border-box;
     padding: 0 calc(var(--space) * 2.5);
     border: var(--bw) solid var(--tipline);
@@ -516,6 +535,17 @@
     align-items: center;
     gap: var(--gap-row);
   }
+  .hs-toggle-row:has(> .hs-setting-controls) {
+    flex-wrap: wrap;
+    row-gap: var(--gap-stack);
+  }
+  .hs-toggle-row:has(> .hs-setting-controls) > .hs-setting-label {
+    min-width: min(calc(var(--space) * 28), 100%);
+  }
+  .hs-toggle-row > .hs-setting-controls {
+    flex: none;
+    margin-left: auto;
+  }
   .hs-setting-label {
     flex: 1;
     display: flex;
@@ -539,22 +569,35 @@
   }
   .hs-info-row {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: var(--gap-row);
+    gap: var(--gap-stack) var(--gap-row);
+  }
+  .hs-info-row > .hs-setting-label {
+    min-width: min(calc(var(--space) * 28), 100%);
+  }
+  .hs-info-row > .hs-setting-value {
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    margin-left: auto;
   }
   .hs-fact-row {
     display: flex;
+    flex-wrap: wrap;
     align-items: baseline;
-    gap: var(--gap-row);
+    gap: var(--gap-label) var(--gap-row);
   }
   .hs-fact-label {
     width: calc(var(--space) * 32.5);
+    max-width: 100%;
     flex: none;
     font-size: var(--fs-body);
     color: var(--mut);
   }
   .hs-fact-value {
-    flex: 1;
+    flex: 1 1 calc(var(--space) * 20);
+    min-width: 0;
     font-size: var(--fs-body);
     color: var(--text);
     overflow-wrap: anywhere;
@@ -564,6 +607,14 @@
     color: var(--mut);
     flex: none;
   }
+  .hs-setting-controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: var(--gap-inline);
+    min-width: 0;
+  }
   .hs-link-row {
     display: flex;
     align-items: center;
@@ -590,12 +641,17 @@
   }
   .hs-list-row {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    gap: var(--gap-row);
+    gap: var(--gap-stack) var(--gap-row);
+  }
+  .hs-list-row > .hs-setting-label {
+    min-width: min(calc(var(--space) * 28), 100%);
   }
   .hs-list-row-actions {
     display: flex;
     align-items: center;
+    margin-left: auto;
     gap: var(--gap-inline);
     flex: none;
   }
@@ -796,7 +852,7 @@
     gap: calc(var(--space) * 0.5);
     min-width: 0;
   }
-  .hs-model-trigger {
+  .hs-model-trigger, .hs-thinking-trigger {
     position: relative;
     display: flex;
     align-items: center;
@@ -813,7 +869,7 @@
     cursor: pointer;
     user-select: none;
   }
-  .hs-model-trigger-chevron {
+  .hs-model-trigger-chevron, .hs-thinking-chevron {
     flex: none;
     color: var(--dim);
   }
@@ -835,6 +891,9 @@
     padding: var(--space);
     overflow: hidden auto;
   }
+  .hs-picker-list > * + * {
+    margin-top: calc(var(--space) * 0.5);
+  }
   .hs-picker-row {
     display: flex;
     align-items: center;
@@ -860,6 +919,27 @@
   .hs-picker-row[data-download='true'] {
     cursor: pointer;
   }
+  .hs-picker-row-word {
+    margin-left: var(--gap-inline);
+    color: var(--dim);
+  }
+  .hs-menu-search {
+    flex: none;
+    padding: var(--space) var(--space) calc(var(--space) * 1.5);
+  }
+  .hs-multi-select-menu {
+    display: flex;
+    flex-direction: column;
+    height: min(calc(var(--space) * 95), 60vh);
+  }
+  .hs-multi-select-list {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden auto;
+  }
+  .hs-picker[data-tall='true'] {
+    max-height: min(calc(var(--space) * 130), 70vh);
+  }
   .hs-picker-row-action {
     display: inline-flex;
     align-items: center;
@@ -1167,7 +1247,7 @@
     min-height: 0;
     overflow: hidden auto;
     scrollbar-gutter: stable both-edges;
-    padding: calc(var(--space) * 4.5) calc(var(--space) * 7.25) calc(var(--space) * 9);
+    padding: calc(var(--space) * 4.5) min(calc(var(--space) * 7.25), 4%) calc(var(--space) * 9);
   }
   .hs-settings-content {
     --hov: var(--hov-page);
@@ -1470,7 +1550,7 @@
   .hs-composer[data-narrow='true'] .hs-composer-footer > :not(.hs-composer-fill, .hs-model-picker) {
     flex: none;
   }
-  .hs-composer[data-narrow='true'] .hs-level-name {
+  .hs-composer[data-narrow='true'] .hs-level-name, .hs-composer[data-narrow='true'] .hs-thinking-name {
     display: none;
   }
   .hs-composer-fill {
@@ -1711,6 +1791,9 @@
   .hs-shelf-chip[data-kind='terminal'] {
     background: var(--chip-terminal);
   }
+  .hs-shelf-chip[data-kind='place'] {
+    background: var(--chip-place);
+  }
   .hs-shelf-chip[data-kind='context'] {
     background: var(--chip-file);
   }
@@ -1976,11 +2059,15 @@
     padding: 1px calc(var(--space) * 1.25);
     border-radius: var(--r-sm);
     background: var(--hov);
-    font-family: var(--font-mono);
-    font-size: var(--fs-mono);
+    font: inherit;
+    font-variant-numeric: tabular-nums;
     overflow-wrap: anywhere;
     color: var(--text);
   }
+  .hs-ask-fold {
+    align-self: flex-start;
+    margin-left: calc(var(--space) * -3.5);
+  }
   .hs-ask-command {
     max-height: calc(var(--space) * 30);
     margin: 0;
@@ -2036,8 +2123,6 @@
   }
   .hs-ask-tool-name {
     flex: none;
-    font-family: var(--font-mono);
-    font-size: var(--fs-mono);
     color: var(--text);
   }
   .hs-ask-actions {
@@ -2658,8 +2743,6 @@
   }
   .hs-work-command, .hs-work-output, .hs-work-path {
     margin: 0;
-    font-family: var(--font-mono);
-    font-size: var(--fs-mono);
     line-height: 1.6;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
@@ -2671,6 +2754,8 @@
   .hs-work-command, .hs-work-output {
     max-height: 16rem;
     overflow: auto;
+    font-family: var(--font-mono);
+    font-size: var(--fs-mono);
   }
   .hs-work-text {
     white-space: pre-wrap;
@@ -2896,17 +2981,18 @@
   .hs-unknown-part-context, .hs-unknown-part-data {
     margin: calc(var(--space) * 1.5) 0 0;
     white-space: pre-wrap;
-    font-family: var(--font-mono);
-    font-size: var(--fs-mono);
   }
   .hs-unknown-part-context {
+    font: inherit;
     color: var(--text);
   }
   .hs-unknown-part-data {
+    font-family: var(--font-mono);
+    font-size: var(--fs-mono);
     word-break: break-all;
     color: var(--mut);
   }
-  .hs-changed {
+  .hs-changed, .hs-cited {
     display: flex;
     flex-direction: column;
     gap: calc(var(--space) * 2);
@@ -2916,25 +3002,29 @@
     background: var(--tipbg);
     border: var(--bw) solid var(--tipline);
   }
-  .hs-changed-head {
+  .hs-changed-head, .hs-cited-head {
     display: flex;
     align-items: center;
     gap: calc(var(--space) * 2);
   }
-  .hs-changed-title {
+  .hs-changed-title, .hs-cited-title {
     flex: 1;
     font-size: var(--fs-row);
     font-weight: var(--fw-med);
     color: var(--text);
   }
-  .hs-changed-files {
+  .hs-changed-files, .hs-cited-file {
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--space) * 1.25);
   }
+  .hs-cited-files {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--space) * 1.5);
+  }
   .hs-diff-count {
-    font-family: var(--font-mono);
-    font-size: var(--fs-mono);
+    font-variant-numeric: tabular-nums;
   }
   .hs-diff-count[data-kind='add'] {
     color: var(--ok);
@@ -2973,7 +3063,7 @@
     height: 100%;
     cursor: zoom-in;
   }
-  .hs-chat-image img {
+  .hs-chat-image video, .hs-chat-image img {
     display: block;
     width: 100%;
     height: 100%;
@@ -4253,6 +4343,9 @@
     backdrop-filter: var(--blur-surface);
     -webkit-backdrop-filter: var(--blur-surface);
   }
+  :not(.hs-menu-surface) > .hs-mitem + .hs-mitem {
+    margin-top: calc(var(--space) * 0.5);
+  }
   .hs-menu-item-row {
     display: flex;
     align-items: center;
@@ -4629,7 +4722,13 @@
     align-items: center;
     padding-left: 1px;
   }
+  .hs-titlebar-drag {
+    position: absolute;
+    inset: 0;
+    -webkit-app-region: drag;
+  }
   .hs-caption-button {
+    -webkit-app-region: no-drag;
     display: grid;
     place-items: center;
     width: calc(var(--space) * 11.5);
@@ -4731,6 +4830,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    min-width: 0;
     gap: var(--gap-stack);
     padding: calc(var(--space) * 2);
     border-radius: var(--r-card);
@@ -4741,15 +4841,14 @@
   }
   .hs-theme-preview {
     position: relative;
-    height: calc(var(--space) * 26);
+    container-type: inline-size;
+    aspect-ratio: 235 / 104;
     border-radius: var(--r-card);
     overflow: hidden;
   }
   .hs-theme-caption {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--space) * 0.5);
     text-align: center;
+    overflow-wrap: anywhere;
   }
   .hs-theme-name {
     font-size: var(--fs-body);
@@ -4784,8 +4883,8 @@
     bottom: calc(var(--space) * -0.75);
     display: grid;
     place-items: center;
-    width: calc(var(--space) * 5.5);
-    height: calc(var(--space) * 5.5);
+    width: clamp(calc(var(--space) * 4.5), 34%, calc(var(--space) * 5.5));
+    aspect-ratio: 1;
     border-radius: var(--r-round);
     background: var(--tipbg);
     box-shadow: var(--ring);
@@ -4803,8 +4902,9 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    min-width: 0;
     gap: calc(var(--space) * 2.5);
-    padding: calc(var(--space) * 4.5) calc(var(--space) * 2) calc(var(--space) * 2.5);
+    padding: calc(var(--space) * 6.5) calc(var(--space) * 2) calc(var(--space) * 2.5);
     border-radius: var(--r-card);
     background: var(--card);
     outline: 1px solid var(--cardb);
@@ -4815,16 +4915,20 @@
     display: flex;
     justify-content: center;
     gap: calc(var(--space) * 5.5);
+    padding: 0 calc(var(--space) * 2);
   }
-  .hs-colourway-name, .hs-colourway-tile > .hs-label {
+  .hs-colourway-orbs > .hs-orb {
+    flex: 0 1 calc(var(--space) * 16.5);
+    width: auto;
+    height: auto;
+    min-width: 0;
+    aspect-ratio: 1;
+  }
+  .hs-colourway-name {
     font-size: var(--fs-body);
     color: var(--mut);
     text-align: center;
-  }
-  .hs-colourway-tile > .hs-label {
-    margin-top: calc(var(--space) * -1.5);
-    font-size: var(--fs-sm);
-    color: var(--dim);
+    overflow-wrap: anywhere;
   }
   .hs-colour-slider {
     position: relative;
@@ -4853,6 +4957,7 @@
   }
   .hs-colour-editor-label {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: calc(var(--space) * 2.25);
   }
@@ -4862,11 +4967,12 @@
     font-weight: var(--fw-semi);
   }
   .hs-colour-editor-hex {
-    font-family: var(--font-mono);
     font-size: var(--fs-cap);
+    font-variant-numeric: tabular-nums;
     color: var(--dim);
   }
   .hs-button.hs-size-step {
+    flex: none;
     width: var(--h-ctl);
     padding: 0;
     font-size: var(--fs-dialog);
@@ -4877,7 +4983,9 @@
     gap: var(--gap-stack);
   }
   .hs-size-value {
-    min-width: calc(var(--space) * 11.5);
+    flex: 0 1 auto;
+    width: calc(var(--space) * 11.5);
+    min-width: 0;
     text-align: center;
     font-size: var(--fs-sm);
     color: var(--text);
@@ -4916,13 +5024,14 @@
     flex-direction: column;
     gap: calc(var(--space) * 3.5);
     margin: var(--space) 0 calc(var(--space) * 2);
-    padding: calc(var(--space) * 4);
+    padding: calc(var(--space) * 4) min(calc(var(--space) * 4), 6%);
     border-radius: var(--r-card);
     background: var(--card);
     border: var(--bw) solid var(--cardb);
   }
   .hs-colourway-editor-toolbar {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--gap-stack);
   }
@@ -4933,7 +5042,15 @@
     display: contents;
   }
   .hs-colourway-editor-toolbar > .hs-input {
-    width: calc(var(--space) * 50);
+    flex: 0 1 calc(var(--space) * 50);
+    width: auto;
+    min-width: 0;
+  }
+  .hs-colourway-editor-toolbar > .hs-button {
+    max-width: 100%;
+    height: auto;
+    min-height: var(--h-ctl);
+    white-space: normal;
   }
   .hs-colourway-error {
     font-size: var(--fs-sm);
@@ -4946,6 +5063,10 @@
     font-size: var(--fs-sm);
     color: var(--text);
   }
+  .hs-range-value > .hs-range {
+    flex: 0 1 auto;
+    min-width: 0;
+  }
   .hs-provider-box {
     padding: var(--pad-row-y) var(--pad-row-x);
     border-top: var(--bw) solid var(--line);
@@ -4954,11 +5075,16 @@
     gap: calc(var(--space) * 2);
   }
   .hs-appearance-grid {
+    --tile-min: calc(var(--space) * 32);
+    --tile-gap: calc(var(--space) * 3);
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: calc(var(--space) * 3);
+    grid-template-columns: repeat( auto-fill, minmax(min(100%, max(var(--tile-min), calc((100% - 2 * var(--tile-gap)) / 3))), 1fr) );
+    gap: var(--tile-gap);
     margin: calc(var(--space) * 2) 0 calc(var(--space) * 1.5);
   }
+  .hs-appearance-grid-schemes {
+    --tile-min: calc(var(--space) * 22);
+  }
   .hs-appearance-tile[data-sel='true'] {
     outline: 2px solid var(--mut);
   }
@@ -5744,8 +5870,7 @@
     overflow-wrap: anywhere;
   }
   .hs-mono {
-    font-family: var(--font-mono);
-    font-size: var(--fs-mono);
+    font-variant-numeric: tabular-nums;
   }
   .hs-page-title {
     margin: 0 0 var(--gap-inline);
@@ -5797,7 +5922,7 @@
     flex-direction: column;
   }
   .hs-model-browser-list {
-    width: 38%;
+    width: 42%;
     min-width: min(calc(var(--space) * 70), 42%);
     flex: none;
     border-right: var(--bw) solid var(--line);
@@ -5822,6 +5947,9 @@
     font: inherit;
     color: var(--text);
   }
+  .hs-model-browser-row + .hs-model-browser-row {
+    margin-top: calc(var(--space) * 0.5);
+  }
   .hs-model-browser-row:hover {
     background: var(--hov);
   }
@@ -5911,8 +6039,7 @@
     overflow-wrap: anywhere;
   }
   .hs-model-header-sub {
-    font-family: var(--font-mono);
-    font-size: var(--fs-mono);
+    font-size: var(--fs-sm);
     color: var(--mut);
     white-space: nowrap;
     overflow: hidden;
@@ -6059,6 +6186,22 @@
     padding: calc(var(--space) * 2.5) calc(var(--space) * 4.5) var(--space);
     flex: none;
   }
+  .hs-model-browser-toolbar:has(> .hs-select-wrap) {
+    flex-wrap: nowrap;
+    gap: var(--gap-inline);
+  }
+  .hs-model-browser-toolbar > .hs-select-wrap {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .hs-model-browser-toolbar .hs-select {
+    width: 100%;
+    justify-content: space-between;
+    padding-inline: calc(var(--space) * 2);
+  }
+  .hs-model-browser-toolbar .hs-select-label {
+    white-space: nowrap;
+  }
   .hs-model-browser-count {
     flex: 1;
     font-size: var(--fs-sm);
@@ -6121,6 +6264,10 @@
     padding: 0 0 calc(var(--space) * 3);
   }
   .hs-settings-group-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-row);
     padding: var(--pad-row-y) var(--pad-row-x) var(--gap-inline);
     font-size: var(--fs-sm);
     color: var(--mut);
@@ -6141,6 +6288,7 @@
   .hs-settings-actions {
     display: flex;
     align-items: center;
+    justify-content: flex-end;
     flex-wrap: wrap;
     gap: var(--gap-stack);
     padding: var(--pad-row-y) var(--pad-row-x);
@@ -6442,7 +6590,6 @@
     height: calc(var(--space) * 9.5);
     padding: 0 calc(var(--space) * 2) 0 calc(var(--space) * 3.5);
     border-bottom: var(--bw) solid var(--tipline);
-    font-family: var(--font-mono);
     font-size: var(--fs-docs-code-title);
     color: var(--mut);
   }
@@ -8031,6 +8178,57 @@
     opacity: 0.45;
     cursor: default;
   }
+  .hs-speech-test {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: calc(var(--space) * 3);
+    padding: calc(var(--space) * 2.5);
+    border: var(--bw) solid var(--cardb);
+    border-radius: var(--r-ctl);
+    background: var(--card);
+  }
+  .hs-speech-test p {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    color: var(--text);
+    font-size: var(--fs-body);
+    line-height: var(--lh-body);
+    user-select: text;
+  }
+  .hs-speech-test-end {
+    flex: none;
+    display: flex;
+    align-items: center;
+    gap: var(--gap-inline);
+  }
+  .hs-list-setting {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--space) * 2);
+  }
+  .hs-list-setting-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-inline);
+  }
+  .hs-settings-text, .hs-list-setting-input {
+    width: calc(var(--space) * 60);
+    min-width: 0;
+    text-align: left;
+  }
+  .hs-list-setting-input {
+    flex: 0 1 auto;
+  }
+  .hs-list-setting-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap-inline);
+  }
   .hs-settings-textarea {
     display: flex;
     flex-direction: column;
@@ -8318,6 +8516,15 @@
     min-width: 0;
     text-align: left;
   }
+  .hs-dashboard-short {
+    width: calc(var(--space) * 20);
+  }
+  .hs-model-offer-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--gap-row);
+    margin-top: var(--gap-stack);
+  }
   .hs-model-download-facts {
     color: var(--mut);
     font-size: var(--fs-sm);
@@ -8349,7 +8556,7 @@
     gap: calc(var(--space) * 3);
     margin-top: calc(var(--space) * 4);
   }
-  .hs-model-media-output img {
+  .hs-model-media-output video, .hs-model-media-output img {
     max-width: 100%;
     max-height: calc(var(--space) * 105);
     object-fit: contain;
@@ -8813,6 +9020,7 @@
   }
   .hs-info-row > .hs-setting-value > .hs-input {
     width: calc(var(--space) * 70);
+    max-width: 100%;
   }
   .hs-info-row > .hs-setting-value:has(> .hs-model-picker) {
     display: flex;
@@ -8822,6 +9030,7 @@
   }
   .hs-info-row > .hs-setting-value > .hs-meter[data-variant='bar'] {
     width: calc(var(--space) * 40);
+    max-width: 100%;
     height: calc(var(--space) * 1.5);
   }
   .hs-connector-unattached {
@@ -8838,6 +9047,7 @@
   .hs-key-control {
     display: inline-flex;
     align-items: center;
+    min-height: var(--h-ctl);
     gap: var(--gap-inline);
   }
   .hs-key-binding {
@@ -8898,13 +9108,6 @@
     font-size: var(--fs-md);
     color: var(--text);
   }
-  .hs-provider-ask {
-    position: relative;
-  }
-  .hs-provider-ask > .hs-tip {
-    top: calc(100% + var(--space) * 1.5);
-    right: 0;
-  }
   .hs-dashboard {
     position: relative;
     min-height: 100dvh;
@@ -8938,13 +9141,13 @@
   .hs-dashboard-plate {
     position: relative;
     display: grid;
-    grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
+    grid-template-columns: max-content minmax(0, 1fr);
     column-gap: calc(var(--space) * 2);
     align-items: center;
     max-width: calc(var(--space) * 310);
     min-height: calc(var(--space) * 14);
     margin: 0 auto;
-    padding: 0 calc(var(--space) * 2.5) 0 var(--space);
+    padding: var(--space) calc(var(--space) * 2.5) var(--space) var(--space);
   }
   .hs-shell .hs-dashboard-brand {
     justify-self: start;
@@ -8954,6 +9157,8 @@
   }
   .hs-dashboard-nav {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     align-items: center;
     gap: var(--gap-inline);
   }
@@ -9046,6 +9251,64 @@
   .hs-dashboard-actions form {
     display: contents;
   }
+  td .hs-dashboard-actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    width: max-content;
+    margin-left: auto;
+    gap: var(--space);
+  }
+  td .hs-dashboard-actions .hs-button {
+    width: 100%;
+  }
+  .hs-dashboard-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(calc(var(--space) * 62), 1fr));
+    gap: calc(var(--space) * 4);
+    align-items: end;
+  }
+  .hs-dashboard-form > .hs-button {
+    justify-self: start;
+  }
+  .hs-dashboard-field {
+    display: grid;
+    gap: calc(var(--space) * 1.5);
+    min-width: 0;
+    font-size: var(--fs-sm);
+    color: var(--mut);
+  }
+  .hs-dashboard-check {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--space) * 2);
+    min-height: var(--h-ctl);
+    font-size: var(--fs-sm);
+    color: var(--text);
+  }
+  .hs-dashboard-setting {
+    display: flex;
+    align-items: flex-end;
+    gap: calc(var(--space) * 2);
+  }
+  .hs-dashboard-setting > .hs-dashboard-field {
+    flex: 1;
+  }
+  .hs-dashboard-setting[data-end='true'] {
+    justify-content: flex-end;
+  }
+  .hs-dashboard-inline {
+    display: flex;
+    align-items: center;
+    gap: var(--space);
+    white-space: nowrap;
+  }
+  .hs-dashboard input[type='number'] {
+    appearance: textfield;
+  }
+  .hs-dashboard input[type='number']::-webkit-inner-spin-button, .hs-dashboard input[type='number']::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
   .hs-dashboard-listing {
     display: flex;
     align-items: center;
@@ -9435,6 +9698,30 @@
     position: relative;
     touch-action: none;
   }
+  .hs-badged {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+  }
+  .hs-badged-badge {
+    position: absolute;
+    right: calc(var(--space) * -1);
+    bottom: calc(var(--space) * -1);
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-round);
+    background: var(--bg);
+  }
+  .hs-badged-badge[data-letters] {
+    box-sizing: border-box;
+    min-width: var(--h-badge);
+    height: var(--h-badge);
+    padding: 0 calc(var(--space) / 2);
+    font-family: var(--font-app);
+    font-size: var(--fs-badge);
+    font-weight: var(--fw-semi);
+    line-height: 1;
+  }
   .hs-rail-plate-bypass {
     position: absolute;
     right: 0;
@@ -10802,6 +11089,7 @@
     --scroll-size: calc(var(--space) * 2.75);
     --w-rail: calc(var(--space) * 14);
     --icon-ctl-rail: calc(var(--space) * 10);
+    --h-badge: calc(var(--space) * 3);
     --gap-rail: var(--space);
     --edge: calc(var(--space) * 2);
     --h-lane: 42px;
@@ -10942,6 +11230,10 @@
     @supports (color: color-mix(in lab, red, red)) {
       --chip-terminal: color-mix(in srgb, var(--mut) 18%, transparent);
     }
+    --chip-place: var(--info);
+    @supports (color: color-mix(in lab, red, red)) {
+      --chip-place: color-mix(in srgb, color-mix(in srgb, var(--info), var(--ok)) 16%, transparent);
+    }
     --blur-surface: blur(14px) saturate(1.35);
     --blur-overlay: blur(24px) saturate(1.4);
     --blur-sheet: blur(36px) saturate(1.45);
@@ -10965,6 +11257,7 @@
     --press: none;
     --press-fade: 1;
     --hov-lift: none;
+    --fs-badge: 8.5px;
     --fs-mono-xs: 10.5px;
     --fs-mono: 11px;
     --fs-cap: 11.5px;