@50arms/ui 0.0.0-stage → 35.2.0

package/dist/lib/date-timeline/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.js","sources":["../../../src/lib/date-timeline/scale.ts"],"sourcesContent":["/* ----------------------------------------------------------------------------\n   THE ARITHMETIC OF THE TIMELINE (DXUI-45) — pure functions, no React, so the\n   axis is tested as numbers and not as pixels.\n\n   EVERYTHING IS A \"DAY NUMBER\": whole local calendar days since 1970-01-01 plus\n   the fraction of the local day elapsed. A daylight-saving day is therefore\n   still exactly one unit wide, and a bar's x never depends on the viewer's UTC\n   offset. Unit starts (week, month, quarter) are whole day numbers.\n\n   WHY NOT `lib/time/plain.ts`: its plain dates are whole days. A bar starts and ends at an\n   instant, so the axis needs the fraction of the day as well, and a day number carries it.\n   -------------------------------------------------------------------------- */\n\nimport { DAY_MS } from \"@/components/chart/time-series-scale\";\n\n/** The unit one axis tick spans; it follows the scale (`tickUnitFor`), nobody picks it. */\nexport type DateTimelineUnit = \"days\" | \"weeks\" | \"months\" | \"quarters\";\n\n/** The scale limits, in horizontal pixels per calendar day (DXUI-61): a year is 365px at the least and 43,800px at the most. */\nexport const MIN_PX_PER_DAY = 1;\nexport const MAX_PX_PER_DAY = 120;\n/** The scale a timeline opens at and Ctrl + 0 returns to: about 365px a month. */\nexport const DEFAULT_PX_PER_DAY = 12;\n\n/** Pixels per day from which the axis ticks by day, by week and by month; below the month threshold it ticks by quarter. A tick is never narrower than a label needs. */\nconst DAY_FROM_PX = 60;\nconst WEEK_FROM_PX = 20;\nconst MONTH_FROM_PX = 5;\n\n/** The tick unit the axis uses at this scale. */\nexport function tickUnitFor(pxPerDay: number): DateTimelineUnit {\n  if (pxPerDay >= DAY_FROM_PX) return \"days\";\n  if (pxPerDay >= WEEK_FROM_PX) return \"weeks\";\n  if (pxPerDay >= MONTH_FROM_PX) return \"months\";\n  return \"quarters\";\n}\n\n/** A scale outside the limits, or not a number, is a caller's bug and throws. */\nexport function assertPxPerDay(pxPerDay: number): void {\n  if (!Number.isFinite(pxPerDay) || pxPerDay < MIN_PX_PER_DAY || pxPerDay > MAX_PX_PER_DAY) {\n    throw new Error(`timeline: pxPerDay must be a number from ${MIN_PX_PER_DAY} to ${MAX_PX_PER_DAY}`);\n  }\n}\n\n/** `pxPerDay` held inside the limits. */\nexport function clampPxPerDay(pxPerDay: number): number {\n  return Math.min(MAX_PX_PER_DAY, Math.max(MIN_PX_PER_DAY, pxPerDay));\n}\n\n/** `pxPerDay` times `factor`, held inside the limits. */\nexport function scalePxPerDay(pxPerDay: number, factor: number): number {\n  return clampPxPerDay(pxPerDay * factor);\n}\n\n/** The slider runs 0..100 along the log of the scale, so each step is the same percentage of zoom. */\nexport const ZOOM_SLIDER_MAX = 100;\nconst LOG_SPAN = Math.log(MAX_PX_PER_DAY / MIN_PX_PER_DAY);\n\nexport function pxPerDayToSlider(pxPerDay: number): number {\n  return (Math.log(pxPerDay / MIN_PX_PER_DAY) / LOG_SPAN) * ZOOM_SLIDER_MAX;\n}\n\nexport function sliderToPxPerDay(value: number): number {\n  return clampPxPerDay(MIN_PX_PER_DAY * Math.exp((value / ZOOM_SLIDER_MAX) * LOG_SPAN));\n}\n\n/** `WheelEvent.deltaMode` values for a wheel that reports lines or pages, and the pixels each stands for. */\nconst WHEEL_DELTA_LINE = 1;\nconst WHEEL_DELTA_PAGE = 2;\nconst WHEEL_LINE_PX = 16;\nconst WHEEL_PAGE_PX = 400;\n/** Wheel sensitivity: the natural-log change of the scale per pixel of wheel movement (a 100px notch is e^0.2, about 22%). */\nconst WHEEL_ZOOM_PER_PX = 0.002;\n\n/** The scale after a mouse-wheel (or pinch) movement of `deltaY` px (`deltaMode`: 0 pixels, 1 lines, 2 pages): a 100px notch is about 22%. Scrolling up zooms in. */\nexport function wheelZoomFactor(deltaY: number, deltaMode: number): number {\n  const px = deltaMode === WHEEL_DELTA_LINE ? deltaY * WHEEL_LINE_PX : deltaMode === WHEEL_DELTA_PAGE ? deltaY * WHEEL_PAGE_PX : deltaY;\n  return Math.exp(-px * WHEEL_ZOOM_PER_PX);\n}\n\n/** One press of Ctrl + plus (or minus, its inverse). */\nexport const KEY_ZOOM_FACTOR = 1.25;\n\n/** The `scrollLeft` that keeps `day` at `viewportX` (px from the scroller's left edge, label column included). Never negative. */\nexport function scrollLeftForAnchor(day: number, rangeStartDay: number, pxPerDay: number, labelWidth: number, viewportX: number): number {\n  return Math.max(0, labelWidth + dayToX(day, rangeStartDay, pxPerDay) - viewportX);\n}\n\n/** The day number under `viewportX` (px from the scroller's left edge) at this scroll position. */\nexport function dayAtViewportX(viewportX: number, scrollLeft: number, rangeStartDay: number, pxPerDay: number, labelWidth: number): number {\n  return rangeStartDay + (scrollLeft + viewportX - labelWidth) / pxPerDay;\n}\n\nexport interface DateTimelineSpan {\n  start: Date;\n  end: Date;\n  /** A second end instant drawn as its own marker (DXUI-60); the axis extends to hold it. */\n  plannedEnd?: Date;\n}\n\nexport interface DayRange {\n  /** First day number of the axis: a unit start. */\n  startDay: number;\n  /** Day number the axis ends at (exclusive): a unit start. */\n  endDay: number;\n}\n\nexport interface Tick {\n  /** Day number of the unit's first day. */\n  startDay: number;\n  /** Day number of the next unit's first day. */\n  endDay: number;\n  /** Left edge in px from the axis start. */\n  x: number;\n  width: number;\n}\n\n/** Local calendar day number of `date`, with the elapsed fraction of the local day. */\nexport function toDayNumber(date: Date): number {\n  const time = date.getTime();\n  if (!Number.isFinite(time)) throw new Error(\"timeline: an invalid Date reached the date axis\");\n  const whole = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / DAY_MS;\n  const ms = ((date.getHours() * 60 + date.getMinutes()) * 60 + date.getSeconds()) * 1000 + date.getMilliseconds();\n  return whole + ms / DAY_MS;\n}\n\n/** The local midnight Date that opens the day with this number. */\nexport function fromDayNumber(day: number): Date {\n  const utc = new Date(Math.floor(day) * DAY_MS);\n  return new Date(utc.getUTCFullYear(), utc.getUTCMonth(), utc.getUTCDate());\n}\n\nfunction utcParts(day: number): { year: number; month: number; weekday: number } {\n  const d = new Date(Math.floor(day) * DAY_MS);\n  return { year: d.getUTCFullYear(), month: d.getUTCMonth(), weekday: d.getUTCDay() };\n}\n\nconst dayOf = (year: number, month: number) => Date.UTC(year, month, 1) / DAY_MS;\n\n/** The first day of the unit holding `day`. `weekStartsOn`: 0 = Sunday ... 6 = Saturday. */\nexport function unitStart(day: number, unit: DateTimelineUnit, weekStartsOn: number): number {\n  const { year, month, weekday } = utcParts(day);\n  if (unit === \"days\") return Math.floor(day);\n  if (unit === \"weeks\") return Math.floor(day) - ((weekday - weekStartsOn + 7) % 7);\n  if (unit === \"months\") return dayOf(year, month);\n  return dayOf(year, month - (month % 3));\n}\n\n/** The first day of the unit after the one that starts at `start`. */\nexport function nextUnitStart(start: number, unit: DateTimelineUnit): number {\n  if (unit === \"days\") return start + 1;\n  if (unit === \"weeks\") return start + 7;\n  const { year, month } = utcParts(start);\n  return dayOf(year, month + (unit === \"months\" ? 1 : 3));\n}\n\n/** Calendar quarter (1-4) of the day. */\nexport function quarterOf(day: number): number {\n  return Math.floor(utcParts(day).month / 3) + 1;\n}\n\nexport function yearOf(day: number): number {\n  return utcParts(day).year;\n}\n\nfunction assertSpanOrder(from: number, to: number): void {\n  if (to < from) throw new Error(\"timeline: an item ends before it starts\");\n}\n\n/** Units of air before and after the items: the axis is never so short that a zoom cannot keep its anchor still. */\nconst AIR_UNITS: Record<DateTimelineUnit, number> = { days: 14, weeks: 2, months: 1, quarters: 1 };\n\n/**\n * The axis range for these items and today: from the earliest start or today to the latest end or today, widened to\n * whole units with `AIR_UNITS` of air around, so every bar and the today line sit inside it.\n * A bar is drawn at its true length (DXUI-60), so only the dates decide the range; a `plannedEnd` counts like an end.\n * An item that ends before it starts is a caller's bug and throws.\n */\nexport function timelineRange(\n  spans: readonly DateTimelineSpan[],\n  today: Date,\n  unit: DateTimelineUnit,\n  weekStartsOn: number,\n  markerDates: readonly Date[] = [],\n): DayRange {\n  const todayDay = toDayNumber(today);\n  let min = todayDay;\n  let max = todayDay;\n  for (const date of markerDates) {\n    const markerDay = toDayNumber(date);\n    min = Math.min(min, markerDay);\n    max = Math.max(max, markerDay);\n  }\n  for (const span of spans) {\n    const from = toDayNumber(span.start);\n    const to = toDayNumber(span.end);\n    assertSpanOrder(from, to);\n    min = Math.min(min, from);\n    max = Math.max(max, to);\n    if (span.plannedEnd) {\n      const planned = toDayNumber(span.plannedEnd);\n      min = Math.min(min, planned);\n      max = Math.max(max, planned);\n    }\n  }\n  let startDay = unitStart(min, unit, weekStartsOn);\n  let endDay = nextUnitStart(unitStart(max, unit, weekStartsOn), unit);\n  for (let i = 0; i < AIR_UNITS[unit]; i++) {\n    startDay = unitStart(startDay - 1, unit, weekStartsOn);\n    endDay = nextUnitStart(endDay, unit);\n  }\n  return { startDay, endDay };\n}\n\n/** Pixel x of a day number on an axis that starts at `rangeStartDay`. */\nexport function dayToX(day: number, rangeStartDay: number, pxPerDay: number): number {\n  return (day - rangeStartDay) * pxPerDay;\n}\n\n/** The axis width in px. */\nexport function trackWidth(range: DayRange, pxPerDay: number): number {\n  return dayToX(range.endDay, range.startDay, pxPerDay);\n}\n\n/** One tick per unit across the range, each with its pixel box. */\nexport function unitTicks(range: DayRange, unit: DateTimelineUnit, pxPerDay: number): Tick[] {\n  const ticks: Tick[] = [];\n  for (let start = range.startDay; start < range.endDay; ) {\n    const end = nextUnitStart(start, unit);\n    ticks.push({ startDay: start, endDay: end, x: dayToX(start, range.startDay, pxPerDay), width: (end - start) * pxPerDay });\n    start = end;\n  }\n  return ticks;\n}\n\n/** Pixel x of an instant on an axis that starts at `rangeStartDay`. */\nexport function instantToX(date: Date, rangeStartDay: number, pxPerDay: number): number {\n  return dayToX(toDayNumber(date), rangeStartDay, pxPerDay);\n}\n\n/** Where an item's bar sits: from the x of its start to the x of its end, its true length at any scale. */\nexport function barBox(span: DateTimelineSpan, range: DayRange, pxPerDay: number): { left: number; width: number } {\n  assertSpanOrder(toDayNumber(span.start), toDayNumber(span.end));\n  const left = instantToX(span.start, range.startDay, pxPerDay);\n  return { left, width: instantToX(span.end, range.startDay, pxPerDay) - left };\n}\n\n/** `date` moved `days` whole calendar days, keeping its time of day (a daylight-saving day is still one day). */\nexport function addDays(date: Date, days: number): Date {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());\n}\n\n/** What a drag or key press changes: the whole bar, only its end, or only its start. */\nexport type DateTimelineEdit = \"move\" | \"end\" | \"start\";\n\n/**\n * The span after `days` whole days of `edit` (DXUI-60): \"move\" shifts both ends; \"end\" and \"start\" shift one and\n * stop at the other end, so a bar never inverts. Returns the original dates unchanged for 0 days.\n */\nexport function editSpan(span: { start: Date; end: Date }, edit: DateTimelineEdit, days: number): { start: Date; end: Date } {\n  if (!Number.isInteger(days)) throw new Error(\"timeline: an edit is a whole number of days\");\n  const length = toDayNumber(span.end) - toDayNumber(span.start);\n  if (edit === \"move\") return { start: addDays(span.start, days), end: addDays(span.end, days) };\n  if (edit === \"end\") return { start: span.start, end: addDays(span.end, Math.max(days, Math.ceil(-length))) };\n  return { start: addDays(span.start, Math.min(days, Math.floor(length))), end: span.end };\n}\n\n/**\n * `days` limited so a marker moved by it (DXUI-67) stays on the axis: the axis is built from the markers' own dates, so a drag\n * must not carry one past its ends. Whole days in, whole days out.\n */\nexport function clampMarkerDays(date: Date, days: number, range: DayRange): number {\n  const day = toDayNumber(date);\n  return Math.min(Math.max(days, range.startDay - day), range.endDay - 1 - day);\n}\n\n/** The `scrollLeft` that puts x (a px offset on the axis) in the middle of the date area: `viewportWidth` wide, less the sticky label column. Never negative. */\nexport function scrollLeftToCenter(x: number, viewportWidth: number, labelWidth: number): number {\n  return Math.max(0, x - (viewportWidth - labelWidth) / 2);\n}\n\n/** A progress value clamped to 0..1; NaN is a caller's bug and throws. */\nexport function clampProgress(progress: number): number {\n  if (Number.isNaN(progress)) throw new Error(\"timeline: progress is not a number\");\n  return Math.min(1, Math.max(0, progress));\n}\n\n/** Throws on a marker with an invalid date or an id another marker already uses. */\nexport function assertMarkers(markers: readonly { id: string; date: Date }[]): void {\n  const seen = new Set<string>();\n  for (const marker of markers) {\n    if (Number.isNaN(marker.date.getTime())) throw new Error(`timeline: marker \"${marker.id}\" has an invalid date`);\n    if (seen.has(marker.id)) throw new Error(`timeline: two markers share the id \"${marker.id}\"`);\n    seen.add(marker.id);\n  }\n}\n\nexport interface MarkerTagPlacement {\n  /** Index of the marker in the input. */\n  index: number;\n  /** Left edge of the tag in the track, px: centred on the line, then clamped inside [0, trackWidth - width]. */\n  left: number;\n  /** Row, 0 = the one nearest the dates; a tag overlapping (or within `gap` of) an earlier one on a row moves to the next. */\n  row: number;\n}\n\n/**\n * Places each marker's header tag (DXUI-64). A tag is centred on its line, clamped so it never leaves the track (the line\n * stays on its date), and stacked in rows so two tags never overlap or touch closer than `gap`.\n */\nexport function layoutMarkerTags(\n  tags: readonly { x: number; width: number }[],\n  trackWidth: number,\n  gap: number,\n): MarkerTagPlacement[] {\n  const rowEnds: number[] = [];\n  return tags\n    .map((tag, index) => ({ ...tag, index }))\n    .sort((a, b) => a.x - b.x || a.index - b.index)\n    .map(({ x, width, index }) => {\n      const left = Math.min(Math.max(x - width / 2, 0), Math.max(trackWidth - width, 0));\n      let row = rowEnds.findIndex((end) => end + gap <= left);\n      if (row < 0) row = rowEnds.length;\n      rowEnds[row] = left + width;\n      return { index, left, row };\n    });\n}\n\n/** The tag row's top, in px relative to the date header: row 0 sits directly above the dates and each further row one `rowPx` higher. */\nexport function markerTagTop(row: number, rowPx: number): number {\n  return -(row + 1) * rowPx;\n}\n\nexport interface MarkerFlagPlacement {\n  /** Index of the marker in the input. */\n  index: number;\n  /** Lane, 0 = the one nearest the top of the band. */\n  lane: number;\n  /** The flag's width, cut short when the next flag in its lane would otherwise run into it; never below `minWidth`. */\n  maxWidth: number;\n}\n\n/**\n * Places each marker's flag in the Phases band above the date header (DXUI-68). Flags go left to right: each takes the first lane\n * whose last flag has ended `gap` px before it, else the lane that frees up soonest. A flag that runs into the next one in its lane\n * is cut short to the room before that one, so no flag is ever drawn over another.\n */\nexport function layoutMarkerFlags(\n  flags: readonly { x: number; width: number }[],\n  lanes: number,\n  gap: number,\n  minWidth: number,\n): MarkerFlagPlacement[] {\n  const laneEnds: number[] = Array.from({ length: lanes }, () => -Infinity);\n  const lastInLane: ({ x: number; maxWidth: number; index: number } | undefined)[] = Array.from({ length: lanes });\n  const placed: { x: number; maxWidth: number; index: number; lane: number }[] = [];\n  flags\n    .map((flag, index) => ({ ...flag, index }))\n    .sort((a, b) => a.x - b.x || a.index - b.index)\n    .forEach(({ x, width, index }) => {\n      let lane = laneEnds.findIndex((end) => end + gap <= x);\n      if (lane === -1) lane = laneEnds.indexOf(Math.min(...laneEnds));\n      const prev = lastInLane[lane];\n      if (prev && prev.x + prev.maxWidth + gap > x) prev.maxWidth = Math.max(minWidth, x - prev.x - gap);\n      const entry = { x, maxWidth: width, index, lane };\n      placed.push(entry);\n      lastInLane[lane] = entry;\n      laneEnds[lane] = x + width;\n    });\n  return placed.sort((a, b) => a.index - b.index).map(({ index, lane, maxWidth }) => ({ index, lane, maxWidth }));\n}\n"],"names":["MIN_PX_PER_DAY","MAX_PX_PER_DAY","DEFAULT_PX_PER_DAY","DAY_FROM_PX","WEEK_FROM_PX","MONTH_FROM_PX","tickUnitFor","pxPerDay","assertPxPerDay","clampPxPerDay","scalePxPerDay","factor","ZOOM_SLIDER_MAX","LOG_SPAN","pxPerDayToSlider","sliderToPxPerDay","value","WHEEL_DELTA_LINE","WHEEL_DELTA_PAGE","WHEEL_LINE_PX","WHEEL_PAGE_PX","WHEEL_ZOOM_PER_PX","wheelZoomFactor","deltaY","deltaMode","px","KEY_ZOOM_FACTOR","scrollLeftForAnchor","day","rangeStartDay","labelWidth","viewportX","dayToX","dayAtViewportX","scrollLeft","toDayNumber","date","time","whole","DAY_MS","ms","fromDayNumber","utc","utcParts","d","dayOf","year","month","unitStart","unit","weekStartsOn","weekday","nextUnitStart","start","quarterOf","yearOf","assertSpanOrder","from","to","AIR_UNITS","timelineRange","spans","today","markerDates","todayDay","min","max","markerDay","span","planned","startDay","endDay","i","trackWidth","range","unitTicks","ticks","end","instantToX","barBox","left","addDays","days","editSpan","edit","length","clampMarkerDays","scrollLeftToCenter","x","viewportWidth","clampProgress","progress","assertMarkers","markers","seen","marker","layoutMarkerTags","tags","gap","rowEnds","tag","index","a","b","width","row","markerTagTop","rowPx","layoutMarkerFlags","flags","lanes","minWidth","laneEnds","lastInLane","placed","flag","lane","prev","entry","maxWidth"],"mappings":";AAmBO,MAAMA,IAAiB,GACjBC,IAAiB,KAEjBC,IAAqB,IAG5BC,IAAc,IACdC,IAAe,IACfC,IAAgB;AAGf,SAASC,EAAYC,GAAoC;AAC9D,SAAIA,KAAYJ,IAAoB,SAChCI,KAAYH,IAAqB,UACjCG,KAAYF,IAAsB,WAC/B;AACT;AAGO,SAASG,EAAeD,GAAwB;AACrD,MAAI,CAAC,OAAO,SAASA,CAAQ,KAAKA,IAAWP,KAAkBO,IAAWN;AACxE,UAAM,IAAI,MAAM,4CAA4CD,CAAc,OAAOC,CAAc,EAAE;AAErG;AAGO,SAASQ,EAAcF,GAA0B;AACtD,SAAO,KAAK,IAAIN,GAAgB,KAAK,IAAID,GAAgBO,CAAQ,CAAC;AACpE;AAGO,SAASG,EAAcH,GAAkBI,GAAwB;AACtE,SAAOF,EAAcF,IAAWI,CAAM;AACxC;AAGO,MAAMC,IAAkB,KACzBC,IAAW,KAAK,IAAIZ,IAAiBD,CAAc;AAElD,SAASc,EAAiBP,GAA0B;AACzD,SAAQ,KAAK,IAAIA,IAAWP,CAAc,IAAIa,IAAYD;AAC5D;AAEO,SAASG,EAAiBC,GAAuB;AACtD,SAAOP,EAAcT,IAAiB,KAAK,IAAKgB,IAAQJ,IAAmBC,CAAQ,CAAC;AACtF;AAGA,MAAMI,IAAmB,GACnBC,IAAmB,GACnBC,IAAgB,IAChBC,IAAgB,KAEhBC,IAAoB;AAGnB,SAASC,EAAgBC,GAAgBC,GAA2B;AACzE,QAAMC,IAAKD,MAAcP,IAAmBM,IAASJ,IAAgBK,MAAcN,IAAmBK,IAASH,IAAgBG;AAC/H,SAAO,KAAK,IAAI,CAACE,IAAKJ,CAAiB;AACzC;AAGO,MAAMK,IAAkB;AAGxB,SAASC,EAAoBC,GAAaC,GAAuBtB,GAAkBuB,GAAoBC,GAA2B;AACvI,SAAO,KAAK,IAAI,GAAGD,IAAaE,EAAOJ,GAAKC,GAAetB,CAAQ,IAAIwB,CAAS;AAClF;AAGO,SAASE,EAAeF,GAAmBG,GAAoBL,GAAuBtB,GAAkBuB,GAA4B;AACzI,SAAOD,KAAiBK,IAAaH,IAAYD,KAAcvB;AACjE;AA2BO,SAAS4B,EAAYC,GAAoB;AAC9C,QAAMC,IAAOD,EAAK,QAAA;AAClB,MAAI,CAAC,OAAO,SAASC,CAAI,EAAG,OAAM,IAAI,MAAM,iDAAiD;AAC7F,QAAMC,IAAQ,KAAK,IAAIF,EAAK,YAAA,GAAeA,EAAK,SAAA,GAAYA,EAAK,QAAA,CAAS,IAAIG,GACxEC,MAAOJ,EAAK,SAAA,IAAa,KAAKA,EAAK,WAAA,KAAgB,KAAKA,EAAK,WAAA,KAAgB,MAAOA,EAAK,gBAAA;AAC/F,SAAOE,IAAQE,IAAKD;AACtB;AAGO,SAASE,EAAcb,GAAmB;AAC/C,QAAMc,IAAM,IAAI,KAAK,KAAK,MAAMd,CAAG,IAAIW,CAAM;AAC7C,SAAO,IAAI,KAAKG,EAAI,eAAA,GAAkBA,EAAI,YAAA,GAAeA,EAAI,YAAY;AAC3E;AAEA,SAASC,EAASf,GAA+D;AAC/E,QAAMgB,IAAI,IAAI,KAAK,KAAK,MAAMhB,CAAG,IAAIW,CAAM;AAC3C,SAAO,EAAE,MAAMK,EAAE,eAAA,GAAkB,OAAOA,EAAE,eAAe,SAASA,EAAE,UAAA,EAAU;AAClF;AAEA,MAAMC,IAAQ,CAACC,GAAcC,MAAkB,KAAK,IAAID,GAAMC,GAAO,CAAC,IAAIR;AAGnE,SAASS,EAAUpB,GAAaqB,GAAwBC,GAA8B;AAC3F,QAAM,EAAE,MAAAJ,GAAM,OAAAC,GAAO,SAAAI,EAAA,IAAYR,EAASf,CAAG;AAC7C,SAAIqB,MAAS,SAAe,KAAK,MAAMrB,CAAG,IACtCqB,MAAS,UAAgB,KAAK,MAAMrB,CAAG,KAAMuB,IAAUD,IAAe,KAAK,IAC3ED,MAAS,WAAiBJ,EAAMC,GAAMC,CAAK,IACxCF,EAAMC,GAAMC,IAASA,IAAQ,CAAE;AACxC;AAGO,SAASK,EAAcC,GAAeJ,GAAgC;AAC3E,MAAIA,MAAS,OAAQ,QAAOI,IAAQ;AACpC,MAAIJ,MAAS,QAAS,QAAOI,IAAQ;AACrC,QAAM,EAAE,MAAAP,GAAM,OAAAC,MAAUJ,EAASU,CAAK;AACtC,SAAOR,EAAMC,GAAMC,KAASE,MAAS,WAAW,IAAI,EAAE;AACxD;AAGO,SAASK,EAAU1B,GAAqB;AAC7C,SAAO,KAAK,MAAMe,EAASf,CAAG,EAAE,QAAQ,CAAC,IAAI;AAC/C;AAEO,SAAS2B,EAAO3B,GAAqB;AAC1C,SAAOe,EAASf,CAAG,EAAE;AACvB;AAEA,SAAS4B,EAAgBC,GAAcC,GAAkB;AACvD,MAAIA,IAAKD,EAAM,OAAM,IAAI,MAAM,yCAAyC;AAC1E;AAGA,MAAME,IAA8C,EAAE,MAAM,IAAI,OAAO,GAAG,QAAQ,GAAG,UAAU,EAAA;AAQxF,SAASC,EACdC,GACAC,GACAb,GACAC,GACAa,IAA+B,IACrB;AACV,QAAMC,IAAW7B,EAAY2B,CAAK;AAClC,MAAIG,IAAMD,GACNE,IAAMF;AACV,aAAW5B,KAAQ2B,GAAa;AAC9B,UAAMI,IAAYhC,EAAYC,CAAI;AAClC,IAAA6B,IAAM,KAAK,IAAIA,GAAKE,CAAS,GAC7BD,IAAM,KAAK,IAAIA,GAAKC,CAAS;AAAA,EAC/B;AACA,aAAWC,KAAQP,GAAO;AACxB,UAAMJ,IAAOtB,EAAYiC,EAAK,KAAK,GAC7BV,IAAKvB,EAAYiC,EAAK,GAAG;AAI/B,QAHAZ,EAAgBC,GAAMC,CAAE,GACxBO,IAAM,KAAK,IAAIA,GAAKR,CAAI,GACxBS,IAAM,KAAK,IAAIA,GAAKR,CAAE,GAClBU,EAAK,YAAY;AACnB,YAAMC,IAAUlC,EAAYiC,EAAK,UAAU;AAC3C,MAAAH,IAAM,KAAK,IAAIA,GAAKI,CAAO,GAC3BH,IAAM,KAAK,IAAIA,GAAKG,CAAO;AAAA,IAC7B;AAAA,EACF;AACA,MAAIC,IAAWtB,EAAUiB,GAAKhB,GAAMC,CAAY,GAC5CqB,IAASnB,EAAcJ,EAAUkB,GAAKjB,GAAMC,CAAY,GAAGD,CAAI;AACnE,WAASuB,IAAI,GAAGA,IAAIb,EAAUV,CAAI,GAAGuB;AACnC,IAAAF,IAAWtB,EAAUsB,IAAW,GAAGrB,GAAMC,CAAY,GACrDqB,IAASnB,EAAcmB,GAAQtB,CAAI;AAErC,SAAO,EAAE,UAAAqB,GAAU,QAAAC,EAAA;AACrB;AAGO,SAASvC,EAAOJ,GAAaC,GAAuBtB,GAA0B;AACnF,UAAQqB,IAAMC,KAAiBtB;AACjC;AAGO,SAASkE,EAAWC,GAAiBnE,GAA0B;AACpE,SAAOyB,EAAO0C,EAAM,QAAQA,EAAM,UAAUnE,CAAQ;AACtD;AAGO,SAASoE,GAAUD,GAAiBzB,GAAwB1C,GAA0B;AAC3F,QAAMqE,IAAgB,CAAA;AACtB,WAASvB,IAAQqB,EAAM,UAAUrB,IAAQqB,EAAM,UAAU;AACvD,UAAMG,IAAMzB,EAAcC,GAAOJ,CAAI;AACrC,IAAA2B,EAAM,KAAK,EAAE,UAAUvB,GAAO,QAAQwB,GAAK,GAAG7C,EAAOqB,GAAOqB,EAAM,UAAUnE,CAAQ,GAAG,QAAQsE,IAAMxB,KAAS9C,GAAU,GACxH8C,IAAQwB;AAAA,EACV;AACA,SAAOD;AACT;AAGO,SAASE,EAAW1C,GAAYP,GAAuBtB,GAA0B;AACtF,SAAOyB,EAAOG,EAAYC,CAAI,GAAGP,GAAetB,CAAQ;AAC1D;AAGO,SAASwE,GAAOX,GAAwBM,GAAiBnE,GAAmD;AACjH,EAAAiD,EAAgBrB,EAAYiC,EAAK,KAAK,GAAGjC,EAAYiC,EAAK,GAAG,CAAC;AAC9D,QAAMY,IAAOF,EAAWV,EAAK,OAAOM,EAAM,UAAUnE,CAAQ;AAC5D,SAAO,EAAE,MAAAyE,GAAM,OAAOF,EAAWV,EAAK,KAAKM,EAAM,UAAUnE,CAAQ,IAAIyE,EAAA;AACzE;AAGO,SAASC,EAAQ7C,GAAY8C,GAAoB;AACtD,SAAO,IAAI,KAAK9C,EAAK,YAAA,GAAeA,EAAK,SAAA,GAAYA,EAAK,YAAY8C,GAAM9C,EAAK,SAAA,GAAYA,EAAK,WAAA,GAAcA,EAAK,WAAA,GAAcA,EAAK,iBAAiB;AAC3J;AASO,SAAS+C,GAASf,GAAkCgB,GAAwBF,GAA0C;AAC3H,MAAI,CAAC,OAAO,UAAUA,CAAI,EAAG,OAAM,IAAI,MAAM,6CAA6C;AAC1F,QAAMG,IAASlD,EAAYiC,EAAK,GAAG,IAAIjC,EAAYiC,EAAK,KAAK;AAC7D,SAAIgB,MAAS,SAAe,EAAE,OAAOH,EAAQb,EAAK,OAAOc,CAAI,GAAG,KAAKD,EAAQb,EAAK,KAAKc,CAAI,EAAA,IACvFE,MAAS,QAAc,EAAE,OAAOhB,EAAK,OAAO,KAAKa,EAAQb,EAAK,KAAK,KAAK,IAAIc,GAAM,KAAK,KAAK,CAACG,CAAM,CAAC,CAAC,EAAA,IAClG,EAAE,OAAOJ,EAAQb,EAAK,OAAO,KAAK,IAAIc,GAAM,KAAK,MAAMG,CAAM,CAAC,CAAC,GAAG,KAAKjB,EAAK,IAAA;AACrF;AAMO,SAASkB,GAAgBlD,GAAY8C,GAAcR,GAAyB;AACjF,QAAM9C,IAAMO,EAAYC,CAAI;AAC5B,SAAO,KAAK,IAAI,KAAK,IAAI8C,GAAMR,EAAM,WAAW9C,CAAG,GAAG8C,EAAM,SAAS,IAAI9C,CAAG;AAC9E;AAGO,SAAS2D,GAAmBC,GAAWC,GAAuB3D,GAA4B;AAC/F,SAAO,KAAK,IAAI,GAAG0D,KAAKC,IAAgB3D,KAAc,CAAC;AACzD;AAGO,SAAS4D,GAAcC,GAA0B;AACtD,MAAI,OAAO,MAAMA,CAAQ,EAAG,OAAM,IAAI,MAAM,oCAAoC;AAChF,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGA,CAAQ,CAAC;AAC1C;AAGO,SAASC,GAAcC,GAAsD;AAClF,QAAMC,wBAAW,IAAA;AACjB,aAAWC,KAAUF,GAAS;AAC5B,QAAI,OAAO,MAAME,EAAO,KAAK,QAAA,CAAS,EAAG,OAAM,IAAI,MAAM,qBAAqBA,EAAO,EAAE,uBAAuB;AAC9G,QAAID,EAAK,IAAIC,EAAO,EAAE,EAAG,OAAM,IAAI,MAAM,uCAAuCA,EAAO,EAAE,GAAG;AAC5F,IAAAD,EAAK,IAAIC,EAAO,EAAE;AAAA,EACpB;AACF;AAeO,SAASC,GACdC,GACAxB,GACAyB,GACsB;AACtB,QAAMC,IAAoB,CAAA;AAC1B,SAAOF,EACJ,IAAI,CAACG,GAAKC,OAAW,EAAE,GAAGD,GAAK,OAAAC,EAAA,EAAQ,EACvC,KAAK,CAACC,GAAGC,MAAMD,EAAE,IAAIC,EAAE,KAAKD,EAAE,QAAQC,EAAE,KAAK,EAC7C,IAAI,CAAC,EAAE,GAAAf,GAAG,OAAAgB,GAAO,OAAAH,QAAY;AAC5B,UAAMrB,IAAO,KAAK,IAAI,KAAK,IAAIQ,IAAIgB,IAAQ,GAAG,CAAC,GAAG,KAAK,IAAI/B,IAAa+B,GAAO,CAAC,CAAC;AACjF,QAAIC,IAAMN,EAAQ,UAAU,CAACtB,MAAQA,IAAMqB,KAAOlB,CAAI;AACtD,WAAIyB,IAAM,MAAGA,IAAMN,EAAQ,SAC3BA,EAAQM,CAAG,IAAIzB,IAAOwB,GACf,EAAE,OAAAH,GAAO,MAAArB,GAAM,KAAAyB,EAAA;AAAA,EACxB,CAAC;AACL;AAGO,SAASC,GAAaD,GAAaE,GAAuB;AAC/D,SAAO,EAAEF,IAAM,KAAKE;AACtB;AAgBO,SAASC,GACdC,GACAC,GACAZ,GACAa,GACuB;AACvB,QAAMC,IAAqB,MAAM,KAAK,EAAE,QAAQF,EAAA,GAAS,MAAM,MAAS,GAClEG,IAA6E,MAAM,KAAK,EAAE,QAAQH,GAAO,GACzGI,IAAyE,CAAA;AAC/E,SAAAL,EACG,IAAI,CAACM,GAAMd,OAAW,EAAE,GAAGc,GAAM,OAAAd,EAAA,EAAQ,EACzC,KAAK,CAAC,GAAGE,MAAM,EAAE,IAAIA,EAAE,KAAK,EAAE,QAAQA,EAAE,KAAK,EAC7C,QAAQ,CAAC,EAAE,GAAAf,GAAG,OAAAgB,GAAO,OAAAH,QAAY;AAChC,QAAIe,IAAOJ,EAAS,UAAU,CAACnC,MAAQA,IAAMqB,KAAOV,CAAC;AACrD,IAAI4B,MAAS,OAAIA,IAAOJ,EAAS,QAAQ,KAAK,IAAI,GAAGA,CAAQ,CAAC;AAC9D,UAAMK,IAAOJ,EAAWG,CAAI;AAC5B,IAAIC,KAAQA,EAAK,IAAIA,EAAK,WAAWnB,IAAMV,MAAG6B,EAAK,WAAW,KAAK,IAAIN,GAAUvB,IAAI6B,EAAK,IAAInB,CAAG;AACjG,UAAMoB,IAAQ,EAAE,GAAA9B,GAAG,UAAUgB,GAAO,OAAAH,GAAO,MAAAe,EAAA;AAC3C,IAAAF,EAAO,KAAKI,CAAK,GACjBL,EAAWG,CAAI,IAAIE,GACnBN,EAASI,CAAI,IAAI5B,IAAIgB;AAAA,EACvB,CAAC,GACIU,EAAO,KAAK,CAAC,GAAGX,MAAM,EAAE,QAAQA,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,OAAAF,GAAO,MAAAe,GAAM,UAAAG,EAAA,OAAgB,EAAE,OAAAlB,GAAO,MAAAe,GAAM,UAAAG,EAAA,EAAW;AAChH;"}

