@persona/design-system 0.3.0 → 0.4.0

package/dist/lib/embeddedSurfaceProtocol.mjs

@@ -9,7 +9,7 @@ const coerceIdentifier = (value) => {
 	return value;
 };
 const isRecord = (value) => typeof value === "object" && value != null && !Array.isArray(value);
-const isKnownKind = (value) => value === "hello" || value === "surfaceSnapshot" || value === "welcome";
+const isKnownKind = (value) => value === "hello" || value === "surfaceSnapshot" || value === "surfaceAck" || value === "welcome";
 const getEnvelopeMetadata = (value) => {
 	if (value.channel !== "persona-embedded-surface" || value.version !== 1) return;
 	const connectionId = coerceIdentifier(value.connectionId);
@@ -46,26 +46,53 @@ const coerceHostboundEnvelope = (value) => {
 				kind: value.kind,
 				payload: {
 					epoch,
-					surfaces
+					surfaces,
+					awaitsAck: payload.awaitsAck === true
 				}
 			};
 		}
+		case "surfaceAck":
 		case "welcome": return;
 	}
 };
 const coerceChildboundEnvelope = (value) => {
-	if (!isRecord(value) || value.kind !== "welcome") return;
+	if (!isRecord(value) || value.kind !== "welcome" && value.kind !== "surfaceAck") return;
 	const metadata = getEnvelopeMetadata(value);
 	const payload = isRecord(value.payload) ? value.payload : void 0;
 	if (metadata == null || payload == null) return;
+	if (value.kind === "welcome") {
+		const epoch = coerceIdentifier(payload.epoch);
+		if (epoch == null) return;
+		return {
+			channel: EMBEDDED_SURFACE_CHANNEL,
+			version: 1,
+			...metadata,
+			kind: value.kind,
+			payload: { epoch }
+		};
+	}
+	if (!Array.isArray(payload.surfaces) || payload.surfaces.length > MAX_SURFACE_IDS) return;
 	const epoch = coerceIdentifier(payload.epoch);
 	if (epoch == null) return;
+	const startAt = payload.startAt;
+	if (typeof startAt !== "number" || !Number.isFinite(startAt)) return;
+	const surfaces = [];
+	for (const surface of payload.surfaces) {
+		if (!isRecord(surface)) return;
+		const surfaceId = coerceIdentifier(surface.surfaceId);
+		if (surfaceId == null) return;
+		surfaces.push({ surfaceId });
+	}
 	return {
 		channel: EMBEDDED_SURFACE_CHANNEL,
 		version: 1,
 		...metadata,
-		kind: value.kind,
-		payload: { epoch }
+		kind: "surfaceAck",
+		payload: {
+			epoch,
+			startAt,
+			surfaces
+		}
 	};
 };
 //#endregion

