@abyss-project/commons-front-core 9.4.2 → 9.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +26 -0
  2. package/catalog/catalog-entries.ts +1 -0
  3. package/catalog/pages/AnchoredPanel.tsx +67 -0
  4. package/catalog/pages/ProductTour.tsx +88 -88
  5. package/catalog/pages/index.ts +2 -0
  6. package/dist/{AbyssCookieConsentProvider-B0_k-lsA.js → AbyssCookieConsentProvider-jMv5bvVK.js} +6 -0
  7. package/dist/{CookieConsentSettings.component-DPmXSN1B.js → CookieConsentSettings.component-B6i65LtJ.js} +1 -1
  8. package/dist/components/layers/AnchoredPanel/AnchoredPanel.d.ts +25 -0
  9. package/dist/components/layers/AnchoredPanel/AnchoredPanel.spec.d.ts +1 -0
  10. package/dist/components/layers/Menu/Menu.d.ts +5 -1
  11. package/dist/components/layers/index.d.ts +2 -0
  12. package/dist/components/layers/layers-kbd.d.ts +7 -0
  13. package/dist/components/layers/layers-kbd.spec.d.ts +1 -0
  14. package/dist/components/structure/Tabs/Tabs.d.ts +2 -0
  15. package/dist/cookie-consent.js +2 -2
  16. package/dist/{design-theme-BI47S5Y9.js → design-theme-CykIb-Gz.js} +1 -1
  17. package/dist/hooks/use-rich-intl.hook.d.ts +6 -0
  18. package/dist/{index-BclTcBBA.js → index-7S_OHK4f.js} +3 -3
  19. package/dist/{index-1OsboYW9.js → index-B4xjMC7O.js} +2 -2
  20. package/dist/{index-BP9uZ3Ld.js → index-B9kzX70T.js} +2 -2
  21. package/dist/{index-CCHQ4bPG.js → index-BEQgBOwt.js} +2 -2
  22. package/dist/{index-Q-bMUnXP.js → index-BOm9JgH7.js} +2 -2
  23. package/dist/{index-CYAUKJ3V.js → index-BPGHypMd.js} +2 -2
  24. package/dist/{index-Co3DPyY5.js → index-BS7CgEyj.js} +2 -2
  25. package/dist/{index-B8mXWPXG.js → index-Bd0oB0x3.js} +2 -2
  26. package/dist/{index-DwuRDQtG.js → index-Bgrp5kC3.js} +2 -2
  27. package/dist/{index-BICvHJrd.js → index-BveBtqZP.js} +4 -4
  28. package/dist/{index-CzA0TJ1Y.js → index-CKD84DUx.js} +1 -1
  29. package/dist/{index-B0QTV2Ec.js → index-CLxMgDwa.js} +2 -2
  30. package/dist/{index-BXceTJm5.js → index-Cqn_LfL2.js} +2 -2
  31. package/dist/{index-MCJIM7Di.js → index-Cy8fNdNL.js} +2 -2
  32. package/dist/{index-DYZzZCrS.js → index-DXYvHlFM.js} +2 -2
  33. package/dist/{index-PVQUqoxX.js → index-DebUlRoE.js} +2 -2
  34. package/dist/{index-Di-F_MA0.js → index-IhTCIvj6.js} +3 -3
  35. package/dist/{index-KRGYLUiH.js → index-Lub7dhvT.js} +28 -28
  36. package/dist/{index-CorDlbIR.js → index-_nt9c97v.js} +3 -3
  37. package/dist/{index-DPRuF7Ck.js → index-f_oWcs8w.js} +4 -4
  38. package/dist/{index-BIJlYkrW.js → index-mNiLojvx.js} +4 -4
  39. package/dist/{index-CPsEeNaw.js → index-rfJiqJxI.js} +3 -3
  40. package/dist/index.js +2351 -2258
  41. package/dist/legacy.js +4 -4
  42. package/dist/theme/tokens/choice-swatches.d.ts +8 -0
  43. package/dist/translations/en.d.ts +3 -0
  44. package/dist/translations/fr.d.ts +3 -0
  45. package/package.json +1 -1
  46. package/test-results/catalog/.last-run.json +4 -0
package/README.md CHANGED
@@ -90,6 +90,32 @@ export const buildRumOptions = () =>
90
90
 
91
91
  ## Changements visibles
92
92
 