package/dist/lib/design-frame/document.js

@@ -0,0 +1,44 @@
+import { THEMES as u } from "../preference-values.js";
+import { danxMiniAppScript as p } from "./mini-app-script.js";
+import { APPEARANCE_ATTRIBUTES as d } from "./protocol.js";
+const s = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; media-src data: blob:; connect-src 'none'; form-action 'none'; base-uri 'none'";
+function l(t) {
+  const e = t.createElement("meta");
+  return e.setAttribute("http-equiv", "Content-Security-Policy"), e.setAttribute("content", s), e;
+}
+const f = u.map(
+  (t) => `:root[data-theme="${t}"]{color-scheme:${t}}`
+).join("");
+function S(t) {
+  const e = t.createElement("style");
+  return e.textContent = f, e;
+}
+function E(t, e) {
+  const r = t.createElement("script");
+  return r.textContent = p(e), r;
+}
+function y(t) {
+  return (t.doctype ? new XMLSerializer().serializeToString(t.doctype) : "") + t.documentElement.outerHTML;
+}
+function g(t, e, r) {
+  if (typeof t != "string" || t.trim() === "")
+    throw new Error("SandboxedFrame: html must be a non-empty string");
+  const n = new DOMParser().parseFromString(t, "text/html");
+  n.head.prepend(E(n, r)), n.head.prepend(S(n)), n.head.prepend(l(n));
+  for (const [a, m] of Object.entries(d)) {
+    const c = e[a];
+    c !== void 0 && n.documentElement.setAttribute(`data-${m}`, c);
+  }
+  const i = y(n), o = new DOMParser().parseFromString(i, "text/html").head.firstElementChild;
+  if (!o || o.tagName !== "META" || o.getAttribute("http-equiv") !== "Content-Security-Policy" || o.getAttribute("content") !== s)
+    throw new Error(
+      "SandboxedFrame: the Content-Security-Policy was not first in the document head; refusing to render"
+    );
+  return i;
+}
+export {
+  f as DESIGN_FRAME_COLOR_SCHEME_CSS,
+  s as DESIGN_FRAME_CSP,
+  g as prepareDesignDocument
+};
+//# sourceMappingURL=document.js.map

