@lynn123411/dsh-model-submenu 0.3.5 → 0.3.11

package/src/client/slider.ts

@@ -0,0 +1,98 @@
+/**
+ * Geometry of the discrete effort slider.
+ *
+ * The track is a capsule and the knob a slightly larger circle riding on it, so
+ * the knob overhangs the track instead of merging with its rounded end. The
+ * knob's centre travels between two points inset by the knob's radius, so the
+ * knob never runs past either end. A pointer position becomes a position along
+ * that travel; a position becomes the detent nearest it, or the CSS lengths that
+ * put the knob and the fill there.
+ */
+
+/**
+ * Track height in CSS pixels; the stylesheet keeps the same value. Half of it is
+ * the radius of the track's ends and of the fill's cap.
+ */
+export const TRACK_HEIGHT = 16;
+
+/**
+ * Knob diameter in CSS pixels. It is larger than the track, so the knob reads as
+ * a knob riding on the track rather than as the track's own end cap.
+ */
+export const KNOB_SIZE = 20;
+
+/** The knob's centre keeps its own radius away from either end of the track. */
+const KNOB_RADIUS = KNOB_SIZE / 2;
+
+/**
+ * @param index - detent index.
+ * @param count - number of detents.
+ * @returns the knob centre as a fraction of the track, 0 at the first detent and 1 at the last.
+ */
+export function offsetOf(index: number, count: number): number {
+  if (count <= 1) return 0;
+  const clamped = Math.min(Math.max(index, 0), count - 1);
+  return clamped / (count - 1);
+}
+
+/**
+ * Where a pointer sits along the knob's travel. The drag reads this rather than a
+ * detent, so the knob follows the pointer instead of jumping a level at a time.
+ * @param clientX - pointer position in viewport coordinates.
+ * @param left - the track's left edge in viewport coordinates.
+ * @param width - the track's width in pixels.
+ * @returns the position as a fraction of the travel, clamped to 0 and 1.
+ */
+export function fractionAt(clientX: number, left: number, width: number): number {
+  const usable = width - KNOB_SIZE;
+  if (usable <= 0) return 0;
+  const fraction = (clientX - left - KNOB_RADIUS) / usable;
+  return Math.min(Math.max(fraction, 0), 1);
+}
+
+/**
+ * @param fraction - a knob position between 0 and 1.
+ * @param count - number of detents.
+ * @returns the detent nearest that position.
+ */
+export function detentAt(fraction: number, count: number): number {
+  if (count <= 1) return 0;
+  const clamped = Math.min(Math.max(fraction, 0), 1);
+  return Math.round(clamped * (count - 1));
+}
+
+/**
+ * @param clientX - pointer position in viewport coordinates.
+ * @param left - the track's left edge in viewport coordinates.
+ * @param width - the track's width in pixels.
+ * @param count - number of detents.
+ * @returns the detent nearest the pointer, clamped to the two ends.
+ */
+export function stepAt(clientX: number, left: number, width: number, count: number): number {
+  if (count <= 1) return 0;
+  return detentAt(fractionAt(clientX, left, width), count);
+}
+
+/**
+ * @param fraction - a knob position between 0 and 1.
+ * @returns the CSS length that puts the knob centre there, inset at both ends.
+ */
+export function knobOffset(fraction: number): string {
+  const clamped = Math.min(Math.max(fraction, 0), 1);
+  return `calc(${KNOB_RADIUS}px + ${clamped} * (100% - ${KNOB_SIZE}px))`;
+}
+
+/**
+ * Width of the colored fill for a knob position.
+ *
+ * The fill is the track's own shape cut at the knob: its right cap carries the
+ * track's radius and ends under the knob, so the color runs into the knob
+ * instead of stopping at a straight edge, and the last detent reaches the track's
+ * end rather than the knob's centre.
+ * @param fraction - a knob position between 0 and 1.
+ * @returns the CSS width of the fill.
+ */
+export function fillWidth(fraction: number): string {
+  const clamped = Math.min(Math.max(fraction, 0), 1);
+  return `calc(${TRACK_HEIGHT}px + ${clamped} * (100% - ${TRACK_HEIGHT}px))`;
+}

package/src/client/ModelSubmenu.module.css

