@g9tm/lynxcontrols 0.0.0-stage → 1.4.2

package/dist/display/progress-bar.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"display/progress-bar.jsx","sources":["../../src/display/progress-bar.tsx"],"sourcesContent":["import './display.css';\nimport {\n  formatColor,\n  type G9ProgressLabelPlacement,\n  type G9ProgressType,\n  lighten,\n  resolveProgressColor,\n} from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\nimport { useG9Theme } from '../provider/hooks';\n\n/** Props of {@link G9ProgressBar} (MAUI `G9ProgressBar`). */\nexport interface G9ProgressBarProps extends G9ControlBaseProps {\n  /** 0–1; only the display is clamped. Changes animate over 300 ms. Default 0. */\n  readonly value?: number;\n  /** Default `var(--g9-surface-variant)`. */\n  readonly trackColor?: string | null;\n  /** Fill and label colour; default the `progressType` colour. Must be a colour literal (it is lightened). */\n  readonly progressColor?: string | null;\n  /** Capped at half the bar height. Default 999 (pill). */\n  readonly cornerRadius?: number;\n  /** Default 10. */\n  readonly barHeight?: number;\n  /** `'above'` and `'end'` both show `NN%` above the bar, end-aligned (as MAUI). Default `'none'`. */\n  readonly labelPlacement?: G9ProgressLabelPlacement;\n  /** A 20 % segment sweeps left to right (≈ 1.33 s) instead of a fill. Default false. */\n  readonly isIndeterminate?: boolean;\n  /** Four dots at 1/5 … 4/5. Default false. */\n  readonly showSegments?: boolean;\n  /** Default `'primary'`. */\n  readonly progressType?: G9ProgressType;\n  /** Freezes the sweep and hides the stripes; disabled behaves as paused. Default false. */\n  readonly isPaused?: boolean;\n}\n\n/** The progress label: `round(clamp(value) × 100)%`, Latin digits (MAUI formats with .NET, which keeps them). */\nexport function progressLabel(value: number): string {\n  return `${Math.round(clampProgress(value) * 100)}%`;\n}\n\n/** Clamps a progress value to [0, 1]; NaN is 0. */\nexport function clampProgress(value: number): number {\n  if (!(value > 0)) return 0;\n  return value > 1 ? 1 : value;\n}\n\n/**\n * Linear progress (MAUI `G9ProgressBar`): gradient fill (colour → 24 % lighter), diagonal stripes while running,\n * optional segments and label, indeterminate sweep. All motion is CSS (transition on the width, keyframes for the\n * sweep and the stripes); the stored value is never changed.\n */\nexport function G9ProgressBar(props: G9ProgressBarProps): ReactNode {\n  const control = useG9Control(props, 'g9-progress');\n  const palette = useG9Theme().palette;\n  const height = props.barHeight ?? 10;\n  const radius = Math.min(props.cornerRadius ?? 999, height / 2);\n  const color = props.progressColor ?? resolveProgressColor(props.progressType ?? 'primary', palette);\n  const fill = `linear-gradient(to right, ${color}, ${formatColor(lighten(color, 0.24))})`;\n  const paused = props.isPaused === true || control.disabled;\n  const indeterminate = props.isIndeterminate === true;\n  const placement = props.labelPlacement ?? 'none';\n  const value = clampProgress(props.value ?? 0);\n  return (\n    <view className={control.className} {...control.idProps}>\n      {placement !== 'none' ? (\n        <text className=\"g9-progress__label\" style={{ color }}>\n          {progressLabel(value)}\n        </text>\n      ) : null}\n      <view\n        className=\"g9-progress__track g9-dir-ltr\"\n        style={{\n          height: `${height}px`,\n          borderRadius: `${radius}px`,\n          backgroundColor: props.trackColor ?? palette.SurfaceVariant,\n        }}\n        accessibility-element={true}\n        {...(props.accessibilityLabel ? { 'accessibility-label': props.accessibilityLabel } : {})}\n        accessibility-value={indeterminate ? '' : progressLabel(value)}\n      >\n        <view\n          className={`g9-progress__fill${indeterminate ? ' g9-progress__fill--indeterminate' : ''}${indeterminate && !paused ? ' g9-progress__fill--sweep' : ''}`}\n          style={{ width: indeterminate ? '20%' : `${value * 100}%`, borderRadius: `${radius}px`, background: fill }}\n        >\n          {!paused ? <view className=\"g9-progress__stripes\" /> : null}\n        </view>\n        {props.showSegments\n          ? [1, 2, 3, 4].map((i) => <view key={i} className=\"g9-progress__segment\" style={{ left: `${i * 20}%` }} />)\n          : null}\n      </view>\n    </view>\n  );\n}\n"],"names":["progressLabel","value","Math","clampProgress","G9ProgressBar","props","_props_barHeight","_props_cornerRadius","_props_progressColor","_props_progressType","_props_labelPlacement","_props_value","_props_trackColor","control","useG9Control","palette","useG9Theme","height","radius","color","resolveProgressColor","fill","formatColor","lighten","paused","indeterminate","placement","view","text","i"],"mappings":";;;;AAqCO,SAASA,cAAcC,KAAa;IACzC,OAAO,GAAGC,KAAK,KAAK,CAACC,AAAuB,MAAvBA,cAAcF,QAAc,CAAC,CAAC;AACrD;AAGO,SAASE,cAAcF,KAAa;IACzC,IAAI,CAAEA,CAAAA,QAAQ,IAAI,OAAO;IACzB,OAAOA,QAAQ,IAAI,IAAIA;AACzB;AAOO,SAASG,cAAcC,KAAyB;QAGtCC,kBACSC,qBACVC,sBAA4CC,qBAIxCC,uBACUC,cAaHC;IAtBzB,MAAMC,UAAUC,aAAaT,OAAO;IACpC,MAAMU,UAAUC,aAAa,OAAO;IACpC,MAAMC,SAAS,QAAAX,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;IAClC,MAAMY,SAAShB,KAAK,GAAG,CAAC,QAAAK,CAAAA,sBAAAA,MAAM,YAAY,AAAD,IAAjBA,sBAAsB,KAAKU,SAAS;IAC5D,MAAME,QAAQ,QAAAX,CAAAA,uBAAAA,MAAM,aAAa,AAAD,IAAlBA,uBAAuBY,qBAAqB,QAAAX,CAAAA,sBAAAA,MAAM,YAAY,AAAD,IAAjBA,sBAAsB,WAAWM;IAC3F,MAAMM,OAAO,CAAC,0BAA0B,EAAEF,MAAM,EAAE,EAAEG,YAAYC,QAAQJ,OAAO,OAAO,CAAC,CAAC;IACxF,MAAMK,SAASnB,AAAmB,SAAnBA,MAAM,QAAQ,IAAaQ,QAAQ,QAAQ;IAC1D,MAAMY,gBAAgBpB,AAA0B,SAA1BA,MAAM,eAAe;IAC3C,MAAMqB,YAAY,QAAAhB,CAAAA,wBAAAA,MAAM,cAAc,AAAD,IAAnBA,wBAAwB;IAC1C,MAAMT,QAAQE,cAAc,QAAAQ,CAAAA,eAAAA,MAAM,KAAK,AAAD,IAAVA,eAAe;IAC3C,QACGgB,KAAK,WAAWd,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE;MACvD,CAACa,AAAc,WAAdA,aACEE,KAAK,UAAU,qBAAqB,OAAO;QAAET;IAAM,GAAG;UACrD,CAACnB,cAAcC,OAAO;QACxB,EAAE2B,QACA,KAAK;MACT,CAACD,KACC,UAAU,gCACV,OAAO;QACL,QAAQ,GAAGV,OAAO,EAAE,CAAC;QACrB,cAAc,GAAGC,OAAO,EAAE,CAAC;QAC3B,iBAAiB,QAAAN,CAAAA,oBAAAA,MAAM,UAAU,AAAD,IAAfA,oBAAoBG,QAAQ,cAAc;IAC7D,GACA,uBAAuB,OACtB,GAAIV,MAAM,kBAAkB,GAAG;QAAE,uBAAuBA,MAAM,kBAAkB;IAAC,IAAI,CAAC,CAAC,EACxF,qBAAqBoB,gBAAgB,KAAKzB,cAAcC,QACzD;QACC,CAAC0B,KACC,WAAW,CAAC,iBAAiB,EAAEF,gBAAgB,sCAAsC,KAAKA,iBAAiB,CAACD,SAAS,8BAA8B,IAAI,EACvJ,OAAO;QAAE,OAAOC,gBAAgB,QAAQ,GAAGxB,AAAQ,MAARA,MAAY,CAAC,CAAC;QAAE,cAAc,GAAGiB,OAAO,EAAE,CAAC;QAAE,YAAYG;IAAK,GAC1G;UACC,CAAC,CAACG,UAAUG,KAAK,UAAU,2BAA4B,KAAK;QAC9D,EAAEA,KAAK;QACP,CAACtB,MAAM,YAAY,GACf;QAAC;QAAG;QAAG;QAAG;KAAE,CAAC,GAAG,CAAC,CAACwB,KAAOF,KAAK,KAAKE,GAAG,UAAU,uBAAuB,OAAO;YAAE,MAAM,GAAGA,AAAI,KAAJA,EAAO,CAAC,CAAC;QAAC,QACnG,KAAK;MACX,EAAEF,KAAK;IACT,EAAEA;AAEN"}