package/dist/lib/design-frame/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.js","sources":["../../../src/lib/design-frame/document.ts"],"sourcesContent":["import { THEMES } from \"../preference-values\";\nimport { danxMiniAppScript } from \"./mini-app-script\";\nimport { APPEARANCE_ATTRIBUTES, type DesignFrameAppearance } from \"./protocol\";\n\n/**\n * Turns an untrusted single-file HTML document into the one string a\n * `SandboxedFrame` hands the browser as `srcdoc` (DX-4075).\n */\n\n/**\n * What the framed document may do: run its own inline script and style, and show\n * data:/blob: media. It may not fetch, submit, set a base, or load anything by URL.\n */\nexport const DESIGN_FRAME_CSP =\n  \"default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; media-src data: blob:; connect-src 'none'; form-action 'none'; base-uri 'none'\";\n\nfunction cspMeta(doc: Document): HTMLMetaElement {\n  const meta = doc.createElement(\"meta\");\n  meta.setAttribute(\"http-equiv\", \"Content-Security-Policy\");\n  meta.setAttribute(\"content\", DESIGN_FRAME_CSP);\n  return meta;\n}\n\n/**\n * DX-4693: the framed document declares the colour-scheme of the theme it mirrors. The host\n * `<iframe>` element takes its colour-scheme from the host page; a framed document that declares\n * none is `normal` (light), and under that mismatch Chromium paints an opaque backdrop that can\n * hide the design entirely (reproduced in Electron's Chromium and real Chrome). The declaration is\n * keyed on the `data-theme` attribute, so the frame follows a live flip: the injected mini-app script\n * writes that attribute with every appearance the host posts.\n */\nexport const DESIGN_FRAME_COLOR_SCHEME_CSS = THEMES.map(\n  (theme) => `:root[data-theme=\"${theme}\"]{color-scheme:${theme}}`,\n).join(\"\");\n\nfunction colorSchemeStyle(doc: Document): HTMLStyleElement {\n  const style = doc.createElement(\"style\");\n  style.textContent = DESIGN_FRAME_COLOR_SCHEME_CSS;\n  return style;\n}\n\nfunction miniAppScript(doc: Document, docId: string): HTMLScriptElement {\n  const script = doc.createElement(\"script\");\n  script.textContent = danxMiniAppScript(docId);\n  return script;\n}\n\nfunction serialize(doc: Document): string {\n  const doctype = doc.doctype ? new XMLSerializer().serializeToString(doc.doctype) : \"\";\n  return doctype + doc.documentElement.outerHTML;\n}\n\n/**\n * The policy is inserted by PARSING, never by string or regex surgery: text\n * placed after the first literal `<head>` is defeated by a decoy earlier in the\n * document (`<!-- <head> -->`, or the word in a script string), which would leave\n * the REAL head with no policy. The HTML parser always synthesises a head, so\n * `prepend` has somewhere to put it; whether the author wrote an explicit\n * `<head>` is not decidable here.\n *\n * THE RESULT IS SELF-VERIFIED: the serialised document is parsed once more and\n * this throws unless the first element of its head is the policy, exactly. A\n * document is never rendered unprotected.\n *\n * `docId` is the id the injected script puts on every height message, so the host can drop a report from a\n * document it has since replaced (DXUI-6).\n *\n * The host's `appearance` is stamped on the framed `<html>` here, so the frame\n * paints in the right theme from its first frame, with the matching color-scheme\n * declared right behind the policy (DX-4693).\n */\nexport function prepareDesignDocument(html: unknown, appearance: DesignFrameAppearance, docId: string): string {\n  if (typeof html !== \"string\" || html.trim() === \"\") {\n    throw new Error(\"SandboxedFrame: html must be a non-empty string\");\n  }\n\n  const doc = new DOMParser().parseFromString(html, \"text/html\");\n  /* DXUI-6: the mini-app script goes right behind the policy and the colour-scheme style, ahead of every page script. */\n  doc.head.prepend(miniAppScript(doc, docId));\n  doc.head.prepend(colorSchemeStyle(doc));\n  doc.head.prepend(cspMeta(doc));\n  for (const [field, attribute] of Object.entries(APPEARANCE_ATTRIBUTES)) {\n    const value = appearance[field as keyof DesignFrameAppearance];\n    if (value !== undefined) doc.documentElement.setAttribute(`data-${attribute}`, value);\n  }\n  const out = serialize(doc);\n\n  const first = new DOMParser().parseFromString(out, \"text/html\").head.firstElementChild;\n  if (\n    !first ||\n    first.tagName !== \"META\" ||\n    first.getAttribute(\"http-equiv\") !== \"Content-Security-Policy\" ||\n    first.getAttribute(\"content\") !== DESIGN_FRAME_CSP\n  ) {\n    throw new Error(\n      \"SandboxedFrame: the Content-Security-Policy was not first in the document head; refusing to render\",\n    );\n  }\n  return out;\n}\n"],"names":["DESIGN_FRAME_CSP","cspMeta","doc","meta","DESIGN_FRAME_COLOR_SCHEME_CSS","THEMES","theme","colorSchemeStyle","style","miniAppScript","docId","script","danxMiniAppScript","serialize","prepareDesignDocument","html","appearance","field","attribute","APPEARANCE_ATTRIBUTES","value","out","first"],"mappings":";;;AAaO,MAAMA,IACX;AAEF,SAASC,EAAQC,GAAgC;AAC/C,QAAMC,IAAOD,EAAI,cAAc,MAAM;AACrC,SAAAC,EAAK,aAAa,cAAc,yBAAyB,GACzDA,EAAK,aAAa,WAAWH,CAAgB,GACtCG;AACT;AAUO,MAAMC,IAAgCC,EAAO;AAAA,EAClD,CAACC,MAAU,qBAAqBA,CAAK,mBAAmBA,CAAK;AAC/D,EAAE,KAAK,EAAE;AAET,SAASC,EAAiBL,GAAiC;AACzD,QAAMM,IAAQN,EAAI,cAAc,OAAO;AACvC,SAAAM,EAAM,cAAcJ,GACbI;AACT;AAEA,SAASC,EAAcP,GAAeQ,GAAkC;AACtE,QAAMC,IAAST,EAAI,cAAc,QAAQ;AACzC,SAAAS,EAAO,cAAcC,EAAkBF,CAAK,GACrCC;AACT;AAEA,SAASE,EAAUX,GAAuB;AAExC,UADgBA,EAAI,UAAU,IAAI,gBAAgB,kBAAkBA,EAAI,OAAO,IAAI,MAClEA,EAAI,gBAAgB;AACvC;AAqBO,SAASY,EAAsBC,GAAeC,GAAmCN,GAAuB;AAC7G,MAAI,OAAOK,KAAS,YAAYA,EAAK,KAAA,MAAW;AAC9C,UAAM,IAAI,MAAM,iDAAiD;AAGnE,QAAMb,IAAM,IAAI,UAAA,EAAY,gBAAgBa,GAAM,WAAW;AAE7D,EAAAb,EAAI,KAAK,QAAQO,EAAcP,GAAKQ,CAAK,CAAC,GAC1CR,EAAI,KAAK,QAAQK,EAAiBL,CAAG,CAAC,GACtCA,EAAI,KAAK,QAAQD,EAAQC,CAAG,CAAC;AAC7B,aAAW,CAACe,GAAOC,CAAS,KAAK,OAAO,QAAQC,CAAqB,GAAG;AACtE,UAAMC,IAAQJ,EAAWC,CAAoC;AAC7D,IAAIG,MAAU,UAAWlB,EAAI,gBAAgB,aAAa,QAAQgB,CAAS,IAAIE,CAAK;AAAA,EACtF;AACA,QAAMC,IAAMR,EAAUX,CAAG,GAEnBoB,IAAQ,IAAI,YAAY,gBAAgBD,GAAK,WAAW,EAAE,KAAK;AACrE,MACE,CAACC,KACDA,EAAM,YAAY,UAClBA,EAAM,aAAa,YAAY,MAAM,6BACrCA,EAAM,aAAa,SAAS,MAAMtB;AAElC,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOqB;AACT;"}