package/dist/lib/embeddedSurfaceProtocol.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"embeddedSurfaceProtocol.mjs","names":[],"sources":["../../lib/embeddedSurfaceProtocol.ts"],"sourcesContent":["export const EMBEDDED_SURFACE_CHANNEL = 'persona-embedded-surface';\nexport const EMBEDDED_SURFACE_PROTOCOL_VERSION = 1;\n\nexport type EmbeddedSurfaceKind = 'hello' | 'surfaceSnapshot' | 'welcome';\n\nexport type EmbeddedSurfacePayloads = {\n  hello: Record<string, never>;\n  surfaceSnapshot: {\n    epoch: string;\n    surfaces: Array<{ surfaceId: string }>;\n  };\n  welcome: {\n    epoch: string;\n  };\n};\n\nexport interface EmbeddedSurfaceEnvelope<K extends EmbeddedSurfaceKind = EmbeddedSurfaceKind> {\n  channel: typeof EMBEDDED_SURFACE_CHANNEL;\n  version: typeof EMBEDDED_SURFACE_PROTOCOL_VERSION;\n  connectionId: string;\n  kind: K;\n  payload: EmbeddedSurfacePayloads[K];\n}\n\nexport type EmbeddedSurfaceEnvelopeUnion = {\n  [K in EmbeddedSurfaceKind]: EmbeddedSurfaceEnvelope<K>;\n}[EmbeddedSurfaceKind];\n\nconst IDENTIFIER_PATTERN = /^[A-Za-z0-9_:-]+$/;\nconst MAX_IDENTIFIER_LENGTH = 64;\nconst MAX_SURFACE_IDS = 16;\n\nconst coerceIdentifier = (value: unknown): string | undefined => {\n  if (\n    typeof value !== 'string' ||\n    value.length < 1 ||\n    value.length > MAX_IDENTIFIER_LENGTH ||\n    !IDENTIFIER_PATTERN.test(value)\n  ) {\n    return undefined;\n  }\n  return value;\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value != null && !Array.isArray(value);\n\nconst isKnownKind = (value: unknown): value is EmbeddedSurfaceKind =>\n  value === 'hello' || value === 'surfaceSnapshot' || value === 'welcome';\n\nconst getEnvelopeMetadata = (\n  value: Record<string, unknown>,\n): { connectionId: string } | undefined => {\n  if (\n    value.channel !== EMBEDDED_SURFACE_CHANNEL ||\n    value.version !== EMBEDDED_SURFACE_PROTOCOL_VERSION\n  ) {\n    return undefined;\n  }\n  const connectionId = coerceIdentifier(value.connectionId);\n  return connectionId != null ? { connectionId } : undefined;\n};\n\nexport const coerceHostboundEnvelope = (\n  value: unknown,\n): EmbeddedSurfaceEnvelopeUnion | undefined => {\n  if (!isRecord(value) || !isKnownKind(value.kind)) {\n    return undefined;\n  }\n  const metadata = getEnvelopeMetadata(value);\n  if (metadata == null) {\n    return undefined;\n  }\n  const payload = isRecord(value.payload) ? value.payload : undefined;\n  if (payload == null) {\n    return undefined;\n  }\n\n  switch (value.kind) {\n    case 'hello':\n      return {\n        channel: EMBEDDED_SURFACE_CHANNEL,\n        version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n        ...metadata,\n        kind: value.kind,\n        payload: {},\n      };\n    case 'surfaceSnapshot': {\n      const epoch = coerceIdentifier(payload.epoch);\n      if (\n        epoch == null ||\n        !Array.isArray(payload.surfaces) ||\n        payload.surfaces.length > MAX_SURFACE_IDS\n      ) {\n        return undefined;\n      }\n      const surfaces = [];\n      for (const surface of payload.surfaces) {\n        if (!isRecord(surface)) {\n          return undefined;\n        }\n        const surfaceId = coerceIdentifier(surface.surfaceId);\n        if (surfaceId == null) {\n          return undefined;\n        }\n        surfaces.push({ surfaceId });\n      }\n      return {\n        channel: EMBEDDED_SURFACE_CHANNEL,\n        version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n        ...metadata,\n        kind: value.kind,\n        payload: { epoch, surfaces },\n      };\n    }\n    case 'welcome':\n      return undefined;\n  }\n};\n\nexport const coerceChildboundEnvelope = (\n  value: unknown,\n): EmbeddedSurfaceEnvelopeUnion | undefined => {\n  if (!isRecord(value) || value.kind !== 'welcome') {\n    return undefined;\n  }\n  const metadata = getEnvelopeMetadata(value);\n  const payload = isRecord(value.payload) ? value.payload : undefined;\n  if (metadata == null || payload == null) {\n    return undefined;\n  }\n\n  const epoch = coerceIdentifier(payload.epoch);\n  if (epoch == null) {\n    return undefined;\n  }\n\n  return {\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    ...metadata,\n    kind: value.kind,\n    payload: { epoch },\n  };\n};\n"],"mappings":";AAAA,MAAa,2BAA2B;AACxC,MAAa,oCAAoC;AA2BjD,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB;AAC9B,MAAM,kBAAkB;AAExB,MAAM,oBAAoB,UAAuC;AAC/D,KACE,OAAO,UAAU,YACjB,MAAM,SAAS,KACf,MAAM,SAAS,yBACf,CAAC,mBAAmB,KAAK,MAAM,CAE/B;AAEF,QAAO;;AAGT,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,SAAS,QAAQ,CAAC,MAAM,QAAQ,MAAM;AAErE,MAAM,eAAe,UACnB,UAAU,WAAW,UAAU,qBAAqB,UAAU;AAEhE,MAAM,uBACJ,UACyC;AACzC,KACE,MAAM,YAAA,8BACN,MAAM,YAAA,EAEN;CAEF,MAAM,eAAe,iBAAiB,MAAM,aAAa;AACzD,QAAO,gBAAgB,OAAO,EAAE,cAAc,GAAG,KAAA;;AAGnD,MAAa,2BACX,UAC6C;AAC7C,KAAI,CAAC,SAAS,MAAM,IAAI,CAAC,YAAY,MAAM,KAAK,CAC9C;CAEF,MAAM,WAAW,oBAAoB,MAAM;AAC3C,KAAI,YAAY,KACd;CAEF,MAAM,UAAU,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,KAAA;AAC1D,KAAI,WAAW,KACb;AAGF,SAAQ,MAAM,MAAd;EACE,KAAK,QACH,QAAO;GACL,SAAS;GACT,SAAA;GACA,GAAG;GACH,MAAM,MAAM;GACZ,SAAS,EAAE;GACZ;EACH,KAAK,mBAAmB;GACtB,MAAM,QAAQ,iBAAiB,QAAQ,MAAM;AAC7C,OACE,SAAS,QACT,CAAC,MAAM,QAAQ,QAAQ,SAAS,IAChC,QAAQ,SAAS,SAAS,gBAE1B;GAEF,MAAM,WAAW,EAAE;AACnB,QAAK,MAAM,WAAW,QAAQ,UAAU;AACtC,QAAI,CAAC,SAAS,QAAQ,CACpB;IAEF,MAAM,YAAY,iBAAiB,QAAQ,UAAU;AACrD,QAAI,aAAa,KACf;AAEF,aAAS,KAAK,EAAE,WAAW,CAAC;;AAE9B,UAAO;IACL,SAAS;IACT,SAAA;IACA,GAAG;IACH,MAAM,MAAM;IACZ,SAAS;KAAE;KAAO;KAAU;IAC7B;;EAEH,KAAK,UACH;;;AAIN,MAAa,4BACX,UAC6C;AAC7C,KAAI,CAAC,SAAS,MAAM,IAAI,MAAM,SAAS,UACrC;CAEF,MAAM,WAAW,oBAAoB,MAAM;CAC3C,MAAM,UAAU,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,KAAA;AAC1D,KAAI,YAAY,QAAQ,WAAW,KACjC;CAGF,MAAM,QAAQ,iBAAiB,QAAQ,MAAM;AAC7C,KAAI,SAAS,KACX;AAGF,QAAO;EACL,SAAS;EACT,SAAA;EACA,GAAG;EACH,MAAM,MAAM;EACZ,SAAS,EAAE,OAAO;EACnB"}
+{"version":3,"file":"embeddedSurfaceProtocol.mjs","names":[],"sources":["../../lib/embeddedSurfaceProtocol.ts"],"sourcesContent":["export const EMBEDDED_SURFACE_CHANNEL = 'persona-embedded-surface';\nexport const EMBEDDED_SURFACE_PROTOCOL_VERSION = 1;\n\nexport type EmbeddedSurfaceKind = 'hello' | 'surfaceSnapshot' | 'surfaceAck' | 'welcome';\n\nexport type EmbeddedSurfacePayloads = {\n  hello: Record<string, never>;\n  surfaceSnapshot: {\n    epoch: string;\n    surfaces: Array<{ surfaceId: string }>;\n    /**\n     * Set by children that hold their overlay animation until `surfaceAck`. The host only animates\n     * its backdrop for those, so host and child releases can ship in either order.\n     */\n    awaitsAck: boolean;\n  };\n  surfaceAck: {\n    epoch: string;\n    startAt: number;\n    surfaces: Array<{ surfaceId: string }>;\n  };\n  welcome: {\n    epoch: string;\n  };\n};\n\nexport interface EmbeddedSurfaceEnvelope<K extends EmbeddedSurfaceKind = EmbeddedSurfaceKind> {\n  channel: typeof EMBEDDED_SURFACE_CHANNEL;\n  version: typeof EMBEDDED_SURFACE_PROTOCOL_VERSION;\n  connectionId: string;\n  kind: K;\n  payload: EmbeddedSurfacePayloads[K];\n}\n\nexport type EmbeddedSurfaceEnvelopeUnion = {\n  [K in EmbeddedSurfaceKind]: EmbeddedSurfaceEnvelope<K>;\n}[EmbeddedSurfaceKind];\n\nconst IDENTIFIER_PATTERN = /^[A-Za-z0-9_:-]+$/;\nconst MAX_IDENTIFIER_LENGTH = 64;\nconst MAX_SURFACE_IDS = 16;\n\nconst coerceIdentifier = (value: unknown): string | undefined => {\n  if (\n    typeof value !== 'string' ||\n    value.length < 1 ||\n    value.length > MAX_IDENTIFIER_LENGTH ||\n    !IDENTIFIER_PATTERN.test(value)\n  ) {\n    return undefined;\n  }\n  return value;\n};\n\nconst isRecord = (value: unknown): value is Record<string, unknown> =>\n  typeof value === 'object' && value != null && !Array.isArray(value);\n\nconst isKnownKind = (value: unknown): value is EmbeddedSurfaceKind =>\n  value === 'hello' || value === 'surfaceSnapshot' || value === 'surfaceAck' || value === 'welcome';\n\nconst getEnvelopeMetadata = (\n  value: Record<string, unknown>,\n): { connectionId: string } | undefined => {\n  if (\n    value.channel !== EMBEDDED_SURFACE_CHANNEL ||\n    value.version !== EMBEDDED_SURFACE_PROTOCOL_VERSION\n  ) {\n    return undefined;\n  }\n  const connectionId = coerceIdentifier(value.connectionId);\n  return connectionId != null ? { connectionId } : undefined;\n};\n\nexport const coerceHostboundEnvelope = (\n  value: unknown,\n): EmbeddedSurfaceEnvelopeUnion | undefined => {\n  if (!isRecord(value) || !isKnownKind(value.kind)) {\n    return undefined;\n  }\n  const metadata = getEnvelopeMetadata(value);\n  if (metadata == null) {\n    return undefined;\n  }\n  const payload = isRecord(value.payload) ? value.payload : undefined;\n  if (payload == null) {\n    return undefined;\n  }\n\n  switch (value.kind) {\n    case 'hello':\n      return {\n        channel: EMBEDDED_SURFACE_CHANNEL,\n        version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n        ...metadata,\n        kind: value.kind,\n        payload: {},\n      };\n    case 'surfaceSnapshot': {\n      const epoch = coerceIdentifier(payload.epoch);\n      if (\n        epoch == null ||\n        !Array.isArray(payload.surfaces) ||\n        payload.surfaces.length > MAX_SURFACE_IDS\n      ) {\n        return undefined;\n      }\n      const surfaces = [];\n      for (const surface of payload.surfaces) {\n        if (!isRecord(surface)) {\n          return undefined;\n        }\n        const surfaceId = coerceIdentifier(surface.surfaceId);\n        if (surfaceId == null) {\n          return undefined;\n        }\n        surfaces.push({ surfaceId });\n      }\n      return {\n        channel: EMBEDDED_SURFACE_CHANNEL,\n        version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n        ...metadata,\n        kind: value.kind,\n        payload: { epoch, surfaces, awaitsAck: payload.awaitsAck === true },\n      };\n    }\n    case 'surfaceAck':\n    case 'welcome':\n      return undefined;\n  }\n};\n\nexport const coerceChildboundEnvelope = (\n  value: unknown,\n): EmbeddedSurfaceEnvelopeUnion | undefined => {\n  if (!isRecord(value) || (value.kind !== 'welcome' && value.kind !== 'surfaceAck')) {\n    return undefined;\n  }\n  const metadata = getEnvelopeMetadata(value);\n  const payload = isRecord(value.payload) ? value.payload : undefined;\n  if (metadata == null || payload == null) {\n    return undefined;\n  }\n\n  if (value.kind === 'welcome') {\n    const epoch = coerceIdentifier(payload.epoch);\n    if (epoch == null) {\n      return undefined;\n    }\n    return {\n      channel: EMBEDDED_SURFACE_CHANNEL,\n      version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n      ...metadata,\n      kind: value.kind,\n      payload: { epoch },\n    };\n  }\n  if (!Array.isArray(payload.surfaces) || payload.surfaces.length > MAX_SURFACE_IDS) {\n    return undefined;\n  }\n  const epoch = coerceIdentifier(payload.epoch);\n  if (epoch == null) {\n    return undefined;\n  }\n  const startAt = payload.startAt;\n  if (typeof startAt !== 'number' || !Number.isFinite(startAt)) {\n    return undefined;\n  }\n  const surfaces = [];\n  for (const surface of payload.surfaces) {\n    if (!isRecord(surface)) {\n      return undefined;\n    }\n    const surfaceId = coerceIdentifier(surface.surfaceId);\n    if (surfaceId == null) {\n      return undefined;\n    }\n    surfaces.push({ surfaceId });\n  }\n  return {\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    ...metadata,\n    kind: 'surfaceAck',\n    payload: { epoch, startAt, surfaces },\n  };\n};\n"],"mappings":";AAAA,MAAa,2BAA2B;AACxC,MAAa,oCAAoC;AAqCjD,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB;AAC9B,MAAM,kBAAkB;AAExB,MAAM,oBAAoB,UAAuC;AAC/D,KACE,OAAO,UAAU,YACjB,MAAM,SAAS,KACf,MAAM,SAAS,yBACf,CAAC,mBAAmB,KAAK,MAAM,CAE/B;AAEF,QAAO;;AAGT,MAAM,YAAY,UAChB,OAAO,UAAU,YAAY,SAAS,QAAQ,CAAC,MAAM,QAAQ,MAAM;AAErE,MAAM,eAAe,UACnB,UAAU,WAAW,UAAU,qBAAqB,UAAU,gBAAgB,UAAU;AAE1F,MAAM,uBACJ,UACyC;AACzC,KACE,MAAM,YAAA,8BACN,MAAM,YAAA,EAEN;CAEF,MAAM,eAAe,iBAAiB,MAAM,aAAa;AACzD,QAAO,gBAAgB,OAAO,EAAE,cAAc,GAAG,KAAA;;AAGnD,MAAa,2BACX,UAC6C;AAC7C,KAAI,CAAC,SAAS,MAAM,IAAI,CAAC,YAAY,MAAM,KAAK,CAC9C;CAEF,MAAM,WAAW,oBAAoB,MAAM;AAC3C,KAAI,YAAY,KACd;CAEF,MAAM,UAAU,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,KAAA;AAC1D,KAAI,WAAW,KACb;AAGF,SAAQ,MAAM,MAAd;EACE,KAAK,QACH,QAAO;GACL,SAAS;GACT,SAAA;GACA,GAAG;GACH,MAAM,MAAM;GACZ,SAAS,EAAE;GACZ;EACH,KAAK,mBAAmB;GACtB,MAAM,QAAQ,iBAAiB,QAAQ,MAAM;AAC7C,OACE,SAAS,QACT,CAAC,MAAM,QAAQ,QAAQ,SAAS,IAChC,QAAQ,SAAS,SAAS,gBAE1B;GAEF,MAAM,WAAW,EAAE;AACnB,QAAK,MAAM,WAAW,QAAQ,UAAU;AACtC,QAAI,CAAC,SAAS,QAAQ,CACpB;IAEF,MAAM,YAAY,iBAAiB,QAAQ,UAAU;AACrD,QAAI,aAAa,KACf;AAEF,aAAS,KAAK,EAAE,WAAW,CAAC;;AAE9B,UAAO;IACL,SAAS;IACT,SAAA;IACA,GAAG;IACH,MAAM,MAAM;IACZ,SAAS;KAAE;KAAO;KAAU,WAAW,QAAQ,cAAc;KAAM;IACpE;;EAEH,KAAK;EACL,KAAK,UACH;;;AAIN,MAAa,4BACX,UAC6C;AAC7C,KAAI,CAAC,SAAS,MAAM,IAAK,MAAM,SAAS,aAAa,MAAM,SAAS,aAClE;CAEF,MAAM,WAAW,oBAAoB,MAAM;CAC3C,MAAM,UAAU,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,KAAA;AAC1D,KAAI,YAAY,QAAQ,WAAW,KACjC;AAGF,KAAI,MAAM,SAAS,WAAW;EAC5B,MAAM,QAAQ,iBAAiB,QAAQ,MAAM;AAC7C,MAAI,SAAS,KACX;AAEF,SAAO;GACL,SAAS;GACT,SAAA;GACA,GAAG;GACH,MAAM,MAAM;GACZ,SAAS,EAAE,OAAO;GACnB;;AAEH,KAAI,CAAC,MAAM,QAAQ,QAAQ,SAAS,IAAI,QAAQ,SAAS,SAAS,gBAChE;CAEF,MAAM,QAAQ,iBAAiB,QAAQ,MAAM;AAC7C,KAAI,SAAS,KACX;CAEF,MAAM,UAAU,QAAQ;AACxB,KAAI,OAAO,YAAY,YAAY,CAAC,OAAO,SAAS,QAAQ,CAC1D;CAEF,MAAM,WAAW,EAAE;AACnB,MAAK,MAAM,WAAW,QAAQ,UAAU;AACtC,MAAI,CAAC,SAAS,QAAQ,CACpB;EAEF,MAAM,YAAY,iBAAiB,QAAQ,UAAU;AACrD,MAAI,aAAa,KACf;AAEF,WAAS,KAAK,EAAE,WAAW,CAAC;;AAE9B,QAAO;EACL,SAAS;EACT,SAAA;EACA,GAAG;EACH,MAAM;EACN,SAAS;GAAE;GAAO;GAAS;GAAU;EACtC"}