package/dist/display/separator.d.ts

@@ -0,0 +1,30 @@
+import './display.css';
+import type { G9ImageSource, G9SeparatorTitleAlignment } from '@g9tm/lynxcontrols-foundation';
+import type { ReactNode } from '@lynx-js/react';
+import { type G9ControlBaseProps } from '../base/control.js';
+import type { G9IconInput } from '../icon/icon.js';
+/** Props of {@link G9Separator} (MAUI `G9Separator`). */
+export interface G9SeparatorProps extends G9ControlBaseProps {
+    /** Upper-cased bold 10 label; empty = one full-width line. */
+    readonly title?: string | null;
+    /** `'auto'` (default) is start. */
+    readonly titleAlignment?: G9SeparatorTitleAlignment;
+    /** Title and icon colour. Default `var(--g9-text-tertiary)`. */
+    readonly titleColor?: string | null;
+    /** Default `var(--g9-divider)`. */
+    readonly lineColor?: string | null;
+    /** Line thickness. Default 1. */
+    readonly thickness?: number;
+    readonly iconEmoji?: string | null;
+    readonly icon?: G9IconInput;
+    readonly iconPath?: string | null;
+    readonly iconImage?: G9ImageSource | null;
+}
+/** Upper-cases a separator title without `Intl` (Lynx has none): the runtime's default `toUpperCase`. */
+export declare function separatorTitleText(title: string): string;
+/**
+ * Section separator (MAUI `G9Separator`): a line, or a title with lines at the start, end or both sides (reading
+ * order: start/end swap in RTL). Padding 14 top, 8 bottom; 10 px between title and line.
+ */
+export declare function G9Separator(props: G9SeparatorProps): ReactNode;
+//# sourceMappingURL=separator.d.ts.map

package/dist/display/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/display/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAC9F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,KAAK,kBAAkB,EAAgB,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,yDAAyD;AACzD,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,8DAA8D;IAC9D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,cAAc,CAAC,EAAE,yBAAyB,CAAC;IACpD,gEAAgE;IAChE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,mCAAmC;IACnC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,iCAAiC;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CAC3C;AAED,yGAAyG;AACzG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAExD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAwC9D"}

package/dist/display/separator.jsx

