@astryxdesign/core 0.7.8 → 0.7.9-canary.0236bb8

package/dist/PowerSearch/PowerSearch.js

@@ -50,6 +50,7 @@ import { buildRelativeDateOptions, PowerSearchValueEditor } from "./PowerSearchV
 import { resolveOperatorLabel } from "./resolveOperatorLabel.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useLocale } from "../i18n/useLocale.js";
+import { useCalendarSystem } from "../i18n/useCalendarSystem.js";
 import { formatTokenValueText } from "./formatTokenValue.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
@@ -306,6 +307,7 @@ export function PowerSearch({
   const searchSource = usePowerSearchSource(config, maxSearchResults);
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(undefined, 'PowerSearch');
   const label = labelFromProps ?? t('@astryx.powersearch.label');
   const placeholder = placeholderFromProps ?? t('@astryx.powersearch.placeholder');
   const popoverSaveButtonLabel = popoverSaveButtonLabelFromProps ?? t('@astryx.powersearch.editor.apply');
@@ -398,13 +400,13 @@ export function PowerSearch({
     const fieldLabel = field?.label ?? '';
     const operatorLabel = operator ? resolveOperatorLabel(operator, t) : '';
     const label = `${fieldLabel}: ${operatorLabel}`.trim();
-    const value = operator ? formatTokenValueText(operator.value, filter.value, Math.max(maxTokenLength - fieldLabel.length - operatorLabel.length, 10), locale, undefined, undefined, timezoneID) : null;
+    const value = operator ? formatTokenValueText(operator.value, filter.value, Math.max(maxTokenLength - fieldLabel.length - operatorLabel.length, 10), locale, calendar, undefined, undefined, timezoneID) : null;
     return {
       label,
       value,
       full: value != null ? `${label} ${value}` : label
     };
-  }, [config, maxTokenLength, t, locale, timezoneID]);
+  }, [config, maxTokenLength, t, locale, timezoneID, calendar]);
   // The built-in token being edited. A token from a `components` override
   // names itself, so its editor keeps the plain popover.
   const editedFilter = popoverState.type === 'editing' ? filters[popoverState.filterIndex] : undefined;