package/dist/lib/design-frame/mini-app-script.js

@@ -0,0 +1,107 @@
+import { MOTION as t, SCALES as r, CONTRAST as n, THEMES as i } from "../preference-values.js";
+import { DESIGN_FRAME_ERROR_MAX_LENGTH as o, DESIGN_FRAME_APPEARANCE as a, APPEARANCE_ATTRIBUTES as s, DESIGN_FRAME_READY as d, DESIGN_FRAME_ERROR as l, DESIGN_FRAME_HEIGHT as u } from "./protocol.js";
+function p(e) {
+  return JSON.stringify(e).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+const f = {
+  theme: i,
+  contrast: n,
+  uiScale: r,
+  motion: t
+};
+function g(e) {
+  return `(function () {
+  var DOC = ${p(e)};
+  var parentWindow = window.parent;
+  var APPEARANCE = ${JSON.stringify(a)};
+  var ATTRS = ${JSON.stringify(s)};
+  var DOMAINS = ${JSON.stringify(f)};
+  var MAX = ${o};
+  var root = document.documentElement;
+  var held = false;
+  var readySent = false;
+  var listeners = [];
+
+  function post(message) { parentWindow.postMessage(message, "*"); }
+  function text(value) { return String(value).slice(0, MAX); }
+
+  function ready() {
+    if (readySent) return;
+    readySent = true;
+    post({ type: ${JSON.stringify(d)} });
+  }
+  function reportError(message) { post({ type: ${JSON.stringify(l)}, message: text(message) }); }
+
+  function apply(attribute, value) {
+    if (root.getAttribute("data-" + attribute) === value) return;
+    root.setAttribute("data-motion-suspend", "");
+    root.setAttribute("data-" + attribute, value);
+    void getComputedStyle(root).backgroundColor;
+    root.removeAttribute("data-motion-suspend");
+  }
+
+  window.addEventListener("message", function (event) {
+    var data = event.data;
+    if (event.source !== parentWindow || !data || data.type !== APPEARANCE) return;
+    var applied = {};
+    var fields = Object.keys(ATTRS);
+    for (var i = 0; i < fields.length; i++) {
+      var value = data[fields[i]];
+      if (value === undefined) continue;
+      if (typeof value !== "string" || DOMAINS[fields[i]].indexOf(value) < 0) return;
+    }
+    for (var j = 0; j < fields.length; j++) {
+      var next = data[fields[j]];
+      if (next === undefined) continue;
+      apply(ATTRS[fields[j]], next);
+      applied[fields[j]] = next;
+    }
+    listeners.slice().forEach(function (callback) { callback(applied); });
+  });
+
+  window.addEventListener("error", function (event) {
+    reportError(event.message || (event.error && event.error.message) || "Uncaught error");
+  });
+  /* DXUI-6: a null or undefined reason, or one with no message, would otherwise report "null" or "undefined". */
+  function rejectionText(reason) {
+    if (typeof reason === "string" && reason) return reason;
+    if (reason && reason.message) return reason.message;
+    return "Unhandled promise rejection";
+  }
+  window.addEventListener("unhandledrejection", function (event) {
+    reportError(rejectionText(event.reason));
+  });
+
+  window.addEventListener("load", function () { if (!held) ready(); });
+
+  var lastHeight = -1;
+  var lastViewport = -1;
+  function reportHeight() {
+    var height = Math.ceil(root.getBoundingClientRect().height);
+    var viewport = window.innerHeight;
+    if (height === lastHeight && viewport === lastViewport) return;
+    lastHeight = height;
+    lastViewport = viewport;
+    post({ type: ${JSON.stringify(u)}, height: height, viewport: viewport, doc: DOC });
+  }
+  new ResizeObserver(reportHeight).observe(root);
+  window.addEventListener("resize", reportHeight);
+  /* DXUI-6: a browser does not render an off-screen sandboxed frame, so ResizeObserver stays silent until the frame is
+     scrolled into view; the document still loads, so report once then (the dedupe drops it when nothing changed). */
+  window.addEventListener("load", reportHeight);
+
+  window.danxMiniApp = {
+    holdReady: function () { held = true; },
+    ready: ready,
+    reportError: reportError,
+    onAppearance: function (callback) {
+      listeners.push(callback);
+      return function () { listeners = listeners.filter(function (entry) { return entry !== callback; }); };
+    }
+  };
+})();`;
+}
+export {
+  g as danxMiniAppScript
+};
+//# sourceMappingURL=mini-app-script.js.map

package/dist/lib/design-frame/mini-app-script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mini-app-script.js","sources":["../../../src/lib/design-frame/mini-app-script.ts"],"sourcesContent":["import { CONTRAST, MOTION, SCALES, THEMES } from \"../preference-values\";\nimport {\n  APPEARANCE_ATTRIBUTES,\n  DESIGN_FRAME_APPEARANCE,\n  DESIGN_FRAME_ERROR,\n  DESIGN_FRAME_ERROR_MAX_LENGTH,\n  DESIGN_FRAME_HEIGHT,\n  DESIGN_FRAME_READY,\n} from \"./protocol\";\n\n/**\n * A JavaScript string literal for `value` that cannot end the `<script>` element it is serialised into: `<` is\n * written as an escape (so neither a closing tag nor a comment opener can appear), and so are the two line\n * separators that were not legal in a string literal before ES2019.\n */\nfunction scriptString(value: string): string {\n  return JSON.stringify(value).replace(/</g, \"\\\\u003c\").replace(/\\u2028/g, \"\\\\u2028\").replace(/\\u2029/g, \"\\\\u2029\");\n}\n\nconst DOMAINS = {\n  theme: THEMES,\n  contrast: CONTRAST,\n  uiScale: SCALES,\n  motion: MOTION,\n};\n\n/**\n * DXUI-6: the script `prepareDesignDocument` injects into every framed page, which defines\n * `window.danxMiniApp`. The page installs nothing, so a repo on any version of this library, or on\n * another framework, gets the theme, ready, error reporting and height with no client code.\n *\n * It is a STRING, not a function serialised with `toString()`: a bundler or minifier may rewrite a\n * function's body (renamed helpers, hoisted imports), and this code must run alone in a document\n * that has none of the library. It is plain ES5 and dependency-free for the same reason, and the\n * protocol names and domains are interpolated from the host's own constants so the two sides\n * cannot drift. Nothing in it may contain a closing script tag or a comment opener, which would end\n * the element it is serialised into (pinned by `design-frame-mini-app.test.ts`).\n *\n * THE APPEARANCE WRITE MIRRORS `applyPreference` (`preference-values.ts`), including the forced\n * style read inside the `data-motion-suspend` window: without it a theme flip dissolves every\n * transition in the page instead of cutting. A value the frame already shows writes nothing (DX-5526).\n *\n * EVERY HEIGHT MESSAGE ALSO CARRIES `doc`, the id the host generated for this document. Setting `srcdoc` only starts\n * a navigation: the old document stays live, and shares its window object with the new one, until the new one\n * commits, so the host tells their reports apart by this id.\n *\n * EVERY HEIGHT MESSAGE CARRIES THE FRAME'S OWN VIEWPORT HEIGHT (`window.innerHeight`), and a viewport change alone is\n * reported (the `resize` event), so the host can tell a page whose height changed by itself from one whose height\n * only moved because the host resized the frame.\n *\n * THE HEIGHT IS THE `<html>` ELEMENT'S, not `scrollHeight`: `scrollHeight` is never below the\n * viewport, so a page could never shrink. A page whose root is `100vh` has an `<html>` as tall as the\n * frame, reports the frame's own height, and the host leaves it there.\n */\nexport function danxMiniAppScript(docId: string): string {\n  // I18N-ALLOW: the injected script's own JavaScript source, run inside the framed page: code, not UI text.\n  return `(function () {\n  var DOC = ${scriptString(docId)};\n  var parentWindow = window.parent;\n  var APPEARANCE = ${JSON.stringify(DESIGN_FRAME_APPEARANCE)};\n  var ATTRS = ${JSON.stringify(APPEARANCE_ATTRIBUTES)};\n  var DOMAINS = ${JSON.stringify(DOMAINS)};\n  var MAX = ${DESIGN_FRAME_ERROR_MAX_LENGTH};\n  var root = document.documentElement;\n  var held = false;\n  var readySent = false;\n  var listeners = [];\n\n  function post(message) { parentWindow.postMessage(message, \"*\"); }\n  function text(value) { return String(value).slice(0, MAX); }\n\n  function ready() {\n    if (readySent) return;\n    readySent = true;\n    post({ type: ${JSON.stringify(DESIGN_FRAME_READY)} });\n  }\n  function reportError(message) { post({ type: ${JSON.stringify(DESIGN_FRAME_ERROR)}, message: text(message) }); }\n\n  function apply(attribute, value) {\n    if (root.getAttribute(\"data-\" + attribute) === value) return;\n    root.setAttribute(\"data-motion-suspend\", \"\");\n    root.setAttribute(\"data-\" + attribute, value);\n    void getComputedStyle(root).backgroundColor;\n    root.removeAttribute(\"data-motion-suspend\");\n  }\n\n  window.addEventListener(\"message\", function (event) {\n    var data = event.data;\n    if (event.source !== parentWindow || !data || data.type !== APPEARANCE) return;\n    var applied = {};\n    var fields = Object.keys(ATTRS);\n    for (var i = 0; i < fields.length; i++) {\n      var value = data[fields[i]];\n      if (value === undefined) continue;\n      if (typeof value !== \"string\" || DOMAINS[fields[i]].indexOf(value) < 0) return;\n    }\n    for (var j = 0; j < fields.length; j++) {\n      var next = data[fields[j]];\n      if (next === undefined) continue;\n      apply(ATTRS[fields[j]], next);\n      applied[fields[j]] = next;\n    }\n    listeners.slice().forEach(function (callback) { callback(applied); });\n  });\n\n  window.addEventListener(\"error\", function (event) {\n    reportError(event.message || (event.error && event.error.message) || \"Uncaught error\");\n  });\n  /* DXUI-6: a null or undefined reason, or one with no message, would otherwise report \"null\" or \"undefined\". */\n  function rejectionText(reason) {\n    if (typeof reason === \"string\" && reason) return reason;\n    if (reason && reason.message) return reason.message;\n    return \"Unhandled promise rejection\";\n  }\n  window.addEventListener(\"unhandledrejection\", function (event) {\n    reportError(rejectionText(event.reason));\n  });\n\n  window.addEventListener(\"load\", function () { if (!held) ready(); });\n\n  var lastHeight = -1;\n  var lastViewport = -1;\n  function reportHeight() {\n    var height = Math.ceil(root.getBoundingClientRect().height);\n    var viewport = window.innerHeight;\n    if (height === lastHeight && viewport === lastViewport) return;\n    lastHeight = height;\n    lastViewport = viewport;\n    post({ type: ${JSON.stringify(DESIGN_FRAME_HEIGHT)}, height: height, viewport: viewport, doc: DOC });\n  }\n  new ResizeObserver(reportHeight).observe(root);\n  window.addEventListener(\"resize\", reportHeight);\n  /* DXUI-6: a browser does not render an off-screen sandboxed frame, so ResizeObserver stays silent until the frame is\n     scrolled into view; the document still loads, so report once then (the dedupe drops it when nothing changed). */\n  window.addEventListener(\"load\", reportHeight);\n\n  window.danxMiniApp = {\n    holdReady: function () { held = true; },\n    ready: ready,\n    reportError: reportError,\n    onAppearance: function (callback) {\n      listeners.push(callback);\n      return function () { listeners = listeners.filter(function (entry) { return entry !== callback; }); };\n    }\n  };\n})();`;\n}\n"],"names":["scriptString","value","DOMAINS","THEMES","CONTRAST","SCALES","MOTION","danxMiniAppScript","docId","DESIGN_FRAME_APPEARANCE","APPEARANCE_ATTRIBUTES","DESIGN_FRAME_ERROR_MAX_LENGTH","DESIGN_FRAME_READY","DESIGN_FRAME_ERROR","DESIGN_FRAME_HEIGHT"],"mappings":";;AAeA,SAASA,EAAaC,GAAuB;AAC3C,SAAO,KAAK,UAAUA,CAAK,EAAE,QAAQ,MAAM,SAAS,EAAE,QAAQ,WAAW,SAAS,EAAE,QAAQ,WAAW,SAAS;AAClH;AAEA,MAAMC,IAAU;AAAA,EACd,OAAOC;AAAA,EACP,UAAUC;AAAA,EACV,SAASC;AAAA,EACT,QAAQC;AACV;AA8BO,SAASC,EAAkBC,GAAuB;AAEvD,SAAO;AAAA,cACKR,EAAaQ,CAAK,CAAC;AAAA;AAAA,qBAEZ,KAAK,UAAUC,CAAuB,CAAC;AAAA,gBAC5C,KAAK,UAAUC,CAAqB,CAAC;AAAA,kBACnC,KAAK,UAAUR,CAAO,CAAC;AAAA,cAC3BS,CAA6B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAYxB,KAAK,UAAUC,CAAkB,CAAC;AAAA;AAAA,iDAEJ,KAAK,UAAUC,CAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAoDhE,KAAK,UAAUC,CAAmB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBtD;"}