@@ -0,0 +1,55 @@
+import "./display.css";
+import { useG9Control } from "../base/control.jsx";
+import { G9IconSlot, hasIconSlot } from "../icon/slot.jsx";
+function separatorTitleText(title) {
+    return title.toUpperCase();
+}
+function G9Separator(props) {
+    var _props_thickness, _props_titleColor, _props_titleAlignment;
+    const control = useG9Control(props, 'g9-separator');
+    const thickness = null != (_props_thickness = props.thickness) ? _props_thickness : 1;
+    const line = (key)=>{
+        var _props_lineColor;
+        return <view key={key} className="g9-separator__line" style={{
+            height: `${thickness}px`,
+            backgroundColor: null != (_props_lineColor = props.lineColor) ? _props_lineColor : 'var(--g9-divider)'
+        }}/>;
+    };
+    const title = props.title && '' !== props.title.trim() ? props.title : null;
+    if (!title) return <view className={control.className} {...control.idProps} accessibility-element={false}>
+        {line('only')}
+      </view>;
+    const color = null != (_props_titleColor = props.titleColor) ? _props_titleColor : 'var(--g9-text-tertiary)';
+    const icon = {
+        emoji: props.iconEmoji,
+        icon: props.icon,
+        imagePath: props.iconPath,
+        image: props.iconImage
+    };
+    const label = <view key="title" className="g9-separator__title">
+      {hasIconSlot(icon) ? <G9IconSlot {...icon} size={12} color={color}/> : null}
+      <text className="g9-separator__text" style={{
+        color
+    }}>
+        {separatorTitleText(title)}
+      </text>
+    </view>;
+    const alignment = null != (_props_titleAlignment = props.titleAlignment) ? _props_titleAlignment : 'auto';
+    const children = 'center' === alignment ? [
+        line('a'),
+        label,
+        line('b')
+    ] : 'end' === alignment ? [
+        line('a'),
+        label
+    ] : [
+        label,
+        line('b')
+    ];
+    return <view className={control.className} {...control.idProps} accessibility-element={true} accessibility-label={title}>
+      {children}
+    </view>;
+}
+export { G9Separator, separatorTitleText };
+
+//# sourceMappingURL=separator.jsx.map

package/dist/display/separator.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"display/separator.jsx","sources":["../../src/display/separator.tsx"],"sourcesContent":["import './display.css';\nimport type { G9ImageSource, G9SeparatorTitleAlignment } from '@g9tm/lynxcontrols-foundation';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\nimport type { G9IconInput } from '../icon/icon';\nimport { G9IconSlot, hasIconSlot } from '../icon/slot';\n\n/** Props of {@link G9Separator} (MAUI `G9Separator`). */\nexport interface G9SeparatorProps extends G9ControlBaseProps {\n  /** Upper-cased bold 10 label; empty = one full-width line. */\n  readonly title?: string | null;\n  /** `'auto'` (default) is start. */\n  readonly titleAlignment?: G9SeparatorTitleAlignment;\n  /** Title and icon colour. Default `var(--g9-text-tertiary)`. */\n  readonly titleColor?: string | null;\n  /** Default `var(--g9-divider)`. */\n  readonly lineColor?: string | null;\n  /** Line thickness. Default 1. */\n  readonly thickness?: number;\n  readonly iconEmoji?: string | null;\n  readonly icon?: G9IconInput;\n  readonly iconPath?: string | null;\n  readonly iconImage?: G9ImageSource | null;\n}\n\n/** Upper-cases a separator title without `Intl` (Lynx has none): the runtime's default `toUpperCase`. */\nexport function separatorTitleText(title: string): string {\n  return title.toUpperCase();\n}\n\n/**\n * Section separator (MAUI `G9Separator`): a line, or a title with lines at the start, end or both sides (reading\n * order: start/end swap in RTL). Padding 14 top, 8 bottom; 10 px between title and line.\n */\nexport function G9Separator(props: G9SeparatorProps): ReactNode {\n  const control = useG9Control(props, 'g9-separator');\n  const thickness = props.thickness ?? 1;\n  const line = (key: string) => (\n    <view\n      key={key}\n      className=\"g9-separator__line\"\n      style={{ height: `${thickness}px`, backgroundColor: props.lineColor ?? 'var(--g9-divider)' }}\n    />\n  );\n  const title = props.title && props.title.trim() !== '' ? props.title : null;\n  if (!title) {\n    return (\n      <view className={control.className} {...control.idProps} accessibility-element={false}>\n        {line('only')}\n      </view>\n    );\n  }\n  const color = props.titleColor ?? 'var(--g9-text-tertiary)';\n  const icon = { emoji: props.iconEmoji, icon: props.icon, imagePath: props.iconPath, image: props.iconImage };\n  const label = (\n    <view key=\"title\" className=\"g9-separator__title\">\n      {hasIconSlot(icon) ? <G9IconSlot {...icon} size={12} color={color} /> : null}\n      <text className=\"g9-separator__text\" style={{ color }}>\n        {separatorTitleText(title)}\n      </text>\n    </view>\n  );\n  const alignment = props.titleAlignment ?? 'auto';\n  const children =\n    alignment === 'center'\n      ? [line('a'), label, line('b')]\n      : alignment === 'end'\n        ? [line('a'), label]\n        : [label, line('b')];\n  return (\n    <view className={control.className} {...control.idProps} accessibility-element={true} accessibility-label={title}>\n      {children}\n    </view>\n  );\n}\n"],"names":["separatorTitleText","title","G9Separator","props","_props_thickness","_props_titleColor","_props_titleAlignment","control","useG9Control","thickness","line","key","_props_lineColor","view","color","icon","label","hasIconSlot","G9IconSlot","text","alignment","children"],"mappings":";;;AA0BO,SAASA,mBAAmBC,KAAa;IAC9C,OAAOA,MAAM,WAAW;AAC1B;AAMO,SAASC,YAAYC,KAAuB;QAE/BC,kBAgBJC,mBAUIC;IA3BlB,MAAMC,UAAUC,aAAaL,OAAO;IACpC,MAAMM,YAAY,QAAAL,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;IACrC,MAAMM,OAAO,CAACC;YAI0CC;gBAHrDC,KACC,KAAKF,KACL,UAAU,qBACV,OAAO;YAAE,QAAQ,GAAGF,UAAU,EAAE,CAAC;YAAE,iBAAiB,QAAAG,CAAAA,mBAAAA,MAAM,SAAS,AAAD,IAAdA,mBAAmB;QAAoB;;IAG/F,MAAMX,QAAQE,MAAM,KAAK,IAAIA,AAAuB,OAAvBA,MAAM,KAAK,CAAC,IAAI,KAAYA,MAAM,KAAK,GAAG;IACvE,IAAI,CAACF,OACH,QACGY,KAAK,WAAWN,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE,uBAAuB,OAAO;QACrF,CAACG,KAAK,QAAQ;MAChB,EAAEG;IAGN,MAAMC,QAAQ,QAAAT,CAAAA,oBAAAA,MAAM,UAAU,AAAD,IAAfA,oBAAoB;IAClC,MAAMU,OAAO;QAAE,OAAOZ,MAAM,SAAS;QAAE,MAAMA,MAAM,IAAI;QAAE,WAAWA,MAAM,QAAQ;QAAE,OAAOA,MAAM,SAAS;IAAC;IAC3G,MAAMa,SACHH,KAAK,IAAI,QAAQ,UAAU,sBAAsB;MAChD,CAACI,YAAYF,SAASG,YAAY,GAAGH,IAAI,EAAE,MAAM,IAAI,OAAOD,WAAY,KAAK;MAC7E,CAACK,KAAK,UAAU,qBAAqB,OAAO;QAAEL;IAAM,GAAG;QACrD,CAACd,mBAAmBC,OAAO;MAC7B,EAAEkB,KAAK;IACT,EAAEN;IAEJ,MAAMO,YAAY,QAAAd,CAAAA,wBAAAA,MAAM,cAAc,AAAD,IAAnBA,wBAAwB;IAC1C,MAAMe,WACJD,AAAc,aAAdA,YACI;QAACV,KAAK;QAAMM;QAAON,KAAK;KAAK,GAC7BU,AAAc,UAAdA,YACE;QAACV,KAAK;QAAMM;KAAM,GAClB;QAACA;QAAON,KAAK;KAAK;IAC1B,QACGG,KAAK,WAAWN,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE,uBAAuB,MAAM,qBAAqBN,OAAO;MAChH,CAACoB,SAAS;IACZ,EAAER;AAEN"}