@@ -526,7 +528,7 @@ export function PowerSearch({
       const operator = config.getOperator(filter.field, filter.operator);
       const resolvedOp = operator ? resolveOperatorLabel(operator, t) : '';
       const operatorLabel = resolvedOp ? `: ${resolvedOp}` : '';
-      const valueStr = operator ? formatFilterValue(config, operator.value, filter.value, maxTokenLength, t, locale, timezoneID) : '';
+      const valueStr = operator ? formatFilterValue(config, operator.value, filter.value, maxTokenLength, t, locale, timezoneID, calendar) : '';
       const displayLabel = valueStr ? `${field?.label ?? filter.field}${operatorLabel} ${valueStr}` : `${field?.label ?? filter.field}${operatorLabel}`;
       return {
         id: `filter-${index}-${filter.field}-${filter.operator}`,
@@ -539,7 +541,7 @@ export function PowerSearch({
         }
       };
     });
-  }, [filters, config, maxTokenLength, timezoneID, t, locale]);
+  }, [filters, config, maxTokenLength, timezoneID, t, locale, calendar]);
 
   // Handle tokenizer onChange (field selected from typeahead)
   const handleTokenizerChange = useCallback((_items, change) => {
@@ -1032,7 +1034,12 @@ export function PowerSearch({
                   className: "xjyslct xfoc8du xkh2ocl x78zum5 x6s0dn4 xt970qd x7a5moj x1ghz6dp xc342km xng3xce xjbqb8w xv1l7n4 x9ynric xjm74w1 xw6l6zx x1yc453h xuxw1ft x1ypdohk xvivl9a x1a2a7pz x10l6tqk x10a8y8t xeuugli x1717udv"
                 }
               }[!!(filters.length > 0) << 0],
-              children: filters.length === 0 ? placeholder : null
+              children: filters.length === 0 ? /*#__PURE__*/_jsx("span", {
+                ...{
+                  className: "xeuugli xb3r6kr xlyipyv xuxw1ft"
+                },
+                children: placeholder
+              }) : null
             })]
           }), (endContent || isRenderable(resultCountText)) && /*#__PURE__*/_jsxs("div", {
             ref: endLaneRef,

package/dist/PowerSearch/PowerSearchBottomSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearchBottomSheet.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchBottomSheet.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PowerSearchBottomSheet.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchBottomSheet.tsx"],"names":[],"mappings":"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"}

package/dist/PowerSearch/PowerSearchBottomSheet.js

@@ -62,6 +62,7 @@ import { TextInput } from "../TextInput/TextInput.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useListFormatter } from "../i18n/useListFormatter.js";
 import { useLocale } from "../i18n/useLocale.js";
+import { useCalendarSystem } from "../i18n/useCalendarSystem.js";
 import { SheetConfirmation } from "../internal/SheetConfirmation.js";
 import { useDismissSearchOnTouchDrag } from "../internal/useDismissSearchOnTouchDrag.js";
 import "../theme/tokens.stylex.js";
@@ -609,6 +610,7 @@ export function PowerSearchBottomSheet({
   } = editors;
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(undefined, 'PowerSearch');
   const formatList = useListFormatter();
   const isInteractive = !isDisabled && !isReadOnly;
 
@@ -1037,12 +1039,12 @@ export function PowerSearchBottomSheet({
     // as the value step's choice row does ("3 days ago"), through the
     // catalog's relative-date messages, so the sheet agrees with itself. The popover token
     // shows the stored key (a known gap of the record).
-    const value = operator.value.type === 'date_relative' && filter.value.type === 'date_relative' ? resolveRelativeDateLabel(operator.value, filter.value.value, t, editors.buildRelativeDateOptions) : formatTokenValueText(operator.value, filter.value, Number.MAX_SAFE_INTEGER, locale, t, formatList, timezoneID);
+    const value = operator.value.type === 'date_relative' && filter.value.type === 'date_relative' ? resolveRelativeDateLabel(operator.value, filter.value.value, t, editors.buildRelativeDateOptions) : formatTokenValueText(operator.value, filter.value, Number.MAX_SAFE_INTEGER, locale, calendar, t, formatList, timezoneID);
     return {
       label,
       value
     };
-  }, [config, editors, formatList, locale, t, timezoneID]);
+  }, [calendar, config, editors, formatList, locale, t, timezoneID]);
   const describeFilter = useCallback(filter => {
     const parts = describeFilterParts(filter);
     return parts.value ? t('@astryx.powersearch.sheet.labelValue', {

package/dist/PowerSearch/PowerSearchToken.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearchToken.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchToken.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AASnD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EAAE,UAAU,EAClB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE,qBAAqB,qBA+CvB;yBAzDe,gBAAgB"}
+{"version":3,"file":"PowerSearchToken.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearchToken.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,SAAS,CAAC;AASnD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EAAE,UAAU,EAClB,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,UAAU,EACV,UAAU,GACX,EAAE,qBAAqB,qBAiDvB;yBA3De,gBAAgB"}

package/dist/PowerSearch/PowerSearchToken.js

@@ -12,6 +12,7 @@ import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Token } from "../Token/index.js";
 import { useLocale } from "../i18n/useLocale.js";
+import { useCalendarSystem } from "../i18n/useCalendarSystem.js";
 import "../theme/tokens.stylex.js";
 import { fontWeightVars } from "../theme/tokens.stylex.js";
 import { formatFilterValue } from "./formatFilterValue.js";
@@ -40,12 +41,13 @@ export function PowerSearchToken({
   const config = useInternalConfig(configProp);
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(undefined, 'PowerSearchToken');
   const fieldLabel = field.label;
   const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
   const operatorLabel = resolvedOperatorLabel ? `: ${resolvedOperatorLabel}` : '';
   const tokenLabel = `${fieldLabel}${operatorLabel}`;
   const adjustedMaxLength = Math.max(maxLength - fieldLabel.length - resolvedOperatorLabel.length, 10);
-  const valueStr = formatFilterValue(config, operator.value, filter.value, adjustedMaxLength, t, locale, timezoneID);
+  const valueStr = formatFilterValue(config, operator.value, filter.value, adjustedMaxLength, t, locale, timezoneID, calendar);
   const valueContent = valueStr ? /*#__PURE__*/_jsx("span", {
     ...{
       className: "x1lvx875"

package/dist/PowerSearch/formatFilterValue.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file formatFilterValue.ts
- * @input OperatorValue, FilterValue, config
+ * @input OperatorValue, FilterValue, config, locale, time zone, calendar
  * @output Formatted display string for a filter value
  * @position Pure utility; consumed by PowerSearch token rendering
  *
@@ -10,6 +10,7 @@
 import type { OperatorValue, FilterValue } from './types.js';
 import type { InternalConfig } from './useInternalConfig.js';
 import type { Locale, TranslatorFn } from '../i18n/index.js';
+import { type CalendarSystem } from '../utils/calendarSystem.js';
 /**
  * A number in the provider locale's digits, decimal mark, and — unless the
  * options say otherwise — grouping. The shared number helper for
@@ -25,6 +26,11 @@ export declare function formatSharedNumber(value: number, locale: Locale, option
  * `isDateOnly: false` is an instant: its date and time in `timezoneID`,
  * else the viewer's zone, the time its editor reads and writes.
  */
-export declare function formatDateAbsolute(unixSeconds: number, locale: Locale, timezoneID: string | undefined, isDateOnly?: boolean): string;
-export declare function formatFilterValue(_config: InternalConfig, operatorValue: OperatorValue, filterValue: FilterValue, maxLength: number, t: TranslatorFn, locale: Locale, timezoneID?: string): string;
+export declare function formatDateAbsolute(unixSeconds: number, locale: Locale, timezoneID: string | undefined, isDateOnly?: boolean, calendar?: CalendarSystem): string;
+/**
+ * The display text of a filter value. A `date_absolute` value is written in
+ * `calendar`, which defaults to Gregorian; PowerSearch passes the calendar that
+ * its provider resolves.
+ */
+export declare function formatFilterValue(_config: InternalConfig, operatorValue: OperatorValue, filterValue: FilterValue, maxLength: number, t: TranslatorFn, locale: Locale, timezoneID?: string, calendar?: CalendarSystem): string;
 //# sourceMappingURL=formatFilterValue.d.ts.map

package/dist/PowerSearch/formatFilterValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatFilterValue.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/formatFilterValue.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,WAAW,EAAW,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAyBlD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,IAAI,CACZ,IAAI,CAAC,mBAAmB,EACxB,aAAa,GAAG,uBAAuB,CACxC,GACA,MAAM,CAER;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,UAAU,UAAO,GAChB,MAAM,CAmBR;AAcD,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EACvB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,MAAM,EACjB,CAAC,EAAE,YAAY,EACf,MAAM,EAAE,MAAM,EACd,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,CA8HR"}
+{"version":3,"file":"formatFilterValue.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/formatFilterValue.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,WAAW,EAAW,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAClD,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,yBAAyB,CAAC;AAyBjC;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,IAAI,CACZ,IAAI,CAAC,mBAAmB,EACxB,aAAa,GAAG,uBAAuB,CACxC,GACA,MAAM,CAER;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,GAAG,SAAS,EAC9B,UAAU,UAAO,EACjB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CAiBR;AAcD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,cAAc,EACvB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,MAAM,EACjB,CAAC,EAAE,YAAY,EACf,MAAM,EAAE,MAAM,EACd,UAAU,CAAC,EAAE,MAAM,EACnB,QAAQ,GAAE,cAA0B,GACnC,MAAM,CA+HR"}

package/dist/PowerSearch/formatFilterValue.js

@@ -2,7 +2,7 @@
 
 /**
  * @file formatFilterValue.ts
- * @input OperatorValue, FilterValue, config
+ * @input OperatorValue, FilterValue, config, locale, time zone, calendar
  * @output Formatted display string for a filter value
  * @position Pure utility; consumed by PowerSearch token rendering
  *
@@ -10,6 +10,7 @@
  * - /packages/core/src/PowerSearch/index.ts
  */
 
+import { formatCalendarInstant } from "../utils/calendarSystem.js";
 import { truncateCharacters } from "../utils/characters.js";
 import { registerEnglishFallback } from "../i18n/englishFallback.js";
 import english from "../i18n/generated-english/PowerSearch/formatFilterValue.generated.js";
@@ -45,23 +46,19 @@ export function formatSharedNumber(value, locale, options) {
  * `isDateOnly: false` is an instant: its date and time in `timezoneID`,
  * else the viewer's zone, the time its editor reads and writes.
  */
-export function formatDateAbsolute(unixSeconds, locale, timezoneID, isDateOnly = true) {
+export function formatDateAbsolute(unixSeconds, locale, timezoneID, isDateOnly = true, calendar = 'gregory') {
   const options = isDateOnly ? {
     year: 'numeric',
     month: 'short',
-    day: 'numeric',
-    timeZone: resolveDateZone(timezoneID, true),
-    calendar: 'gregory'
+    day: 'numeric'
   } : {
     year: 'numeric',
     month: 'short',
     day: 'numeric',
     hour: 'numeric',
-    minute: '2-digit',
-    timeZone: resolveDateZone(timezoneID, false),
-    calendar: 'gregory'
+    minute: '2-digit'
   };
-  return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
+  return formatCalendarInstant(calendar, new Date(unixSeconds * 1000), options, locale, resolveDateZone(timezoneID, isDateOnly));
 }
 function formatRelativeDate(value) {
   // value is stored as a descriptive string like "7d" or "1w"
@@ -70,7 +67,13 @@ function formatRelativeDate(value) {
 function formatDateRange(_value, t) {
   return t('@astryx.powersearch.valueEditor.dateRange');
 }
-export function formatFilterValue(_config, operatorValue, filterValue, maxLength, t, locale, timezoneID) {
+
+/**
+ * The display text of a filter value. A `date_absolute` value is written in
+ * `calendar`, which defaults to Gregorian; PowerSearch passes the calendar that
+ * its provider resolves.
+ */
+export function formatFilterValue(_config, operatorValue, filterValue, maxLength, t, locale, timezoneID, calendar = 'gregory') {
   switch (filterValue.type) {
     case 'empty':
       return '';
@@ -148,7 +151,7 @@ export function formatFilterValue(_config, operatorValue, filterValue, maxLength
     case 'time':
       return filterValue.value;
     case 'date_absolute':
-      return truncate(formatDateAbsolute(filterValue.unixSeconds, locale, timezoneID, operatorValue.type !== 'date_absolute' || operatorValue.isDateOnly !== false), maxLength);
+      return truncate(formatDateAbsolute(filterValue.unixSeconds, locale, timezoneID, operatorValue.type !== 'date_absolute' || operatorValue.isDateOnly !== false, calendar), maxLength);
     case 'date_relative':
       return formatRelativeDate(filterValue.value);
     case 'date_range':

package/dist/PowerSearch/formatTokenValue.d.ts

@@ -1,7 +1,8 @@
 /**
  * @fileoverview The text a PowerSearch filter token shows for a value.
  *
- * @input `OperatorValue`, `FilterValue`, a width budget, and the locale.
+ * @input `OperatorValue`, `FilterValue`, a width budget, the locale, and the
+ * calendar.
  * @output `formatTokenValueText` — one string, or null for an empty value.
  * @position Shared by the token itself (`PowerSearch.tsx`) and the sheet
  * presentation's Filters rows and removal announcement
@@ -10,6 +11,7 @@
  */
 import type { OperatorValue, FilterValue } from './types.js';
 import type { Locale, TranslatorFn } from '../i18n/index.js';
+import type { CalendarSystem } from '../utils/calendarSystem.js';
 type ListFormatFn = (items: ReadonlyArray<string>) => string;
 /**
  * The text a filter token shows for a value: the one place that decides how
@@ -17,12 +19,14 @@ type ListFormatFn = (items: ReadonlyArray<string>) => string;
  * the sheet presentation's Filters rows and its removal announcement — can
  * use the same words and the same zone handling. `maxLength` is the token's
  * width budget; pass `Number.MAX_SAFE_INTEGER` for the untruncated text.
+ * A `date_absolute` value is written in `calendar`, the calendar that the
+ * provider resolves.
  * With `t`, the list, date-range and nested summaries resolve through the
  * catalog (`@astryx.powersearch.valueEditor.*`); without it they are the
  * token's own literals. With `formatList` (the provider's list formatter),
  * several labels join as a list in the locale; without it they join with
  * the token's literal ", ".
  */
-export declare function formatTokenValueText(operatorValue: OperatorValue, filterValue: FilterValue, maxLength: number, locale: Locale, t?: TranslatorFn, formatList?: ListFormatFn, timezoneID?: string): string | null;
+export declare function formatTokenValueText(operatorValue: OperatorValue, filterValue: FilterValue, maxLength: number, locale: Locale, calendar: CalendarSystem, t?: TranslatorFn, formatList?: ListFormatFn, timezoneID?: string): string | null;
 export {};
 //# sourceMappingURL=formatTokenValue.d.ts.map

package/dist/PowerSearch/formatTokenValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatTokenValue.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/formatTokenValue.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,WAAW,EAAW,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAQlD,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC;AA6E7D;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,CAAC,CAAC,EAAE,YAAY,EAChB,UAAU,CAAC,EAAE,YAAY,EACzB,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,GAAG,IAAI,CAoGf"}
+{"version":3,"file":"formatTokenValue.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/formatTokenValue.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,aAAa,EAAE,WAAW,EAAW,MAAM,SAAS,CAAC;AAClE,OAAO,KAAK,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAQ5D,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC;AA6E7D;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,cAAc,EACxB,CAAC,CAAC,EAAE,YAAY,EAChB,UAAU,CAAC,EAAE,YAAY,EACzB,UAAU,CAAC,EAAE,MAAM,GAClB,MAAM,GAAG,IAAI,CAqGf"}

package/dist/PowerSearch/formatTokenValue.js

@@ -3,7 +3,8 @@
 /**
  * @fileoverview The text a PowerSearch filter token shows for a value.
  *
- * @input `OperatorValue`, `FilterValue`, a width budget, and the locale.
+ * @input `OperatorValue`, `FilterValue`, a width budget, the locale, and the
+ * calendar.
  * @output `formatTokenValueText` — one string, or null for an empty value.
  * @position Shared by the token itself (`PowerSearch.tsx`) and the sheet
  * presentation's Filters rows and removal announcement
@@ -88,13 +89,15 @@ function formatListText(labels, maxLength, t, formatList) {
  * the sheet presentation's Filters rows and its removal announcement — can
  * use the same words and the same zone handling. `maxLength` is the token's
  * width budget; pass `Number.MAX_SAFE_INTEGER` for the untruncated text.
+ * A `date_absolute` value is written in `calendar`, the calendar that the
+ * provider resolves.
  * With `t`, the list, date-range and nested summaries resolve through the
  * catalog (`@astryx.powersearch.valueEditor.*`); without it they are the
  * token's own literals. With `formatList` (the provider's list formatter),
  * several labels join as a list in the locale; without it they join with
  * the token's literal ", ".
  */
-export function formatTokenValueText(operatorValue, filterValue, maxLength, locale, t, formatList, timezoneID) {
+export function formatTokenValueText(operatorValue, filterValue, maxLength, locale, calendar, t, formatList, timezoneID) {
   switch (filterValue.type) {
     case 'empty':
       return null;
@@ -130,7 +133,7 @@ export function formatTokenValueText(operatorValue, filterValue, maxLength, loca
       return filterValue.value;
     case 'date_absolute':
       // The token reads a value in the zone its editor uses.
-      return truncateString(formatDateAbsolute(filterValue.unixSeconds, locale, timezoneID, operatorValue.type !== 'date_absolute' || operatorValue.isDateOnly !== false), maxLength);
+      return truncateString(formatDateAbsolute(filterValue.unixSeconds, locale, timezoneID, operatorValue.type !== 'date_absolute' || operatorValue.isDateOnly !== false, calendar), maxLength);
     case 'date_relative':
       return truncateString(filterValue.value, maxLength);
     case 'date_range':

package/dist/RadioList/RadioListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AA0IlD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAoLpB;yBAnMe,aAAa"}
+{"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAe5C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,cAAc,CAAC;AAsIlD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBA+LpB;yBA9Me,aAAa"}

package/dist/RadioList/RadioListItem.js

@@ -31,9 +31,13 @@ import "../Indicator/indicator.markers.stylex.js";
 import { indicatorScope } from "../Indicator/indicator.markers.stylex.js";
 import { useIndicatorFocusRing } from "../hooks/useIndicatorFocusRing.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useTouchHitArea } from "../utils/touchHitArea.js";
+import { touchHitAreaStyles } from "../utils/touchHitArea.stylex.js";
 import { useIndicator } from "../Indicator/useIndicator.js";
 import { Item } from "../Item/Item.js";
 import { themeProps } from "../utils/themeProps.js";
+import { rowPressLayerStyles } from "../privateAttributes/press.stylex.js";
 
 // The touch press's paint, declared by the shared overlay styles on the
 // element the controller writes to (`pressedAlpha`) at the press's strength,
@@ -104,7 +108,6 @@ const rowStyles = {
     kaIpWk: "x2u8bby",
     k7Eaqz: "xeuugli",
     kWkggS: "xjbqb8w",
-    kKwaWg: "x18o3ruo",
     $$css: true
   },
   press: {
@@ -186,6 +189,13 @@ export function RadioListItem({
   // since the visible label is now a plain (non-`<label>`) text node — a real
   // `<label htmlFor>` would double-fire under delegation.
   const radioRef = useRef(null);
+
+  // Under a coarse pointer an option's row grows toward 44 px through an
+  // invisible band, and the row keeps its size. A tap on the band lands on
+  // the row, which hands it to the radio. The band's insets stay live while
+  // the row takes taps, and clear when it stops.
+  const watchRowHitArea = useTouchHitArea(!isDisabled);
+  const mergedRowRef = useMergedRefs(ref, watchRowHitArea);
   const radioCircle = /*#__PURE__*/_jsxs("div", {
     ...stylex.props(styles.radioWrapper, wrapperSizeStyles[size], !isDisabled && styles.indicatorPressOverlay),
     ...focusProps,
@@ -251,7 +261,7 @@ export function RadioListItem({
     children: [radioCircle, startContent]
   }) : radioCircle;
   return /*#__PURE__*/_jsx(Item, {
-    ref: ref,
+    ref: mergedRowRef,
     ...(isDisabled ? undefined : pressable),
     startContent: mediaContent
     // Delegate row-surface clicks (label text, description, and the empty
@@ -276,11 +286,14 @@ export function RadioListItem({
     // the painting row element (Item), the same element that carries the
     // theme target, so a theme's hover styling stays in step with the tint.
     !isDisabled && indicatorScope,
+    // The row keeps no press paint of its own: the circle paints, and
+    // reads the strength whose release the row keeps.
+    rowPressLayerStyles.cellWithoutLayer,
     // Restore the bare default look: zero Item's padding/radius and its
     // interactive hover/press background. Applied after Item's own base
     // styles so it wins within the base layer; a `radio-list-item` theme
     // still overrides it from the higher `astryx-theme` layer.
-    rowStyles.root, !isDisabled && rowStyles.press, xstyle],
+    rowStyles.root, !isDisabled && rowStyles.press, !isDisabled && touchHitAreaStyles.layer, xstyle],
     ...mergeProps(
     // One target for every row, carrying its size and runtime state so a
     // theme can express "selected option at large" or restyle disabled

package/dist/Resizable/ResizeHandle.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
-import { type ResizableProps } from './useResizable.js';
+import { type ResizableProps, type ResizableRegion } from './useResizable.js';
 type PillPlacement = 'start' | 'end' | 'center' | 'auto';
 export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'style'> {
     ref?: React.Ref<HTMLDivElement>;
@@ -57,8 +57,8 @@ export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'styl
      * @default 'Resize handle'
      */
     label?: string;
-    /** Resize props from useResizable region. */
-    resizable?: ResizableProps;
+    /** The output of `useResizable()`, or its `props`. */
+    resizable?: ResizableRegion | ResizableProps;
     /** Custom handle content. Overrides the default pill. */
     children?: ReactNode;
 }
@@ -72,12 +72,12 @@ export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'styl
  * @example
  * ```
  * <ResizeHandle
- *   resizable={sidebar.props}
+ *   resizable={resizable}
  *   direction="horizontal"
  *   hasDivider />
  * ```
  */
-export declare function ResizeHandle({ direction, position: positionMode, isReversed, isDisabled, hasDivider, isAlwaysVisible, pillPlacement, label: labelFromProps, resizable, children, xstyle, className, ref, ...props }: ResizeHandleProps): import("react").JSX.Element;
+export declare function ResizeHandle({ direction, position: positionMode, isReversed, isDisabled, hasDivider, isAlwaysVisible, pillPlacement, label: labelFromProps, resizable: resizableValue, children, xstyle, className, ref, ...props }: ResizeHandleProps): import("react").JSX.Element;
 export declare namespace ResizeHandle {
     var displayName: string;
 }

package/dist/Resizable/ResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAmBxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8PzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAsSnB;yBArTe,YAAY"}
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AA4BxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8PzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,sDAAsD;IACtD,SAAS,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAE7C,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,cAAc,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAyVnB;yBAxWe,YAAY"}

package/dist/Resizable/ResizeHandle.js

@@ -11,18 +11,21 @@
  * A drag takes pointer capture on the element it starts on, so moves over an
  * embedded frame still arrive.
  */
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { mergeProps, rtlStyles } from "../utils/index.js";
-import { getCollapseControls, getEffectiveMaxPx } from "./useResizable.js";
+import { getCollapseControls, getEffectiveMaxPx, resizablePropsOf } from "./useResizable.js";
 import { createResizeGesture } from "./resizeGesture.js";
+import { handOverPane, registerResizeHandle, resizablePaneFor, watchResizablePanes } from "./resizablePane.js";
 import { separatorAttributes } from "./separatorAttributes.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useInteractionModalityTracking } from "../utils/interactionModality.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Resizable/ResizeHandle.generated.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -277,7 +280,7 @@ const dynamicStyles = {
  * @example
  * ```
  * <ResizeHandle
- *   resizable={sidebar.props}
+ *   resizable={resizable}
  *   direction="horizontal"
  *   hasDivider />
  * ```
@@ -292,13 +295,14 @@ export function ResizeHandle({
   isAlwaysVisible = true,
   pillPlacement = 'auto',
   label: labelFromProps,
-  resizable,
+  resizable: resizableValue,
   children,
   xstyle,
   className,
   ref,
   ...props
 }) {
+  const resizable = resizableValue == null ? undefined : resizablePropsOf(resizableValue);
   const t = useComponentTranslator();
   const label = labelFromProps ?? t('@astryx.resizable.handle.label');
   const handleRef = useRef(null);
@@ -410,6 +414,41 @@ export function ResizeHandle({
     };
   }, [hasRegion, regionGesture]);
 
+  // --- The LayoutPanel beside a handle given `resizable` props ---
+
+  // A collapsing panel moves focus here, and the ring follows the last input.
+  const {
+    ref: modalityRef
+  } = useInteractionModalityTracking();
+  // A LayoutPanel at the region's size, with no `resizable` prop, has no
+  // controller to find it. This handle holds it collapsed with the region, so
+  // focus inside it moves here and it goes inert. A panel lent later is found
+  // at once.
+  const [, rerender] = useReducer(count => count + 1, 0);
+  const heldPaneRef = useRef(null);
+  // The element goes in the handle registry, for a collapsing panel beside it
+  // to hand focus to. When the element goes, a held panel opens.
+  const registryRef = useCallback(element => {
+    if (element == null) {
+      return;
+    }
+    const unregister = registerResizeHandle(element);
+    return () => {
+      unregister();
+      heldPaneRef.current = handOverPane(heldPaneRef.current, null, false, null);
+    };
+  }, []);
+  const isRegionCollapsed = resizable?._isCollapsed ?? false;
+  // Syncs with the lent-panel registry. A panel lent or taken back re-renders
+  // this handle, so it looks for its pane again.
+  useEffect(() => hasRegion ? watchResizablePanes(rerender) : undefined, [hasRegion]);
+  // Syncs the held panel with the region's collapse state after each commit.
+  useIsomorphicLayoutEffect(() => {
+    const element = handleRef.current;
+    const pane = hasRegion && element != null ? resizablePaneFor(element, isReversed) : null;
+    heldPaneRef.current = handOverPane(heldPaneRef.current, pane, isRegionCollapsed, element);
+  });
+
   // --- ARIA ---
   const sizeNow = resizable?._size;
   const minNow = resizable?._minSizePx;
@@ -451,7 +490,7 @@ export function ResizeHandle({
     }
   };
   return /*#__PURE__*/_jsxs("div", {
-    ref: useMergedRefs(ref, handleRef),
+    ref: useMergedRefs(ref, handleRef, registryRef, modalityRef),
     role: "separator",
     ...aria,
     "aria-label": label,

package/dist/Resizable/resizablePane.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @file resizablePane.ts
+ * @input A LayoutPanel's element, and the collapse state the ResizeHandle
+ *   beside it reports
+ * @output The internal channel through which a LayoutPanel at a region's size
+ *   lends its element to the ResizeHandle beside it, and the ResizeHandle a
+ *   collapsing panel hands focus to
+ * @position Internal to Resizable and Layout; no entry point exports it. No
+ *   React, and no DOM work on import
+ */
+/** What a LayoutPanel lends the ResizeHandle beside it. */
+export interface ResizablePane {
+    readonly element: HTMLElement;
+    /**
+     * The handle says whether its region is collapsed, and which handle focus
+     * inside the panel moves to as it collapses. The panel is then inert and
+     * hidden from assistive technology while it is collapsed.
+     */
+    setCollapsed(isCollapsed: boolean, focusTarget: HTMLElement | null): void;
+}
+/** ResizeHandle registers the element it renders; returns the unregister. */
+export declare function registerResizeHandle(element: Element): () => void;
+/**
+ * Calls `listener` whenever a panel is lent beside a handle or taken back, so
+ * a handle looks for its pane again. Returns the function that stops it.
+ */
+export declare function watchResizablePanes(listener: () => void): () => void;
+/**
+ * The pane a resize handle resizes: the lent LayoutPanel just before it, or
+ * just after it when the region is reversed.
+ */
+export declare function resizablePaneFor(handle: Element, isReversed: boolean): ResizablePane | null;
+/**
+ * Moves a handle's hold from `held` to `next`, and returns `next`. A pane the
+ * handle no longer holds opens. The held pane takes the region's collapse
+ * state, and focus inside it moves to `handle` as it collapses.
+ */
+export declare function handOverPane(held: ResizablePane | null, next: ResizablePane | null, isCollapsed: boolean, handle: HTMLElement | null): ResizablePane | null;
+/**
+ * The ResizeHandle beside a panel, on the side that faces the content. It is
+ * after a start panel, before an end panel, and on either side elsewhere.
+ */
+export declare function resizeHandleBeside(panel: Element, area: string | null | undefined): HTMLElement | null;
+/** LayoutPanel's side of the channel, one per panel. */
+export interface ResizablePaneLink {
+    /** For useSyncExternalStore: whether a handle holds the panel collapsed. */
+    readonly subscribe: (listener: () => void) => () => void;
+    readonly isCollapsed: () => boolean;
+    /** The handle that named itself for focus to move to, if any. */
+    focusTarget(): HTMLElement | null;
+    /**
+     * From the panel's callback ref: its element, lent beside its handle for
+     * the handle to find. Null takes it back.
+     */
+    attach(element: HTMLElement | null): void;
+}
+export declare function createResizablePaneLink(): ResizablePaneLink;
+//# sourceMappingURL=resizablePane.d.ts.map

package/dist/Resizable/resizablePane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizablePane.d.ts","sourceRoot":"","sources":["../../src/Resizable/resizablePane.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,2DAA2D;AAC3D,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B;;;;OAIG;IACH,YAAY,CAAC,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3E;AAOD,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,IAAI,CAKjE;AAQD;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAKpE;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,UAAU,EAAE,OAAO,GAClB,aAAa,GAAG,IAAI,CAKtB;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,aAAa,GAAG,IAAI,EAC1B,IAAI,EAAE,aAAa,GAAG,IAAI,EAC1B,WAAW,EAAE,OAAO,EACpB,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,aAAa,GAAG,IAAI,CAMtB;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC9B,WAAW,GAAG,IAAI,CAapB;AAED,wDAAwD;AACxD,MAAM,WAAW,iBAAiB;IAChC,4EAA4E;IAC5E,QAAQ,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;IACzD,QAAQ,CAAC,WAAW,EAAE,MAAM,OAAO,CAAC;IACpC,iEAAiE;IACjE,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3C;AAED,wBAAgB,uBAAuB,IAAI,iBAAiB,CAwD3D"}