package/dist/lib/message.d.mts

@@ -1,2 +1,2 @@
-import { t as MessageType } from "../message-Cu84fcqB.mjs";
+import { t as MessageType } from "../message-DaiDXonE.mjs";
 export { MessageType };

package/dist/lib/pseudoClass.d.mts

@@ -1,42 +1,42 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-CcSlKNev.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-BPdn-ofQ.mjs";
 
 //#region lib/pseudoClass.d.ts
 declare const isDisabled: ({
   disabled
-}: PseudoClassProps) => "" | ":disabled";
+}: PseudoClassProps) => ":disabled" | "";
 declare const isNotDisabled: ({
   disabled
 }: PseudoClassProps) => ":not(*)" | ":not(:disabled)";
 declare const isHovered: ({
   hovered
-}: PseudoClassProps) => "" | ":hover";
+}: PseudoClassProps) => ":hover" | "";
 declare const isNotHovered: ({
   hovered
 }: PseudoClassProps) => ":not(*)" | ":not(:hover)";
 declare const isFocused: ({
   focused
-}: PseudoClassProps) => "" | ":focus";
+}: PseudoClassProps) => ":focus" | "";
 declare const isNotFocused: ({
   focused
 }: PseudoClassProps) => ":not(*)" | ":not(:focus)";
 declare const isFocusedVisible: ({
   focused
-}: PseudoClassProps) => "" | ":focus-visible";
+}: PseudoClassProps) => ":focus-visible" | "";
 declare const isNotFocusedVisible: ({
   focused
 }: PseudoClassProps) => ":not(*)" | ":not(:focus-visible)";
 declare const isActive: ({
   active
-}: PseudoClassProps) => "" | ":focus-within";
+}: PseudoClassProps) => ":focus-within" | "";
 declare const isNotActive: ({
   active
 }: PseudoClassProps) => ":not(*)" | ":not(:focus-within)";
 declare const isChecked: ({
   checked
-}: PseudoClassProps) => "" | ":checked";
+}: PseudoClassProps) => ":checked" | "";
 declare const isIndeterminate: ({
   mixed
-}: PseudoClassProps) => "" | ":indeterminate";
+}: PseudoClassProps) => ":indeterminate" | "";
 declare const isNotChecked: ({
   checked
 }: PseudoClassProps) => ":not(*)" | ":not(:checked)";

package/dist/lib/useEmbeddedSurface.d.mts

@@ -1,6 +1,34 @@
 //#region lib/useEmbeddedSurface.d.ts
-/** Mount-scoped because React Aria mounts overlay content only while it is open. */
-declare function useEmbeddedSurface(): void;
+/**
+ * How long the overlay stays paused waiting for an acknowledgement. It has to outlast the host's
+ * animation lead so a slow acknowledgement still gets used rather than raced by this fallback.
+ */
+declare const EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS = 80;
+/** Mints an id for a surface whose registration and host gate live in separate components. */
+declare const useEmbeddedSurfaceId: () => string;
+/**
+ * Announces the surface to the host for as long as the caller is mounted. Callers must render
+ * only while their overlay is on screen: the host dims the shell around every announced surface,
+ * and holding the announcement through React Aria's exit animation is what keeps the two halves
+ * of the dim disappearing together.
+ */
+declare function useEmbeddedSurface(surfaceId?: string): void;
+type EmbeddedSurfaceGate = {
+  /** False while the overlay must hold its opening animation paused on its first frame. */ready: boolean;
+  /**
+   * CSS `animation-delay` that lands the overlay's animation on the host's shared start instant.
+   * Negative when the acknowledgement arrived after that instant, so the animation joins in
+   * progress rather than starting late.
+   */
+  animationDelayMs: number;
+};
+/**
+ * Holds the surface's opening animation until the host acknowledges it, then reports the delay that
+ * aligns the animation with the host's shared start instant. Lives outside the overlay so the gate
+ * can hold the child's animation from its very first frame, before the overlay content mounts and
+ * announces.
+ */
+declare const useEmbeddedSurfaceGate: (surfaceId: string, isOpen: boolean) => EmbeddedSurfaceGate;
 //#endregion