@@ -1,509 +0,0 @@
-/*
- * The composer model seat and the picker it opens. The menu surface renders
- * through the primitives' MenuSurface and the dialog through Modal, so neither
- * this file paints a floating fill — it only places content on the surfaces
- * those two own.
- */
-
-.root {
-  min-width: 0;
-  position: relative;
-  display: flex;
-}
-
-/* The Models glyph replaces the text when the composer row cannot fit it; the
- * row owns both variables, so this plugin follows the same compact contract as
- * the built-in occupant. */
-.trigger {
-  min-width: 0;
-  max-width: min(360px, 45cqw);
-  height: 28px;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 24px;
-  outline: none;
-  align-items: center;
-  gap: 4px;
-  padding: 0 4px 0 8px;
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 20px;
-  display: flex;
-}
-
-.trigger:hover:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.trigger:focus-visible {
-  box-shadow: 0 0 0 2px var(--dsw-alias-border-l3);
-}
-
-.trigger:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-}
-
-.triggerLabel {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  overflow: hidden;
-  display: var(--dsh-composer-model-text-display, block);
-}
-
-/* The effort caption is the accent the reference UI uses to say "this is the
- * thinking level in force"; it carries no extra meaning of its own. */
-.triggerEffort {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-  color: var(--dsw-alias-state-business-primary);
-  flex-shrink: 1000;
-  overflow: hidden;
-  display: var(--dsh-composer-model-text-display, block);
-}
-
-.triggerIcon {
-  flex: 0 0 auto;
-  display: var(--dsh-composer-model-icon-display, none);
-}
-
-.triggerBadge {
-  flex: none;
-  margin-inline-end: 4px;
-}
-
-.rowBadge {
-  flex: none;
-  margin-inline-start: 6px;
-}
-
-.chevron {
-  color: var(--dsw-alias-label-caption);
-  flex: none;
-  transition: transform .12s;
-}
-
-.chevronOpen {
-  transform: rotate(180deg);
-}
-
-.menu {
-  z-index: 1100;
-  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
-  /* A fixed width keeps the card independent of the trigger's text length, so
-   * opening the menu never reflows the composer. */
-  box-sizing: border-box;
-  width: min(252px, calc(100vw - 24px));
-  max-height: var(--dsh-anchored-max-height, min(70vh, calc(100vh - 96px)));
-  box-shadow: var(--dsw-elevation-prominent);
-  color: var(--dsw-alias-label-primary);
-  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
-  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
-  border: 0;
-  flex-direction: column;
-  padding: 4px;
-  display: flex;
-  position: fixed;
-  overflow: hidden;
-}
-
-/* The provider name is a heading, not a control: it says which provider's
- * models the list below belongs to. */
-.providerName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-height: 24px;
-  color: var(--dsw-alias-label-tertiary);
-  align-items: center;
-  padding: 3px 8px;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 18px;
-  overflow: hidden;
-  display: flex;
-}
-
-.groups {
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.row {
-  align-items: center;
-  gap: 2px;
-  display: flex;
-}
-
-.rowPick {
-  box-sizing: border-box;
-  /* A slightly tighter side padding buys the name a few more characters, which
-   * is what keeps a long provider suffix readable inside a narrow card. */
-  padding-inline: 6px;
-  /* The scroll list is a block container, so a flex item's `flex: 1` does
-   * nothing here: the row must claim the full width or a long model name pushes
-   * the favorite mark and the check past the card's edge, where overflow clips
-   * them. */
-  width: 100%;
-  flex: 1;
-  min-width: 0;
-  min-height: 34px;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 10px;
-  outline: none;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 7px;
-  display: flex;
-}
-
-.rowPick:hover:not(:disabled),
-.rowPick:focus-visible {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.rowPick:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-}
-
-.rowCopy {
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-}
-
-.rowName {
-  color: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 11.5px;
-  font-weight: 400;
-  line-height: 17px;
-  overflow: hidden;
-}
-
-/* The menu's names carry the weight: at this size a regular face reads thin
- * against the card. The picker's rows keep theirs regular — there the metadata
- * line already separates the rows. */
-.menu .rowName {
-  font-weight: 600;
-}
-
-.rowMeta {
-  color: var(--dsw-alias-label-tertiary);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 12px;
-  line-height: 18px;
-  overflow: hidden;
-}
-
-.check {
-  color: var(--dsw-alias-label-primary);
-  flex: 0 0 15px;
-  place-items: center;
-  display: grid;
-}
-
-/* The menu's favorite mark: it lives inside the row button, so hovering it
- * highlights the row and clicking it picks the model — no separate hit area. */
-.starStatic {
-  color: var(--dsw-alias-state-warn-primary);
-  flex: none;
-  place-items: center;
-  width: 14px;
-  display: grid;
-}
-
-/* The picker's star is a real control: outline until hover or focus, solid and
- * gold once favorited, and visible without hover on touch screens. */
-.starButton {
-  color: var(--dsw-alias-label-tertiary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 8px;
-  outline: none;
-  flex: none;
-  place-items: center;
-  width: 26px;
-  height: 26px;
-  display: grid;
-  opacity: 0;
-}
-
-.starButton:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l3);
-}
-
-.row:hover .starButton,
-.row:focus-within .starButton {
-  opacity: 1;
-}
-
-.starButton[aria-pressed='true'] {
-  color: var(--dsw-alias-state-warn-primary);
-  opacity: 1;
-}
-
-@media (hover: none) {
-  .starButton {
-    opacity: 1;
-  }
-}
-
-.star {
-  flex: none;
-}
-
-.divider {
-  height: .5px;
-  background: var(--dsw-alias-border-l2);
-  flex: none;
-  margin: 3px 2px;
-}
-
-.effortRow {
-  align-items: center;
-  gap: 6px;
-  padding: 3px 6px;
-  display: flex;
-}
-
-.effortHeading {
-  color: var(--dsw-alias-label-primary);
-  flex: none;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-/* The segments scroll sideways rather than wrap, so the row keeps one height
- * however many levels a model advertises. */
-.effortTrack {
-  background: var(--dsw-alias-interactive-bg-hover);
-  border-radius: 999px;
-  align-items: center;
-  gap: 1px;
-  min-width: 0;
-  margin-left: auto;
-  padding: 2px;
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.effortTrack::-webkit-scrollbar {
-  display: none;
-}
-
-.effortSegment {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 999px;
-  outline: none;
-  flex: none;
-  padding: 2px 7px;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.effortSegment:hover:not(:disabled) {
-  color: var(--dsw-alias-label-primary);
-}
-
-.effortSegment[aria-checked='true'] {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-layer-1);
-  box-shadow: var(--dsw-elevation-soft);
-  font-weight: 600;
-}
-
-.effortSegment:disabled {
-  color: var(--dsw-alias-label-dimmed);
-  cursor: default;
-}
-
-.effortSegment:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l3);
-  outline-offset: -2px;
-}
-
-.hint {
-  color: var(--dsw-alias-label-tertiary);
-  margin: 0;
-  padding: 6px 8px;
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.moreRow {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 10px;
-  outline: none;
-  align-items: center;
-  gap: 6px;
-  min-height: 32px;
-  padding: 5px 8px;
-  font-size: 12px;
-  line-height: 18px;
-  display: flex;
-}
-
-.moreRow:hover,
-.moreRow:focus-visible {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.moreIcon {
-  color: var(--dsw-alias-label-tertiary);
-  flex: none;
-}
-
-.notice {
-  color: var(--dsw-alias-label-tertiary);
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 6px 10px;
-  font-size: 12px;
-  line-height: 18px;
-  display: flex;
-}
-
-.retry {
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  flex: none;
-  padding: 0;
-  font-weight: 600;
-  text-decoration: underline;
-}
-
-/* ── the picker dialog ───────────────────────────────────────────────────── */
-
-.pickerDialog {
-  width: min(680px, 100%);
-  height: min(640px, 80vh);
-  gap: 0;
-  padding: 0;
-}
-
-.pickerContent {
-  min-height: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Modal wraps children in a body row of its own; that row — the content
- * region's last child — is what has to carry the column and give the list its
- * remaining height, so the footer stays put while the list scrolls. */
-.pickerContent > :last-child {
-  min-height: 0;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.pickerSearch {
-  padding: 0 20px 12px;
-}
-
-.pickerSearchInput {
-  width: 100%;
-}
-
-/* The tabs scroll sideways rather than wrap: the dialog keeps one row of
- * providers however many the catalog has, so the list below starts at the same
- * height every time. The bar keeps its hairline and hides its scrollbar the way
- * the effort track does. */
-.pickerTabs {
-  border-bottom: .5px solid var(--dsw-alias-border-l2);
-  gap: 2px;
-  padding: 0 16px;
-  display: flex;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  scrollbar-width: none;
-}
-
-.pickerTabs::-webkit-scrollbar {
-  display: none;
-}
-
-.pickerTab {
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-  background: 0 0;
-  border: none;
-  border-radius: 8px;
-  outline: none;
-  flex: none;
-  padding: 6px 10px;
-  font-size: 13px;
-  line-height: 18px;
-  white-space: nowrap;
-}
-
-.pickerTab:hover {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.pickerTab[aria-selected='true'] {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-  font-weight: 600;
-}
-
-.pickerTab:focus-visible {
-  outline: 2px solid var(--dsw-alias-border-l3);
-}
-
-.pickerList {
-  min-height: 0;
-  flex: 1;
-  padding: 8px 12px;
-  overflow-y: auto;
-}
-
-.pickerFooter {
-  border-top: .5px solid var(--dsw-alias-border-l2);
-  color: var(--dsw-alias-label-tertiary);
-  align-items: center;
-  gap: 6px;
-  padding: 10px 20px;
-  font-size: 12px;
-  line-height: 18px;
-  display: flex;
-}
-
-.footerHint {
-  align-items: center;
-  gap: 6px;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.footerDot {
-  color: var(--dsw-alias-label-dimmed);
-}