93
+ ### 9.5.1
94
+
95
+ - **`testId` sur `TabItem` et `MenuItem`** : rendu en `data-testid` sur l'élément interactif (`role="tab"`,
96
+ `role="menuitem"`), absent sans lui. `Menu` accepte aussi `testId` sur son conteneur. Les e2e des hôtes lisent ces
97
+ identifiants, que `Tabs` et `Menu` ne transmettaient pas.
98
+ - **`Kbd` dans les déclarations publiées** : son type est écrit à la main (un composant de `kbd`), car le type déduit
99
+ ne pouvait pas être nommé dans les `.d.ts` et `Kbd` en était absent, bien que la racine l'exporte.
100
+
101
+ ### 9.5.0
102
+
103
+ Éditeurs des outils du front principal sur le design system (carte #286, zone 4b). Pièces nouvelles, chacune documentée
104
+ dans le `README.md` de son dossier et montrée dans le catalogue.
105
+
106
+ - **`AnchoredPanel`** (`layers`) : petit formulaire ou sélecteur posé contre son déclencheur (`anchorEl`, `open`,
107
+ `onClose`, `title`, `placement`, `width`). À partir de 768 px, un popover au style de `Menu` (surface `bg.surface`,
108
+ filet `border.subtle`, ombre `elevations.overlay`) avec titre et bouton « Fermer » ; en dessous, une `BottomSheet`.
109
+ Focus piégé, `Escape` et clic hors du panneau ferment, le focus revient au déclencheur. Il porte des champs, pas
110
+ des actions (`Menu`).
111
+ - **`Kbd`** (`layers`) : l'indication de touche de `Menu` et de `CommandPalette` est exportée de la racine, rendu
112
+ inchangé.
113
+ - **Couleurs de création d'un canevas** (`theme`) : `CANVAS_NEUTRAL_INK`, `CANVAS_COMMENT_FILL`, `CANVAS_COMMENT_INK` et
114
+ `CANVAS_SHAPE_STROKE`, écrites en dur à côté de `CHOICE_SWATCHES`. Ce qu'un canevas donne à une forme ou à un texte
115
+ qu'un utilisateur crée : la couleur est enregistrée avec l'objet, identique pour tous les lecteurs et lisible sur
116
+ le fond `bg.canvas` clair comme sur le sombre (3:1 au moins ; 4,5:1 pour l'encre du commentaire sur son fond).
117
+ - **Traductions** : clé `ds.layers.anchored-panel.close` (FR et EN).
118
+
93
119
  ### 9.4.0
94
120
 
95
121
  Tickets du programme Abyss Founders (carte #285, livraison D). Détail dans [`src/legacy/components/Support/README.md`](src/legacy/components/Support/README.md).
@@ -97,6 +97,7 @@ export const CATALOG_ENTRIES: CatalogEntry[] = [
97
97
  entry('Drawer', 'layers', 'drawer'),
98
98
  entry('PreviewDrawer', 'layers', 'preview-drawer', { mobileCapture: true }),
99
99
  entry('Menu', 'layers', 'menu'),
100
+ entry('AnchoredPanel', 'layers', 'anchored-panel', { mobileCapture: true }),
100
101
  entry('Toast', 'layers', 'toast'),
101
102
  entry('CommandPalette', 'layers', 'command-palette'),
102
103
  entry('ProductTour', 'layers', 'product-tour', { mobileCapture: true }),
@@ -0,0 +1,67 @@
1
+ import { useEffect, useRef, useState } from 'react';
2
+ import Button from '@mui/material/Button';
3
+ import OutlinedInput from '@mui/material/OutlinedInput';
4
+ import LabelOutlined from '@mui/icons-material/LabelOutlined';
5
+ import { AnchoredPanel } from '../../src/components/layers/AnchoredPanel/AnchoredPanel';
6
+ import { ColorField } from '../../src/components/inputs/ColorField/ColorField';
7
+ import { FormField } from '../../src/components/inputs/FormField/FormField';
8
+ import { CHOICE_SWATCHES } from '../../src/theme/tokens/choice-swatches';
9
+ import { Example, LastEvent, Showcase, useEventLog } from '../frame';
10
+
11
+ export const AnchoredPanelPage = () => {
12
+ const { log } = useEventLog();
13
+ const trigger = useRef<HTMLButtonElement>(null);
14
+ const [anchor, setAnchor] = useState<HTMLElement | null>(null);
15
+ const [name, setName] = useState('Urgent');
16
+ const [color, setColor] = useState(CHOICE_SWATCHES[4]);
17
+
18
+ // Opened on arrival, so the page shows the panel without a click.
19
+ useEffect(() => {
20
+ setAnchor(trigger.current);
21
+ }, []);
22
+
23
+ return (
24
+ <Showcase
25
+ family="Couches"
26
+ name="AnchoredPanel"
27
+ description="Petit formulaire posé contre son déclencheur : un popover à partir de 768 px, une feuille du bas en dessous. Il porte des champs, pas des actions."
28
+ >
29
+ <Example title="Étiquette d'une carte">
30
+ <Button
31
+ ref={trigger}
32
+ variant="outlined"
33
+ startIcon={<LabelOutlined />}
34
+ onClick={(event) => setAnchor(event.currentTarget)}
35
+ >
36
+ Étiquettes
37
+ </Button>
38
+ </Example>
39
+ <LastEvent />
40
+ <AnchoredPanel
41
+ anchorEl={anchor}
42
+ open={anchor !== null}
43
+ onClose={() => {
44
+ setAnchor(null);
45
+ log('panneau fermé');
46
+ }}
47
+ title="Étiquettes de la carte"
48
+ >
49
+ <FormField label="Nom">
50
+ <OutlinedInput
51
+ size="small"
52
+ value={name}
53
+ onChange={(event) => setName(event.target.value)}
54
+ />
55
+ </FormField>
56
+ <ColorField
57
+ label="Couleur"
58
+ value={color}
59
+ onChange={(hex) => {
60
+ setColor(hex);
61
+ log(`couleur ${hex}`);
62
+ }}
63
+ />
64
+ </AnchoredPanel>
65
+ </Showcase>
66
+ );
67
+ };
@@ -1,88 +1,88 @@
1
- import { useState } from 'react';
2
- import Button from '@mui/material/Button';
3
- import AddRounded from '@mui/icons-material/AddRounded';
4
- import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
5
- import { ProductTour } from '../../src/components/layers/ProductTour/ProductTour';
6
- import type { ProductTourStep } from '../../src/components/layers/ProductTour/ProductTour';
7
- import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
8
-
9
- const STEPS: [ProductTourStep, ...ProductTourStep[]] = [
10
- {
11
- target: 'catalog-create-event',
12
- title: 'Créez votre premier événement',
13
- description:
14
- 'Donnez-lui un nom et une date : vous obtenez un lien à envoyer à vos invités pour qu’ils déposent leurs photos.',
15
- },
16
- {
17
- target: 'catalog-import',
18
- title: 'Importez vos photos',
19
- description:
20
- 'Ajoutez celles que vous avez déjà prises, depuis votre appareil ou AbyssCloud.',
21
- },
22
- {
23
- target: 'catalog-help',
24
- title: 'Revoir la visite',
25
- description:
26
- 'Elle se relance à tout moment depuis le menu d’aide du service.',
27
- },
28
- ];
29
-
30
- export const ProductTourPage = () => {
31
- const { log } = useEventLog();
32
- // Opened on arrival, so the page shows the first step without a click.
33
- const [open, setOpen] = useState(true);
34
- return (
35
- <Showcase
36
- family="Couches"
37
- name="ProductTour"
38
- description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. « Étape n sur N » et une croix en en-tête, « Précédent » dès la deuxième étape ; Échap et la croix passent la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas. Une cible cachée est ignorée."
39
- >
40
- <Example title="Première visite de Memories">
41
- <Row>
42
- <Button
43
- data-tour="catalog-import"
44
- variant="outlined"
45
- startIcon={<FileUploadOutlined />}
46
- >
47
- Importer
48
- </Button>
49
- {/* A hidden twin of the first target: the tour points at the rendered one. */}
50
- <Button
51
- data-tour="catalog-create-event"
52
- variant="contained"
53
- sx={{ display: 'none' }}
54
- >
55
- Créer un événement
56
- </Button>
57
- <Button
58
- data-tour="catalog-create-event"
59
- variant="contained"
60
- startIcon={<AddRounded />}
61
- >
62
- Créer un événement
63
- </Button>
64
- <Button
65
- data-tour="catalog-help"
66
- variant="text"
67
- onClick={() => setOpen(true)}
68
- >
69
- Aide
70
- </Button>
71
- </Row>
72
- </Example>
73
- <LastEvent />
74
- <ProductTour
75
- open={open}
76
- steps={STEPS}
77
- onComplete={() => {
78
- setOpen(false);
79
- log('visite terminée');
80
- }}
81
- onSkip={() => {
82
- setOpen(false);
83
- log('visite passée');
84
- }}
85
- />
86
- </Showcase>
87
- );
88
- };
1
+ import { useState } from 'react';
2
+ import Button from '@mui/material/Button';
3
+ import AddRounded from '@mui/icons-material/AddRounded';
4
+ import FileUploadOutlined from '@mui/icons-material/FileUploadOutlined';
5
+ import { ProductTour } from '../../src/components/layers/ProductTour/ProductTour';
6
+ import type { ProductTourStep } from '../../src/components/layers/ProductTour/ProductTour';
7
+ import { Example, LastEvent, Row, Showcase, useEventLog } from '../frame';
8
+
9
+ const STEPS: [ProductTourStep, ...ProductTourStep[]] = [
10
+ {
11
+ target: 'catalog-create-event',
12
+ title: 'Créez votre premier événement',
13
+ description:
14
+ 'Donnez-lui un nom et une date : vous obtenez un lien à envoyer à vos invités pour qu’ils déposent leurs photos.',
15
+ },
16
+ {
17
+ target: 'catalog-import',
18
+ title: 'Importez vos photos',
19
+ description:
20
+ 'Ajoutez celles que vous avez déjà prises, depuis votre appareil ou AbyssCloud.',
21
+ },
22
+ {
23
+ target: 'catalog-help',
24
+ title: 'Revoir la visite',
25
+ description:
26
+ 'Elle se relance à tout moment depuis le menu d’aide du service.',
27
+ },
28
+ ];
29
+
30
+ export const ProductTourPage = () => {
31
+ const { log } = useEventLog();
32
+ // Opened on arrival, so the page shows the first step without a click.
33
+ const [open, setOpen] = useState(true);
34
+ return (
35
+ <Showcase
36
+ family="Couches"
37
+ name="ProductTour"
38
+ description="Visite guidée d'un service : une bulle ancrée sur un élément data-tour, le reste de la page voilé autour d'une découpe. « Étape n sur N » et une croix en en-tête, « Précédent » dès la deuxième étape ; Échap et la croix passent la visite, les flèches changent d'étape ; sous 768 px, une feuille du bas. Une cible cachée est ignorée."
39
+ >
40
+ <Example title="Première visite de Memories">
41
+ <Row>
42
+ <Button
43
+ data-tour="catalog-import"
44
+ variant="outlined"
45
+ startIcon={<FileUploadOutlined />}
46
+ >
47
+ Importer
48
+ </Button>
49
+ {/* A hidden twin of the first target: the tour points at the rendered one. */}
50
+ <Button
51
+ data-tour="catalog-create-event"
52
+ variant="contained"
53
+ sx={{ display: 'none' }}
54
+ >
55
+ Créer un événement
56
+ </Button>
57
+ <Button
58
+ data-tour="catalog-create-event"
59
+ variant="contained"
60
+ startIcon={<AddRounded />}
61
+ >
62
+ Créer un événement
63
+ </Button>
64
+ <Button
65
+ data-tour="catalog-help"
66
+ variant="text"
67
+ onClick={() => setOpen(true)}
68
+ >
69
+ Aide
70
+ </Button>
71
+ </Row>
72
+ </Example>
73
+ <LastEvent />
74
+ <ProductTour
75
+ open={open}
76
+ steps={STEPS}
77
+ onComplete={() => {
78
+ setOpen(false);
79
+ log('visite terminée');
80
+ }}
81
+ onSkip={() => {
82
+ setOpen(false);
83
+ log('visite passée');
84
+ }}
85
+ />
86
+ </Showcase>
87
+ );
88
+ };
@@ -2,6 +2,7 @@ import type { ComponentType } from 'react';
2
2
  import { AccountMenuPage } from './AccountMenu';
3
3
  import { ActionBarPage } from './ActionBar';
4
4
  import { AmbientBackgroundPage } from './AmbientBackground';
5
+ import { AnchoredPanelPage } from './AnchoredPanel';
5
6
  import { AppShellPage } from './AppShell';
6
7
  import { AvatarPage } from './Avatar';
7
8
  import { BarChartPage } from './BarChart';
@@ -73,6 +74,7 @@ export const CATALOG_PAGES: Record<string, ComponentType> = {
73
74
  AccountMenu: AccountMenuPage,
74
75
  ActionBar: ActionBarPage,
75
76
  AmbientBackground: AmbientBackgroundPage,
77
+ AnchoredPanel: AnchoredPanelPage,
76
78
  AppShell: AppShellPage,
77
79
  Avatar: AvatarPage,
78
80
  BarChart: BarChartPage,
@@ -2008,6 +2008,9 @@ const fm = {
2008
2008
  modal: {
2009
2009
  close: "Fermer"
2010
2010
  },
2011
+ "anchored-panel": {
2012
+ close: "Fermer"
2013
+ },
2011
2014
  "confirm-dialog": {
2012
2015
  cancel: "Annuler",
2013
2016
  "type-to-confirm": "Saisissez « {text} » pour confirmer",
@@ -3886,6 +3889,9 @@ const fm = {
3886
3889
  modal: {
3887
3890
  close: "Close"
3888
3891
  },
3892
+ "anchored-panel": {
3893
+ close: "Close"
3894
+ },
3889
3895
  "confirm-dialog": {
3890
3896
  cancel: "Cancel",
3891
3897
  "type-to-confirm": "Type “{text}” to confirm",
@@ -1,7 +1,7 @@
1
1
  import { jsx as e, jsxs as a } from "react/jsx-runtime";
2
2
  import { useState as m, useEffect as C } from "react";
3
3
  import { Card as v, CardContent as b, Stack as u, Typography as o, FormControlLabel as l, Box as r, Checkbox as d, Button as M } from "@mui/material";
4
- import { g as R, u as x } from "./AbyssCookieConsentProvider-B0_k-lsA.js";
4
+ import { g as R, u as x } from "./AbyssCookieConsentProvider-jMv5bvVK.js";
5
5
  const B = () => {
6
6
  const t = R(), { consent: i, save: y } = x(), [h, g] = m((i == null ? void 0 : i.analytics) ?? !1), [k, f] = m((i == null ? void 0 : i.marketing) ?? !1), c = i == null ? void 0 : i.analytics, n = i == null ? void 0 : i.marketing;
7
7
  return C(() => {
@@ -0,0 +1,25 @@
1
+ import { ReactNode } from 'react';
2
+ /** Which edge of the anchor the panel lines up with, below it. */
3
+ export declare enum AnchoredPanelPlacement {
4
+ BottomStart = "bottom-start",
5
+ BottomEnd = "bottom-end"
6
+ }
7
+ export interface AnchoredPanelProps {
8
+ anchorEl: HTMLElement | null;
9
+ open: boolean;
10
+ /** Called by Escape, a click outside and the close button. */
11
+ onClose(): void;
12
+ /** Title of the panel and its accessible name (role="dialog"). */
13
+ title: string;
14
+ placement?: AnchoredPanelPlacement;
15
+ /** Width in px, capped by the window; 320 by default. */
16
+ width?: number;
17
+ children: ReactNode;
18
+ }
19
+ /**
20
+ * A small form or picker anchored to a control (the labels, members or dates of a card, the icon
21
+ * library of a canvas). Not a menu: it holds fields, not actions. From 768 px it is a popover styled
22
+ * like `Menu`, below a `BottomSheet` with the same title. Focus is trapped inside; Escape, a click
23
+ * outside and the close button close it, and the focus returns to the control that opened it.
24
+ */
25
+ export declare function AnchoredPanel({ anchorEl, open, onClose, title, placement, width, children, }: AnchoredPanelProps): import("react/jsx-runtime").JSX.Element;
@@ -17,6 +17,8 @@ export interface MenuItem {
17
17
  shortcut?: string;
18
18
  tone?: MenuItemTone;
19
19
  disabled?: boolean;
20
+ /** Rendered as `data-testid` on the item (the `role="menuitem"` element). */
21
+ testId?: string;
20
22
  onSelect(): void;
21
23
  }
22
24
  export interface MenuProps {
@@ -24,10 +26,12 @@ export interface MenuProps {
24
26
  open: boolean;
25
27
  onClose(): void;
26
28
  items: (MenuItem | MenuSeparator)[];
29
+ /** Rendered as `data-testid` on the menu container, for a host whose trigger needs it. */
30
+ testId?: string;
27
31
  }
28
32
  /**
29
33
  * A menu of actions anchored to an element (`.menu`), on the `overlay` elevation. Arrow keys move
30
34
  * between the enabled items, Enter or Space selects, Escape and Tab close it and the focus returns
31
35
  * to the anchor.
32
36
  */
33
- export declare function Menu({ anchorEl, open, onClose, items }: MenuProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare function Menu({ anchorEl, open, onClose, items, testId }: MenuProps): import("react/jsx-runtime").JSX.Element;
@@ -2,6 +2,8 @@ export * from './Modal/Modal';
2
2
  export * from './ConfirmDialog/ConfirmDialog';
3
3
  export * from './Drawer/Drawer';
4
4
  export * from './Menu/Menu';
5
+ export * from './AnchoredPanel/AnchoredPanel';
6
+ export * from './layers-kbd';
5
7
  export * from './Toast/Toast';
6
8
  export * from './CommandPalette/CommandPalette';
7
9
  export * from './ConfirmDialog/useConfirmDialog';
@@ -0,0 +1,7 @@
1
+ import { ComponentPropsWithoutRef, ComponentType } from 'react';
2
+ /**
3
+ * A keyboard shortcut hint (`kbd` in the mock-up), shared by the menu and the command palette.
4
+ * Typed as a plain component: the inferred styled type cannot be named in the published
5
+ * declarations, which would leave `Kbd` out of them.
6
+ */
7
+ export declare const Kbd: ComponentType<ComponentPropsWithoutRef<'kbd'>>;
@@ -0,0 +1 @@
1
+ export {};
@@ -12,6 +12,8 @@ export interface TabItem<V extends string = string> {
12
12
  badge?: number | string;
13
13
  /** Left out of the row, as if absent (an entry the viewer has no right to). */
14
14
  hidden?: boolean;
15
+ /** Rendered as `data-testid` on the tab (the `role="tab"` element). */
16
+ testId?: string;
15
17
  }
16
18
  export interface TabsProps<V extends string = string> {
17
19
  items: TabItem<V>[];
@@ -1,5 +1,5 @@
1
- import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-B0_k-lsA.js";
2
- import { C as E } from "./CookieConsentSettings.component-DPmXSN1B.js";
1
+ import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-jMv5bvVK.js";
2
+ import { C as E } from "./CookieConsentSettings.component-B6i65LtJ.js";
3
3
  export {
4
4
  e as AbyssCookieConsentProvider,
5
5
  a as COOKIE_NAME,
@@ -1,4 +1,4 @@
1
- import { s as nt, _ as An, g as Bw, $ as S_, a0 as __, h as M_, m as k_ } from "./AbyssCookieConsentProvider-B0_k-lsA.js";
1
+ import { s as nt, _ as An, g as Bw, $ as S_, a0 as __, h as M_, m as k_ } from "./AbyssCookieConsentProvider-jMv5bvVK.js";
2
2
  import { W as U_, r as E_, C as F_ } from "./index-D7cgykJH.js";
3
3
  import * as kn from "react";
4
4
  import za, { useState as vt, useRef as Re, useEffect as _t, useLayoutEffect as Nw, forwardRef as fi, useCallback as de, useContext as oa, useMemo as be, memo as pt, createContext as nu, createElement as Ue, cloneElement as xs, Component as I_, Fragment as ws, isValidElement as Zn, useReducer as Lw, useImperativeHandle as O_, useId as R_ } from "react";
@@ -2255,6 +2255,9 @@ export declare const translations: {
2255
2255
  modal: {
2256
2256
  close: string;
2257
2257
  };
2258
+ 'anchored-panel': {
2259
+ close: string;
2260
+ };
2258
2261
  'confirm-dialog': {
2259
2262
  cancel: string;
2260
2263
  'type-to-confirm': string;
@@ -4546,6 +4549,9 @@ export declare const translations: {
4546
4549
  modal: {
4547
4550
  close: string;
4548
4551
  };
4552
+ 'anchored-panel': {
4553
+ close: string;
4554
+ };
4549
4555
  'confirm-dialog': {
4550
4556
  cancel: string;
4551
4557
  'type-to-confirm': string;
@@ -1,6 +1,6 @@
1
- import { L as V, E as X } from "./index-CzA0TJ1Y.js";
2
- import { s as d, t as $, a as Z, L as R, p as s, i as t, f as y, c, j as U, g as l } from "./index-KRGYLUiH.js";
3
- import { html as w } from "./index-BIJlYkrW.js";
1
+ import { L as V, E as X } from "./index-CKD84DUx.js";
2
+ import { s as d, t as $, a as Z, L as R, p as s, i as t, f as y, c, j as U, g as l } from "./index-Lub7dhvT.js";
3
+ import { html as w } from "./index-mNiLojvx.js";
4
4
  const W = 1, p = 2, q = 275, u = 3, b = 276, _ = 277, f = 278, k = 4, m = 5, G = 6, x = 7, z = 8, h = 9, g = 10, v = 11, j = 12, E = 13, I = 14, N = 15, L = 16, F = 17, C = 18, H = 19, A = 20, K = 21, D = 22, B = 23, M = 24, J = 25, OO = 26, $O = 27, QO = 28, iO = 29, aO = 30, TO = 31, PO = 32, XO = 33, SO = 34, cO = 35, eO = 36, oO = 37, _O = 38, zO = 39, nO = 40, rO = 41, YO = 42, VO = 43, dO = 44, ZO = 45, RO = 46, sO = 47, tO = 48, yO = 49, UO = 50, lO = 51, wO = 52, WO = 53, pO = 54, qO = 55, uO = 56, bO = 57, fO = 58, kO = 59, mO = 60, GO = 61, xO = 62, e = 63, hO = 64, gO = 65, vO = 66, jO = {
5
5
  abstract: k,
6
6
  and: m,
@@ -1,5 +1,5 @@
1
- import { L as D, E as h, C as L } from "./index-CzA0TJ1Y.js";
2
- import { s as H, t as n, b as B, a as K, L as M, e as OO, i as eO, f as iO, j as f, g as aO, o as nO, I as rO, d as QO, n as d } from "./index-KRGYLUiH.js";
1
+ import { L as D, E as h, C as L } from "./index-CKD84DUx.js";
2
+ import { s as H, t as n, b as B, a as K, L as M, e as OO, i as eO, f as iO, j as f, g as aO, o as nO, I as rO, d as QO, n as d } from "./index-Lub7dhvT.js";
3
3
  const tO = 1, Z = 194, j = 195, oO = 196, x = 197, dO = 198, sO = 199, lO = 200, TO = 2, E = 3, u = 201, SO = 24, pO = 25, qO = 49, gO = 50, PO = 55, mO = 56, $O = 57, hO = 59, cO = 60, fO = 61, XO = 62, yO = 63, zO = 65, WO = 238, vO = 71, RO = 241, kO = 242, _O = 243, xO = 244, uO = 245, UO = 246, bO = 247, VO = 248, Y = 72, GO = 249, wO = 250, ZO = 251, jO = 252, EO = 253, YO = 254, FO = 255, CO = 256, JO = 73, AO = 77, IO = 263, NO = 112, DO = 130, LO = 151, HO = 152, BO = 155, p = 10, q = 13, k = 32, c = 9, _ = 35, KO = 40, MO = 46, R = 123, U = 125, F = 39, C = 34, b = 92, Oe = 111, ee = 120, ie = 78, ae = 117, ne = 85, re = /* @__PURE__ */ new Set([
4
4
  pO,
5
5
  qO,
@@ -1,5 +1,5 @@
1
- import { L as o, E as t } from "./index-CzA0TJ1Y.js";
2
- import { s, t as Q, a as j, L as x, i as f, f as c, c as a, j as W, m as S, g as l } from "./index-KRGYLUiH.js";
1
+ import { L as o, E as t } from "./index-CKD84DUx.js";
2
+ import { s, t as Q, a as j, L as x, i as f, f as c, c as a, j as W, m as S, g as l } from "./index-Lub7dhvT.js";
3
3
  const r = 1, q = 2, u = 3, n = 82, Z = 76, V = 117, T = 85, z = 97, w = 122, m = 65, b = 90, y = 95, i = 48, Y = 34, v = 40, P = 41, _ = 32, U = 62, p = new t((O) => {
4
4
  if (O.next == Z || O.next == T ? O.advance() : O.next == V && (O.advance(), O.next == i + 8 && O.advance()), O.next != n || (O.advance(), O.next != Y)) return;
5
5
  O.advance();
@@ -1,5 +1,5 @@
1
- import { L as r } from "./index-CzA0TJ1Y.js";
2
- import { s as e, t as O, a as s, L as X, i as l, f as Y, c as $, j as S, m as o, g as t } from "./index-KRGYLUiH.js";
1
+ import { L as r } from "./index-CKD84DUx.js";
2
+ import { s as e, t as O, a as s, L as X, i as l, f as Y, c as $, j as S, m as o, g as t } from "./index-Lub7dhvT.js";
3
3
  const Z = e({
4
4
  null: O.null,
5
5
  instanceof: O.operatorKeyword,
@@ -1,5 +1,5 @@
1
- import { L as s, E as R, a as Y, C as x } from "./index-CzA0TJ1Y.js";
2
- import { s as w, t as O, a as d, n as X, L as k, b as h, d as f, i as u, f as y, c as l, j as g, m as j, g as U, e as G, o as b, I as Z } from "./index-KRGYLUiH.js";
1
+ import { L as s, E as R, a as Y, C as x } from "./index-CKD84DUx.js";
2
+ import { s as w, t as O, a as d, n as X, L as k, b as h, d as f, i as u, f as y, c as l, j as g, m as j, g as U, e as G, o as b, I as Z } from "./index-Lub7dhvT.js";
3
3
  const _ = 177, q = 179, E = 184, v = 12, C = 13, D = 17, z = 20, F = 25, B = 53, N = 95, I = 142, L = 144, A = 145, J = 148, M = 10, H = 13, K = 32, OO = 9, $ = 47, QO = 41, eO = 125, aO = new R((Q, e) => {
4
4
  for (let n = 0, a = Q.next; (e.context && (a < 0 || a == M || a == H || a == $ && Q.peek(n + 1) == $) || a == QO || a == eO) && Q.acceptToken(_), !(a != K && a != OO); )
5
5
  a = Q.peek(++n);
@@ -1,5 +1,5 @@
1
- import { L as M, E as X, a as h, C as E } from "./index-CzA0TJ1Y.js";
2
- import { s as A, t as i, E as C, a as J, n as o, L as I, b as B, d as D, e as u, h as K, i as N, f as H, c as g, j as F, m as OO, g as aO, J as j, x as QO, o as iO, I as eO } from "./index-KRGYLUiH.js";
1
+ import { L as M, E as X, a as h, C as E } from "./index-CKD84DUx.js";
2
+ import { s as A, t as i, E as C, a as J, n as o, L as I, b as B, d as D, e as u, h as K, i as N, f as H, c as g, j as F, m as OO, g as aO, J as j, x as QO, o as iO, I as eO } from "./index-Lub7dhvT.js";
3
3
  const $O = 315, rO = 316, v = 1, tO = 2, lO = 3, nO = 4, oO = 317, sO = 319, ZO = 320, PO = 5, pO = 6, cO = 0, q = [
4
4
  9,
5
5
  10,
@@ -1,5 +1,5 @@
1
- import { a as O, L as r, i as b, f as s, s as a, j as t, g as P, t as e } from "./index-KRGYLUiH.js";
2
- import { L as n } from "./index-CzA0TJ1Y.js";
1
+ import { a as O, L as r, i as b, f as s, s as a, j as t, g as P, t as e } from "./index-Lub7dhvT.js";
2
+ import { L as n } from "./index-CKD84DUx.js";
3
3
  const S = { __proto__: null, anyref: 34, dataref: 34, eqref: 34, externref: 34, i31ref: 34, funcref: 34, i8: 34, i16: 34, i32: 34, i64: 34, f32: 34, f64: 34 }, i = /* @__PURE__ */ n.deserialize({
4
4
  version: 14,
5
5
  states: "!^Q]QPOOOqQPO'#CbOOQO'#Cd'#CdOOQO'#Cl'#ClOOQO'#Ch'#ChQ]QPOOOOQO,58|,58|OxQPO,58|OOQO-E6f-E6fOOQO1G.h1G.h",
@@ -1,5 +1,5 @@
1
- import { L as s } from "./index-CzA0TJ1Y.js";
2
- import { s as n, t as r, a as o, L as P, i as Q, f as i, c as a, g as c } from "./index-KRGYLUiH.js";
1
+ import { L as s } from "./index-CKD84DUx.js";
2
+ import { s as n, t as r, a as o, L as P, i as Q, f as i, c as a, g as c } from "./index-Lub7dhvT.js";
3
3
  const g = n({
4
4
  String: r.string,
5
5
  Number: r.number,
@@ -1,5 +1,5 @@
1
- import { L as o, E as a } from "./index-CzA0TJ1Y.js";
2
- import { s as Z, t as Q, a as _, L as q, i as l, f as w, c as r, g as V } from "./index-KRGYLUiH.js";
1
+ import { L as o, E as a } from "./index-CKD84DUx.js";
2
+ import { s as Z, t as Q, a as _, L as q, i as l, f as w, c as r, g as V } from "./index-Lub7dhvT.js";
3
3
  const g = 1, R = 2, b = 3, y = 4, T = 5, s = 98, c = 101, v = 102, t = 114, p = 69, X = 48, W = 46, d = 43, f = 45, Y = 35, z = 34, x = 124, U = 60, h = 62;
4
4
  function n(O) {
5
5
  return O >= 48 && O <= 57;
@@ -1,7 +1,7 @@
1
- import { a as g, L as P, p as l, s as q, t as r } from "./index-KRGYLUiH.js";
2
- import { html as c } from "./index-BIJlYkrW.js";
3
- import { javascriptLanguage as i } from "./index-CYAUKJ3V.js";
4
- import { L as R, E as p } from "./index-CzA0TJ1Y.js";
1
+ import { a as g, L as P, p as l, s as q, t as r } from "./index-Lub7dhvT.js";
2
+ import { html as c } from "./index-mNiLojvx.js";
3
+ import { javascriptLanguage as i } from "./index-BPGHypMd.js";
4
+ import { L as R, E as p } from "./index-CKD84DUx.js";
5
5
  const b = 1, $ = 33, m = 34, v = 35, x = 36, W = /* @__PURE__ */ new p((O) => {
6
6
  let t = O.pos;
7
7
  for (; ; ) {
@@ -1,4 +1,4 @@
1
- import { P as L, N as M, k as $, D as E, l as y, T as S, I as j } from "./index-KRGYLUiH.js";
1
+ import { P as L, N as M, k as $, D as E, l as y, T as S, I as j } from "./index-Lub7dhvT.js";
2
2
  class v {
3
3
  /**
4
4
  @internal
@@ -1,5 +1,5 @@
1
- import { L as te, a as re, i as ae, f as ne, s as ie, c as se, t as i, b as oe, d as le, e as ce } from "./index-KRGYLUiH.js";
2
- import { L as de, E as me } from "./index-CzA0TJ1Y.js";
1
+ import { L as te, a as re, i as ae, f as ne, s as ie, c as se, t as i, b as oe, d as le, e as ce } from "./index-Lub7dhvT.js";
2
+ import { L as de, E as me } from "./index-CKD84DUx.js";
3
3
  const ue = 36, B = 1, pe = 2, y = 3, C = 4, fe = 5, _e = 6, ge = 7, he = 8, ye = 9, be = 10, ve = 11, ke = 12, xe = 13, Oe = 14, we = 15, Qe = 16, Ce = 17, X = 18, Se = 19, A = 20, E = 21, I = 22, qe = 23, Pe = 24;
4
4
  function q(t) {
5
5
  return t >= 65 && t <= 90 || t >= 97 && t <= 122 || t >= 48 && t <= 57;
@@ -1,5 +1,5 @@
1
- import { L as w, E as p, a as Y } from "./index-CzA0TJ1Y.js";
2
- import { s as x, t as r, a as q, L as j, e as G, i as R, f as T, c as E, g as _, o as C, I as U } from "./index-KRGYLUiH.js";
1
+ import { L as w, E as p, a as Y } from "./index-CKD84DUx.js";
2
+ import { s as x, t as r, a as q, L as j, e as G, i as R, f as T, c as E, g as _, o as C, I as U } from "./index-Lub7dhvT.js";
3
3
  const V = 122, g = 1, Z = 123, W = 124, b = 2, N = 125, I = 3, F = 4, X = [
4
4
  9,
5
5
  10,
@@ -1,5 +1,5 @@
1
- import { L as W, E as i, C as B } from "./index-CzA0TJ1Y.js";
2
- import { s as U, t as n, a as C, L as b, p as E, i as u, f as M, j as v, g as N } from "./index-KRGYLUiH.js";
1
+ import { L as W, E as i, C as B } from "./index-CKD84DUx.js";
2
+ import { s as U, t as n, a as C, L as b, p as E, i as u, f as M, j as v, g as N } from "./index-Lub7dhvT.js";
3
3
  const c = 63, D = 64, j = 1, A = 2, y = 3, H = 4, Z = 5, F = 6, I = 7, z = 65, K = 66, J = 8, OO = 9, eO = 10, aO = 11, rO = 12, V = 13, tO = 19, nO = 20, oO = 29, PO = 33, QO = 34, sO = 47, lO = 0, T = 1, g = 2, d = 3, m = 4;
4
4
  class s {
5
5
  constructor(e, a, r) {
@@ -1,5 +1,5 @@
1
- import { L as G, E as A, C as N } from "./index-CzA0TJ1Y.js";
2
- import { s as I, t as p, E as Y, a as j, L as U, e as k, h as Z, i as B, f as D, H as M } from "./index-KRGYLUiH.js";
1
+ import { L as G, E as A, C as N } from "./index-CKD84DUx.js";
2
+ import { s as I, t as p, E as Y, a as j, L as U, e as k, h as Z, i as B, f as D, H as M } from "./index-Lub7dhvT.js";
3
3
  const h = 1, F = 2, L = 3, H = 4, K = 5, J = 36, ee = 37, te = 38, Oe = 11, oe = 13;
4
4
  function re(e) {
5
5
  return e == 45 || e == 46 || e == 58 || e >= 65 && e <= 90 || e == 95 || e >= 97 && e <= 122 || e >= 161;
@@ -1,5 +1,5 @@
1
- import { P as nt, k as j, l as v, q as st, N as Ae, s as Be, p as it, t as c, T as E, r as ot, L as le, u as at, v as lt, w as ht, x as ft, e as _, h as P, y as T, z as ut, f as Ie, i as dt, A as pt, C as ct, B as mt, F as he, G as gt } from "./index-KRGYLUiH.js";
2
- import { html as kt, htmlCompletionSource as Lt } from "./index-BIJlYkrW.js";
1
+ import { P as nt, k as j, l as v, q as st, N as Ae, s as Be, p as it, t as c, T as E, r as ot, L as le, u as at, v as lt, w as ht, x as ft, e as _, h as P, y as T, z as ut, f as Ie, i as dt, A as pt, C as ct, B as mt, F as he, G as gt } from "./index-Lub7dhvT.js";
2
+ import { html as kt, htmlCompletionSource as Lt } from "./index-mNiLojvx.js";
3
3
  class $ {
4
4
  static create(e, r, n, s, i) {
5
5
  let o = s + (s << 8) + e + (r << 4) | 0;
@@ -1,6 +1,6 @@
1
- import { a as t, L as i, i as n, f as $, c as y, g as P, s as X, t as O } from "./index-KRGYLUiH.js";
2
- import { defineCSSCompletionSource as m } from "./index-BXceTJm5.js";
3
- import { L as c, E as S } from "./index-CzA0TJ1Y.js";
1
+ import { a as t, L as i, i as n, f as $, c as y, g as P, s as X, t as O } from "./index-Lub7dhvT.js";
2
+ import { defineCSSCompletionSource as m } from "./index-Cqn_LfL2.js";
3
+ import { L as c, E as S } from "./index-CKD84DUx.js";
4
4
  const f = 110, l = 1, s = 2, r = [
5
5
  9,
6
6
  10,