@green-on-grey/ui-kit 1.8.0 → 1.10.0

package/dist/index.js

@@ -1,7 +1,7 @@
-import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "./ui-DvmjcG-d.js";
-import { n as d, t as f } from "./i18n-BJ8rsBp6.js";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useCallback as h, useEffect as g, useRef as _, useState as v } from "react";
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./ui-sV5t0cp1.js";
+import { n as f, t as p } from "./i18n-BJ8rsBp6.js";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useCallback as g, useEffect as _, useState as v } from "react";
 //#region src/components/Button.tsx
 function y({ variant: e, size: t, className: n, type: r = "button", ...i }) {
 	let a = [
@@ -10,7 +10,7 @@ function y({ variant: e, size: t, className: n, type: r = "button", ...i }) {
 		t,
 		n
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ p("button", {
+	return /* @__PURE__ */ m("button", {
 		type: r,
 		className: a,
 		...i
@@ -23,7 +23,7 @@ function b({ label: e, fill: t, on: n, className: r, type: i = "button", ...a })
 		n && "on",
 		r
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ p("button", {
+	return /* @__PURE__ */ m("button", {
 		type: i,
 		className: o,
 		"aria-label": e,
@@ -31,37 +31,13 @@ function b({ label: e, fill: t, on: n, className: r, type: i = "button", ...a })
 	});
 }
 //#endregion
-//#region src/components/Tabs.tsx
-function x({ items: e, value: t, onChange: n, label: r }) {
-	let i = _(null);
-	return /* @__PURE__ */ p("div", {
-		className: "tabs",
-		role: "tablist",
-		"aria-label": r,
-		ref: i,
-		onKeyDown: (r) => {
-			let a = e.findIndex((e) => e.key === t), o = r.key === "ArrowRight" ? (a + 1) % e.length : r.key === "ArrowLeft" ? (a - 1 + e.length) % e.length : r.key === "Home" ? 0 : r.key === "End" ? e.length - 1 : -1;
-			o < 0 || (r.preventDefault(), n(e[o].key), i.current?.querySelectorAll("[role=\"tab\"]")[o]?.focus());
-		},
-		children: e.map((e) => /* @__PURE__ */ p("button", {
-			type: "button",
-			role: "tab",
-			"aria-selected": e.key === t,
-			tabIndex: e.key === t ? 0 : -1,
-			className: e.key === t ? "on" : void 0,
-			onClick: () => n(e.key),
-			children: e.label
-		}, e.key))
-	});
-}
-//#endregion
 //#region src/components/Menu.tsx
-function S({ onClose: e, label: t, className: n, children: r }) {
-	let i = c(!0, e);
-	return g(() => {
+function x({ onClose: e, label: t, className: n, children: r }) {
+	let i = l(!0, e);
+	return _(() => {
 		let e = document.activeElement;
 		return () => e?.focus?.();
-	}, []), /* @__PURE__ */ p("div", {
+	}, []), /* @__PURE__ */ m("div", {
 		className: `menu${n ? ` ${n}` : ""}`,
 		role: "dialog",
 		"aria-label": t,
@@ -71,68 +47,68 @@ function S({ onClose: e, label: t, className: n, children: r }) {
 }
 //#endregion
 //#region src/components/TopBar.tsx
-function C({ logo: e, name: t, home: r = "/", sections: i, Link: a, center: o, actions: s, avatar: l, profileMenu: u, menu: f }) {
-	let g = d(), [_, y] = v(!1), [b, x] = v(!1), S = h(() => x(!1), []), C = h(() => y(!1), []), w = c(b, S), T = i.map((e) => /* @__PURE__ */ p(a, {
+function S({ logo: e, name: t, home: n = "/", sections: i, Link: a, center: o, actions: s, avatar: c, profileMenu: u, menu: d }) {
+	let p = f(), [_, y] = v(!1), [b, x] = v(!1), S = g(() => x(!1), []), C = g(() => y(!1), []), w = l(b, S), T = i.map((e) => /* @__PURE__ */ m(a, {
 		href: e.href,
 		className: e.active ? "on" : void 0,
 		"aria-current": e.active ? "page" : void 0,
 		onClick: S,
 		children: e.label
 	}, e.key));
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ h("div", {
 		className: "topbar",
 		children: [
-			/* @__PURE__ */ m(a, {
-				href: r,
+			/* @__PURE__ */ h(a, {
+				href: n,
 				className: "brand",
-				children: [/* @__PURE__ */ p("img", {
+				children: [/* @__PURE__ */ m("img", {
 					src: e,
 					alt: ""
-				}), /* @__PURE__ */ p("span", {
+				}), /* @__PURE__ */ m("span", {
 					className: "hide-m",
 					children: t
 				})]
 			}),
-			/* @__PURE__ */ p("nav", {
+			/* @__PURE__ */ m("nav", {
 				className: "nav hide-m",
-				"aria-label": g("topbar.sections"),
+				"aria-label": p("topbar.sections"),
 				children: T
 			}),
 			o,
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h("div", {
 				className: "top-actions",
 				children: [
 					s,
-					/* @__PURE__ */ p("button", {
+					/* @__PURE__ */ m("button", {
 						className: "avatar",
 						style: _ ? { boxShadow: "0 0 0 2px var(--violet)" } : void 0,
 						onClick: () => {
 							x(!1), y((e) => !e);
 						},
-						"aria-label": g("topbar.profile"),
+						"aria-label": p("topbar.profile"),
 						"aria-expanded": _,
-						children: l
+						children: c
 					}),
-					/* @__PURE__ */ m("div", {
+					/* @__PURE__ */ h("div", {
 						className: "burger",
 						ref: w,
-						children: [/* @__PURE__ */ p("button", {
+						children: [/* @__PURE__ */ m("button", {
 							className: `iconbtn${b ? " on" : ""}`,
 							onClick: () => {
 								y(!1), x((e) => !e);
 							},
-							"aria-label": f?.label ?? g("topbar.sections"),
+							"aria-label": d?.label ?? p("topbar.sections"),
 							"aria-expanded": b,
 							"aria-controls": "nav-sections",
-							children: /* @__PURE__ */ p(n, { name: b ? "x" : "menu" })
-						}), b && (f ? /* @__PURE__ */ p("div", {
+							children: /* @__PURE__ */ m(r, { name: b ? "x" : "menu" })
+						}), b && (d ? /* @__PURE__ */ m("div", {
 							id: "nav-sections",
 							className: "navmenu",
-							children: f.render(S)
-						}) : /* @__PURE__ */ p("nav", {
+							children: d.render(S)
+						}) : /* @__PURE__ */ m("nav", {
 							id: "nav-sections",
 							className: "navmenu",
-							"aria-label": g("topbar.sections"),
+							"aria-label": p("topbar.sections"),
 							children: T
 						}))]
 					})
@@ -143,6 +119,6 @@ function C({ logo: e, name: t, home: r = "/", sections: i, Link: a, center: o, a
 	});
 }
 //#endregion
-export { l as Avatar, y as Button, a as Empty, u as GitHubIcon, n as Icon, b as IconButton, s as Loading, i as Markdown, S as Menu, r as Modal, e as Switch, x as Tabs, o as ToastProvider, C as TopBar, f as UIKIT_NS, c as useOutside, t as useToast };
+export { u as Avatar, y as Button, o as Empty, n as GitHubIcon, r as Icon, b as IconButton, c as Loading, d as Markdown, x as Menu, i as Modal, e as Switch, a as Tabs, s as ToastProvider, S as TopBar, p as UIKIT_NS, l as useOutside, t as useToast };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Switch","useToast","Icon","Modal","Markdown","Empty","Loading","useOutside","Avatar","useKitT","UIKIT_NS","Button","rest","cls","variant","size","className","IconButton","fill","on","label","Tabs","ref","useRef","i","items","it","value","to","e","onChange","Menu","onClose","useEffect","opener","TopBar","t","profileOpen","setProfileOpen","useState","sectionsOpen","setSectionsOpen","closeSections","useCallback","closeProfile","links","sections","Link","s","home","logo","name","center","actions","v","avatar","menu","profileMenu","GitHubIcon","ToastProvider"],"sources":["../src/components/Button.tsx","../src/components/Tabs.tsx","../src/components/Menu.tsx","../src/components/TopBar.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\ntype Native = ButtonHTMLAttributes<HTMLButtonElement>;\n\n/** `button.btn` with its variants. The classes stay a legitimate way to use a\n * button (FTR.NAB.CMN-0005 tech, decision 1); the component is for new code. */\nexport function Button({ variant, size, className, type = \"button\", ...rest }: Native & {\n  variant?: \"primary\" | \"ghost\" | \"danger\"; size?: \"sm\";\n}) {\n  const cls = [\"btn\", variant, size, className].filter(Boolean).join(\" \");\n  return <button type={type} className={cls} {...rest} />;\n}\n\n/** `button.iconbtn`: a button with an icon only, so the label is required. */\nexport function IconButton({ label, fill, on, className, type = \"button\", ...rest }: Omit<Native, \"aria-label\"> & {\n  label: string; fill?: boolean; on?: boolean;\n}) {\n  const cls = [\"iconbtn\", fill && \"fill\", on && \"on\", className].filter(Boolean).join(\" \");\n  return <button type={type} className={cls} aria-label={label} {...rest} />;\n}\n","import { useRef, type KeyboardEvent, type ReactNode } from \"react\";\n\n/** `.tabs` with the keyboard of a tab list: arrows, Home and End move the choice. */\nexport function Tabs<K extends string>({ items, value, onChange, label }: {\n  items: { key: K; label: ReactNode }[]; value: K; onChange: (key: K) => void; label?: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const onKey = (e: KeyboardEvent) => {\n    const i = items.findIndex((it) => it.key === value);\n    const to = e.key === \"ArrowRight\" ? (i + 1) % items.length\n      : e.key === \"ArrowLeft\" ? (i - 1 + items.length) % items.length\n      : e.key === \"Home\" ? 0 : e.key === \"End\" ? items.length - 1 : -1;\n    if (to < 0) return;\n    e.preventDefault();\n    onChange(items[to].key);\n    ref.current?.querySelectorAll<HTMLElement>('[role=\"tab\"]')[to]?.focus();\n  };\n  return (\n    <div className=\"tabs\" role=\"tablist\" aria-label={label} ref={ref} onKeyDown={onKey}>\n      {items.map((it) => (\n        <button key={it.key} type=\"button\" role=\"tab\" aria-selected={it.key === value} tabIndex={it.key === value ? 0 : -1}\n          className={it.key === value ? \"on\" : undefined} onClick={() => onChange(it.key)}>\n          {it.label}\n        </button>\n      ))}\n    </div>\n  );\n}\n","import { useEffect, type ReactNode } from \"react\";\nimport { useOutside } from \"./ui\";\n\n/** `.menu`: a popover closed by Escape and by a click outside; it is mounted while\n * open. `onClose` must keep its identity between renders. What is inside\n * (sections `.sec`, lines `.line`, actions `.action`) belongs to the product. */\nexport function Menu({ onClose, label, className, children }: {\n  onClose: () => void; label?: string; className?: string; children: ReactNode;\n}) {\n  const ref = useOutside<HTMLDivElement>(true, onClose);\n  // the focus returns to what opened the menu (CMP-05)\n  useEffect(() => {\n    const opener = document.activeElement as HTMLElement | null;\n    return () => opener?.focus?.();\n  }, []);\n  return (\n    <div className={`menu${className ? ` ${className}` : \"\"}`} role=\"dialog\" aria-label={label} ref={ref}>\n      {children}\n    </div>\n  );\n}\n","import { useCallback, useState, type ReactNode } from \"react\";\nimport { useKitT } from \"../i18n\";\nimport { Icon } from \"./Icon\";\nimport { useOutside } from \"./ui\";\n\n/** The link of the product: the kit does not depend on a router (arch §4.2). */\nexport type LinkComponent = (props: {\n  href: string; className?: string; onClick?: () => void; \"aria-current\"?: \"page\"; children: ReactNode;\n}) => ReactNode;\n\nexport interface TopBarSection { key: string; label: ReactNode; href: string; active: boolean }\n\n/** The top bar (FTR.NAB.CMN-0005 R5, design §4): the logo and the name, the\n * sections in a row and behind the burger on a phone, the actions of the product,\n * the avatar that opens the profile menu. The profile menu and the list of\n * sections are never open together. A part of the product with its own\n * navigation (the administration) puts it behind the burger in place of the\n * sections: `menu`, with the side panel marked `in-burger`, hidden on a phone. */\nexport function TopBar({ logo, name, home = \"/\", sections, Link, center, actions, avatar, profileMenu, menu }: {\n  logo: string; name: string; home?: string; sections: TopBarSection[]; Link: LinkComponent;\n  /** Between the sections and the actions: the search of Hammurapi. */\n  center?: ReactNode;\n  /** Before the avatar. */\n  actions?: ReactNode;\n  avatar: ReactNode;\n  profileMenu: (close: () => void) => ReactNode;\n  /** The burger of a phone in place of the sections: the navigation of the current part of the product and\n   * its name, which the burger is called by. */\n  menu?: { label: string; render: (close: () => void) => ReactNode };\n}) {\n  const t = useKitT();\n  const [profileOpen, setProfileOpen] = useState(false);\n  const [sectionsOpen, setSectionsOpen] = useState(false);\n  const closeSections = useCallback(() => setSectionsOpen(false), []);\n  const closeProfile = useCallback(() => setProfileOpen(false), []);\n  const ref = useOutside<HTMLDivElement>(sectionsOpen, closeSections);\n  const links = sections.map((s) => (\n    <Link key={s.key} href={s.href} className={s.active ? \"on\" : undefined} aria-current={s.active ? \"page\" : undefined} onClick={closeSections}>\n      {s.label}\n    </Link>\n  ));\n  return (\n    <div className=\"topbar\">\n      <Link href={home} className=\"brand\">\n        <img src={logo} alt=\"\" />\n        <span className=\"hide-m\">{name}</span>\n      </Link>\n      <nav className=\"nav hide-m\" aria-label={t(\"topbar.sections\")}>{links}</nav>\n      {center}\n      <div className=\"top-actions\">\n        {actions}\n        <button className=\"avatar\" style={profileOpen ? { boxShadow: \"0 0 0 2px var(--violet)\" } : undefined}\n          onClick={() => { setSectionsOpen(false); setProfileOpen((v) => !v); }} aria-label={t(\"topbar.profile\")} aria-expanded={profileOpen}>\n          {avatar}\n        </button>\n        <div className=\"burger\" ref={ref}>\n          <button className={`iconbtn${sectionsOpen ? \" on\" : \"\"}`} onClick={() => { setProfileOpen(false); setSectionsOpen((v) => !v); }}\n            aria-label={menu?.label ?? t(\"topbar.sections\")} aria-expanded={sectionsOpen} aria-controls=\"nav-sections\">\n            <Icon name={sectionsOpen ? \"x\" : \"menu\"} />\n          </button>\n          {sectionsOpen && (menu\n            ? <div id=\"nav-sections\" className=\"navmenu\">{menu.render(closeSections)}</div>\n            : <nav id=\"nav-sections\" className=\"navmenu\" aria-label={t(\"topbar.sections\")}>{links}</nav>)}\n        </div>\n      </div>\n      {profileOpen && profileMenu(closeProfile)}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Switch","useToast","GitHubIcon","Icon","Tabs","Empty","ToastProvider","Loading","useOutside","Avatar","Markdown","useKitT","UIKIT_NS","Button","rest","cls","variant","size","className","IconButton","fill","on","label","Menu","ref","onClose","useEffect","opener","TopBar","t","profileOpen","setProfileOpen","useState","sectionsOpen","setSectionsOpen","closeSections","useCallback","closeProfile","links","sections","Link","s","home","logo","name","center","actions","v","avatar","menu","profileMenu","Modal"],"sources":["../src/components/Button.tsx","../src/components/Menu.tsx","../src/components/TopBar.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\ntype Native = ButtonHTMLAttributes<HTMLButtonElement>;\n\n/** `button.btn` with its variants. The classes stay a legitimate way to use a\n * button (FTR.NAB.CMN-0005 tech, decision 1); the component is for new code. */\nexport function Button({ variant, size, className, type = \"button\", ...rest }: Native & {\n  variant?: \"primary\" | \"ghost\" | \"danger\"; size?: \"sm\";\n}) {\n  const cls = [\"btn\", variant, size, className].filter(Boolean).join(\" \");\n  return <button type={type} className={cls} {...rest} />;\n}\n\n/** `button.iconbtn`: a button with an icon only, so the label is required. */\nexport function IconButton({ label, fill, on, className, type = \"button\", ...rest }: Omit<Native, \"aria-label\"> & {\n  label: string; fill?: boolean; on?: boolean;\n}) {\n  const cls = [\"iconbtn\", fill && \"fill\", on && \"on\", className].filter(Boolean).join(\" \");\n  return <button type={type} className={cls} aria-label={label} {...rest} />;\n}\n","import { useEffect, type ReactNode } from \"react\";\nimport { useOutside } from \"./ui\";\n\n/** `.menu`: a popover closed by Escape and by a click outside; it is mounted while\n * open. `onClose` must keep its identity between renders. What is inside\n * (sections `.sec`, lines `.line`, actions `.action`) belongs to the product. */\nexport function Menu({ onClose, label, className, children }: {\n  onClose: () => void; label?: string; className?: string; children: ReactNode;\n}) {\n  const ref = useOutside<HTMLDivElement>(true, onClose);\n  // the focus returns to what opened the menu (CMP-05)\n  useEffect(() => {\n    const opener = document.activeElement as HTMLElement | null;\n    return () => opener?.focus?.();\n  }, []);\n  return (\n    <div className={`menu${className ? ` ${className}` : \"\"}`} role=\"dialog\" aria-label={label} ref={ref}>\n      {children}\n    </div>\n  );\n}\n","import { useCallback, useState, type ReactNode } from \"react\";\nimport { useKitT } from \"../i18n\";\nimport { Icon } from \"./Icon\";\nimport { useOutside } from \"./ui\";\n\n/** The link of the product: the kit does not depend on a router (arch §4.2). */\nexport type LinkComponent = (props: {\n  href: string; className?: string; onClick?: () => void; \"aria-current\"?: \"page\"; children: ReactNode;\n}) => ReactNode;\n\nexport interface TopBarSection { key: string; label: ReactNode; href: string; active: boolean }\n\n/** The top bar (FTR.NAB.CMN-0005 R5, design §4): the logo and the name, the\n * sections in a row and behind the burger on a phone, the actions of the product,\n * the avatar that opens the profile menu. The profile menu and the list of\n * sections are never open together. A part of the product with its own\n * navigation (the administration) puts it behind the burger in place of the\n * sections: `menu`, with the side panel marked `in-burger`, hidden on a phone. */\nexport function TopBar({ logo, name, home = \"/\", sections, Link, center, actions, avatar, profileMenu, menu }: {\n  logo: string; name: string; home?: string; sections: TopBarSection[]; Link: LinkComponent;\n  /** Between the sections and the actions: the search of Hammurapi. */\n  center?: ReactNode;\n  /** Before the avatar. */\n  actions?: ReactNode;\n  avatar: ReactNode;\n  profileMenu: (close: () => void) => ReactNode;\n  /** The burger of a phone in place of the sections: the navigation of the current part of the product and\n   * its name, which the burger is called by. */\n  menu?: { label: string; render: (close: () => void) => ReactNode };\n}) {\n  const t = useKitT();\n  const [profileOpen, setProfileOpen] = useState(false);\n  const [sectionsOpen, setSectionsOpen] = useState(false);\n  const closeSections = useCallback(() => setSectionsOpen(false), []);\n  const closeProfile = useCallback(() => setProfileOpen(false), []);\n  const ref = useOutside<HTMLDivElement>(sectionsOpen, closeSections);\n  const links = sections.map((s) => (\n    <Link key={s.key} href={s.href} className={s.active ? \"on\" : undefined} aria-current={s.active ? \"page\" : undefined} onClick={closeSections}>\n      {s.label}\n    </Link>\n  ));\n  return (\n    <div className=\"topbar\">\n      <Link href={home} className=\"brand\">\n        <img src={logo} alt=\"\" />\n        <span className=\"hide-m\">{name}</span>\n      </Link>\n      <nav className=\"nav hide-m\" aria-label={t(\"topbar.sections\")}>{links}</nav>\n      {center}\n      <div className=\"top-actions\">\n        {actions}\n        <button className=\"avatar\" style={profileOpen ? { boxShadow: \"0 0 0 2px var(--violet)\" } : undefined}\n          onClick={() => { setSectionsOpen(false); setProfileOpen((v) => !v); }} aria-label={t(\"topbar.profile\")} aria-expanded={profileOpen}>\n          {avatar}\n        </button>\n        <div className=\"burger\" ref={ref}>\n          <button className={`iconbtn${sectionsOpen ? \" on\" : \"\"}`} onClick={() => { setProfileOpen(false); setSectionsOpen((v) => !v); }}\n            aria-label={menu?.label ?? t(\"topbar.sections\")} aria-expanded={sectionsOpen} aria-controls=\"nav-sections\">\n            <Icon name={sectionsOpen ? \"x\" : \"menu\"} />\n          </button>\n          {sectionsOpen && (menu\n            ? <div id=\"nav-sections\" className=\"navmenu\">{menu.render(closeSections)}</div>\n            : <nav id=\"nav-sections\" className=\"navmenu\" aria-label={t(\"topbar.sections\")}>{links}</nav>)}\n        </div>\n      </div>\n      {profileOpen && profileMenu(closeProfile)}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/locales/index.d.ts

@@ -90,6 +90,25 @@ export declare const resources: {
                 rows: string;
                 source: string;
                 page: string;
+                converted: string;
+                pagesShown: string;
+                firstPages: string;
+                cols: string;
+                preparing: string;
+                preparingHint: string;
+                unavailable: string;
+                formulaHint: string;
+                sheets: string;
+                reasons: {
+                    too_large: string;
+                    timeout: string;
+                    broken: string;
+                    busy: string;
+                };
+            };
+            notice: {
+                more: string;
+                less: string;
             };
         };
         agent: {
@@ -193,6 +212,25 @@ export declare const resources: {
                 rows: string;
                 source: string;
                 page: string;
+                converted: string;
+                pagesShown: string;
+                firstPages: string;
+                cols: string;
+                preparing: string;
+                preparingHint: string;
+                unavailable: string;
+                formulaHint: string;
+                sheets: string;
+                reasons: {
+                    too_large: string;
+                    timeout: string;
+                    broken: string;
+                    busy: string;
+                };
+            };
+            notice: {
+                more: string;
+                less: string;
             };
         };
         agent: {
@@ -296,6 +334,25 @@ export declare const resources: {
                 rows: string;
                 source: string;
                 page: string;
+                converted: string;
+                pagesShown: string;
+                firstPages: string;
+                cols: string;
+                preparing: string;
+                preparingHint: string;
+                unavailable: string;
+                formulaHint: string;
+                sheets: string;
+                reasons: {
+                    too_large: string;
+                    timeout: string;
+                    broken: string;
+                    busy: string;
+                };
+            };
+            notice: {
+                more: string;
+                less: string;
             };
         };
         agent: {
@@ -399,6 +456,25 @@ export declare const resources: {
                 rows: string;
                 source: string;
                 page: string;
+                converted: string;
+                pagesShown: string;
+                firstPages: string;
+                cols: string;
+                preparing: string;
+                preparingHint: string;
+                unavailable: string;
+                formulaHint: string;
+                sheets: string;
+                reasons: {
+                    too_large: string;
+                    timeout: string;
+                    broken: string;
+                    busy: string;
+                };
+            };
+            notice: {
+                more: string;
+                less: string;
             };
         };
         agent: {
@@ -502,6 +578,25 @@ export declare const resources: {
                 rows: string;
                 source: string;
                 page: string;
+                converted: string;
+                pagesShown: string;
+                firstPages: string;
+                cols: string;
+                preparing: string;
+                preparingHint: string;
+                unavailable: string;
+                formulaHint: string;
+                sheets: string;
+                reasons: {
+                    too_large: string;
+                    timeout: string;
+                    broken: string;
+                    busy: string;
+                };
+            };
+            notice: {
+                more: string;
+                less: string;
             };
         };
         agent: {

package/dist/locales.js

@@ -88,7 +88,26 @@ var t = {
 				notUtf8: "The file is not in UTF-8 — download it",
 				rows: "Showing {shown} of {total, plural, one {# row} other {# rows}}",
 				source: "Code",
-				page: "Page"
+				page: "Page",
+				converted: "Preview · converted from {format}",
+				pagesShown: "Showing {shown} of {total} pages",
+				firstPages: "Showing the first {shown} pages",
+				cols: "and {shown} of {total} columns",
+				preparing: "Preparing the preview…",
+				preparingHint: "Usually a few seconds",
+				unavailable: "Preview unavailable",
+				formulaHint: "The value is calculated when opened in Excel",
+				sheets: "Sheets",
+				reasons: {
+					too_large: "The file is over {limit} MB",
+					timeout: "Took longer than 30 seconds",
+					broken: "The file is damaged or the format is not supported",
+					busy: "The service is busy, try again later"
+				}
+			},
+			notice: {
+				more: "Show in full",
+				less: "Collapse"
 			}
 		},
 		agent: {
@@ -189,7 +208,26 @@ var t = {
 				notUtf8: "Файл не в кодировке UTF-8 — скачайте его",
 				rows: "Показаны {shown} из {total, plural, one {# строки} other {# строк}}",
 				source: "Код",
-				page: "Страница"
+				page: "Страница",
+				converted: "Предпросмотр · сконвертировано из {format}",
+				pagesShown: "Показаны {shown} из {total} страниц",
+				firstPages: "Показаны первые {shown} страниц",
+				cols: "и {shown} из {total} столбцов",
+				preparing: "Готовим предпросмотр…",
+				preparingHint: "Обычно несколько секунд",
+				unavailable: "Предпросмотр недоступен",
+				formulaHint: "Значение посчитается при открытии в Excel",
+				sheets: "Листы",
+				reasons: {
+					too_large: "Файл больше {limit} МБ",
+					timeout: "Не успели за 30 секунд",
+					broken: "Файл повреждён или формат не поддерживается",
+					busy: "Сервис занят, попробуйте позже"
+				}
+			},
+			notice: {
+				more: "Показать полностью",
+				less: "Свернуть"
 			}
 		},
 		agent: {
@@ -290,7 +328,26 @@ var t = {
 				notUtf8: "Die Datei ist nicht in UTF-8 — bitte herunterladen",
 				rows: "{shown} von {total, plural, one {# Zeile} other {# Zeilen}} angezeigt",
 				source: "Code",
-				page: "Seite"
+				page: "Seite",
+				converted: "Vorschau · konvertiert aus {format}",
+				pagesShown: "{shown} von {total} Seiten werden angezeigt",
+				firstPages: "Die ersten {shown} Seiten werden angezeigt",
+				cols: "und {shown} von {total} Spalten",
+				preparing: "Vorschau wird vorbereitet…",
+				preparingHint: "Meist nur wenige Sekunden",
+				unavailable: "Vorschau nicht verfügbar",
+				formulaHint: "Der Wert wird beim Öffnen in Excel berechnet",
+				sheets: "Blätter",
+				reasons: {
+					too_large: "Die Datei ist größer als {limit} MB",
+					timeout: "Hat länger als 30 Sekunden gedauert",
+					broken: "Die Datei ist beschädigt oder das Format wird nicht unterstützt",
+					busy: "Der Dienst ist ausgelastet, versuchen Sie es später erneut"
+				}
+			},
+			notice: {
+				more: "Vollständig anzeigen",
+				less: "Einklappen"
 			}
 		},
 		agent: {
@@ -391,7 +448,26 @@ var t = {
 				notUtf8: "El archivo no está en UTF-8: descárguelo",
 				rows: "Se muestran {shown} de {total, plural, one {# fila} other {# filas}}",
 				source: "Código",
-				page: "Página"
+				page: "Página",
+				converted: "Vista previa · convertido desde {format}",
+				pagesShown: "Se muestran {shown} de {total} páginas",
+				firstPages: "Se muestran las primeras {shown} páginas",
+				cols: "y {shown} de {total} columnas",
+				preparing: "Preparando la vista previa…",
+				preparingHint: "Suele tardar unos segundos",
+				unavailable: "Vista previa no disponible",
+				formulaHint: "El valor se calcula al abrir el archivo en Excel",
+				sheets: "Hojas",
+				reasons: {
+					too_large: "El archivo supera {limit} MB",
+					timeout: "Tardó más de 30 segundos",
+					broken: "El archivo está dañado o el formato no es compatible",
+					busy: "El servicio está ocupado, inténtalo más tarde"
+				}
+			},
+			notice: {
+				more: "Mostrar completo",
+				less: "Contraer"
 			}
 		},
 		agent: {
@@ -492,7 +568,26 @@ var t = {
 				notUtf8: "文件不是 UTF-8 编码，请下载",
 				rows: "显示 {total} 行中的 {shown} 行",
 				source: "代码",
-				page: "页面"
+				page: "页面",
+				converted: "预览 · 由 {format} 转换",
+				pagesShown: "显示 {shown} / {total} 页",
+				firstPages: "显示前 {shown} 页",
+				cols: "以及 {shown} / {total} 列",
+				preparing: "正在准备预览…",
+				preparingHint: "通常只需几秒",
+				unavailable: "无法预览",
+				formulaHint: "在 Excel 中打开时计算该值",
+				sheets: "工作表",
+				reasons: {
+					too_large: "文件大于 {limit} MB",
+					timeout: "超过 30 秒未完成",
+					broken: "文件已损坏或格式不受支持",
+					busy: "服务繁忙，请稍后重试"
+				}
+			},
+			notice: {
+				more: "显示全部",
+				less: "收起"
 			}
 		},
 		agent: {