-export { useEmbeddedSurface as default };
+export { EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS, EmbeddedSurfaceGate, useEmbeddedSurface as default, useEmbeddedSurfaceGate, useEmbeddedSurfaceId };
 //# sourceMappingURL=useEmbeddedSurface.d.mts.map

package/dist/lib/useEmbeddedSurface.mjs

@@ -1,9 +1,14 @@
 import { EMBEDDED_SURFACE_CHANNEL, coerceChildboundEnvelope } from "./embeddedSurfaceProtocol.mjs";
 import { getEmbeddedSurfaceTransport, subscribeEmbeddedSurfaceTransportChanges } from "./embeddedSurfaceRegistry.mjs";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 //#region lib/useEmbeddedSurface.ts
 const SURFACE_REANNOUNCE_INTERVAL_MS = 2e3;
 const HELLO_ROTATION_THRESHOLD = 2;
+/**
+* How long the overlay stays paused waiting for an acknowledgement. It has to outlast the host's
+* animation lead so a slow acknowledgement still gets used rather than raced by this fallback.
+*/
+const EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS = 80;
 let fallbackId = 0;
 const sessions = /* @__PURE__ */ new WeakMap();
 const mintId = (prefix) => {
@@ -18,7 +23,9 @@ const getSession = (transport) => {
 	const session = {
 		connectionId: mintId("connection"),
 		surfaces: /* @__PURE__ */ new Set(),
-		unansweredHellos: 0
+		unansweredHellos: 0,
+		acknowledgedAt: /* @__PURE__ */ new Map(),
+		acknowledgementListeners: /* @__PURE__ */ new Map()
 	};
 	sessions.set(transport, session);
 	return session;
@@ -36,14 +43,21 @@ const sendSnapshot = (transport, session) => {
 	if (session.epoch == null) return;
 	send(transport, session, "surfaceSnapshot", {
 		epoch: session.epoch,
-		surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId }))
+		surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId })),
+		awaitsAck: true
 	});
 };
 const rotateConnection = (session) => {
 	session.connectionId = mintId("connection");
 	session.epoch = void 0;
+	session.acknowledgedAt.clear();
 	session.unansweredHellos = 0;
 };
