@funstack/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/toast/toast.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"toast.d.mts","names":[],"sources":["../../src/toast/toast.ts"],"mappings":";;;;YAOY;;iBAGK;;WAEN,OAAO;;;;;;;WAOP,QAAQ,QAAQ,SAAS;;iBAGnB;;WAEN;WACA,QAAQ;WACR,cAAc;;WAEd;;;;;WAKA,WAAW;;;;;;WAMX;WACA,SAAS;;;;;;;WAOT,cAAc,QAAQ,SAAS;;;;;WAK/B,aAAa,OAAO;;WAEpB;;;iBAIM,kBAAkB;WACxB;;;;;WAKA;;WAEA;;;iBAIM,2BAA2B;;WAEjC;;;iBAIM,0BAA0B;WAChC;;WAEA,QAAQ;;iBAGF,oBAAoB;;WAE1B,SAAS;;;;;WAKT,UAAU,iBAAiB,OAAO,MAAM;;;;;;;WAOxC,QAAQ,iBAAiB,oBAAoB;WAC7C;;;iBAIM;;GAEd,SAAS;WACD,MAAM,SAAS;;;;;;WAMf,UAAU,GACjB,SAAS,YAAY,IACrB,SAAS,oBAAoB,OAC1B,QAAQ;;WAEJ,SAAS,YAAY,SAAS,QAAQ;;WAEtC,UAAU;;;;;;wBAsGL,sBAAsB;;;;;;qBAqIzB,OAAO"}
+{"version":3,"file":"toast.d.mts","names":[],"sources":["../../src/toast/toast.ts"],"mappings":";;;;YAOY;;iBAGK;;WAEN,OAAO;;;;;;;WAOP,QAAQ,QAAQ,SAAS;;iBAGnB;;WAEN;WACA,QAAQ;WACR,cAAc;;WAEd;;;;;WAKA,WAAW;;;;;;WAMX;WACA,SAAS;;;;;;;WAOT,cAAc,QAAQ,SAAS;;;;;WAK/B,aAAa,OAAO;;WAEpB;;;iBAIM,kBAAkB;WACxB;;;;;WAKA;;WAEA;;;iBAIM,2BAA2B;;WAEjC;;;iBAIM,0BAA0B;WAChC;;WAEA,QAAQ;;iBAGF,oBAAoB;;WAE1B,SAAS;;;;;WAKT,UAAU,iBAAiB,OAAO,MAAM;;;;;;;WAOxC,QAAQ,iBAAiB,oBAAoB;WAC7C;;;iBAIM;;GAEd,SAAS;WACD,MAAM,SAAS;;;;;;WAMf,UAAU,GACjB,SAAS,YAAY,IACrB,SAAS,oBAAoB,OAC1B,QAAQ;;WAEJ,SAAS,YAAY,SAAS,QAAQ;;WAEtC,UAAU;;;;;;wBA4GL,sBAAsB;;;;;;qBAoIzB,OAAO"}

package/dist/toast/toast.mjs

@@ -8,6 +8,11 @@ function toastManagerInternals(manager) {
 }
 const isDev = process.env.NODE_ENV !== "production";
 let warnedServer = false;
