panelui-native 0.100.0 → 0.101.1

package/README.md

@@ -227,6 +227,7 @@ memory pressure the OS can end the process with nothing in the terminal to expla
 | `Collapsible` | One section of content, shown and hidden by its own header |
 | `ColorPicker` | A colour chosen by dragging — a saturation square, a hue scale, and opacity |
 | `Combobox` | A text field that filters a list of options as you type |
+| `Compare` | Two versions of one picture, with a seam you drag across it |
 | `ContextMenu` | Actions for a piece of content, opened by holding it |
 | `DatePicker` | A calendar behind a button |
 | `DateTimePicker` | A day and a time of day, picked in one panel |
@@ -280,6 +281,7 @@ memory pressure the OS can end the process with nothing in the terminal to expla
 | `Reasoning` | An agent’s thinking, collapsed until you want it |
 | `Response` | Streamed markdown rendered as native components |
 | `RingChart` | Concentric arcs, each measured against its own target |
+| `SankeyChart` | Where a quantity came from and where it ended up |
 | `ScatterChart` | Two quantities against each other, to show how they relate |
 | `ScrollCanvas` | Image frame whose contents move as you scroll |
 | `ScrollFade` | Fades the edges of a scroll container |

package/lib/module/components/card/index.js

@@ -75,7 +75,7 @@ const CardTitle = /*#__PURE__*/forwardRef(({
   ref: ref,
   size: "lg",
   weight: "semibold",
-  className: cn('leading-none text-card-foreground', className),
+  className: cn('leading-tight text-card-foreground', className),
   ...props
 }));
 CardTitle.displayName = 'Card.Title';

package/lib/module/components/card/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","tv","cn","Text","jsx","_jsx","footerVariants","base","variants","variant","plain","panel","defaultVariants","CardRoot","className","props","ref","displayName","CardHeader","CardTitle","size","weight","CardDescription","muted","CardContent","CardFooter","Card","Object","assign","Header","Title","Description","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/card/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","View","tv","cn","Text","jsx","_jsx","footerVariants","base","variants","variant","plain","panel","defaultVariants","CardRoot","className","props","ref","displayName","CardHeader","CardTitle","size","weight","CardDescription","muted","CardContent","CardFooter","Card","Object","assign","Header","Title","Description","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/card/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/compare/index.js