package/dist/lib/design-frame/mini-app.js

@@ -0,0 +1,12 @@
+const e = {
+  holdReady: !0,
+  ready: !0,
+  reportError: !0,
+  onAppearance: !0
+}, r = Object.freeze(
+  Object.keys(e)
+);
+export {
+  r as DANX_MINI_APP_METHODS
+};
+//# sourceMappingURL=mini-app.js.map

package/dist/lib/design-frame/mini-app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mini-app.js","sources":["../../../src/lib/design-frame/mini-app.ts"],"sourcesContent":["import type { DesignFrameAppearance } from \"./protocol\";\n\n/**\n * DXUI-6: the interface of `window.danxMiniApp`, which `SandboxedFrame` injects into every framed\n * page (`mini-app-script.ts`). A mini app declares it once to call it type-safely; the docs\n * (`content/docs/sandboxed-frame.mdx`) give a declaration to copy. React-free: the interface plus `DANX_MINI_APP_METHODS`.\n */\nexport interface DanxMiniApp {\n  /** Call in the page's first script to delay `ready` past `load` until `ready()` is called. */\n  holdReady(): void;\n  /** Tells the host the page has mounted. Posted once; later calls do nothing. */\n  ready(): void;\n  /** Shows a failure in the host as text, capped at 500 characters. */\n  reportError(message: string): void;\n  /** Calls `callback` with what the host just sent, after it is applied; returns the unsubscribe. */\n  onAppearance(callback: (appearance: DesignFrameAppearance) => void): () => void;\n}\n\n/* DXUI-8: the members of `DanxMiniApp` at runtime, so a consumer that stands in for the injected client\n   outside the frame (danxbot's design screenshot) can pin its stand-in against the library. The record is\n   keyed by `keyof DanxMiniApp`, so a member added to the interface and missing here, or listed here and\n   missing from the interface, fails the type check; the array is built from its keys. */\nconst MINI_APP_MEMBERS: Record<keyof DanxMiniApp, true> = {\n  holdReady: true,\n  ready: true,\n  reportError: true,\n  onAppearance: true,\n};\nexport const DANX_MINI_APP_METHODS: readonly (keyof DanxMiniApp)[] = Object.freeze(\n  Object.keys(MINI_APP_MEMBERS) as (keyof DanxMiniApp)[],\n);\n"],"names":["MINI_APP_MEMBERS","DANX_MINI_APP_METHODS"],"mappings":"AAsBA,MAAMA,IAAoD;AAAA,EACxD,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAChB,GACaC,IAAwD,OAAO;AAAA,EAC1E,OAAO,KAAKD,CAAgB;AAC9B;"}