+/**
+* Generated ids are unique across managers, so a Viewport whose `manager` prop changes never
+* mistakes a late close from the old queue (an Undo settling) for one of the new queue's toasts.
+*/
+let nextId = 0;
 /** On the server every method is a no-op, never buffered (design 13, product-owner amendment). */
 function onServer() {
 	if (typeof document !== "undefined") return false;
@@ -32,7 +37,6 @@ function createToastManager() {
 	/** Commands of the current tick, flushed together from one microtask. */
 	let batch = [];
 	let scheduled = false;
-	let nextId = 0;
 	const flush = () => {
 		scheduled = false;
 		const commands = batch;

package/dist/toast/toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.mjs","names":[],"sources":["../../src/toast/toast.ts"],"sourcesContent":["// No \"use client\" directive: the manager uses no React and no DOM API beyond `queueMicrotask`,\n// so a Server Component may import `toast` (for its type, or to pass nothing) without a client\n// reference (design/components/toast.md 13). The parts are client modules.\nimport type { ReactNode } from \"react\";\nimport type { Action, ActionDetails, ChangeReason } from \"../internal/types.js\";\n\n/** Announcement priority and role of a toast. */\nexport type ToastPriority = \"normal\" | \"high\";\n\n/** The `action` of a toast: what `Toast.Action` renders and runs by default. */\nexport interface ToastActionOptions {\n  /** The Action button's content. */\n  readonly label: ReactNode;\n  /**\n   * Runs in the Action part's own transition (`data-pending` on the Action and the Root, the\n   * timer paused). The toast closes with `reason: \"activate\"` when it resolves; a rejection\n   * keeps the toast and reaches the nearest Error Boundary above the Viewport. A caught error\n   * resolves the action and therefore closes the toast: rethrow after `toast.update` to keep it.\n   */\n  readonly action: Action<[details: ToastActionDetails]>;\n}\n\nexport interface ToastOptions {\n  /** Explicit id: an existing one updates that toast. Default: generated. */\n  readonly id?: string | undefined;\n  readonly title?: ReactNode;\n  readonly description?: ReactNode;\n  /** Free-form, rendered as `data-type` on the Root (`\"success\"`, `\"error\"`, ...). */\n  readonly type?: string | undefined;\n  /**\n   * Announcement priority and role: `\"high\"` announces with `ariaNotify` priority `\"high\"` and\n   * renders the Root as an `alertdialog`. Default `\"normal\"`.\n   */\n  readonly priority?: ToastPriority | undefined;\n  /**\n   * Milliseconds before the toast closes with `reason: \"timeout\"`; `null` never. Default: the\n   * Viewport's `duration`, or `null` (persistent) when the toast has an `action`. A timed action\n   * toast must keep its action reachable elsewhere too (WCAG 2.2.1).\n   */\n  readonly duration?: number | null | undefined;\n  readonly action?: ToastActionOptions | undefined;\n  /**\n   * Called once when the toast leaves, with the reason: `\"activate\"` (the Action part settled),\n   * `\"dismiss\"` (Close, Escape, `toast.dismiss()`, a promise toast with no message for its\n   * outcome) or `\"timeout\"`. Runs in the Viewport's transition; a rejection reaches the boundary\n   * above the Viewport. Not called when the Viewport unmounts.\n   */\n  readonly closeAction?: Action<[details: ToastCloseDetails]> | undefined;\n  /**\n   * The text `document.ariaNotify()` speaks for this toast; `null` announces nothing. Default:\n   * the Viewport's `announce`, else the text of the toast's Title and Description.\n   */\n  readonly announce?: ((toast: ToastItem) => string | null) | undefined;\n  /** Anything the Viewport's children want to render. */\n  readonly data?: unknown;\n}\n\n/** A toast in the queue, as the Viewport's `children(state)` receives it. */\nexport interface ToastItem extends ToastOptions {\n  readonly id: string;\n  /**\n   * The promise given to `toast.promise` is unsettled, or an action dispatched through this\n   * toast's Action part is in flight.\n   */\n  readonly pending: boolean;\n  /** Closed; kept mounted (and `inert`) for its exit animation. */\n  readonly ending: boolean;\n}\n\n/** Details passed to a toast's Action. */\nexport interface ToastActionDetails extends ActionDetails {\n  /** The toast's id, so an inline action can `toast.update` or `toast.dismiss` its own toast. */\n  readonly id: string;\n}\n\n/** Details passed to a toast's `closeAction`. */\nexport interface ToastCloseDetails extends ActionDetails {\n  readonly id: string;\n  /** `\"activate\"`, `\"dismiss\"` or `\"timeout\"`. */\n  readonly reason: ChangeReason;\n}\n\nexport interface ToastPromiseOptions<T> {\n  /** Shown at once, with `data-pending`; no timer until the promise settles. */\n  readonly pending: ToastOptions;\n  /**\n   * Replaces the toast when the promise fulfils; omitted: the toast is dismissed. A function that\n   * throws dismisses the toast, and the returned promise rejects with what it threw.\n   */\n  readonly success?: ToastOptions | ((value: T) => ToastOptions) | undefined;\n  /**\n   * Replaces the toast when the promise rejects; the returned promise then resolves with\n   * `undefined` (the toast is the handler). Omitted: the toast is dismissed and the returned\n   * promise rejects with the same reason. A function that throws dismisses the toast, and the\n   * returned promise rejects with what it threw.\n   */\n  readonly error?: ToastOptions | ((reason: unknown) => ToastOptions) | undefined;\n  readonly id?: string | undefined;\n}\n\n/** The queue's input: `toast(options)` and its methods. */\nexport interface ToastManager {\n  /** Adds a toast (or updates the one with `options.id`) and returns its id. */\n  (options: ToastOptions): string;\n  readonly add: (options: ToastOptions) => string;\n  /**\n   * Shows `options.pending` at once and swaps to `success` / `error` when `promise` settles.\n   * Returns a promise that settles with `promise`, except that a rejection resolves with\n   * `undefined` when `error` was given.\n   */\n  readonly promise: <T>(\n    promise: PromiseLike<T>,\n    options: ToastPromiseOptions<T>,\n  ) => Promise<T | undefined>;\n  /** Changes a toast in place (same position, same element). Unknown or closed ids are ignored. */\n  readonly update: (id: string, options: Partial<ToastOptions>) => void;\n  /** Closes one toast, or every toast when `id` is omitted, with `reason: \"dismiss\"`. */\n  readonly dismiss: (id?: string) => void;\n}\n\n// --- Internal: the command channel between a manager and its Viewport --------------------------\n\n/** A queue mutation, applied by the subscribed Viewport (or buffered until one subscribes). */\nexport type ToastCommand =\n  | {\n      readonly kind: \"add\";\n      readonly id: string;\n      readonly options: ToastOptions;\n      /** Added by `toast.promise`: pending until the promise settles. */\n      readonly pending: boolean;\n    }\n  | {\n      readonly kind: \"update\";\n      readonly id: string;\n      readonly options: Partial<ToastOptions>;\n      /** A promise settle: the options replace the toast's (keeping its id), pending ends. */\n      readonly settle: boolean;\n    }\n  | { readonly kind: \"dismiss\"; readonly id: string | undefined };\n\n/** What a Viewport hands its manager. */\nexport interface ToastListener {\n  /**\n   * Takes over the toasts a previous Viewport left behind (called on subscribe, before the\n   * buffer is applied).\n   */\n  readonly restore: (toasts: readonly RetainedToast[]) => void;\n  /** Applies a batch of commands, in dispatch order. */\n  readonly apply: (commands: readonly ToastCommand[]) => void;\n  /** The toasts to keep when this Viewport unsubscribes. */\n  readonly retain: () => readonly RetainedToast[];\n}\n\n/** A retained queue entry: what a Viewport leaves behind when it unmounts (design 14 item 11). */\nexport interface RetainedToast {\n  readonly options: ToastOptions & { readonly id: string };\n  readonly pending: boolean;\n  /**\n   * The text last announced for it (`null`: silenced), so the next Viewport does not announce\n   * it again; `undefined` when nothing was announced yet.\n   */\n  readonly announced?: string | null | undefined;\n}\n\nexport interface ToastManagerInternals {\n  /**\n   * Sets the listener, hands it the retained toasts and drains the buffer into it. Returns the\n   * unsubscribe function, or `null` (changing nothing) when a different listener is subscribed:\n   * the second-Viewport case.\n   */\n  readonly subscribe: (listener: ToastListener) => (() => void) | null;\n  /** Whether a listener other than `listener` is subscribed (read during render). */\n  readonly isTaken: (listener: ToastListener) => boolean;\n}\n\nconst internals = new WeakMap<ToastManager, ToastManagerInternals>();\n\n/** The command channel of `manager` (library-internal). */\nexport function toastManagerInternals(manager: ToastManager): ToastManagerInternals {\n  const value = internals.get(manager);\n  if (value === undefined) {\n    throw new TypeError(\"Toast.Viewport: `manager` must come from `createToastManager()`.\");\n  }\n  return value;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nlet warnedServer = false;\n\n/** On the server every method is a no-op, never buffered (design 13, product-owner amendment). */\nfunction onServer(): boolean {\n  if (typeof document !== \"undefined\") return false;\n  if (isDev && !warnedServer) {\n    warnedServer = true;\n    console.error(\n      \"toast(): called on the server. Toasts are client-only; the call does nothing. Return data \" +\n        \"from the Server Function and call `toast()` on the client.\",\n    );\n  }\n  return true;\n}\n\n/** Resets the once-per-process server warning (tests only). */\nexport function resetToastServerWarning(): void {\n  warnedServer = false;\n}\n\nfunction resolveOptions<V>(\n  options: ToastOptions | ((value: V) => ToastOptions),\n  value: V,\n): ToastOptions {\n  return typeof options === \"function\" ? options(value) : options;\n}\n\n/**\n * Creates an isolated queue: `<Toast.Viewport manager={m}>` renders it. For a second React root,\n * a micro-frontend, or a test that wants a clean queue. `toast` is the default manager.\n */\nexport function createToastManager(): ToastManager {\n  let listener: ToastListener | null = null;\n  let retained: readonly RetainedToast[] = [];\n  /** Commands issued before any Viewport subscribed (client only). */\n  let buffer: ToastCommand[] = [];\n  /** Commands of the current tick, flushed together from one microtask. */\n  let batch: ToastCommand[] = [];\n  let scheduled = false;\n  let nextId = 0;\n\n  const flush = (): void => {\n    scheduled = false;\n    const commands = batch;\n    batch = [];\n    if (commands.length === 0) return;\n    if (listener !== null) listener.apply(commands);\n    else buffer.push(...commands);\n  };\n\n  // A microtask, not a synchronous dispatch: a call made inside a `startTransition` scope (an\n  // action's sync prefix) is no longer inside it when the microtask runs, so the queue update is\n  // urgent and shows at once even while the action is pending (design 3.4).\n  const dispatch = (command: ToastCommand): void => {\n    batch.push(command);\n    if (scheduled) return;\n    scheduled = true;\n    queueMicrotask(flush);\n  };\n\n  const generateId = (): string => `fsui-toast-${++nextId}`;\n\n  const add = (options: ToastOptions): string => {\n    const id = options.id ?? generateId();\n    if (onServer()) return id;\n    dispatch({ kind: \"add\", id, options, pending: false });\n    return id;\n  };\n\n  const update = (id: string, options: Partial<ToastOptions>): void => {\n    if (onServer()) return;\n    dispatch({ kind: \"update\", id, options, settle: false });\n  };\n\n  const dismiss = (id?: string): void => {\n    if (onServer()) return;\n    dispatch({ kind: \"dismiss\", id });\n  };\n\n  const promise = <T>(\n    input: PromiseLike<T>,\n    options: ToastPromiseOptions<T>,\n  ): Promise<T | undefined> => {\n    const { success, error } = options;\n    if (onServer()) {\n      return Promise.resolve(input).then(\n        (value) => value,\n        (reason: unknown) => {\n          if (error !== undefined) return undefined;\n          throw reason;\n        },\n      );\n    }\n    const id = options.id ?? options.pending.id ?? generateId();\n    dispatch({ kind: \"add\", id, options: options.pending, pending: true });\n    // The returned promise is built from the same `then`, so it settles in the same tick as the\n    // toast's update and an awaiting action prop is pending exactly as long as the toast.\n    // A `success` / `error` function that throws dismisses the toast (it must not stay pending\n    // forever) and the returned promise rejects with what it threw: the operation's outcome is\n    // known, but its message is not, and the `error` message would misreport a fulfilment.\n    const settle = <V>(options: ToastOptions | ((value: V) => ToastOptions), value: V): void => {\n      let resolved: ToastOptions;\n      try {\n        resolved = resolveOptions(options, value);\n      } catch (thrown) {\n        dismiss(id);\n        throw thrown;\n      }\n      dispatch({ kind: \"update\", id, options: resolved, settle: true });\n    };\n    return Promise.resolve(input).then(\n      (value) => {\n        if (success === undefined) dismiss(id);\n        else settle(success, value);\n        return value;\n      },\n      (reason: unknown) => {\n        if (error === undefined) {\n          dismiss(id);\n          throw reason;\n        }\n        settle(error, reason);\n        return undefined;\n      },\n    );\n  };\n\n  const manager = Object.assign((options: ToastOptions) => add(options), {\n    add,\n    promise,\n    update,\n    dismiss,\n  }) as ToastManager;\n\n  internals.set(manager, {\n    subscribe: (next) => {\n      if (listener !== null && listener !== next) return null;\n      listener = next;\n      const handedOver = retained;\n      retained = [];\n      if (handedOver.length > 0) next.restore(handedOver);\n      // Commands issued before this Viewport subscribed, in order.\n      const pending = buffer;\n      buffer = [];\n      if (pending.length > 0) next.apply(pending);\n      return () => {\n        if (listener !== next) return;\n        // The queue survives the Viewport (a route-level Viewport remounting on navigation does\n        // not lose an Undo); timers and `closeAction`s do not.\n        retained = next.retain();\n        listener = null;\n      };\n    },\n    isTaken: (candidate) => listener !== null && listener !== candidate,\n  });\n\n  return manager;\n}\n\n/**\n * The default toast manager: `toast({ title: \"Saved\" })` from anywhere on the client (action\n * bodies, stores, effects). `<Toast.Viewport>` without `manager` renders it. On the server every\n * call is a no-op.\n */\nexport const toast: ToastManager = createToastManager();\n"],"mappings":"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"}
+{"version":3,"file":"toast.mjs","names":[],"sources":["../../src/toast/toast.ts"],"sourcesContent":["// No \"use client\" directive: the manager uses no React and no DOM API beyond `queueMicrotask`,\n// so a Server Component may import `toast` (for its type, or to pass nothing) without a client\n// reference (design/components/toast.md 13). The parts are client modules.\nimport type { ReactNode } from \"react\";\nimport type { Action, ActionDetails, ChangeReason } from \"../internal/types.js\";\n\n/** Announcement priority and role of a toast. */\nexport type ToastPriority = \"normal\" | \"high\";\n\n/** The `action` of a toast: what `Toast.Action` renders and runs by default. */\nexport interface ToastActionOptions {\n  /** The Action button's content. */\n  readonly label: ReactNode;\n  /**\n   * Runs in the Action part's own transition (`data-pending` on the Action and the Root, the\n   * timer paused). The toast closes with `reason: \"activate\"` when it resolves; a rejection\n   * keeps the toast and reaches the nearest Error Boundary above the Viewport. A caught error\n   * resolves the action and therefore closes the toast: rethrow after `toast.update` to keep it.\n   */\n  readonly action: Action<[details: ToastActionDetails]>;\n}\n\nexport interface ToastOptions {\n  /** Explicit id: an existing one updates that toast. Default: generated. */\n  readonly id?: string | undefined;\n  readonly title?: ReactNode;\n  readonly description?: ReactNode;\n  /** Free-form, rendered as `data-type` on the Root (`\"success\"`, `\"error\"`, ...). */\n  readonly type?: string | undefined;\n  /**\n   * Announcement priority and role: `\"high\"` announces with `ariaNotify` priority `\"high\"` and\n   * renders the Root as an `alertdialog`. Default `\"normal\"`.\n   */\n  readonly priority?: ToastPriority | undefined;\n  /**\n   * Milliseconds before the toast closes with `reason: \"timeout\"`; `null` never. Default: the\n   * Viewport's `duration`, or `null` (persistent) when the toast has an `action`. A timed action\n   * toast must keep its action reachable elsewhere too (WCAG 2.2.1).\n   */\n  readonly duration?: number | null | undefined;\n  readonly action?: ToastActionOptions | undefined;\n  /**\n   * Called once when the toast leaves, with the reason: `\"activate\"` (the Action part settled),\n   * `\"dismiss\"` (Close, Escape, `toast.dismiss()`, a promise toast with no message for its\n   * outcome) or `\"timeout\"`. Runs in the Viewport's transition; a rejection reaches the boundary\n   * above the Viewport. Not called when the Viewport unmounts.\n   */\n  readonly closeAction?: Action<[details: ToastCloseDetails]> | undefined;\n  /**\n   * The text `document.ariaNotify()` speaks for this toast; `null` announces nothing. Default:\n   * the Viewport's `announce`, else the text of the toast's Title and Description.\n   */\n  readonly announce?: ((toast: ToastItem) => string | null) | undefined;\n  /** Anything the Viewport's children want to render. */\n  readonly data?: unknown;\n}\n\n/** A toast in the queue, as the Viewport's `children(state)` receives it. */\nexport interface ToastItem extends ToastOptions {\n  readonly id: string;\n  /**\n   * The promise given to `toast.promise` is unsettled, or an action dispatched through this\n   * toast's Action part is in flight.\n   */\n  readonly pending: boolean;\n  /** Closed; kept mounted (and `inert`) for its exit animation. */\n  readonly ending: boolean;\n}\n\n/** Details passed to a toast's Action. */\nexport interface ToastActionDetails extends ActionDetails {\n  /** The toast's id, so an inline action can `toast.update` or `toast.dismiss` its own toast. */\n  readonly id: string;\n}\n\n/** Details passed to a toast's `closeAction`. */\nexport interface ToastCloseDetails extends ActionDetails {\n  readonly id: string;\n  /** `\"activate\"`, `\"dismiss\"` or `\"timeout\"`. */\n  readonly reason: ChangeReason;\n}\n\nexport interface ToastPromiseOptions<T> {\n  /** Shown at once, with `data-pending`; no timer until the promise settles. */\n  readonly pending: ToastOptions;\n  /**\n   * Replaces the toast when the promise fulfils; omitted: the toast is dismissed. A function that\n   * throws dismisses the toast, and the returned promise rejects with what it threw.\n   */\n  readonly success?: ToastOptions | ((value: T) => ToastOptions) | undefined;\n  /**\n   * Replaces the toast when the promise rejects; the returned promise then resolves with\n   * `undefined` (the toast is the handler). Omitted: the toast is dismissed and the returned\n   * promise rejects with the same reason. A function that throws dismisses the toast, and the\n   * returned promise rejects with what it threw.\n   */\n  readonly error?: ToastOptions | ((reason: unknown) => ToastOptions) | undefined;\n  readonly id?: string | undefined;\n}\n\n/** The queue's input: `toast(options)` and its methods. */\nexport interface ToastManager {\n  /** Adds a toast (or updates the one with `options.id`) and returns its id. */\n  (options: ToastOptions): string;\n  readonly add: (options: ToastOptions) => string;\n  /**\n   * Shows `options.pending` at once and swaps to `success` / `error` when `promise` settles.\n   * Returns a promise that settles with `promise`, except that a rejection resolves with\n   * `undefined` when `error` was given.\n   */\n  readonly promise: <T>(\n    promise: PromiseLike<T>,\n    options: ToastPromiseOptions<T>,\n  ) => Promise<T | undefined>;\n  /** Changes a toast in place (same position, same element). Unknown or closed ids are ignored. */\n  readonly update: (id: string, options: Partial<ToastOptions>) => void;\n  /** Closes one toast, or every toast when `id` is omitted, with `reason: \"dismiss\"`. */\n  readonly dismiss: (id?: string) => void;\n}\n\n// --- Internal: the command channel between a manager and its Viewport --------------------------\n\n/** A queue mutation, applied by the subscribed Viewport (or buffered until one subscribes). */\nexport type ToastCommand =\n  | {\n      readonly kind: \"add\";\n      readonly id: string;\n      readonly options: ToastOptions;\n      /** Added by `toast.promise`: pending until the promise settles. */\n      readonly pending: boolean;\n    }\n  | {\n      readonly kind: \"update\";\n      readonly id: string;\n      readonly options: Partial<ToastOptions>;\n      /** A promise settle: the options replace the toast's (keeping its id), pending ends. */\n      readonly settle: boolean;\n    }\n  | { readonly kind: \"dismiss\"; readonly id: string | undefined };\n\n/** What a Viewport hands its manager. */\nexport interface ToastListener {\n  /**\n   * Takes over the toasts a previous Viewport left behind (called on subscribe, before the\n   * buffer is applied).\n   */\n  readonly restore: (toasts: readonly RetainedToast[]) => void;\n  /** Applies a batch of commands, in dispatch order. */\n  readonly apply: (commands: readonly ToastCommand[]) => void;\n  /** The toasts to keep when this Viewport unsubscribes. */\n  readonly retain: () => readonly RetainedToast[];\n}\n\n/** A retained queue entry: what a Viewport leaves behind when it unmounts (design 14 item 11). */\nexport interface RetainedToast {\n  readonly options: ToastOptions & { readonly id: string };\n  readonly pending: boolean;\n  /**\n   * The text last announced for it (`null`: silenced), so the next Viewport does not announce\n   * it again; `undefined` when nothing was announced yet.\n   */\n  readonly announced?: string | null | undefined;\n}\n\nexport interface ToastManagerInternals {\n  /**\n   * Sets the listener, hands it the retained toasts and drains the buffer into it. Returns the\n   * unsubscribe function, or `null` (changing nothing) when a different listener is subscribed:\n   * the second-Viewport case.\n   */\n  readonly subscribe: (listener: ToastListener) => (() => void) | null;\n  /** Whether a listener other than `listener` is subscribed (read during render). */\n  readonly isTaken: (listener: ToastListener) => boolean;\n}\n\nconst internals = new WeakMap<ToastManager, ToastManagerInternals>();\n\n/** The command channel of `manager` (library-internal). */\nexport function toastManagerInternals(manager: ToastManager): ToastManagerInternals {\n  const value = internals.get(manager);\n  if (value === undefined) {\n    throw new TypeError(\"Toast.Viewport: `manager` must come from `createToastManager()`.\");\n  }\n  return value;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nlet warnedServer = false;\n\n/**\n * Generated ids are unique across managers, so a Viewport whose `manager` prop changes never\n * mistakes a late close from the old queue (an Undo settling) for one of the new queue's toasts.\n */\nlet nextId = 0;\n\n/** On the server every method is a no-op, never buffered (design 13, product-owner amendment). */\nfunction onServer(): boolean {\n  if (typeof document !== \"undefined\") return false;\n  if (isDev && !warnedServer) {\n    warnedServer = true;\n    console.error(\n      \"toast(): called on the server. Toasts are client-only; the call does nothing. Return data \" +\n        \"from the Server Function and call `toast()` on the client.\",\n    );\n  }\n  return true;\n}\n\n/** Resets the once-per-process server warning (tests only). */\nexport function resetToastServerWarning(): void {\n  warnedServer = false;\n}\n\nfunction resolveOptions<V>(\n  options: ToastOptions | ((value: V) => ToastOptions),\n  value: V,\n): ToastOptions {\n  return typeof options === \"function\" ? options(value) : options;\n}\n\n/**\n * Creates an isolated queue: `<Toast.Viewport manager={m}>` renders it. For a second React root,\n * a micro-frontend, or a test that wants a clean queue. `toast` is the default manager.\n */\nexport function createToastManager(): ToastManager {\n  let listener: ToastListener | null = null;\n  let retained: readonly RetainedToast[] = [];\n  /** Commands issued before any Viewport subscribed (client only). */\n  let buffer: ToastCommand[] = [];\n  /** Commands of the current tick, flushed together from one microtask. */\n  let batch: ToastCommand[] = [];\n  let scheduled = false;\n\n  const flush = (): void => {\n    scheduled = false;\n    const commands = batch;\n    batch = [];\n    if (commands.length === 0) return;\n    if (listener !== null) listener.apply(commands);\n    else buffer.push(...commands);\n  };\n\n  // A microtask, not a synchronous dispatch: a call made inside a `startTransition` scope (an\n  // action's sync prefix) is no longer inside it when the microtask runs, so the queue update is\n  // urgent and shows at once even while the action is pending (design 3.4).\n  const dispatch = (command: ToastCommand): void => {\n    batch.push(command);\n    if (scheduled) return;\n    scheduled = true;\n    queueMicrotask(flush);\n  };\n\n  const generateId = (): string => `fsui-toast-${++nextId}`;\n\n  const add = (options: ToastOptions): string => {\n    const id = options.id ?? generateId();\n    if (onServer()) return id;\n    dispatch({ kind: \"add\", id, options, pending: false });\n    return id;\n  };\n\n  const update = (id: string, options: Partial<ToastOptions>): void => {\n    if (onServer()) return;\n    dispatch({ kind: \"update\", id, options, settle: false });\n  };\n\n  const dismiss = (id?: string): void => {\n    if (onServer()) return;\n    dispatch({ kind: \"dismiss\", id });\n  };\n\n  const promise = <T>(\n    input: PromiseLike<T>,\n    options: ToastPromiseOptions<T>,\n  ): Promise<T | undefined> => {\n    const { success, error } = options;\n    if (onServer()) {\n      return Promise.resolve(input).then(\n        (value) => value,\n        (reason: unknown) => {\n          if (error !== undefined) return undefined;\n          throw reason;\n        },\n      );\n    }\n    const id = options.id ?? options.pending.id ?? generateId();\n    dispatch({ kind: \"add\", id, options: options.pending, pending: true });\n    // The returned promise is built from the same `then`, so it settles in the same tick as the\n    // toast's update and an awaiting action prop is pending exactly as long as the toast.\n    // A `success` / `error` function that throws dismisses the toast (it must not stay pending\n    // forever) and the returned promise rejects with what it threw: the operation's outcome is\n    // known, but its message is not, and the `error` message would misreport a fulfilment.\n    const settle = <V>(options: ToastOptions | ((value: V) => ToastOptions), value: V): void => {\n      let resolved: ToastOptions;\n      try {\n        resolved = resolveOptions(options, value);\n      } catch (thrown) {\n        dismiss(id);\n        throw thrown;\n      }\n      dispatch({ kind: \"update\", id, options: resolved, settle: true });\n    };\n    return Promise.resolve(input).then(\n      (value) => {\n        if (success === undefined) dismiss(id);\n        else settle(success, value);\n        return value;\n      },\n      (reason: unknown) => {\n        if (error === undefined) {\n          dismiss(id);\n          throw reason;\n        }\n        settle(error, reason);\n        return undefined;\n      },\n    );\n  };\n\n  const manager = Object.assign((options: ToastOptions) => add(options), {\n    add,\n    promise,\n    update,\n    dismiss,\n  }) as ToastManager;\n\n  internals.set(manager, {\n    subscribe: (next) => {\n      if (listener !== null && listener !== next) return null;\n      listener = next;\n      const handedOver = retained;\n      retained = [];\n      if (handedOver.length > 0) next.restore(handedOver);\n      // Commands issued before this Viewport subscribed, in order.\n      const pending = buffer;\n      buffer = [];\n      if (pending.length > 0) next.apply(pending);\n      return () => {\n        if (listener !== next) return;\n        // The queue survives the Viewport (a route-level Viewport remounting on navigation does\n        // not lose an Undo); timers and `closeAction`s do not.\n        retained = next.retain();\n        listener = null;\n      };\n    },\n    isTaken: (candidate) => listener !== null && listener !== candidate,\n  });\n\n  return manager;\n}\n\n/**\n * The default toast manager: `toast({ title: \"Saved\" })` from anywhere on the client (action\n * bodies, stores, effects). `<Toast.Viewport>` without `manager` renders it. On the server every\n * call is a no-op.\n */\nexport const toast: ToastManager = createToastManager();\n"],"mappings":"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"}

package/dist/toggle/toggle.mjs

@@ -4,7 +4,8 @@ import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { rendersButton, useRender } from "../internal/use-render.mjs";
+import { rendersButton } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
 //#region src/toggle/toggle.tsx
 /**
 * A two-state button (WAI-ARIA "Button" pattern, toggle variant). Renders

package/dist/toggle/toggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.mjs","names":[],"sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\n\nexport interface ToggleState {\n  /** Optimistic pressed state: what the user sees, including an in-flight change. */\n  readonly pressed: boolean;\n  /** An action dispatched by this Toggle is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `pressedChangeAction`. */\nexport interface TogglePressedChangeDetails extends ActionDetails {\n  // v0 adds nothing beyond `event`; the interface exists so fields can be added without a\n  // breaking change (e.g. a `reason` if a ToggleGroup ever dispatches on an item's behalf).\n}\n\nexport interface ToggleProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"aria-pressed\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Controlled pressed state. `undefined` means uncontrolled. */\n  pressed?: boolean;\n  /** Initial pressed state in uncontrolled mode. Default `false`. */\n  defaultPressed?: boolean;\n  /**\n   * Called with the next pressed state on every user-initiated change. Runs inside the Toggle's\n   * transition; may be sync or async. Rejections reach the nearest Error Boundary.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation).\n   */\n  pressedChangeAction?: ChangeAction<boolean, TogglePressedChangeDetails>;\n  /** Renders a native disabled button; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the Toggle's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action (and rollbacks), not the optimistic flip itself; animate the flip\n   * with a CSS `transition` on `[data-pressed]`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ToggleState>;\n  style?: StateValue<CSSProperties | undefined, ToggleState>;\n  /** Rendered from optimistic state inside the button; must not suspend. */\n  children?: StateValue<ReactNode, ToggleState>;\n  /** Replace the rendered element (element form) or take over rendering (function form). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToggleState>;\n}\n\n/**\n * A two-state button (WAI-ARIA \"Button\" pattern, toggle variant). Renders\n * `<button type=\"button\" aria-pressed>`; the pressed state flips optimistically and the element\n * carries `data-pending` while `pressedChangeAction` is in flight.\n */\nexport function Toggle({\n  pressed,\n  defaultPressed,\n  pressedChangeAction,\n  disabled = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToggleProps) {\n  const { optimistic, pending, dispatch } = useControllableAction<\n    boolean,\n    TogglePressedChangeDetails\n  >({\n    controlled: pressed,\n    defaultValue: defaultPressed,\n    initialValue: false,\n    action: pressedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"toggle\", next ? \"press\" : \"release\"),\n    warn: { component: \"Toggle\", prop: \"pressed\" },\n  });\n\n  const state: ToggleState = { pressed: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToggleState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    // Pass-through layer: a `render` element's own props win over these (its `type` included).\n    // `type=\"button\"` only on a real button; an `<a>` or a component element does not get it.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    // Library-controlled layer: wins over a `render` element's props.\n    libraryProps: {\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the button on its own.\n      disabled,\n      \"aria-pressed\": optimistic,\n      \"data-pressed\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        // Native buttons do not fire `click` when disabled; the guard covers `render` elements\n        // that do not honour `disabled`.\n        if (disabled) return;\n        dispatch(!optimistic, createActionDetails(event.nativeEvent, {}));\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Toggle\", transition, element);\n}\n\nToggle.displayName = \"Toggle\";\n"],"mappings":";;;;;;;;;;;;;AAyEA,SAAgB,OAAO,EACrB,SACA,gBACA,qBACA,WAAW,OACX,YACA,WACA,OACA,UACA,QACA,GAAG,QACW;CACd,MAAM,EAAE,YAAY,SAAS,aAAa,sBAGxC;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,UAAU,SAAS;EAC/E,MAAM;GAAE,WAAW;GAAU,MAAM;EAAU;CAC/C,CAAC;CAID,MAAM,UAAU,UAAwD;EACtE,gBAAgB;EAChB;EACA,OAAA;GAL2B,SAAS;GAAY;GAAS;EAKrD;EACJ;EACA;EACA;EAGA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAE7D,cAAc;GAGZ;GACA,gBAAgB;GAChB,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,UAAU,UAAyC;IAGjD,IAAI,UAAU;IACd,SAAS,CAAC,YAAY,oBAAoB,MAAM,aAAa,CAAC,CAAC,CAAC;GAClE;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}
+{"version":3,"file":"toggle.mjs","names":[],"sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\n\nexport interface ToggleState {\n  /** Optimistic pressed state: what the user sees, including an in-flight change. */\n  readonly pressed: boolean;\n  /** An action dispatched by this Toggle is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `pressedChangeAction`. */\nexport interface TogglePressedChangeDetails extends ActionDetails {\n  // v0 adds nothing beyond `event`; the interface exists so fields can be added without a\n  // breaking change (e.g. a `reason` if a ToggleGroup ever dispatches on an item's behalf).\n}\n\nexport interface ToggleProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"aria-pressed\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Controlled pressed state. `undefined` means uncontrolled. */\n  pressed?: boolean;\n  /** Initial pressed state in uncontrolled mode. Default `false`. */\n  defaultPressed?: boolean;\n  /**\n   * Called with the next pressed state on every user-initiated change. Runs inside the Toggle's\n   * transition; may be sync or async. Rejections reach the nearest Error Boundary.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation).\n   */\n  pressedChangeAction?: ChangeAction<boolean, TogglePressedChangeDetails>;\n  /** Renders a native disabled button; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the Toggle's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action (and rollbacks), not the optimistic flip itself; animate the flip\n   * with a CSS `transition` on `[data-pressed]`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ToggleState>;\n  style?: StateValue<CSSProperties | undefined, ToggleState>;\n  /** Rendered from optimistic state inside the button; must not suspend. */\n  children?: StateValue<ReactNode, ToggleState>;\n  /** Replace the rendered element (element form) or take over rendering (function form). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToggleState>;\n}\n\n/**\n * A two-state button (WAI-ARIA \"Button\" pattern, toggle variant). Renders\n * `<button type=\"button\" aria-pressed>`; the pressed state flips optimistically and the element\n * carries `data-pending` while `pressedChangeAction` is in flight.\n */\nexport function Toggle({\n  pressed,\n  defaultPressed,\n  pressedChangeAction,\n  disabled = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToggleProps) {\n  const { optimistic, pending, dispatch } = useControllableAction<\n    boolean,\n    TogglePressedChangeDetails\n  >({\n    controlled: pressed,\n    defaultValue: defaultPressed,\n    initialValue: false,\n    action: pressedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"toggle\", next ? \"press\" : \"release\"),\n    warn: { component: \"Toggle\", prop: \"pressed\" },\n  });\n\n  const state: ToggleState = { pressed: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToggleState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    // Pass-through layer: a `render` element's own props win over these (its `type` included).\n    // `type=\"button\"` only on a real button; an `<a>` or a component element does not get it.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    // Library-controlled layer: wins over a `render` element's props.\n    libraryProps: {\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the button on its own.\n      disabled,\n      \"aria-pressed\": optimistic,\n      \"data-pressed\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        // Native buttons do not fire `click` when disabled; the guard covers `render` elements\n        // that do not honour `disabled`.\n        if (disabled) return;\n        dispatch(!optimistic, createActionDetails(event.nativeEvent, {}));\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Toggle\", transition, element);\n}\n\nToggle.displayName = \"Toggle\";\n"],"mappings":";;;;;;;;;;;;;;AAyEA,SAAgB,OAAO,EACrB,SACA,gBACA,qBACA,WAAW,OACX,YACA,WACA,OACA,UACA,QACA,GAAG,QACW;CACd,MAAM,EAAE,YAAY,SAAS,aAAa,sBAGxC;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,UAAU,SAAS;EAC/E,MAAM;GAAE,WAAW;GAAU,MAAM;EAAU;CAC/C,CAAC;CAID,MAAM,UAAU,UAAwD;EACtE,gBAAgB;EAChB;EACA,OAAA;GAL2B,SAAS;GAAY;GAAS;EAKrD;EACJ;EACA;EACA;EAGA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAE7D,cAAc;GAGZ;GACA,gBAAgB;GAChB,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,UAAU,UAAyC;IAGjD,IAAI,UAAU;IACd,SAAS,CAAC,YAAY,oBAAoB,MAAM,aAAa,CAAC,CAAC,CAAC;GAClE;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}

package/dist/toggle-group/index.d.mts

@@ -0,0 +1,16 @@
+import "../internal/platform-attributes.mjs";
+import { ToggleGroupOrientation } from "./toggle-group-context.mjs";
+import { ToggleGroupItem, ToggleGroupItemProps, ToggleGroupItemState } from "./toggle-group-item.mjs";
+import { ToggleGroupExclusiveProps, ToggleGroupMultipleProps, ToggleGroupRoot, ToggleGroupRootProps, ToggleGroupRootState, ToggleGroupValueChangeDetails } from "./toggle-group-root.mjs";
+//#region src/toggle-group/index.d.ts
+/**
+ * A set of toggle buttons sharing one value (design/components/toggle-group.md): several values
+ * by default, at most one with `exclusive`.
+ */
+export declare const ToggleGroup: {
+  readonly Root: typeof ToggleGroupRoot;
+  readonly Item: typeof ToggleGroupItem;
+};
+//#endregion
+export type { ToggleGroupExclusiveProps, ToggleGroupItemProps, ToggleGroupItemState, ToggleGroupMultipleProps, ToggleGroupOrientation, ToggleGroupRootProps, ToggleGroupRootState, ToggleGroupValueChangeDetails };
+//# sourceMappingURL=index.d.mts.map

package/dist/toggle-group/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/toggle-group/index.ts"],"mappings":";;;;;;;;;qBAUa;WAAgB,aAAI;WAAmB,aAAI"}

package/dist/toggle-group/index.mjs

@@ -0,0 +1,15 @@
+import { ToggleGroupItem } from "./toggle-group-item.mjs";
+import { ToggleGroupRoot } from "./toggle-group-root.mjs";
+//#region src/toggle-group/index.ts
+/**
+* A set of toggle buttons sharing one value (design/components/toggle-group.md): several values
+* by default, at most one with `exclusive`.
+*/
+const ToggleGroup = {
+	Root: ToggleGroupRoot,
+	Item: ToggleGroupItem
+};
+//#endregion
+export { ToggleGroup };
+
+//# sourceMappingURL=index.mjs.map

package/dist/toggle-group/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toggle-group/index.ts"],"sourcesContent":["// Platform attribute typings (`focusgroup`, `focusgroupstart`) for consumers of this subpath\n// (conventions 7.4). Type-only.\nimport \"../internal/platform-attributes.js\";\nimport { ToggleGroupItem } from \"./toggle-group-item.js\";\nimport { ToggleGroupRoot } from \"./toggle-group-root.js\";\n\n/**\n * A set of toggle buttons sharing one value (design/components/toggle-group.md): several values\n * by default, at most one with `exclusive`.\n */\nexport const ToggleGroup = { Root: ToggleGroupRoot, Item: ToggleGroupItem } as const;\n\nexport type {\n  ToggleGroupRootProps,\n  ToggleGroupMultipleProps,\n  ToggleGroupExclusiveProps,\n  ToggleGroupRootState,\n  ToggleGroupValueChangeDetails,\n  ToggleGroupOrientation,\n} from \"./toggle-group-root.js\";\nexport type { ToggleGroupItemProps, ToggleGroupItemState } from \"./toggle-group-item.js\";\n"],"mappings":";;;;;;;AAUA,MAAa,cAAc;CAAE,MAAM;CAAiB,MAAM;AAAgB"}

package/dist/toggle-group/toggle-group-context.d.mts

@@ -0,0 +1,4 @@
+//#region src/toggle-group/toggle-group-context.d.ts
+export type ToggleGroupOrientation = "horizontal" | "vertical";
+//#endregion
+//# sourceMappingURL=toggle-group-context.d.mts.map

package/dist/toggle-group/toggle-group-context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-context.d.mts","names":[],"sources":["../../src/toggle-group/toggle-group-context.ts"],"mappings":";YAGY"}

package/dist/toggle-group/toggle-group-context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/toggle-group/toggle-group-context.ts
+const ToggleGroupContext = createContext(null);
+function useToggleGroupContext(part) {
+	const context = use(ToggleGroupContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a ToggleGroup.Root.`);
+	return context;
+}
+//#endregion
+export { ToggleGroupContext, useToggleGroupContext };
+
+//# sourceMappingURL=toggle-group-context.mjs.map

package/dist/toggle-group/toggle-group-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-context.mjs","names":[],"sources":["../../src/toggle-group/toggle-group-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\nexport type ToggleGroupOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ToggleGroupContextValue {\n  /** Optimistic pressed values: Items render `aria-pressed` from it. */\n  readonly optimistic: ReadonlySet<string>;\n  /** Committed pressed values; for per-Item pending only (design 5.3). */\n  readonly committed: ReadonlySet<string>;\n  readonly pending: boolean;\n  /** `Root disabled`. */\n  readonly disabled: boolean;\n  /** The effective orientation: the Toolbar's inside one. */\n  readonly orientation: ToggleGroupOrientation;\n  /**\n   * The value whose Item renders `focusgroupstart` (standalone group with\n   * `experimental_focusgroup`): the first pressed enabled Item in document order, else `null`.\n   */\n  readonly focusgroupStartValue: string | null;\n  /** An Item was activated (stable). Computes the patch of design 5.2 against the optimistic set. */\n  readonly toggle: (value: string, event: Event) => void;\n  /** Registers an Item's element and value; returns the cleanup (stable; used as a callback ref). */\n  readonly register: (element: HTMLElement, value: string) => () => void;\n}\n\nexport const ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nexport function useToggleGroupContext(part: string): ToggleGroupContextValue {\n  const context = use(ToggleGroupContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a ToggleGroup.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AA0BA,MAAa,qBAAqB,cAA8C,IAAI;AAEpF,SAAgB,sBAAsB,MAAuC;CAC3E,MAAM,UAAU,IAAI,kBAAkB;CACtC,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,6CAA6C;CAEvE,OAAO;AACT"}

package/dist/toggle-group/toggle-group-item.d.mts

@@ -0,0 +1,47 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ToggleGroupOrientation } from "./toggle-group-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
+//#region src/toggle-group/toggle-group-item.d.ts
+export interface ToggleGroupItemState {
+  /** Optimistic pressed state. */
+  readonly pressed: boolean;
+  /** The group's action is in flight and this Item's optimistic state differs from its committed one. */
+  readonly pending: boolean;
+  /** Own `disabled` or the Root's. */
+  readonly disabled: boolean;
+  readonly orientation: ToggleGroupOrientation;
+}
+export interface ToggleGroupItemProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "type" | "value" | "tabIndex" | "aria-pressed" | "className" | "style" | "children"> {
+  /** The value this Item presses. Unique within the group. */
+  value: string;
+  /** Renders a native disabled button; never dispatches; skipped by arrow keys. */
+  disabled?: boolean;
+  /**
+   * Forwarded as `default` to the Item's `<ViewTransition>`. As on Toggle: animates the commit
+   * that ends the group's action (and rollbacks), not the optimistic flip, which is a CSS
+   * `transition` on `[data-pressed]`. Static; any value makes a mount inside a transition start a
+   * document view transition (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, ToggleGroupItemState>;
+  style?: StateValue<CSSProperties | undefined, ToggleGroupItemState>;
+  /** Rendered from optimistic state; must not suspend. */
+  children?: StateValue<ReactNode, ToggleGroupItemState>;
+  /** Must be, or render, a `<button>` (a toggle is a button). */
+  render?: RenderProp<ComponentPropsWithRef<"button">, ToggleGroupItemState>;
+}
+/**
+ * One toggle of a ToggleGroup: the `Toggle` element (`<button type="button" aria-pressed>`) whose
+ * pressed state is the Root's (design/components/toggle-group.md 16.3). Its `tabindex` is written
+ * by the roving engine (the group's, or the enclosing Toolbar's).
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-pressed`, `disabled`,
+ * `data-pressed`, `data-pending`, `data-disabled`, `data-orientation`, `onClick`, and
+ * `focusgroupstart` while the Root renders `focusgroup`.
+ */
+export declare function ToggleGroupItem({ value, disabled: disabledProp, transition, className, style, children, render, ...rest }: ToggleGroupItemProps): ReactNode;
+export declare namespace ToggleGroupItem {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toggle-group-item.d.mts.map

package/dist/toggle-group/toggle-group-item.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-item.d.mts","names":[],"sources":["../../src/toggle-group/toggle-group-item.tsx"],"mappings":";;;;iBAgBiB;;WAEN;;WAEA;;WAEA;WACA,aAAa;;iBAGP,6BAA6B,KAC5C;;EAIA;;EAEA;;;;;;;EAOA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;wBAYvC,kBACd,OACA,UAAU,cACV,YACA,WACA,OACA,UACA,WACG,QACF,uBAAoB;yBATP"}

package/dist/toggle-group/toggle-group-item.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useToggleGroupContext } from "./toggle-group-context.mjs";
+import { useCallback } from "react";
+//#region src/toggle-group/toggle-group-item.tsx
+/**
+* One toggle of a ToggleGroup: the `Toggle` element (`<button type="button" aria-pressed>`) whose
+* pressed state is the Root's (design/components/toggle-group.md 16.3). Its `tabindex` is written
+* by the roving engine (the group's, or the enclosing Toolbar's).
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-pressed`, `disabled`,
+* `data-pressed`, `data-pending`, `data-disabled`, `data-orientation`, `onClick`, and
+* `focusgroupstart` while the Root renders `focusgroup`.
+*/
+function ToggleGroupItem({ value, disabled: disabledProp = false, transition, className, style, children, render, ...rest }) {
+	const ctx = useToggleGroupContext("ToggleGroup.Item");
+	const pressed = ctx.optimistic.has(value);
+	const pending = ctx.pending && pressed !== ctx.committed.has(value);
+	const disabled = ctx.disabled || disabledProp;
+	const { register } = ctx;
+	const registerRef = useCallback((el) => register(el, value), [register, value]);
+	const state = {
+		pressed,
+		pending,
+		disabled,
+		orientation: ctx.orientation
+	};
+	const element = useRender({
+		defaultElement: "button",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rendersButton(render) ? {
+			...rest,
+			type: "button"
+		} : rest,
+		libraryProps: {
+			disabled,
+			"aria-pressed": pressed,
+			"data-pressed": dataAttr(pressed),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			"data-orientation": ctx.orientation,
+			...ctx.focusgroupStartValue !== null && { focusgroupstart: ctx.focusgroupStartValue === value ? "" : void 0 },
+			onClick: (event) => {
+				if (disabled) return;
+				ctx.toggle(value, event.nativeEvent);
+			}
+		},
+		ref: registerRef
+	});
+	return useTransitionBoundary("ToggleGroup.Item", transition, element);
+}
+ToggleGroupItem.displayName = "ToggleGroupItem";
+//#endregion
+export { ToggleGroupItem };
+
+//# sourceMappingURL=toggle-group-item.mjs.map

package/dist/toggle-group/toggle-group-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-item.mjs","names":[],"sources":["../../src/toggle-group/toggle-group-item.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport { useToggleGroupContext } from \"./toggle-group-context.js\";\nimport type { ToggleGroupOrientation } from \"./toggle-group-context.js\";\n\nexport interface ToggleGroupItemState {\n  /** Optimistic pressed state. */\n  readonly pressed: boolean;\n  /** The group's action is in flight and this Item's optimistic state differs from its committed one. */\n  readonly pending: boolean;\n  /** Own `disabled` or the Root's. */\n  readonly disabled: boolean;\n  readonly orientation: ToggleGroupOrientation;\n}\n\nexport interface ToggleGroupItemProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"value\" | \"tabIndex\" | \"aria-pressed\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The value this Item presses. Unique within the group. */\n  value: string;\n  /** Renders a native disabled button; never dispatches; skipped by arrow keys. */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the Item's `<ViewTransition>`. As on Toggle: animates the commit\n   * that ends the group's action (and rollbacks), not the optimistic flip, which is a CSS\n   * `transition` on `[data-pressed]`. Static; any value makes a mount inside a transition start a\n   * document view transition (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ToggleGroupItemState>;\n  style?: StateValue<CSSProperties | undefined, ToggleGroupItemState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, ToggleGroupItemState>;\n  /** Must be, or render, a `<button>` (a toggle is a button). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToggleGroupItemState>;\n}\n\n/**\n * One toggle of a ToggleGroup: the `Toggle` element (`<button type=\"button\" aria-pressed>`) whose\n * pressed state is the Root's (design/components/toggle-group.md 16.3). Its `tabindex` is written\n * by the roving engine (the group's, or the enclosing Toolbar's).\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-pressed`, `disabled`,\n * `data-pressed`, `data-pending`, `data-disabled`, `data-orientation`, `onClick`, and\n * `focusgroupstart` while the Root renders `focusgroup`.\n */\nexport function ToggleGroupItem({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToggleGroupItemProps) {\n  const ctx = useToggleGroupContext(\"ToggleGroup.Item\");\n  const pressed = ctx.optimistic.has(value);\n  const pending = ctx.pending && pressed !== ctx.committed.has(value);\n  const disabled = ctx.disabled || disabledProp;\n  const { register } = ctx;\n  const registerRef = useCallback((el: HTMLElement) => register(el, value), [register, value]);\n\n  const state: ToggleGroupItemState = {\n    pressed,\n    pending,\n    disabled,\n    orientation: ctx.orientation,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToggleGroupItemState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    // Pass-through layer, as Toggle: a `render` element's own `type` wins.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    libraryProps: {\n      disabled,\n      \"aria-pressed\": pressed,\n      \"data-pressed\": dataAttr(pressed),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": ctx.orientation,\n      ...(ctx.focusgroupStartValue !== null && {\n        focusgroupstart: ctx.focusgroupStartValue === value ? \"\" : undefined,\n      }),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        // Native buttons do not fire `click` when disabled; the guard covers `render` elements.\n        if (disabled) return;\n        ctx.toggle(value, event.nativeEvent);\n      },\n    },\n    ref: registerRef,\n  });\n\n  return useTransitionBoundary(\"ToggleGroup.Item\", transition, element);\n}\n\nToggleGroupItem.displayName = \"ToggleGroupItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;AA0DA,SAAgB,gBAAgB,EAC9B,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,UACA,QACA,GAAG,QACoB;CACvB,MAAM,MAAM,sBAAsB,kBAAkB;CACpD,MAAM,UAAU,IAAI,WAAW,IAAI,KAAK;CACxC,MAAM,UAAU,IAAI,WAAW,YAAY,IAAI,UAAU,IAAI,KAAK;CAClE,MAAM,WAAW,IAAI,YAAY;CACjC,MAAM,EAAE,aAAa;CACrB,MAAM,cAAc,aAAa,OAAoB,SAAS,IAAI,KAAK,GAAG,CAAC,UAAU,KAAK,CAAC;CAE3F,MAAM,QAA8B;EAClC;EACA;EACA;EACA,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,UAAiE;EAC/E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EAEA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAC7D,cAAc;GACZ;GACA,gBAAgB;GAChB,gBAAgB,SAAS,OAAO;GAChC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,oBAAoB,IAAI;GACxB,GAAI,IAAI,yBAAyB,QAAQ,EACvC,iBAAiB,IAAI,yBAAyB,QAAQ,KAAK,KAAA,EAC7D;GACA,UAAU,UAAyC;IAEjD,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,WAAW;GACrC;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,sBAAsB,oBAAoB,YAAY,OAAO;AACtE;AAEA,gBAAgB,cAAc"}

package/dist/toggle-group/toggle-group-root.d.mts

@@ -0,0 +1,95 @@
+import { ActionDetails, ChangeAction, RenderProp, StateValue } from "../internal/types.mjs";
+import { ToggleGroupOrientation } from "./toggle-group-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toggle-group/toggle-group-root.d.ts
+/** Details passed as the second argument of `valueChangeAction`, in both modes. */
+export interface ToggleGroupValueChangeDetails extends ActionDetails {
+  /** Values this dispatch pressed (document order of their Items). Exclusive mode: `[next]` or `[]`. */
+  readonly added: readonly string[];
+  /** Values this dispatch released. Exclusive mode: `[previous]` or `[]`. */
+  readonly removed: readonly string[];
+}
+export interface ToggleGroupRootState {
+  /**
+   * Optimistic pressed values in document order of the Items (exclusive mode: `[value]` or `[]`,
+   * so one state shape serves both modes). The server render and the first client render use the
+   * value's own order. Content rendered from it must not suspend.
+   */
+  readonly value: readonly string[];
+  /** An action dispatched through this group is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+  /** The effective orientation: the Toolbar's when inside one. */
+  readonly orientation: ToggleGroupOrientation;
+}
+interface ToggleGroupRootBaseProps extends Omit<ComponentPropsWithRef<"div">, "role" | "onKeyDown" | "onFocus" | "onBlur" | "onPointerDown" | "defaultValue" | "className" | "style" | "children"> {
+  /** Axis of the arrow keys and `data-orientation`. Default `"horizontal"`. Ignored inside a Toolbar (dev warning). */
+  orientation?: ToggleGroupOrientation;
+  /** Whether arrows wrap from the last Item to the first. Default `true`. Ignored inside a Toolbar (dev warning). */
+  loop?: boolean;
+  /** Disables every Item (native `disabled`). */
+  disabled?: boolean;
+  /**
+   * Render `focusgroup="toolbar …"` and, where the browser implements it, let the browser move
+   * focus between the Items. Chromium 150+ only; elsewhere the JS path stays active. Ignored
+   * inside a Toolbar (a nested focusgroup would split the Toolbar's sequence; dev warning).
+   * Default `false`.
+   */
+  experimental_focusgroup?: boolean;
+  className?: StateValue<string | undefined, ToggleGroupRootState>;
+  style?: StateValue<CSSProperties | undefined, ToggleGroupRootState>;
+  children?: StateValue<ReactNode, ToggleGroupRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ToggleGroupRootState>;
+}
+export interface ToggleGroupMultipleProps extends ToggleGroupRootBaseProps {
+  exclusive?: false;
+  /** Controlled pressed values. `[]` presses nothing; `undefined` means uncontrolled. Order is not significant; duplicates ignored. */
+  value?: string[];
+  /** Initial pressed values in uncontrolled mode. Default `[]`. */
+  defaultValue?: string[];
+  /**
+   * Runs inside the Root's transition whenever the set of pressed Items changes. Sync or async (a
+   * Server Function may be passed directly); rejections reach the nearest Error Boundary and roll
+   * the change back. `next` is the whole set as a fresh array in document order;
+   * `details.added` / `details.removed` say what changed. A `setState` after your own `await` is
+   * not a Transition update; wrap it in `startTransition`. Prefer a functional update keyed by
+   * `added` / `removed` when controlled.
+   */
+  valueChangeAction?: ChangeAction<string[], ToggleGroupValueChangeDetails>;
+  /** Exclusive mode only: a type error here (TypeScript's union excess-property check would let it through otherwise). */
+  deselectable?: never;
+}
+export interface ToggleGroupExclusiveProps extends ToggleGroupRootBaseProps {
+  /** At most one Item is pressed; `value` is `string | null`. */
+  exclusive: true;
+  /** Controlled pressed value. `null` presses nothing; `undefined` means uncontrolled. */
+  value?: string | null;
+  /** Initial pressed value in uncontrolled mode. Default `null`. */
+  defaultValue?: string | null;
+  /**
+   * Whether pressing the pressed Item releases it (`next === null`). Default `true`. With
+   * `false` that press is a no-op and dispatches nothing; `value` stays `string | null` because
+   * the group may start with nothing pressed, but the action is then never called with `null`.
+   */
+  deselectable?: boolean;
+  /** See {@link ToggleGroupMultipleProps.valueChangeAction}; `next` is the pressed value or `null`. */
+  valueChangeAction?: ChangeAction<string | null, ToggleGroupValueChangeDetails>;
+}
+/** Props of `ToggleGroup.Root`, discriminated on `exclusive`. */
+export type ToggleGroupRootProps = ToggleGroupMultipleProps | ToggleGroupExclusiveProps;
+/**
+ * `<div role="group">` that owns the pressed set, the transition and, when standalone, the roving
+ * focus over its Items (design/components/toggle-group.md 16.2). Inside a `Toolbar.Root` it runs
+ * no engine of its own: its Items are members of the Toolbar's sequence.
+ *
+ * Owned keys (conventions 1.2): `role`, `data-orientation`, `data-pending`, `data-disabled`;
+ * standalone also `onKeyDown`, `onFocus`, `onBlur`, `onPointerDown` and, with the flag,
+ * `focusgroup`.
+ */
+export declare function ToggleGroupRoot(props: ToggleGroupRootProps): import("react").JSX.Element;
+export declare namespace ToggleGroupRoot {
+  var displayName: string;
+}
+//#endregion
+export type { ToggleGroupOrientation };
+//# sourceMappingURL=toggle-group-root.d.mts.map

package/dist/toggle-group/toggle-group-root.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-root.d.mts","names":[],"sources":["../../src/toggle-group/toggle-group-root.tsx"],"mappings":";;;;;iBA6BiB,sCAAsC;;WAE5C;;WAEA;;iBAGM;;;;;;WAMN;;WAEA;WACA;;WAEA,aAAa;;UAGd,iCAAiC,KACzC;;EAYA,cAAc;;EAEd;;EAEA;;;;;;;EAOA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;iBAGnC,iCAAiC;EAChD;;EAEA;;EAEA;;;;;;;;;EASA,oBAAoB,uBAAuB;;EAE3C;;iBAGe,kCAAkC;;EAEjD;;EAEA;;EAEA;;;;;;EAMA;;EAEA,oBAAoB,4BAA4B;;;YAItC,uBAAuB,2BAA2B;;;;;;;;;;wBA6E9C,gBAAgB,OAAO,uCAAoB,IAAA;yBAA3C"}