@ecoma-io/loom 0.5.0 → 0.6.0

package/dist/primitives/date-time-range-picker/src/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/date-time-range-picker/src/DateTimeRangePicker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DateTimeRangeLabels } from \"@ecoma-io/loom-labels\";\nimport type {\n  CalendarPanelLabels,\n  DateSegmentLabels,\n  RangeCellLabels,\n  TimeSegmentLabels,\n} from \"@ecoma-io/loom-labels\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * A span between two instants as the outside world holds it: two plain ISO\n * local date-time strings, `\"YYYY-MM-DDTHH:mm\"`, both optional.\n *\n * The shape is `DateRange`'s and the reasoning behind it is `DateRange`'s — a\n * half-made range has to be representable, and `range.start` reads where\n * `range[0]` needs a comment. What is deliberately not shared is the **name**.\n * Two identically-shaped types whose strings are in different formats are\n * exactly what distinct names are for: a `DateRange` handed to this control\n * loses its times, and a `DateTimeRange` handed to DateRangePicker carries a\n * `T09:30` no calendar day can hold. One name for both would let either mistake\n * compile.\n */\nexport interface DateTimeRange {\n  /** The instant the span opens at, ISO `\"YYYY-MM-DDTHH:mm\"`. Absent while nothing has been chosen. */\n  start?: string | undefined;\n  /** The instant the span closes at, ISO `\"YYYY-MM-DDTHH:mm\"`. Absent while only the start has been chosen. */\n  end?: string | undefined;\n}\n\nconst MINUTES_PER_HOUR = 60;\nconst MINUTES_PER_DAY = 1440;\n\n/** A date and a time in the control's locale, at the precision the field is showing. */\nfunction formatInstant(\n  locale: string,\n  date: DateValue,\n  hour12: boolean | undefined,\n  seconds: boolean,\n): string {\n  return new Intl.DateTimeFormat(locale, {\n    dateStyle: \"long\",\n    timeStyle: seconds ? \"medium\" : \"short\",\n    // Absent means \"follow the locale\", which is what an unset `hourCycle`\n    // means everywhere else on this surface; a concrete `false` would force\n    // 24-hour onto a reader whose locale writes AM and PM.\n    ...optional({ hour12 }),\n  }).format(date.toDate(getLocalTimeZone()));\n}\n\n/**\n * English's plural rule, in English's own bag, which is the only place a plural\n * rule belongs. It is not extracted, not shared, and applies to nothing a host\n * supplies: `status` hands over the minutes and receives a finished sentence,\n * so a language with one form or with six selects its own.\n */\nfunction englishDuration(minutes: number): string {\n  if (minutes === 0) return \"no time at all\";\n  const days = Math.floor(minutes / MINUTES_PER_DAY);\n  const hours = Math.floor((minutes % MINUTES_PER_DAY) / MINUTES_PER_HOUR);\n  const rest = minutes % MINUTES_PER_HOUR;\n  return [\n    [days, \"day\"],\n    [hours, \"hour\"],\n    [rest, \"minute\"],\n  ]\n    .filter(([count]) => (count as number) > 0)\n    .map(([count, name]) => `${String(count)} ${String(name)}${count === 1 ? \"\" : \"s\"}`)\n    .join(\" \");\n}\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const DATE_TIME_RANGE_LABELS: DateTimeRangeLabels = {\n  startDate: \"Start date and time\",\n  endDate: \"End date and time\",\n  status: ({ locale, start, end, minutes, hour12, seconds }) => {\n    const anchor = start ?? end;\n    if (!anchor) return \"Nothing chosen. Choose the first day of the range.\";\n    if (!start || !end || minutes === undefined) {\n      return `${formatInstant(locale, anchor, hour12, seconds)} chosen. Choose the last day of the range.`;\n    }\n    const span = `${formatInstant(locale, start, hour12, seconds)} to ${formatInstant(locale, end, hour12, seconds)}`;\n    if (minutes < 0) return `${span}. The end falls before the start.`;\n    return `${span}, ${englishDuration(minutes)}.`;\n  },\n};\n\n/**\n * Everything this control can be asked to say: the four shared slices, plus its\n * own. Annotate a bag with `LabelOverrides<DateTimeRangePickerLabels>` and never\n * with this, which is total.\n */\nexport type DateTimeRangePickerLabels = DateSegmentLabels &\n  TimeSegmentLabels &\n  CalendarPanelLabels &\n  RangeCellLabels &\n  DateTimeRangeLabels;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref, useId, useTemplateRef, watch } from \"vue\";\nimport {\n  DateRangePickerRoot,\n  DateRangePickerAnchor,\n  DateRangePickerField,\n  DateRangePickerInput,\n  DateRangePickerTrigger,\n  DateRangePickerContent,\n  DateRangePickerCalendar,\n  DateRangePickerHeader,\n  DateRangePickerPrev,\n  DateRangePickerHeading,\n  DateRangePickerNext,\n  DateRangePickerGrid,\n  DateRangePickerGridHead,\n  DateRangePickerGridRow,\n  DateRangePickerHeadCell,\n  DateRangePickerGridBody,\n  DateRangePickerCell,\n  DateRangePickerCellTrigger,\n} from \"reka-ui\";\nimport { CalendarRange, ChevronLeft, ChevronRight } from \"@lucide/vue\";\nimport {\n  getLocalTimeZone,\n  isSameDay,\n  isToday,\n  parseDateTime,\n  toCalendarDate,\n  toCalendarDateTime,\n  type CalendarDateTime,\n  type DateValue,\n} from \"@internationalized/date\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useAncestorDisabled } from \"@ecoma-io/loom-labels\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\nimport {\n  CALENDAR_PANEL_LABELS,\n  DATE_SEGMENT_LABELS,\n  RANGE_CELL_LABELS,\n  TIME_SEGMENT_LABELS,\n  segmentAriaLabel,\n  segmentAriaValueText,\n  type RangeCellPart,\n} from \"@ecoma-io/loom-labels\";\n\n/** The range as Reka models it, which is the same shape carrying calendar objects. */\ntype CalendarRangeValue = { start: DateValue | undefined; end: DateValue | undefined };\n\n/** Which end of the range a segment belongs to, as Reka's field parts name it. */\ntype SegmentType = \"start\" | \"end\";\n\n/** A time of day with no day attached, which is the half of an instant the calendar never touches. */\ntype TimeOfDay = { hour: number; minute: number; second: number };\n\n/**\n * DateTimeRangePicker — a span between two instants: a day and a time at each\n * end, entered either by typing across one segmented field or by picking the\n * two days out of a two-month calendar. Reach for it wherever the value is a\n * window with a clock on it — a meeting, a shift, a maintenance slot, a log\n * query.\n *\n * It is the intersection of two controls that already exist, and it re-decides\n * nothing either of them settled. From\n * [DateRangePicker](../DateRangePicker/DateRangePicker.vue): the\n * `{ start, end }` model with both halves optional so a half-made range is\n * representable, the two named half-groups, the two months that stack rather\n * than dropping one below `sm`, and the `role=\"status\"` line that gives a\n * keyboard reader what the hover preview only gives a pointer. From\n * [DateTimePicker](../DateTimePicker/DateTimePicker.vue): the local ISO\n * date-time value with no timezone in it, `min`/`max` widened to whole days on\n * the way into the calendar with instant precision re-applied here, the field\n * keyed on `${granularity}-${hourCycle}` because Reka reads both once, and the\n * rewritten hour announcement. Read those two files for the reasoning; the\n * comments below cover only what having two ends *and* a clock changes.\n *\n * **What it changes is that the round trip doubles and then grows a cross\n * term.** DateTimePicker has one time to protect through a day being picked.\n * This has the start's time, the end's time, and the case where both ends fall\n * on the same day at different times — a meeting from 09:00 to 10:00, which is\n * the single most ordinary thing anyone will bind to this control and which a\n * range calendar that refuses a repeated day, or collapses one to a single\n * instant, gets wrong. `heldTimes` below is what keeps all three.\n *\n * Ordering is inherited rather than re-decided, and the two halves of it are\n * inherited from different parents. The calendar orders **days**: clicking the\n * 20th and then the 14th gives the 14th to the 20th, because refusing the\n * second half of a backwards gesture explains nothing. It never orders\n * **times** — those are only ever the ones each half already had, so a range\n * that ends before it starts (which within one day only the times can decide)\n * is announced invalid, exactly as a typed one is, rather than silently\n * swapped. Normalising across days and quietly not within one would be the\n * trap.\n *\n * For a span of whole days reach for DateRangePicker; for one instant,\n * DateTimePicker; for a time of day with no date, TimePicker. Two\n * DateTimePickers side by side are two values and two validations, and nothing\n * between them knows that the second must not fall before the first.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself through\n * `useFieldControl()` — the row's id, the id of its hint or error line, and\n * `required` / `invalid` / `disabled` / `readonly` / `name` — so `<Field\n * label=\"Meeting\" error=\"…\"><DateTimeRangePicker /></Field>` needs no\n * attributes at the call site. Every prop below still wins over the row when it\n * is set, in both directions, which is why the four booleans default to\n * `undefined` rather than `false`. The row describes the span as a whole and\n * not either end: a description repeated onto both halves is read out twice for\n * one value.\n */\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * The chosen span, as `{ start, end }` ISO `\"YYYY-MM-DDTHH:mm\"` strings —\n     * `\"…:ss\"` when `granularity` asks for seconds. Either half may be absent:\n     * `{}` is nothing chosen, `{ start }` is a range half made. A bare\n     * `\"YYYY-MM-DD\"` is accepted in either half and read as midnight that day.\n     * The explicit `| undefined` is what lets `v-model` bind a ref that clears.\n     */\n    modelValue?: DateTimeRange | undefined;\n    /** The earliest choosable instant, same format. The calendar disables every day that lies wholly before it; a time before it on the boundary day is announced invalid rather than refused. */\n    min?: string;\n    /** The latest choosable instant, same format. The calendar disables every day that lies wholly after it; a time after it on the boundary day is announced invalid rather than refused. */\n    max?: string;\n    /** How far down both halves of the field go. `\"minute\"` reports `\"YYYY-MM-DDTHH:mm\"`; `\"second\"` adds a seconds segment to each end and reports `\"YYYY-MM-DDTHH:mm:ss\"`. */\n    granularity?: \"minute\" | \"second\";\n    /** Whether both times read as 12-hour with an AM/PM segment or as 24-hour. Display only: the value stays 24-hour. Unset follows `locale`. */\n    hourCycle?: 12 | 24;\n    /** BCP 47 tag driving the order of the segments in both halves, the month and weekday names, which day a week starts on, and the 12-or-24-hour default. */\n    locale?: string;\n    /** How many months the calendar shows at once. Two is the default because a span is usually read across a month boundary; one is for a host that knows it is rendering into a narrow shell. */\n    months?: 1 | 2;\n    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the span without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. An instant outside `min`/`max`, or an end before its start, does the same on its own whatever this says. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the field mandatory to assistive tech (`aria-required` on the group holding both halves). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`. Reka submits the whole span through one hidden input, as `start - end`. Unset defers to a wrapping Field. */\n    name?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `DateTimeRangePickerLabels` — the rest stay as the host's\n     * `provideLoomLabels` vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: eleven of the eighteen names replace English literals Reka UI\n     * writes of its own accord, and a language is set once with\n     * `provideLoomLabels`.\n     */\n    labels?: LabelOverrides<DateTimeRangePickerLabels>;\n  }>(),\n  {\n    granularity: \"minute\",\n    locale: \"en\",\n    months: 2,\n    // Not `false`, for any of the four — TextField.vue carries the full\n    // reasoning: `false` is a caller's decision that must beat the row, absent\n    // is a caller saying nothing, and only `undefined` survives to mean that\n    // past Vue's absent-Boolean-casts-to-false rule.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The chosen span as ISO `\"YYYY-MM-DDTHH:mm\"` strings. A half-made range arrives as `{ start }`; a cleared one as `{}`. */\n  \"update:modelValue\": [value: DateTimeRange];\n}>();\n\nconst SEGMENT_TYPES: readonly SegmentType[] = [\"start\", \"end\"];\n\n// Five slots, one prop. There is no single `text` for the whole control because\n// there is no single slot: four of the five are vocabularies this control\n// shares with its siblings and only the last is its own. Naming them apart is\n// what keeps a reader of the template able to see which one a binding came\n// from. The one `labels` prop feeds all five — a getter returning the\n// intersection satisfies each slice, and the keys a slice does not know are\n// ignored by `useLabels`' own return type.\nconst dateText = useLabels(\"dateSegments\", DATE_SEGMENT_LABELS, () => props.labels);\nconst timeText = useLabels(\"timeSegments\", TIME_SEGMENT_LABELS, () => props.labels);\nconst panelText = useLabels(\"calendarPanel\", CALENDAR_PANEL_LABELS, () => props.labels);\nconst cellText = useLabels(\"rangeCell\", RANGE_CELL_LABELS, () => props.labels);\nconst text = useLabels(\"dateTimeRange\", DATE_TIME_RANGE_LABELS, () => props.labels);\n\n// Read through the refs on every call rather than resolved into a lookup table\n// once: a table built in `setup` freezes the first language and every later\n// switch silently does nothing. The resolution rules themselves are the shared\n// helpers' — five hand-copied pairs of these two functions drifted once\n// already, so the branches live in `@ecoma-io/loom-labels` now and only the\n// refs stay here; both halves go in, and each answers its own parts.\nfunction segmentLabel(part: string): string | undefined {\n  return segmentAriaLabel({ date: dateText.value, time: timeText.value }, part);\n}\n\n// `monthValue` arrives per half — whichever of start and end is rendering the\n// segment passes its own parsed month up from the template.\nfunction segmentValueText(\n  part: string,\n  value: string,\n  monthValue?: number,\n): { \"aria-valuetext\"?: string } {\n  return segmentAriaValueText({\n    date: dateText.value,\n    time: timeText.value,\n    part,\n    value,\n    locale: props.locale,\n    month: monthValue,\n  });\n}\n\n// Routed exactly as both parents route it, and for the same reasons: `class`\n// sizes the whole control so it lands on the anchor, and everything else names\n// or describes the value, so it lands on the `role=\"group\"` field.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: fieldAttrs } = useSplitAttrs();\n\nfunction fromIso(value: string | undefined): CalendarDateTime | undefined {\n  if (!value) return undefined;\n  try {\n    // `parseDateTime` reads a bare `\"YYYY-MM-DD\"` as midnight that day and\n    // refuses an offset or a `Z` outright — DateTimePicker carries why that\n    // refusal is wanted rather than tolerated.\n    return parseDateTime(value);\n  } catch {\n    return undefined;\n  }\n}\n\nfunction pad(value: number): string {\n  return String(value).padStart(2, \"0\");\n}\n\n// Written out rather than taken from `toString()`, for the reason DateTimePicker\n// gives: `toString()` always prints seconds, so a minute-granularity field would\n// report a second of its own invention.\nfunction toIso(date: DateValue): string {\n  const instant = toCalendarDateTime(date);\n  const stamp = `${toCalendarDate(instant).toString()}T${pad(instant.hour)}:${pad(instant.minute)}`;\n  return props.granularity === \"second\" ? `${stamp}:${pad(instant.second)}` : stamp;\n}\n\n// The calendar chooses a day and the bounds fence an instant, so the boundary\n// day is only partly available and is widened here to be reachable at all.\n// DateTimePicker carries the full account — and what it gives up, `outOfRange`\n// below takes back at the precision the time is actually entered.\nfunction startOfDay(date: CalendarDateTime | undefined) {\n  return date?.set({ hour: 0, minute: 0, second: 0, millisecond: 0 });\n}\n\nfunction endOfDay(date: CalendarDateTime | undefined) {\n  return date?.set({ hour: 23, minute: 59, second: 59, millisecond: 999 });\n}\n\nconst rootValue = computed(() =>\n  optional({\n    // Half of a range is still a range, so the two ends are converted\n    // independently and an unparseable one only empties its own half. The whole\n    // key is dropped when nothing at all is bound, which is what keeps an\n    // unbound control uncontrolled — see `optional()`.\n    modelValue: props.modelValue\n      ? { start: fromIso(props.modelValue.start), end: fromIso(props.modelValue.end) }\n      : undefined,\n    minValue: startOfDay(fromIso(props.min)),\n    maxValue: endOfDay(fromIso(props.max)),\n    hourCycle: props.hourCycle,\n  }),\n);\n\n// The half of the bound the calendar gave up, applied to **both** ends: a span\n// whose start is an hour early is as unbookable as one whose end is an hour\n// late, and Reka's own comparison now only sees the widened whole-day bounds.\nconst outOfRange = computed(() => {\n  const lower = fromIso(props.min);\n  const upper = fromIso(props.max);\n  if (!lower && !upper) return false;\n  return SEGMENT_TYPES.some((type) => {\n    const value = fromIso(props.modelValue?.[type]);\n    if (!value) return false;\n    return (!!lower && value.compare(lower) < 0) || (!!upper && value.compare(upper) > 0);\n  });\n});\n\n// An end before its start. DateRangePicker never had to derive this: two days\n// out of a calendar are ordered by Reka on the way out, and a backwards range\n// could only ever be typed. Here it can also be *built* — collapsing a span onto\n// one day keeps each end's own time, and 17:00 to 09:00 is what that is — so the\n// state is real however it arrived, and it is invisible without something\n// saying so. The status line says it in words; this is what paints it.\nconst backwards = computed(() => {\n  const start = fromIso(props.modelValue?.start);\n  const end = fromIso(props.modelValue?.end);\n  return !!start && !!end && end.compare(start) < 0;\n});\n\n/**\n * The segments are `<div role=\"spinbutton\" tabindex=\"0\">`, and\n * `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and\n * `<textarea>` — so the trigger button inside a disabled group went inert while\n * the segments beside it still typed. Measured on this branch: an empty `mm`\n * segment became `8` on an arrow key. Exactly the defect DatePicker carries,\n * and fixed exactly the way DatePicker fixes it.\n *\n * Read off the DOM rather than taken from the Field context, which publishes no\n * `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.\n */\nconst anchor = useTemplateRef<{ $el?: Element }>(\"anchor\");\nconst groupDisabled = useAncestorDisabled(() => anchor.value?.$el);\n\n// `id` and `aria-describedby` reach this control as fallthrough attrs rather\n// than props, so they are handed in as this caller's own values: a caller who\n// sets either still beats the row, and the row's description is merged into\n// theirs. `field.attrs` then spreads onto `DateRangePickerField` **after**\n// `fieldAttrs`, which is the node both were already landing on — DatePicker.vue\n// carries the full account of that position and of where Reka then puts each\n// key. It is the outer field group and not either half's own group: a\n// description repeated onto the start and the end is read out twice for one\n// span.\n//\n// Neither derived error is folded in here, for DateTimePicker's reason: three\n// separate claims — the host called this wrong, the instants miss the bounds\n// the host declared, the span runs backwards — cannot be carried by one\n// resolved boolean. What they share is the error *presentation*, `errored`.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  ariaLabelledby: attrs[\"aria-labelledby\"] as string | undefined,\n  name: props.name,\n  // The fieldset beats the prop in both directions, exactly as it does for the\n  // trigger button inside this very control.\n  disabled: groupDisabled.value ? true : props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `aria-labelledby` for the group, resolved against the row — DatePicker's\n// reasoning, minus the old third arm of the guard: a caller's own labelledby\n// has to survive here, because the binding below beats the spread and an\n// `undefined` would strip it instead of deferring to it.\nconst groupLabelledBy = computed(() => (attrs[\"aria-label\"] ? undefined : field.labelledBy));\n\nconst errored = computed(() => field.invalid || outOfRange.value || backwards.value);\n\n// Owned here rather than left to Reka's `closeOnSelect`, for the reason\n// DatePicker gives, and closing on the *second* choice for the reason\n// DateRangePicker gives: the panel stays open over a half-made range because\n// the reader is not finished.\nconst open = ref(false);\n\n/**\n * The time each half last carried.\n *\n * Every calendar cell carries the placeholder's time, and the placeholder\n * follows the *start*. That is the whole round trip in DateTimePicker and it is\n * only half of one here: picking the end's day out of the calendar would give\n * the end the start's time. Worse, Reka's two-click protocol drops the end\n * outright on the click that begins a new range, so by the second click the\n * end's own time is nowhere in the model to be read back.\n *\n * So it is remembered here, and deliberately not as a computed: a computed over\n * `modelValue` is exactly the thing that has already gone. A half is forgotten\n * only when it is cleared while the panel is **closed** — that is a reader\n * emptying the field and meaning it, where a half missing mid-gesture is Reka's\n * protocol and its time still has an owner.\n */\nconst heldTimes: Record<SegmentType, TimeOfDay | undefined> = { start: undefined, end: undefined };\n\nwatch(\n  () => [props.modelValue?.start, props.modelValue?.end] as const,\n  ([start, end]) => {\n    for (const [type, iso] of [\n      [\"start\", start],\n      [\"end\", end],\n    ] as const) {\n      const value = fromIso(iso);\n      heldTimes[type] = value\n        ? { hour: value.hour, minute: value.minute, second: value.second }\n        : open.value\n          ? heldTimes[type]\n          : undefined;\n    }\n  },\n  { immediate: true },\n);\n\nfunction keepTime(type: SegmentType, picked: DateValue, fromCalendar: boolean): DateValue {\n  // The field is the only other thing that can move a value, and it moves the\n  // time itself — re-timing what it reports would overwrite the keystroke.\n  if (!fromCalendar) return picked;\n  const current = fromIso(props.modelValue?.[type]);\n  // A segment typed while the panel happens to be open lands on a day that has\n  // not moved, and that edit's time is the one that must win. Where the day did\n  // move, the held time and the current one agree anyway, so this costs\n  // nothing and closes the one case where they would not.\n  if (current && isSameDay(current, picked)) return picked;\n  const held = heldTimes[type];\n  return held ? toCalendarDateTime(picked).set(held) : picked;\n}\n\nfunction onRangeChange(range: CalendarRangeValue) {\n  // Read before `open` is written below. While the panel is open the calendar\n  // is what moved, and the calendar only ever chooses a day.\n  const fromCalendar = open.value;\n  if (range.start && range.end) open.value = false;\n  emit(\n    \"update:modelValue\",\n    optional({\n      start: range.start ? toIso(keepTime(\"start\", range.start, fromCalendar)) : undefined,\n      end: range.end ? toIso(keepTime(\"end\", range.end, fromCalendar)) : undefined,\n    }),\n  );\n}\n\nfunction isDateToday(date: DateValue): boolean {\n  return isToday(date, getLocalTimeZone());\n}\n\n// One Tab stop for the whole field, which is ten segments at the default\n// settings and fourteen with AM/PM and seconds at both ends. DateRangePicker's\n// roving stop, unchanged: Reka collects both halves' segments into one ordered\n// set and walks it with ArrowLeft/ArrowRight, so a stop per half would be an\n// arbitrary place to make a keyboard user press Tab. The remembered segment is\n// keyed by half *and* part — `hour` alone names two different segments here.\nconst focusedSegment = ref<string>();\n\nfunction segmentKey(type: SegmentType, part: string): string {\n  return `${type}:${part}`;\n}\n\nfunction segmentTabIndex(\n  type: SegmentType,\n  part: string,\n  segments: Record<SegmentType, readonly { part: string }[]>,\n): number | undefined {\n  // Read-only keeps every stop it had, unlike disabled: the span is on show and\n  // a reader still arrows across the segments to read it.\n  if (field.disabled || part === \"literal\") return undefined;\n  const editable = SEGMENT_TYPES.flatMap((each) =>\n    segments[each]\n      .filter((segment) => segment.part !== \"literal\")\n      .map((segment) => segmentKey(each, segment.part)),\n  );\n  // Dropped when a granularity, hour-cycle or locale change takes the\n  // remembered segment away — a field whose only tab stop is a seconds segment\n  // that no longer exists is a field nothing can reach.\n  const active =\n    focusedSegment.value !== undefined && editable.includes(focusedSegment.value)\n      ? focusedSegment.value\n      : editable[0];\n  return segmentKey(type, part) === active ? 0 : -1;\n}\n\n// Reka seeds the field's segment values from the granularity and builds its\n// formatter from the hour cycle once, at setup, and watches neither — the same\n// shared code, and so the same two observed symptoms TimePicker and\n// DateTimePicker record. Both are structural, so the field is rebuilt rather\n// than patched. `locale` is deliberately not in the key: Reka does watch that.\nconst shape = computed(() => `${props.granularity}-${String(props.hourCycle)}`);\n\n/**\n * The same \"13 PM\" defect DateTimePicker and TimePicker document, in the same\n * shared Reka segment code: the hour publishes `aria-valuenow` off the internal\n * 24-hour value while declaring its range as 1–12. Rebuilt from what the\n * segment is actually showing, and only under an explicit 12-hour cycle — left\n * to the locale, Reka defers to the formatter and the pair already agrees. It\n * takes one half's segments at a time, because the two hours are two segments\n * showing two different numbers.\n */\nfunction hourAnnouncement(\n  segments: readonly { part: string; value: string }[],\n): Record<string, string | number> | undefined {\n  if (props.hourCycle !== 12) return undefined;\n  const shown = Number(segments.find((segment) => segment.part === \"hour\")?.value);\n  if (!Number.isInteger(shown)) return undefined;\n  const period = segments.find((segment) => segment.part === \"dayPeriod\")?.value;\n  return { \"aria-valuenow\": shown, \"aria-valuetext\": period ? `${shown} ${period}` : `${shown}` };\n}\n\nconst headingId = useId();\n\n// Each grid's own name is formatted here rather than read off Reka because it\n// is needed in the parent scope of the cells, where Reka's slot props are not\n// in scope — and it is a date rather than a label, so `Intl` and `locale` are\n// the whole answer. A Thai reader gets a Buddhist year in it, as in the field.\nconst monthFormat = computed(\n  () => new Intl.DateTimeFormat(props.locale, { month: \"long\", year: \"numeric\" }),\n);\n\nfunction format(formatter: Intl.DateTimeFormat, date: DateValue): string {\n  return formatter.format(date.toDate(getLocalTimeZone()));\n}\n\nconst MS_PER_MINUTE = 60_000;\n\n/**\n * How long the span is, as a signed count of minutes — a number handed over,\n * never words. The `unit(count, name)` that used to append an `\"s\"` here was\n * English's plural rule sitting in a control that renders in every language;\n * it is deleted rather than extracted, and English's own copy of it lives in\n * `DATE_TIME_RANGE_LABELS` where nothing else inherits it.\n *\n * DateRangePicker counts **days with both ends included**, because a booking of\n * the 14th to the 20th is seven days. That rule is wrong here, and wrong in the\n * direction that matters most: it reads a meeting from 09:00 to 10:00 as \"1\n * day\". A span between two instants is the distance between them, so this\n * measures that instead — and signs it, so an end before its start arrives as a\n * negative rather than as a second boolean the label would have to be handed.\n *\n * Measured through UTC rather than the local zone: this value carries no\n * timezone at all, so the honest answer is wall-clock. Converting through the\n * reader's zone would add or drop an hour across a daylight-saving boundary for\n * two instants that never claimed to be in it.\n */\nfunction spanMinutes(start: DateValue, end: DateValue): number {\n  const from = toCalendarDateTime(start).toDate(\"UTC\").getTime();\n  const to = toCalendarDateTime(end).toDate(\"UTC\").getTime();\n  return Math.round((to - from) / MS_PER_MINUTE);\n}\n\n// **The accessibility decision this control inherits and has to say more in.**\n// The band drawn between the anchor and the pointer is what makes a range\n// calendar legible and it is worth nothing to a reader who is not looking at\n// it. Reka moves the preview on `focusin` as well as `mouseenter`, which covers\n// the reader who can see the grid; this line is the same information as text,\n// in a `role=\"status\"` above the grids.\n//\n// It says more than DateRangePicker's does because it has more to say: the two\n// ends are instants, not days, so the summary names them with their times and\n// reports how long the span actually is. The backwards case gets its own\n// sentence — that state is now reachable within a single day, where nothing in\n// the grid distinguishes it, and it must not be carried by the destructive\n// border alone.\nfunction rangeStatus(range: CalendarRangeValue): string {\n  // The whole line is one label taking raw values — two instants and a signed\n  // count of minutes — rather than four sentences this control joins. Which end\n  // is chosen, where a duration sits in the sentence and how \"2 days 3 hours\"\n  // is written are all properties of a language.\n  return text.value.status({\n    locale: props.locale,\n    start: range.start,\n    end: range.end,\n    minutes: range.start && range.end ? spanMinutes(range.start, range.end) : undefined,\n    hour12: props.hourCycle === undefined ? undefined : props.hourCycle === 12,\n    seconds: props.granularity === \"second\",\n  });\n}\n\n/**\n * A cell's part in the range, or nothing when it has none. DateRangePicker's,\n * unchanged in substance: the first day, the last and the ones between are\n * three states drawn as three shades of one colour, which survives neither a\n * colour deficiency nor forced-colors mode, so the part is named in the cell's\n * accessible name instead.\n *\n * The one-day case is the boundary that matters more here than there. A span\n * from 09:00 to 17:00 on one day is an ordinary meeting rather than a\n * degenerate range, and its single cell is genuinely both ends — announced once\n * as that, not twice as two different things.\n */\nfunction rangePart(day: DateValue, range: CalendarRangeValue): RangeCellPart | undefined {\n  const isStart = range.start !== undefined && isSameDay(day, range.start);\n  const isEnd = range.end !== undefined && isSameDay(day, range.end);\n  if (isStart && isEnd) return \"both\";\n  if (isStart) return \"start\";\n  if (isEnd) return \"end\";\n  if (range.start && range.end && day.compare(range.start) > 0 && day.compare(range.end) < 0) {\n    return \"within\";\n  }\n  return undefined;\n}\n\n// Reka labels every cell with its full date already; this replaces that label\n// rather than adding to it, because a cell's part in the range has to arrive\n// *with* the date and there is no second slot on an element for a name. The\n// times are deliberately not in it: the cell is a day, and choosing it changes\n// only the day.\nfunction dayLabel(day: DateValue, range: CalendarRangeValue): string {\n  return cellText.value.cell({ locale: props.locale, date: day, part: rangePart(day, range) });\n}\n\nconst panel = ref<HTMLElement | null>(null);\n\n// Focus lands on the day the calendar is already sitting on rather than on the\n// previous-month button; DatePicker carries the reasoning.\nfunction onOpenAutoFocus(event: Event) {\n  const day = panel.value?.querySelector<HTMLElement>(\n    '[data-reka-calendar-cell-trigger][tabindex=\"0\"]',\n  );\n  if (!day) return;\n  event.preventDefault();\n  day.focus();\n}\n</script>\n\n<template>\n  <DateRangePickerRoot\n    v-slot=\"{ modelValue: range }\"\n    v-model:open=\"open\"\n    v-bind=\"rootValue\"\n    :locale=\"locale\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :number-of-months=\"months\"\n    :granularity=\"granularity\"\n    prevent-deselect\n    @update:model-value=\"onRangeChange\"\n  >\n    <!-- Three markers rather than one spelled three ways: `data-invalid` is the\n         host saying so, `data-out-of-range` is an end falling outside `min` and\n         `max`, `data-backwards` is the span running the wrong way. Reka already\n         spells a fourth meaning `data-invalid` on the field group below, which\n         is why none of these lives there. -->\n    <DateRangePickerAnchor\n      ref=\"anchor\"\n      :data-invalid=\"field.invalid || undefined\"\n      :data-out-of-range=\"outOfRange || undefined\"\n      :data-backwards=\"backwards || undefined\"\n      :data-readonly=\"field.readonly || undefined\"\n      :class=\"cn('block w-full', attrs.class as string)\"\n    >\n      <!-- The `aria-invalid` binding after the `v-bind` is the same narrow\n           exception DateTimePicker makes: everywhere else the rule is to delete\n           it rather than overwrite `field.attrs`' resolved value with a raw\n           prop, and here it is not a raw prop — `errored` is that resolved\n           value *plus* the two derived states, so it can only add the attribute\n           where the spread already omitted it. -->\n      <DateRangePickerField\n        :key=\"shape\"\n        v-slot=\"{ segments }\"\n        v-bind=\"{ ...fieldAttrs, ...field.attrs }\"\n        :aria-labelledby=\"groupLabelledBy\"\n        :aria-invalid=\"errored || undefined\"\n        :class=\"\n          cn(\n            // The text input's own height scale, so a span sitting in a form row\n            // beside a text field lines up rather than nearly lining up. No gap:\n            // every separator between two segments is itself a segment, so\n            // spacing them apart writes the value as `3 / 14 / 2026 , 09 : 30`.\n            'flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground',\n            'transition-[color,background-color,border-color,box-shadow] duration-fast ease-out',\n            'focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring',\n            !errored && 'focus-within:shadow-halo',\n            // Three resting appearances, all three painted on this group rather\n            // than on the segments: ten segments and their separators, so a\n            // per-segment fill would leave every slash, comma, colon and the\n            // dash between the halves on `background` — a striped control.\n            //\n            // Read-only lifts to `subtle` and keeps its focus ring and its\n            // full-strength text — a read-only span is a value on show, not an\n            // unavailable control — with the rim left at `input`, because the\n            // field is still a Tab stop and still submitted. Reka's own\n            // `data-readonly` on this group says the same thing to assistive\n            // tech, so nothing here rests on colour.\n            field.readonly && 'bg-subtle',\n            // Drained rather than faded, for the reason DatePicker writes out:\n            // `opacity-50` took all ten segments and the dash between the halves\n            // down with the box, from 14.09:1 to 2.99:1 and the dash to 2.02:1.\n            // The fill drains one step past read-only, the muted text over it is\n            // 4.68:1, and the rim slackens from `input` to `border` — three\n            // channels, so the two states do not part on hue alone. The dash\n            // declares its own colour and the segments declare none, so this one\n            // line covers both by inheritance.\n            field.disabled && 'cursor-not-allowed border-border bg-muted text-muted-foreground',\n            // Last of the rules that name a border colour: `cn()` resolves one\n            // by whichever class it saw last, so a field both in error and\n            // unavailable would otherwise lose its destructive rim.\n            errored && 'border-destructive focus-within:outline-destructive',\n          )\n        \"\n      >\n        <!-- Each half is its own named group, as in DateRangePicker and for a\n             reason this control doubles: Reka labels a segment by its part\n             alone, which is ten segments and two identical sets of five names.\n             The group name is announced once on entering the half rather than\n             folded into every segment.\n\n             Every `:aria-label` from here down replaces one Reka writes in\n             English inside its own render function, reaching the DOM node as a\n             fallthrough attribute that Vue merges last. Removing one falls back\n             not to nothing but to Reka's English. -->\n        <template v-for=\"(type, typeIndex) in SEGMENT_TYPES\" :key=\"type\">\n          <span v-if=\"typeIndex > 0\" aria-hidden=\"true\" class=\"px-1.5 text-muted-foreground\"\n            >–</span\n          >\n\n          <div\n            role=\"group\"\n            :aria-label=\"type === 'start' ? text.startDate : text.endDate\"\n            class=\"flex items-center\"\n          >\n            <DateRangePickerInput\n              v-for=\"(item, index) in segments[type]\"\n              :key=\"index\"\n              :part=\"item.part\"\n              :type=\"type\"\n              :tabindex=\"segmentTabIndex(type, item.part, segments)\"\n              :aria-label=\"segmentLabel(item.part)\"\n              v-bind=\"{\n                ...segmentValueText(\n                  item.part,\n                  item.value,\n                  (type === 'start' ? range.start : range.end)?.month,\n                ),\n                ...(item.part === 'hour' ? hourAnnouncement(segments[type]) : undefined),\n              }\"\n              :class=\"\n                cn(\n                  'tabular rounded-sm px-0.5 outline-none',\n                  'transition-colors duration-instant ease-out',\n                  'focus:bg-primary-muted focus:text-primary-text',\n                  'data-[placeholder]:text-muted-foreground',\n                  item.part === 'literal' && 'text-muted-foreground',\n                )\n              \"\n              @focusin=\"focusedSegment = segmentKey(type, item.part)\"\n            >\n              {{ item.value }}\n            </DateRangePickerInput>\n          </div>\n        </template>\n\n        <!-- Named for what it opens, which is a calendar of days and not a\n             clock: the times are entered in the segments to its left and have no\n             panel. `CalendarRange` rather than DateTimePicker's `CalendarClock`\n             for the same reason — what is behind the button is two months with a\n             band drawn across them. Dropped entirely while read-only, as in both\n             parents: Reka's `readonly` reaches the calendar and makes every\n             cell's click a no-op, so the button would open a panel in which\n             nothing can be chosen. -->\n        <DateRangePickerTrigger\n          v-if=\"!field.readonly\"\n          :aria-label=\"panelText.openCalendar\"\n          class=\"ml-auto inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed\"\n        >\n          <CalendarRange class=\"h-4 w-4\" />\n        </DateRangePickerTrigger>\n      </DateRangePickerField>\n    </DateRangePickerAnchor>\n\n    <DateRangePickerContent\n      align=\"start\"\n      :side-offset=\"6\"\n      :class=\"\n        cn(\n          'z-overlay rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md outline-none',\n          // Each class scoped to its own state — DatePicker carries the full\n          // account of why; the closed one is the exit whose animationend\n          // Presence waits out before taking the panel away.\n          'data-[state=open]:animate-fade-rise data-[state=closed]:animate-fade-fall',\n        )\n      \"\n      @open-auto-focus=\"onOpenAutoFocus\"\n    >\n      <div ref=\"panel\" class=\"flex flex-col gap-3\">\n        <!-- `calendarLabel` is a real Reka prop rather than a literal to\n             override, and it defaults to `\"Event Date\"`. It is published twice:\n             as the calendar container's `aria-label`, and inside a\n             visually-hidden live region Reka renders itself, which a\n             fallthrough attribute could not have reached. -->\n        <DateRangePickerCalendar v-slot=\"{ grid, weekDays }\" :calendar-label=\"panelText.calendar\">\n          <DateRangePickerHeader class=\"flex items-center justify-between gap-2\">\n            <!-- The pagers keep their opacity where the field and the cells gave\n                 it up: a chevron is a glyph, and fading one costs a reader\n                 nothing. Their names live in `aria-label`, not in dimmed text. -->\n            <DateRangePickerPrev\n              :aria-label=\"panelText.previousMonth\"\n              class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n            >\n              <ChevronLeft class=\"h-4 w-4\" />\n            </DateRangePickerPrev>\n\n            <DateRangePickerHeading\n              :id=\"headingId\"\n              aria-live=\"polite\"\n              class=\"text-sm font-medium text-foreground\"\n            />\n\n            <DateRangePickerNext\n              :aria-label=\"panelText.nextMonth\"\n              class=\"inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n            >\n              <ChevronRight class=\"h-4 w-4\" />\n            </DateRangePickerNext>\n          </DateRangePickerHeader>\n\n          <p role=\"status\" class=\"text-xs text-muted-foreground\">{{ rangeStatus(range) }}</p>\n\n          <!-- Two months stacked below `sm`, side by side above it — and both of\n               them in the document at every width. DateRangePicker carries the\n               account of why hiding one is a keyboard trap of the quiet kind. -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:gap-5\">\n            <DateRangePickerGrid\n              v-for=\"month in grid\"\n              :key=\"month.value.toString()\"\n              role=\"grid\"\n              :aria-label=\"format(monthFormat, month.value)\"\n              class=\"border-collapse select-none\"\n            >\n              <!-- `role=\"grid\"` over Reka's `role=\"application\"`, and the rows\n                   laid out by the table rather than by flex: DatePicker carries\n                   the reasoning for both. The name is each grid's own month\n                   rather than the shared heading, because two grids sharing one\n                   name leaves a reader entering the second with no idea which\n                   month they are in. -->\n              <DateRangePickerGridHead>\n                <DateRangePickerGridRow>\n                  <DateRangePickerHeadCell\n                    v-for=\"(day, index) in weekDays\"\n                    :key=\"index\"\n                    class=\"w-9 text-xs font-normal text-muted-foreground\"\n                  >\n                    {{ day }}\n                  </DateRangePickerHeadCell>\n                </DateRangePickerGridRow>\n              </DateRangePickerGridHead>\n\n              <DateRangePickerGridBody>\n                <DateRangePickerGridRow v-for=\"(week, weekIndex) in month.rows\" :key=\"weekIndex\">\n                  <DateRangePickerCell\n                    v-for=\"day in week\"\n                    :key=\"day.toString()\"\n                    :date=\"day\"\n                    class=\"p-0 text-center\"\n                  >\n                    <DateRangePickerCellTrigger\n                      v-slot=\"{ dayValue, today }\"\n                      :day=\"day\"\n                      :month=\"month.value\"\n                      :aria-label=\"dayLabel(day, range)\"\n                      :aria-current=\"isDateToday(day) ? 'date' : undefined\"\n                      :class=\"\n                        cn(\n                          'group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground',\n                          'transition-colors duration-fast ease-out hover:bg-subtle',\n                          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo',\n                          'data-[outside-view]:text-muted-foreground',\n                          // Out of range is colour and a strike, not a fade —\n                          // DatePicker carries the measured account. The\n                          // `:not([data-selected])` is there for the same reason\n                          // the fills below are written that way, and the strike\n                          // is what separates an unavailable day from an\n                          // adjacent month's: muted too, and still pickable.\n                          'data-[disabled]:pointer-events-none data-[disabled]:line-through',\n                          '[&[data-disabled]:not([data-selected])]:text-muted-foreground',\n                          // The four competing fills, written as `:not()` of one\n                          // another so no cell ever has two backgrounds for the\n                          // stylesheet to order — DateRangePicker carries why\n                          // that is not something a class list can otherwise\n                          // state.\n                          'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground',\n                          'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:bg-primary-muted',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:text-primary-text',\n                          '[&[data-highlighted]:not([data-selected])]:bg-subtle',\n                          '[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:rounded-none',\n                          '[&[data-highlighted]:not([data-highlighted-start]):not([data-highlighted-end])]:rounded-none',\n                        )\n                      \"\n                    >\n                      {{ dayValue }}\n                      <span\n                        v-if=\"today\"\n                        aria-hidden=\"true\"\n                        class=\"absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selection-start]:bg-primary-foreground group-data-[selection-end]:bg-primary-foreground\"\n                      />\n                    </DateRangePickerCellTrigger>\n                  </DateRangePickerCell>\n                </DateRangePickerGridRow>\n              </DateRangePickerGridBody>\n            </DateRangePickerGrid>\n          </div>\n        </DateRangePickerCalendar>\n      </div>\n    </DateRangePickerContent>\n  </DateRangePickerRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAM,mBAAmB;AACzB,IAAM,kBAAkB;;AAGxB,SAAS,cACP,QACA,MACA,QACA,SACQ;CACR,OAAO,IAAI,KAAK,eAAe,QAAQ;EACrC,WAAW;EACX,WAAW,UAAU,WAAW;EAIhC,GAAG,SAAS,EAAE,OAAO,CAAC;CACxB,CAAC,CAAC,CAAC,OAAO,KAAK,OAAO,iBAAiB,CAAC,CAAC;AAC3C;;;;;;;AAQA,SAAS,gBAAgB,SAAyB;CAChD,IAAI,YAAY,GAAG,OAAO;CAC1B,MAAM,OAAO,KAAK,MAAM,UAAU,eAAe;CACjD,MAAM,QAAQ,KAAK,MAAO,UAAU,kBAAmB,gBAAgB;CACvE,MAAM,OAAO,UAAU;CACvB,OAAO;EACL,CAAC,MAAM,KAAK;EACZ,CAAC,OAAO,MAAM;EACd,CAAC,MAAM,QAAQ;CACjB,CAAA,CACG,QAAQ,CAAC,WAAY,QAAmB,CAAC,CAAA,CACzC,KAAK,CAAC,OAAO,UAAU,GAAG,OAAO,KAAK,EAAE,GAAG,OAAO,IAAI,IAAI,UAAU,IAAI,KAAK,KAAK,CAAA,CAClF,KAAK,GAAG;AACb;;;;;AAMA,IAAa,yBAA8C;CACzD,WAAW;CACX,SAAS;CACT,SAAS,EAAE,QAAQ,OAAO,KAAK,SAAS,QAAQ,cAAc;EAC5D,MAAM,SAAS,SAAS;EACxB,IAAI,CAAC,QAAQ,OAAO;EACpB,IAAI,CAAC,SAAS,CAAC,OAAO,YAAY,KAAA,GAChC,OAAO,GAAG,cAAc,QAAQ,QAAQ,QAAQ,OAAO,EAAE;EAE3D,MAAM,OAAO,GAAG,cAAc,QAAQ,OAAO,QAAQ,OAAO,EAAE,MAAM,cAAc,QAAQ,KAAK,QAAQ,OAAO;EAC9G,IAAI,UAAU,GAAG,OAAO,GAAG,KAAK;EAChC,OAAO,GAAG,KAAK,IAAI,gBAAgB,OAAO,EAAE;CAC9C;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6HA,MAAM,QAAQ;EA2Dd,MAAM,OAAO;EAKb,MAAM,gBAAwC,CAAC,SAAS,KAAK;EAS7D,MAAM,WAAW,UAAU,gBAAgB,2BAA2B,MAAM,MAAM;EAClF,MAAM,WAAW,UAAU,gBAAgB,2BAA2B,MAAM,MAAM;EAClF,MAAM,YAAY,UAAU,iBAAiB,6BAA6B,MAAM,MAAM;EACtF,MAAM,WAAW,UAAU,aAAa,yBAAyB,MAAM,MAAM;EAC7E,MAAM,OAAO,UAAU,iBAAiB,8BAA8B,MAAM,MAAM;EAQlF,SAAS,aAAa,MAAkC;GACtD,OAAO,iBAAiB;IAAE,MAAM,SAAS;IAAO,MAAM,SAAS;GAAM,GAAG,IAAI;EAC9E;EAIA,SAAS,iBACP,MACA,OACA,YAC+B;GAC/B,OAAO,qBAAqB;IAC1B,MAAM,SAAS;IACf,MAAM,SAAS;IACf;IACA;IACA,QAAQ,MAAM;IACd,OAAO;GACT,CAAC;EACH;EAMA,MAAM,EAAE,OAAO,MAAM,eAAe,cAAc;EAElD,SAAS,QAAQ,OAAyD;GACxE,IAAI,CAAC,OAAO,OAAO,KAAA;GACnB,IAAI;IAIF,OAAO,cAAc,KAAK;GAC5B,QAAQ;IACN;GACF;EACF;EAEA,SAAS,IAAI,OAAuB;GAClC,OAAO,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;EACtC;EAKA,SAAS,MAAM,MAAyB;GACtC,MAAM,UAAU,mBAAmB,IAAI;GACvC,MAAM,QAAQ,GAAG,eAAe,OAAO,CAAC,CAAC,SAAS,EAAE,GAAG,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,QAAQ,MAAM;GAC9F,OAAO,MAAM,gBAAgB,WAAW,GAAG,MAAM,GAAG,IAAI,QAAQ,MAAM,MAAM;EAC9E;EAMA,SAAS,WAAW,MAAoC;GACtD,OAAO,MAAM,IAAI;IAAE,MAAM;IAAG,QAAQ;IAAG,QAAQ;IAAG,aAAa;GAAE,CAAC;EACpE;EAEA,SAAS,SAAS,MAAoC;GACpD,OAAO,MAAM,IAAI;IAAE,MAAM;IAAI,QAAQ;IAAI,QAAQ;IAAI,aAAa;GAAI,CAAC;EACzE;EAEA,MAAM,YAAY,eAChB,SAAS;GAKP,YAAY,MAAM,aACd;IAAE,OAAO,QAAQ,MAAM,WAAW,KAAK;IAAG,KAAK,QAAQ,MAAM,WAAW,GAAG;GAAE,IAC7E,KAAA;GACJ,UAAU,WAAW,QAAQ,MAAM,GAAG,CAAC;GACvC,UAAU,SAAS,QAAQ,MAAM,GAAG,CAAC;GACrC,WAAW,MAAM;EACnB,CAAC,CACH;EAKA,MAAM,aAAa,eAAe;GAChC,MAAM,QAAQ,QAAQ,MAAM,GAAG;GAC/B,MAAM,QAAQ,QAAQ,MAAM,GAAG;GAC/B,IAAI,CAAC,SAAS,CAAC,OAAO,OAAO;GAC7B,OAAO,cAAc,MAAM,SAAS;IAClC,MAAM,QAAQ,QAAQ,MAAM,aAAa,KAAK;IAC9C,IAAI,CAAC,OAAO,OAAO;IACnB,OAAQ,CAAC,CAAC,SAAS,MAAM,QAAQ,KAAK,IAAI,KAAO,CAAC,CAAC,SAAS,MAAM,QAAQ,KAAK,IAAI;GACrF,CAAC;EACH,CAAC;EAQD,MAAM,YAAY,eAAe;GAC/B,MAAM,QAAQ,QAAQ,MAAM,YAAY,KAAK;GAC7C,MAAM,MAAM,QAAQ,MAAM,YAAY,GAAG;GACzC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,IAAI,QAAQ,KAAK,IAAI;EAClD,CAAC;;;;;;;;;;;;EAaD,MAAM,SAAS,eAAkC,QAAQ;EACzD,MAAM,gBAAgB,0BAA0B,OAAO,OAAO,GAAG;EAgBjE,MAAM,QAAQ,uBAAuB;GACnC,IAAI,MAAM;GACV,aAAa,MAAM;GACnB,gBAAgB,MAAM;GACtB,MAAM,MAAM;GAGZ,UAAU,cAAc,QAAQ,OAAO,MAAM;GAC7C,UAAU,MAAM;GAChB,SAAS,MAAM;GACf,UAAU,MAAM;EAClB,EAAE;EAMF,MAAM,kBAAkB,eAAgB,MAAM,gBAAgB,KAAA,IAAY,MAAM,UAAW;EAE3F,MAAM,UAAU,eAAe,MAAM,WAAW,WAAW,SAAS,UAAU,KAAK;EAMnF,MAAM,OAAO,IAAI,KAAK;;;;;;;;;;;;;;;;;EAkBtB,MAAM,YAAwD;GAAE,OAAO,KAAA;GAAW,KAAK,KAAA;EAAU;EAEjG,YACQ,CAAC,MAAM,YAAY,OAAO,MAAM,YAAY,GAAG,IACpD,CAAC,OAAO,SAAS;GAChB,KAAK,MAAM,CAAC,MAAM,QAAQ,CACxB,CAAC,SAAS,KAAK,GACf,CAAC,OAAO,GAAG,CACb,GAAY;IACV,MAAM,QAAQ,QAAQ,GAAG;IACzB,UAAU,QAAQ,QACd;KAAE,MAAM,MAAM;KAAM,QAAQ,MAAM;KAAQ,QAAQ,MAAM;IAAO,IAC/D,KAAK,QACH,UAAU,QACV,KAAA;GACR;EACF,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,SAAS,SAAS,MAAmB,QAAmB,cAAkC;GAGxF,IAAI,CAAC,cAAc,OAAO;GAC1B,MAAM,UAAU,QAAQ,MAAM,aAAa,KAAK;GAKhD,IAAI,WAAW,UAAU,SAAS,MAAM,GAAG,OAAO;GAClD,MAAM,OAAO,UAAU;GACvB,OAAO,OAAO,mBAAmB,MAAM,CAAC,CAAC,IAAI,IAAI,IAAI;EACvD;EAEA,SAAS,cAAc,OAA2B;GAGhD,MAAM,eAAe,KAAK;GAC1B,IAAI,MAAM,SAAS,MAAM,KAAK,KAAK,QAAQ;GAC3C,KACE,qBACA,SAAS;IACP,OAAO,MAAM,QAAQ,MAAM,SAAS,SAAS,MAAM,OAAO,YAAY,CAAC,IAAI,KAAA;IAC3E,KAAK,MAAM,MAAM,MAAM,SAAS,OAAO,MAAM,KAAK,YAAY,CAAC,IAAI,KAAA;GACrE,CAAC,CACH;EACF;EAEA,SAAS,YAAY,MAA0B;GAC7C,OAAO,QAAQ,MAAM,iBAAiB,CAAC;EACzC;EAQA,MAAM,iBAAiB,IAAY;EAEnC,SAAS,WAAW,MAAmB,MAAsB;GAC3D,OAAO,GAAG,KAAK,GAAG;EACpB;EAEA,SAAS,gBACP,MACA,MACA,UACoB;GAGpB,IAAI,MAAM,YAAY,SAAS,WAAW,OAAO,KAAA;GACjD,MAAM,WAAW,cAAc,SAAS,SACtC,SAAS,KAAI,CACV,QAAQ,YAAY,QAAQ,SAAS,SAAS,CAAA,CAC9C,KAAK,YAAY,WAAW,MAAM,QAAQ,IAAI,CAAC,CACpD;GAIA,MAAM,SACJ,eAAe,UAAU,KAAA,KAAa,SAAS,SAAS,eAAe,KAAK,IACxE,eAAe,QACf,SAAS;GACf,OAAO,WAAW,MAAM,IAAI,MAAM,SAAS,IAAI;EACjD;EAOA,MAAM,QAAQ,eAAe,GAAG,MAAM,YAAY,GAAG,OAAO,MAAM,SAAS,GAAG;;;;;;;;;;EAW9E,SAAS,iBACP,UAC6C;GAC7C,IAAI,MAAM,cAAc,IAAI,OAAO,KAAA;GACnC,MAAM,QAAQ,OAAO,SAAS,MAAM,YAAY,QAAQ,SAAS,MAAM,CAAC,EAAE,KAAK;GAC/E,IAAI,CAAC,OAAO,UAAU,KAAK,GAAG,OAAO,KAAA;GACrC,MAAM,SAAS,SAAS,MAAM,YAAY,QAAQ,SAAS,WAAW,CAAC,EAAE;GACzE,OAAO;IAAE,iBAAiB;IAAO,kBAAkB,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG;GAAQ;EAChG;EAEA,MAAM,YAAY,MAAM;EAMxB,MAAM,cAAc,eACZ,IAAI,KAAK,eAAe,MAAM,QAAQ;GAAE,OAAO;GAAQ,MAAM;EAAU,CAAC,CAChF;EAEA,SAAS,OAAO,WAAgC,MAAyB;GACvE,OAAO,UAAU,OAAO,KAAK,OAAO,iBAAiB,CAAC,CAAC;EACzD;EAEA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;EAqBtB,SAAS,YAAY,OAAkB,KAAwB;GAC7D,MAAM,OAAO,mBAAmB,KAAK,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,QAAQ;GAC7D,MAAM,KAAK,mBAAmB,GAAG,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,QAAQ;GACzD,OAAO,KAAK,OAAO,KAAK,QAAQ,aAAa;EAC/C;EAeA,SAAS,YAAY,OAAmC;GAKtD,OAAO,KAAK,MAAM,OAAO;IACvB,QAAQ,MAAM;IACd,OAAO,MAAM;IACb,KAAK,MAAM;IACX,SAAS,MAAM,SAAS,MAAM,MAAM,YAAY,MAAM,OAAO,MAAM,GAAG,IAAI,KAAA;IAC1E,QAAQ,MAAM,cAAc,KAAA,IAAY,KAAA,IAAY,MAAM,cAAc;IACxE,SAAS,MAAM,gBAAgB;GACjC,CAAC;EACH;;;;;;;;;;;;;EAcA,SAAS,UAAU,KAAgB,OAAsD;GACvF,MAAM,UAAU,MAAM,UAAU,KAAA,KAAa,UAAU,KAAK,MAAM,KAAK;GACvE,MAAM,QAAQ,MAAM,QAAQ,KAAA,KAAa,UAAU,KAAK,MAAM,GAAG;GACjE,IAAI,WAAW,OAAO,OAAO;GAC7B,IAAI,SAAS,OAAO;GACpB,IAAI,OAAO,OAAO;GAClB,IAAI,MAAM,SAAS,MAAM,OAAO,IAAI,QAAQ,MAAM,KAAK,IAAI,KAAK,IAAI,QAAQ,MAAM,GAAG,IAAI,GACvF,OAAO;EAGX;EAOA,SAAS,SAAS,KAAgB,OAAmC;GACnE,OAAO,SAAS,MAAM,KAAK;IAAE,QAAQ,MAAM;IAAQ,MAAM;IAAK,MAAM,UAAU,KAAK,KAAK;GAAE,CAAC;EAC7F;EAEA,MAAM,QAAQ,IAAwB,IAAI;EAI1C,SAAS,gBAAgB,OAAc;GACrC,MAAM,MAAM,MAAM,OAAO,cACvB,mDACF;GACA,IAAI,CAAC,KAAK;GACV,MAAM,eAAe;GACrB,IAAI,MAAM;EACZ;;GAIE,OAAA,UAAA,GAAA,YAuRsB,MAAA,mBAAA,GAvRtB,WAuRsB;IArRZ,MAAM,KAAA;IAAA,iBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,KAAI,QAAA;GACV,GAAA,UAAA,OAAS;IAChB,QAAQ,QAAA;IACR,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,UAAU,MAAA,KAAA,CAAK,CAAC;IAChB,oBAAkB,QAAA;IAClB,aAAa,QAAA;IACd,oBAAA;IACC,uBAAoB;;IAOrB,SAAA,SA6HwB,EAAA,YA7IF,YAAK,CAgB3B,YA6HwB,MAAA,qBAAA,GAAA;KA5HlB,SAAA;KAAJ,KAAI;KACH,gBAAc,MAAA,KAAA,CAAK,CAAC,WAAW,KAAA;KAC/B,qBAAmB,WAAA,SAAc,KAAA;KACjC,kBAAgB,UAAA,SAAa,KAAA;KAC7B,iBAAe,MAAA,KAAA,CAAK,CAAC,YAAY,KAAA;KACjC,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,gBAAiB,MAAA,KAAA,CAAK,CAAC,KAAK,CAAA;;KAQtC,SAAA,cA8GuB,EA9GvB,UAAA,GAAA,YA8GuB,MAAA,oBAAA,GA9GvB,WA8GuB,EA7GpB,KAAK,MAAA,MAAK,GAAA;MAAA,GAEE,MAAA,UAAA;MAAU,GAAK,MAAA,KAAA,CAAK,CAAC;KAAK,GAAA;MACtC,mBAAiB,gBAAA;MACjB,gBAAc,QAAA,SAAW,KAAA;MACzB,OAAkB,MAAA,EAAA,CAAE,CAAA,0GAAA,sFAAA,kFAAsoB,CAAA,QAAA,SAAO,4BAA2yB,MAAA,KAAA,CAAK,CAAC,YAAQ,aAA+nB,MAAA,KAAA,CAAK,CAAC,YAAQ,mEAAoT,QAAA,SAAO,qDAAA;;MAgDz5E,SAAA,SAA0C,EApD1C,eAAQ,EAoDlB,UAAA,GAAA,mBAuCW,UAAA,MAAA,WAvC2B,gBAApB,MAAM,cAAS;OAA0B,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,KAAI,GAAA,CACjD,YAAS,KAArB,UAAA,GAAA,mBAEC,QAFD,YACG,GAAC,KAAA,mBAAA,IAAA,IAAA,GAGJ,mBAiCM,OAAA;QAhCJ,MAAK;QACJ,cAAY,SAAI,UAAe,MAAA,IAAA,CAAI,CAAC,YAAY,MAAA,IAAA,CAAI,CAAC;QACtD,OAAM;OAEN,GAAA,EAAA,UAAA,IAAA,GAAA,mBA2BuB,UAAA,MAAA,WA1BG,SAAS,QAAzB,MAAM,UAAK;QADrB,OAAA,UAAA,GAAA,YA2BuB,MAAA,oBAAA,GA3BvB,WA2BuB;SAzBpB,KAAK;SACL,MAAM,KAAK;SACL;SACN,UAAU,gBAAgB,MAAM,KAAK,MAAM,QAAQ;SACnD,cAAY,aAAa,KAAK,IAAI;;SACN,GAAA,iBAAoC,KAAK,MAAwB,KAAK,QAA0B,SAAI,UAAe,MAAM,QAAQ,MAAM,IAAA,EAAM,KAAA;SAA8C,GAAA,KAAK,SAAI,SAAc,iBAAiB,SAAS,KAAI,IAAK,KAAA;;SAQjR,OAAwB,MAAA,EAAA,CAAE,CAAA,0CAAA,+CAAA,kDAAA,4CAAmR,KAAK,SAAI,aAAA,uBAAA;SAStT,YAAO,WAAE,eAAA,QAAiB,WAAW,MAAM,KAAK,IAAI;;SAErD,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;;;;;;;MAcV,CAAA,GAAA,EAAA,IAAA,CAAA,MAAA,KAAA,CAAK,CAAC,YADf,UAAA,GAAA,YAMyB,MAAA,sBAAA,GAAA;;OAJtB,cAAY,MAAA,SAAA,CAAS,CAAC;OACvB,OAAM;;OAEN,SAAA,cAAiC,CAAjC,YAAiC,MAAA,aAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;;;;;;;;;;;;;IAKpC,CAAA,GAAA,YAsIyB,MAAA,sBAAA,GAAA;KArIvB,OAAM;KACL,eAAa;KACb,OAAK,eAAW,MAAA,EAAA,CAAE,CAAA,2GAAA,2EAAA,CAAA;KASD;;KAElB,SAAA,cAuHM,CAvHN,mBAuHM,OAAA;MAvHG,SAAA;MAAJ,KAAI;MAAQ,OAAM;KAMrB,GAAA,CAAA,YAgH0B,MAAA,uBAAA,GAAA,EAhH4B,kBAAgB,MAAA,SAAA,CAAS,CAAC,SAAA,GAAA;MAC9E,SAAA,SAuBwB,EAxBS,MAAM,eAAQ;OAC/C,YAuBwB,MAAA,qBAAA,GAAA,EAvBD,OAAM,0CAAyC,GAAA;QAIpE,SAAA,cAKsB;SALtB,YAKsB,MAAA,mBAAA,GAAA;UAJnB,cAAY,MAAA,SAAA,CAAS,CAAC;UACvB,OAAM;;UAEN,SAAA,cAA+B,CAA/B,YAA+B,MAAA,WAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;SAG9B,YAIE,MAAA,sBAAA,GAAA;UAHC,IAAI,MAAA,SAAA;UACL,aAAU;UACV,OAAM;;SAGR,YAKsB,MAAA,mBAAA,GAAA;UAJnB,cAAY,MAAA,SAAA,CAAS,CAAC;UACvB,OAAM;;UAEN,SAAA,cAAgC,CAAhC,YAAgC,MAAA,YAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;;;OAIjC,mBAAmF,KAAnF,YAAmF,gBAAzB,YAAY,KAAK,CAAA,GAAA,CAAA;OAK3E,mBAgFM,OAhFN,YAgFM,EA/EJ,UAAA,IAAA,GAAA,mBA8EsB,UAAA,MAAA,WA7EJ,OAAT,UAAK;QADd,OAAA,UAAA,GAAA,YA8EsB,MAAA,mBAAA,GAAA;SA5EnB,KAAK,MAAM,MAAM,SAAQ;SAC1B,MAAK;SACJ,cAAY,OAAO,YAAA,OAAa,MAAM,KAAK;SAC5C,OAAM;;SAQN,SAAA,cAU0B,CAV1B,YAU0B,MAAA,uBAAA,GAAA,MAAA;UATxB,SAAA,cAQyB,CARzB,YAQyB,MAAA,sBAAA,GAAA,MAAA;WANrB,SAAA,cAAgC,EADlC,UAAA,IAAA,GAAA,mBAM0B,UAAA,MAAA,WALD,WAAf,KAAK,UAAK;YADpB,OAAA,UAAA,GAAA,YAM0B,MAAA,uBAAA,GAAA;aAJvB,KAAK;aACN,OAAM;;aAEN,SAAA,cAAS,CAAN,gBAAA,gBAAA,GAAG,GAAA,CAAA,CAAA,CAAA;;;;;;;SAKZ,GAAA,IAAA,GAAA,YAoD0B,MAAA,uBAAA,GAAA,MAAA;UAnDA,SAAA,cAAuC,EAA/D,UAAA,IAAA,GAAA,mBAkDyB,UAAA,MAAA,WAlD2B,MAAM,OAA1B,MAAM,cAAS;WAA/C,OAAA,UAAA,GAAA,YAkDyB,MAAA,sBAAA,GAAA,EAlDwC,KAAK,UAAS,GAAA;YAE3E,SAAA,cAAmB,EADrB,UAAA,IAAA,GAAA,mBAgDsB,UAAA,MAAA,WA/CN,OAAP,QAAG;aADZ,OAAA,UAAA,GAAA,YAgDsB,MAAA,mBAAA,GAAA;cA9CnB,KAAK,IAAI,SAAQ;cACjB,MAAM;cACP,OAAM;;cAEN,SAAA,cAyC6B,CAzC7B,YAyC6B,MAAA,0BAAA,GAAA;eAvCrB;eACL,OAAO,MAAM;eACb,cAAY,SAAS,KAAK,KAAK;eAC/B,gBAAc,YAAY,GAAG,IAAA,SAAa,KAAA;eAC1C,OAAK,eAA2B,MAAA,EAAA,CAAE,CAAA,qGAAA,4DAAA,+GAAA,6CAAA,oEAAA,iEAAA,oFAAA,gFAAA,6FAAA,8FAAA,wDAAA,yFAAA,8FAAA,CAAA;;eA6BnC,SAAA,SAAc,EAlCJ,UAAU,YAAK,CAkCtB,gBAAA,gBAAA,QAAQ,IAAG,KACd,CAAA,GACQ,SADR,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/primitives/dialog/src/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../../packages/primitives/dialog/src/Dialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DialogLabels } from \"@ecoma-io/loom-labels\";\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const DIALOG_LABELS: DialogLabels = {\n  close: \"Close\",\n};\n\n/**\n * How wide the task surface gets. Width is the primitive's decision rather\n * than a class a caller passes, so four dialogs opened from four screens\n * cannot be four different widths: `sm` for a minimal prompt — a question\n * with two buttons, or a single field — `md` for a confirm or a short form,\n * `lg` for a form with several sections, `xl` for an authoring surface — an\n * editor living inside a dialog.\n *\n * The union is the same one Drawer's `size` takes, so a host parametrising\n * both surfaces can pass one size through. The ends match exactly: `sm` is\n * the drawer's own `sm` pair, adopted rather than reinvented. `md` and `lg`\n * keep the widths they have always had here, which are wider than the\n * drawer's middle — a centred panel earns more of the screen than an\n * edge-anchored one that deliberately leaves the page visible.\n */\nexport type DialogSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Each width is capped against the viewport, so the largest sizes stay usable\n * on a laptop instead of running off the screen — and the smallest takes the\n * tightest cap, the convention the drawer's scale set. `satisfies` is what\n * keeps the map and the union honest: adding a member to one and not the other\n * stops compiling.\n */\nconst SIZE_CLASS = {\n  sm: \"w-[min(90vw,20rem)]\",\n  md: \"w-[min(92vw,32rem)]\",\n  lg: \"w-[min(92vw,44rem)]\",\n  xl: \"w-[min(94vw,64rem)]\",\n} satisfies Record<DialogSize, string>;\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  DialogRoot,\n  DialogTrigger,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n} from \"reka-ui\";\nimport { X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Dialog — a modal task surface that blocks the rest of the UI until it is\n * resolved: confirming a destructive action, or a form that deserves the\n * user's whole attention.\n *\n * The escape contract, and it is the strictest of the overlays: opening moves\n * focus into the panel and *traps* it there, so Tab cycles the dialog's own\n * controls and never reaches the page behind. Esc, an overlay press and the\n * close control all close it — Esc and the overlay do so whether or not\n * `closable` is false, which governs the corner control alone; a dialog whose\n * only exits are its own action row is `AlertDialog`'s job. Closing returns\n * focus to whatever opened it. The page\n * behind does not scroll while it is open. Everything outside the panel is\n * hidden from assistive technology, which is what makes the block real rather\n * than visual.\n *\n * `title` is a required prop rather than optional chrome: without a rendered\n * title the dialog has no accessible name, and a screen reader announces a\n * modal that says nothing about what it is asking. Pass `hideTitle` to keep it\n * for assistive technology while dropping it from the visual layout.\n *\n * Reach for `Popover` when the panel is non-blocking secondary content, and a\n * transient notification when the user need not act at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the dialog from the host with `v-model:open`; omit it and the dialog owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the question the dialog is asking. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** Wired as the dialog's accessible description — the consequence line, rather than loose body text. */\n    description?: string;\n    /** Keep the title as the accessible name but drop it from the visual layout. */\n    hideTitle?: boolean;\n    /**\n     * Shows the corner close affordance. Esc and an overlay press dismiss the\n     * dialog either way — they are passive exits for a blocking-but-ordinary\n     * question; withdrawing them too is what `AlertDialog` exists for.\n     */\n    closable?: boolean;\n    /** Panel width. `sm` prompts, `md` confirms, `lg` multi-section forms, `xl` authoring surfaces. */\n    size?: DialogSize;\n    /**\n     * The name on the close control, as any subset of `DialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, for the dialog whose close\n     * means something more specific than \"Close\" — \"Stop importing\", say.\n     */\n    labels?: LabelOverrides<DialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `description` needs no such entry: a\n  // string prop is already `undefined` when absent.\n  { open: undefined, hideTitle: false, closable: true, size: \"md\" },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"dialog\", DIALOG_LABELS, () => props.labels);\n</script>\n\n<template>\n  <DialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the dialog. Optional — omit it and drive\n         the dialog entirely from the host with `v-model:open`. -->\n    <DialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </DialogTrigger>\n\n    <DialogPortal>\n      <!-- The heavy weight on purpose: at `scrim`'s 70% the page behind reads\n           as context, and at 60% it read as competing content. It fades rather\n           than moves, so nothing behind the dialog appears to shift. The exit\n           is shorter than the entrance by design — `theme.css` carries the\n           argument, and a scrim that lingers on the way out is a page that\n           feels slow to give itself back. -->\n      <DialogOverlay\n        class=\"fixed inset-0 z-overlay bg-foreground/scrim data-[state=open]:animate-fade data-[state=closed]:animate-fade-out\"\n      />\n      <DialogContent\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-overlay -translate-x-1/2 -translate-y-1/2',\n            SIZE_CLASS[size],\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Both states scoped, never unconditional. Reka's Presence keeps\n            // closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // dialog on it. The paired exit does not reintroduce that: an\n            // animation that ends is precisely what Presence is waiting for,\n            // and under `prefers-reduced-motion` the 0.01ms collapse still\n            // fires `animationend`. What it removes is the asymmetry — a panel\n            // that scaled in over 140ms used to vanish between two frames,\n            // which reads as a crash rather than as a close.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n      >\n        <DialogTitle :class=\"cn('text-base font-semibold', hideTitle && 'sr-only')\">\n          {{ title }}\n        </DialogTitle>\n        <DialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </DialogDescription>\n\n        <!-- The gap above the body is dropped when nothing visible precedes\n             it, so a dialog with a hidden title and no description does not\n             open with an empty band at the top. -->\n        <div :class=\"cn((description || !hideTitle) && 'mt-4')\">\n          <!-- @slot The dialog body. -->\n          <slot />\n        </div>\n\n        <!-- @slot The action row, aligned to the trailing edge. -->\n        <div v-if=\"$slots.footer\" class=\"mt-6 flex items-center justify-end gap-2\">\n          <slot name=\"footer\" />\n        </div>\n\n        <DialogClose\n          v-if=\"closable\"\n          :aria-label=\"text.close\"\n          class=\"absolute right-4 top-4 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          <X class=\"h-4 w-4\" />\n        </DialogClose>\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/dialog/src/Dialog.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.vue_vue_type_script_setup_true_lang.js","names":["$emit","$slots"],"sources":["../../../../packages/primitives/dialog/src/Dialog.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DialogLabels } from \"@ecoma-io/loom-labels\";\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const DIALOG_LABELS: DialogLabels = {\n  close: \"Close\",\n};\n\n/**\n * How wide the task surface gets. Width is the primitive's decision rather\n * than a class a caller passes, so four dialogs opened from four screens\n * cannot be four different widths: `sm` for a minimal prompt — a question\n * with two buttons, or a single field — `md` for a confirm or a short form,\n * `lg` for a form with several sections, `xl` for an authoring surface — an\n * editor living inside a dialog.\n *\n * The union is the same one Drawer's `size` takes, so a host parametrising\n * both surfaces can pass one size through. The ends match exactly: `sm` is\n * the drawer's own `sm` pair, adopted rather than reinvented. `md` and `lg`\n * keep the widths they have always had here, which are wider than the\n * drawer's middle — a centred panel earns more of the screen than an\n * edge-anchored one that deliberately leaves the page visible.\n */\nexport type DialogSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * Each width is capped against the viewport, so the largest sizes stay usable\n * on a laptop instead of running off the screen — and the smallest takes the\n * tightest cap, the convention the drawer's scale set. `satisfies` is what\n * keeps the map and the union honest: adding a member to one and not the other\n * stops compiling.\n */\nconst SIZE_CLASS = {\n  sm: \"w-[min(90vw,20rem)]\",\n  md: \"w-[min(92vw,32rem)]\",\n  lg: \"w-[min(92vw,44rem)]\",\n  xl: \"w-[min(94vw,64rem)]\",\n} satisfies Record<DialogSize, string>;\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  DialogRoot,\n  DialogTrigger,\n  DialogPortal,\n  DialogOverlay,\n  DialogContent,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n} from \"reka-ui\";\nimport { X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Dialog — a modal task surface that blocks the rest of the UI until it is\n * resolved: confirming a destructive action, or a form that deserves the\n * user's whole attention.\n *\n * The escape contract, and it is the strictest of the overlays: opening moves\n * focus into the panel and *traps* it there, so Tab cycles the dialog's own\n * controls and never reaches the page behind. Esc, an overlay press and the\n * close control all close it — Esc and the overlay do so whether or not\n * `closable` is false, which governs the corner control alone; a dialog whose\n * only exits are its own action row is `AlertDialog`'s job. Closing returns\n * focus to whatever opened it. The page\n * behind does not scroll while it is open. Everything outside the panel is\n * hidden from assistive technology, which is what makes the block real rather\n * than visual.\n *\n * `title` is a required prop rather than optional chrome: without a rendered\n * title the dialog has no accessible name, and a screen reader announces a\n * modal that says nothing about what it is asking. Pass `hideTitle` to keep it\n * for assistive technology while dropping it from the visual layout.\n *\n * Reach for `Popover` when the panel is non-blocking secondary content, and a\n * transient notification when the user need not act at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the dialog from the host with `v-model:open`; omit it and the dialog owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the question the dialog is asking. State the consequence (\"Delete scene?\"), not \"Are you sure?\". */\n    title: string;\n    /** Wired as the dialog's accessible description — the consequence line, rather than loose body text. */\n    description?: string;\n    /** Keep the title as the accessible name but drop it from the visual layout. */\n    hideTitle?: boolean;\n    /**\n     * Shows the corner close affordance. Esc and an overlay press dismiss the\n     * dialog either way — they are passive exits for a blocking-but-ordinary\n     * question; withdrawing them too is what `AlertDialog` exists for.\n     */\n    closable?: boolean;\n    /** Panel width. `sm` prompts, `md` confirms, `lg` multi-section forms, `xl` authoring surfaces. */\n    size?: DialogSize;\n    /**\n     * The name on the close control, as any subset of `DialogLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, for the dialog whose close\n     * means something more specific than \"Close\" — \"Stop importing\", say.\n     */\n    labels?: LabelOverrides<DialogLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `description` needs no such entry: a\n  // string prop is already `undefined` when absent.\n  { open: undefined, hideTitle: false, closable: true, size: \"md\" },\n);\n\ndefineEmits<{ \"update:open\": [value: boolean] }>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"dialog\", DIALOG_LABELS, () => props.labels);\n</script>\n\n<template>\n  <DialogRoot v-bind=\"optional({ open })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The control that opens the dialog. Optional — omit it and drive\n         the dialog entirely from the host with `v-model:open`. -->\n    <DialogTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </DialogTrigger>\n\n    <DialogPortal>\n      <!-- The heavy weight on purpose: at `scrim`'s 70% the page behind reads\n           as context, and at 60% it read as competing content. It fades rather\n           than moves, so nothing behind the dialog appears to shift. The exit\n           is shorter than the entrance by design — `theme.css` carries the\n           argument, and a scrim that lingers on the way out is a page that\n           feels slow to give itself back. -->\n      <DialogOverlay\n        class=\"fixed inset-0 z-overlay bg-foreground/scrim data-[state=open]:animate-fade data-[state=closed]:animate-fade-out\"\n      />\n      <DialogContent\n        :class=\"\n          cn(\n            'fixed left-1/2 top-1/2 z-overlay -translate-x-1/2 -translate-y-1/2',\n            SIZE_CLASS[size],\n            'rounded-lg border border-border bg-popover p-6 text-popover-foreground shadow-lg outline-none',\n            // Both states scoped, never unconditional. Reka's Presence keeps\n            // closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — which here would\n            // strand a full-screen, input-blocking overlay over a page with no\n            // dialog on it. The paired exit does not reintroduce that: an\n            // animation that ends is precisely what Presence is waiting for,\n            // and under `prefers-reduced-motion` the 0.01ms collapse still\n            // fires `animationend`. What it removes is the asymmetry — a panel\n            // that scaled in over 140ms used to vanish between two frames,\n            // which reads as a crash rather than as a close.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n      >\n        <DialogTitle :class=\"cn('text-base font-semibold', hideTitle && 'sr-only')\">\n          {{ title }}\n        </DialogTitle>\n        <DialogDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </DialogDescription>\n\n        <!-- The gap above the body is dropped when nothing visible precedes\n             it, so a dialog with a hidden title and no description does not\n             open with an empty band at the top. -->\n        <div :class=\"cn((description || !hideTitle) && 'mt-4')\">\n          <!-- @slot The dialog body. -->\n          <slot />\n        </div>\n\n        <!-- @slot The action row, aligned to the trailing edge. -->\n        <div v-if=\"$slots.footer\" class=\"mt-6 flex items-center justify-end gap-2\">\n          <slot name=\"footer\" />\n        </div>\n\n        <DialogClose\n          v-if=\"closable\"\n          :aria-label=\"text.close\"\n          class=\"absolute right-4 top-4 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          <X class=\"h-4 w-4\" />\n        </DialogClose>\n      </DialogContent>\n    </DialogPortal>\n  </DialogRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAQA,IAAa,gBAA8B,EACzC,OAAO,QACT;;;;;;;;AA0BA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EA0Cd,MAAM,OAAO,UAAU,UAAU,qBAAqB,MAAM,MAAM;;GAIhE,OAAA,UAAA,GAAA,YAkEa,MAAA,UAAA,GAlEb,WAAoB,MAkEP,QAAA,CAlEe,CAAA,EAAA,MAAG,QAAA,KAAI,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAG/E,SAAA,cAEgB,CAFKC,KAAAA,OAAO,WAA5B,UAAA,GAAA,YAEgB,MAAA,aAAA,GAAA;;KAFqB,YAAA;;KACnC,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,YA0De,MAAA,YAAA,GAAA,MAAA;KAnDb,SAAA,cAEE,CAFF,YAEE,MAAA,aAAA,GAAA,EADA,OAAM,kHAAiH,CAAA,GAEzH,YA+CgB,MAAA,aAAA,GAAA,EA9Cb,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,sEAAgG,WAAW,QAAA,OAAA,iGAAA,0EAAA,CAAA,EAAA,GAAA;MAmBhI,SAAA,cAEc;OAFd,YAEc,MAAA,WAAA,GAAA,EAFA,OAAK,eAAE,MAAA,EAAA,CAAE,CAAA,2BAA4B,QAAA,aAAS,SAAA,CAAA,EAAA,GAAA;QAC1D,SAAA,cAAW,CAAR,gBAAA,gBAAA,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;OAEe,QAAA,eAAzB,UAAA,GAAA,YAEoB,MAAA,iBAAA,GAAA;;QAFkB,OAAM;;QAC1C,SAAA,cAAiB,CAAd,gBAAA,gBAAA,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA;;;OAMhB,mBAGM,OAAA,EAHA,OAAK,eAAE,MAAA,EAAA,CAAE,EAAE,QAAA,eAAW,CAAK,QAAA,cAAS,MAAA,CAAA,EAAA,GAAA,CAExC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA;OAICA,KAAAA,OAAO,UAAlB,UAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;OAIhB,QAAA,YADR,UAAA,GAAA,YAMc,MAAA,WAAA,GAAA;;QAJX,cAAY,MAAA,IAAA,CAAI,CAAC;QAClB,OAAM;;QAEN,SAAA,cAAqB,CAArB,YAAqB,MAAA,CAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA"}