package/dist/display/shimmer.d.ts

@@ -0,0 +1,41 @@
+import './display.css';
+import type { ReactNode } from '@lynx-js/react';
+/** Shape of a sheet's loading placeholder (MAUI `G9BottomSheetLoadingSkeleton`; sheets use it in WP05). */
+export declare const G9BottomSheetLoadingSkeleton: {
+    /** No skeleton: the sheet shows its spinner. */
+    readonly None: "none";
+    /** Field-shaped bars (48 high). */
+    readonly FormFields: "formFields";
+    /** List rows: a circle and a bar (52 high). */
+    readonly ListRows: "listRows";
+};
+export type G9BottomSheetLoadingSkeleton = (typeof G9BottomSheetLoadingSkeleton)[keyof typeof G9BottomSheetLoadingSkeleton];
+/** Props of {@link G9ShimmerBand}. */
+export interface G9ShimmerBandProps {
+    /** Sweeping; false stops the animation (hidden content does no work). Default true. */
+    readonly active?: boolean;
+}
+/**
+ * The highlight band that sweeps over skeleton shapes (MAUI `G9ShimmerBandView`): left to right every 1100 ms, white
+ * (peak 0.38) in light themes and black (peak 0.20) in dark ones, input-transparent. CSS keyframes only: no work on
+ * the JavaScript threads, and none at all when inactive or unmounted.
+ */
+export declare function G9ShimmerBand(props: G9ShimmerBandProps): ReactNode;
+/** Rows of a sheet skeleton: `rowCount` > 0, else 4 (form fields) or 5; clamped to 2–10. */
+export declare function sheetSkeletonRowCount(skeleton: G9BottomSheetLoadingSkeleton, rowCount: number): number;
+/** Props of {@link G9SheetSkeleton}. */
+export interface G9SheetSkeletonProps {
+    readonly skeleton: G9BottomSheetLoadingSkeleton;
+    /** Rows; ≤ 0 → the default for the shape. */
+    readonly rowCount?: number;
+    /** Opaque background. Default `var(--g9-background)`. */
+    readonly backgroundColor?: string | null;
+    /** Sweep the band. Default true. */
+    readonly active?: boolean;
+}
+/**
+ * A sheet's loading skeleton with the shimmer band (MAUI `G9Shimmer.CreateSheetSkeleton`): form-field bars, or list
+ * rows (`'none'` renders list rows too, as MAUI). Fills its parent, input-transparent.
+ */
+export declare function G9SheetSkeleton(props: G9SheetSkeletonProps): ReactNode;
+//# sourceMappingURL=shimmer.d.ts.map

package/dist/display/shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../src/display/shimmer.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,2GAA2G;AAC3G,eAAO,MAAM,4BAA4B;IACvC,gDAAgD;;IAEhD,mCAAmC;;IAEnC,+CAA+C;;CAEvC,CAAC;AACX,MAAM,MAAM,4BAA4B,GACtC,CAAC,OAAO,4BAA4B,CAAC,CAAC,MAAM,OAAO,4BAA4B,CAAC,CAAC;AAEnF,sCAAsC;AACtC,MAAM,WAAW,kBAAkB;IACjC,uFAAuF;IACvF,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAelE;AAED,4FAA4F;AAC5F,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,4BAA4B,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGtG;AAED,wCAAwC;AACxC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,QAAQ,EAAE,4BAA4B,CAAC;IAChD,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,yDAAyD;IACzD,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,oCAAoC;IACpC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,CAsBtE"}

package/dist/display/shimmer.jsx

@@ -0,0 +1,41 @@
+import "./display.css";
+import { useG9Theme } from "../provider/hooks.jsx";
+const G9BottomSheetLoadingSkeleton = {
+    None: 'none',
+    FormFields: 'formFields',
+    ListRows: 'listRows'
+};
+function G9ShimmerBand(props) {
+    const dark = 'dark' === useG9Theme().scheme;
+    const peak = dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.38)';
+    const clear = dark ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)';
+    const active = false !== props.active;
+    return <view className="g9-shimmer__band-host">
+      {active ? <view className="g9-shimmer__band" style={{
+        background: `linear-gradient(to right, ${clear} 35%, ${peak} 50%, ${clear} 65%)`
+    }}/> : null}
+    </view>;
+}
+function sheetSkeletonRowCount(skeleton, rowCount) {
+    const n = rowCount > 0 ? rowCount : 'formFields' === skeleton ? 4 : 5;
+    return Math.min(10, Math.max(2, Math.floor(n)));
+}
+function G9SheetSkeleton(props) {
+    var _props_rowCount, _props_backgroundColor;
+    const rows = sheetSkeletonRowCount(props.skeleton, null != (_props_rowCount = props.rowCount) ? _props_rowCount : 0);
+    const form = 'formFields' === props.skeleton;
+    const items = [];
+    for(let i = 0; i < rows; i++)items.push(form ? <view key={i} className="g9-skeleton__bar g9-skeleton__field"/> : <view key={i} className="g9-skeleton__row">
+          <view className="g9-skeleton__circle"/>
+          <view className="g9-skeleton__bar g9-skeleton__line"/>
+        </view>);
+    return <view className="g9-skeleton" style={{
+        backgroundColor: null != (_props_backgroundColor = props.backgroundColor) ? _props_backgroundColor : 'var(--g9-background)'
+    }}>
+      <view className={`g9-skeleton__rows${form ? ' g9-skeleton__rows--form' : ''}`}>{items}</view>
+      <G9ShimmerBand active={false !== props.active}/>
+    </view>;
+}
+export { G9BottomSheetLoadingSkeleton, G9SheetSkeleton, G9ShimmerBand, sheetSkeletonRowCount };
+
+//# sourceMappingURL=shimmer.jsx.map