+const acknowledgeSurface = (session, surfaceId, startAt) => {
+	if (session.acknowledgedAt.has(surfaceId)) return;
+	session.acknowledgedAt.set(surfaceId, startAt);
+	session.acknowledgementListeners.get(surfaceId)?.forEach((listener) => listener(startAt));
+};
 const startSurfaceLease = (transport, session) => {
 	if (session.leaseTimer != null) return;
 	session.leaseTimer = window.setInterval(() => {
@@ -61,13 +75,23 @@ const stopSurfaceLease = (session) => {
 const activateSession = (transport, session) => {
 	if (session.unsubscribe != null) return;
 	session.epoch = void 0;
+	session.acknowledgedAt.clear();
 	session.unansweredHellos = 0;
 	session.unsubscribe = transport.subscribe((message) => {
 		const childbound = coerceChildboundEnvelope(message);
 		if (!childbound || childbound.connectionId !== session.connectionId) return;
 		session.unansweredHellos = 0;
-		session.epoch = childbound.payload.epoch;
-		sendSnapshot(transport, session);
+		if (childbound.kind === "welcome") {
+			if (session.epoch !== childbound.payload.epoch) session.acknowledgedAt.clear();
+			session.epoch = childbound.payload.epoch;
+			sendSnapshot(transport, session);
+			return;
+		}
+		if (childbound.payload.epoch !== session.epoch) return;
+		if (childbound.kind !== "surfaceAck") return;
+		childbound.payload.surfaces.forEach(({ surfaceId }) => {
+			acknowledgeSurface(session, surfaceId, childbound.payload.startAt);
+		});
 	});
 	send(transport, session, "hello", {});
 };
@@ -76,12 +100,11 @@ const deactivateSession = (session) => {
 	session.unsubscribe = void 0;
 	stopSurfaceLease(session);
 	session.epoch = void 0;
+	session.acknowledgedAt.clear();
 	session.unansweredHellos = 0;
 };
-/** Mount-scoped because React Aria mounts overlay content only while it is open. */
-function useEmbeddedSurface() {
+const useEmbeddedSurfaceTransport = () => {
 	const [transport, setTransport] = useState(getEmbeddedSurfaceTransport);
-	const surfaceIdRef = useRef(void 0);
 	useEffect(() => {
 		const unsubscribe = subscribeEmbeddedSurfaceTransportChanges(() => {
 			setTransport(getEmbeddedSurfaceTransport());
@@ -89,22 +112,39 @@ function useEmbeddedSurface() {
 		setTransport(getEmbeddedSurfaceTransport());
 		return unsubscribe;
 	}, []);
+	return transport;
+};
+/** Mints an id for a surface whose registration and host gate live in separate components. */
+const useEmbeddedSurfaceId = () => {
+	const [surfaceId] = useState(() => mintId("surface"));
+	return surfaceId;
+};
+/**
+* Announces the surface to the host for as long as the caller is mounted. Callers must render
+* only while their overlay is on screen: the host dims the shell around every announced surface,
+* and holding the announcement through React Aria's exit animation is what keeps the two halves
+* of the dim disappearing together.
+*/
+function useEmbeddedSurface(surfaceId) {
+	const transport = useEmbeddedSurfaceTransport();
+	const fallbackSurfaceId = useEmbeddedSurfaceId();
+	const ownSurfaceId = surfaceId ?? fallbackSurfaceId;
 	useEffect(() => {
 		if (!transport) return;
-		const surfaceId = surfaceIdRef.current ??= mintId("surface");
 		const session = getSession(transport);
 		activateSession(transport, session);
-		session.surfaces.add(surfaceId);
+		session.surfaces.add(ownSurfaceId);
 		if (session.surfaces.size === 1) startSurfaceLease(transport, session);
 		if (session.epoch != null) sendSnapshot(transport, session);
 		return () => {
-			session.surfaces.delete(surfaceId);
+			session.surfaces.delete(ownSurfaceId);
+			session.acknowledgedAt.delete(ownSurfaceId);
 			if (session.surfaces.size === 0) {
 				if (session.epoch != null) sendSnapshot(transport, session);
 				deactivateSession(session);
 			} else sendSnapshot(transport, session);
 		};
-	}, [transport]);
+	}, [ownSurfaceId, transport]);
 	useEffect(() => {
 		if (!transport) return;
 		let active = true;
@@ -129,7 +169,72 @@ function useEmbeddedSurface() {
 		};
 	}, [transport]);
 }
+const PENDING_GATE = {
+	ready: false,
+	animationDelayMs: 0
+};
+const RELEASED_GATE = {
+	ready: true,
+	animationDelayMs: 0
+};
+const releasedGateAt = (startAt) => ({
+	ready: true,
+	animationDelayMs: Math.min(startAt - Date.now(), 80)
+});
+/**
+* Holds the surface's opening animation until the host acknowledges it, then reports the delay that
+* aligns the animation with the host's shared start instant. Lives outside the overlay so the gate
+* can hold the child's animation from its very first frame, before the overlay content mounts and
+* announces.
+*/
+const useEmbeddedSurfaceGate = (surfaceId, isOpen) => {
+	const transport = useEmbeddedSurfaceTransport();
+	const [gate, setGate] = useState(() => getEmbeddedSurfaceTransport() == null ? RELEASED_GATE : PENDING_GATE);
+	const [wasOpen, setWasOpen] = useState(isOpen);
+	if (wasOpen !== isOpen) {
+		setWasOpen(isOpen);
+		if (isOpen && transport != null) setGate(PENDING_GATE);
+	}
+	useEffect(() => {
+		if (!transport) {
+			setGate(RELEASED_GATE);
+			return;
+		}
+		if (!isOpen) return;
+		const session = getSession(transport);
+		const acknowledgedStartAt = session.acknowledgedAt.get(surfaceId);
+		if (acknowledgedStartAt != null) {
+			setGate(releasedGateAt(acknowledgedStartAt));
+			return;
+		}
+		const listeners = session.acknowledgementListeners.get(surfaceId) ?? /* @__PURE__ */ new Set();
+		const unsubscribe = () => {
+			listeners.delete(release);
+			if (listeners.size === 0) session.acknowledgementListeners.delete(surfaceId);
+		};
+		const fallback = window.setTimeout(() => {
+			unsubscribe();
+			setGate(RELEASED_GATE);
+		}, 80);
+		const release = (startAt) => {
+			window.clearTimeout(fallback);
+			unsubscribe();
+			setGate(releasedGateAt(startAt));
+		};
+		listeners.add(release);
+		session.acknowledgementListeners.set(surfaceId, listeners);
+		return () => {
+			window.clearTimeout(fallback);
+			unsubscribe();
+		};
+	}, [
+		isOpen,
+		surfaceId,
+		transport
+	]);
+	return gate;
+};
 //#endregion
-export { useEmbeddedSurface as default };
+export { EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS, useEmbeddedSurface as default, useEmbeddedSurfaceGate, useEmbeddedSurfaceId };
 
 //# sourceMappingURL=useEmbeddedSurface.mjs.map

package/dist/lib/useEmbeddedSurface.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useEmbeddedSurface.mjs","names":[],"sources":["../../lib/useEmbeddedSurface.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport {\n  EMBEDDED_SURFACE_PROTOCOL_VERSION,\n  EMBEDDED_SURFACE_CHANNEL,\n  coerceChildboundEnvelope,\n} from 'design-system/lib/embeddedSurfaceProtocol';\nimport {\n  getEmbeddedSurfaceTransport,\n  subscribeEmbeddedSurfaceTransportChanges,\n  type EmbeddedSurfaceTransport,\n} from 'design-system/lib/embeddedSurfaceRegistry';\n\nconst SURFACE_REANNOUNCE_INTERVAL_MS = 2000;\nconst HELLO_ROTATION_THRESHOLD = 2;\n\nlet fallbackId = 0;\ntype SurfaceSession = {\n  connectionId: string;\n  surfaces: Set<string>;\n  leaseTimer?: number;\n  unsubscribe?: () => void;\n  unansweredHellos: number;\n  epoch?: string;\n};\nconst sessions = new WeakMap<EmbeddedSurfaceTransport, SurfaceSession>();\n\nconst mintId = (prefix: string): string => {\n  const randomUUID =\n    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'\n      ? crypto.randomUUID()\n      : undefined;\n  if (randomUUID) {\n    return `${prefix}-${randomUUID}`;\n  }\n  fallbackId += 1;\n  return `${prefix}-${fallbackId.toString(36)}`;\n};\n\nconst getSession = (transport: EmbeddedSurfaceTransport) => {\n  const current = sessions.get(transport);\n  if (current) {\n    return current;\n  }\n  const session: SurfaceSession = {\n    connectionId: mintId('connection'),\n    surfaces: new Set<string>(),\n    unansweredHellos: 0,\n  };\n  sessions.set(transport, session);\n  return session;\n};\n\nconst send = (\n  transport: EmbeddedSurfaceTransport,\n  session: SurfaceSession,\n  kind: 'hello' | 'surfaceSnapshot',\n  payload: Record<string, never> | { epoch: string; surfaces: Array<{ surfaceId: string }> },\n) => {\n  transport.send({\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    connectionId: session.connectionId,\n    kind,\n    payload,\n  });\n};\n\nconst sendSnapshot = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.epoch == null) {\n    return;\n  }\n  send(transport, session, 'surfaceSnapshot', {\n    epoch: session.epoch,\n    surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId })),\n  });\n};\n\nconst rotateConnection = (session: SurfaceSession) => {\n  // The host may have retired this connectionId in its LRU, so hellos stay dropped\n  // until a fresh connectionId is minted.\n  session.connectionId = mintId('connection');\n  session.epoch = undefined;\n  session.unansweredHellos = 0;\n};\n\nconst startSurfaceLease = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.leaseTimer != null) {\n    return;\n  }\n  // Re-announces active surfaces to renew the host's lease. If the child stops\n  // running, announcements cease and the host releases shell effects after timeout.\n  session.leaseTimer = window.setInterval(() => {\n    session.unansweredHellos += 1;\n    if (session.unansweredHellos >= HELLO_ROTATION_THRESHOLD) {\n      rotateConnection(session);\n    }\n    send(transport, session, 'hello', {});\n    sendSnapshot(transport, session);\n  }, SURFACE_REANNOUNCE_INTERVAL_MS);\n};\n\nconst stopSurfaceLease = (session: SurfaceSession) => {\n  if (session.leaseTimer == null) {\n    return;\n  }\n  window.clearInterval(session.leaseTimer);\n  session.leaseTimer = undefined;\n};\n\nconst activateSession = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.unsubscribe != null) {\n    return;\n  }\n  session.epoch = undefined;\n  session.unansweredHellos = 0;\n  session.unsubscribe = transport.subscribe((message) => {\n    const childbound = coerceChildboundEnvelope(message);\n    if (!childbound || childbound.connectionId !== session.connectionId) {\n      return;\n    }\n    session.unansweredHellos = 0;\n    session.epoch = childbound.payload.epoch;\n    sendSnapshot(transport, session);\n  });\n  send(transport, session, 'hello', {});\n};\n\nconst deactivateSession = (session: SurfaceSession) => {\n  session.unsubscribe?.();\n  session.unsubscribe = undefined;\n  stopSurfaceLease(session);\n  session.epoch = undefined;\n  session.unansweredHellos = 0;\n};\n\n/** Mount-scoped because React Aria mounts overlay content only while it is open. */\nexport default function useEmbeddedSurface(): void {\n  const [transport, setTransport] = useState<EmbeddedSurfaceTransport | null>(\n    getEmbeddedSurfaceTransport,\n  );\n  const surfaceIdRef = useRef<string | undefined>(undefined);\n\n  useEffect(() => {\n    const unsubscribe = subscribeEmbeddedSurfaceTransportChanges(() => {\n      setTransport(getEmbeddedSurfaceTransport());\n    });\n    // A transport can register between render and this effect, and the registry only\n    // notifies on change, so reconcile once the subscription is installed.\n    setTransport(getEmbeddedSurfaceTransport());\n    return unsubscribe;\n  }, []);\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    const surfaceId = (surfaceIdRef.current ??= mintId('surface'));\n    const session = getSession(transport);\n    activateSession(transport, session);\n    session.surfaces.add(surfaceId);\n    const wasEmpty = session.surfaces.size === 1;\n    if (wasEmpty) {\n      startSurfaceLease(transport, session);\n    }\n    if (session.epoch != null) {\n      sendSnapshot(transport, session);\n    }\n\n    return () => {\n      session.surfaces.delete(surfaceId);\n      if (session.surfaces.size === 0) {\n        if (session.epoch != null) {\n          sendSnapshot(transport, session);\n        }\n        deactivateSession(session);\n      } else {\n        sendSnapshot(transport, session);\n      }\n    };\n  }, [transport]);\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    let active = true;\n    let pendingAnimationFrame: number | null = null;\n    const handleFocusOut = (event: FocusEvent) => {\n      if (event.relatedTarget != null) {\n        return;\n      }\n      event.stopImmediatePropagation();\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n      const target = event.target;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      pendingAnimationFrame = requestAnimationFrame(() => {\n        pendingAnimationFrame = null;\n        if (!active || !target.isConnected) {\n          return;\n        }\n        if (\n          document.hasFocus() &&\n          (document.activeElement == null || document.activeElement === document.body)\n        ) {\n          target.focus();\n        }\n      });\n    };\n    document.addEventListener('focusout', handleFocusOut, true);\n    return () => {\n      active = false;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      document.removeEventListener('focusout', handleFocusOut, true);\n    };\n  }, [transport]);\n}\n"],"mappings":"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"}
+{"version":3,"file":"useEmbeddedSurface.mjs","names":[],"sources":["../../lib/useEmbeddedSurface.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport {\n  EMBEDDED_SURFACE_PROTOCOL_VERSION,\n  EMBEDDED_SURFACE_CHANNEL,\n  coerceChildboundEnvelope,\n  type EmbeddedSurfacePayloads,\n} from 'design-system/lib/embeddedSurfaceProtocol';\nimport {\n  getEmbeddedSurfaceTransport,\n  subscribeEmbeddedSurfaceTransportChanges,\n  type EmbeddedSurfaceTransport,\n} from 'design-system/lib/embeddedSurfaceRegistry';\n\nconst SURFACE_REANNOUNCE_INTERVAL_MS = 2000;\nconst HELLO_ROTATION_THRESHOLD = 2;\n/**\n * How long the overlay stays paused waiting for an acknowledgement. It has to outlast the host's\n * animation lead so a slow acknowledgement still gets used rather than raced by this fallback.\n */\nexport const EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS = 80;\n\nlet fallbackId = 0;\ntype SurfaceSession = {\n  connectionId: string;\n  surfaces: Set<string>;\n  leaseTimer?: number;\n  unsubscribe?: () => void;\n  unansweredHellos: number;\n  epoch?: string;\n  /** Acknowledged surfaces, keyed to the shared wall-clock instant their animation starts at. */\n  acknowledgedAt: Map<string, number>;\n  acknowledgementListeners: Map<string, Set<(startAt: number) => void>>;\n};\nconst sessions = new WeakMap<EmbeddedSurfaceTransport, SurfaceSession>();\n\nconst mintId = (prefix: string): string => {\n  const randomUUID =\n    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'\n      ? crypto.randomUUID()\n      : undefined;\n  if (randomUUID) {\n    return `${prefix}-${randomUUID}`;\n  }\n  fallbackId += 1;\n  return `${prefix}-${fallbackId.toString(36)}`;\n};\n\nconst getSession = (transport: EmbeddedSurfaceTransport) => {\n  const current = sessions.get(transport);\n  if (current) {\n    return current;\n  }\n  const session: SurfaceSession = {\n    connectionId: mintId('connection'),\n    surfaces: new Set<string>(),\n    unansweredHellos: 0,\n    acknowledgedAt: new Map<string, number>(),\n    acknowledgementListeners: new Map<string, Set<(startAt: number) => void>>(),\n  };\n  sessions.set(transport, session);\n  return session;\n};\n\nconst send = (\n  transport: EmbeddedSurfaceTransport,\n  session: SurfaceSession,\n  kind: 'hello' | 'surfaceSnapshot',\n  payload: EmbeddedSurfacePayloads['hello'] | EmbeddedSurfacePayloads['surfaceSnapshot'],\n) => {\n  transport.send({\n    channel: EMBEDDED_SURFACE_CHANNEL,\n    version: EMBEDDED_SURFACE_PROTOCOL_VERSION,\n    connectionId: session.connectionId,\n    kind,\n    payload,\n  });\n};\n\nconst sendSnapshot = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.epoch == null) {\n    return;\n  }\n  send(transport, session, 'surfaceSnapshot', {\n    epoch: session.epoch,\n    surfaces: Array.from(session.surfaces, (surfaceId) => ({ surfaceId })),\n    awaitsAck: true,\n  });\n};\n\nconst rotateConnection = (session: SurfaceSession) => {\n  // The host may have retired this connectionId in its LRU, so hellos stay dropped\n  // until a fresh connectionId is minted.\n  session.connectionId = mintId('connection');\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n};\n\nconst acknowledgeSurface = (session: SurfaceSession, surfaceId: string, startAt: number) => {\n  if (session.acknowledgedAt.has(surfaceId)) {\n    return;\n  }\n  session.acknowledgedAt.set(surfaceId, startAt);\n  session.acknowledgementListeners.get(surfaceId)?.forEach((listener) => listener(startAt));\n};\n\nconst startSurfaceLease = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.leaseTimer != null) {\n    return;\n  }\n  // Re-announces active surfaces to renew the host's lease. If the child stops\n  // running, announcements cease and the host releases shell effects after timeout.\n  session.leaseTimer = window.setInterval(() => {\n    session.unansweredHellos += 1;\n    if (session.unansweredHellos >= HELLO_ROTATION_THRESHOLD) {\n      rotateConnection(session);\n    }\n    send(transport, session, 'hello', {});\n    sendSnapshot(transport, session);\n  }, SURFACE_REANNOUNCE_INTERVAL_MS);\n};\n\nconst stopSurfaceLease = (session: SurfaceSession) => {\n  if (session.leaseTimer == null) {\n    return;\n  }\n  window.clearInterval(session.leaseTimer);\n  session.leaseTimer = undefined;\n};\n\nconst activateSession = (transport: EmbeddedSurfaceTransport, session: SurfaceSession) => {\n  if (session.unsubscribe != null) {\n    return;\n  }\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n  session.unsubscribe = transport.subscribe((message) => {\n    const childbound = coerceChildboundEnvelope(message);\n    if (!childbound || childbound.connectionId !== session.connectionId) {\n      return;\n    }\n    session.unansweredHellos = 0;\n    if (childbound.kind === 'welcome') {\n      if (session.epoch !== childbound.payload.epoch) {\n        session.acknowledgedAt.clear();\n      }\n      session.epoch = childbound.payload.epoch;\n      sendSnapshot(transport, session);\n      return;\n    }\n    if (childbound.payload.epoch !== session.epoch) {\n      return;\n    }\n    if (childbound.kind !== 'surfaceAck') {\n      return;\n    }\n    childbound.payload.surfaces.forEach(({ surfaceId }) => {\n      acknowledgeSurface(session, surfaceId, childbound.payload.startAt);\n    });\n  });\n  send(transport, session, 'hello', {});\n};\n\nconst deactivateSession = (session: SurfaceSession) => {\n  session.unsubscribe?.();\n  session.unsubscribe = undefined;\n  stopSurfaceLease(session);\n  session.epoch = undefined;\n  session.acknowledgedAt.clear();\n  session.unansweredHellos = 0;\n};\n\nconst useEmbeddedSurfaceTransport = (): EmbeddedSurfaceTransport | null => {\n  const [transport, setTransport] = useState<EmbeddedSurfaceTransport | null>(\n    getEmbeddedSurfaceTransport,\n  );\n\n  useEffect(() => {\n    const unsubscribe = subscribeEmbeddedSurfaceTransportChanges(() => {\n      setTransport(getEmbeddedSurfaceTransport());\n    });\n    // A transport can register between render and this effect, and the registry only\n    // notifies on change, so reconcile once the subscription is installed.\n    setTransport(getEmbeddedSurfaceTransport());\n    return unsubscribe;\n  }, []);\n\n  return transport;\n};\n\n/** Mints an id for a surface whose registration and host gate live in separate components. */\nexport const useEmbeddedSurfaceId = (): string => {\n  const [surfaceId] = useState(() => mintId('surface'));\n  return surfaceId;\n};\n\n/**\n * Announces the surface to the host for as long as the caller is mounted. Callers must render\n * only while their overlay is on screen: the host dims the shell around every announced surface,\n * and holding the announcement through React Aria's exit animation is what keeps the two halves\n * of the dim disappearing together.\n */\nexport default function useEmbeddedSurface(surfaceId?: string): void {\n  const transport = useEmbeddedSurfaceTransport();\n  const fallbackSurfaceId = useEmbeddedSurfaceId();\n  const ownSurfaceId = surfaceId ?? fallbackSurfaceId;\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    const session = getSession(transport);\n    activateSession(transport, session);\n    session.surfaces.add(ownSurfaceId);\n    if (session.surfaces.size === 1) {\n      startSurfaceLease(transport, session);\n    }\n    if (session.epoch != null) {\n      sendSnapshot(transport, session);\n    }\n\n    return () => {\n      session.surfaces.delete(ownSurfaceId);\n      session.acknowledgedAt.delete(ownSurfaceId);\n      if (session.surfaces.size === 0) {\n        if (session.epoch != null) {\n          sendSnapshot(transport, session);\n        }\n        deactivateSession(session);\n      } else {\n        sendSnapshot(transport, session);\n      }\n    };\n  }, [ownSurfaceId, transport]);\n\n  useEffect(() => {\n    if (!transport) {\n      return;\n    }\n    let active = true;\n    let pendingAnimationFrame: number | null = null;\n    const handleFocusOut = (event: FocusEvent) => {\n      if (event.relatedTarget != null) {\n        return;\n      }\n      event.stopImmediatePropagation();\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n      const target = event.target;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      pendingAnimationFrame = requestAnimationFrame(() => {\n        pendingAnimationFrame = null;\n        if (!active || !target.isConnected) {\n          return;\n        }\n        if (\n          document.hasFocus() &&\n          (document.activeElement == null || document.activeElement === document.body)\n        ) {\n          target.focus();\n        }\n      });\n    };\n    document.addEventListener('focusout', handleFocusOut, true);\n    return () => {\n      active = false;\n      if (pendingAnimationFrame != null) {\n        cancelAnimationFrame(pendingAnimationFrame);\n      }\n      document.removeEventListener('focusout', handleFocusOut, true);\n    };\n  }, [transport]);\n}\n\nexport type EmbeddedSurfaceGate = {\n  /** False while the overlay must hold its opening animation paused on its first frame. */\n  ready: boolean;\n  /**\n   * CSS `animation-delay` that lands the overlay's animation on the host's shared start instant.\n   * Negative when the acknowledgement arrived after that instant, so the animation joins in\n   * progress rather than starting late.\n   */\n  animationDelayMs: number;\n};\n\nconst PENDING_GATE: EmbeddedSurfaceGate = { ready: false, animationDelayMs: 0 };\nconst RELEASED_GATE: EmbeddedSurfaceGate = { ready: true, animationDelayMs: 0 };\n// A start instant further out than the no-ack fallback would have waited is not a schedule worth\n// honouring; with fill-mode `both` an unbounded positive delay holds the overlay hidden.\nconst releasedGateAt = (startAt: number): EmbeddedSurfaceGate => ({\n  ready: true,\n  animationDelayMs: Math.min(startAt - Date.now(), EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS),\n});\n\n/**\n * Holds the surface's opening animation until the host acknowledges it, then reports the delay that\n * aligns the animation with the host's shared start instant. Lives outside the overlay so the gate\n * can hold the child's animation from its very first frame, before the overlay content mounts and\n * announces.\n */\nexport const useEmbeddedSurfaceGate = (surfaceId: string, isOpen: boolean): EmbeddedSurfaceGate => {\n  const transport = useEmbeddedSurfaceTransport();\n  const [gate, setGate] = useState(() =>\n    getEmbeddedSurfaceTransport() == null ? RELEASED_GATE : PENDING_GATE,\n  );\n  // The gate stays mounted while closed, so a previous cycle left the surface released. Flip back\n  // to pending during the opening render: an effect would land after the browser has painted a\n  // frame of the entrance animation. Closing leaves the gate untouched so the overlay's animation\n  // declaration is stable while React Aria watches it for an exit animation.\n  const [wasOpen, setWasOpen] = useState(isOpen);\n  if (wasOpen !== isOpen) {\n    setWasOpen(isOpen);\n    if (isOpen && transport != null) {\n      setGate(PENDING_GATE);\n    }\n  }\n\n  useEffect(() => {\n    if (!transport) {\n      setGate(RELEASED_GATE);\n      return;\n    }\n    if (!isOpen) {\n      return;\n    }\n    const session = getSession(transport);\n    const acknowledgedStartAt = session.acknowledgedAt.get(surfaceId);\n    if (acknowledgedStartAt != null) {\n      setGate(releasedGateAt(acknowledgedStartAt));\n      return;\n    }\n\n    const listeners =\n      session.acknowledgementListeners.get(surfaceId) ?? new Set<(startAt: number) => void>();\n    const unsubscribe = () => {\n      listeners.delete(release);\n      if (listeners.size === 0) {\n        session.acknowledgementListeners.delete(surfaceId);\n      }\n    };\n    // A host that never acknowledges (an older dashboard, or none at all) must not leave the\n    // overlay paused at opacity 0. Once released either way, the animation is running and a later\n    // acknowledgement must not reschedule it.\n    const fallback = window.setTimeout(() => {\n      unsubscribe();\n      setGate(RELEASED_GATE);\n    }, EMBEDDED_SURFACE_HOST_ACK_TIMEOUT_MS);\n    const release = (startAt: number) => {\n      window.clearTimeout(fallback);\n      unsubscribe();\n      setGate(releasedGateAt(startAt));\n    };\n    listeners.add(release);\n    session.acknowledgementListeners.set(surfaceId, listeners);\n\n    return () => {\n      window.clearTimeout(fallback);\n      unsubscribe();\n    };\n  }, [isOpen, surfaceId, transport]);\n\n  return gate;\n};\n"],"mappings":"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"}

package/dist/lib/useResizablePanel.d.mts

@@ -0,0 +1,49 @@
+//#region lib/useResizablePanel.d.ts
+declare enum PanelState {
+  Drawer = "drawer",
+  Maximized = "maximized"
+}
+interface UseResizablePanelOptions {
+  initialPanelState?: PanelState;
+  initialSize?: number;
+  /** Smallest size the panel snaps back to when a drag ends below it. */
+  minSize: number;
+  /** Fraction of the available space past which a released drag snaps to maximized. */
+  snapThreshold?: number;
+}
+interface ResizablePanelState {
+  /** Leave maximized and return to the drawer at `size` (null = `minSize`). */
+  collapse: () => void;
+  /** Open the drawer at the given size. */
+  expandTo: (size: number) => void;
+  /**
+   * Called on every drag frame. `size` is the requested panel size and
+   * `maxSize` the space the panel can grow into; both in px.
+   */
+  handleDragMove: (size: number, maxSize: number) => void;
+  /** Called once when a drag ends; snaps to maximized or back to `minSize`. */
+  handleDragRelease: () => void;
+  maximize: () => void;
+  panelState: PanelState;
+  /**
+   * Return from maximized to the drawer size the panel had before maximizing
+   * (for a drag that snapped to maximized, the size when the drag started).
+   */
+  restore: () => void;
+  size: number | null;
+  toggleMaximized: () => void;
+}
+/**
+ * Size and maximize/restore state for a resizable panel. Coordinates are
+ * caller-supplied sizes, so the hook works for both viewport- and
+ * container-anchored panels.
+ */
+declare const useResizablePanel: ({
+  initialPanelState,
+  initialSize,
+  minSize,
+  snapThreshold
+}: UseResizablePanelOptions) => ResizablePanelState;
+//#endregion
+export { PanelState, ResizablePanelState, useResizablePanel };
+//# sourceMappingURL=useResizablePanel.d.mts.map

package/dist/lib/useResizablePanel.mjs

@@ -0,0 +1,75 @@
+import { useCallback, useRef, useState } from "react";
+//#region lib/useResizablePanel.ts
+let PanelState = /* @__PURE__ */ function(PanelState) {
+	PanelState["Drawer"] = "drawer";
+	PanelState["Maximized"] = "maximized";
+	return PanelState;
+}({});
+/**
+* Size and maximize/restore state for a resizable panel. Coordinates are
+* caller-supplied sizes, so the hook works for both viewport- and
+* container-anchored panels.
+*/
+const useResizablePanel = ({ initialPanelState = "drawer", initialSize, minSize, snapThreshold = .95 }) => {
+	const [size, setSize] = useState(initialSize ?? null);
+	const [panelState, setPanelState] = useState(initialPanelState);
+	const maxSizeRef = useRef(null);
+	const dragStartSizeRef = useRef(null);
+	const sizeBeforeMaximizeRef = useRef(initialPanelState === "maximized" ? initialSize ?? null : null);
+	const maximize = useCallback(() => {
+		if (panelState !== "maximized") sizeBeforeMaximizeRef.current = size;
+		setPanelState("maximized");
+	}, [panelState, size]);
+	const restore = useCallback(() => {
+		setPanelState("drawer");
+		setSize(sizeBeforeMaximizeRef.current ?? minSize);
+	}, [minSize]);
+	const toggleMaximized = useCallback(() => {
+		if (panelState === "maximized") restore();
+		else maximize();
+	}, [
+		maximize,
+		panelState,
+		restore
+	]);
+	return {
+		collapse: useCallback(() => {
+			setPanelState("drawer");
+			setSize(null);
+		}, []),
+		expandTo: useCallback((nextSize) => {
+			setPanelState("drawer");
+			setSize(nextSize);
+		}, []),
+		handleDragMove: useCallback((nextSize, maxSize) => {
+			if (maxSizeRef.current == null) dragStartSizeRef.current = panelState === "maximized" ? null : size;
+			maxSizeRef.current = maxSize;
+			setPanelState("drawer");
+			setSize(Math.max(0, Math.min(nextSize, maxSize)));
+		}, [panelState, size]),
+		handleDragRelease: useCallback(() => {
+			const maxSize = maxSizeRef.current;
+			const dragStartSize = dragStartSizeRef.current;
+			maxSizeRef.current = null;
+			dragStartSizeRef.current = null;
+			if (size == null || maxSize == null) return;
+			if (size > maxSize * snapThreshold) {
+				sizeBeforeMaximizeRef.current = dragStartSize;
+				setPanelState("maximized");
+			} else if (size < minSize) setSize(minSize);
+		}, [
+			minSize,
+			size,
+			snapThreshold
+		]),
+		maximize,
+		panelState,
+		restore,
+		size,
+		toggleMaximized
+	};
+};
+//#endregion
+export { PanelState, useResizablePanel };
+
+//# sourceMappingURL=useResizablePanel.mjs.map

package/dist/lib/useResizablePanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizablePanel.mjs","names":[],"sources":["../../lib/useResizablePanel.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport enum PanelState {\n  Drawer = 'drawer',\n  Maximized = 'maximized',\n}\n\ninterface UseResizablePanelOptions {\n  initialPanelState?: PanelState;\n  initialSize?: number;\n  /** Smallest size the panel snaps back to when a drag ends below it. */\n  minSize: number;\n  /** Fraction of the available space past which a released drag snaps to maximized. */\n  snapThreshold?: number;\n}\n\nexport interface ResizablePanelState {\n  /** Leave maximized and return to the drawer at `size` (null = `minSize`). */\n  collapse: () => void;\n  /** Open the drawer at the given size. */\n  expandTo: (size: number) => void;\n  /**\n   * Called on every drag frame. `size` is the requested panel size and\n   * `maxSize` the space the panel can grow into; both in px.\n   */\n  handleDragMove: (size: number, maxSize: number) => void;\n  /** Called once when a drag ends; snaps to maximized or back to `minSize`. */\n  handleDragRelease: () => void;\n  maximize: () => void;\n  panelState: PanelState;\n  /**\n   * Return from maximized to the drawer size the panel had before maximizing\n   * (for a drag that snapped to maximized, the size when the drag started).\n   */\n  restore: () => void;\n  size: number | null;\n  toggleMaximized: () => void;\n}\n\n/**\n * Size and maximize/restore state for a resizable panel. Coordinates are\n * caller-supplied sizes, so the hook works for both viewport- and\n * container-anchored panels.\n */\nexport const useResizablePanel = ({\n  initialPanelState = PanelState.Drawer,\n  initialSize,\n  minSize,\n  snapThreshold = 0.95,\n}: UseResizablePanelOptions): ResizablePanelState => {\n  const [size, setSize] = useState<number | null>(initialSize ?? null);\n  const [panelState, setPanelState] = useState<PanelState>(initialPanelState);\n  const maxSizeRef = useRef<number | null>(null);\n  const dragStartSizeRef = useRef<number | null>(null);\n  const sizeBeforeMaximizeRef = useRef<number | null>(\n    initialPanelState === PanelState.Maximized ? (initialSize ?? null) : null,\n  );\n\n  const maximize = useCallback(() => {\n    if (panelState !== PanelState.Maximized) {\n      sizeBeforeMaximizeRef.current = size;\n    }\n    setPanelState(PanelState.Maximized);\n  }, [panelState, size]);\n\n  const restore = useCallback(() => {\n    setPanelState(PanelState.Drawer);\n    setSize(sizeBeforeMaximizeRef.current ?? minSize);\n  }, [minSize]);\n\n  const toggleMaximized = useCallback(() => {\n    if (panelState === PanelState.Maximized) {\n      restore();\n    } else {\n      maximize();\n    }\n  }, [maximize, panelState, restore]);\n\n  const collapse = useCallback(() => {\n    setPanelState(PanelState.Drawer);\n    setSize(null);\n  }, []);\n\n  const expandTo = useCallback((nextSize: number) => {\n    setPanelState(PanelState.Drawer);\n    setSize(nextSize);\n  }, []);\n\n  const handleDragMove = useCallback(\n    (nextSize: number, maxSize: number) => {\n      if (maxSizeRef.current == null) {\n        dragStartSizeRef.current = panelState === PanelState.Maximized ? null : size;\n      }\n      maxSizeRef.current = maxSize;\n      setPanelState(PanelState.Drawer);\n      setSize(Math.max(0, Math.min(nextSize, maxSize)));\n    },\n    [panelState, size],\n  );\n\n  const handleDragRelease = useCallback(() => {\n    const maxSize = maxSizeRef.current;\n    const dragStartSize = dragStartSizeRef.current;\n    maxSizeRef.current = null;\n    dragStartSizeRef.current = null;\n    if (size == null || maxSize == null) {\n      return;\n    }\n\n    if (size > maxSize * snapThreshold) {\n      sizeBeforeMaximizeRef.current = dragStartSize;\n      setPanelState(PanelState.Maximized);\n    } else if (size < minSize) {\n      setSize(minSize);\n    }\n  }, [minSize, size, snapThreshold]);\n\n  return {\n    collapse,\n    expandTo,\n    handleDragMove,\n    handleDragRelease,\n    maximize,\n    panelState,\n    restore,\n    size,\n    toggleMaximized,\n  };\n};\n"],"mappings":";;AAEA,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,YAAA;AACA,YAAA,eAAA;;KACD;;;;;;AAuCD,MAAa,qBAAqB,EAChC,oBAAA,UACA,aACA,SACA,gBAAgB,UACmC;CACnD,MAAM,CAAC,MAAM,WAAW,SAAwB,eAAe,KAAK;CACpE,MAAM,CAAC,YAAY,iBAAiB,SAAqB,kBAAkB;CAC3E,MAAM,aAAa,OAAsB,KAAK;CAC9C,MAAM,mBAAmB,OAAsB,KAAK;CACpD,MAAM,wBAAwB,OAC5B,sBAAA,cAA8C,eAAe,OAAQ,KACtE;CAED,MAAM,WAAW,kBAAkB;AACjC,MAAI,eAAA,YACF,uBAAsB,UAAU;AAElC,gBAAA,YAAmC;IAClC,CAAC,YAAY,KAAK,CAAC;CAEtB,MAAM,UAAU,kBAAkB;AAChC,gBAAA,SAAgC;AAChC,UAAQ,sBAAsB,WAAW,QAAQ;IAChD,CAAC,QAAQ,CAAC;CAEb,MAAM,kBAAkB,kBAAkB;AACxC,MAAI,eAAA,YACF,UAAS;MAET,WAAU;IAEX;EAAC;EAAU;EAAY;EAAQ,CAAC;AAyCnC,QAAO;EACL,UAxCe,kBAAkB;AACjC,iBAAA,SAAgC;AAChC,WAAQ,KAAK;KACZ,EAAE,CAqCK;EACR,UApCe,aAAa,aAAqB;AACjD,iBAAA,SAAgC;AAChC,WAAQ,SAAS;KAChB,EAAE,CAiCK;EACR,gBAhCqB,aACpB,UAAkB,YAAoB;AACrC,OAAI,WAAW,WAAW,KACxB,kBAAiB,UAAU,eAAA,cAAsC,OAAO;AAE1E,cAAW,UAAU;AACrB,iBAAA,SAAgC;AAChC,WAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,CAAC;KAEnD,CAAC,YAAY,KAAK,CAuBJ;EACd,mBArBwB,kBAAkB;GAC1C,MAAM,UAAU,WAAW;GAC3B,MAAM,gBAAgB,iBAAiB;AACvC,cAAW,UAAU;AACrB,oBAAiB,UAAU;AAC3B,OAAI,QAAQ,QAAQ,WAAW,KAC7B;AAGF,OAAI,OAAO,UAAU,eAAe;AAClC,0BAAsB,UAAU;AAChC,kBAAA,YAAmC;cAC1B,OAAO,QAChB,SAAQ,QAAQ;KAEjB;GAAC;GAAS;GAAM;GAAc,CAMd;EACjB;EACA;EACA;EACA;EACA;EACD"}

package/dist/{message-Cu84fcqB.d.mts → message-DaiDXonE.d.mts}

@@ -6,4 +6,4 @@ declare enum MessageType {
 }
 //#endregion
 export { MessageType as t };
-//# sourceMappingURL=message-Cu84fcqB.d.mts.map
+//# sourceMappingURL=message-DaiDXonE.d.mts.map

package/dist/mixins/focus.d.mts

@@ -1,4 +1,4 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-CcSlKNev.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-BPdn-ofQ.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/focus.d.ts

package/dist/mixins/focus.mjs

@@ -1,6 +1,6 @@
+import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
 import { isFocusedVisible, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { Color } from "@persona/design-tokens";
-import { css } from "styled-components";
 //#region mixins/focus.ts
 const focusStyle = css`
   outline-offset: 1px;

package/dist/mixins/hoverable.d.mts

@@ -1,5 +1,5 @@
-import { t as PseudoClassProps } from "../PseudoClassProps-CcSlKNev.mjs";
-import { i as Variant } from "../theme-D9Y6NOzb.mjs";
+import { t as PseudoClassProps } from "../PseudoClassProps-BPdn-ofQ.mjs";
+import { i as Variant } from "../theme-Biwx2eJZ.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region mixins/hoverable.d.ts

package/dist/mixins/hoverable.mjs

@@ -1,8 +1,8 @@
+import { r as css } from "../styledComponentsInterop-8zScIQyC.mjs";
+import "../variables/transitions.mjs";
 import { isDisabled, isHovered, isNotDisabled } from "../lib/pseudoClass.mjs";
 import { focusOutlineControlled } from "./focus.mjs";
 import "../variables/effect.mjs";
-import "../variables/transitions.mjs";
-import { css } from "styled-components";
 //#region mixins/hoverable.ts
 const hoverMixin = css`
   box-shadow: