@astryxdesign/core 0.1.2-canary.bfcbf64 → 0.1.2-canary.c395fca

package/src/hooks/useKeyboardHint.tsx

@@ -0,0 +1,332 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useKeyboardHint.tsx
+ * @input Uses React, StyleX, Kbd, useLayer
+ * @output Exports useKeyboardHint hook — ephemeral arrow-key navigation hint
+ * @position Core hook; shows sighted keyboard users how to navigate composite
+ *   widgets that use roving tabindex (single Tab stop, arrows inside)
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/index.ts
+ * - /packages/core/src/hooks/useKeyboardHint.doc.mjs
+ * - /apps/storybook/stories/useKeyboardHint.stories.tsx
+ * - /packages/cli/templates/blocks/components/Hooks/useKeyboardHintHookUsage.tsx
+ */
+
+import React, {useCallback, useEffect, useRef, type ReactNode} from 'react';
+import * as stylex from '@stylexjs/stylex';
+import {
+  colorVars,
+  radiusVars,
+  shadowVars,
+  spacingVars,
+  typeScaleVars,
+} from '../theme/tokens.stylex';
+import {Kbd} from '../Kbd';
+import {useLayer} from '../Layer/useLayer';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type KeyboardHintOrientation = 'horizontal' | 'vertical' | 'both';
+
+export interface UseKeyboardHintOptions {
+  /**
+   * Orientation of the arrow-key navigation. Controls which arrow icons are
+   * shown in the hint badge.
+   * - `'horizontal'` → ← →
+   * - `'vertical'` → ↑ ↓
+   * - `'both'` → ← → ↑ ↓
+   * @default 'horizontal'
+   */
+  orientation?: KeyboardHintOrientation;
+
+  /**
+   * Milliseconds before the hint auto-dismisses after appearing.
+   * @default 3000
+   */
+  dismissAfterMs?: number;
+
+  /**
+   * Whether the hint is enabled. Set to false to disable for a specific
+   * instance (e.g. when the widget is read-only or the user has dismissed
+   * globally).
+   * @default true
+   */
+  isEnabled?: boolean;
+}
+
+export interface UseKeyboardHintReturn {
+  /**
+   * The popover hint element to render inside your component tree (portals to
+   * top layer via `popover="manual"`). Render unconditionally — it manages its
+   * own visibility.
+   */
+  hintElement: ReactNode;
+
+  /**
+   * Attach to the composite container's `onFocus`. Shows the hint on the first
+   * keyboard-focus (`:focus-visible`) entry from outside.
+   */
+  onFocus: (e: React.FocusEvent) => void;
+
+  /**
+   * Attach to the composite container's `onBlur`. Hides the hint when focus
+   * leaves the composite entirely.
+   */
+  onBlur: (e: React.FocusEvent) => void;
+
+  /**
+   * Attach to the composite container's `onKeyDown`. Dismisses the hint on the
+   * first arrow press (the user discovered the interaction).
+   */
+  onKeyDown: (e: React.KeyboardEvent) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const ARROW_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown']);
+
+const ARROW_HINT_KEYS: Record<
+  KeyboardHintOrientation,
+  ReadonlyArray<string>
+> = {
+  horizontal: ['left', 'right'],
+  vertical: ['up', 'down'],
+  both: ['left', 'right', 'up', 'down'],
+};
+
+const styles = stylex.create({
+  hint: {
+    // Top layer + anchor positioned
+    position: 'fixed',
+    inset: 'auto',
+    margin: 0,
+    border: 'none',
+
+    // Surface
+    backgroundColor: colorVars['--color-background-popover'],
+    borderRadius: radiusVars['--radius-element'],
+    boxShadow: shadowVars['--shadow-low'],
+    paddingBlockStart: spacingVars['--spacing-1'],
+    paddingBlockEnd: spacingVars['--spacing-1'],
+    paddingInlineStart: spacingVars['--spacing-2'],
+    paddingInlineEnd: spacingVars['--spacing-2'],
+
+    // Typography
+    fontSize: typeScaleVars['--text-supporting-size'],
+    lineHeight: typeScaleVars['--text-supporting-leading'],
+    color: colorVars['--color-text-secondary'],
+    whiteSpace: 'nowrap',
+
+    // Animation
+    opacity: {
+      default: 0,
+      ':popover-open': 1,
+    },
+    transitionProperty: 'opacity, display, overlay',
+    transitionDuration: '150ms',
+    transitionBehavior: 'allow-discrete',
+
+    // Don't capture pointer events (hint floats above content)
+    pointerEvents: 'none',
+  },
+  keys: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacingVars['--spacing-1'],
+  },
+  label: {
+    marginInlineStart: spacingVars['--spacing-1'],
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+/**
+ * Shows an ephemeral visual hint ("← → to navigate") anchored to the focused
+ * item when a composite widget first receives keyboard focus. Teaches sighted
+ * keyboard users that arrows navigate within the group.
+ *
+ * The hint renders in the top layer (popover="manual") and is CSS-anchor-
+ * positioned to the currently focused element, so it is never clipped by
+ * overflow containers. It auto-dismisses on first arrow press, timeout, or
+ * blur, and does not re-show for that instance.
+ *
+ * @example
+ * ```
+ * const hint = useKeyboardHint({orientation: 'horizontal'});
+ * <div role="toolbar" onFocus={hint.onFocus} onBlur={hint.onBlur} onKeyDown={hint.onKeyDown}>
+ *   {children}
+ *   {hint.hintElement}
+ * </div>
+ * ```
+ */
+export function useKeyboardHint(
+  options: UseKeyboardHintOptions = {},
+): UseKeyboardHintReturn {
+  const {
+    orientation = 'horizontal',
+    dismissAfterMs = 3000,
+    isEnabled = true,
+  } = options;
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const dismissedRef = useRef(false);
+  const isVisibleRef = useRef(false);
+  const layerAnchorRef = useRef<(el: HTMLElement | null) => void>(() => {});
+
+  const clearDismissTimeout = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const handleLayerShow = useCallback(() => {
+    isVisibleRef.current = true;
+  }, []);
+
+  const handleLayerHide = useCallback(() => {
+    isVisibleRef.current = false;
+    clearDismissTimeout();
+    layerAnchorRef.current(null);
+  }, [clearDismissTimeout]);
+
+  const layer = useLayer({
+    mode: 'context',
+    onShow: handleLayerShow,
+    onHide: handleLayerHide,
+  });
+  layerAnchorRef.current = layer.ref;
+
+  // Hide + mark dismissed (won't re-show for this instance)
+  const dismiss = useCallback(() => {
+    dismissedRef.current = true;
+    clearDismissTimeout();
+    layer.hide();
+    isVisibleRef.current = false;
+    layerAnchorRef.current(null);
+  }, [clearDismissTimeout, layer]);
+
+  // Show the layer anchored to the focused element
+  const show = useCallback(
+    (anchor: HTMLElement) => {
+      if (dismissedRef.current || !isEnabled) {
+        return;
+      }
+
+      layerAnchorRef.current(anchor);
+      layer.show();
+
+      clearDismissTimeout();
+      timeoutRef.current = setTimeout(() => {
+        dismiss();
+      }, dismissAfterMs);
+    },
+    [clearDismissTimeout, dismiss, dismissAfterMs, isEnabled, layer],
+  );
+
+  // Cleanup on unmount
+  useEffect(
+    () => () => {
+      clearDismissTimeout();
+      layerAnchorRef.current(null);
+    },
+    [clearDismissTimeout],
+  );
+
+  // --- Handlers ---
+
+  const onFocus = useCallback(
+    (e: React.FocusEvent) => {
+      if (dismissedRef.current || !isEnabled) {
+        return;
+      }
+      // Only show on keyboard focus (focus-visible)
+      const target = e.target as HTMLElement;
+      if (!target.matches(':focus-visible')) {
+        return;
+      }
+      // Only show when focus enters from outside the container
+      const container = e.currentTarget as HTMLElement;
+      if (
+        e.relatedTarget instanceof Node &&
+        container.contains(e.relatedTarget)
+      ) {
+        return;
+      }
+      show(target);
+    },
+    [show, isEnabled],
+  );
+
+  const onBlur = useCallback(
+    (e: React.FocusEvent) => {
+      if (!isVisibleRef.current) {
+        return;
+      }
+      const container = e.currentTarget as HTMLElement;
+      // Only dismiss when focus leaves the container entirely
+      if (
+        e.relatedTarget instanceof Node &&
+        container.contains(e.relatedTarget)
+      ) {
+        // Focus moved within — re-anchor to the new target
+        if (!dismissedRef.current && e.relatedTarget instanceof HTMLElement) {
+          layerAnchorRef.current(e.relatedTarget);
+        }
+        return;
+      }
+      dismiss();
+    },
+    [dismiss],
+  );
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (!isVisibleRef.current) {
+        return;
+      }
+      if (ARROW_KEYS.has(e.key)) {
+        dismiss();
+      }
+    },
+    [dismiss],
+  );
+
+  // --- Render the hint element ---
+
+  const arrowContent = (
+    <span {...stylex.props(styles.keys)}>
+      {ARROW_HINT_KEYS[orientation].map(key => (
+        <Kbd key={key} keys={key} />
+      ))}
+    </span>
+  );
+
+  const hintElement = layer.render(
+    <span aria-hidden="true">
+      {arrowContent}
+      <span {...stylex.props(styles.label)}>to navigate</span>
+    </span>,
+    {
+      placement: 'below',
+      alignment: 'start',
+      xstyle: styles.hint,
+      style: {
+        marginBlockStart: spacingVars['--spacing-2'],
+      },
+    },
+  );
+
+  return {hintElement, onFocus, onBlur, onKeyDown};
+}

package/src/hooks/useTreeFocus.doc.mjs

@@ -49,6 +49,13 @@ export const docs = {
       description: 'Notified when the hook moves focus to a treeitem. Consumers use this to move a single roving tab stop.',
       required: false,
     },
+    {
+      name: 'options.hasRovingTabIndex',
+      type: 'boolean',
+      description: 'When true, the hook owns a single roving tab stop across the visible treeitems (stamps tabindex 0/-1, repairs on mount, moves with navigation). Preserves an existing tabindex="0" seed on mount. Attach the returned `handleFocus` to keep the stop in sync after clicks.',
+      default: 'false',
+      required: false,
+    },
     {
       name: 'options.typeahead',
       type: 'boolean',
@@ -68,6 +75,11 @@ export const docs = {
       type: '(e: React.KeyboardEvent) => void',
       description: 'Key down handler to attach to the tree container.',
     },
+    {
+      name: 'handleFocus',
+      type: '(e: React.FocusEvent) => void',
+      description: 'Focus handler to attach to the container\'s onFocus. Keeps the roving tab stop in sync when hasRovingTabIndex is enabled; a no-op otherwise, so always safe to attach.',
+    },
     {
       name: 'focusFirst',
       type: '() => void',
@@ -85,7 +97,7 @@ export const docs = {
     bestPractices: [
       { guidance: true, description: 'Use for hierarchical tree widgets: wire onToggleExpand to your expansion state and onActiveChange to a single roving tab stop.' },
       { guidance: true, description: 'Attach both treeRef and handleKeyDown to the role="tree" container element.' },
-      { guidance: false, description: 'Use for linear lists (prefer useListFocus) or 2D grids (prefer useGridFocus) — those traversals differ from a tree.' },
+      { guidance: false, description: 'Use for linear lists (prefer useListFocus) or 2D grids (prefer useGridFocus); those traversals differ from a tree.' },
     ],
   },
   relatedComponents: ['TreeList'],
@@ -106,11 +118,13 @@ export const docsDense = {
     'options.onToggleExpand': 'expand/collapse treeitem by id (ArrowRight collapsed parent, ArrowLeft expanded parent, Enter/Space parent w/o own action).',
     'options.onActivate': 'called on Enter/Space activation. Return true when handled; else hook falls back to toggling expansion.',
     'options.onActiveChange': 'notified when focus moves to a treeitem. Use to move a single roving tab stop.',
+    'options.hasRovingTabIndex': 'hook owns a single roving tab stop (stamps tabindex 0/-1, repairs on mount, moves w/ nav). Preserves an existing tabindex="0" seed. Attach handleFocus to sync after clicks.',
     'options.typeahead': 'enable typeahead (jump to next item whose text starts with typed chars).',
   },
   returnDescriptions: {
     treeRef: 'ref to attach to tree container (role="tree").',
     handleKeyDown: 'key down handler for tree container.',
+    handleFocus: 'onFocus handler; keeps roving tab stop in sync when hasRovingTabIndex on (no-op otherwise).',
     focusFirst: 'focus first enabled visible treeitem.',
     focusLast: 'focus last enabled visible treeitem.',
   },

package/src/hooks/useTreeFocus.ts

@@ -4,7 +4,7 @@
 
 /**
  * @file useTreeFocus.ts
- * @input Uses React useCallback, useRef
+ * @input Uses React useCallback, useRef, useIsomorphicLayoutEffect
  * @output Exports useTreeFocus hook for WAI-ARIA tree keyboard navigation
  * @position Core hook; used by TreeList for roving tabindex + APG tree keyboard model
  *
@@ -15,6 +15,7 @@
  */
 
 import {useCallback, useRef} from 'react';
+import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 
 /** Keys handled by the tree keyboard model (used to gate typeahead). */
 const NAVIGATION_KEYS = new Set([
@@ -109,7 +110,10 @@ export interface UseTreeFocusOptions {
    * @param item The focused treeitem element.
    * @param id The treeitem's id (per `getItemId`), if any.
    */
-  onActivate?: (item: HTMLElement, id: string | undefined) => boolean | undefined;
+  onActivate?: (
+    item: HTMLElement,
+    id: string | undefined,
+  ) => boolean | undefined;
 
   /**
    * Whether typeahead (jump to next item whose text starts with the typed
@@ -126,6 +130,25 @@ export interface UseTreeFocusOptions {
    * TreeList uses this to move its single roving tab stop.
    */
   onActiveChange?: (id: string | undefined) => void;
+
+  /**
+   * Roving-tabindex ownership. When true, the hook manages a single tab stop
+   * across the visible treeitems: exactly one enabled treeitem carries
+   * `tabindex="0"` and the rest `tabindex="-1"`. The tab stop is repaired on
+   * mount and whenever items mount/unmount or toggle disabled, and moves with
+   * keyboard navigation. Attach the returned {@link UseTreeFocusReturn.handleFocus}
+   * to the container's `onFocus` to keep the stop in sync after clicks or
+   * programmatic focus.
+   *
+   * On mount the hook preserves an existing `tabindex="0"` treeitem (so a
+   * consumer can seed the active item in its render); if none exists it
+   * promotes the first enabled treeitem.
+   *
+   * When false (the default), the hook only *moves* focus (`.focus()`) and
+   * never touches `tabindex` — the caller owns tab-stop management.
+   * @default false
+   */
+  hasRovingTabIndex?: boolean;
 }
 
 /**
@@ -138,6 +161,13 @@ export interface UseTreeFocusReturn<T extends HTMLElement = HTMLElement> {
   /** Key down handler to attach to the tree container. */
   handleKeyDown: (e: React.KeyboardEvent) => void;
 
+  /**
+   * Focus handler to attach to the container's `onFocus`. Keeps the roving tab
+   * stop in sync when `hasRovingTabIndex` is enabled; a no-op otherwise, so it
+   * is always safe to attach.
+   */
+  handleFocus: (e: React.FocusEvent) => void;
+
   /** Focus the first enabled visible treeitem. */
   focusFirst: () => void;
 
@@ -167,12 +197,12 @@ export interface UseTreeFocusReturn<T extends HTMLElement = HTMLElement> {
  *
  * @example
  * ```
- * const {treeRef, handleKeyDown} = useTreeFocus<HTMLUListElement>({
+ * const {treeRef, handleKeyDown, handleFocus} = useTreeFocus<HTMLUListElement>({
  *   onToggleExpand: id => toggle(id),
- *   onActiveChange: id => setActiveId(id),
+ *   hasRovingTabIndex: true,
  * });
  *
- * <ul ref={treeRef} role="tree" onKeyDown={handleKeyDown}>
+ * <ul ref={treeRef} role="tree" onKeyDown={handleKeyDown} onFocus={handleFocus}>
  *   {items.map(item => <li role="treeitem" tabIndex={-1}>{item.label}</li>)}
  * </ul>
  * ```
@@ -192,6 +222,7 @@ export function useTreeFocus<T extends HTMLElement = HTMLElement>(
     typeahead = true,
     typeaheadResetMs = DEFAULT_TYPEAHEAD_RESET_MS,
     onActiveChange,
+    hasRovingTabIndex = false,
   } = options;
 
   const treeRef = useRef<T>(null);
@@ -245,16 +276,68 @@ export function useTreeFocus<T extends HTMLElement = HTMLElement>(
     [getItemId],
   );
 
+  // --- Roving tabindex ownership (opt-in via `hasRovingTabIndex`) -------------
+
+  /**
+   * Set `tabindex` on a treeitem, but only when it differs (avoids redundant
+   * DOM writes).
+   */
+  const setTabIndex = useCallback((el: HTMLElement, value: 0 | -1) => {
+    if (el.getAttribute('tabindex') !== String(value)) {
+      el.setAttribute('tabindex', String(value));
+    }
+  }, []);
+
+  /**
+   * Make `target` the sole tabbable treeitem: 0 on it, -1 on every other
+   * visible treeitem.
+   */
+  const moveTabStop = useCallback(
+    (items: HTMLElement[], target: HTMLElement) => {
+      for (const el of items) {
+        setTabIndex(el, el === target ? 0 : -1);
+      }
+    },
+    [setTabIndex],
+  );
+
+  /**
+   * Repair the roving tab stop: exactly one enabled treeitem is tabbable (0),
+   * the rest are -1. Prefer an existing `tabindex="0"` treeitem (so a consumer
+   * can seed the active item in its render); otherwise promote the first
+   * enabled treeitem.
+   */
+  const syncTabStops = useCallback(() => {
+    const items = getItems();
+    const enabled = items.filter(el => !itemDisabled(el));
+    if (enabled.length === 0) {
+      return;
+    }
+    const current = enabled.find(el => el.getAttribute('tabindex') === '0');
+    moveTabStop(items, current ?? enabled[0]);
+  }, [getItems, itemDisabled, moveTabStop]);
+
+  // Keep the tab stop valid across renders (items added/removed, disabled
+  // toggled). Runs after every commit but only when roving tabindex is on.
+  useIsomorphicLayoutEffect(() => {
+    if (hasRovingTabIndex) {
+      syncTabStops();
+    }
+  });
+
   /** Move focus to a treeitem and notify the active-change listener. */
   const focusItem = useCallback(
     (el: HTMLElement | undefined) => {
       if (el == null) {
         return;
       }
+      if (hasRovingTabIndex) {
+        moveTabStop(getItems(), el);
+      }
       onActiveChange?.(idOf(el));
       el.focus();
     },
-    [idOf, onActiveChange],
+    [idOf, onActiveChange, hasRovingTabIndex, moveTabStop, getItems],
   );
 
   /**
@@ -455,9 +538,21 @@ export function useTreeFocus<T extends HTMLElement = HTMLElement>(
     ],
   );
 
+  /**
+   * Keep the roving stop pointing at whatever ended up focused (e.g. a click
+   * or programmatic focus) so the next Tab behaves correctly. No-op unless
+   * roving tabindex is enabled.
+   */
+  const handleFocus = useCallback(() => {
+    if (hasRovingTabIndex) {
+      syncTabStops();
+    }
+  }, [hasRovingTabIndex, syncTabStops]);
+
   return {
     treeRef,
     handleKeyDown,
+    handleFocus,
     focusFirst,
     focusLast,
   };

package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts

@@ -1,57 +0,0 @@
-import type { ISODateString } from '../../utils/dateTypes';
-import { type PlainDate } from '../../utils/plainDate';
-import type { CalendarDay } from './useCalendarDays';
-/**
- * Configuration for calendar roving tabindex
- */
-export interface UseCalendarRovingTabindexOptions {
-    /** All days in the grid */
-    days: CalendarDay[];
-    /** Today's date as a PlainDate */
-    today: PlainDate;
-    /** The year being displayed */
-    year: number;
-    /** The month being displayed (1-based: 1 = January, 12 = December) */
-    month: number;
-    /** Function to check if a date is disabled */
-    isDateDisabled: (date: PlainDate) => boolean;
-    /** Currently selected date (if any) */
-    selectedDate?: PlainDate | null;
-}
-/**
- * Return type for useCalendarRovingTabindex hook
- */
-export interface UseCalendarRovingTabindexReturn {
-    /** The ISO date string of the tabbable element, or null */
-    tabbableDate: ISODateString | null;
-    /** Check if a specific date is the tabbable one */
-    isTabbable: (iso: ISODateString) => boolean;
-}
-/**
- * Hook for managing roving tabindex in calendar grids.
- *
- * Implements the WAI-ARIA roving tabindex pattern where only one element
- * in a group has tabindex="0" while others have tabindex="-1".
- *
- * Priority for tabbable element:
- * 1. Today if visible in the current month and enabled
- * 2. First enabled day in the month
- *
- * @example
- * ```
- * const {tabbableDate, isTabbable} = useCalendarRovingTabindex({
- *   days,
- *   today: {year: 2026, month: 1, day: 20},
- *   year: 2026,
- *   month: 1, // January (1-based)
- *   isDateDisabled,
- * });
- *
- * // In day rendering:
- * <button tabIndex={isTabbable(day.iso) ? 0 : -1}>
- *   {day.dayNumber}
- * </button>
- * ```
- */
-export declare function useCalendarRovingTabindex(options: UseCalendarRovingTabindexOptions): UseCalendarRovingTabindexReturn;
-//# sourceMappingURL=useCalendarRovingTabindex.d.ts.map

package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCalendarRovingTabindex.d.ts","sourceRoot":"","sources":["../../../src/Calendar/hooks/useCalendarRovingTabindex.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAC,KAAK,SAAS,EAAiB,MAAM,uBAAuB,CAAC;AACrE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,gCAAgC;IAC/C,2BAA2B;IAC3B,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,kCAAkC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,+BAA+B;IAC9C,2DAA2D;IAC3D,YAAY,EAAE,aAAa,GAAG,IAAI,CAAC;IACnC,mDAAmD;IACnD,UAAU,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,OAAO,CAAC;CAC7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,gCAAgC,GACxC,+BAA+B,CA0CjC"}