package/dist/lib/design-frame/protocol.js

@@ -0,0 +1,46 @@
+import { MOTION as u, SCALES as A, CONTRAST as _, THEMES as p } from "../preference-values.js";
+const h = "danx-design:appearance", r = "danx-design:ready", i = "danx-design:error", s = "danx-design:height", m = 500, R = 1e5, E = {
+  theme: "theme",
+  contrast: "contrast",
+  uiScale: "ui-scale",
+  motion: "motion"
+}, f = {
+  theme: p,
+  contrast: _,
+  uiScale: A,
+  motion: u
+}, g = Object.keys(E);
+function I(e) {
+  return typeof e == "object" && e !== null;
+}
+function D(e) {
+  const o = {};
+  for (const n of g) {
+    const t = e.getAttribute(`data-${E[n]}`);
+    t !== null && f[n].includes(t) && (o[n] = t);
+  }
+  return o;
+}
+const S = 64;
+function N(e) {
+  return typeof e == "string" && e.length > 0 && e.length <= S;
+}
+function c(e) {
+  return typeof e == "number" && Number.isFinite(e) && e >= 0 && e <= R;
+}
+function y(e) {
+  return I(e) ? e.type === r ? { type: r } : e.type === i && typeof e.message == "string" ? { type: i, message: e.message } : e.type === s && c(e.height) && c(e.viewport) && N(e.doc) ? { type: s, height: e.height, viewport: e.viewport, doc: e.doc } : null : null;
+}
+export {
+  E as APPEARANCE_ATTRIBUTES,
+  h as DESIGN_FRAME_APPEARANCE,
+  S as DESIGN_FRAME_DOC_ID_MAX_LENGTH,
+  i as DESIGN_FRAME_ERROR,
+  m as DESIGN_FRAME_ERROR_MAX_LENGTH,
+  s as DESIGN_FRAME_HEIGHT,
+  R as DESIGN_FRAME_HEIGHT_MAX,
+  r as DESIGN_FRAME_READY,
+  y as parseInboundMessage,
+  D as readAppearance
+};
+//# sourceMappingURL=protocol.js.map

package/dist/lib/design-frame/protocol.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"protocol.js","sources":["../../../src/lib/design-frame/protocol.ts"],"sourcesContent":["import {\n  CONTRAST,\n  MOTION,\n  SCALES,\n  THEMES,\n  type ContrastPreference,\n  type MotionPreference,\n  type Theme,\n  type UiScale,\n} from \"../preference-values\";\n\n/**\n * The messages a `SandboxedFrame` host and the document inside it exchange\n * (DX-4075). One definition, imported by both sides, so they cannot drift.\n *\n * REACT-FREE: this module is reachable from `@50arms/ui/pure` (the framed side\n * is a harness of any framework), so nothing here may import React.\n *\n * NO SECRET TRAVELS THIS CHANNEL. The host posts the four appearance values and\n * nothing else, which is why it can post to targetOrigin \"*\": the frame's origin\n * is the string \"null\" and cannot be named anyway.\n */\n\nexport const DESIGN_FRAME_APPEARANCE = \"danx-design:appearance\";\nexport const DESIGN_FRAME_READY = \"danx-design:ready\";\nexport const DESIGN_FRAME_ERROR = \"danx-design:error\";\nexport const DESIGN_FRAME_HEIGHT = \"danx-design:height\";\n\n/** The most characters of a frame's error message the host will accept. */\nexport const DESIGN_FRAME_ERROR_MAX_LENGTH = 500;\n\n/**\n * The host's Appearance. A field is absent when the host document has not set\n * that attribute (a host that never mounted the preference hooks); the frame then\n * leaves its own default alone rather than being told a guess.\n */\nexport interface DesignFrameAppearance {\n  theme?: Theme;\n  contrast?: ContrastPreference;\n  uiScale?: UiScale;\n  motion?: MotionPreference;\n}\n\n/** Host -> frame, on every change of the host's Appearance. */\nexport interface DesignFrameAppearanceMessage extends DesignFrameAppearance {\n  type: typeof DESIGN_FRAME_APPEARANCE;\n}\n\n/** Frame -> host: the design has mounted and is listening for appearance. */\nexport interface DesignFrameReadyMessage {\n  type: typeof DESIGN_FRAME_READY;\n}\n\n/** Frame -> host: the design failed. The host caps and treats `message` as text. */\nexport interface DesignFrameErrorMessage {\n  type: typeof DESIGN_FRAME_ERROR;\n  message: string;\n}\n\n/**\n * The most pixels of height or viewport the host will accept from a frame (DXUI-6): a sanity bound on\n * untrusted input, not the guard against a page that grows with its frame (`SandboxedFrame` decides that\n * from the reported viewport).\n */\nexport const DESIGN_FRAME_HEIGHT_MAX = 100_000;\n\n/**\n * Frame -> host: the height of the framed document and the height of the frame's own viewport\n * (`window.innerHeight`) when it was measured, in CSS pixels, and the id of the document that sent it (`doc`, the\n * id the host injected into that document's script). Used by `fit=\"content\"`.\n */\nexport interface DesignFrameHeightMessage {\n  type: typeof DESIGN_FRAME_HEIGHT;\n  height: number;\n  viewport: number;\n  doc: string;\n}\n\nexport type DesignFrameInboundMessage =\n  | DesignFrameReadyMessage\n  | DesignFrameErrorMessage\n  | DesignFrameHeightMessage;\n\n/**\n * The four `<html data-*>` attributes that carry Appearance, by field. The names\n * and value domains are the library's own (`preference-values.ts`).\n */\nexport const APPEARANCE_ATTRIBUTES = {\n  theme: \"theme\",\n  contrast: \"contrast\",\n  uiScale: \"ui-scale\",\n  motion: \"motion\",\n} as const satisfies Record<keyof DesignFrameAppearance, string>;\n\nconst DOMAINS: Record<keyof DesignFrameAppearance, readonly string[]> = {\n  theme: THEMES,\n  contrast: CONTRAST,\n  uiScale: SCALES,\n  motion: MOTION,\n};\n\nconst FIELDS = Object.keys(APPEARANCE_ATTRIBUTES) as (keyof DesignFrameAppearance)[];\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return typeof value === \"object\" && value !== null;\n}\n\n/** Reads the Appearance off an element's `data-*` attributes; an unset or foreign value is left out. */\nexport function readAppearance(root: Element): DesignFrameAppearance {\n  const out: Record<string, string> = {};\n  for (const field of FIELDS) {\n    const value = root.getAttribute(`data-${APPEARANCE_ATTRIBUTES[field]}`);\n    if (value !== null && DOMAINS[field].includes(value)) out[field] = value;\n  }\n  return out as DesignFrameAppearance;\n}\n\n/** The longest document id the host accepts in a height message. */\nexport const DESIGN_FRAME_DOC_ID_MAX_LENGTH = 64;\n\nfunction isDocId(value: unknown): value is string {\n  return typeof value === \"string\" && value.length > 0 && value.length <= DESIGN_FRAME_DOC_ID_MAX_LENGTH;\n}\n\nfunction isBoundedPixels(value: unknown): value is number {\n  return typeof value === \"number\" && Number.isFinite(value) && value >= 0 && value <= DESIGN_FRAME_HEIGHT_MAX;\n}\n\n/** Narrows an untrusted `event.data` to an appearance message; a value outside its domain is refused. */\nexport function parseAppearanceMessage(data: unknown): DesignFrameAppearanceMessage | null {\n  if (!isRecord(data) || data.type !== DESIGN_FRAME_APPEARANCE) return null;\n  const out: Record<string, unknown> = { type: DESIGN_FRAME_APPEARANCE };\n  for (const field of FIELDS) {\n    const value = data[field];\n    if (value === undefined) continue;\n    if (typeof value !== \"string\" || !DOMAINS[field].includes(value)) return null;\n    out[field] = value;\n  }\n  return out as unknown as DesignFrameAppearanceMessage;\n}\n\n/** Narrows an untrusted `event.data` to a ready, error or height message. */\nexport function parseInboundMessage(data: unknown): DesignFrameInboundMessage | null {\n  if (!isRecord(data)) return null;\n  if (data.type === DESIGN_FRAME_READY) return { type: DESIGN_FRAME_READY };\n  if (data.type === DESIGN_FRAME_ERROR && typeof data.message === \"string\") {\n    return { type: DESIGN_FRAME_ERROR, message: data.message };\n  }\n  if (\n    data.type === DESIGN_FRAME_HEIGHT &&\n    isBoundedPixels(data.height) &&\n    isBoundedPixels(data.viewport) &&\n    isDocId(data.doc)\n  ) {\n    return { type: DESIGN_FRAME_HEIGHT, height: data.height, viewport: data.viewport, doc: data.doc };\n  }\n  return null;\n}\n"],"names":["DESIGN_FRAME_APPEARANCE","DESIGN_FRAME_READY","DESIGN_FRAME_ERROR","DESIGN_FRAME_HEIGHT","DESIGN_FRAME_ERROR_MAX_LENGTH","DESIGN_FRAME_HEIGHT_MAX","APPEARANCE_ATTRIBUTES","DOMAINS","THEMES","CONTRAST","SCALES","MOTION","FIELDS","isRecord","value","readAppearance","root","out","field","DESIGN_FRAME_DOC_ID_MAX_LENGTH","isDocId","isBoundedPixels","parseInboundMessage","data"],"mappings":";AAuBO,MAAMA,IAA0B,0BAC1BC,IAAqB,qBACrBC,IAAqB,qBACrBC,IAAsB,sBAGtBC,IAAgC,KAmChCC,IAA0B,KAuB1BC,IAAwB;AAAA,EACnC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AACV,GAEMC,IAAkE;AAAA,EACtE,OAAOC;AAAA,EACP,UAAUC;AAAA,EACV,SAASC;AAAA,EACT,QAAQC;AACV,GAEMC,IAAS,OAAO,KAAKN,CAAqB;AAEhD,SAASO,EAASC,GAAkD;AAClE,SAAO,OAAOA,KAAU,YAAYA,MAAU;AAChD;AAGO,SAASC,EAAeC,GAAsC;AACnE,QAAMC,IAA8B,CAAA;AACpC,aAAWC,KAASN,GAAQ;AAC1B,UAAME,IAAQE,EAAK,aAAa,QAAQV,EAAsBY,CAAK,CAAC,EAAE;AACtE,IAAIJ,MAAU,QAAQP,EAAQW,CAAK,EAAE,SAASJ,CAAK,MAAGG,EAAIC,CAAK,IAAIJ;AAAA,EACrE;AACA,SAAOG;AACT;AAGO,MAAME,IAAiC;AAE9C,SAASC,EAAQN,GAAiC;AAChD,SAAO,OAAOA,KAAU,YAAYA,EAAM,SAAS,KAAKA,EAAM,UAAUK;AAC1E;AAEA,SAASE,EAAgBP,GAAiC;AACxD,SAAO,OAAOA,KAAU,YAAY,OAAO,SAASA,CAAK,KAAKA,KAAS,KAAKA,KAAST;AACvF;AAgBO,SAASiB,EAAoBC,GAAiD;AACnF,SAAKV,EAASU,CAAI,IACdA,EAAK,SAAStB,IAA2B,EAAE,MAAMA,EAAA,IACjDsB,EAAK,SAASrB,KAAsB,OAAOqB,EAAK,WAAY,WACvD,EAAE,MAAMrB,GAAoB,SAASqB,EAAK,QAAA,IAGjDA,EAAK,SAASpB,KACdkB,EAAgBE,EAAK,MAAM,KAC3BF,EAAgBE,EAAK,QAAQ,KAC7BH,EAAQG,EAAK,GAAG,IAET,EAAE,MAAMpB,GAAqB,QAAQoB,EAAK,QAAQ,UAAUA,EAAK,UAAU,KAAKA,EAAK,IAAA,IAEvF,OAbqB;AAc9B;"}