package/dist/display/shimmer.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"display/shimmer.jsx","sources":["../../src/display/shimmer.tsx"],"sourcesContent":["import './display.css';\nimport type { ReactNode } from '@lynx-js/react';\nimport { useG9Theme } from '../provider/hooks';\n\n/** Shape of a sheet's loading placeholder (MAUI `G9BottomSheetLoadingSkeleton`; sheets use it in WP05). */\nexport const G9BottomSheetLoadingSkeleton = {\n  /** No skeleton: the sheet shows its spinner. */\n  None: 'none',\n  /** Field-shaped bars (48 high). */\n  FormFields: 'formFields',\n  /** List rows: a circle and a bar (52 high). */\n  ListRows: 'listRows',\n} as const;\nexport type G9BottomSheetLoadingSkeleton =\n  (typeof G9BottomSheetLoadingSkeleton)[keyof typeof G9BottomSheetLoadingSkeleton];\n\n/** Props of {@link G9ShimmerBand}. */\nexport interface G9ShimmerBandProps {\n  /** Sweeping; false stops the animation (hidden content does no work). Default true. */\n  readonly active?: boolean;\n}\n\n/**\n * The highlight band that sweeps over skeleton shapes (MAUI `G9ShimmerBandView`): left to right every 1100 ms, white\n * (peak 0.38) in light themes and black (peak 0.20) in dark ones, input-transparent. CSS keyframes only: no work on\n * the JavaScript threads, and none at all when inactive or unmounted.\n */\nexport function G9ShimmerBand(props: G9ShimmerBandProps): ReactNode {\n  const dark = useG9Theme().scheme === 'dark';\n  const peak = dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.38)';\n  const clear = dark ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)';\n  const active = props.active !== false;\n  return (\n    <view className=\"g9-shimmer__band-host\">\n      {active ? (\n        <view\n          className=\"g9-shimmer__band\"\n          style={{ background: `linear-gradient(to right, ${clear} 35%, ${peak} 50%, ${clear} 65%)` }}\n        />\n      ) : null}\n    </view>\n  );\n}\n\n/** Rows of a sheet skeleton: `rowCount` > 0, else 4 (form fields) or 5; clamped to 2–10. */\nexport function sheetSkeletonRowCount(skeleton: G9BottomSheetLoadingSkeleton, rowCount: number): number {\n  const n = rowCount > 0 ? rowCount : skeleton === 'formFields' ? 4 : 5;\n  return Math.min(10, Math.max(2, Math.floor(n)));\n}\n\n/** Props of {@link G9SheetSkeleton}. */\nexport interface G9SheetSkeletonProps {\n  readonly skeleton: G9BottomSheetLoadingSkeleton;\n  /** Rows; ≤ 0 → the default for the shape. */\n  readonly rowCount?: number;\n  /** Opaque background. Default `var(--g9-background)`. */\n  readonly backgroundColor?: string | null;\n  /** Sweep the band. Default true. */\n  readonly active?: boolean;\n}\n\n/**\n * A sheet's loading skeleton with the shimmer band (MAUI `G9Shimmer.CreateSheetSkeleton`): form-field bars, or list\n * rows (`'none'` renders list rows too, as MAUI). Fills its parent, input-transparent.\n */\nexport function G9SheetSkeleton(props: G9SheetSkeletonProps): ReactNode {\n  const rows = sheetSkeletonRowCount(props.skeleton, props.rowCount ?? 0);\n  const form = props.skeleton === 'formFields';\n  const items: ReactNode[] = [];\n  for (let i = 0; i < rows; i++) {\n    items.push(\n      form ? (\n        <view key={i} className=\"g9-skeleton__bar g9-skeleton__field\" />\n      ) : (\n        <view key={i} className=\"g9-skeleton__row\">\n          <view className=\"g9-skeleton__circle\" />\n          <view className=\"g9-skeleton__bar g9-skeleton__line\" />\n        </view>\n      ),\n    );\n  }\n  return (\n    <view className=\"g9-skeleton\" style={{ backgroundColor: props.backgroundColor ?? 'var(--g9-background)' }}>\n      <view className={`g9-skeleton__rows${form ? ' g9-skeleton__rows--form' : ''}`}>{items}</view>\n      <G9ShimmerBand active={props.active !== false} />\n    </view>\n  );\n}\n"],"names":["G9BottomSheetLoadingSkeleton","G9ShimmerBand","props","dark","useG9Theme","peak","clear","active","view","sheetSkeletonRowCount","skeleton","rowCount","n","Math","G9SheetSkeleton","_props_rowCount","_props_backgroundColor","rows","form","items","i"],"mappings":";;AAKO,MAAMA,+BAA+B;IAE1C,MAAM;IAEN,YAAY;IAEZ,UAAU;AACZ;AAeO,SAASC,cAAcC,KAAyB;IACrD,MAAMC,OAAOC,AAAwB,WAAxBA,aAAa,MAAM;IAChC,MAAMC,OAAOF,OAAO,oBAAoB;IACxC,MAAMG,QAAQH,OAAO,kBAAkB;IACvC,MAAMI,SAASL,AAAiB,UAAjBA,MAAM,MAAM;IAC3B,QACGM,KAAK,UAAU,wBAAwB;MACtC,CAACD,UACEC,KACC,UAAU,mBACV,OAAO;QAAE,YAAY,CAAC,0BAA0B,EAAEF,MAAM,MAAM,EAAED,KAAK,MAAM,EAAEC,MAAM,KAAK,CAAC;IAAC,OAE1F,KAAK;IACX,EAAEE;AAEN;AAGO,SAASC,sBAAsBC,QAAsC,EAAEC,QAAgB;IAC5F,MAAMC,IAAID,WAAW,IAAIA,WAAWD,AAAa,iBAAbA,WAA4B,IAAI;IACpE,OAAOG,KAAK,GAAG,CAAC,IAAIA,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACD;AAC7C;AAiBO,SAASE,gBAAgBZ,KAA2B;QACNa,iBAgBOC;IAhB1D,MAAMC,OAAOR,sBAAsBP,MAAM,QAAQ,EAAE,QAAAa,CAAAA,kBAAAA,MAAM,QAAQ,AAAD,IAAbA,kBAAkB;IACrE,MAAMG,OAAOhB,AAAmB,iBAAnBA,MAAM,QAAQ;IAC3B,MAAMiB,QAAqB,EAAE;IAC7B,IAAK,IAAIC,IAAI,GAAGA,IAAIH,MAAMG,IACxBD,MAAM,IAAI,CACRD,QACGV,KAAK,KAAKY,GAAG,UAAU,2CAEvBZ,KAAK,KAAKY,GAAG,UAAU,mBAAmB;UACzC,CAACZ,KAAK,UAAU,uBAAwB;UACxC,CAACA,KAAK,UAAU,sCAAuC;QACzD,EAAEA;IAIR,QACGA,KAAK,UAAU,cAAc,OAAO;QAAE,iBAAiB,QAAAQ,CAAAA,yBAAAA,MAAM,eAAe,AAAD,IAApBA,yBAAyB;IAAuB,GAAG;MACzG,CAACR,KAAK,WAAW,CAAC,iBAAiB,EAAEU,OAAO,6BAA6B,IAAI,GAAGC,QAAQX,KAAK;MAC7F,CAACP,cAAc,QAAQC,AAAiB,UAAjBA,MAAM,MAAM,GAAc;IACnD,EAAEM;AAEN"}