package/dist/primitives/drawer/src/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../../packages/primitives/drawer/src/Drawer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DrawerLabels } from \"@ecoma-io/loom-labels\";\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const DRAWER_LABELS: DrawerLabels = {\n  close: \"Close\",\n};\n\n/**\n * Which edge of the viewport the panel is anchored to. `right` is the default\n * because a drawer is most often opened *from* a row or a toolbar to show more\n * about what is already on screen, and left-to-right readers expect that\n * detail to arrive on the trailing edge. `left` is where navigation lives,\n * `bottom` is the sheet a narrow screen gets, and `top` is the rare one — a\n * command surface dropping in over the header.\n */\nexport type DrawerSide = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * How far the panel reaches along its own axis — width for a `left`/`right`\n * drawer, height for a `top`/`bottom` one. Like Dialog's width, this is the\n * primitive's decision rather than a class a caller passes, so two drawers\n * opened from two screens cannot be two different sizes: `sm` for a filter rail\n * or a navigation sheet, `md` for a record's detail, `lg` for a working surface\n * with a table or a multi-section form in it, `xl` for an authoring-scale\n * surface pinned to the edge.\n *\n * The union is the same one Dialog's `size` takes, so a host parametrising\n * both surfaces can pass one size through. The ends match exactly: `xl` is\n * the dialog's own width pair, adopted rather than reinvented. `sm`, `md`\n * and `lg` keep the extents they have always had here, which are shallower\n * than the dialog's middle — an edge-anchored panel deliberately leaves the\n * page visible beside it, so it earns less of the axis than a centred one.\n */\nexport type DrawerSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * One row per edge, because `side` is not one decision but four made together —\n * which edge the panel is pinned to, which way it slides in from, which\n * dimension `size` then means, and which pair of corners is rounded — plus the\n * direction a dismissing swipe has to travel. Split across a `cva` map and\n * three lookups they drift, and the drift is invisible: a panel pinned to the\n * left that slides in from the right still renders, still passes its own tests,\n * and looks like a rendering bug nobody can name. `satisfies` is the other half\n * — adding a member to `DrawerSide` and not to this table stops compiling.\n *\n * `slide` and `exit` are the same motion in two directions and deliberately not\n * the same mechanism, which is worth reading before either is \"unified\".\n *\n * `slide` is a `starting:` variant rather than a keyframe, and it is a\n * transform rather than an inset or a width. A full-height panel animated on\n * `width`/`right` relayouts the document on every frame; `translate` runs on\n * the compositor. `@starting-style` supplies the before-value for the entry\n * transition at the moment Reka's `Presence` inserts the node, which is the one\n * thing a plain class cannot do. It also composes with the live swipe below:\n * the gesture writes `transform` while the entry owns `translate`, and a\n * keyframe on `transform` would overwrite a drag mid-finger.\n *\n * `exit` has to be a keyframe, for the opposite reason. `Presence` decides how\n * long to keep a closing panel mounted by reading `animation-name` and waiting\n * for `animationend` — it never observes `transitionend`. So a closed panel\n * carrying only a transition is removed from the DOM in the same frame and the\n * transition never runs, which is exactly what a drawer did until these tokens\n * existed: a 320ms slide in, answered by a hard cut. The keyframes animate\n * `translate` rather than `transform` for the same composition reason the entry\n * does, so a panel released mid-swipe leaves from where the finger left it.\n *\n * `handle` positions the grab affordance on the panel's *inner* edge, running\n * along it: a vertical pill on a side drawer, a horizontal one on a sheet.\n */\nconst SIDES = {\n  left: {\n    edge: \"inset-y-0 left-0 border-r\",\n    corners: \"rounded-r-lg\",\n    slide: \"starting:-translate-x-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-left\",\n    extent: \"width\",\n    swipe: \"left\",\n    handle: \"right-1.5 top-1/2 h-10 w-1.5 -translate-y-1/2\",\n  },\n  right: {\n    edge: \"inset-y-0 right-0 border-l\",\n    corners: \"rounded-l-lg\",\n    slide: \"starting:translate-x-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-right\",\n    extent: \"width\",\n    swipe: \"right\",\n    handle: \"left-1.5 top-1/2 h-10 w-1.5 -translate-y-1/2\",\n  },\n  top: {\n    edge: \"inset-x-0 top-0 border-b\",\n    corners: \"rounded-b-lg\",\n    slide: \"starting:-translate-y-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-top\",\n    extent: \"height\",\n    swipe: \"up\",\n    handle: \"bottom-1.5 left-1/2 h-1.5 w-10 -translate-x-1/2\",\n  },\n  bottom: {\n    edge: \"inset-x-0 bottom-0 border-t\",\n    corners: \"rounded-t-lg\",\n    slide: \"starting:translate-y-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-bottom\",\n    extent: \"height\",\n    swipe: \"down\",\n    handle: \"top-1.5 left-1/2 h-1.5 w-10 -translate-x-1/2\",\n  },\n} satisfies Record<\n  DrawerSide,\n  {\n    edge: string;\n    corners: string;\n    slide: string;\n    exit: string;\n    extent: \"width\" | \"height\";\n    swipe: \"left\" | \"right\" | \"up\" | \"down\";\n    handle: string;\n  }\n>;\n\n/**\n * The size scale, indexed by the dimension the anchored edge turned it into.\n * Two maps rather than sixteen rows on `SIDES`, because `left` and `right` want\n * the same widths and `top` and `bottom` the same heights — duplicating them\n * per edge is four places for a size to be adjusted in three of.\n *\n * Each is capped against the viewport, so a `lg` drawer on a laptop still\n * leaves the page it is anchored over visible behind it. That gap is the whole\n * difference between a drawer and a full-screen takeover.\n *\n * `xl` on the width axis is Dialog's own top-end pair: the tier existed there\n * first, and sharing it byte-for-byte is what lets a host size-match the two\n * surfaces. The heights answer to their own ladder instead — every step down\n * this axis has been ×1.5 (16 → 24 → 36), so 54 continues it rather than\n * borrowing a width number.\n */\nconst EXTENT = {\n  width: {\n    sm: \"w-[min(90vw,20rem)]\",\n    md: \"w-[min(92vw,26rem)]\",\n    lg: \"w-[min(94vw,40rem)]\",\n    xl: \"w-[min(94vw,64rem)]\",\n  },\n  height: {\n    sm: \"h-[min(90vh,16rem)]\",\n    md: \"h-[min(92vh,24rem)]\",\n    lg: \"h-[min(94vh,36rem)]\",\n    xl: \"h-[min(94vh,54rem)]\",\n  },\n} satisfies Record<\"width\" | \"height\", Record<DrawerSize, string>>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, useId } from \"vue\";\nimport {\n  DrawerRoot,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHandle,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerClose,\n} from \"reka-ui\";\nimport { X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Drawer — a panel anchored to an edge of the viewport that slides in over the\n * page: a filter rail tuned while a table stays visible behind it, a record's\n * detail opened from a row, a navigation sheet on a narrow screen.\n *\n * **Drawer against Dialog**, because this is the pair most often picked wrongly.\n * `Dialog` is a centred task surface for a decision or a short form: it\n * interrupts, it sits in the middle of the screen, and the page behind it is\n * context rather than something to look at. A Drawer is edge-anchored and\n * deliberately leaves the page visible along its open side, because the work\n * happens *alongside* that content — you tune a filter and watch the rows\n * change. If the user cannot proceed until they answer, that is a Dialog. If\n * they are reading or adjusting something about what is already on screen, it\n * is a Drawer.\n *\n * **It is still modal**, and that is a deliberate choice rather than an\n * oversight: focus is trapped in the panel, Tab never reaches the page behind,\n * everything outside is hidden from assistive technology, and the page does not\n * scroll. Visible is not the same as reachable — a panel you can Tab out of\n * silently strands a keyboard user behind a scrim they cannot see past. One\n * consequence to know about is in `docs/components/drawer.md`: locking the body\n * removes the scrollbar, and Reka compensates with a `padding-right` that\n * viewport-pinned furniture does not inherit.\n *\n * **The way out is never a gesture alone.** Esc closes, the close control in the\n * corner closes, and either one returns focus to whatever opened it. The drag\n * handle is a pointer affordance sitting on top of those, never instead of\n * them — it does not exist for a keyboard, and on a desktop pointer it is a\n * hint rather than a route.\n *\n * `title` is required for the same reason it is on `Dialog`: it is the panel's\n * accessible name, and a drawer without one announces itself as a dialog that\n * says nothing about what it holds.\n *\n * Reach for `Dialog` when the answer must come before anything else happens,\n * `Popover` when the content is small, non-blocking and belongs next to its\n * trigger, and a transient notification when the user need not act at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the drawer from the host with `v-model:open`; omit it and the drawer owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the panel's heading. Name what is in it (\"Filters\", \"Scene 12\"), not the verb that opened it. */\n    title: string;\n    /** Wired as the drawer's accessible description — one line on what the panel is for, announced with the title. */\n    description?: string;\n    /** Which edge the panel is anchored to. `right` for detail, `left` for navigation, `bottom` for a sheet. */\n    side?: DrawerSide;\n    /** How far the panel reaches along its own axis — width on a side drawer, height on a sheet. */\n    size?: DrawerSize;\n    /** Whether a press outside the panel dismisses it, and whether the drag handle is offered. Esc and the close control work either way. */\n    dismissible?: boolean;\n    /**\n     * The name on the close control, as any subset of `DrawerLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, for the drawer whose close\n     * means something more specific than \"Close\" — \"Close filters\", say, on a\n     * page carrying two of them.\n     */\n    labels?: LabelOverrides<DrawerLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `description` needs no such entry: a\n  // string prop is already `undefined` when absent.\n  { open: undefined, side: \"right\", size: \"md\", dismissible: true },\n);\n\ndefineEmits<{\n  /** The drawer opened or closed, for `v-model:open`. The host stays the source of truth — the drawer reports the request and waits. */\n  \"update:open\": [value: boolean];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"drawer\", DRAWER_LABELS, () => props.labels);\n\nconst anchor = computed(() => SIDES[props.side]);\n\n// `DrawerRoot` renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the element they actually describe — a `data-testid` or an\n// `aria-*` on `<Drawer>` reads as being about the drawer, not about the button\n// that happens to open it.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's\n// `w-[30rem]` would lose to the size scale's own width depending on which\n// utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n/**\n * The `dismissible: false` half. Reka reads a prevented `interactOutside` as\n * \"this layer declines to be dismissed\", which covers the pointer press and the\n * focus that follows it in one place. Esc is deliberately untouched: a panel\n * with no keyboard exit is a trap, and \"do not close this by accident\" is a\n * different request from \"do not let this be closed\".\n */\nfunction guardOutsidePress(event: Event): void {\n  if (!props.dismissible) event.preventDefault();\n}\n\n// The `dismissible: false` other half — the swipe. Reka wires\n// `useSwipeDismiss` unconditionally inside `DrawerContentImpl` with\n// `enabled: open` and exposes no prop to turn it off, so a drag on the panel\n// body toward the anchored edge used to dismiss a drawer whose `dismissible`\n// was `false` — defeating exactly the case the prop exists for, on touch,\n// where the reader is least likely to have meant it.\n//\n// There is no event Reka emits for the gesture that a handler could veto\n// from outside; the only lever is stopping its pointer handlers before they\n// start a swipe. Reka listens on the panel in the bubble phase, so a\n// capture-phase listener on `document` runs first for every event that\n// reaches the panel, and `stopImmediatePropagation` clears the rest of the\n// path — Reka's listener included — while leaving click, focus, scroll and\n// selection alone, which are separate events.\n//\n// Two costs are accepted rather than designed around. A consumer's own\n// pointerdown handler inside a non-dismissible drawer is stopped too, which\n// is the same neighbourhood as `interact-outside` vetoing their outside\n// press: `dismissible: false` declines pointer gestures, full stop. And a\n// non-dismissible drawer nested inside another non-dismissible one vetoes\n// gestures for both, which is the direction the pointer would have to travel\n// anyway.\n//\n// Pointer and touch are two paths in Reka (`onPointerDown` returns early for\n// touch pointers, which arrive via `onTouchStart`), so both events are\n// watched. The `data-loom-drawer-panel` marker scopes the veto to this\n// drawer's panel — and to nobody else's. That last half is the part that\n// bites: the marker is on every panel, so a naive `closest` check makes one\n// non-dismissible drawer on a page veto the gestures of every drawer on it,\n// dismissing nothing but the sibling's ability to be swiped. The marker\n// therefore carries this instance's own id, and the veto demands a match on\n// the value, not just the attribute. The attribute itself still has to\n// survive the panel being portalled away from the drawer's own subtree,\n// which an element-membership check would not.\nconst PANEL_MARKER = \"data-loom-drawer-panel\";\n// `useId` like the rest of the library: stable across server and client, so\n// the marker value a listener armed during hydration checks is the value the\n// portalled panel renders with.\nconst panelMarkerId = useId();\n\nfunction vetoSwipeStart(event: PointerEvent | TouchEvent): void {\n  if (props.dismissible) return;\n  const target = event.target;\n  if (!(target instanceof Element)) return;\n  const panel = target.closest(`[${PANEL_MARKER}]`);\n  if (!(panel instanceof Element) || panel.getAttribute(PANEL_MARKER) !== panelMarkerId) return;\n  event.stopImmediatePropagation();\n}\n\n// The listeners are on `document`, not the panel, because the panel's whole\n// lifecycle is Reka's — the portal content mounts with the drawer and is\n// removed with it, so a listener attached to the panel would need re-arming\n// on every open. A document listener is armed once for the component's own\n// lifetime, and `onBeforeUnmount` is the pairing that keeps it from leaking\n// into the next drawer or the host's page.\nonMounted(() => {\n  document.addEventListener(\"pointerdown\", vetoSwipeStart, { capture: true });\n  document.addEventListener(\"touchstart\", vetoSwipeStart, { capture: true, passive: true });\n});\nonBeforeUnmount(() => {\n  document.removeEventListener(\"pointerdown\", vetoSwipeStart, { capture: true });\n  document.removeEventListener(\"touchstart\", vetoSwipeStart, { capture: true });\n});\n</script>\n\n<template>\n  <DrawerRoot\n    v-bind=\"optional({ open })\"\n    :swipe-direction=\"anchor.swipe\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <!-- @slot The control that opens the drawer. Optional — omit it and drive\n         the drawer entirely from the host with `v-model:open`. -->\n    <DrawerTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </DrawerTrigger>\n\n    <DrawerPortal>\n      <!-- `scrim-light` rather than Dialog's `scrim`, and the token now carries\n           the reason: a drawer's page is still the thing being worked on. It\n           fades rather than moves, so nothing behind the panel appears to\n           shift.\n\n           Both states are scoped, never unconditional. Reka's Presence keeps\n           closed content mounted until an animationend arrives, and a\n           mount-only animation never fires a second one — which here would\n           strand a full-screen, input-blocking scrim over a page with no drawer\n           on it. The paired exit is what makes the close a timed fade instead\n           of a cut, and it keeps that guarantee: `fade-out` ends, so Presence\n           unmounts on its own animationend rather than on the absence of one. -->\n      <DrawerOverlay\n        class=\"fixed inset-0 z-overlay bg-foreground/scrim-light data-[state=open]:animate-fade data-[state=closed]:animate-fade-out\"\n      />\n\n      <DrawerContent\n        v-bind=\"panelAttrs\"\n        :data-loom-drawer-panel=\"panelMarkerId\"\n        :class=\"\n          cn(\n            'fixed z-overlay flex flex-col border-border bg-popover text-popover-foreground shadow-lg outline-none',\n            anchor.edge,\n            anchor.corners,\n            EXTENT[anchor.extent][size],\n            // `slow`, and this is the one place this component reaches past the\n            // `--duration-normal` feedback ceiling. The motion foundations page\n            // names a panel taking over the screen as exactly what the\n            // unhurried lane is for, and a full-height panel crossing the\n            // viewport at 200ms reads as a flinch rather than a slide.\n            'transition-transform duration-slow ease-out',\n            anchor.slide,\n            // The other half of the same gesture. `SIDES` carries why the two\n            // directions are a transition and a keyframe rather than one\n            // mechanism run both ways; the short version is that Presence\n            // watches `animationend` and nothing else, so a transition on the\n            // way out never gets a frame to run in.\n            anchor.exit,\n            // Reka's swipe-to-dismiss writes the live drag onto the panel as\n            // CSS custom properties and leaves the rendering to us. Applying\n            // them as `transform` keeps them off `translate`, which the slide\n            // above owns — the two properties compose instead of overwriting\n            // each other, so a half-finished swipe is not fighting the entry\n            // transition. The `0px` fallbacks cover the browsers where\n            // `CSS.registerProperty` is unavailable and the vars have no\n            // registered initial value.\n            '[transform:translate(var(--drawer-swipe-movement-x,0px),var(--drawer-swipe-movement-y,0px))]',\n            // While a finger is down the panel must track it exactly; a 320ms\n            // ease on every pointermove is a panel lagging behind the hand.\n            'data-[swiping]:transition-none',\n            attrs.class as string,\n          )\n        \"\n        @interact-outside=\"guardOutsidePress\"\n      >\n        <!-- Reka renders the handle `aria-hidden` and unfocusable, which is\n             correct and is why it can never become the only exit: it is not on\n             the keyboard's path at all. It is drawn only where it means\n             something — with `dismissible` off there is nothing to drag towards. -->\n        <DrawerHandle\n          v-if=\"dismissible\"\n          :class=\"cn('absolute rounded-full bg-border-strong', anchor.handle)\"\n        />\n\n        <!-- The header is `shrink-0` and lives outside the scrolling region on\n             purpose: a drawer taller than its content's needs scrolls its body\n             while the title — the panel's accessible name and the only thing\n             saying what is on screen — stays put. `pr-12` keeps a long title\n             clear of the close control. -->\n        <div class=\"shrink-0 px-6 pb-4 pr-12 pt-6\">\n          <DrawerTitle class=\"text-base font-semibold\">{{ title }}</DrawerTitle>\n          <DrawerDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n            {{ description }}\n          </DrawerDescription>\n        </div>\n\n        <!-- `min-h-0` is what makes `flex-1` able to shrink below its content's\n             height; without it a flex item's automatic minimum size wins and the\n             body grows the panel past the viewport instead of scrolling.\n             `overscroll-contain` stops a scroll that reaches the end of this\n             region from chaining out to the locked page behind. -->\n        <div class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6\">\n          <!-- @slot The drawer body. -->\n          <slot />\n        </div>\n\n        <!-- @slot The action row, aligned to the trailing edge. Pinned below the\n             scrolling body so its actions stay reachable in a long panel. -->\n        <div\n          v-if=\"$slots.footer\"\n          class=\"flex shrink-0 items-center justify-end gap-2 border-t border-border px-6 py-4\"\n        >\n          <slot name=\"footer\" />\n        </div>\n\n        <!-- Unconditional, unlike Dialog's `closable`. A dialog can drop its\n             corner button because the footer already carries an explicit\n             decision; a drawer often has no footer at all, and one of its two\n             keyboard-independent exits must always be visible. -->\n        <DrawerClose\n          :aria-label=\"text.close\"\n          class=\"absolute right-4 top-4 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          <X class=\"h-4 w-4\" />\n        </DrawerClose>\n      </DrawerContent>\n    </DrawerPortal>\n  </DrawerRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/drawer/src/Drawer.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.vue_vue_type_script_setup_true_lang.js","names":["$emit","$slots"],"sources":["../../../../packages/primitives/drawer/src/Drawer.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { DrawerLabels } from \"@ecoma-io/loom-labels\";\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it, and\n * exported so a host can build a partial vocabulary against the real thing.\n */\nexport const DRAWER_LABELS: DrawerLabels = {\n  close: \"Close\",\n};\n\n/**\n * Which edge of the viewport the panel is anchored to. `right` is the default\n * because a drawer is most often opened *from* a row or a toolbar to show more\n * about what is already on screen, and left-to-right readers expect that\n * detail to arrive on the trailing edge. `left` is where navigation lives,\n * `bottom` is the sheet a narrow screen gets, and `top` is the rare one — a\n * command surface dropping in over the header.\n */\nexport type DrawerSide = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * How far the panel reaches along its own axis — width for a `left`/`right`\n * drawer, height for a `top`/`bottom` one. Like Dialog's width, this is the\n * primitive's decision rather than a class a caller passes, so two drawers\n * opened from two screens cannot be two different sizes: `sm` for a filter rail\n * or a navigation sheet, `md` for a record's detail, `lg` for a working surface\n * with a table or a multi-section form in it, `xl` for an authoring-scale\n * surface pinned to the edge.\n *\n * The union is the same one Dialog's `size` takes, so a host parametrising\n * both surfaces can pass one size through. The ends match exactly: `xl` is\n * the dialog's own width pair, adopted rather than reinvented. `sm`, `md`\n * and `lg` keep the extents they have always had here, which are shallower\n * than the dialog's middle — an edge-anchored panel deliberately leaves the\n * page visible beside it, so it earns less of the axis than a centred one.\n */\nexport type DrawerSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * One row per edge, because `side` is not one decision but four made together —\n * which edge the panel is pinned to, which way it slides in from, which\n * dimension `size` then means, and which pair of corners is rounded — plus the\n * direction a dismissing swipe has to travel. Split across a `cva` map and\n * three lookups they drift, and the drift is invisible: a panel pinned to the\n * left that slides in from the right still renders, still passes its own tests,\n * and looks like a rendering bug nobody can name. `satisfies` is the other half\n * — adding a member to `DrawerSide` and not to this table stops compiling.\n *\n * `slide` and `exit` are the same motion in two directions and deliberately not\n * the same mechanism, which is worth reading before either is \"unified\".\n *\n * `slide` is a `starting:` variant rather than a keyframe, and it is a\n * transform rather than an inset or a width. A full-height panel animated on\n * `width`/`right` relayouts the document on every frame; `translate` runs on\n * the compositor. `@starting-style` supplies the before-value for the entry\n * transition at the moment Reka's `Presence` inserts the node, which is the one\n * thing a plain class cannot do. It also composes with the live swipe below:\n * the gesture writes `transform` while the entry owns `translate`, and a\n * keyframe on `transform` would overwrite a drag mid-finger.\n *\n * `exit` has to be a keyframe, for the opposite reason. `Presence` decides how\n * long to keep a closing panel mounted by reading `animation-name` and waiting\n * for `animationend` — it never observes `transitionend`. So a closed panel\n * carrying only a transition is removed from the DOM in the same frame and the\n * transition never runs, which is exactly what a drawer did until these tokens\n * existed: a 320ms slide in, answered by a hard cut. The keyframes animate\n * `translate` rather than `transform` for the same composition reason the entry\n * does, so a panel released mid-swipe leaves from where the finger left it.\n *\n * `handle` positions the grab affordance on the panel's *inner* edge, running\n * along it: a vertical pill on a side drawer, a horizontal one on a sheet.\n */\nconst SIDES = {\n  left: {\n    edge: \"inset-y-0 left-0 border-r\",\n    corners: \"rounded-r-lg\",\n    slide: \"starting:-translate-x-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-left\",\n    extent: \"width\",\n    swipe: \"left\",\n    handle: \"right-1.5 top-1/2 h-10 w-1.5 -translate-y-1/2\",\n  },\n  right: {\n    edge: \"inset-y-0 right-0 border-l\",\n    corners: \"rounded-l-lg\",\n    slide: \"starting:translate-x-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-right\",\n    extent: \"width\",\n    swipe: \"right\",\n    handle: \"left-1.5 top-1/2 h-10 w-1.5 -translate-y-1/2\",\n  },\n  top: {\n    edge: \"inset-x-0 top-0 border-b\",\n    corners: \"rounded-b-lg\",\n    slide: \"starting:-translate-y-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-top\",\n    extent: \"height\",\n    swipe: \"up\",\n    handle: \"bottom-1.5 left-1/2 h-1.5 w-10 -translate-x-1/2\",\n  },\n  bottom: {\n    edge: \"inset-x-0 bottom-0 border-t\",\n    corners: \"rounded-t-lg\",\n    slide: \"starting:translate-y-full\",\n    exit: \"data-[state=closed]:animate-slide-out-to-bottom\",\n    extent: \"height\",\n    swipe: \"down\",\n    handle: \"top-1.5 left-1/2 h-1.5 w-10 -translate-x-1/2\",\n  },\n} satisfies Record<\n  DrawerSide,\n  {\n    edge: string;\n    corners: string;\n    slide: string;\n    exit: string;\n    extent: \"width\" | \"height\";\n    swipe: \"left\" | \"right\" | \"up\" | \"down\";\n    handle: string;\n  }\n>;\n\n/**\n * The size scale, indexed by the dimension the anchored edge turned it into.\n * Two maps rather than sixteen rows on `SIDES`, because `left` and `right` want\n * the same widths and `top` and `bottom` the same heights — duplicating them\n * per edge is four places for a size to be adjusted in three of.\n *\n * Each is capped against the viewport, so a `lg` drawer on a laptop still\n * leaves the page it is anchored over visible behind it. That gap is the whole\n * difference between a drawer and a full-screen takeover.\n *\n * `xl` on the width axis is Dialog's own top-end pair: the tier existed there\n * first, and sharing it byte-for-byte is what lets a host size-match the two\n * surfaces. The heights answer to their own ladder instead — every step down\n * this axis has been ×1.5 (16 → 24 → 36), so 54 continues it rather than\n * borrowing a width number.\n */\nconst EXTENT = {\n  width: {\n    sm: \"w-[min(90vw,20rem)]\",\n    md: \"w-[min(92vw,26rem)]\",\n    lg: \"w-[min(94vw,40rem)]\",\n    xl: \"w-[min(94vw,64rem)]\",\n  },\n  height: {\n    sm: \"h-[min(90vh,16rem)]\",\n    md: \"h-[min(92vh,24rem)]\",\n    lg: \"h-[min(94vh,36rem)]\",\n    xl: \"h-[min(94vh,54rem)]\",\n  },\n} satisfies Record<\"width\" | \"height\", Record<DrawerSize, string>>;\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, useId } from \"vue\";\nimport {\n  DrawerRoot,\n  DrawerTrigger,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerContent,\n  DrawerHandle,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerClose,\n} from \"reka-ui\";\nimport { X } from \"@lucide/vue\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Drawer — a panel anchored to an edge of the viewport that slides in over the\n * page: a filter rail tuned while a table stays visible behind it, a record's\n * detail opened from a row, a navigation sheet on a narrow screen.\n *\n * **Drawer against Dialog**, because this is the pair most often picked wrongly.\n * `Dialog` is a centred task surface for a decision or a short form: it\n * interrupts, it sits in the middle of the screen, and the page behind it is\n * context rather than something to look at. A Drawer is edge-anchored and\n * deliberately leaves the page visible along its open side, because the work\n * happens *alongside* that content — you tune a filter and watch the rows\n * change. If the user cannot proceed until they answer, that is a Dialog. If\n * they are reading or adjusting something about what is already on screen, it\n * is a Drawer.\n *\n * **It is still modal**, and that is a deliberate choice rather than an\n * oversight: focus is trapped in the panel, Tab never reaches the page behind,\n * everything outside is hidden from assistive technology, and the page does not\n * scroll. Visible is not the same as reachable — a panel you can Tab out of\n * silently strands a keyboard user behind a scrim they cannot see past. One\n * consequence to know about is in `docs/components/drawer.md`: locking the body\n * removes the scrollbar, and Reka compensates with a `padding-right` that\n * viewport-pinned furniture does not inherit.\n *\n * **The way out is never a gesture alone.** Esc closes, the close control in the\n * corner closes, and either one returns focus to whatever opened it. The drag\n * handle is a pointer affordance sitting on top of those, never instead of\n * them — it does not exist for a keyboard, and on a desktop pointer it is a\n * hint rather than a route.\n *\n * `title` is required for the same reason it is on `Dialog`: it is the panel's\n * accessible name, and a drawer without one announces itself as a dialog that\n * says nothing about what it holds.\n *\n * Reach for `Dialog` when the answer must come before anything else happens,\n * `Popover` when the content is small, non-blocking and belongs next to its\n * trigger, and a transient notification when the user need not act at all.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** Drive the drawer from the host with `v-model:open`; omit it and the drawer owns its own state. */\n    open?: boolean | undefined;\n    /** The accessible name, and the panel's heading. Name what is in it (\"Filters\", \"Scene 12\"), not the verb that opened it. */\n    title: string;\n    /** Wired as the drawer's accessible description — one line on what the panel is for, announced with the title. */\n    description?: string;\n    /** Which edge the panel is anchored to. `right` for detail, `left` for navigation, `bottom` for a sheet. */\n    side?: DrawerSide;\n    /** How far the panel reaches along its own axis — width on a side drawer, height on a sheet. */\n    size?: DrawerSize;\n    /** Whether a press outside the panel dismisses it, and whether the drag handle is offered. Esc and the close control work either way. */\n    dismissible?: boolean;\n    /**\n     * The name on the close control, as any subset of `DrawerLabels` — what it\n     * leaves out stays as the host's `provideLoomLabels` vocabulary left it,\n     * and then as Loom's English.\n     *\n     * A whole application's language belongs in that vocabulary rather than\n     * here. This is the per-instance correction, for the drawer whose close\n     * means something more specific than \"Close\" — \"Close filters\", say, on a\n     * page carrying two of them.\n     */\n    labels?: LabelOverrides<DrawerLabels>;\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both. `description` needs no such entry: a\n  // string prop is already `undefined` when absent.\n  { open: undefined, side: \"right\", size: \"md\", dismissible: true },\n);\n\ndefineEmits<{\n  /** The drawer opened or closed, for `v-model:open`. The host stays the source of truth — the drawer reports the request and waits. */\n  \"update:open\": [value: boolean];\n}>();\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"drawer\", DRAWER_LABELS, () => props.labels);\n\nconst anchor = computed(() => SIDES[props.side]);\n\n// `DrawerRoot` renders no DOM node at all, so fallthrough attributes would be\n// dropped on the floor rather than landing anywhere. They go to the panel,\n// which is the element they actually describe — a `data-testid` or an\n// `aria-*` on `<Drawer>` reads as being about the drawer, not about the button\n// that happens to open it.\n//\n// `class` is pulled out of that spread and merged through `cn()` instead:\n// spreading it alongside the panel's own `:class` only concatenates the two\n// lists — Vue's merge is generic, not Tailwind-aware — so a caller's\n// `w-[30rem]` would lose to the size scale's own width depending on which\n// utility Tailwind happened to emit last.\ndefineOptions({ inheritAttrs: false });\nconst { attrs, rest: panelAttrs } = useSplitAttrs();\n\n/**\n * The `dismissible: false` half. Reka reads a prevented `interactOutside` as\n * \"this layer declines to be dismissed\", which covers the pointer press and the\n * focus that follows it in one place. Esc is deliberately untouched: a panel\n * with no keyboard exit is a trap, and \"do not close this by accident\" is a\n * different request from \"do not let this be closed\".\n */\nfunction guardOutsidePress(event: Event): void {\n  if (!props.dismissible) event.preventDefault();\n}\n\n// The `dismissible: false` other half — the swipe. Reka wires\n// `useSwipeDismiss` unconditionally inside `DrawerContentImpl` with\n// `enabled: open` and exposes no prop to turn it off, so a drag on the panel\n// body toward the anchored edge used to dismiss a drawer whose `dismissible`\n// was `false` — defeating exactly the case the prop exists for, on touch,\n// where the reader is least likely to have meant it.\n//\n// There is no event Reka emits for the gesture that a handler could veto\n// from outside; the only lever is stopping its pointer handlers before they\n// start a swipe. Reka listens on the panel in the bubble phase, so a\n// capture-phase listener on `document` runs first for every event that\n// reaches the panel, and `stopImmediatePropagation` clears the rest of the\n// path — Reka's listener included — while leaving click, focus, scroll and\n// selection alone, which are separate events.\n//\n// Two costs are accepted rather than designed around. A consumer's own\n// pointerdown handler inside a non-dismissible drawer is stopped too, which\n// is the same neighbourhood as `interact-outside` vetoing their outside\n// press: `dismissible: false` declines pointer gestures, full stop. And a\n// non-dismissible drawer nested inside another non-dismissible one vetoes\n// gestures for both, which is the direction the pointer would have to travel\n// anyway.\n//\n// Pointer and touch are two paths in Reka (`onPointerDown` returns early for\n// touch pointers, which arrive via `onTouchStart`), so both events are\n// watched. The `data-loom-drawer-panel` marker scopes the veto to this\n// drawer's panel — and to nobody else's. That last half is the part that\n// bites: the marker is on every panel, so a naive `closest` check makes one\n// non-dismissible drawer on a page veto the gestures of every drawer on it,\n// dismissing nothing but the sibling's ability to be swiped. The marker\n// therefore carries this instance's own id, and the veto demands a match on\n// the value, not just the attribute. The attribute itself still has to\n// survive the panel being portalled away from the drawer's own subtree,\n// which an element-membership check would not.\nconst PANEL_MARKER = \"data-loom-drawer-panel\";\n// `useId` like the rest of the library: stable across server and client, so\n// the marker value a listener armed during hydration checks is the value the\n// portalled panel renders with.\nconst panelMarkerId = useId();\n\nfunction vetoSwipeStart(event: PointerEvent | TouchEvent): void {\n  if (props.dismissible) return;\n  const target = event.target;\n  if (!(target instanceof Element)) return;\n  const panel = target.closest(`[${PANEL_MARKER}]`);\n  if (!(panel instanceof Element) || panel.getAttribute(PANEL_MARKER) !== panelMarkerId) return;\n  event.stopImmediatePropagation();\n}\n\n// The listeners are on `document`, not the panel, because the panel's whole\n// lifecycle is Reka's — the portal content mounts with the drawer and is\n// removed with it, so a listener attached to the panel would need re-arming\n// on every open. A document listener is armed once for the component's own\n// lifetime, and `onBeforeUnmount` is the pairing that keeps it from leaking\n// into the next drawer or the host's page.\nonMounted(() => {\n  document.addEventListener(\"pointerdown\", vetoSwipeStart, { capture: true });\n  document.addEventListener(\"touchstart\", vetoSwipeStart, { capture: true, passive: true });\n});\nonBeforeUnmount(() => {\n  document.removeEventListener(\"pointerdown\", vetoSwipeStart, { capture: true });\n  document.removeEventListener(\"touchstart\", vetoSwipeStart, { capture: true });\n});\n</script>\n\n<template>\n  <DrawerRoot\n    v-bind=\"optional({ open })\"\n    :swipe-direction=\"anchor.swipe\"\n    @update:open=\"$emit('update:open', $event)\"\n  >\n    <!-- @slot The control that opens the drawer. Optional — omit it and drive\n         the drawer entirely from the host with `v-model:open`. -->\n    <DrawerTrigger v-if=\"$slots.trigger\" as-child>\n      <slot name=\"trigger\" />\n    </DrawerTrigger>\n\n    <DrawerPortal>\n      <!-- `scrim-light` rather than Dialog's `scrim`, and the token now carries\n           the reason: a drawer's page is still the thing being worked on. It\n           fades rather than moves, so nothing behind the panel appears to\n           shift.\n\n           Both states are scoped, never unconditional. Reka's Presence keeps\n           closed content mounted until an animationend arrives, and a\n           mount-only animation never fires a second one — which here would\n           strand a full-screen, input-blocking scrim over a page with no drawer\n           on it. The paired exit is what makes the close a timed fade instead\n           of a cut, and it keeps that guarantee: `fade-out` ends, so Presence\n           unmounts on its own animationend rather than on the absence of one. -->\n      <DrawerOverlay\n        class=\"fixed inset-0 z-overlay bg-foreground/scrim-light data-[state=open]:animate-fade data-[state=closed]:animate-fade-out\"\n      />\n\n      <DrawerContent\n        v-bind=\"panelAttrs\"\n        :data-loom-drawer-panel=\"panelMarkerId\"\n        :class=\"\n          cn(\n            'fixed z-overlay flex flex-col border-border bg-popover text-popover-foreground shadow-lg outline-none',\n            anchor.edge,\n            anchor.corners,\n            EXTENT[anchor.extent][size],\n            // `slow`, and this is the one place this component reaches past the\n            // `--duration-normal` feedback ceiling. The motion foundations page\n            // names a panel taking over the screen as exactly what the\n            // unhurried lane is for, and a full-height panel crossing the\n            // viewport at 200ms reads as a flinch rather than a slide.\n            'transition-transform duration-slow ease-out',\n            anchor.slide,\n            // The other half of the same gesture. `SIDES` carries why the two\n            // directions are a transition and a keyframe rather than one\n            // mechanism run both ways; the short version is that Presence\n            // watches `animationend` and nothing else, so a transition on the\n            // way out never gets a frame to run in.\n            anchor.exit,\n            // Reka's swipe-to-dismiss writes the live drag onto the panel as\n            // CSS custom properties and leaves the rendering to us. Applying\n            // them as `transform` keeps them off `translate`, which the slide\n            // above owns — the two properties compose instead of overwriting\n            // each other, so a half-finished swipe is not fighting the entry\n            // transition. The `0px` fallbacks cover the browsers where\n            // `CSS.registerProperty` is unavailable and the vars have no\n            // registered initial value.\n            '[transform:translate(var(--drawer-swipe-movement-x,0px),var(--drawer-swipe-movement-y,0px))]',\n            // While a finger is down the panel must track it exactly; a 320ms\n            // ease on every pointermove is a panel lagging behind the hand.\n            'data-[swiping]:transition-none',\n            attrs.class as string,\n          )\n        \"\n        @interact-outside=\"guardOutsidePress\"\n      >\n        <!-- Reka renders the handle `aria-hidden` and unfocusable, which is\n             correct and is why it can never become the only exit: it is not on\n             the keyboard's path at all. It is drawn only where it means\n             something — with `dismissible` off there is nothing to drag towards. -->\n        <DrawerHandle\n          v-if=\"dismissible\"\n          :class=\"cn('absolute rounded-full bg-border-strong', anchor.handle)\"\n        />\n\n        <!-- The header is `shrink-0` and lives outside the scrolling region on\n             purpose: a drawer taller than its content's needs scrolls its body\n             while the title — the panel's accessible name and the only thing\n             saying what is on screen — stays put. `pr-12` keeps a long title\n             clear of the close control. -->\n        <div class=\"shrink-0 px-6 pb-4 pr-12 pt-6\">\n          <DrawerTitle class=\"text-base font-semibold\">{{ title }}</DrawerTitle>\n          <DrawerDescription v-if=\"description\" class=\"mt-1 text-sm text-muted-foreground\">\n            {{ description }}\n          </DrawerDescription>\n        </div>\n\n        <!-- `min-h-0` is what makes `flex-1` able to shrink below its content's\n             height; without it a flex item's automatic minimum size wins and the\n             body grows the panel past the viewport instead of scrolling.\n             `overscroll-contain` stops a scroll that reaches the end of this\n             region from chaining out to the locked page behind. -->\n        <div class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 pb-6\">\n          <!-- @slot The drawer body. -->\n          <slot />\n        </div>\n\n        <!-- @slot The action row, aligned to the trailing edge. Pinned below the\n             scrolling body so its actions stay reachable in a long panel. -->\n        <div\n          v-if=\"$slots.footer\"\n          class=\"flex shrink-0 items-center justify-end gap-2 border-t border-border px-6 py-4\"\n        >\n          <slot name=\"footer\" />\n        </div>\n\n        <!-- Unconditional, unlike Dialog's `closable`. A dialog can drop its\n             corner button because the footer already carries an explicit\n             decision; a drawer often has no footer at all, and one of its two\n             keyboard-independent exits must always be visible. -->\n        <DrawerClose\n          :aria-label=\"text.close\"\n          class=\"absolute right-4 top-4 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        >\n          <X class=\"h-4 w-4\" />\n        </DrawerClose>\n      </DrawerContent>\n    </DrawerPortal>\n  </DrawerRoot>\n</template>\n"],"mappings":"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"}