package/dist/lib/dev-warn.js

@@ -0,0 +1,17 @@
+function s() {
+  try {
+    return process.env.NODE_ENV === "development";
+  } catch {
+    return !1;
+  }
+}
+const n = /* @__PURE__ */ new Set();
+function a(t, r) {
+  if (!s()) return;
+  const e = `[@50arms/ui] ${t}: ${r}`;
+  n.has(e) || (n.add(e), console.warn(e));
+}
+export {
+  a as devWarn
+};
+//# sourceMappingURL=dev-warn.js.map

package/dist/lib/dev-warn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-warn.js","sources":["../../src/lib/dev-warn.ts"],"sourcesContent":["/* ----------------------------------------------------------------------------\n   THE DEVELOPMENT WARNING — one implementation, because there will be more.\n\n   WHAT THIS IS FOR. A misconfiguration that produces SILENCE is a library\n   defect, not a consumer defect. Two of them shipped in this package and both\n   look identical to working code from the outside:\n\n     - a `Select` whose value matches no item painted the raw key into the\n       trigger, so `AT-CW-GH` appeared where a human-readable label belonged;\n     - a `DragDropProvider` containing rows and no drag source rendered\n       perfectly, announced itself correctly, passed every test, and could not\n       be dragged at all.\n\n   Neither threw. Neither logged. Both were found by a person looking at a\n   screen and knowing what it should have said.\n\n   WHY `import.meta.env.DEV` AND NOT A THROW. Throwing turns a cosmetic defect\n   into a blank page, and the cases this exists for are exactly the ones where\n   the rest of the screen is fine. A warning that names the component and the\n   offending value puts the fix in front of whoever is looking, at the moment\n   they are looking, and costs a production build nothing: Vite, webpack and\n   Rollup all constant-fold `import.meta.env.DEV` (and the `process.env`\n   fallback below) and drop the branch entirely.\n\n   BOTH CONDITIONS, because neither one alone covers the consumers this package\n   has. `import.meta.env` exists in Vite and Rollup and is a SYNTAX ERROR in a\n   CommonJS context, so it is reached through a `try` rather than referenced\n   directly; `process.env.NODE_ENV` is what webpack, Next and Jest replace and\n   is undefined in a plain browser module. Guarding on either being explicitly\n   \"development\"/true keeps a production build quiet under all of them, and the\n   default when NEITHER is knowable is QUIET — a library that shouts in an\n   environment it cannot identify is a library people silence.\n\n   ONCE PER MESSAGE. These fire from render, so an unguarded warning is one\n   line per render per element — a console nobody can read, which is the same\n   as no console at all. The message text is the key, so a second offending\n   value still speaks up.\n   -------------------------------------------------------------------------- */\n\nfunction isDevelopment(): boolean {\n  try {\n    /* Vite replaces this at build time in the CONSUMER's build, so a consumer's\n       production bundle constant-folds the whole call away. */\n    if (import.meta.env?.DEV) return true;\n  } catch {\n    /* No `import.meta` in this context. Fall through. */\n  }\n  try {\n    return process.env.NODE_ENV === \"development\";\n  } catch {\n    return false;\n  }\n}\n\nconst said = new Set<string>();\n\n/**\n * Say something once, in development, about a misconfiguration that would\n * otherwise be silent.\n *\n * @param component the component that noticed, so the message is greppable\n * @param message   what is wrong and what to do about it\n */\nexport function devWarn(component: string, message: string): void {\n  if (!isDevelopment()) return;\n  const line = `[@50arms/ui] ${component}: ${message}`;\n  if (said.has(line)) return;\n  said.add(line);\n  console.warn(line);\n}\n\n/** Test seam. Nothing in the library calls this. */\nexport function resetDevWarnings(): void {\n  said.clear();\n}\n"],"names":["isDevelopment","said","devWarn","component","message","line"],"mappings":"AAuCA,SAASA,IAAyB;AAQhC,MAAI;AACF,WAAO,QAAQ,IAAI,aAAa;AAAA,EAClC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,MAAMC,wBAAW,IAAA;AASV,SAASC,EAAQC,GAAmBC,GAAuB;AAChE,MAAI,CAACJ,IAAiB;AACtB,QAAMK,IAAO,gBAAgBF,CAAS,KAAKC,CAAO;AAClD,EAAIH,EAAK,IAAII,CAAI,MACjBJ,EAAK,IAAII,CAAI,GACb,QAAQ,KAAKA,CAAI;AACnB;"}

package/dist/lib/dnd/announce.js

@@ -0,0 +1,120 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useState as y, useRef as u, useEffect as M } from "react";
+import { numberFormat as U } from "../intl-cache.js";
+import { isLaneDrop as A } from "./cross-drop.js";
+import { sameTarget as C } from "./geometry.js";
+import { useUiStrings as E, useUiLocale as P } from "../i18n/provider.js";
+const N = "danxbot-dnd-instructions", j = 150;
+function S(t, e, a) {
+  return A(t.crossDropOf(a.container), e.container, a.container);
+}
+function R(t, e, a, i, f, D) {
+  const l = t.spokenPosition(i.container, i.index, e), p = U(D, {});
+  return {
+    id: e,
+    label: f.labelOf?.(e) ?? e,
+    container: i.container,
+    from: a.container,
+    containerLabel: f.containerLabelOf?.(i.container) ?? i.container,
+    ...l,
+    positionText: p.format(l.position),
+    totalText: p.format(l.total)
+  };
+}
+function q(t, e = {}) {
+  const [a, i] = y(""), f = u(e);
+  f.current = e;
+  const D = E().dragDrop, l = u(D);
+  l.current = D;
+  const p = P(), w = u(p);
+  w.current = p;
+  const s = u(null), m = u(null), T = u(null), x = u(0);
+  return M(() => {
+    function I() {
+      m.current !== null && (window.clearTimeout(m.current), m.current = null, T.current = null);
+    }
+    function d(n) {
+      I(), x.current = Date.now(), i((r) => r === n ? r : n);
+    }
+    function _(n) {
+      const r = j - (Date.now() - x.current);
+      if (r <= 0) {
+        d(n);
+        return;
+      }
+      T.current = n, m.current === null && (m.current = window.setTimeout(() => {
+        m.current = null;
+        const o = T.current;
+        T.current = null, o !== null && d(o);
+      }, r));
+    }
+    function v() {
+      return { opts: f.current, strings: l.current, locale: w.current };
+    }
+    const k = t.addObserver({
+      onDragStart({ id: n, from: r, mode: o }) {
+        const { opts: O, strings: b, locale: L } = v(), c = t.getState().over ?? r, g = {
+          id: n,
+          from: r,
+          over: c,
+          mode: o,
+          target: R(t, n, r, c, O, L),
+          laneDrop: S(t, r, c),
+          home: R(t, n, r, r, O, L)
+        };
+        s.current = g, d(b.picked(g.target));
+      },
+      onDragOver({ id: n, over: r }) {
+        const o = s.current;
+        if (!o || C(o.over, r)) return;
+        const { opts: O, strings: b, locale: L } = v(), c = {
+          ...o,
+          over: r,
+          laneDrop: S(t, o.from, r),
+          target: R(t, n, o.from, r, O, L)
+        };
+        s.current = c;
+        const g = c.laneDrop ? b.movedToLane(c.target) : b.moved(c.target);
+        c.mode === "keyboard" ? d(g) : _(g);
+      },
+      onDragEnd() {
+        const n = s.current;
+        if (!n) return;
+        s.current = null;
+        const { dropped: r, droppedInLane: o } = v().strings;
+        d(n.laneDrop ? o(n.target) : r(n.target));
+      },
+      onDragCancel() {
+        const n = s.current;
+        n && (s.current = null, d(v().strings.cancelled(n.home)));
+      }
+    });
+    return () => {
+      k(), I();
+    };
+  }, [t]), { message: a, instructionsId: N };
+}
+function J({ session: t, ...e }) {
+  const { message: a } = q(t, e);
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      "data-dnd-live-region": "",
+      "aria-live": "assertive",
+      "aria-atomic": "true",
+      className: "sr-only",
+      children: a
+    }
+  );
+}
+function K({ id: t } = {}) {
+  const e = E().dragDrop;
+  return /* @__PURE__ */ h("p", { "data-dnd-instructions": "", id: t ?? N, className: "sr-only", children: e.instructions });
+}
+export {
+  N as DRAG_INSTRUCTIONS_ID,
+  K as DragInstructions,
+  J as DragLiveRegion,
+  q as useDragAnnouncements
+};
+//# sourceMappingURL=announce.js.map