package/dist/display/title-with-line.d.ts

@@ -0,0 +1,13 @@
+import './display.css';
+import type { ReactNode } from '@lynx-js/react';
+import { type G9ControlBaseProps } from '../base/control.js';
+/** Props of {@link G9TitleWithLine} (MAUI `G9TitleWithLine`). */
+export interface G9TitleWithLineProps extends G9ControlBaseProps {
+    /** Default `'ابزار'` (MAUI's hard-coded Persian "tools"). */
+    readonly text?: string;
+    /** Padding `[left, top, right, bottom]`. Default `[18, 3, 18, 0]`. */
+    readonly padding?: readonly [number, number, number, number];
+}
+/** A 16 px title over a 1 px line (MAUI `G9TitleWithLine`). */
+export declare function G9TitleWithLine(props: G9TitleWithLineProps): ReactNode;
+//# sourceMappingURL=title-with-line.d.ts.map

package/dist/display/title-with-line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-with-line.d.ts","sourceRoot":"","sources":["../../src/display/title-with-line.tsx"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,KAAK,kBAAkB,EAAgB,MAAM,iBAAiB,CAAC;AAExE,iEAAiE;AACjE,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,sEAAsE;IACtE,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;CAC9D;AAED,+DAA+D;AAC/D,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,SAAS,CAStE"}

package/dist/display/title-with-line.jsx

@@ -0,0 +1,21 @@
+import "./display.css";
+import { useG9Control } from "../base/control.jsx";
+function G9TitleWithLine(props) {
+    var _props_padding, _props_text;
+    const control = useG9Control(props, 'g9-title-line');
+    const [l, t, r, b] = null != (_props_padding = props.padding) ? _props_padding : [
+        18,
+        3,
+        18,
+        0
+    ];
+    return <view className={control.className} {...control.idProps} style={{
+        padding: `${t}px ${r}px ${b}px ${l}px`
+    }}>
+      <text className="g9-title-line__text">{null != (_props_text = props.text) ? _props_text : 'ابزار'}</text>
+      <view className="g9-title-line__line"/>
+    </view>;
+}
+export { G9TitleWithLine };
+
+//# sourceMappingURL=title-with-line.jsx.map

package/dist/display/title-with-line.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"display/title-with-line.jsx","sources":["../../src/display/title-with-line.tsx"],"sourcesContent":["import './display.css';\nimport type { ReactNode } from '@lynx-js/react';\nimport { type G9ControlBaseProps, useG9Control } from '../base/control';\n\n/** Props of {@link G9TitleWithLine} (MAUI `G9TitleWithLine`). */\nexport interface G9TitleWithLineProps extends G9ControlBaseProps {\n  /** Default `'ابزار'` (MAUI's hard-coded Persian \"tools\"). */\n  readonly text?: string;\n  /** Padding `[left, top, right, bottom]`. Default `[18, 3, 18, 0]`. */\n  readonly padding?: readonly [number, number, number, number];\n}\n\n/** A 16 px title over a 1 px line (MAUI `G9TitleWithLine`). */\nexport function G9TitleWithLine(props: G9TitleWithLineProps): ReactNode {\n  const control = useG9Control(props, 'g9-title-line');\n  const [l, t, r, b] = props.padding ?? [18, 3, 18, 0];\n  return (\n    <view className={control.className} {...control.idProps} style={{ padding: `${t}px ${r}px ${b}px ${l}px` }}>\n      <text className=\"g9-title-line__text\">{props.text ?? 'ابزار'}</text>\n      <view className=\"g9-title-line__line\" />\n    </view>\n  );\n}\n"],"names":["G9TitleWithLine","props","_props_padding","_props_text","control","useG9Control","l","t","r","b","view","text"],"mappings":";;AAaO,SAASA,gBAAgBC,KAA2B;QAEpCC,gBAGsBC;IAJ3C,MAAMC,UAAUC,aAAaJ,OAAO;IACpC,MAAM,CAACK,GAAGC,GAAGC,GAAGC,EAAE,GAAG,QAAAP,CAAAA,iBAAAA,MAAM,OAAO,AAAD,IAAZA,iBAAiB;QAAC;QAAI;QAAG;QAAI;KAAE;IACpD,QACGQ,KAAK,WAAWN,QAAQ,SAAS,GAAG,GAAGA,QAAQ,OAAO,EAAE,OAAO;QAAE,SAAS,GAAGG,EAAE,GAAG,EAAEC,EAAE,GAAG,EAAEC,EAAE,GAAG,EAAEH,EAAE,EAAE,CAAC;IAAC,GAAG;MAC1G,CAACK,KAAK,UAAU,uBAAuB,QAAAR,CAAAA,cAAAA,MAAM,IAAI,AAAD,IAATA,cAAc,UAAUQ,KAAK;MACpE,CAACD,KAAK,UAAU,uBAAwB;IAC1C,EAAEA;AAEN"}

