@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/_chunk/meter.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.jsx","names":[],"sources":["../../src/meter/PixelMeter.tsx","../../src/meter/index.tsx"],"sourcesContent":["// Local addition — no S2 counterpart. See the JSDoc on PixelMeter below.\n\nimport { For, Show, createMemo } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport {\n  Label as HeadlessLabel,\n  Meter as HeadlessMeter,\n} from \"@proyecto-viviana/solidaria-components\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { tglRingBlink } from \"../style/motion\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport { getAllowedOverrides } from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type { RefLike } from \"../button/spectrum-context\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\n/** The three pixel forms the register draws a measurement in. */\nexport type PixelMeterShape = \"row\" | \"ring\" | \"grid\";\n/** The register's four status channels; the ink the lit cells take. */\nexport type PixelMeterChannel = \"info\" | \"signal\" | \"metric\" | \"fault\";\n/**\n * How many ink strengths the cells use, counting the unlit rest state: `2` is\n * rest + full (the streak row), `4` is the activity map's rest + three heats.\n */\nexport type PixelMeterLevels = 2 | 3 | 4;\n\nexport interface PixelMeterProps {\n  /** Which pixel form to draw. @default 'row' */\n  shape?: PixelMeterShape;\n  /** The current value (controlled). @default 0 */\n  value?: number;\n  /**\n   * The largest value allowed. In `row` it also sets the block count (the streak\n   * length), clamped to 64. `ring` is always 16 blocks and `grid` always 26 × 7.\n   * @default 14 for `row`, 16 for `ring`, 182 for `grid`\n   */\n  maxValue?: number;\n  /**\n   * The number of ink strengths, rest included.\n   * @default 2 for `row` and `ring`, 4 for `grid`\n   */\n  levels?: PixelMeterLevels;\n  /** The status channel the lit cells take their ink from. @default 'info' */\n  channel?: PixelMeterChannel;\n  /** The meter's visible label, and its accessible name. `ring` centres it. */\n  label?: JSX.Element;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  id?: string;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-details\"?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\n/* Geometry. The handoff draws the ring as 16 blocks on a circle, not as an arc —\n * the same construction ProgressCircle's L ring uses (6px blocks, radius 26, in a\n * 64px box), computed once at module load so server and client agree. */\nconst RING_COUNT = 16;\nconst RING_BOX = 64;\nconst RING_RADIUS = 26;\nconst RING_BLOCK = 6;\nconst GRID_COLUMNS = 26;\nconst GRID_ROWS = 7;\nconst GRID_COUNT = GRID_COLUMNS * GRID_ROWS;\nconst ROW_DEFAULT_MAX = 14;\nconst ROW_MAX_BLOCKS = 64;\n\nconst RING_POSITIONS = Array.from({ length: RING_COUNT }, (_, i) => {\n  const a = (i / RING_COUNT) * Math.PI * 2 - Math.PI / 2;\n  return {\n    x: Math.round(RING_BOX / 2 + RING_RADIUS * Math.cos(a) - RING_BLOCK / 2),\n    y: Math.round(RING_BOX / 2 + RING_RADIUS * Math.sin(a) - RING_BLOCK / 2),\n  };\n});\n\n/* The register's ring chase, shared through style/motion.ts (2.6s, step-end,\n * staggered 0.16s per block) so it cannot drift from ProgressCircle's ring. */\nconst ringBlink = tglRingBlink();\n\ntype CellInk = \"rest\" | \"low\" | \"mid\" | \"full\";\n\ntype PixelMeterStyleState = {\n  shape: PixelMeterShape;\n  channel: PixelMeterChannel;\n};\n\ntype CellStyleState = PixelMeterStyleState & {\n  ink: CellInk;\n  isLead: boolean;\n};\n\nconst wrapperStyles = style<PixelMeterStyleState>(\n  {\n    display: \"flex\",\n    flexDirection: \"column\",\n    rowGap: 4,\n    alignItems: \"start\",\n    width: \"fit\",\n    /* Containing block for the ring's centred label, which must stay OUTSIDE the\n     * aria-hidden cell container: it is the meter's <label>, and burying a\n     * labelledby target in a hidden subtree is how an accessible name goes empty. */\n    position: {\n      shape: {\n        ring: \"relative\",\n      },\n    },\n  },\n  getAllowedOverrides(),\n);\n\n/* One ink source for every cell, so a channel change is a single custom-property\n * swap instead of four duplicated colour conditions per level. The four values are\n * the register's status channels — the same tokens a StatusLight dot and a log line\n * report with, so a metric meter can never drift into a different cyan. */\nconst fieldStyles = style<PixelMeterStyleState>({\n  \"--pv-pixel-ink\": {\n    type: \"backgroundColor\",\n    value: {\n      default: \"[var(--status-info)]\",\n      channel: {\n        signal: \"[var(--status-signal)]\",\n        metric: \"[var(--status-metric)]\",\n        fault: \"[var(--status-fault)]\",\n      },\n      forcedColors: \"ButtonText\",\n    },\n  },\n  display: {\n    shape: {\n      row: \"flex\",\n      ring: \"block\",\n      grid: \"grid\",\n    },\n  },\n  alignItems: {\n    shape: {\n      row: \"center\",\n    },\n  },\n  columnGap: {\n    shape: {\n      row: \"[3px]\",\n      grid: \"[4px]\",\n    },\n  },\n  rowGap: {\n    shape: {\n      grid: \"[4px]\",\n    },\n  },\n  gridTemplateColumns: {\n    shape: {\n      grid: \"[repeat(26, 1fr)]\",\n    },\n  },\n  gridAutoRows: {\n    shape: {\n      grid: \"[16px]\",\n    },\n  },\n  width: {\n    shape: {\n      ring: 64,\n      grid: \"full\",\n    },\n  },\n  height: {\n    shape: {\n      ring: 64,\n    },\n  },\n});\n\nconst cellStyles = style<CellStyleState>({\n  boxSizing: \"border-box\",\n  position: {\n    shape: {\n      ring: \"absolute\",\n    },\n  },\n  width: {\n    shape: {\n      row: 10,\n      ring: 6,\n      grid: \"full\",\n    },\n  },\n  height: {\n    shape: {\n      row: 10,\n      ring: 6,\n      grid: \"full\",\n    },\n  },\n  /* Rest is the register's hairline, not a dim tint of the channel: an unlit cell\n   * reports \"nothing here\", and tinting it with the channel makes an empty meter\n   * read as a very low reading. The lit strengths are the handoff's activity ramp\n   * (28% / 62% / full), mixed off the one ink property above. */\n  backgroundColor: {\n    ink: {\n      rest: \"[var(--border-subtle)]\",\n      low: \"[color-mix(in srgb, var(--pv-pixel-ink) 28%, transparent)]\",\n      mid: \"[color-mix(in srgb, var(--pv-pixel-ink) 62%, transparent)]\",\n      full: \"[var(--pv-pixel-ink)]\",\n    },\n    isLead: \"transparent\",\n    forcedColors: {\n      ink: {\n        rest: \"Background\",\n        low: \"ButtonText\",\n        mid: \"ButtonText\",\n        full: \"ButtonText\",\n      },\n    },\n  },\n  /* The leading edge is the one cell in flight: the register's ordered dither, a\n   * conic checker at 3px, so the surface shows through its off quarters. */\n  backgroundImage: {\n    isLead: \"[repeating-conic-gradient(var(--pv-pixel-ink) 0% 25%, transparent 0% 50%)]\",\n    forcedColors: \"none\",\n  },\n  backgroundSize: {\n    isLead: \"[3px 3px]\",\n  },\n  boxShadow: \"edge-glass\",\n  /* Only the ring blinks — a chase around a circle reads as live work; the same\n   * blink on a 182-cell map is a strobe. Gate is the CSS media condition, never a\n   * runtime matchMedia read: Solid hydration trusts the server DOM (see Badge). */\n  animation: {\n    shape: {\n      ring: {\n        default: ringBlink,\n        \"@media (prefers-reduced-motion: reduce)\": \"none\",\n      },\n    },\n  },\n  animationDuration: {\n    shape: {\n      ring: 2600,\n    },\n  },\n  animationTimingFunction: {\n    shape: {\n      ring: \"[step-end]\",\n    },\n  },\n  animationIterationCount: {\n    shape: {\n      ring: \"infinite\",\n    },\n  },\n});\n\nconst labelStyles = style({\n  font: \"ui-sm\",\n  color: \"neutral\",\n});\n\n/* The ring's label sits in the hole, which is where the register puts the readout;\n * it is the same <label> element, only positioned. */\nconst ringLabelStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  pointerEvents: \"none\",\n  font: \"title-xs\",\n  color: \"neutral\",\n});\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction getDataAttributes(source: object): JSX.HTMLAttributes<HTMLDivElement> {\n  const record = source as Record<string, unknown>;\n  const attributes: Record<string, string | undefined> = {};\n  for (const key in record) {\n    if (key.startsWith(\"data-\")) {\n      const value = record[key];\n      attributes[key] = value == null ? undefined : String(value);\n    }\n  }\n  return attributes as JSX.HTMLAttributes<HTMLDivElement>;\n}\n\n/**\n * A meter drawn as discrete pixel cells — the register's streak row, pixel ring\n * and activity map — instead of a continuous bar.\n *\n * Local addition — no S2 counterpart. It wraps the same headless Meter as\n * {@link Meter}, so the root keeps `role=\"meter\"` with `aria-valuenow`/`min`/`max`\n * and an accessible name from `label`; the cells are decoration and are hidden\n * from assistive technology.\n *\n * The fill rule is one rule in all three shapes: the value quantizes to a lit cell\n * count, the cells before the boundary are lit (fading over the last `levels - 1`\n * of them), the cell at the boundary is the dithered leading edge, and the rest sit\n * on the hairline.\n */\nexport function PixelMeter(props: PixelMeterProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"shape\",\n    \"value\",\n    \"maxValue\",\n    \"levels\",\n    \"channel\",\n    \"label\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"id\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n  ]);\n  const shape = () => local.shape ?? \"row\";\n  const channel = () => local.channel ?? \"info\";\n  const state = (): PixelMeterStyleState => ({ shape: shape(), channel: channel() });\n  const cellCount = createMemo(() => {\n    switch (shape()) {\n      case \"ring\":\n        return RING_COUNT;\n      case \"grid\":\n        return GRID_COUNT;\n      default: {\n        const max = local.maxValue ?? ROW_DEFAULT_MAX;\n        return Number.isFinite(max) && max >= 1\n          ? clamp(Math.round(max), 1, ROW_MAX_BLOCKS)\n          : ROW_DEFAULT_MAX;\n      }\n    }\n  });\n  const maxValue = () => {\n    if (local.maxValue != null) return local.maxValue;\n    return shape() === \"row\" ? ROW_DEFAULT_MAX : cellCount();\n  };\n  const levels = (): PixelMeterLevels => local.levels ?? (shape() === \"grid\" ? 4 : 2);\n  const litCount = (percentage: number) =>\n    clamp(Math.round((percentage / 100) * cellCount()), 0, cellCount());\n  /* Depth back from the boundary picks the strength: the last lit cell is the\n   * dimmest available one, and everything `levels - 1` cells or further back is\n   * full. With `levels` 2 there is no partial strength and every lit cell is full,\n   * which is exactly the streak row. */\n  const inkFor = (index: number, lit: number): CellInk => {\n    if (index >= lit) return \"rest\";\n    const depth = lit - index;\n    const strengths: CellInk[] =\n      levels() === 4 ? [\"low\", \"mid\", \"full\"] : levels() === 3 ? [\"mid\", \"full\"] : [\"full\"];\n    return strengths[Math.min(depth, strengths.length) - 1]!;\n  };\n  const isLead = (index: number, lit: number) => index === lit && lit > 0 && lit < cellCount();\n  const resolvedStyles = () => (typeof local.styles === \"function\" ? local.styles() : local.styles);\n\n  return (\n    <HeadlessMeter\n      {...getDataAttributes(props)}\n      id={local.id}\n      value={local.value}\n      maxValue={maxValue()}\n      aria-label={local[\"aria-label\"]}\n      aria-labelledby={local[\"aria-labelledby\"]}\n      aria-describedby={local[\"aria-describedby\"]}\n      aria-details={local[\"aria-details\"]}\n      ref={local.ref}\n      class={[local.UNSAFE_className, wrapperStyles(state(), resolvedStyles())]\n        .filter(Boolean)\n        .join(\" \")}\n      style={local.UNSAFE_style}\n      slot={local.slot ?? undefined}\n    >\n      {({ percentage }) => (\n        <>\n          <Show when={shape() !== \"ring\" && local.label != null}>\n            <HeadlessLabel class={labelStyles}>{local.label}</HeadlessLabel>\n          </Show>\n          <div class={fieldStyles(state())} aria-hidden=\"true\">\n            <For each={Array.from({ length: cellCount() })}>\n              {(_, index) => {\n                const lit = () => litCount(percentage);\n                const position = () =>\n                  shape() === \"ring\" ? RING_POSITIONS[index() % RING_COUNT]! : undefined;\n                return (\n                  <div\n                    class={cellStyles({\n                      ...state(),\n                      ink: inkFor(index(), lit()),\n                      isLead: isLead(index(), lit()),\n                    })}\n                    style={\n                      shape() === \"ring\"\n                        ? {\n                            left: `${position()!.x}px`,\n                            top: `${position()!.y}px`,\n                            /* The handoff's stagger: i × 0.16s inside the 2.6s\n                             * loop. Inert once the media gate zeroes the name. */\n                            \"animation-delay\": `${(index() * 0.16).toFixed(2)}s`,\n                          }\n                        : undefined\n                    }\n                  />\n                );\n              }}\n            </For>\n          </div>\n          <Show when={shape() === \"ring\" && local.label != null}>\n            <HeadlessLabel class={ringLabelStyles}>{local.label}</HeadlessLabel>\n          </Show>\n        </>\n      )}\n    </HeadlessMeter>\n  );\n}\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Meter.tsx\n\n// Port of packages/@react-spectrum/s2/src/Meter.tsx.\n\nimport { For, createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  Label as HeadlessLabel,\n  Meter as HeadlessMeter,\n} from \"@proyecto-viviana/solidaria-components\";\nimport { SkeletonWrapper } from \"../skeleton\";\nimport { Text } from \"../text\";\nimport type { StyleString } from \"../style\";\nimport { lightDark, style } from \"../style\" with { type: \"macro\" };\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  centerPadding,\n  controlSize,\n  fieldInput,\n  fieldLabel,\n  fieldValue,\n  getAllowedOverrides,\n  staticColor as staticColorStyles,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\n\ntype MeterSize = \"S\" | \"M\" | \"L\" | \"XL\";\n/* `metric` is the register's fourth status channel — the cyan that reports a\n * measurement rather than a state. Badge and StatusLight already expose it; without it\n * a metric meter has to borrow `informative`, which is a different channel reporting a\n * different thing. Local addition — no S2 counterpart. */\ntype MeterVariant = \"informative\" | \"positive\" | \"notice\" | \"negative\" | \"metric\";\n/* `success` and `warning` are accepted alias names for `positive`/`notice` — the\n * negative/warning/success status trio Button and Badge also expose — folded onto\n * the canonical channel by normalizeVariant before styling. */\ntype MeterVariantProp = MeterVariant | \"success\" | \"warning\";\ntype MeterStaticColor = \"white\" | \"black\" | \"auto\";\ntype MeterLabelPosition = \"top\" | \"side\";\n\nfunction normalizeVariant(variant: MeterVariantProp | undefined): MeterVariant {\n  switch (variant) {\n    case \"success\":\n      return \"positive\";\n    case \"warning\":\n      return \"notice\";\n    default:\n      return variant ?? \"informative\";\n  }\n}\n\nexport interface MeterProps {\n  /** The current value (controlled). @default 0 */\n  value?: number;\n  /** The smallest value allowed. @default 0 */\n  minValue?: number;\n  /** The largest value allowed. @default 100 */\n  maxValue?: number;\n  /** The content to display as the value's label (e.g. \"75 GB\"). */\n  valueLabel?: JSX.Element;\n  /** The display format of the value label. */\n  formatOptions?: Intl.NumberFormatOptions;\n  /** The size of the meter. @default 'M' */\n  size?: MeterSize;\n  /**\n   * Render the meter as this many discrete blocks instead of a continuous bar —\n   * the register's `[▮▮▮▯▯]` capacity form (Panel07's focus/streak/xp/memory\n   * rows, TerminalGlassLab.tsx:914-931). The value quantizes to\n   * `round(fraction × segments)` filled blocks; the accessible value stays\n   * continuous.\n   */\n  segments?: number;\n  /**\n   * The visual style variant. `success`/`warning` alias `positive`/`notice`.\n   * `metric` is a local addition — no S2 counterpart — for the register's cyan\n   * measurement channel.\n   * @default 'informative'\n   */\n  variant?: MeterVariantProp;\n  /** The label to display above the meter. */\n  label?: JSX.Element;\n  /** The static color style to apply over a color background. */\n  staticColor?: MeterStaticColor;\n  /** The label's overall position relative to the meter. @default 'top' */\n  labelPosition?: MeterLabelPosition;\n  /** Spectrum-defined generated classes. */\n  styles?: StyleString | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  id?: string;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-details\"?: string;\n  [key: `data-${string}`]: string | undefined;\n}\n\nexport const MeterContext = createContext<SpectrumContextValue<MeterProps>>(null);\n\ntype MeterStyleState = {\n  size: MeterSize;\n  variant: MeterVariant;\n  staticColor?: MeterStaticColor;\n  labelPosition: MeterLabelPosition;\n  labelAlign?: \"start\" | \"end\";\n  isStaticColor: boolean;\n  isSegmented: boolean;\n};\n\nconst wrapperStyles = style<MeterStyleState>(\n  {\n    ...staticColorStyles(),\n    position: \"relative\",\n    display: \"grid\",\n    gridTemplateColumns: {\n      labelPosition: {\n        top: [\"1fr\", \"auto\"],\n        side: [\"auto\", \"1fr\"],\n      },\n    },\n    gridTemplateAreas: {\n      labelPosition: {\n        top: [\"label value\", \"bar bar\"],\n        side: [\"label bar value\"],\n      },\n    },\n    alignItems: \"baseline\",\n    isolation: \"isolate\",\n    minWidth: 48,\n    maxWidth: 768,\n    \"--field-height\": {\n      type: \"height\",\n      value: controlSize(),\n    },\n    \"--track-to-label\": {\n      type: \"height\",\n      value: 4,\n    },\n    \"--field-gap\": {\n      type: \"rowGap\",\n      value: centerPadding(\"calc(var(--field-height) + var(--track-to-label))\"),\n    },\n    columnGap: 12,\n  },\n  getAllowedOverrides(),\n);\n\nconst labelWrapperStyles = style<MeterStyleState>({\n  gridArea: \"label\",\n  display: \"inline\",\n  textAlign: {\n    labelAlign: {\n      start: \"start\",\n      end: \"end\",\n    },\n  },\n  paddingBottom: {\n    labelPosition: {\n      top: \"--field-gap\",\n    },\n  },\n  contain: {\n    labelPosition: {\n      /* Size containment here relies on the bar row to size the grid — the\n       * continuous track advertises a 208px intrinsic width (fieldInput's\n       * containIntrinsicWidth). The segment row is content-sized (a handful of\n       * 7px blocks), so with segments the label must contribute its own width\n       * or the value overprints it. */\n      top: {\n        default: \"inline-size\",\n        isSegmented: \"none\",\n      },\n    },\n  },\n});\n\nconst labelStyles = style<MeterStyleState>({\n  ...fieldLabel(),\n});\n\nconst valueStyles = style<MeterStyleState>({\n  ...fieldValue(),\n  gridArea: \"value\",\n});\n\nconst trackStyles = style<MeterStyleState>({\n  ...fieldInput(),\n  gridArea: \"bar\",\n  /* Containing block for the rim overlay below. wrapperStyles above is already\n   * `position: \"relative\"`, so without this the overlay's `inset: 0` would\n   * resolve against the whole component and rim the label and value rows too.\n   * `zIndex: 1` below is unaffected: it already applied without positioning\n   * (the track is a grid item), and it keeps applying now. */\n  position: \"relative\",\n  overflow: \"hidden\",\n  /* Square, matching ProgressBar's track. The register's bar primitive (the XP\n   * bar in design-handoff-v2/TerminalGlassLab.tsx) declares no border-radius on\n   * either the track or the fill, so both compute to 0. */\n  borderRadius: \"none\",\n  backgroundColor: {\n    /* The register's recessed surface: the same `var(--surface-inset)` the\n     * handoff's bar track paints, and the same one ProgressBar uses. */\n    default: \"pasteboard\",\n    isStaticColor: \"transparent-overlay-300\",\n    forcedColors: \"ButtonFace\",\n  },\n  outlineWidth: {\n    default: 0,\n    forcedColors: 1,\n  },\n  outlineStyle: {\n    default: \"none\",\n    forcedColors: \"solid\",\n  },\n  outlineColor: {\n    default: \"transparent\",\n    forcedColors: \"ButtonText\",\n  },\n  zIndex: 1,\n  /* The register's bar is 8px, so the band is shifted one rung up to put the DEFAULT\n   * size on the drawn value instead of two rungs under it. Four distinct rungs are\n   * kept — the size axis still moves, it just starts where the register draws. */\n  height: {\n    default: 8,\n    size: {\n      S: 6,\n      M: 8,\n      L: 10,\n      XL: 12,\n    },\n  },\n});\n\n/* The rim goes on its own absolutely-positioned layer rather than on trackStyles,\n * which is how the handoff paints it too (design-handoff-v2/TerminalGlassLab.tsx\n * lays an `inset: 0` / `pointer-events: none` / `box-shadow: var(--edge-glass)`\n * div over the bar's fills). The reason it cannot live on the track: an inset\n * box-shadow is painted with the element's own background, beneath every in-flow\n * descendant. `overflow: hidden` clips the fill but does not lift the track's\n * inset shadow above it, so a rim declared on the track would be occluded across\n * the filled fraction and survive only on the empty remainder — a half-rim that\n * reads as a bug. Kept local rather than shared with ProgressBar: the two have no\n * common style module today and inventing one widens a two-site fix. */\nconst trackRimStyles = style({\n  position: \"absolute\",\n  inset: 0,\n  pointerEvents: \"none\",\n  borderRadius: \"inherit\",\n  boxShadow: \"edge-glass\",\n});\n\n/* One channel map, three call sites: the bar's fill, and the blocks' border and their\n * fill. The register reports a status with a CHANNEL TOKEN, not with a ramp stop —\n * `--status-info` · `--status-signal` · `--status-metric` · `--status-fault` are the\n * same four a log line and a StatusLight dot use, so a meter can no longer drift into\n * a different red from the dot reporting the same fault. They are the ink-strength\n * stops of each channel deliberately: a bar is a non-text graphic held to 3:1, and the\n * raw signal FILL (`--yellow-500`) reads ~1.6:1 against a daylight track where\n * `--status-signal` clears the floor. `positive` has no status channel — success is the\n * library's own green — and keeps its ramp pair. */\nconst channelFill = {\n  default: \"[var(--status-info)]\",\n  variant: {\n    positive: lightDark(\"positive-800\", \"positive-900\"),\n    notice: \"[var(--status-signal)]\",\n    negative: \"[var(--status-fault)]\",\n    metric: \"[var(--status-metric)]\",\n  },\n} as const;\n\nconst fillStyles = style<MeterStyleState>({\n  height: \"full\",\n  borderStyle: \"none\",\n  borderRadius: \"none\",\n  backgroundColor: {\n    ...channelFill,\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n});\n\n/* The discrete form. The register draws it as literal ▮/▯ glyphs in mono text\n * (TerminalGlassLab.tsx:918: `[▮▮▮▯▯] 3/5`); as a library primitive the blocks\n * are drawn divs at the glyph's box (7×12 — U+25AE's ink at the wells' 11.5px\n * mono), because a glyph's rendered size shifts with the consumer's font stack.\n * Filled and empty share one ink — the glyph pair differs only in fill, and the\n * register keeps channel color OFF the blocks (it lives on the row label). Here\n * the ink follows the variant so the meter still reads outside a well. No rim:\n * the blocks are marks, not a recessed surface. */\n/* Static (no conditions), so the macro yields a string used directly as a\n * class — same pattern as trackRimStyles above. */\nconst segmentRowStyles = style({\n  gridArea: \"bar\",\n  display: \"flex\",\n  alignItems: \"center\",\n  columnGap: \"[3px]\",\n});\n\ntype MeterSegmentStyleState = MeterStyleState & { isFilled: boolean };\n\nconst segmentStyles = style<MeterSegmentStyleState>({\n  width: 7,\n  height: 12,\n  boxSizing: \"border-box\",\n  borderStyle: \"solid\",\n  borderWidth: 1,\n  borderColor: {\n    ...channelFill,\n    isStaticColor: \"transparent-overlay-900\",\n    forcedColors: \"ButtonText\",\n  },\n  backgroundColor: {\n    default: \"transparent\",\n    isFilled: {\n      ...channelFill,\n      isStaticColor: \"transparent-overlay-900\",\n      forcedColors: \"ButtonText\",\n    },\n  },\n});\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max);\n}\n\nfunction stringValueLabel(value: JSX.Element | undefined): string | undefined {\n  if (typeof value === \"string\" || typeof value === \"number\") {\n    return String(value);\n  }\n  return undefined;\n}\n\nfunction getDataAttributes(source: object): JSX.HTMLAttributes<HTMLDivElement> {\n  const record = source as Record<string, unknown>;\n  const attributes: Record<string, string | undefined> = {};\n\n  for (const key in record) {\n    if (key.startsWith(\"data-\")) {\n      const value = record[key];\n      attributes[key] = value == null ? undefined : String(value);\n    }\n  }\n\n  return attributes as JSX.HTMLAttributes<HTMLDivElement>;\n}\n\nexport function Meter(props: MeterProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(MeterContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props) as MeterProps & {\n    class?: string;\n    role?: string;\n    style?: JSX.CSSProperties;\n    showValueLabel?: boolean;\n    children?: JSX.Element;\n  };\n  const [local] = splitProps(merged, [\n    \"value\",\n    \"minValue\",\n    \"maxValue\",\n    \"valueLabel\",\n    \"formatOptions\",\n    \"size\",\n    \"segments\",\n    \"variant\",\n    \"label\",\n    \"staticColor\",\n    \"labelPosition\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"id\",\n    \"aria-label\",\n    \"aria-labelledby\",\n    \"aria-describedby\",\n    \"aria-details\",\n    \"class\",\n    \"role\",\n    \"style\",\n    \"showValueLabel\",\n    \"children\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const variant = () => normalizeVariant(local.variant);\n  const labelPosition = () => local.labelPosition ?? \"top\";\n  const isStaticColor = () => !!local.staticColor;\n  const state = (labelAlign?: \"start\" | \"end\"): MeterStyleState => ({\n    size: size(),\n    variant: variant(),\n    staticColor: local.staticColor,\n    labelPosition: labelPosition(),\n    labelAlign,\n    isStaticColor: isStaticColor(),\n    isSegmented: segmentCount() != null,\n  });\n  const segmentCount = () => {\n    const segments = local.segments;\n    return segments != null && Number.isFinite(segments) && segments >= 1\n      ? Math.floor(segments)\n      : null;\n  };\n  const filledCount = (percentage: number) => {\n    const segments = segmentCount();\n    return segments == null ? 0 : clamp(Math.round((percentage / 100) * segments), 0, segments);\n  };\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n\n  return (\n    <HeadlessMeter\n      {...getDataAttributes(merged)}\n      id={local.id}\n      value={local.value}\n      minValue={local.minValue}\n      maxValue={local.maxValue}\n      valueLabel={stringValueLabel(local.valueLabel)}\n      formatOptions={local.formatOptions}\n      aria-label={local[\"aria-label\"]}\n      aria-labelledby={local[\"aria-labelledby\"]}\n      aria-describedby={local[\"aria-describedby\"]}\n      aria-details={local[\"aria-details\"]}\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n      )}\n      class={[local.UNSAFE_className, wrapperStyles(state(), mergedStyles())]\n        .filter(Boolean)\n        .join(\" \")}\n      style={mergedUnsafeStyle()}\n      slot={local.slot ?? undefined}\n    >\n      {({ percentage, valueText }) => (\n        <>\n          {local.label && (\n            <div class={labelWrapperStyles(state(\"start\"))}>\n              <HeadlessLabel class={labelStyles(state(\"start\"))}>{local.label}</HeadlessLabel>\n            </div>\n          )}\n          {local.label && (\n            <Text styles={valueStyles(state(\"end\"))}>{local.valueLabel ?? valueText}</Text>\n          )}\n          <SkeletonWrapper>\n            {segmentCount() != null ? (\n              <div class={segmentRowStyles} aria-hidden=\"true\">\n                <For each={Array.from({ length: segmentCount() ?? 0 })}>\n                  {(_, index) => (\n                    <div\n                      class={segmentStyles({\n                        ...state(),\n                        isFilled: index() < filledCount(percentage),\n                      })}\n                    />\n                  )}\n                </For>\n              </div>\n            ) : (\n              <div class={trackStyles(state())}>\n                <div class={fillStyles(state())} style={{ width: `${percentage}%` }} />\n                <div aria-hidden=\"true\" class={trackRimStyles} />\n              </div>\n            )}\n          </SkeletonWrapper>\n        </>\n      )}\n    </HeadlessMeter>\n  );\n}\n\nexport { PixelMeter } from \"./PixelMeter\";\nexport type {\n  PixelMeterProps,\n  PixelMeterShape,\n  PixelMeterChannel,\n  PixelMeterLevels,\n} from \"./PixelMeter\";\n"],"mappings":"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"}