package/dist/primitives/dropdown-menu/src/DropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../../../packages/primitives/dropdown-menu/src/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * One row of the menu, and the three kinds a menu is built from are told apart\n * by which fields are set rather than by a `kind` discriminator: a `separator`\n * is a rule, a `heading` is a non-interactive group label, and anything else\n * is a command.\n *\n * The list is data rather than markup because the primitive stays free of app\n * logic — selecting a row emits its `value` and the host decides what that\n * command means.\n */\nexport interface DropdownMenuEntry {\n  /** The visible text of a command or a heading. */\n  label?: string;\n  /** The command id emitted on select. An entry without one is not selectable. */\n  value?: string;\n  /** Accelerator hint shown at the trailing edge, e.g. `⌘S`. Display only — the primitive binds no keys. */\n  shortcut?: string;\n  /** Render a divider. Every other field is ignored. */\n  separator?: boolean;\n  /** Render a non-interactive section heading rather than a command. */\n  heading?: boolean;\n  /** A destructive command — painted in the destructive token so it is not one indistinguishable row. */\n  danger?: boolean;\n  /** Visible but inert: announced as disabled, and selecting it emits nothing. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * DropdownMenu — one button that opens a list of commands, with roving focus,\n * typeahead and arrow-key navigation.\n *\n * The escape contract: opening moves focus into the menu and onto the first\n * command; Esc and an outside click both close it; closing returns focus to the\n * trigger. The menu is modal, so while it is open the page behind does not\n * scroll and the rest of the page is hidden from assistive technology — a\n * command list is never scrolled out from under the pointer mid-choice. Focus\n * stays in the menu while it is open, but not the way `Dialog` traps it: a menu\n * has no internal tab order at all. Tab is inert, and the arrow keys plus\n * typeahead are how a row is reached.\n *\n * Selecting an entry emits `select` with its `value`; the host maps that id to\n * an action, which is what keeps the primitive free of app logic.\n *\n * Reach for `Popover` when the panel is interactive content rather than a\n * command list, and for a select control when the list *is* a field's value.\n */\nwithDefaults(\n  defineProps<{\n    /** The rows, in order. Three kinds, told apart by which fields are set. */\n    items: DropdownMenuEntry[];\n    /**\n     * Let the arrow keys wrap at the ends of the list. Off by default — a\n     * cursor that stops at the last row reads as \"there is nothing further\",\n     * which is the honest answer for most command lists; long lists are where\n     * cycling back to the top pays for itself.\n     */\n    loop?: boolean;\n    /** Drive the menu from the host with `v-model:open`; omit it and the menu owns its own state. */\n    open?: boolean | undefined;\n    /**\n     * Reading direction for the menu and its arrow-key navigation. Reka\n     * mirrors traversal from this; without forwarding it a right-to-left\n     * host gets left-to-right menus no matter what the page declares.\n     */\n    dir?: \"ltr\" | \"rtl\";\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined },\n);\nconst emit = defineEmits<{ select: [value: string]; \"update:open\": [value: boolean] }>();\n\n/**\n * A disabled entry, and an entry with no command id, select nothing. Reka\n * already blocks pointer events on the disabled row; this is the second half,\n * for the keyboard path that reaches it anyway.\n */\nfunction choose(item: DropdownMenuEntry): void {\n  if (item.disabled || item.value === undefined) return;\n  emit(\"select\", item.value);\n}\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"optional({ open, dir })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The button that opens the menu. Rendered `as-child`, so the\n         caller's own element *is* the trigger. -->\n    <DropdownMenuTrigger as-child>\n      <slot name=\"trigger\" />\n    </DropdownMenuTrigger>\n\n    <DropdownMenuPortal>\n      <DropdownMenuContent\n        :side-offset=\"6\"\n        align=\"start\"\n        :loop=\"loop ?? false\"\n        :class=\"\n          cn(\n            'z-overlay min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            // Both states scoped, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — so an\n            // unconditional animation class strands an invisible menu over the\n            // page, catching clicks meant for what is behind it. Scoped, the\n            // closed element computes `animation-name: none` and Presence\n            // unmounts it at once; the paired exit is precisely what Presence\n            // is waiting to hold it for. The origin below makes the menu grow\n            // out of its trigger rather than out of its own centre — on the\n            // way out as well as in.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <DropdownMenuSeparator v-if=\"item.separator\" class=\"my-1 h-px bg-border\" />\n          <DropdownMenuLabel\n            v-else-if=\"item.heading\"\n            class=\"px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n          >\n            {{ item.label }}\n          </DropdownMenuLabel>\n          <!-- The reveal delay comes from the shared stagger vocabulary, capped\n               there so a long menu does not tail off, rather than from a\n               per-menu number written by hand.\n\n               `disabled` is coerced rather than forwarded raw: an entry that\n               simply omits the field is not disabled, and Reka's own prop does\n               not accept `undefined` as a way of saying so. -->\n          <DropdownMenuItem\n            v-else\n            :disabled=\"item.disabled ?? false\"\n            :class=\"\n              cn(\n                'flex cursor-pointer items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                // The rows reveal in sequence as the menu opens, which reads as\n                // a list arriving rather than a block appearing. The hover\n                // colour transition above is a separate channel, so a row\n                // highlighted mid-reveal still responds at once.\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                // The row's colour, not its alpha. A menu row is nothing but\n                // its label, and `data-[disabled]:opacity-40` composited that\n                // label to 2.40:1 on the popover and its shortcut to 1.79:1 —\n                // a disabled row a reader cannot make out tells them nothing\n                // about what is unavailable, which is the only thing it is\n                // there to say. Muted instead: 5.76:1, and a clear drop from\n                // the 15.46:1 an available row wears.\n                //\n                // It takes the danger colour with it, deliberately. An\n                // attribute selector outranks the plain `text-destructive-text`\n                // below whatever order Tailwind emits them in, and that is the\n                // right way round: red is a warning about an action, and there\n                // is no action here to warn about.\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                item.danger &&\n                  'text-destructive-text data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive-text',\n              )\n            \"\n            :style=\"{ animationDelay: listStaggerDelay(i) }\"\n            @select=\"choose(item)\"\n          >\n            <span>{{ item.label }}</span>\n            <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n              {{ item.shortcut }}\n            </span>\n          </DropdownMenuItem>\n        </template>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/dropdown-menu/src/DropdownMenu.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.vue_vue_type_script_setup_true_lang.js","names":["$emit"],"sources":["../../../../packages/primitives/dropdown-menu/src/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * One row of the menu, and the three kinds a menu is built from are told apart\n * by which fields are set rather than by a `kind` discriminator: a `separator`\n * is a rule, a `heading` is a non-interactive group label, and anything else\n * is a command.\n *\n * The list is data rather than markup because the primitive stays free of app\n * logic — selecting a row emits its `value` and the host decides what that\n * command means.\n */\nexport interface DropdownMenuEntry {\n  /** The visible text of a command or a heading. */\n  label?: string;\n  /** The command id emitted on select. An entry without one is not selectable. */\n  value?: string;\n  /** Accelerator hint shown at the trailing edge, e.g. `⌘S`. Display only — the primitive binds no keys. */\n  shortcut?: string;\n  /** Render a divider. Every other field is ignored. */\n  separator?: boolean;\n  /** Render a non-interactive section heading rather than a command. */\n  heading?: boolean;\n  /** A destructive command — painted in the destructive token so it is not one indistinguishable row. */\n  danger?: boolean;\n  /** Visible but inert: announced as disabled, and selecting it emits nothing. */\n  disabled?: boolean;\n}\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  DropdownMenuRoot,\n  DropdownMenuTrigger,\n  DropdownMenuPortal,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from \"reka-ui\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { listStaggerDelay } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\n\n/**\n * DropdownMenu — one button that opens a list of commands, with roving focus,\n * typeahead and arrow-key navigation.\n *\n * The escape contract: opening moves focus into the menu and onto the first\n * command; Esc and an outside click both close it; closing returns focus to the\n * trigger. The menu is modal, so while it is open the page behind does not\n * scroll and the rest of the page is hidden from assistive technology — a\n * command list is never scrolled out from under the pointer mid-choice. Focus\n * stays in the menu while it is open, but not the way `Dialog` traps it: a menu\n * has no internal tab order at all. Tab is inert, and the arrow keys plus\n * typeahead are how a row is reached.\n *\n * Selecting an entry emits `select` with its `value`; the host maps that id to\n * an action, which is what keeps the primitive free of app logic.\n *\n * Reach for `Popover` when the panel is interactive content rather than a\n * command list, and for a select control when the list *is* a field's value.\n */\nwithDefaults(\n  defineProps<{\n    /** The rows, in order. Three kinds, told apart by which fields are set. */\n    items: DropdownMenuEntry[];\n    /**\n     * Let the arrow keys wrap at the ends of the list. Off by default — a\n     * cursor that stops at the last row reads as \"there is nothing further\",\n     * which is the honest answer for most command lists; long lists are where\n     * cycling back to the top pays for itself.\n     */\n    loop?: boolean;\n    /** Drive the menu from the host with `v-model:open`; omit it and the menu owns its own state. */\n    open?: boolean | undefined;\n    /**\n     * Reading direction for the menu and its arrow-key navigation. Reka\n     * mirrors traversal from this; without forwarding it a right-to-left\n     * host gets left-to-right menus no matter what the page declares.\n     */\n    dir?: \"ltr\" | \"rtl\";\n  }>(),\n  // `open: undefined` is load-bearing, not a redundant default — it is what\n  // keeps the uncontrolled third state reachable past Vue's absent-Boolean\n  // casting. `optional()` in the template is the other half; its docblock\n  // carries the reasoning for both.\n  { open: undefined },\n);\nconst emit = defineEmits<{ select: [value: string]; \"update:open\": [value: boolean] }>();\n\n/**\n * A disabled entry, and an entry with no command id, select nothing. Reka\n * already blocks pointer events on the disabled row; this is the second half,\n * for the keyboard path that reaches it anyway.\n */\nfunction choose(item: DropdownMenuEntry): void {\n  if (item.disabled || item.value === undefined) return;\n  emit(\"select\", item.value);\n}\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"optional({ open, dir })\" @update:open=\"$emit('update:open', $event)\">\n    <!-- @slot The button that opens the menu. Rendered `as-child`, so the\n         caller's own element *is* the trigger. -->\n    <DropdownMenuTrigger as-child>\n      <slot name=\"trigger\" />\n    </DropdownMenuTrigger>\n\n    <DropdownMenuPortal>\n      <DropdownMenuContent\n        :side-offset=\"6\"\n        align=\"start\"\n        :loop=\"loop ?? false\"\n        :class=\"\n          cn(\n            'z-overlay min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            // Both states scoped, never unconditional. Reka's Presence\n            // keeps closed content mounted until an animationend arrives, and a\n            // mount-only animation never fires a second one — so an\n            // unconditional animation class strands an invisible menu over the\n            // page, catching clicks meant for what is behind it. Scoped, the\n            // closed element computes `animation-name: none` and Presence\n            // unmounts it at once; the paired exit is precisely what Presence\n            // is waiting to hold it for. The origin below makes the menu grow\n            // out of its trigger rather than out of its own centre — on the\n            // way out as well as in.\n            'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',\n          )\n        \"\n        style=\"transform-origin: var(--reka-popper-transform-origin)\"\n      >\n        <template v-for=\"(item, i) in items\" :key=\"i\">\n          <DropdownMenuSeparator v-if=\"item.separator\" class=\"my-1 h-px bg-border\" />\n          <DropdownMenuLabel\n            v-else-if=\"item.heading\"\n            class=\"px-2 py-1.5 text-micro font-medium uppercase tracking-wide text-muted-foreground\"\n          >\n            {{ item.label }}\n          </DropdownMenuLabel>\n          <!-- The reveal delay comes from the shared stagger vocabulary, capped\n               there so a long menu does not tail off, rather than from a\n               per-menu number written by hand.\n\n               `disabled` is coerced rather than forwarded raw: an entry that\n               simply omits the field is not disabled, and Reka's own prop does\n               not accept `undefined` as a way of saying so. -->\n          <DropdownMenuItem\n            v-else\n            :disabled=\"item.disabled ?? false\"\n            :class=\"\n              cn(\n                'flex cursor-pointer items-center justify-between gap-6 rounded-sm px-2 py-1.5 text-sm text-foreground outline-none',\n                'transition-colors duration-fast ease-out',\n                // The rows reveal in sequence as the menu opens, which reads as\n                // a list arriving rather than a block appearing. The hover\n                // colour transition above is a separate channel, so a row\n                // highlighted mid-reveal still responds at once.\n                'animate-fade-rise',\n                'data-[highlighted]:bg-subtle',\n                // The row's colour, not its alpha. A menu row is nothing but\n                // its label, and `data-[disabled]:opacity-40` composited that\n                // label to 2.40:1 on the popover and its shortcut to 1.79:1 —\n                // a disabled row a reader cannot make out tells them nothing\n                // about what is unavailable, which is the only thing it is\n                // there to say. Muted instead: 5.76:1, and a clear drop from\n                // the 15.46:1 an available row wears.\n                //\n                // It takes the danger colour with it, deliberately. An\n                // attribute selector outranks the plain `text-destructive-text`\n                // below whatever order Tailwind emits them in, and that is the\n                // right way round: red is a warning about an action, and there\n                // is no action here to warn about.\n                'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',\n                item.danger &&\n                  'text-destructive-text data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive-text',\n              )\n            \"\n            :style=\"{ animationDelay: listStaggerDelay(i) }\"\n            @select=\"choose(item)\"\n          >\n            <span>{{ item.label }}</span>\n            <span v-if=\"item.shortcut\" class=\"tabular text-micro text-muted-foreground\">\n              {{ item.shortcut }}\n            </span>\n          </DropdownMenuItem>\n        </template>\n      </DropdownMenuContent>\n    </DropdownMenuPortal>\n  </DropdownMenuRoot>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAwFA,MAAM,OAAO;;;;;;EAOb,SAAS,OAAO,MAA+B;GAC7C,IAAI,KAAK,YAAY,KAAK,UAAU,KAAA,GAAW;GAC/C,KAAK,UAAU,KAAK,KAAK;EAC3B;;GAIE,OAAA,UAAA,GAAA,YAuFmB,MAAA,gBAAA,GAvFnB,WAA0B,MAuFP,QAAA,CAvFe,CAAA;IAAA,MAAG,QAAA;IAAI,KAAE,QAAA;GAAG,CAAA,GAAA,EAAM,iBAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,eAAgB,MAAM,GAAA,CAAA,GAAA;IAG1F,SAAA,cAEsB,CAFtB,YAEsB,MAAA,mBAAA,GAAA,EAFD,YAAA,GAAQ,GAAA;KAC3B,SAAA,cAAuB,CAAvB,WAAuB,KAAA,QAAA,SAAA,CAAA,CAAA;;IAGzB,CAAA,GAAA,YA+EqB,MAAA,kBAAA,GAAA,MAAA;KA9EnB,SAAA,cA6EsB,CA7EtB,YA6EsB,MAAA,mBAAA,GAAA;MA5EnB,eAAa;MACd,OAAM;MACL,MAAM,QAAA,QAAI;MACV,OAAK,eAAa,MAAA,EAAA,CAAE,CAAA,yHAAA,0EAAA,CAAA;MAgBrB,OAAA,EAAA,oBAAA,sCAAA;;MAEU,SAAA,cAA0B,EAApC,UAAA,IAAA,GAAA,mBAsDW,UAAA,MAAA,WAtDmB,QAAA,QAAZ,MAAM,MAAC;OAAkB,OAAA,UAAA,GAAA,mBAAA,UAAA,EAAA,KAAA,EAAC,GAAA,CACb,KAAK,aAAlC,UAAA,GAAA,YAA2E,MAAA,qBAAA,GAAA;;QAA9B,OAAM;OAEtC,CAAA,KAAA,KAAK,WADlB,UAAA,GAAA,YAKoB,MAAA,iBAAA,GAAA;;QAHlB,OAAM;;QAEN,SAAA,cAAgB,CAAb,gBAAA,gBAAA,KAAK,KAAK,GAAA,CAAA,CAAA,CAAA;;OASf,GAAA,IAAA,MAAA,UAAA,GAAA,YAsCmB,MAAA,gBAAA,GAAA;;QApChB,UAAU,KAAK,YAAQ;QACvB,OAAK,eAAiB,MAAA,EAAA,CAAE,CAAA,sHAAA,4CAAA,qBAAA,gCAAA,6EAA2jD,KAAK,UAAA,qGAAA,CAAA;QA4BxlD,OAAK,eAAA,EAAA,gBAAoB,MAAA,gBAAA,CAAgB,CAAC,CAAC,EAAA,CAAA;QAC3C,WAAM,WAAE,OAAO,IAAI;;QAEpB,SAAA,cAA6B,CAA7B,mBAA6B,QAAA,MAAA,gBAApB,KAAK,KAAK,GAAA,CAAA,GACP,KAAK,YAAjB,UAAA,GAAA,mBAEO,QAFP,YAEO,gBADF,KAAK,QAAQ,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}

package/dist/primitives/editable/src/Editable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editable.js","names":[],"sources":["../../../../packages/primitives/editable/src/Editable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { EditableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it: a\n * consumer who never imports Editable ships none of these bytes.\n *\n * Exported so a host can build a partial vocabulary against the real thing\n * rather than a transcription of it.\n */\nexport const EDITABLE_LABELS: EditableLabels = {\n  edit: \"Edit\",\n  input: \"Editable text\",\n  submit: \"Save\",\n  cancel: \"Cancel\",\n  restored: ({ value }) => `Empty value discarded, ${value} restored`,\n};\n\n/**\n * What a pointer has to do to open the editor. The keyboard is deliberately\n * not on this axis — Enter and Space open it in all three, because a mode a\n * reader cannot reach by keyboard is a control they cannot use.\n *\n *   • `click` — one click on the text opens it. The default: it is the whole\n *     promise of edit-in-place, and the only mode a touch reader can perform.\n *   • `dblclick` — for a row or a cell where a single click already means\n *     something else, selecting it.\n *   • `focus` — landing on it opens it, so Tab walks straight into the\n *     editor. For a column of fields being filled in order, and the mode that\n *     makes Escape's restore-and-hand-focus-back path load-bearing.\n */\nexport type EditableActivationMode = \"click\" | \"dblclick\" | \"focus\";\n\n/**\n * What commits the edit.\n *\n *   • `both` — Enter, or focus leaving the control. The default: a reader who\n *     typed a value and clicked away meant to keep it.\n *   • `enter` — Enter alone; leaving discards, which suits an edit that is a\n *     deliberate act rather than an incidental one.\n *   • `blur` — leaving alone, for a control inside something that has its own\n *     Enter.\n *\n * Escape abandons under all three.\n */\nexport type EditableSubmitMode = \"blur\" | \"enter\" | \"both\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch, type ComponentPublicInstance } from \"vue\";\nimport {\n  EditableRoot,\n  EditableArea,\n  EditablePreview,\n  EditableInput,\n  EditableSubmitTrigger,\n  EditableCancelTrigger,\n} from \"reka-ui\";\nimport { Check, Pencil, X } from \"@lucide/vue\";\nimport { buttonVariants } from \"@ecoma-io/loom-button\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Editable — text that becomes an input where it stands: a record's title, a\n * name on a card, a cell in a table. It is the control that makes an\n * operations screen feel direct, because the value is edited where it is read\n * rather than in a dialog opened to hold one field.\n *\n * Reach for a [TextField](../TextField/TextField.vue) instead whenever the\n * value is being *entered* rather than corrected — a form is a set of empty\n * boxes and should look like one. This is for a value that already exists,\n * that is usually right, and that is occasionally wrong.\n *\n * **It takes no `size`, and that is the point.** Every other control in the\n * library picks a height off the shared scale; this one inherits the\n * typography around it, so an editable page title stays the size of a page\n * title and an editable table cell stays the size of a cell. What it pins\n * instead is that the two states are the same size as each other: the preview\n * and the editor are the only two children of one padded box, both single-line\n * and both inheriting that box's type, so the swap cannot move the row below\n * it. The box carries a transparent border at rest and a visible one while\n * editing — the same border width either way, for the same reason.\n *\n * **Escape restores and hands focus back.** Ending an edit hides the editor,\n * and a browser drops focus to `<body>` when the focused node goes away, so\n * without the hand-off a reader who abandoned an edit would lose their place\n * in the document. With `activationMode: \"focus\"` that hand-off would then\n * re-open the editor it just closed, which is why activation is Loom's rather\n * than Reka's here — the returning focus is suppressed exactly once, until the\n * reader leaves and comes back deliberately.\n *\n * **The model moves on submit, not on keystrokes.** `update:modelValue` fires\n * once, with the committed value, alongside `submit`; `cancel` fires when an\n * edit is abandoned. A control whose whole purpose is that an edit can be\n * taken back cannot publish every intermediate character as though it were\n * the value.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id\n * of its hint or error line, `required`, `invalid`, `disabled`, `readonly` and\n * the name the value is submitted under all arrive through `useFieldControl()`.\n * Every prop below still wins over the row when it is set, in both directions\n * — which is why the four booleans default to `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states, so the box has **three**\n * resting appearances rather than two. Read-only is a value on show: still\n * focusable, still copyable, still submitted, and lifted onto a fill with its\n * text at full strength. Disabled is unavailable, and drained a step further in\n * fill, in text colour and in border weight together. Three channels rather\n * than one is the point — see `areaClass`.\n *\n * Built on Reka UI's Editable, which owns the state machine — what is showing,\n * what the editor holds before it is committed, and what a dismiss means under\n * each submit mode.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The committed value. Pair with `@update:modelValue` for `v-model`. */\n    modelValue?: string;\n    /** Shown in place of an empty value, in both the preview and the editor. */\n    placeholder?: string;\n    /** What a pointer does to open the editor. The keyboard opens it in every mode. */\n    activationMode?: EditableActivationMode;\n    /** What commits the edit. Escape abandons it under all three. */\n    submitMode?: EditableSubmitMode;\n    /**\n     * Sizes the control to its own text and stacks the two states in one grid\n     * cell, for an editable sitting inline in a sentence rather than in a\n     * column. It measures the committed value, not what is being typed.\n     */\n    autoResize?: boolean;\n    /** The longest value the editor will accept, in characters. */\n    maxLength?: number;\n    /**\n     * Lets a submitted empty value through. Off by default: an empty submit\n     * restores the previous value and reports `cancel` instead, because the\n     * damage is asymmetric — a value wrongly kept is on screen and can be\n     * edited again, a title wrongly emptied is gone.\n     */\n    allowEmpty?: boolean;\n    /** Unavailable: the preview drops out of the tab order and refuses to open. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the value without allowing an edit, while staying focusable. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the value mandatory to assistive tech (`aria-required`). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`. Unset defers to a wrapping Field. */\n    name?: string;\n    /** The editor's accessible name, when no visible element already labels it. */\n    ariaLabel?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `EditableLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is `edit`, where a page of\n     * editables reads better as \"Rename\" or \"Correct\" than as the same verb\n     * five times.\n     */\n    labels?: LabelOverrides<EditableLabels>;\n  }>(),\n  {\n    activationMode: \"click\",\n    submitMode: \"both\",\n    autoResize: false,\n    allowEmpty: false,\n    // Not `false`, for any of the four. `false` is a caller saying \"this value\n    // is fine / available / editable even though its row is not\"; absent is a\n    // caller saying nothing, and only `undefined` survives to mean that past\n    // Vue's absent-Boolean-casts-to-false rule — see TextField.vue, which\n    // carries the full reasoning.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The committed value. Fires on submit only, never per keystroke. */\n  \"update:modelValue\": [value: string];\n  /** The edit was committed, with the value that was accepted. */\n  submit: [value: string];\n  /** The edit was abandoned — Escape, the cancel button, or a refused empty submit. */\n  cancel: [];\n}>();\n\ndefineOptions({ inheritAttrs: false });\n\n// `class` lands on the root rather than on the bordered box inside it: the\n// root is what participates in the caller's layout, and it holds the box and\n// the two commit controls beside it, so a caller's `w-64` has to size all\n// three. Everything else — `id`, `aria-describedby`, `aria-labelledby`,\n// `data-testid`, `autocomplete` — describes the *editor*, and lands there.\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\n// `id` and `aria-describedby` reach a bare control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  name: props.name,\n  disabled: props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"editable\", EDITABLE_LABELS, () => props.labels);\n\n// The value as this component knows it, which is also what Reka is fed. Two\n// things need it. A defined `model-value` is what puts Reka in controlled\n// mode, and controlled is what lets a submit be *refused* — Reka's own commit\n// then only announces the new value rather than adopting it, so the preview\n// keeps showing the old one with nothing to undo. And a host using this\n// without `v-model` still needs the value to move, which is what the\n// optimistic write in `onSubmit` is for.\nconst value = ref(props.modelValue ?? \"\");\nwatch(\n  () => props.modelValue,\n  (next) => {\n    // `undefined` is a host that never controlled the value, not a host\n    // clearing it — adopting it would blank the box on any unrelated re-render.\n    if (next !== undefined) value.value = next;\n  },\n);\n\n// Mirrors Reka's own `isEditing`, off the state event rather than out of the\n// slot, because the class bindings and the activation guard both need it in\n// the script half as well as in the template.\nconst editing = ref(false);\n\nconst previewRef = ref<ComponentPublicInstance | null>(null);\nconst rootRef = ref<ComponentPublicInstance | null>(null);\n\n// Reka's parts are components, so the only handle on their DOM node is `$el`,\n// which Vue types as `any`. Narrowing through `unknown` keeps that `any` from\n// spreading into everything it touches — and answers the SSR case honestly,\n// where there is no element at all.\nfunction elementOf(instance: ComponentPublicInstance | null): HTMLElement | null {\n  const el = instance?.$el as unknown;\n  return el instanceof HTMLElement ? el : null;\n}\n\n// Set only when focus was actually handed back to the preview, and cleared the\n// moment the reader leaves it. Without it, `activationMode: \"focus\"` would\n// read that hand-off as a fresh arrival and re-open the editor the reader just\n// escaped from — a control that cannot be abandoned, which is precisely the\n// trap Escape exists to avoid.\nlet suppressFocusActivation = false;\n\nfunction activate(edit: () => void): void {\n  if (field.disabled || field.readonly || editing.value) return;\n  edit();\n}\n\n// Reka's own activation is switched off in the template\n// (`activation-mode=\"none\"`) and rebuilt in these three handlers, rather than\n// passed through. Two things need that. Reka has no click mode at all and no\n// keyboard path on its preview, so two of the three modes this component\n// publishes would be unreachable without a pointer. And its focus mode cannot\n// tell a reader arriving on the control from the focus this component hands\n// back after an Escape — which would re-open the editor that Escape just\n// abandoned, forever.\n//\n// A `<button>` turns Enter and Space into a click carrying `detail === 0`,\n// which is what lets one handler serve the keyboard in every activation mode:\n// `dblclick` cannot be typed, and `focus` must not be the only way in for a\n// reader who arrived on the control without meaning to edit yet. `detail` is\n// the same signal Pagination reads to tell a synthesised click from a pointer\n// one.\nfunction onPreviewClick(event: MouseEvent, edit: () => void): void {\n  if (props.activationMode === \"dblclick\" && event.detail !== 0) return;\n  activate(edit);\n}\n\nfunction onPreviewDoubleClick(edit: () => void): void {\n  if (props.activationMode !== \"dblclick\") return;\n  activate(edit);\n}\n\nfunction onPreviewFocus(edit: () => void): void {\n  if (props.activationMode !== \"focus\" || suppressFocusActivation) return;\n  activate(edit);\n}\n\nfunction onPreviewBlur(): void {\n  suppressFocusActivation = false;\n}\n\n// The editor is hidden the instant an edit ends, and a browser drops focus to\n// `<body>` when the focused node goes away — so a reader who pressed Escape or\n// Enter would be left with no position in the document at all.\n//\n// Only focus that was actually lost is rescued. A submit caused by clicking\n// somewhere else has already put the reader where they meant to be, and\n// stealing focus back from them would be the worse bug; the same reasoning,\n// and the same `<body>` check, as Pagination's edge-control hand-off. jsdom\n// leaves focus on the hidden node rather than dropping it, and a click on the\n// commit button leaves it on a button that is about to be hidden too, so\n// anything still inside this control counts as lost.\nfunction restoreFocus(): void {\n  void nextTick(() => {\n    const preview = elementOf(previewRef.value);\n    const root = elementOf(rootRef.value);\n    if (preview === null) return;\n\n    const active = document.activeElement;\n    const lost = active === null || active === document.body || (root?.contains(active) ?? false);\n    if (!lost) return;\n\n    suppressFocusActivation = true;\n    preview.focus();\n  });\n}\n\nfunction onState(state: \"edit\" | \"submit\" | \"cancel\"): void {\n  editing.value = state === \"edit\";\n  if (state === \"edit\") return;\n  if (state === \"cancel\") emit(\"cancel\");\n  restoreFocus();\n}\n\n// The refusal, held for one announcement rather than derived, so the live\n// region says something only when a submit was actually turned away — and is\n// cleared when the next edit opens, so a second identical refusal is still a\n// change to the region and still gets announced.\nconst restored = ref(\"\");\nwatch(editing, (isEditing) => {\n  if (isEditing) restored.value = \"\";\n});\n\n// Reka's `submit` is an announcement rather than a request — in controlled\n// mode it has already told us what it would like the value to be and left the\n// deciding here, which is what makes the empty case answerable at all.\nfunction onSubmit(submitted: string | null | undefined): void {\n  const next = submitted ?? \"\";\n\n  // An empty submit is the one genuinely ambiguous outcome: a reader who\n  // cleared the box and pressed Enter may have meant to blank the value, and\n  // under `submitMode: \"blur\"` may have meant nothing at all. Loom restores\n  // rather than clears, and `allowEmpty` is how a field that can legitimately\n  // be emptied says so. `restored` announces it, because a refusal that only\n  // shows up as text snapping back is a refusal a screen reader never hears.\n  if (next === \"\" && !props.allowEmpty) {\n    restored.value = text.value.restored({ value: value.value });\n    emit(\"cancel\");\n    return;\n  }\n\n  // Optimistic only while uncontrolled. With a `modelValue` prop the host owns\n  // the value, and echoing it here would show a value they may be about to\n  // reject — the prop watcher above is what applies the one they accept.\n  if (props.modelValue === undefined) value.value = next;\n  emit(\"update:modelValue\", next);\n  emit(\"submit\", next);\n}\n\n// A read-only preview is not a control, so it is not rendered as one: a\n// `<button>` that refuses to act is worse than plain text. It keeps a\n// `tabindex` of its own instead — a read-only value is one a reader may reach\n// and copy, the same contract TextField's read-only input keeps — while the\n// button state drops Reka's hardcoded `tabindex=\"0\"` entirely, because a\n// `<button>` is focusable without it and a *disabled* one carrying it is\n// focusable when it should not be.\nconst previewAs = computed(() => (field.readonly ? \"span\" : \"button\"));\n\nconst rootProps = computed(() => optional({ name: field.name, maxLength: props.maxLength }));\n\n// `name` is dropped from the bag before it reaches the editor. Reka already\n// renders a hidden input under that name for any Editable inside a `<form>`,\n// and an editor carrying it as well would post the field twice — once with the\n// committed value and once with whatever the box held. Removed from a copy\n// rather than listed positively, so a key added to the resolved bag later\n// reaches this input without anyone remembering to come back here.\nconst editorAttrs = computed(() => {\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  return aria;\n});\n\n// `aria-label` outranks a `<label for>` in the accessible-name order, so a\n// generic fallback would silently replace the name a Field row already gives\n// the editor. It is supplied only where nothing else names it at all — which\n// is also the state Reka would otherwise fill with \"editable input\".\nconst editorLabel = computed<string | undefined>(() => {\n  if (props.ariaLabel !== undefined) return props.ariaLabel;\n  if (field.id !== undefined) return undefined;\n  if (attrs[\"aria-label\"] !== undefined || attrs[\"aria-labelledby\"] !== undefined) return undefined;\n  return text.value.input;\n});\n\nconst areaClass = computed(() =>\n  cn(\n    // One box, two children. The border is present in both states and only\n    // changes colour, the padding never changes, and the floor height keeps an\n    // empty value from collapsing the row it sits in — between them, nothing\n    // below this control moves when it switches.\n    \"flex min-h-9 min-w-0 items-center rounded-md border border-transparent px-2 py-1\",\n    // A control that sizes to its own text cannot also fill its parent: under\n    // `autoResize` Reka makes this box an `inline-grid` measured by the two\n    // states stacked inside it, and a width of 100% would measure the row\n    // instead.\n    props.autoResize ? \"w-auto\" : \"w-full\",\n    \"text-inherit transition-[color,background-color,border-color,box-shadow] duration-fast ease-out\",\n    // Rim-lit at rest, the weave blooms on focus (Signature law), and it blooms\n    // for the preview as much as for the editor: at rest the preview is the\n    // focusable node, and a control a reader can tab to has to show it.\n    \"focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring\",\n    !field.invalid && \"focus-within:shadow-halo\",\n    editing.value && \"border-input bg-background\",\n    // The affordance for a pointer, since the resting state is deliberately\n    // just text: the box lights under the cursor and the caret says the text\n    // can be typed into. Never the only signal — the preview announces itself,\n    // and carries a glyph.\n    !editing.value && !field.disabled && !field.readonly && \"cursor-text hover:bg-subtle\",\n    // Lifted rather than dimmed, exactly as a read-only text field is: the\n    // value is the whole reason the control is on the page, so it stays at\n    // full contrast — 13.45:1 over this fill — whether or not it can be\n    // changed. The rim comes up with it, from the resting `transparent` to\n    // `input`: at rest this control is deliberately just text, so without a\n    // border there is nothing but hue to say the value is on show, and the box\n    // was already reserving the width for one.\n    field.readonly && \"border-input bg-subtle\",\n    // Drained, not faded, and a step further down all three channels: the fill\n    // to `muted`, the text to `muted-foreground` (4.67:1 over it) and the rim\n    // to the lighter `border`. Half-opacity text on this box measures under\n    // 4.5:1, and a value nobody can read is worse than one nobody can edit.\n    //\n    // Read-only and disabled used to share `bg-muted` and part on the text\n    // colour alone — a distinction made in hue and nothing else, which is the\n    // one a reader with a colour deficiency does not receive.\n    field.disabled && \"cursor-not-allowed border-border bg-muted text-muted-foreground\",\n    // The same appearance, reached from the other direction: a\n    // `<fieldset disabled>` above this control disables the preview `<button>`\n    // and the `<input>` behind it natively — both are on the list a fieldset\n    // reaches — and never touches `field.disabled`, so the rule above cannot\n    // fire and the value rendered byte-identical to an editable one.\n    //\n    // `in-[fieldset:disabled]:` reads the attribute that did the disabling, so\n    // the fill and the native inertness cannot disagree. See TextField.vue for\n    // why it is preferred to a `has-[:disabled]:` rule reading this box's own\n    // contents.\n    \"in-[fieldset:disabled]:cursor-not-allowed in-[fieldset:disabled]:bg-muted in-[fieldset:disabled]:text-muted-foreground\",\n    // Gated for the reason the rule below is ordered: Tailwind emits the\n    // ancestor half of `in-*` inside `:where()`, so this carries no more\n    // specificity than `border-destructive` and would win on emission order\n    // alone.\n    !field.invalid && \"in-[fieldset:disabled]:border-border\",\n    // Last of the rules naming a border colour: `cn()` resolves one by\n    // whichever class it saw last, so a control both in error and unavailable\n    // would lose its destructive rim if this sat above them.\n    field.invalid && \"border-destructive focus-within:outline-destructive\",\n  ),\n);\n\n// The submit/cancel triggers are glyph-only, so the drained treatment they\n// take is the transparent control's: the neutral well under a glyph that is\n// already `text-muted-foreground`. `opacity-50` used to fade that glyph below\n// contrast — the failure Button records for its own dim — and the native\n// `disabled` attribute these Reka triggers carry already tells assistive tech.\nconst triggerClass = cn(\n  buttonVariants({ variant: \"ghost\", size: \"icon-sm\" }),\n  \"disabled:cursor-not-allowed disabled:bg-muted disabled:shadow-none\",\n);\n</script>\n\n<template>\n  <EditableRoot\n    ref=\"rootRef\"\n    v-slot=\"{ edit }\"\n    v-bind=\"rootProps\"\n    :model-value=\"value\"\n    :placeholder=\"placeholder ?? ''\"\n    activation-mode=\"none\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :required=\"field.required\"\n    :submit-mode=\"submitMode\"\n    :auto-resize=\"autoResize\"\n    :data-editing=\"editing || undefined\"\n    :data-invalid=\"field.invalid || undefined\"\n    :data-readonly=\"field.readonly || undefined\"\n    :data-disabled=\"field.disabled || undefined\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-1',\n        autoResize ? 'w-auto align-baseline' : 'w-full',\n        attrs.class as string,\n      )\n    \"\n    @update:state=\"onState\"\n    @submit=\"onSubmit\"\n  >\n    <EditableArea :class=\"areaClass\">\n      <!-- The preview is the control, and Reka's `EditableEditTrigger` is\n           deliberately not rendered beside it: a second button doing the same\n           job costs a second Tab stop on one value, and its click handler\n           fires in every activation mode, which would make `dblclick` and\n           `focus` lies. A real `<button>` rather than a `role`, so Enter and\n           Space are the browser's job and the affordance survives\n           forced-colors mode. -->\n      <EditablePreview\n        ref=\"previewRef\"\n        :as=\"previewAs\"\n        :type=\"field.readonly ? undefined : 'button'\"\n        :tabindex=\"field.readonly ? 0 : undefined\"\n        :disabled=\"!field.readonly && field.disabled ? true : undefined\"\n        :aria-describedby=\"field.attrs['aria-describedby']\"\n        :aria-invalid=\"field.attrs['aria-invalid']\"\n        class=\"flex min-w-0 flex-1 items-center gap-1.5 text-start outline-none\"\n        @click=\"(event: MouseEvent) => onPreviewClick(event, edit)\"\n        @dblclick=\"() => onPreviewDoubleClick(edit)\"\n        @focus=\"() => onPreviewFocus(edit)\"\n        @blur=\"onPreviewBlur\"\n      >\n        <!-- Single-line and truncated, because the editor it swaps with is a\n             single-line input: a preview that wrapped would be a taller box\n             than the thing replacing it. -->\n        <span :class=\"cn('truncate', !value && 'text-muted-foreground')\">\n          {{ value || placeholder }}\n        </span>\n        <template v-if=\"!field.readonly\">\n          <!-- The affordance for a sighted reader, and the counterpart to the\n               span below it: the resting state is text, so something has to\n               say it is more than text. Hidden from assistive tech, which is\n               told the same thing in words. -->\n          <Pencil class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n          <!-- The whole accessibility problem of edit-in-place, in one span.\n               The value reads first so it stays the start of the accessible\n               name (WCAG 2.5.3, and what a voice-control reader says out\n               loud); the verb follows, so the text announces as something\n               that can be acted on rather than as prose. -->\n          <span class=\"sr-only\">{{ text.edit }}</span>\n        </template>\n      </EditablePreview>\n\n      <EditableInput\n        v-bind=\"{ ...inputAttrs, ...editorAttrs }\"\n        :aria-label=\"editorLabel\"\n        class=\"min-w-0 flex-1 bg-transparent text-inherit outline-none placeholder:text-muted-foreground\"\n      />\n    </EditableArea>\n\n    <!-- Both triggers hide themselves while the preview is showing, so there\n         is nothing to guard here. They exist for the reader who has no way to\n         know that Enter commits and Escape abandons — an invisible keyboard\n         contract is not an affordance. -->\n    <EditableSubmitTrigger :aria-label=\"text.submit\" :class=\"triggerClass\">\n      <Check class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </EditableSubmitTrigger>\n    <EditableCancelTrigger :aria-label=\"text.cancel\" :class=\"triggerClass\">\n      <X class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </EditableCancelTrigger>\n\n    <!-- A refused empty submit changes the screen without moving focus or\n         opening anything, which a screen reader would otherwise never\n         announce. Empty until there is something to say, so it never repeats\n         itself on an unrelated re-render. -->\n    <span role=\"status\" class=\"sr-only\">{{ restored }}</span>\n  </EditableRoot>\n</template>\n"],"mappings":""}

package/dist/primitives/editable/src/Editable.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Editable.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../packages/primitives/editable/src/Editable.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { EditableLabels } from \"@ecoma-io/loom-labels\";\n\n/**\n\n/**\n * Loom's English, co-located with the component so it tree-shakes with it: a\n * consumer who never imports Editable ships none of these bytes.\n *\n * Exported so a host can build a partial vocabulary against the real thing\n * rather than a transcription of it.\n */\nexport const EDITABLE_LABELS: EditableLabels = {\n  edit: \"Edit\",\n  input: \"Editable text\",\n  submit: \"Save\",\n  cancel: \"Cancel\",\n  restored: ({ value }) => `Empty value discarded, ${value} restored`,\n};\n\n/**\n * What a pointer has to do to open the editor. The keyboard is deliberately\n * not on this axis — Enter and Space open it in all three, because a mode a\n * reader cannot reach by keyboard is a control they cannot use.\n *\n *   • `click` — one click on the text opens it. The default: it is the whole\n *     promise of edit-in-place, and the only mode a touch reader can perform.\n *   • `dblclick` — for a row or a cell where a single click already means\n *     something else, selecting it.\n *   • `focus` — landing on it opens it, so Tab walks straight into the\n *     editor. For a column of fields being filled in order, and the mode that\n *     makes Escape's restore-and-hand-focus-back path load-bearing.\n */\nexport type EditableActivationMode = \"click\" | \"dblclick\" | \"focus\";\n\n/**\n * What commits the edit.\n *\n *   • `both` — Enter, or focus leaving the control. The default: a reader who\n *     typed a value and clicked away meant to keep it.\n *   • `enter` — Enter alone; leaving discards, which suits an edit that is a\n *     deliberate act rather than an incidental one.\n *   • `blur` — leaving alone, for a control inside something that has its own\n *     Enter.\n *\n * Escape abandons under all three.\n */\nexport type EditableSubmitMode = \"blur\" | \"enter\" | \"both\";\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch, type ComponentPublicInstance } from \"vue\";\nimport {\n  EditableRoot,\n  EditableArea,\n  EditablePreview,\n  EditableInput,\n  EditableSubmitTrigger,\n  EditableCancelTrigger,\n} from \"reka-ui\";\nimport { Check, Pencil, X } from \"@lucide/vue\";\nimport { buttonVariants } from \"@ecoma-io/loom-button\";\nimport { cn } from \"@ecoma-io/loom-core\";\nimport { optional } from \"@ecoma-io/loom-core\";\nimport { useSplitAttrs } from \"@ecoma-io/loom-core\";\nimport { useFieldControl } from \"@ecoma-io/loom-labels\";\nimport { useLabels, type LabelOverrides } from \"@ecoma-io/loom-labels\";\n\n/**\n * Editable — text that becomes an input where it stands: a record's title, a\n * name on a card, a cell in a table. It is the control that makes an\n * operations screen feel direct, because the value is edited where it is read\n * rather than in a dialog opened to hold one field.\n *\n * Reach for a [TextField](../TextField/TextField.vue) instead whenever the\n * value is being *entered* rather than corrected — a form is a set of empty\n * boxes and should look like one. This is for a value that already exists,\n * that is usually right, and that is occasionally wrong.\n *\n * **It takes no `size`, and that is the point.** Every other control in the\n * library picks a height off the shared scale; this one inherits the\n * typography around it, so an editable page title stays the size of a page\n * title and an editable table cell stays the size of a cell. What it pins\n * instead is that the two states are the same size as each other: the preview\n * and the editor are the only two children of one padded box, both single-line\n * and both inheriting that box's type, so the swap cannot move the row below\n * it. The box carries a transparent border at rest and a visible one while\n * editing — the same border width either way, for the same reason.\n *\n * **Escape restores and hands focus back.** Ending an edit hides the editor,\n * and a browser drops focus to `<body>` when the focused node goes away, so\n * without the hand-off a reader who abandoned an edit would lose their place\n * in the document. With `activationMode: \"focus\"` that hand-off would then\n * re-open the editor it just closed, which is why activation is Loom's rather\n * than Reka's here — the returning focus is suppressed exactly once, until the\n * reader leaves and comes back deliberately.\n *\n * **The model moves on submit, not on keystrokes.** `update:modelValue` fires\n * once, with the committed value, alongside `submit`; `cancel` fires when an\n * edit is abandoned. A control whose whole purpose is that an edit can be\n * taken back cannot publish every intermediate character as though it were\n * the value.\n *\n * Inside a [Field](../Field/Field.vue) it wires itself: the row's id, the id\n * of its hint or error line, `required`, `invalid`, `disabled`, `readonly` and\n * the name the value is submitted under all arrive through `useFieldControl()`.\n * Every prop below still wins over the row when it is set, in both directions\n * — which is why the four booleans default to `undefined` rather than `false`.\n *\n * `readonly` and `disabled` are different states, so the box has **three**\n * resting appearances rather than two. Read-only is a value on show: still\n * focusable, still copyable, still submitted, and lifted onto a fill with its\n * text at full strength. Disabled is unavailable, and drained a step further in\n * fill, in text colour and in border weight together. Three channels rather\n * than one is the point — see `areaClass`.\n *\n * Built on Reka UI's Editable, which owns the state machine — what is showing,\n * what the editor holds before it is committed, and what a dismiss means under\n * each submit mode.\n */\nconst props = withDefaults(\n  defineProps<{\n    /** The committed value. Pair with `@update:modelValue` for `v-model`. */\n    modelValue?: string;\n    /** Shown in place of an empty value, in both the preview and the editor. */\n    placeholder?: string;\n    /** What a pointer does to open the editor. The keyboard opens it in every mode. */\n    activationMode?: EditableActivationMode;\n    /** What commits the edit. Escape abandons it under all three. */\n    submitMode?: EditableSubmitMode;\n    /**\n     * Sizes the control to its own text and stacks the two states in one grid\n     * cell, for an editable sitting inline in a sentence rather than in a\n     * column. It measures the committed value, not what is being typed.\n     */\n    autoResize?: boolean;\n    /** The longest value the editor will accept, in characters. */\n    maxLength?: number;\n    /**\n     * Lets a submitted empty value through. Off by default: an empty submit\n     * restores the previous value and reports `cancel` instead, because the\n     * damage is asymmetric — a value wrongly kept is on screen and can be\n     * edited again, a title wrongly emptied is gone.\n     */\n    allowEmpty?: boolean;\n    /** Unavailable: the preview drops out of the tab order and refuses to open. Unset defers to a wrapping Field. */\n    disabled?: boolean | undefined;\n    /** Shows the value without allowing an edit, while staying focusable. Unset defers to a wrapping Field. */\n    readonly?: boolean | undefined;\n    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */\n    invalid?: boolean | undefined;\n    /** Marks the value mandatory to assistive tech (`aria-required`). Unset defers to a wrapping Field. */\n    required?: boolean | undefined;\n    /** The field name for a native form post or `FormData`. Unset defers to a wrapping Field. */\n    name?: string;\n    /** The editor's accessible name, when no visible element already labels it. */\n    ariaLabel?: string;\n    /**\n     * Names for everything this control says out loud, as any subset of\n     * `EditableLabels` — the rest stay as the host's `provideLoomLabels`\n     * vocabulary left them, and then as Loom's English.\n     *\n     * This is the per-instance correction, not the place to localise an\n     * application: the case it exists for is `edit`, where a page of\n     * editables reads better as \"Rename\" or \"Correct\" than as the same verb\n     * five times.\n     */\n    labels?: LabelOverrides<EditableLabels>;\n  }>(),\n  {\n    activationMode: \"click\",\n    submitMode: \"both\",\n    autoResize: false,\n    allowEmpty: false,\n    // Not `false`, for any of the four. `false` is a caller saying \"this value\n    // is fine / available / editable even though its row is not\"; absent is a\n    // caller saying nothing, and only `undefined` survives to mean that past\n    // Vue's absent-Boolean-casts-to-false rule — see TextField.vue, which\n    // carries the full reasoning.\n    disabled: undefined,\n    readonly: undefined,\n    invalid: undefined,\n    required: undefined,\n  },\n);\n\nconst emit = defineEmits<{\n  /** The committed value. Fires on submit only, never per keystroke. */\n  \"update:modelValue\": [value: string];\n  /** The edit was committed, with the value that was accepted. */\n  submit: [value: string];\n  /** The edit was abandoned — Escape, the cancel button, or a refused empty submit. */\n  cancel: [];\n}>();\n\ndefineOptions({ inheritAttrs: false });\n\n// `class` lands on the root rather than on the bordered box inside it: the\n// root is what participates in the caller's layout, and it holds the box and\n// the two commit controls beside it, so a caller's `w-64` has to size all\n// three. Everything else — `id`, `aria-describedby`, `aria-labelledby`,\n// `data-testid`, `autocomplete` — describes the *editor*, and lands there.\nconst { attrs, rest: inputAttrs } = useSplitAttrs();\n\n// `id` and `aria-describedby` reach a bare control as fallthrough attrs rather\n// than props, so they are read off `attrs` and handed in as this caller's own\n// values — a caller who sets either still beats the row, and the row's\n// description is merged into theirs rather than replacing it.\nconst field = useFieldControl(() => ({\n  id: attrs.id as string | undefined,\n  describedBy: attrs[\"aria-describedby\"] as string | undefined,\n  name: props.name,\n  disabled: props.disabled,\n  readonly: props.readonly,\n  invalid: props.invalid,\n  required: props.required,\n}));\n\n// `text`, not `labels`: the prop of that name is one of the three sources this\n// resolves, and a template reading the raw prop would be reading the overrides\n// rather than the answer.\nconst text = useLabels(\"editable\", EDITABLE_LABELS, () => props.labels);\n\n// The value as this component knows it, which is also what Reka is fed. Two\n// things need it. A defined `model-value` is what puts Reka in controlled\n// mode, and controlled is what lets a submit be *refused* — Reka's own commit\n// then only announces the new value rather than adopting it, so the preview\n// keeps showing the old one with nothing to undo. And a host using this\n// without `v-model` still needs the value to move, which is what the\n// optimistic write in `onSubmit` is for.\nconst value = ref(props.modelValue ?? \"\");\nwatch(\n  () => props.modelValue,\n  (next) => {\n    // `undefined` is a host that never controlled the value, not a host\n    // clearing it — adopting it would blank the box on any unrelated re-render.\n    if (next !== undefined) value.value = next;\n  },\n);\n\n// Mirrors Reka's own `isEditing`, off the state event rather than out of the\n// slot, because the class bindings and the activation guard both need it in\n// the script half as well as in the template.\nconst editing = ref(false);\n\nconst previewRef = ref<ComponentPublicInstance | null>(null);\nconst rootRef = ref<ComponentPublicInstance | null>(null);\n\n// Reka's parts are components, so the only handle on their DOM node is `$el`,\n// which Vue types as `any`. Narrowing through `unknown` keeps that `any` from\n// spreading into everything it touches — and answers the SSR case honestly,\n// where there is no element at all.\nfunction elementOf(instance: ComponentPublicInstance | null): HTMLElement | null {\n  const el = instance?.$el as unknown;\n  return el instanceof HTMLElement ? el : null;\n}\n\n// Set only when focus was actually handed back to the preview, and cleared the\n// moment the reader leaves it. Without it, `activationMode: \"focus\"` would\n// read that hand-off as a fresh arrival and re-open the editor the reader just\n// escaped from — a control that cannot be abandoned, which is precisely the\n// trap Escape exists to avoid.\nlet suppressFocusActivation = false;\n\nfunction activate(edit: () => void): void {\n  if (field.disabled || field.readonly || editing.value) return;\n  edit();\n}\n\n// Reka's own activation is switched off in the template\n// (`activation-mode=\"none\"`) and rebuilt in these three handlers, rather than\n// passed through. Two things need that. Reka has no click mode at all and no\n// keyboard path on its preview, so two of the three modes this component\n// publishes would be unreachable without a pointer. And its focus mode cannot\n// tell a reader arriving on the control from the focus this component hands\n// back after an Escape — which would re-open the editor that Escape just\n// abandoned, forever.\n//\n// A `<button>` turns Enter and Space into a click carrying `detail === 0`,\n// which is what lets one handler serve the keyboard in every activation mode:\n// `dblclick` cannot be typed, and `focus` must not be the only way in for a\n// reader who arrived on the control without meaning to edit yet. `detail` is\n// the same signal Pagination reads to tell a synthesised click from a pointer\n// one.\nfunction onPreviewClick(event: MouseEvent, edit: () => void): void {\n  if (props.activationMode === \"dblclick\" && event.detail !== 0) return;\n  activate(edit);\n}\n\nfunction onPreviewDoubleClick(edit: () => void): void {\n  if (props.activationMode !== \"dblclick\") return;\n  activate(edit);\n}\n\nfunction onPreviewFocus(edit: () => void): void {\n  if (props.activationMode !== \"focus\" || suppressFocusActivation) return;\n  activate(edit);\n}\n\nfunction onPreviewBlur(): void {\n  suppressFocusActivation = false;\n}\n\n// The editor is hidden the instant an edit ends, and a browser drops focus to\n// `<body>` when the focused node goes away — so a reader who pressed Escape or\n// Enter would be left with no position in the document at all.\n//\n// Only focus that was actually lost is rescued. A submit caused by clicking\n// somewhere else has already put the reader where they meant to be, and\n// stealing focus back from them would be the worse bug; the same reasoning,\n// and the same `<body>` check, as Pagination's edge-control hand-off. jsdom\n// leaves focus on the hidden node rather than dropping it, and a click on the\n// commit button leaves it on a button that is about to be hidden too, so\n// anything still inside this control counts as lost.\nfunction restoreFocus(): void {\n  void nextTick(() => {\n    const preview = elementOf(previewRef.value);\n    const root = elementOf(rootRef.value);\n    if (preview === null) return;\n\n    const active = document.activeElement;\n    const lost = active === null || active === document.body || (root?.contains(active) ?? false);\n    if (!lost) return;\n\n    suppressFocusActivation = true;\n    preview.focus();\n  });\n}\n\nfunction onState(state: \"edit\" | \"submit\" | \"cancel\"): void {\n  editing.value = state === \"edit\";\n  if (state === \"edit\") return;\n  if (state === \"cancel\") emit(\"cancel\");\n  restoreFocus();\n}\n\n// The refusal, held for one announcement rather than derived, so the live\n// region says something only when a submit was actually turned away — and is\n// cleared when the next edit opens, so a second identical refusal is still a\n// change to the region and still gets announced.\nconst restored = ref(\"\");\nwatch(editing, (isEditing) => {\n  if (isEditing) restored.value = \"\";\n});\n\n// Reka's `submit` is an announcement rather than a request — in controlled\n// mode it has already told us what it would like the value to be and left the\n// deciding here, which is what makes the empty case answerable at all.\nfunction onSubmit(submitted: string | null | undefined): void {\n  const next = submitted ?? \"\";\n\n  // An empty submit is the one genuinely ambiguous outcome: a reader who\n  // cleared the box and pressed Enter may have meant to blank the value, and\n  // under `submitMode: \"blur\"` may have meant nothing at all. Loom restores\n  // rather than clears, and `allowEmpty` is how a field that can legitimately\n  // be emptied says so. `restored` announces it, because a refusal that only\n  // shows up as text snapping back is a refusal a screen reader never hears.\n  if (next === \"\" && !props.allowEmpty) {\n    restored.value = text.value.restored({ value: value.value });\n    emit(\"cancel\");\n    return;\n  }\n\n  // Optimistic only while uncontrolled. With a `modelValue` prop the host owns\n  // the value, and echoing it here would show a value they may be about to\n  // reject — the prop watcher above is what applies the one they accept.\n  if (props.modelValue === undefined) value.value = next;\n  emit(\"update:modelValue\", next);\n  emit(\"submit\", next);\n}\n\n// A read-only preview is not a control, so it is not rendered as one: a\n// `<button>` that refuses to act is worse than plain text. It keeps a\n// `tabindex` of its own instead — a read-only value is one a reader may reach\n// and copy, the same contract TextField's read-only input keeps — while the\n// button state drops Reka's hardcoded `tabindex=\"0\"` entirely, because a\n// `<button>` is focusable without it and a *disabled* one carrying it is\n// focusable when it should not be.\nconst previewAs = computed(() => (field.readonly ? \"span\" : \"button\"));\n\nconst rootProps = computed(() => optional({ name: field.name, maxLength: props.maxLength }));\n\n// `name` is dropped from the bag before it reaches the editor. Reka already\n// renders a hidden input under that name for any Editable inside a `<form>`,\n// and an editor carrying it as well would post the field twice — once with the\n// committed value and once with whatever the box held. Removed from a copy\n// rather than listed positively, so a key added to the resolved bag later\n// reaches this input without anyone remembering to come back here.\nconst editorAttrs = computed(() => {\n  const aria: Record<string, unknown> = { ...field.attrs };\n  delete aria.name;\n  return aria;\n});\n\n// `aria-label` outranks a `<label for>` in the accessible-name order, so a\n// generic fallback would silently replace the name a Field row already gives\n// the editor. It is supplied only where nothing else names it at all — which\n// is also the state Reka would otherwise fill with \"editable input\".\nconst editorLabel = computed<string | undefined>(() => {\n  if (props.ariaLabel !== undefined) return props.ariaLabel;\n  if (field.id !== undefined) return undefined;\n  if (attrs[\"aria-label\"] !== undefined || attrs[\"aria-labelledby\"] !== undefined) return undefined;\n  return text.value.input;\n});\n\nconst areaClass = computed(() =>\n  cn(\n    // One box, two children. The border is present in both states and only\n    // changes colour, the padding never changes, and the floor height keeps an\n    // empty value from collapsing the row it sits in — between them, nothing\n    // below this control moves when it switches.\n    \"flex min-h-9 min-w-0 items-center rounded-md border border-transparent px-2 py-1\",\n    // A control that sizes to its own text cannot also fill its parent: under\n    // `autoResize` Reka makes this box an `inline-grid` measured by the two\n    // states stacked inside it, and a width of 100% would measure the row\n    // instead.\n    props.autoResize ? \"w-auto\" : \"w-full\",\n    \"text-inherit transition-[color,background-color,border-color,box-shadow] duration-fast ease-out\",\n    // Rim-lit at rest, the weave blooms on focus (Signature law), and it blooms\n    // for the preview as much as for the editor: at rest the preview is the\n    // focusable node, and a control a reader can tab to has to show it.\n    \"focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring\",\n    !field.invalid && \"focus-within:shadow-halo\",\n    editing.value && \"border-input bg-background\",\n    // The affordance for a pointer, since the resting state is deliberately\n    // just text: the box lights under the cursor and the caret says the text\n    // can be typed into. Never the only signal — the preview announces itself,\n    // and carries a glyph.\n    !editing.value && !field.disabled && !field.readonly && \"cursor-text hover:bg-subtle\",\n    // Lifted rather than dimmed, exactly as a read-only text field is: the\n    // value is the whole reason the control is on the page, so it stays at\n    // full contrast — 13.45:1 over this fill — whether or not it can be\n    // changed. The rim comes up with it, from the resting `transparent` to\n    // `input`: at rest this control is deliberately just text, so without a\n    // border there is nothing but hue to say the value is on show, and the box\n    // was already reserving the width for one.\n    field.readonly && \"border-input bg-subtle\",\n    // Drained, not faded, and a step further down all three channels: the fill\n    // to `muted`, the text to `muted-foreground` (4.67:1 over it) and the rim\n    // to the lighter `border`. Half-opacity text on this box measures under\n    // 4.5:1, and a value nobody can read is worse than one nobody can edit.\n    //\n    // Read-only and disabled used to share `bg-muted` and part on the text\n    // colour alone — a distinction made in hue and nothing else, which is the\n    // one a reader with a colour deficiency does not receive.\n    field.disabled && \"cursor-not-allowed border-border bg-muted text-muted-foreground\",\n    // The same appearance, reached from the other direction: a\n    // `<fieldset disabled>` above this control disables the preview `<button>`\n    // and the `<input>` behind it natively — both are on the list a fieldset\n    // reaches — and never touches `field.disabled`, so the rule above cannot\n    // fire and the value rendered byte-identical to an editable one.\n    //\n    // `in-[fieldset:disabled]:` reads the attribute that did the disabling, so\n    // the fill and the native inertness cannot disagree. See TextField.vue for\n    // why it is preferred to a `has-[:disabled]:` rule reading this box's own\n    // contents.\n    \"in-[fieldset:disabled]:cursor-not-allowed in-[fieldset:disabled]:bg-muted in-[fieldset:disabled]:text-muted-foreground\",\n    // Gated for the reason the rule below is ordered: Tailwind emits the\n    // ancestor half of `in-*` inside `:where()`, so this carries no more\n    // specificity than `border-destructive` and would win on emission order\n    // alone.\n    !field.invalid && \"in-[fieldset:disabled]:border-border\",\n    // Last of the rules naming a border colour: `cn()` resolves one by\n    // whichever class it saw last, so a control both in error and unavailable\n    // would lose its destructive rim if this sat above them.\n    field.invalid && \"border-destructive focus-within:outline-destructive\",\n  ),\n);\n\n// The submit/cancel triggers are glyph-only, so the drained treatment they\n// take is the transparent control's: the neutral well under a glyph that is\n// already `text-muted-foreground`. `opacity-50` used to fade that glyph below\n// contrast — the failure Button records for its own dim — and the native\n// `disabled` attribute these Reka triggers carry already tells assistive tech.\nconst triggerClass = cn(\n  buttonVariants({ variant: \"ghost\", size: \"icon-sm\" }),\n  \"disabled:cursor-not-allowed disabled:bg-muted disabled:shadow-none\",\n);\n</script>\n\n<template>\n  <EditableRoot\n    ref=\"rootRef\"\n    v-slot=\"{ edit }\"\n    v-bind=\"rootProps\"\n    :model-value=\"value\"\n    :placeholder=\"placeholder ?? ''\"\n    activation-mode=\"none\"\n    :disabled=\"field.disabled\"\n    :readonly=\"field.readonly\"\n    :required=\"field.required\"\n    :submit-mode=\"submitMode\"\n    :auto-resize=\"autoResize\"\n    :data-editing=\"editing || undefined\"\n    :data-invalid=\"field.invalid || undefined\"\n    :data-readonly=\"field.readonly || undefined\"\n    :data-disabled=\"field.disabled || undefined\"\n    :class=\"\n      cn(\n        'inline-flex items-center gap-1',\n        autoResize ? 'w-auto align-baseline' : 'w-full',\n        attrs.class as string,\n      )\n    \"\n    @update:state=\"onState\"\n    @submit=\"onSubmit\"\n  >\n    <EditableArea :class=\"areaClass\">\n      <!-- The preview is the control, and Reka's `EditableEditTrigger` is\n           deliberately not rendered beside it: a second button doing the same\n           job costs a second Tab stop on one value, and its click handler\n           fires in every activation mode, which would make `dblclick` and\n           `focus` lies. A real `<button>` rather than a `role`, so Enter and\n           Space are the browser's job and the affordance survives\n           forced-colors mode. -->\n      <EditablePreview\n        ref=\"previewRef\"\n        :as=\"previewAs\"\n        :type=\"field.readonly ? undefined : 'button'\"\n        :tabindex=\"field.readonly ? 0 : undefined\"\n        :disabled=\"!field.readonly && field.disabled ? true : undefined\"\n        :aria-describedby=\"field.attrs['aria-describedby']\"\n        :aria-invalid=\"field.attrs['aria-invalid']\"\n        class=\"flex min-w-0 flex-1 items-center gap-1.5 text-start outline-none\"\n        @click=\"(event: MouseEvent) => onPreviewClick(event, edit)\"\n        @dblclick=\"() => onPreviewDoubleClick(edit)\"\n        @focus=\"() => onPreviewFocus(edit)\"\n        @blur=\"onPreviewBlur\"\n      >\n        <!-- Single-line and truncated, because the editor it swaps with is a\n             single-line input: a preview that wrapped would be a taller box\n             than the thing replacing it. -->\n        <span :class=\"cn('truncate', !value && 'text-muted-foreground')\">\n          {{ value || placeholder }}\n        </span>\n        <template v-if=\"!field.readonly\">\n          <!-- The affordance for a sighted reader, and the counterpart to the\n               span below it: the resting state is text, so something has to\n               say it is more than text. Hidden from assistive tech, which is\n               told the same thing in words. -->\n          <Pencil class=\"h-3.5 w-3.5 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n          <!-- The whole accessibility problem of edit-in-place, in one span.\n               The value reads first so it stays the start of the accessible\n               name (WCAG 2.5.3, and what a voice-control reader says out\n               loud); the verb follows, so the text announces as something\n               that can be acted on rather than as prose. -->\n          <span class=\"sr-only\">{{ text.edit }}</span>\n        </template>\n      </EditablePreview>\n\n      <EditableInput\n        v-bind=\"{ ...inputAttrs, ...editorAttrs }\"\n        :aria-label=\"editorLabel\"\n        class=\"min-w-0 flex-1 bg-transparent text-inherit outline-none placeholder:text-muted-foreground\"\n      />\n    </EditableArea>\n\n    <!-- Both triggers hide themselves while the preview is showing, so there\n         is nothing to guard here. They exist for the reader who has no way to\n         know that Enter commits and Escape abandons — an invisible keyboard\n         contract is not an affordance. -->\n    <EditableSubmitTrigger :aria-label=\"text.submit\" :class=\"triggerClass\">\n      <Check class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </EditableSubmitTrigger>\n    <EditableCancelTrigger :aria-label=\"text.cancel\" :class=\"triggerClass\">\n      <X class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </EditableCancelTrigger>\n\n    <!-- A refused empty submit changes the screen without moving focus or\n         opening anything, which a screen reader would otherwise never\n         announce. Empty until there is something to say, so it never repeats\n         itself on an unrelated re-render. -->\n    <span role=\"status\" class=\"sr-only\">{{ restored }}</span>\n  </EditableRoot>\n</template>\n"],"mappings":"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"}