package/dist/edge-panel/edge-panel.css

@@ -0,0 +1,132 @@
+.g9-edge-panel {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.g9-edge-panel__backdrop {
+  pointer-events: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.g9-edge-panel__card {
+  pointer-events: auto;
+  border: 1px solid var(--g9-outline-variant);
+  flex-direction: column;
+  display: flex;
+  position: absolute;
+  overflow: hidden;
+}
+
+.g9-edge-panel__card--left {
+  border-radius: 0 24px 24px 0;
+}
+
+.g9-edge-panel__card--right {
+  border-radius: 24px 0 0 24px;
+}
+
+.g9-edge-panel__tab {
+  pointer-events: auto;
+  border: 1px solid var(--g9-outline-variant);
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 64px;
+  display: flex;
+  position: absolute;
+}
+
+.g9-edge-panel__tab--left {
+  border-radius: 0 18px 18px 0;
+}
+
+.g9-edge-panel__tab--right {
+  border-radius: 18px 0 0 18px;
+}
+
+.g9-edge-panel__close {
+  pointer-events: auto;
+  border: 1px solid var(--g9-outline-variant);
+  border-radius: 20px;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  position: absolute;
+}
+
+.g9-edge-panel__body {
+  flex-direction: column;
+  flex-shrink: 1;
+  min-height: 64px;
+  display: flex;
+}
+
+.g9-edge-panel__header {
+  padding: 16px 16px 8px;
+}
+
+.g9-edge-panel__title {
+  color: var(--g9-on-surface);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.g9-edge-panel__scroll {
+  flex-shrink: 1;
+}
+
+.g9-edge-panel__menu {
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px;
+  display: flex;
+}
+
+.g9-edge-panel__back {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  padding: 0 12px;
+  display: flex;
+}
+
+.g9-edge-panel__back-text {
+  color: var(--g9-on-surface);
+  font-size: 14px;
+}
+
+.g9-edge-panel__row {
+  border-radius: 12px;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  height: 52px;
+  padding: 0 12px;
+  display: flex;
+}
+
+.g9-edge-panel__row-text {
+  text-overflow: ellipsis;
+  flex: 1;
+  font-size: 15px;
+}
+
+.g9-edge-panel__divider {
+  background-color: var(--g9-divider);
+  height: 1px;
+  margin: 4px 12px 0;
+}
+
+
+/*# sourceMappingURL=edge-panel.css.map */

package/dist/edge-panel/edge-panel.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack://./src/edge-panel/edge-panel.css"],"names":[],"mappings":"AACA;EAAE,oBAAoB;EACpB,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,OAAO;EACP,QAAQ;AACV;;AAIA;EADE,oBAAoB;EACpB,kBAAkB;EAClB,MAAM;EACN,SAAS;EACT,OAAO;EACP,QAAQ;AACV;;AAIA;EADE,oBAAoB;EACpB,2CAA2C;EAC3C,sBAAsB;EACtB,aAAa;EACb,kBAAkB;EAClB,gBAAgB;AAClB;;AAIA;EADE,4BAA4B;AAC9B;;AAIA;EADE,4BAA4B;AAC9B;;AAIA;EADE,oBAAoB;EACpB,2CAA2C;EAC3C,uBAAuB;EACvB,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;AACpB;;AAIA;EADE,4BAA4B;AAC9B;;AAIA;EADE,4BAA4B;AAC9B;;AAIA;EADE,oBAAoB;EACpB,2CAA2C;EAC3C,mBAAmB;EACnB,uBAAuB;EACvB,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,aAAa;EACb,kBAAkB;AACpB;;AAIA;EADE,sBAAsB;EACtB,cAAc;EACd,gBAAgB;EAChB,aAAa;AACf;;AAIA;EADE,sBAAsB;AACxB;;AAIA;EADE,2BAA2B;EAC3B,eAAe;EACf,gBAAgB;AAClB;;AAIA;EADE,cAAc;AAChB;;AAIA;EADE,sBAAsB;EACtB,QAAQ;EACR,YAAY;EACZ,aAAa;AACf;;AAIA;EADE,mBAAmB;EACnB,mBAAmB;EACnB,QAAQ;EACR,YAAY;EACZ,eAAe;EACf,aAAa;AACf;;AAIA;EADE,2BAA2B;EAC3B,eAAe;AACjB;;AAIA;EADE,mBAAmB;EACnB,mBAAmB;EACnB,mBAAmB;EACnB,SAAS;EACT,YAAY;EACZ,eAAe;EACf,aAAa;AACf;;AAIA;EADE,uBAAuB;EACvB,OAAO;EACP,eAAe;AACjB;;AAIA;EADE,mCAAmC;EACnC,WAAW;EACX,kBAAkB;AACpB","sourcesContent":["/* G9EdgePanel (MAUI G9EdgePanel): edge-anchored card, peek tab, close button, list menu. No shadows. */\n.g9-edge-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n}\n\n/* Only the backdrop (modal), the card and the tab take touches; empty areas pass through to the page. */\n.g9-edge-panel__backdrop {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: auto;\n}\n\n.g9-edge-panel__card {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  pointer-events: auto;\n  border: 1px solid var(--g9-outline-variant);\n}\n\n.g9-edge-panel__card--left {\n  border-radius: 0 24px 24px 0;\n}\n\n.g9-edge-panel__card--right {\n  border-radius: 24px 0 0 24px;\n}\n\n.g9-edge-panel__tab {\n  position: absolute;\n  width: 48px;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto;\n  border: 1px solid var(--g9-outline-variant);\n}\n\n.g9-edge-panel__tab--left {\n  border-radius: 0 18px 18px 0;\n}\n\n.g9-edge-panel__tab--right {\n  border-radius: 18px 0 0 18px;\n}\n\n.g9-edge-panel__close {\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  border-radius: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: auto;\n  border: 1px solid var(--g9-outline-variant);\n}\n\n.g9-edge-panel__body {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 1;\n  min-height: 64px;\n}\n\n.g9-edge-panel__header {\n  padding: 16px 16px 8px 16px;\n}\n\n.g9-edge-panel__title {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--g9-on-surface);\n}\n\n.g9-edge-panel__scroll {\n  flex-shrink: 1;\n}\n\n.g9-edge-panel__menu {\n  display: flex;\n  flex-direction: column;\n  padding: 8px;\n  gap: 8px;\n}\n\n.g9-edge-panel__back {\n  height: 44px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 0 12px;\n}\n\n.g9-edge-panel__back-text {\n  font-size: 14px;\n  color: var(--g9-on-surface);\n}\n\n.g9-edge-panel__row {\n  height: 52px;\n  border-radius: 12px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  padding: 0 12px;\n}\n\n.g9-edge-panel__row-text {\n  flex: 1;\n  font-size: 15px;\n  text-overflow: ellipsis;\n}\n\n.g9-edge-panel__divider {\n  height: 1px;\n  margin: 4px 12px 0 12px;\n  background-color: var(--g9-divider);\n}\n"],"sourceRoot":""}

package/dist/edge-panel/edge-panel.d.ts

@@ -0,0 +1,87 @@
+import './edge-panel.css';
+import { type ReactNode } from '@lynx-js/react';
+import type { G9IconInput } from '../icon/icon.js';
+import { type G9EdgeCloseButtonPlacement, type G9EdgeMenuHeader, type G9EdgeMenuHeaderAlignment, type G9EdgeMenuItem, G9EdgeMenuNavigator, type G9EdgePanelContentDirection, type G9EdgeSide } from './types.js';
+/** Imperative handle of an edge panel (MAUI `G9EdgePanel` methods), from {@link useEdgePanel} or the helper. */
+export interface G9EdgePanelController {
+    open(): void;
+    close(): void;
+    toggle(): void;
+    readonly isOpen: boolean;
+    /** Closes an open panel and reports whether the press was consumed (MAUI `HandleHardwareBackPressed`). */
+    handleHardwareBackPressed(): boolean;
+    navigateToSubList(items: readonly G9EdgeMenuItem[], header?: G9EdgeMenuHeader | null): void;
+    navigateToRoot(): void;
+    refreshMenuItems(): void;
+    /** `true` while a panel is mounted on this controller. */
+    readonly isMounted: boolean;
+    /** @internal set by the mounted panel */
+    bind(target: G9EdgePanelTarget): () => void;
+}
+interface G9EdgePanelTarget {
+    setOpen(open: boolean): void;
+    isOpen(): boolean;
+    navigator: G9EdgeMenuNavigator;
+    renderNav(): void;
+}
+/** Creates a controller outside React. */
+export declare function createEdgePanelController(): G9EdgePanelController;
+/** A stable controller for a `G9EdgePanel`. */
+export declare function useEdgePanel(): G9EdgePanelController;
+/** Props of {@link G9EdgePanel} (MAUI bindable properties and events). */
+export interface G9EdgePanelProps {
+    /** Absolute edge (MAUI `Side`). Default `'left'`. */
+    readonly side?: G9EdgeSide;
+    /** Panel width as a share of the host width (MAUI `WidthRatio`). Default 0.35. */
+    readonly widthRatio?: number;
+    /** Distance from the top (MAUI `TopGap`). Default 112. */
+    readonly topGap?: number;
+    /** Absolute height cap; 0 = none (MAUI `MaxPanelHeight`). */
+    readonly maxPanelHeight?: number;
+    /** Height cap as a share of the host height (MAUI `MaxPanelHeightRatio`). Default 0.69. */
+    readonly maxPanelHeightRatio?: number;
+    /** Controlled open state (MAUI `IsOpen`, two-way). */
+    readonly open?: boolean;
+    readonly defaultOpen?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Custom content (MAUI `PanelContent`); wins over `menuItems`. */
+    readonly panelContent?: ReactNode;
+    /** A navigable list menu (MAUI `MenuItems`). */
+    readonly menuItems?: readonly G9EdgeMenuItem[] | null;
+    readonly panelBackgroundColor?: string | null;
+    readonly tabBackgroundColor?: string | null;
+    /** Icon of the collapsed tab. Default: a chevron pointing into the screen. */
+    readonly collapsedTabIcon?: G9IconInput;
+    /** Sets both durations (MAUI `AnimationDuration`); the specific ones win. */
+    readonly animationDuration?: number;
+    /** Slide-in duration (MAUI `OpenAnimationDuration`). Default 450. */
+    readonly openAnimationDuration?: number;
+    /** Slide-out duration (MAUI `CloseAnimationDuration`). Default 450. */
+    readonly closeAnimationDuration?: number;
+    /** A backdrop tap closes the panel (needs `useBackdrop`). Default true. */
+    readonly enableOutsideTapToClose?: boolean;
+    /** Modal: a dimmed backdrop takes every tap outside the panel. Default true. Off = non-modal: only the panel and its tab take touches. */
+    readonly useBackdrop?: boolean;
+    /** Show the peek tab while closed. Default false. */
+    readonly showCollapsedTab?: boolean;
+    readonly contentFlowDirection?: G9EdgePanelContentDirection;
+    readonly menuHeader?: G9EdgeMenuHeader | null;
+    readonly menuHeaderAlignment?: G9EdgeMenuHeaderAlignment;
+    readonly closeButtonPlacement?: G9EdgeCloseButtonPlacement;
+    /** After the open slide (MAUI `Opened`). */
+    readonly onOpened?: () => void;
+    /** When the close slide starts (MAUI `Closing`). */
+    readonly onClosing?: () => void;
+    /** After the close slide (MAUI `Closed`). */
+    readonly onClosed?: () => void;
+    readonly controller?: G9EdgePanelController;
+}
+/**
+ * A panel that slides in from a screen edge (MAUI `G9EdgePanel`), mounted in the host's `edgePanel` layer whatever
+ * its place in the tree. Modal by default (a dimmed backdrop that closes on tap); with `useBackdrop={false}` it is
+ * non-modal: the page stays interactive and only the panel and its tab receive touches. Content is a custom view or a
+ * list menu with nested levels (Back row, per-level header). Hardware back closes it.
+ */
+export declare function G9EdgePanel(props: G9EdgePanelProps): ReactNode;
+export {};
+//# sourceMappingURL=edge-panel.d.ts.map

package/dist/edge-panel/edge-panel.d.ts.map

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