@hearthscale/app-ui 0.2.4 → 0.3.0

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;
   }
@@ -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);
@@ -1976,11 +2056,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 +2120,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 +2740,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 +2751,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,13 +2978,14 @@
   .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);
   }
@@ -2933,8 +3016,7 @@
     gap: calc(var(--space) * 1.25);
   }
   .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 +3055,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 +4335,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 +4714,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 +4822,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 +4833,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 +4875,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 +4894,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 +4907,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 +4949,7 @@
   }
   .hs-colour-editor-label {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: calc(var(--space) * 2.25);
   }
@@ -4862,11 +4959,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 +4975,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 +5016,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 +5034,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 +5055,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 +5067,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 +5862,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 +5914,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 +5939,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 +6031,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 +6178,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 +6256,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 +6280,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 +6582,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 +8170,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 +8508,15 @@
     min-width: 0;
     text-align: left;
   }
+  .hs-dashboard-short {
+    width: auto;
+  }
+  .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 +8548,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 +9012,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 +9022,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 +9039,7 @@
   .hs-key-control {
     display: inline-flex;
     align-items: center;
+    min-height: var(--h-ctl);
     gap: var(--gap-inline);
   }
   .hs-key-binding {
@@ -8898,13 +9100,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;
@@ -9435,6 +9630,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 +11021,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;
@@ -10965,6 +11185,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hearthscale/app-ui",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "The UI kit of a Hearthscale app's view: the design system's tokens, hs-* classes and React parts, and the whole Remix Icon set.",
   "license": "MIT",
   "homepage": "https://hearthscale.com/docs/developers/views/kit",
@@ -76,7 +76,7 @@
     "rollup": "^4.62.2",
     "rollup-plugin-dts": "^6.5.1",
     "typescript": "^5.6.0",
-    "@hearthscale/ui": "0.1.0"
+    "@hearthscale/ui": "0.3.0"
   },
   "scripts": {
     "build": "node scripts/icon-names.mjs && node scripts/build.mjs",