package/dist/lib/dnd/announce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announce.js","sources":["../../../src/lib/dnd/announce.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { useUiLocale, useUiStrings } from \"../i18n\";\nimport { numberFormat } from \"../intl-cache\";\nimport { isLaneDrop } from \"./cross-drop\";\nimport { sameTarget } from \"./geometry\";\nimport type { DragSession } from \"./session\";\nimport type { ContainerId, DragId, DragMode, DropTarget } from \"./types\";\n\n/* ----------------------------------------------------------------------------\n   WHAT A SCREEN-READER USER IS TOLD WHILE A CARD IS IN THE AIR.\n\n   POSITION IS IN EVERY MESSAGE. \"Moved\" is the message almost every drag\n   implementation emits and it is worthless: it confirms that something\n   happened and withholds the only fact the user needed. A sighted user reads\n   the answer off the screen continuously, so the live region is not a\n   notification channel — it is the entire display, and a display that says\n   \"moved\" is a blank one.\n\n   NO `aria-grabbed`, NO `aria-dropeffect`. They are the attributes whose names\n   promise exactly this feature, they are what most tutorials still show, and\n   they were deprecated in ARIA 1.1 and REMOVED in 1.2 because assistive-\n   technology support never materialised. An implementation built on them\n   announces nothing at all, in a way no automated check notices, because the\n   attributes are perfectly valid HTML. The working pattern is ordinary focus,\n   an `aria-describedby` instruction on the handle, and a live region — this\n   file. `dnd-a11y.test.ts` sweeps the package for both attributes, because the\n   next contributor to \"fix accessibility\" here will reach for them in good\n   faith.\n   -------------------------------------------------------------------------- */\n\n/** Everything a message may name. Assembled once per announcement. */\nexport interface DragAnnouncementContext {\n  id: DragId;\n  /** `labelOf(id)` if supplied, otherwise the id — which is at least speakable. */\n  label: string;\n  container: ContainerId;\n  /**\n   * DX-4583: the container the card was picked up from. A message whose\n   * `container` differs from it describes a card in another container, which is\n   * the case where a consumer may mean \"this lane\" and no position at all.\n   */\n  from: ContainerId;\n  containerLabel: string;\n  /** 1-based, as spoken, in the WHOLE container — a windowed container reports its real offset and length (DX-4540). */\n  position: number;\n  /** `position` written the way the active locale writes numbers (DX-4740): what a message prints. */\n  positionText: string;\n  /**\n   * The list length WITH the carried item counted in it, so `position` is never\n   * \"4 of 3\". The session's own indices exclude the carried item — see the\n   * `DropTarget.index` contract — and reporting that raw count would tell the\n   * user a list is one shorter than the one they are looking at.\n   */\n  total: number;\n  /** `total` written the way the active locale writes numbers (DX-4740): what a message prints. */\n  totalText: string;\n}\n\nexport interface DragAnnouncementOptions {\n  /** Human name for an item. Falls back to the id. */\n  labelOf?: (id: DragId) => string;\n  /** Human name for a container. Falls back to the id. */\n  containerLabelOf?: (id: ContainerId) => string;\n}\n\n/**\n * One id for the whole page, deliberately not `useId()`.\n *\n * `<DragInstructions>` takes no required props and the hook hands the id to\n * every handle, so the two can only agree on a CONSTANT — a generated id would\n * differ per hook instance and every `aria-describedby` would point at nothing,\n * which reads as \"no instructions\" and is invisible to every automated check.\n * The cost: render `<DragInstructions>` once per page, not once per board.\n */\nexport const DRAG_INSTRUCTIONS_ID = \"danxbot-dnd-instructions\";\n\n/**\n * How long pointer-driven position changes are coalesced for.\n *\n * A pointer crossing a ten-card column emits ten position changes in a few\n * hundred milliseconds. Speaking all ten produces a stutter of half-syllables\n * and the user hears none of them; speaking the last one is the whole message.\n * KEYBOARD MOVES ARE NOT THROTTLED — each arrow press is one deliberate\n * request, and answering nine of ten is a control that has stopped responding.\n * The cost of the throttle is the skipped intermediate positions, which is\n * exactly what a pointer user never had either.\n */\nconst POINTER_MOVE_THROTTLE_MS = 150;\n\n/* ---------------------------------------------------------------- hook ---- */\n\ninterface Carried {\n  id: DragId;\n  from: DropTarget;\n  over: DropTarget;\n  mode: DragMode;\n  /** DX-4583: it would land in a container that takes it as a whole, so the lane-drop messages speak. */\n  laneDrop: boolean;\n  /** Where it would land — what a drop reports. */\n  target: DragAnnouncementContext;\n  /** Where it came from — what a cancel reports. */\n  home: DragAnnouncementContext;\n}\n\nfunction isLaneDropOver(session: DragSession, from: DropTarget, over: DropTarget): boolean {\n  return isLaneDrop(session.crossDropOf(over.container), from.container, over.container);\n}\n\nfunction describe(\n  session: DragSession,\n  id: DragId,\n  from: DropTarget,\n  target: DropTarget,\n  options: DragAnnouncementOptions,\n  locale: string,\n): DragAnnouncementContext {\n  const spoken = session.spokenPosition(target.container, target.index, id);\n  const format = numberFormat(locale, {});\n  return {\n    id,\n    label: options.labelOf?.(id) ?? id,\n    container: target.container,\n    from: from.container,\n    containerLabel: options.containerLabelOf?.(target.container) ?? target.container,\n    ...spoken,\n    positionText: format.format(spoken.position),\n    totalText: format.format(spoken.total),\n  };\n}\n\nexport interface DragAnnouncements {\n  /** The current live-region text. `\"\"` until the first pickup. */\n  message: string;\n  /** Put this on every handle's `aria-describedby`. */\n  instructionsId: string;\n}\n\n/**\n * Subscribe to the session and turn it into speech.\n *\n * AN OBSERVER, NOT A STATE SUBSCRIPTION. The messages are derived from\n * TRANSITIONS, not from state, and the two that matter most are indistinguishable\n * in state: a drop and a cancel both end at the same idle value, so a subscriber\n * sees one identical transition for two endings that need opposite messages — a\n * drop reports where the item LANDED, a cancel where it went BACK to.\n *\n * `session.addObserver` exists for exactly this. It was added after the first\n * version of this file inferred the ending from whichever DOM event was\n * mid-dispatch, because the session's callbacks were a single slot the board\n * already owned. That worked, and was ninety lines, and was defeated once by the\n * microtask checkpoint the HTML spec runs BETWEEN listeners of the same event —\n * so every cancel announced itself as a drop, in a real browser only. Nothing\n * that reads the session should have to guess what the session just did.\n *\n * The context for a message is captured WHILE THE DRAG IS LIVE, never at the\n * end. \"Position 3 of 7\" needs the carried item excluded from its own total, and\n * by the time the drag has ended the session no longer knows which item that\n * was — the number would quietly gain one.\n */\nexport function useDragAnnouncements(\n  session: DragSession,\n  options: DragAnnouncementOptions = {},\n): DragAnnouncements {\n  const [message, setMessage] = useState(\"\");\n\n  /* Read through a ref: `labelOf` and the provider's strings are rewritten on\n     render by every real consumer, so depending on them directly would tear\n     down the subscription on every render — mid-gesture, which is when it\n     matters. */\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  const strings = useUiStrings().dragDrop;\n  const stringsRef = useRef(strings);\n  stringsRef.current = strings;\n  const locale = useUiLocale();\n  const localeRef = useRef(locale);\n  localeRef.current = locale;\n\n  const carried = useRef<Carried | null>(null);\n  const timer = useRef<number | null>(null);\n  const queued = useRef<string | null>(null);\n  const lastEmit = useRef(0);\n\n  useEffect(() => {\n    function clearTimer(): void {\n      if (timer.current === null) return;\n      window.clearTimeout(timer.current);\n      timer.current = null;\n      queued.current = null;\n    }\n\n    /* De-duplicated, not just rate-limited. Re-setting a live region to the\n       text it already holds is a DOM mutation with no new information, and\n       several screen readers speak it again. */\n    function emitNow(text: string): void {\n      clearTimer();\n      lastEmit.current = Date.now();\n      setMessage((current) => (current === text ? current : text));\n    }\n\n    function emitThrottled(text: string): void {\n      const wait = POINTER_MOVE_THROTTLE_MS - (Date.now() - lastEmit.current);\n      if (wait <= 0) {\n        emitNow(text);\n        return;\n      }\n      /* Trailing edge, always. Without it a drag that crosses two items and\n         then rests announces the first position and never corrects itself —\n         the user is told a position the item no longer occupies, which is\n         worse than silence because it is actionable and wrong. */\n      queued.current = text;\n      if (timer.current !== null) return;\n      timer.current = window.setTimeout(() => {\n        timer.current = null;\n        const pending = queued.current;\n        queued.current = null;\n        if (pending !== null) emitNow(pending);\n      }, wait);\n    }\n\n    /* Every message needs the same two things: the option bag as it stands\n       right now, and the provider's string table. Read through the refs so a\n       consumer writing its options inline does not tear the observer down\n       mid-gesture. */\n    function ctx() {\n      return { opts: optionsRef.current, strings: stringsRef.current, locale: localeRef.current };\n    }\n\n    const detach = session.addObserver({\n      onDragStart({ id, from, mode }) {\n        const { opts, strings, locale } = ctx();\n        /* The pointer may already be over a different slot than the item own\n           home by the time the activation constraint is met, so the opening\n           position is read from the live session rather than assumed to be\n           `from`. Announcing the home position and then immediately correcting\n           it is two messages for one event. */\n        const over = session.getState().over ?? from;\n        const next = {\n          id,\n          from,\n          over,\n          mode,\n          target: describe(session, id, from, over, opts, locale),\n          laneDrop: isLaneDropOver(session, from, over),\n          home: describe(session, id, from, from, opts, locale),\n        };\n        carried.current = next;\n        emitNow(strings.picked(next.target));\n      },\n\n      onDragOver({ id, over }) {\n        const previous = carried.current;\n        if (!previous || sameTarget(previous.over, over)) return;\n        const { opts, strings, locale } = ctx();\n        const next = {\n          ...previous,\n          over,\n          laneDrop: isLaneDropOver(session, previous.from, over),\n          target: describe(session, id, previous.from, over, opts, locale),\n        };\n        carried.current = next;\n        /* A keyboard press is one deliberate request and gets one answer;\n           pointer movement is continuous sampling and is coalesced. Throttling\n           the keyboard would drop a position the user explicitly asked for. */\n        const text = next.laneDrop ? strings.movedToLane(next.target) : strings.moved(next.target);\n        if (next.mode === \"keyboard\") emitNow(text);\n        else emitThrottled(text);\n      },\n\n      onDragEnd() {\n        const previous = carried.current;\n        if (!previous) return;\n        carried.current = null;\n        /* `emitNow` discards any queued movement message. A trailing \"moved to\n           position 2\" arriving after \"dropped at position 5\" would leave the\n           region holding the wrong final answer. */\n        const { dropped, droppedInLane } = ctx().strings;\n        emitNow(previous.laneDrop ? droppedInLane(previous.target) : dropped(previous.target));\n      },\n\n      onDragCancel() {\n        const previous = carried.current;\n        if (!previous) return;\n        carried.current = null;\n        /* HOME, not target. A cancel puts the item back, and reporting where it\n           would have gone describes something that did not happen — to the one\n           user who cannot see that it did not. */\n        emitNow(ctx().strings.cancelled(previous.home));\n      },\n    });\n\n    return () => {\n      detach();\n      clearTimer();\n    };\n  }, [session]);\n\n  return { message, instructionsId: DRAG_INSTRUCTIONS_ID };\n}\n\n/* ---------------------------------------------------------- components ---- */\n\nexport type DragLiveRegionProps = { session: DragSession } & DragAnnouncementOptions;\n\n/**\n * The live region. Render it ONCE, unconditionally, for the whole board.\n *\n * UNCONDITIONALLY IS THE LOAD-BEARING WORD. A live region that is inserted and\n * populated in the same frame — `{dragging && <DragLiveRegion/>}` — frequently\n * announces nothing at all: the accessibility tree has to observe the region\n * BEFORE its content changes to know a change happened. It renders empty here\n * and stays mounted, which is also why the message lives in state rather than\n * being derived from `session.getState()` during render.\n *\n * ASSERTIVE, NOT POLITE. Polite queues behind whatever is currently being\n * spoken, and a drag generates positions faster than speech consumes them — so\n * the user hears \"position 2 of 7\" while the card sits at 6, which is a wrong\n * answer rather than a late one. Assertive interrupts, so the newest position\n * always wins. The usual argument against it — that it talks over the user —\n * does not apply to a gesture that is modal by construction: nothing else is\n * happening, and the drag's own output is the only thing being interrupted.\n *\n * `sr-only` — NOT `display:none`, NOT `visibility:hidden`, NOT `hidden`. All\n * three remove the element from the accessibility tree entirely, and a live\n * region outside the accessibility tree is silent while looking exactly right\n * in the markup.\n */\nexport function DragLiveRegion({ session, ...options }: DragLiveRegionProps) {\n  const { message } = useDragAnnouncements(session, options);\n  return (\n    <div\n      data-dnd-live-region=\"\"\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      className=\"sr-only\"\n    >\n      {message}\n    </div>\n  );\n}\n\nexport interface DragInstructionsProps {\n  /**\n   * The element id each handle's `aria-describedby` points at.\n   *\n   * Defaults to the module constant, which is what makes a prop-less\n   * `<DragInstructions>` and `useDragAnnouncements` agree without wiring. A\n   * component layer that generates its own id with `useId()` — so that two\n   * boards on one page do not emit a duplicate id — passes it here. Without\n   * this prop that layer has to re-implement the paragraph to change one\n   * attribute, which is how the instruction text ends up existing twice and\n   * drifting.\n   */\n  id?: string;\n}\n\n/**\n * The instruction text every handle points at with `aria-describedby`.\n *\n * A keyboard drag is unusable without it: nothing about a focused handle says\n * that Space starts a mode, and a user who does not know that never reaches any\n * of the rest of this file. Visually hidden because the same information is\n * carried for sighted users by the cursor and the moving card.\n */\nexport function DragInstructions({ id }: DragInstructionsProps = {}) {\n  const strings = useUiStrings().dragDrop;\n  return (\n    <p data-dnd-instructions=\"\" id={id ?? DRAG_INSTRUCTIONS_ID} className=\"sr-only\">\n      {strings.instructions}\n    </p>\n  );\n}\n"],"names":["DRAG_INSTRUCTIONS_ID","POINTER_MOVE_THROTTLE_MS","isLaneDropOver","session","from","over","isLaneDrop","describe","id","target","options","locale","spoken","format","numberFormat","useDragAnnouncements","message","setMessage","useState","optionsRef","useRef","strings","useUiStrings","stringsRef","useUiLocale","localeRef","carried","timer","queued","lastEmit","useEffect","clearTimer","emitNow","text","current","emitThrottled","wait","pending","ctx","detach","mode","opts","next","previous","sameTarget","dropped","droppedInLane","DragLiveRegion","jsx","DragInstructions"],"mappings":"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"}