@@ -0,0 +1,576 @@
+"use strict";
+
+/**
+ * Compare — two versions of one picture, with a seam the reader drags across
+ * it.
+ *
+ * ```tsx
+ * <Compare height={260}>
+ *   <Compare.After>
+ *     <Image source={retouched} style={{ width: '100%', height: '100%' }} />
+ *   </Compare.After>
+ *   <Compare.Before>
+ *     <Image source={original} style={{ width: '100%', height: '100%' }} />
+ *   </Compare.Before>
+ *   <Compare.Handle />
+ * </Compare>
+ * ```
+ *
+ * ## What it is for
+ *
+ * Showing that two images differ, when they differ in a way a pair of
+ * thumbnails side by side will not carry. Retouching, a filter, a render at two
+ * quality settings, a map at two dates: the change is spread across the frame
+ * rather than gathered in one place, and the eye cannot hold one image well
+ * enough to spot it in the other.
+ *
+ * The seam works because both versions are in the same place on the screen at
+ * the same scale. Every pixel the reader is comparing is a pixel that was just
+ * under the one beside it, so the difference arrives as movement rather than as
+ * something to be remembered.
+ *
+ * ## It clips, it does not resize
+ *
+ * The revealed side is a window onto a full-size copy of its content, not a
+ * copy of the content squeezed into the window. That distinction is the whole
+ * implementation: a view whose width is animated will lay its children out
+ * again at every new width, so an image inside one is an image being squashed
+ * and stretched as the seam moves, and the two halves stop lining up — which
+ * is the one thing this component exists to guarantee.
+ *
+ * It follows that the content has to be told how big to be, and the only thing
+ * that knows is the container once it has been measured. So nothing is drawn
+ * until the first layout pass has run, and `Compare.Before` sizes its child to
+ * the measured box rather than to itself.
+ *
+ * ## It needs a height
+ *
+ * Everything inside is positioned absolutely, so the box has no height of its
+ * own to take from its content. `height` is what gives it one. An image told to
+ * fill the box will fill whatever height is set here, and cropping is
+ * `resizeMode` on the image rather than anything this component does.
+ *
+ * ## Dragging, and the two ways round it
+ *
+ * The whole frame is the drag target, not just the knob — a knob is a small
+ * thing to hit on a phone and the reader's finger is already over the picture.
+ * The gesture only claims horizontal movement, so a Compare inside a scrolling
+ * page still scrolls.
+ *
+ * A drag is not available to everyone, so the seam is also `adjustable`: a
+ * screen reader moves it a `step` at a time without one, and `value` drives it
+ * from anywhere else — a button that snaps to the ends, an animation, a slider
+ * somewhere else on the screen.
+ */
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { Text } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { selectionTick } from "../../utils/haptics.js";
+import { useDirectionSign } from "../../hooks/use-direction.js";
+
+/** How tall the frame is when the caller does not say. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_HEIGHT = 240;
+
+/** The knob's diameter, and so the width of the column the seam lives in. */
+const KNOB = 36;
+
+/** How far a screen reader's increment moves the seam, as a share of the box. */
+const DEFAULT_STEP = 0.05;
+
+/** Where the seam starts: the middle, so both sides are equally on show. */
+const DEFAULT_VALUE = 0.5;
+
+/** Movement along the axis before the drag is the gesture's rather than a scroll's. */
+const CLAIM = 8;
+
+/** And movement across it that hands the gesture back. */
+const YIELD = 16;
+const compareVariants = tv({
+  slots: {
+    root: 'w-full overflow-hidden rounded-xl bg-muted',
+    seam: 'absolute items-center justify-center',
+    line: 'absolute bg-background',
+    knob: 'items-center justify-center rounded-full border border-border bg-background shadow-md',
+    grip: 'rounded-full bg-foreground/60'
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        seam: 'bottom-0 top-0',
+        line: 'h-full w-0.5',
+        grip: 'h-3.5 w-1'
+      },
+      vertical: {
+        seam: 'left-0 right-0',
+        line: 'h-0.5 w-full',
+        grip: 'h-1 w-3.5'
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});
+const CompareContext = /*#__PURE__*/createContext(null);
+function useCompare(component) {
+  const context = useContext(CompareContext);
+  if (!context) {
+    throw new Error(`${component} must be used within a <Compare>`);
+  }
+  return context;
+}
+function clamp(value) {
+  'worklet';
+
+  return value < 0 ? 0 : value > 1 ? 1 : value;
+}
+function CompareRoot({
+  className,
+  height = DEFAULT_HEIGHT,
+  value,
+  defaultValue = DEFAULT_VALUE,
+  onValueChange,
+  onValueCommit,
+  orientation = 'horizontal',
+  disabled = false,
+  step = DEFAULT_STEP,
+  haptics = true,
+  children,
+  ...props
+}) {
+  const [box, setBox] = useState({
+    width: 0,
+    height: 0
+  });
+  const [internal, setInternal] = useState(defaultValue);
+  const sign = useDirectionSign();
+  const mirrored = sign === -1;
+  const controlled = value !== undefined;
+  const current = controlled ? value : internal;
+  const ratio = useSharedValue(clamp(current));
+  /** True between the finger landing and it lifting, so the prop can stand back. */
+  const dragging = useSharedValue(false);
+
+  /*
+   * A controlled `value` owns the seam except while a finger is on it. The
+   * drag writes the shared value directly and reports afterwards, so pushing
+   * the prop back in during the drag would fight it for the same number.
+   */
+  const settled = clamp(current);
+  useEffect(() => {
+    if (controlled && !dragging.value) ratio.value = settled;
+  }, [controlled, settled, ratio, dragging]);
+  const commit = useCallback(next => {
+    if (!controlled) setInternal(next);
+    onValueChange?.(next);
+  }, [controlled, onValueChange]);
+  const finish = useCallback(next => {
+    if (!controlled) setInternal(next);
+    onValueCommit?.(next);
+  }, [controlled, onValueCommit]);
+
+  /*
+   * Reported a whole percent at a time rather than every frame. The seam itself
+   * never needs the JS thread — it is drawn from the shared value — so a
+   * callback per frame would be sixty re-renders a second spent on a number
+   * nobody can read that fast.
+   */
+  const reported = useSharedValue(-1);
+  const report = useCallback(next => {
+    onValueChange?.(next);
+  }, [onValueChange]);
+  const nudge = useCallback(delta => {
+    const next = clamp(ratio.value + delta);
+    ratio.value = next;
+    commit(next);
+    onValueCommit?.(next);
+  }, [ratio, commit, onValueCommit]);
+  const horizontal = orientation === 'horizontal';
+  const extent = horizontal ? box.width : box.height;
+  const start = useSharedValue(0);
+  const edge = useSharedValue(false);
+  const pan = useMemo(() => {
+    const gesture = Gesture.Pan().enabled(!disabled).onBegin(() => {
+      start.value = ratio.value;
+      dragging.value = true;
+      edge.value = ratio.value <= 0 || ratio.value >= 1;
+    }).onUpdate(event => {
+      if (extent <= 0) return;
+      /*
+       * Under a right-to-left layout the leading edge is the right-hand one,
+       * so a drag towards it has to move the seam the other way for "towards
+       * the start" to keep meaning the same thing. Only the horizontal seam
+       * has a leading edge; down is down in both directions.
+       */
+      const travelled = horizontal ? event.translationX * sign : event.translationY;
+      const next = clamp(start.value + travelled / extent);
+      ratio.value = next;
+
+      // The one moment in this drag worth feeling: arriving at an end, where
+      // the seam stops following the finger. Without it the stall reads as
+      // the gesture having been dropped.
+      const ended = next <= 0 || next >= 1;
+      if (ended !== edge.value) {
+        edge.value = ended;
+        if (ended && haptics) runOnJS(selectionTick)();
+      }
+      const percent = Math.round(next * 100);
+      if (percent !== reported.value) {
+        reported.value = percent;
+        runOnJS(report)(next);
+      }
+    }).onFinalize(() => {
+      dragging.value = false;
+      reported.value = -1;
+      runOnJS(finish)(ratio.value);
+    });
+
+    /*
+     * The seam only answers to the axis it moves on. Without that it claims any
+     * movement at all, which is a Compare inside a scrolling page eating the
+     * scroll the moment a finger lands on the picture.
+     */
+    return horizontal ? gesture.activeOffsetX([-CLAIM, CLAIM]).failOffsetY([-YIELD, YIELD]) : gesture.activeOffsetY([-CLAIM, CLAIM]).failOffsetX([-YIELD, YIELD]);
+  }, [disabled, extent, horizontal, sign, haptics, ratio, start, edge, dragging, reported, report, finish]);
+  const onLayout = event => {
+    const {
+      width: w,
+      height: h
+    } = event.nativeEvent.layout;
+    const next = {
+      width: Math.round(w),
+      height: Math.round(h)
+    };
+    if (next.width !== box.width || next.height !== box.height) setBox(next);
+    props.onLayout?.(event);
+  };
+  const context = useMemo(() => ({
+    ratio,
+    width: box.width,
+    height: box.height,
+    orientation,
+    mirrored,
+    disabled,
+    step,
+    nudge
+  }), [ratio, box.width, box.height, orientation, mirrored, disabled, step, nudge]);
+  const {
+    root
+  } = compareVariants({
+    orientation
+  });
+
+  /*
+   * The background side is drawn first whatever order the caller wrote the
+   * children in, because the revealed side is a window laid over it — reversed,
+   * the window would be underneath and nothing would show through.
+   */
+  const layers = {
+    base: [],
+    clip: [],
+    over: []
+  };
+  Children.forEach(children, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    const layer = child.type.layer ?? 'over';
+    layers[layer in layers ? layer : 'over'].push(/*#__PURE__*/_jsx(ChildSlot, {
+      children: child
+    }, index));
+  });
+  return /*#__PURE__*/_jsx(CompareContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: pan,
+      children: /*#__PURE__*/_jsx(View, {
+        ...props,
+        onLayout: onLayout,
+        style: [{
+          height
+        }, props.style],
+        className: cn(root(), className),
+        children: box.width > 0 && box.height > 0 ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [layers.base, layers.clip, layers.over]
+        }) : null
+      })
+    })
+  });
+}
+function ChildSlot({
+  children
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+}
+/**
+ * The side the seam uncovers as it travels: the whole frame, underneath.
+ *
+ * It is drawn at full size and never clipped, so it is the one that decides
+ * what the frame looks like at either end of the travel.
+ */
+function CompareAfter({
+  className,
+  children,
+  ...props
+}) {
+  const {
+    width,
+    height
+  } = useCompare('Compare.After');
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    pointerEvents: "none",
+    style: [{
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width,
+      height
+    }, props.style],
+    className: cn(className),
+    children: children
+  });
+}
+CompareAfter.displayName = 'Compare.After';
+CompareAfter.layer = 'base';
+/**
+ * The side on the near edge of the seam: a window onto the content, sized to
+ * the frame.
+ *
+ * The child is given the frame's measured size in points rather than a
+ * percentage. A percentage would be a percentage *of the window*, which shrinks
+ * as the seam closes — so the image would slide and scale under the seam
+ * instead of standing still behind it, and the two halves would no longer be
+ * the same picture in the same place.
+ */
+function CompareBefore({
+  className,
+  children,
+  ...props
+}) {
+  const {
+    ratio,
+    width,
+    height,
+    orientation,
+    mirrored
+  } = useCompare('Compare.Before');
+  const horizontal = orientation === 'horizontal';
+  /*
+   * A horizontal window opens from the edge the line starts at, which is the
+   * right-hand one under a right-to-left layout. Both the window and the copy
+   * inside it are pinned to that same edge — pinning only the window would
+   * slide the content along under the seam, which is the one thing the clip
+   * exists to prevent. Vertical is unaffected: down is down in both directions.
+   */
+  const anchor = horizontal && mirrored ? 'right' : 'left';
+  const clip = useAnimatedStyle(() => horizontal ? {
+    width: ratio.value * width,
+    height
+  } : {
+    width,
+    height: ratio.value * height
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: [{
+      position: 'absolute',
+      [anchor]: 0,
+      top: 0,
+      overflow: 'hidden'
+    }, clip],
+    children: /*#__PURE__*/_jsx(View, {
+      ...props,
+      style: [{
+        position: 'absolute',
+        [anchor]: 0,
+        top: 0,
+        width,
+        height
+      }, props.style],
+      className: cn(className),
+      children: children
+    })
+  });
+}
+CompareBefore.displayName = 'Compare.Before';
+CompareBefore.layer = 'clip';
+/**
+ * The seam: a line across the frame with a knob on it.
+ *
+ * The knob is a marker rather than the target — the drag is on the whole frame,
+ * and a 36-point circle is not something to ask a thumb to find. What it is
+ * for is saying where the seam is and that it is the thing that moves, which a
+ * bare line does not.
+ *
+ * It carries the accessibility wiring for the same reason a splitter's handle
+ * does: it is the one part of this that is a control, so it is the part that is
+ * `adjustable` and takes the increment and decrement a screen reader sends
+ * instead of a drag.
+ */
+function CompareHandle({
+  className,
+  withGrip = true,
+  accessibilityLabel = 'Compare',
+  children,
+  style,
+  ...props
+}) {
+  const {
+    ratio,
+    width,
+    height,
+    orientation,
+    mirrored,
+    disabled,
+    step,
+    nudge
+  } = useCompare('Compare.Handle');
+  const horizontal = orientation === 'horizontal';
+  const {
+    seam,
+    line,
+    knob,
+    grip
+  } = compareVariants({
+    orientation
+  });
+  // Pinned to the same edge the window opens from, and travelling away from it.
+  const anchor = horizontal && mirrored ? 'right' : 'left';
+  const towards = horizontal && mirrored ? -1 : 1;
+  const offset = useDerivedValue(() => horizontal ? ratio.value * width : ratio.value * height);
+  const animatedStyle = useAnimatedStyle(() => horizontal ? {
+    transform: [{
+      translateX: (offset.value - KNOB / 2) * towards
+    }]
+  } : {
+    transform: [{
+      translateY: offset.value - KNOB / 2
+    }]
+  });
+  const [now, setNow] = useState(() => Math.round(ratio.value * 100));
+  // The spoken value only has to be right when a screen reader reads it, so it
+  // is pulled back to the JS thread a percent at a time rather than every frame
+  // of a drag.
+  useAnimatedReaction(() => Math.round(ratio.value * 100), (percent, previous) => {
+    if (percent !== previous) runOnJS(setNow)(percent);
+  });
+  const onAccessibilityAction = useCallback(event => {
+    if (event.nativeEvent.actionName === 'increment') nudge(step);else if (event.nativeEvent.actionName === 'decrement') nudge(-step);
+  }, [nudge, step]);
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    ...props,
+    accessible: true,
+    accessibilityRole: "adjustable",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled
+    },
+    accessibilityValue: {
+      min: 0,
+      max: 100,
+      now
+    },
+    accessibilityActions: disabled ? undefined : [{
+      name: 'increment'
+    }, {
+      name: 'decrement'
+    }],
+    onAccessibilityAction: disabled ? undefined : onAccessibilityAction,
+    pointerEvents: "box-none",
+    style: [horizontal ? {
+      width: KNOB,
+      [anchor]: 0
+    } : {
+      height: KNOB,
+      top: 0
+    }, style, animatedStyle],
+    className: seam(),
+    children: [/*#__PURE__*/_jsx(View, {
+      className: line(),
+      pointerEvents: "none"
+    }), children ?? /*#__PURE__*/_jsx(View, {
+      style: {
+        width: KNOB,
+        height: KNOB
+      },
+      className: knob(),
+      pointerEvents: "none",
+      children: withGrip ? /*#__PURE__*/_jsxs(View, {
+        className: horizontal ? 'flex-row gap-1' : 'gap-1',
+        children: [/*#__PURE__*/_jsx(View, {
+          className: grip()
+        }), /*#__PURE__*/_jsx(View, {
+          className: grip()
+        })]
+      }) : null
+    })]
+  });
+}
+CompareHandle.displayName = 'Compare.Handle';
+CompareHandle.layer = 'over';
+/**
+ * A caption pinned to one corner, for saying which side is which.
+ *
+ * Worth adding wherever the two versions are not obviously an original and an
+ * edit — two dates, two settings, two models. Where they are, it is one more
+ * thing over the picture and the picture is the point.
+ */
+function CompareLabel({
+  className,
+  side = 'start',
+  children,
+  ...props
+}) {
+  const {
+    orientation,
+    mirrored
+  } = useCompare('Compare.Label');
+  const horizontal = orientation === 'horizontal';
+  // `start` is the edge the line begins at, which the layout direction decides.
+  const start = horizontal && mirrored ? side !== 'start' : side === 'start';
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    pointerEvents: "none",
+    style: [{
+      position: 'absolute',
+      ...(horizontal ? {
+        top: 8,
+        ...(start ? {
+          left: 8
+        } : {
+          right: 8
+        })
+      } : {
+        left: 8,
+        ...(start ? {
+          top: 8
+        } : {
+          bottom: 8
+        })
+      })
+    }, props.style],
+    className: cn('rounded-md bg-background/80 px-2 py-1', className),
+    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+      size: "xs",
+      weight: "medium",
+      numberOfLines: 1,
+      children: children
+    }) : children
+  });
+}
+CompareLabel.displayName = 'Compare.Label';
+CompareLabel.layer = 'over';
+CompareRoot.displayName = 'Compare';
+export const Compare = Object.assign(CompareRoot, {
+  Before: CompareBefore,
+  After: CompareAfter,
+  Handle: CompareHandle,
+  Label: CompareLabel
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/compare/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","createContext","isValidElement","useCallback","useContext","useEffect","useMemo","useState","View","Gesture","GestureDetector","Animated","runOnJS","useAnimatedReaction","useAnimatedStyle","useDerivedValue","useSharedValue","tv","Text","cn","selectionTick","useDirectionSign","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DEFAULT_HEIGHT","KNOB","DEFAULT_STEP","DEFAULT_VALUE","CLAIM","YIELD","compareVariants","slots","root","seam","line","knob","grip","variants","orientation","horizontal","vertical","defaultVariants","CompareContext","useCompare","component","context","Error","clamp","value","CompareRoot","className","height","defaultValue","onValueChange","onValueCommit","disabled","step","haptics","children","props","box","setBox","width","internal","setInternal","sign","mirrored","controlled","undefined","current","ratio","dragging","settled","commit","next","finish","reported","report","nudge","delta","extent","start","edge","pan","gesture","Pan","enabled","onBegin","onUpdate","event","travelled","translationX","translationY","ended","percent","Math","round","onFinalize","activeOffsetX","failOffsetY","activeOffsetY","failOffsetX","onLayout","w","h","nativeEvent","layout","layers","base","clip","over","forEach","child","index","layer","type","push","ChildSlot","Provider","style","CompareAfter","pointerEvents","position","left","top","displayName","CompareBefore","anchor","overflow","CompareHandle","withGrip","accessibilityLabel","towards","offset","animatedStyle","transform","translateX","translateY","now","setNow","previous","onAccessibilityAction","actionName","accessible","accessibilityRole","accessibilityState","accessibilityValue","min","max","accessibilityActions","name","CompareLabel","side","right","bottom","size","weight","numberOfLines","Compare","Object","assign","Before","After","Handle","Label"],"sourceRoot":"../../../../src","sources":["components/compare/index.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SACEA,QAAQ,EACRC,aAAa,EACbC,cAAc,EACdC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,QAAQ,QAEH,OAAO;AACd,SACEC,IAAI,QAIC,cAAc;AACrB,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,OAAOC,QAAQ,IACbC,OAAO,EACPC,mBAAmB,EACnBC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,QAET,yBAAyB;AAChC,SAASC,EAAE,QAAQ,mBAAmB;AACtC,SAASC,IAAI,QAAQ,0BAAuB;AAC5C,SAASC,EAAE,QAAQ,mBAAgB;AACnC,SAASC,aAAa,QAAQ,wBAAqB;AACnD,SAASC,gBAAgB,QAAQ,8BAA2B;;AAE5D;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AACA,MAAMC,cAAc,GAAG,GAAG;;AAE1B;AACA,MAAMC,IAAI,GAAG,EAAE;;AAEf;AACA,MAAMC,YAAY,GAAG,IAAI;;AAEzB;AACA,MAAMC,aAAa,GAAG,GAAG;;AAEzB;AACA,MAAMC,KAAK,GAAG,CAAC;;AAEf;AACA,MAAMC,KAAK,GAAG,EAAE;AAIhB,MAAMC,eAAe,GAAGjB,EAAE,CAAC;EACzBkB,KAAK,EAAE;IACLC,IAAI,EAAE,4CAA4C;IAClDC,IAAI,EAAE,sCAAsC;IAC5CC,IAAI,EAAE,wBAAwB;IAC9BC,IAAI,EAAE,uFAAuF;IAC7FC,IAAI,EAAE;EACR,CAAC;EACDC,QAAQ,EAAE;IACRC,WAAW,EAAE;MACXC,UAAU,EAAE;QACVN,IAAI,EAAE,gBAAgB;QACtBC,IAAI,EAAE,cAAc;QACpBE,IAAI,EAAE;MACR,CAAC;MACDI,QAAQ,EAAE;QACRP,IAAI,EAAE,gBAAgB;QACtBC,IAAI,EAAE,cAAc;QACpBE,IAAI,EAAE;MACR;IACF;EACF,CAAC;EACDK,eAAe,EAAE;IAAEH,WAAW,EAAE;EAAa;AAC/C,CAAC,CAAC;AAoBF,MAAMI,cAAc,gBAAG7C,aAAa,CAA6B,IAAI,CAAC;AAEtE,SAAS8C,UAAUA,CAACC,SAAiB,EAAuB;EAC1D,MAAMC,OAAO,GAAG7C,UAAU,CAAC0C,cAAc,CAAC;EAC1C,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,GAAGF,SAAS,kCAAkC,CAAC;EACjE;EACA,OAAOC,OAAO;AAChB;AAEA,SAASE,KAAKA,CAACC,KAAa,EAAU;EACpC,SAAS;;EACT,OAAOA,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGA,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGA,KAAK;AAC9C;AA8BA,SAASC,WAAWA,CAAC;EACnBC,SAAS;EACTC,MAAM,GAAG3B,cAAc;EACvBwB,KAAK;EACLI,YAAY,GAAGzB,aAAa;EAC5B0B,aAAa;EACbC,aAAa;EACbhB,WAAW,GAAG,YAAY;EAC1BiB,QAAQ,GAAG,KAAK;EAChBC,IAAI,GAAG9B,YAAY;EACnB+B,OAAO,GAAG,IAAI;EACdC,QAAQ;EACR,GAAGC;AACS,CAAC,EAAE;EACf,MAAM,CAACC,GAAG,EAAEC,MAAM,CAAC,GAAG1D,QAAQ,CAAC;IAAE2D,KAAK,EAAE,CAAC;IAAEX,MAAM,EAAE;EAAE,CAAC,CAAC;EACvD,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAG7D,QAAQ,CAACiD,YAAY,CAAC;EACtD,MAAMa,IAAI,GAAGhD,gBAAgB,CAAC,CAAC;EAC/B,MAAMiD,QAAQ,GAAGD,IAAI,KAAK,CAAC,CAAC;EAE5B,MAAME,UAAU,GAAGnB,KAAK,KAAKoB,SAAS;EACtC,MAAMC,OAAO,GAAGF,UAAU,GAAGnB,KAAK,GAAGe,QAAQ;EAC7C,MAAMO,KAAK,GAAG1D,cAAc,CAACmC,KAAK,CAACsB,OAAO,CAAC,CAAC;EAC5C;EACA,MAAME,QAAQ,GAAG3D,cAAc,CAAC,KAAK,CAAC;;EAEtC;AACF;AACA;AACA;AACA;EACE,MAAM4D,OAAO,GAAGzB,KAAK,CAACsB,OAAO,CAAC;EAC9BpE,SAAS,CAAC,MAAM;IACd,IAAIkE,UAAU,IAAI,CAACI,QAAQ,CAACvB,KAAK,EAAEsB,KAAK,CAACtB,KAAK,GAAGwB,OAAO;EAC1D,CAAC,EAAE,CAACL,UAAU,EAAEK,OAAO,EAAEF,KAAK,EAAEC,QAAQ,CAAC,CAAC;EAE1C,MAAME,MAAM,GAAG1E,WAAW,CACvB2E,IAAY,IAAK;IAChB,IAAI,CAACP,UAAU,EAAEH,WAAW,CAACU,IAAI,CAAC;IAClCrB,aAAa,GAAGqB,IAAI,CAAC;EACvB,CAAC,EACD,CAACP,UAAU,EAAEd,aAAa,CAC5B,CAAC;EAED,MAAMsB,MAAM,GAAG5E,WAAW,CACvB2E,IAAY,IAAK;IAChB,IAAI,CAACP,UAAU,EAAEH,WAAW,CAACU,IAAI,CAAC;IAClCpB,aAAa,GAAGoB,IAAI,CAAC;EACvB,CAAC,EACD,CAACP,UAAU,EAAEb,aAAa,CAC5B,CAAC;;EAED;AACF;AACA;AACA;AACA;AACA;EACE,MAAMsB,QAAQ,GAAGhE,cAAc,CAAC,CAAC,CAAC,CAAC;EACnC,MAAMiE,MAAM,GAAG9E,WAAW,CACvB2E,IAAY,IAAK;IAChBrB,aAAa,GAAGqB,IAAI,CAAC;EACvB,CAAC,EACD,CAACrB,aAAa,CAChB,CAAC;EAED,MAAMyB,KAAK,GAAG/E,WAAW,CACtBgF,KAAa,IAAK;IACjB,MAAML,IAAI,GAAG3B,KAAK,CAACuB,KAAK,CAACtB,KAAK,GAAG+B,KAAK,CAAC;IACvCT,KAAK,CAACtB,KAAK,GAAG0B,IAAI;IAClBD,MAAM,CAACC,IAAI,CAAC;IACZpB,aAAa,GAAGoB,IAAI,CAAC;EACvB,CAAC,EACD,CAACJ,KAAK,EAAEG,MAAM,EAAEnB,aAAa,CAC/B,CAAC;EAED,MAAMf,UAAU,GAAGD,WAAW,KAAK,YAAY;EAC/C,MAAM0C,MAAM,GAAGzC,UAAU,GAAGqB,GAAG,CAACE,KAAK,GAAGF,GAAG,CAACT,MAAM;EAElD,MAAM8B,KAAK,GAAGrE,cAAc,CAAC,CAAC,CAAC;EAC/B,MAAMsE,IAAI,GAAGtE,cAAc,CAAC,KAAK,CAAC;EAElC,MAAMuE,GAAG,GAAGjF,OAAO,CAAC,MAAM;IACxB,MAAMkF,OAAO,GAAG/E,OAAO,CAACgF,GAAG,CAAC,CAAC,CAC1BC,OAAO,CAAC,CAAC/B,QAAQ,CAAC,CAClBgC,OAAO,CAAC,MAAM;MACbN,KAAK,CAACjC,KAAK,GAAGsB,KAAK,CAACtB,KAAK;MACzBuB,QAAQ,CAACvB,KAAK,GAAG,IAAI;MACrBkC,IAAI,CAAClC,KAAK,GAAGsB,KAAK,CAACtB,KAAK,IAAI,CAAC,IAAIsB,KAAK,CAACtB,KAAK,IAAI,CAAC;IACnD,CAAC,CAAC,CACDwC,QAAQ,CAAEC,KAAK,IAAK;MACnB,IAAIT,MAAM,IAAI,CAAC,EAAE;MACjB;AACR;AACA;AACA;AACA;AACA;MACQ,MAAMU,SAAS,GAAGnD,UAAU,GAAGkD,KAAK,CAACE,YAAY,GAAG1B,IAAI,GAAGwB,KAAK,CAACG,YAAY;MAC7E,MAAMlB,IAAI,GAAG3B,KAAK,CAACkC,KAAK,CAACjC,KAAK,GAAG0C,SAAS,GAAGV,MAAM,CAAC;MACpDV,KAAK,CAACtB,KAAK,GAAG0B,IAAI;;MAElB;MACA;MACA;MACA,MAAMmB,KAAK,GAAGnB,IAAI,IAAI,CAAC,IAAIA,IAAI,IAAI,CAAC;MACpC,IAAImB,KAAK,KAAKX,IAAI,CAAClC,KAAK,EAAE;QACxBkC,IAAI,CAAClC,KAAK,GAAG6C,KAAK;QAClB,IAAIA,KAAK,IAAIpC,OAAO,EAAEjD,OAAO,CAACQ,aAAa,CAAC,CAAC,CAAC;MAChD;MAEA,MAAM8E,OAAO,GAAGC,IAAI,CAACC,KAAK,CAACtB,IAAI,GAAG,GAAG,CAAC;MACtC,IAAIoB,OAAO,KAAKlB,QAAQ,CAAC5B,KAAK,EAAE;QAC9B4B,QAAQ,CAAC5B,KAAK,GAAG8C,OAAO;QACxBtF,OAAO,CAACqE,MAAM,CAAC,CAACH,IAAI,CAAC;MACvB;IACF,CAAC,CAAC,CACDuB,UAAU,CAAC,MAAM;MAChB1B,QAAQ,CAACvB,KAAK,GAAG,KAAK;MACtB4B,QAAQ,CAAC5B,KAAK,GAAG,CAAC,CAAC;MACnBxC,OAAO,CAACmE,MAAM,CAAC,CAACL,KAAK,CAACtB,KAAK,CAAC;IAC9B,CAAC,CAAC;;IAEJ;AACJ;AACA;AACA;AACA;IACI,OAAOT,UAAU,GACb6C,OAAO,CAACc,aAAa,CAAC,CAAC,CAACtE,KAAK,EAAEA,KAAK,CAAC,CAAC,CAACuE,WAAW,CAAC,CAAC,CAACtE,KAAK,EAAEA,KAAK,CAAC,CAAC,GACnEuD,OAAO,CAACgB,aAAa,CAAC,CAAC,CAACxE,KAAK,EAAEA,KAAK,CAAC,CAAC,CAACyE,WAAW,CAAC,CAAC,CAACxE,KAAK,EAAEA,KAAK,CAAC,CAAC;EACzE,CAAC,EAAE,CACD0B,QAAQ,EACRyB,MAAM,EACNzC,UAAU,EACV0B,IAAI,EACJR,OAAO,EACPa,KAAK,EACLW,KAAK,EACLC,IAAI,EACJX,QAAQ,EACRK,QAAQ,EACRC,MAAM,EACNF,MAAM,CACP,CAAC;EAEF,MAAM2B,QAAQ,GAAIb,KAAwB,IAAK;IAC7C,MAAM;MAAE3B,KAAK,EAAEyC,CAAC;MAAEpD,MAAM,EAAEqD;IAAE,CAAC,GAAGf,KAAK,CAACgB,WAAW,CAACC,MAAM;IACxD,MAAMhC,IAAI,GAAG;MAAEZ,KAAK,EAAEiC,IAAI,CAACC,KAAK,CAACO,CAAC,CAAC;MAAEpD,MAAM,EAAE4C,IAAI,CAACC,KAAK,CAACQ,CAAC;IAAE,CAAC;IAC5D,IAAI9B,IAAI,CAACZ,KAAK,KAAKF,GAAG,CAACE,KAAK,IAAIY,IAAI,CAACvB,MAAM,KAAKS,GAAG,CAACT,MAAM,EAAEU,MAAM,CAACa,IAAI,CAAC;IACxEf,KAAK,CAAC2C,QAAQ,GAAGb,KAAK,CAAC;EACzB,CAAC;EAED,MAAM5C,OAAO,GAAG3C,OAAO,CACrB,OAAO;IACLoE,KAAK;IACLR,KAAK,EAAEF,GAAG,CAACE,KAAK;IAChBX,MAAM,EAAES,GAAG,CAACT,MAAM;IAClBb,WAAW;IACX4B,QAAQ;IACRX,QAAQ;IACRC,IAAI;IACJsB;EACF,CAAC,CAAC,EACF,CAACR,KAAK,EAAEV,GAAG,CAACE,KAAK,EAAEF,GAAG,CAACT,MAAM,EAAEb,WAAW,EAAE4B,QAAQ,EAAEX,QAAQ,EAAEC,IAAI,EAAEsB,KAAK,CAC7E,CAAC;EAED,MAAM;IAAE9C;EAAK,CAAC,GAAGF,eAAe,CAAC;IAAEQ;EAAY,CAAC,CAAC;;EAEjD;AACF;AACA;AACA;AACA;EACE,MAAMqE,MAAmE,GAAG;IAC1EC,IAAI,EAAE,EAAE;IACRC,IAAI,EAAE,EAAE;IACRC,IAAI,EAAE;EACR,CAAC;EACDlH,QAAQ,CAACmH,OAAO,CAACrD,QAAQ,EAAE,CAACsD,KAAK,EAAEC,KAAK,KAAK;IAC3C,IAAI,eAACnH,cAAc,CAACkH,KAAK,CAAC,EAAE;IAC5B,MAAME,KAAK,GAAIF,KAAK,CAACG,IAAI,CAAqCD,KAAK,IAAI,MAAM;IAC7EP,MAAM,CAACO,KAAK,IAAIP,MAAM,GAAGO,KAAK,GAAG,MAAM,CAAC,CAACE,IAAI,cAC3CjG,IAAA,CAACkG,SAAS;MAAA3D,QAAA,EAAcsD;IAAK,GAAbC,KAAyB,CAC3C,CAAC;EACH,CAAC,CAAC;EAEF,oBACE9F,IAAA,CAACuB,cAAc,CAAC4E,QAAQ;IAACtE,KAAK,EAAEH,OAAQ;IAAAa,QAAA,eACtCvC,IAAA,CAACb,eAAe;MAAC8E,OAAO,EAAED,GAAI;MAAAzB,QAAA,eAC5BvC,IAAA,CAACf,IAAI;QAAA,GACCuD,KAAK;QACT2C,QAAQ,EAAEA,QAAS;QACnBiB,KAAK,EAAE,CAAC;UAAEpE;QAAO,CAAC,EAAEQ,KAAK,CAAC4D,KAAK,CAAE;QACjCrE,SAAS,EAAEnC,EAAE,CAACiB,IAAI,CAAC,CAAC,EAAEkB,SAAS,CAAE;QAAAQ,QAAA,EAEhCE,GAAG,CAACE,KAAK,GAAG,CAAC,IAAIF,GAAG,CAACT,MAAM,GAAG,CAAC,gBAC9B5B,KAAA,CAAAF,SAAA;UAAAqC,QAAA,GACGiD,MAAM,CAACC,IAAI,EACXD,MAAM,CAACE,IAAI,EACXF,MAAM,CAACG,IAAI;QAAA,CACZ,CAAC,GACD;MAAI,CACJ;IAAC,CACQ;EAAC,CACK,CAAC;AAE9B;AAEA,SAASO,SAASA,CAAC;EAAE3D;AAAkC,CAAC,EAAE;EACxD,oBAAOvC,IAAA,CAAAE,SAAA;IAAAqC,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB;AAOA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS8D,YAAYA,CAAC;EAAEtE,SAAS;EAAEQ,QAAQ;EAAE,GAAGC;AAAyB,CAAC,EAAE;EAC1E,MAAM;IAAEG,KAAK;IAAEX;EAAO,CAAC,GAAGR,UAAU,CAAC,eAAe,CAAC;EAErD,oBACExB,IAAA,CAACf,IAAI;IAAA,GACCuD,KAAK;IACT8D,aAAa,EAAC,MAAM;IACpBF,KAAK,EAAE,CAAC;MAAEG,QAAQ,EAAE,UAAU;MAAEC,IAAI,EAAE,CAAC;MAAEC,GAAG,EAAE,CAAC;MAAE9D,KAAK;MAAEX;IAAO,CAAC,EAAEQ,KAAK,CAAC4D,KAAK,CAAE;IAC/ErE,SAAS,EAAEnC,EAAE,CAACmC,SAAS,CAAE;IAAAQ,QAAA,EAExBA;EAAQ,CACL,CAAC;AAEX;AACA8D,YAAY,CAACK,WAAW,GAAG,eAAe;AAC1CL,YAAY,CAACN,KAAK,GAAG,MAAe;AAOpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASY,aAAaA,CAAC;EAAE5E,SAAS;EAAEQ,QAAQ;EAAE,GAAGC;AAA0B,CAAC,EAAE;EAC5E,MAAM;IAAEW,KAAK;IAAER,KAAK;IAAEX,MAAM;IAAEb,WAAW;IAAE4B;EAAS,CAAC,GAAGvB,UAAU,CAAC,gBAAgB,CAAC;EACpF,MAAMJ,UAAU,GAAGD,WAAW,KAAK,YAAY;EAC/C;AACF;AACA;AACA;AACA;AACA;AACA;EACE,MAAMyF,MAAM,GAAGxF,UAAU,IAAI2B,QAAQ,GAAG,OAAO,GAAG,MAAM;EAExD,MAAM2C,IAAI,GAAGnG,gBAAgB,CAAC,MAC5B6B,UAAU,GACN;IAAEuB,KAAK,EAAEQ,KAAK,CAACtB,KAAK,GAAGc,KAAK;IAAEX;EAAO,CAAC,GACtC;IAAEW,KAAK;IAAEX,MAAM,EAAEmB,KAAK,CAACtB,KAAK,GAAGG;EAAO,CAC5C,CAAC;EAED,oBACEhC,IAAA,CAACZ,QAAQ,CAACH,IAAI;IACZqH,aAAa,EAAC,MAAM;IACpBF,KAAK,EAAE,CAAC;MAAEG,QAAQ,EAAE,UAAU;MAAE,CAACK,MAAM,GAAG,CAAC;MAAEH,GAAG,EAAE,CAAC;MAAEI,QAAQ,EAAE;IAAS,CAAC,EAAEnB,IAAI,CAAE;IAAAnD,QAAA,eAEjFvC,IAAA,CAACf,IAAI;MAAA,GACCuD,KAAK;MACT4D,KAAK,EAAE,CAAC;QAAEG,QAAQ,EAAE,UAAU;QAAE,CAACK,MAAM,GAAG,CAAC;QAAEH,GAAG,EAAE,CAAC;QAAE9D,KAAK;QAAEX;MAAO,CAAC,EAAEQ,KAAK,CAAC4D,KAAK,CAAE;MACnFrE,SAAS,EAAEnC,EAAE,CAACmC,SAAS,CAAE;MAAAQ,QAAA,EAExBA;IAAQ,CACL;EAAC,CACM,CAAC;AAEpB;AACAoE,aAAa,CAACD,WAAW,GAAG,gBAAgB;AAC5CC,aAAa,CAACZ,KAAK,GAAG,MAAe;AAYrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASe,aAAaA,CAAC;EACrB/E,SAAS;EACTgF,QAAQ,GAAG,IAAI;EACfC,kBAAkB,GAAG,SAAS;EAC9BzE,QAAQ;EACR6D,KAAK;EACL,GAAG5D;AACe,CAAC,EAAE;EACrB,MAAM;IAAEW,KAAK;IAAER,KAAK;IAAEX,MAAM;IAAEb,WAAW;IAAE4B,QAAQ;IAAEX,QAAQ;IAAEC,IAAI;IAAEsB;EAAM,CAAC,GAC1EnC,UAAU,CAAC,gBAAgB,CAAC;EAC9B,MAAMJ,UAAU,GAAGD,WAAW,KAAK,YAAY;EAC/C,MAAM;IAAEL,IAAI;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAK,CAAC,GAAGN,eAAe,CAAC;IAAEQ;EAAY,CAAC,CAAC;EACnE;EACA,MAAMyF,MAAM,GAAGxF,UAAU,IAAI2B,QAAQ,GAAG,OAAO,GAAG,MAAM;EACxD,MAAMkE,OAAO,GAAG7F,UAAU,IAAI2B,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;EAE/C,MAAMmE,MAAM,GAAG1H,eAAe,CAAC,MAC7B4B,UAAU,GAAG+B,KAAK,CAACtB,KAAK,GAAGc,KAAK,GAAGQ,KAAK,CAACtB,KAAK,GAAGG,MACnD,CAAC;EAED,MAAMmF,aAAa,GAAG5H,gBAAgB,CAAC,MACrC6B,UAAU,GACN;IAAEgG,SAAS,EAAE,CAAC;MAAEC,UAAU,EAAE,CAACH,MAAM,CAACrF,KAAK,GAAGvB,IAAI,GAAG,CAAC,IAAI2G;IAAQ,CAAC;EAAE,CAAC,GACpE;IAAEG,SAAS,EAAE,CAAC;MAAEE,UAAU,EAAEJ,MAAM,CAACrF,KAAK,GAAGvB,IAAI,GAAG;IAAE,CAAC;EAAE,CAC7D,CAAC;EAED,MAAM,CAACiH,GAAG,EAAEC,MAAM,CAAC,GAAGxI,QAAQ,CAAC,MAAM4F,IAAI,CAACC,KAAK,CAAC1B,KAAK,CAACtB,KAAK,GAAG,GAAG,CAAC,CAAC;EACnE;EACA;EACA;EACAvC,mBAAmB,CACjB,MAAMsF,IAAI,CAACC,KAAK,CAAC1B,KAAK,CAACtB,KAAK,GAAG,GAAG,CAAC,EACnC,CAAC8C,OAAO,EAAE8C,QAAQ,KAAK;IACrB,IAAI9C,OAAO,KAAK8C,QAAQ,EAAEpI,OAAO,CAACmI,MAAM,CAAC,CAAC7C,OAAO,CAAC;EACpD,CACF,CAAC;EAED,MAAM+C,qBAAqB,GAAG9I,WAAW,CACtC0F,KAA+B,IAAK;IACnC,IAAIA,KAAK,CAACgB,WAAW,CAACqC,UAAU,KAAK,WAAW,EAAEhE,KAAK,CAACtB,IAAI,CAAC,CAAC,KACzD,IAAIiC,KAAK,CAACgB,WAAW,CAACqC,UAAU,KAAK,WAAW,EAAEhE,KAAK,CAAC,CAACtB,IAAI,CAAC;EACrE,CAAC,EACD,CAACsB,KAAK,EAAEtB,IAAI,CACd,CAAC;EAED,oBACEjC,KAAA,CAAChB,QAAQ,CAACH,IAAI;IAAA,GACRuD,KAAK;IACToF,UAAU;IACVC,iBAAiB,EAAC,YAAY;IAC9Bb,kBAAkB,EAAEA,kBAAmB;IACvCc,kBAAkB,EAAE;MAAE1F;IAAS,CAAE;IACjC2F,kBAAkB,EAAE;MAAEC,GAAG,EAAE,CAAC;MAAEC,GAAG,EAAE,GAAG;MAAEV;IAAI,CAAE;IAC9CW,oBAAoB,EAAE9F,QAAQ,GAAGa,SAAS,GAAG,CAAC;MAAEkF,IAAI,EAAE;IAAY,CAAC,EAAE;MAAEA,IAAI,EAAE;IAAY,CAAC,CAAE;IAC5FT,qBAAqB,EAAEtF,QAAQ,GAAGa,SAAS,GAAGyE,qBAAsB;IACpEpB,aAAa,EAAC,UAAU;IACxBF,KAAK,EAAE,CACLhF,UAAU,GAAG;MAAEuB,KAAK,EAAErC,IAAI;MAAE,CAACsG,MAAM,GAAG;IAAE,CAAC,GAAG;MAAE5E,MAAM,EAAE1B,IAAI;MAAEmG,GAAG,EAAE;IAAE,CAAC,EACpEL,KAAK,EACLe,aAAa,CACb;IACFpF,SAAS,EAAEjB,IAAI,CAAC,CAAE;IAAAyB,QAAA,gBAElBvC,IAAA,CAACf,IAAI;MAAC8C,SAAS,EAAEhB,IAAI,CAAC,CAAE;MAACuF,aAAa,EAAC;IAAM,CAAE,CAAC,EAC/C/D,QAAQ,iBACPvC,IAAA,CAACf,IAAI;MAACmH,KAAK,EAAE;QAAEzD,KAAK,EAAErC,IAAI;QAAE0B,MAAM,EAAE1B;MAAK,CAAE;MAACyB,SAAS,EAAEf,IAAI,CAAC,CAAE;MAACsF,aAAa,EAAC,MAAM;MAAA/D,QAAA,EAChFwE,QAAQ,gBACP3G,KAAA,CAACnB,IAAI;QAAC8C,SAAS,EAAEX,UAAU,GAAG,gBAAgB,GAAG,OAAQ;QAAAmB,QAAA,gBACvDvC,IAAA,CAACf,IAAI;UAAC8C,SAAS,EAAEd,IAAI,CAAC;QAAE,CAAE,CAAC,eAC3BjB,IAAA,CAACf,IAAI;UAAC8C,SAAS,EAAEd,IAAI,CAAC;QAAE,CAAE,CAAC;MAAA,CACvB,CAAC,GACL;IAAI,CACJ,CACP;EAAA,CACY,CAAC;AAEpB;AACA6F,aAAa,CAACJ,WAAW,GAAG,gBAAgB;AAC5CI,aAAa,CAACf,KAAK,GAAG,MAAe;AASrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASqC,YAAYA,CAAC;EAAErG,SAAS;EAAEsG,IAAI,GAAG,OAAO;EAAE9F,QAAQ;EAAE,GAAGC;AAAyB,CAAC,EAAE;EAC1F,MAAM;IAAErB,WAAW;IAAE4B;EAAS,CAAC,GAAGvB,UAAU,CAAC,eAAe,CAAC;EAC7D,MAAMJ,UAAU,GAAGD,WAAW,KAAK,YAAY;EAC/C;EACA,MAAM2C,KAAK,GAAG1C,UAAU,IAAI2B,QAAQ,GAAGsF,IAAI,KAAK,OAAO,GAAGA,IAAI,KAAK,OAAO;EAE1E,oBACErI,IAAA,CAACf,IAAI;IAAA,GACCuD,KAAK;IACT8D,aAAa,EAAC,MAAM;IACpBF,KAAK,EAAE,CACL;MACEG,QAAQ,EAAE,UAAU;MACpB,IAAInF,UAAU,GACV;QAAEqF,GAAG,EAAE,CAAC;QAAE,IAAI3C,KAAK,GAAG;UAAE0C,IAAI,EAAE;QAAE,CAAC,GAAG;UAAE8B,KAAK,EAAE;QAAE,CAAC;MAAE,CAAC,GACnD;QAAE9B,IAAI,EAAE,CAAC;QAAE,IAAI1C,KAAK,GAAG;UAAE2C,GAAG,EAAE;QAAE,CAAC,GAAG;UAAE8B,MAAM,EAAE;QAAE,CAAC;MAAE,CAAC;IAC1D,CAAC,EACD/F,KAAK,CAAC4D,KAAK,CACX;IACFrE,SAAS,EAAEnC,EAAE,CAAC,uCAAuC,EAAEmC,SAAS,CAAE;IAAAQ,QAAA,EAEjE,OAAOA,QAAQ,KAAK,QAAQ,gBAC3BvC,IAAA,CAACL,IAAI;MAAC6I,IAAI,EAAC,IAAI;MAACC,MAAM,EAAC,QAAQ;MAACC,aAAa,EAAE,CAAE;MAAAnG,QAAA,EAC9CA;IAAQ,CACL,CAAC,GAEPA;EACD,CACG,CAAC;AAEX;AACA6F,YAAY,CAAC1B,WAAW,GAAG,eAAe;AAC1C0B,YAAY,CAACrC,KAAK,GAAG,MAAe;AAEpCjE,WAAW,CAAC4E,WAAW,GAAG,SAAS;AAEnC,OAAO,MAAMiC,OAAO,GAAGC,MAAM,CAACC,MAAM,CAAC/G,WAAW,EAAE;EAChDgH,MAAM,EAAEnC,aAAa;EACrBoC,KAAK,EAAE1C,YAAY;EACnB2C,MAAM,EAAElC,aAAa;EACrBmC,KAAK,EAAEb;AACT,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/planner/index.js

@@ -160,6 +160,13 @@ const dayVariants = tv({
      * point; the variants below only colour it.
      */
     cell: 'mx-0.5 h-14 flex-1 rounded-xl border border-transparent px-1.5 pt-1.5',
+    /*
+     * `leading-none` is safe here and only here: these slots hold a day
+     * number, `•••` or `+3`, and none of those has anything below the
+     * baseline for Android to clip. Anywhere the caller's own words can
+     * appear it has to be `leading-tight` — a line height equal to the font
+     * size loses the tail of every `g` and `y` on that platform.
+     */
     number: 'text-xs leading-none',
     marker: 'absolute right-1.5 top-1.5 h-1.5 w-1.5 rounded-full',
     body: 'flex-1 flex-row items-center justify-center gap-0.5 pb-1',
@@ -935,7 +942,7 @@ function PlannerChip({
     children: /*#__PURE__*/_jsx(Text, {
       size: "xs",
       numberOfLines: 1,
-      className: cn('leading-none', !color && 'text-foreground'),
+      className: cn('leading-tight', !color && 'text-foreground'),
       style: color ? {
         color: '#ffffff'
       } : undefined,