wb-slides
Version:
A slide-deck framework for React.
1,204 lines (1,203 loc) • 36.7 kB
JavaScript
import { jsxs as g, jsx as r, Fragment as A } from "react/jsx-runtime";
import h from "clsx";
import { PrismLight as D } from "react-syntax-highlighter";
import { g as Z } from "./_commonjsHelpers-C6fGbg64.js";
import { useId as V, useRef as X, useState as R, useMemo as w, createContext as L, useContext as M, useEffect as x } from "react";
import { createPortal as se } from "react-dom";
import { MDXProvider as le } from "@mdx-js/react";
import { useNavigate as K, useMatches as ce, Outlet as ie, createBrowserRouter as ue, RouterProvider as de, Link as T } from "react-router";
function tt({ show: e, setShow: t, children: n, className: a }) {
return /* @__PURE__ */ g(
"label",
{
className: h(
"not-prose inline-flex items-baseline gap-2 rounded-md mt-2 px-3 py-1 text-sm cursor-pointer",
a
),
children: [
/* @__PURE__ */ r(
"input",
{
type: "checkbox",
className: "accent-red-500 w-3 h-3 translate-y-0.5",
checked: e,
onChange: () => t((o) => !o)
}
),
n
]
}
);
}
var k, H;
function ge() {
if (H) return k;
H = 1, k = e, e.displayName = "jsx", e.aliases = [];
function e(t) {
(function(n) {
var a = n.util.clone(n.languages.javascript), o = /(?:\s|\/\/.*(?!.)|\/\*(?:[^*]|\*(?!\/))\*\/)/.source, s = /(?:\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])*\})/.source, c = /(?:\{<S>*\.{3}(?:[^{}]|<BRACES>)*\})/.source;
function l(i, p) {
return i = i.replace(/<S>/g, function() {
return o;
}).replace(/<BRACES>/g, function() {
return s;
}).replace(/<SPREAD>/g, function() {
return c;
}), RegExp(i, p);
}
c = l(c).source, n.languages.jsx = n.languages.extend("markup", a), n.languages.jsx.tag.pattern = l(
/<\/?(?:[\w.:-]+(?:<S>+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|<BRACES>))?|<SPREAD>))*<S>*\/?)?>/.source
), n.languages.jsx.tag.inside.tag.pattern = /^<\/?[^\s>\/]*/, n.languages.jsx.tag.inside["attr-value"].pattern = /=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/, n.languages.jsx.tag.inside.tag.inside["class-name"] = /^[A-Z]\w*(?:\.[A-Z]\w*)*$/, n.languages.jsx.tag.inside.comment = a.comment, n.languages.insertBefore(
"inside",
"attr-name",
{
spread: {
pattern: l(/<SPREAD>/.source),
inside: n.languages.jsx
}
},
n.languages.jsx.tag
), n.languages.insertBefore(
"inside",
"special-attr",
{
script: {
// Allow for two levels of nesting
pattern: l(/=<BRACES>/.source),
alias: "language-javascript",
inside: {
"script-punctuation": {
pattern: /^=(?=\{)/,
alias: "punctuation"
},
rest: n.languages.jsx
}
}
},
n.languages.jsx.tag
);
var u = function(i) {
return i ? typeof i == "string" ? i : typeof i.content == "string" ? i.content : i.content.map(u).join("") : "";
}, f = function(i) {
for (var p = [], d = 0; d < i.length; d++) {
var m = i[d], z = !1;
if (typeof m != "string" && (m.type === "tag" && m.content[0] && m.content[0].type === "tag" ? m.content[0].content[0].content === "</" ? p.length > 0 && p[p.length - 1].tagName === u(m.content[0].content[1]) && p.pop() : m.content[m.content.length - 1].content === "/>" || p.push({
tagName: u(m.content[0].content[1]),
openedBraces: 0
}) : p.length > 0 && m.type === "punctuation" && m.content === "{" ? p[p.length - 1].openedBraces++ : p.length > 0 && p[p.length - 1].openedBraces > 0 && m.type === "punctuation" && m.content === "}" ? p[p.length - 1].openedBraces-- : z = !0), (z || typeof m == "string") && p.length > 0 && p[p.length - 1].openedBraces === 0) {
var v = u(m);
d < i.length - 1 && (typeof i[d + 1] == "string" || i[d + 1].type === "plain-text") && (v += u(i[d + 1]), i.splice(d + 1, 1)), d > 0 && (typeof i[d - 1] == "string" || i[d - 1].type === "plain-text") && (v = u(i[d - 1]) + v, i.splice(d - 1, 1), d--), i[d] = new n.Token(
"plain-text",
v,
null,
v
);
}
m.content && typeof m.content != "string" && f(m.content);
}
};
n.hooks.add("after-tokenize", function(i) {
i.language !== "jsx" && i.language !== "tsx" || f(i.tokens);
});
})(t);
}
return k;
}
var S, _;
function pe() {
if (_) return S;
_ = 1, S = e, e.displayName = "typescript", e.aliases = ["ts"];
function e(t) {
(function(n) {
n.languages.typescript = n.languages.extend("javascript", {
"class-name": {
pattern: /(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,
lookbehind: !0,
greedy: !0,
inside: null
// see below
},
builtin: /\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/
}), n.languages.typescript.keyword.push(
/\b(?:abstract|declare|is|keyof|readonly|require)\b/,
// keywords that have to be followed by an identifier
/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,
// This is for `import type *, {}`
/\btype\b(?=\s*(?:[\{*]|$))/
), delete n.languages.typescript.parameter, delete n.languages.typescript["literal-property"];
var a = n.languages.extend("typescript", {});
delete a["class-name"], n.languages.typescript["class-name"].inside = a, n.languages.insertBefore("typescript", "function", {
decorator: {
pattern: /@[$\w\xA0-\uFFFF]+/,
inside: {
at: {
pattern: /^@/,
alias: "operator"
},
function: /^[\s\S]+/
}
},
"generic-function": {
// e.g. foo<T extends "bar" | "baz">( ...
pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,
greedy: !0,
inside: {
function: /^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,
generic: {
pattern: /<[\s\S]+/,
// everything after the first <
alias: "class-name",
inside: a
}
}
}
}), n.languages.ts = n.languages.typescript;
})(t);
}
return S;
}
var F, q;
function fe() {
if (q) return F;
q = 1;
var e = ge(), t = pe();
F = n, n.displayName = "tsx", n.aliases = [];
function n(a) {
a.register(e), a.register(t), function(o) {
var s = o.util.clone(o.languages.typescript);
o.languages.tsx = o.languages.extend("jsx", s), delete o.languages.tsx.parameter, delete o.languages.tsx["literal-property"];
var c = o.languages.tsx.tag;
c.pattern = RegExp(
/(^|[^\w$]|(?=<\/))/.source + "(?:" + c.pattern.source + ")",
c.pattern.flags
), c.lookbehind = !0;
}(a);
}
return F;
}
var me = fe();
const he = /* @__PURE__ */ Z(me);
var j, O;
function ye() {
if (O) return j;
O = 1, j = e, e.displayName = "xmlDoc", e.aliases = [];
function e(t) {
(function(n) {
function a(l, u) {
n.languages[l] && n.languages.insertBefore(l, "comment", {
"doc-comment": u
});
}
var o = n.languages.markup.tag, s = {
pattern: /\/\/\/.*/,
greedy: !0,
alias: "comment",
inside: {
tag: o
}
}, c = {
pattern: /'''.*/,
greedy: !0,
alias: "comment",
inside: {
tag: o
}
};
a("csharp", s), a("fsharp", s), a("vbnet", c);
})(t);
}
return j;
}
var xe = ye();
const ve = /* @__PURE__ */ Z(xe), be = {
'pre[class*="language-"]': {
color: "#d4d4d4",
fontSize: "13px",
textShadow: "none",
fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
direction: "ltr",
textAlign: "left",
whiteSpace: "pre",
wordSpacing: "normal",
wordBreak: "normal",
lineHeight: "1.5",
MozTabSize: "4",
OTabSize: "4",
tabSize: "4",
WebkitHyphens: "none",
MozHyphens: "none",
msHyphens: "none",
hyphens: "none",
padding: "1em",
margin: ".5em 0",
overflow: "auto",
background: "#1e1e1e"
},
'code[class*="language-"]': {
color: "#d4d4d4",
fontSize: "13px",
textShadow: "none",
fontFamily: 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
direction: "ltr",
textAlign: "left",
whiteSpace: "pre",
wordSpacing: "normal",
wordBreak: "normal",
lineHeight: "1.5",
MozTabSize: "4",
OTabSize: "4",
tabSize: "4",
WebkitHyphens: "none",
MozHyphens: "none",
msHyphens: "none",
hyphens: "none"
},
'pre[class*="language-"]::selection': {
textShadow: "none",
background: "#264F78"
},
'code[class*="language-"]::selection': {
textShadow: "none",
background: "#264F78"
},
'pre[class*="language-"] *::selection': {
textShadow: "none",
background: "#264F78"
},
'code[class*="language-"] *::selection': {
textShadow: "none",
background: "#264F78"
},
':not(pre) > code[class*="language-"]': {
padding: ".1em .3em",
borderRadius: ".3em",
color: "#db4c69",
background: "#1e1e1e"
},
".namespace": {
Opacity: ".7"
},
"doctype.doctype-tag": {
color: "#569CD6"
},
"doctype.name": {
color: "#9cdcfe"
},
comment: {
color: "#6a9955"
},
prolog: {
color: "#6a9955"
},
punctuation: {
color: "#d4d4d4"
},
".language-html .language-css .token.punctuation": {
color: "#d4d4d4"
},
".language-html .language-javascript .token.punctuation": {
color: "#d4d4d4"
},
property: {
color: "#9cdcfe"
},
tag: {
color: "#569cd6"
},
boolean: {
color: "#569cd6"
},
number: {
color: "#b5cea8"
},
constant: {
color: "#9cdcfe"
},
symbol: {
color: "#b5cea8"
},
inserted: {
color: "#b5cea8"
},
unit: {
color: "#b5cea8"
},
selector: {
color: "#d7ba7d"
},
"attr-name": {
color: "#9cdcfe"
},
string: {
color: "#ce9178"
},
char: {
color: "#ce9178"
},
builtin: {
color: "#ce9178"
},
deleted: {
color: "#ce9178"
},
".language-css .token.string.url": {
textDecoration: "underline"
},
operator: {
color: "#d4d4d4"
},
entity: {
color: "#569cd6"
},
"operator.arrow": {
color: "#569CD6"
},
atrule: {
color: "#ce9178"
},
"atrule.rule": {
color: "#c586c0"
},
"atrule.url": {
color: "#9cdcfe"
},
"atrule.url.function": {
color: "#dcdcaa"
},
"atrule.url.punctuation": {
color: "#d4d4d4"
},
keyword: {
color: "#569CD6"
},
"keyword.module": {
color: "#c586c0"
},
"keyword.control-flow": {
color: "#c586c0"
},
function: {
color: "#dcdcaa"
},
"function.maybe-class-name": {
color: "#dcdcaa"
},
regex: {
color: "#d16969"
},
important: {
color: "#569cd6"
},
italic: {
fontStyle: "italic"
},
"class-name": {
color: "#4ec9b0"
},
"maybe-class-name": {
color: "#4ec9b0"
},
console: {
color: "#9cdcfe"
},
parameter: {
color: "#9cdcfe"
},
interpolation: {
color: "#9cdcfe"
},
"punctuation.interpolation-punctuation": {
color: "#569cd6"
},
variable: {
color: "#9cdcfe"
},
"imports.maybe-class-name": {
color: "#9cdcfe"
},
"exports.maybe-class-name": {
color: "#9cdcfe"
},
escape: {
color: "#d7ba7d"
},
"tag.punctuation": {
color: "#808080"
},
cdata: {
color: "#808080"
},
"attr-value": {
color: "#ce9178"
},
"attr-value.punctuation": {
color: "#ce9178"
},
"attr-value.punctuation.attr-equals": {
color: "#d4d4d4"
},
namespace: {
color: "#4ec9b0"
},
'pre[class*="language-javascript"]': {
color: "#9cdcfe"
},
'code[class*="language-javascript"]': {
color: "#9cdcfe"
},
'pre[class*="language-jsx"]': {
color: "#9cdcfe"
},
'code[class*="language-jsx"]': {
color: "#9cdcfe"
},
'pre[class*="language-typescript"]': {
color: "#9cdcfe"
},
'code[class*="language-typescript"]': {
color: "#9cdcfe"
},
'pre[class*="language-tsx"]': {
color: "#9cdcfe"
},
'code[class*="language-tsx"]': {
color: "#9cdcfe"
},
'pre[class*="language-css"]': {
color: "#ce9178"
},
'code[class*="language-css"]': {
color: "#ce9178"
},
'pre[class*="language-html"]': {
color: "#d4d4d4"
},
'code[class*="language-html"]': {
color: "#d4d4d4"
},
".language-regex .token.anchor": {
color: "#dcdcaa"
},
".language-html .token.punctuation": {
color: "#808080"
},
'pre[class*="language-"] > code[class*="language-"]': {
position: "relative",
zIndex: "1"
},
".line-highlight.line-highlight": {
background: "#f7ebc6",
boxShadow: "inset 5px 0 0 #f7d87c",
zIndex: "0"
}
};
D.registerLanguage("tsx", he);
D.registerLanguage("xml", ve);
function we(e) {
const t = e.replace(/\r/g, "").split(`
`).filter((o) => o.trim() !== "// @ts-nocheck"), n = t.findIndex((o) => o.trim()), a = t.slice().reverse().findIndex((o) => o.trim());
return t.slice(n, a ? a * -1 : t.length).join(`
`);
}
function nt({ code: e, language: t = "tsx" }) {
return /* @__PURE__ */ r("div", { className: "not-prose", children: /* @__PURE__ */ r(D, { language: t, style: be, children: we(e) }) });
}
function $({ name: e, accessibleText: t, className: n }) {
return /* @__PURE__ */ r("span", { className: h("material-symbols-outlined", n), "aria-label": t, children: e });
}
function rt({ title: e, children: t, className: n, prose: a }) {
return /* @__PURE__ */ g(
"details",
{
className: h(
"group rounded-lg border px-4 py-2 border-gray-700/50 bg-gray-950/50 open:border-gray-700/50 open:bg-gray-950/50",
{ "not-prose": !a },
n
),
children: [
/* @__PURE__ */ g("summary", { className: "flex items-center gap-3 leading-6 font-semibold select-none list-none not-prose", children: [
/* @__PURE__ */ r($, { name: "chevron_right", className: "group-open:rotate-90 transition-transform" }),
e
] }),
t
]
}
);
}
function at({ src: e, alt: t = "" }) {
const n = V(), a = X(null);
return /* @__PURE__ */ g(A, { children: [
/* @__PURE__ */ r("button", { onClick: () => {
a.current?.showModal();
}, children: /* @__PURE__ */ r("img", { src: e, alt: t, className: "w-[300px] cursor-zoom-in rounded shadow" }) }),
se(
/* @__PURE__ */ g(
"dialog",
{
ref: a,
id: n,
className: "inset-0 bg-gray-900 p-4 fixed m-auto",
closedby: "any",
children: [
/* @__PURE__ */ r(
"button",
{
command: "close",
commandfor: n,
className: "auto top-2 right-2 w-8 h-8 pb-0.5 flex items-center justify-center mx-auto absolute z-10 hover:text-gray-200 hover:outline-1 rounded-full",
"aria-label": "Close",
children: /* @__PURE__ */ r("span", { className: "font-bold text-2xl", children: "×" })
}
),
/* @__PURE__ */ r("img", { src: e, alt: t, className: "max-w-full max-h-[80vh] mx-auto leading-0" })
]
}
),
document.body
)
] });
}
function ot({ data: e }) {
return /* @__PURE__ */ r("div", { className: "not-prose bg-slate-900 pl-10 pr-4 py-2 rounded-xl max-w-7xl overflow-hidden", children: /* @__PURE__ */ r(B, { propertyText: "root", data: e }) });
}
function B({ propertyText: e, data: t }) {
const n = typeof t;
return n === "boolean" ? /* @__PURE__ */ g("div", { className: "flex justify-start gap-4", children: [
/* @__PURE__ */ r("code", { className: "text-gray-300", children: e }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(boolean)" }),
/* @__PURE__ */ r("code", { className: "text-cyan-300", children: t ? "true" : "false" })
] }) : n === "number" ? /* @__PURE__ */ g("div", { className: "flex justify-start gap-4", children: [
/* @__PURE__ */ r("code", { className: "text-gray-300", children: e }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(number)" }),
/* @__PURE__ */ r("code", { className: "text-cyan-300", children: t })
] }) : n === "string" ? /* @__PURE__ */ g("div", { className: "flex justify-start gap-4", children: [
/* @__PURE__ */ r("code", { className: "text-gray-300", children: e }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(string)" }),
/* @__PURE__ */ g("code", { className: "text-cyan-300", children: [
'"',
t,
'"'
] })
] }) : t ? Array.isArray(t) ? /* @__PURE__ */ r(Ne, { propertyText: e, data: t }) : /* @__PURE__ */ r(ke, { propertyText: e, data: t }) : /* @__PURE__ */ g("div", { className: "flex justify-start gap-4", children: [
/* @__PURE__ */ r("code", { className: "text-gray-300", children: e }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(null)" })
] });
}
function Ne({ propertyText: e, data: t }) {
const [n, a] = R(!1);
return Object.keys(t).length ? /* @__PURE__ */ g("div", { className: "flex flex-col", children: [
/* @__PURE__ */ g("div", { className: "flex gap-2 items-center justify-start", children: [
/* @__PURE__ */ r(P, { expanded: n, setExpanded: a }),
/* @__PURE__ */ r("button", { onClick: () => a((o) => !o), children: /* @__PURE__ */ r("code", { className: "text-gray-300", children: e }) }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(array)" }),
"(",
Object.keys(t).length,
" items)"
] }),
n && /* @__PURE__ */ r("div", { className: "pl-6", children: t.map((o, s) => /* @__PURE__ */ r("div", { className: "flex gap-4 items-start justify-start", children: /* @__PURE__ */ r(B, { propertyText: `[${s}]`, data: o }) }, s)) })
] }) : /* @__PURE__ */ g("div", { className: "flex justify-start gap-4", children: [
/* @__PURE__ */ r("code", { className: "text-gray-300", children: e }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(array)" }),
"(empty)"
] });
}
function ke({ propertyText: e, data: t }) {
const [n, a] = R(!1), o = w(() => Object.entries(t).sort(([, s], [, c]) => {
const l = typeof s, u = typeof c;
return l === u ? 0 : l === "object" && s ? -1 : u === "object" && c ? 1 : 0;
}), [t]);
return o.length ? /* @__PURE__ */ g("div", { className: "flex flex-col", children: [
/* @__PURE__ */ g("div", { className: "flex gap-2 items-center justify-start", children: [
/* @__PURE__ */ r(P, { expanded: n, setExpanded: a }),
/* @__PURE__ */ r("button", { onClick: () => a((s) => !s), children: /* @__PURE__ */ r("code", { className: "text-gray-300", children: e }) }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(object)" }),
"(",
Object.keys(t).length,
" items)"
] }),
n && /* @__PURE__ */ r("div", { className: "pl-6 ml-0.5", children: o.map(([s, c]) => /* @__PURE__ */ r("div", { className: "flex gap-4 items-start justify-start", children: /* @__PURE__ */ r(B, { propertyText: `"${s}"`, data: c }) }, s)) })
] }) : /* @__PURE__ */ g("div", { className: "flex justify-start gap-4", children: [
/* @__PURE__ */ r("code", { className: "text-gray-300", children: e }),
/* @__PURE__ */ r("code", { className: "text-sky-400", children: "(object)" }),
"(empty)"
] });
}
function P({ expanded: e, setExpanded: t }) {
const n = () => t((a) => !a);
return /* @__PURE__ */ r(
"button",
{
className: h(
"absolute -translate-x-full -ml-2 rounded-sm flex gap-2 text-sm border px-1 py-0.5 w-5 h-5 items-center justify-center font-bold",
{
"bg-slate-400 text-black": e
},
e ? "hover:bg-slate-300" : "hover:bg-slate-600"
),
onClick: n,
children: /* @__PURE__ */ r("span", { children: e ? "-" : "+" })
}
);
}
const Q = 3.9, W = {
Backspace: 2,
Tab: 1.5,
"\\": 1.5,
// The '\' key above Enter
"Caps Lock": 1.75,
Enter: 2.25,
Shift: 2.25,
rShift: 2.75,
Control: 1.25,
Win: 1.25,
// Windows or Command key
Alt: 1.25,
Space: 6.25,
rAlt: 1.25,
Fn: 1.25,
Ctx: 1.25,
rControl: 1.25,
kp0: 2
}, G = L({ baseKeySize: Q }), Se = G.Provider, Y = () => M(G), y = (e, t) => `${e * t}vw`;
function b(e, t = 1, n = e) {
return {
height: `${n}vw`,
width: `${n * t}vw`
};
}
function C(e) {
if (e.startsWith("r")) return e.slice(1);
if (["Win", "Fn", "Ctx"].includes(e)) return "";
if (e.startsWith("kp")) return e.slice(2);
const t = {
"`": "~",
1: "!",
2: "@",
3: "#",
4: "$",
5: "%",
6: "^",
7: "&",
8: "*",
9: "(",
0: ")",
"-": "_",
"=": "+",
"[": "{",
"]": "}",
"\\": "|",
";": ":",
"'": '"',
",": "<",
".": ">",
"/": "?"
};
return e in t ? /* @__PURE__ */ g("div", { children: [
/* @__PURE__ */ r("div", { children: t[e] }),
/* @__PURE__ */ r("div", { children: e })
] }) : e;
}
function Fe(e, t) {
return t === "null" ? {
style: { ...b(e), opacity: 0.5 },
content: null
} : t in W ? {
style: {
...b(e, W[t]),
borderRadius: y(e, 0.1),
outlineOffset: y(e, -0.05)
},
content: C(t),
className: "outline"
} : ["kp+", "kpEnter"].includes(t) ? {
style: {
...b(e, 0.5, e * 2),
right: 0,
borderRadius: y(e, 0.1),
outlineOffset: y(e, -0.05)
},
content: C(t),
className: "outline absolute"
} : {
style: {
...b(e),
borderRadius: y(e, 0.1),
outlineOffset: y(e, -0.05)
},
content: C(t),
className: "outline"
};
}
const je = {
style: (e) => ({ gap: e(0.5), marginBottom: e(0.5) }),
keys: [
{
style: (e) => ({ gap: e(1) }),
keys: [
"Esc",
{
style: (e) => ({ gap: e(0.5) }),
keys: ["F1,F2,F3,F4".split(","), "F5,F6,F7,F8".split(","), "F9,F10,F11,F12".split(",")]
}
]
},
["Print", "Scroll", "Pause"],
[null, null, null, null]
]
}, Ce = {
style: (e) => ({ gap: e(0.5) }),
keys: [
[..."`1234567890-=", "Backspace"],
["Insert", "Home", "Pg Up"],
["Num Lock", "kp/", "kp*", "kp-"]
]
}, Ee = {
style: (e) => ({ gap: e(0.5) }),
keys: [
["Tab", ..."QWERTYUIOP[]\\"],
["Delete", "End", "Pg Dn"],
["kp7", "kp8", "kp9", "kp+"]
]
}, Ae = {
style: (e) => ({ gap: e(0.5) }),
keys: [
["Caps Lock", ..."ASDFGHJKL;'", "Enter"],
[null, null, null],
["kp4", "kp5", "kp6", null]
]
}, De = {
style: (e) => ({ gap: e(0.5) }),
keys: [
["Shift", ..."ZXCVBNM,./", "rShift"],
[null, "Up", null],
["kp1", "kp2", "kp3", "kpEnter"]
]
}, Re = {
style: (e) => ({ gap: e(0.5) }),
keys: [
["Control", "Win", "Alt", "Space", "rAlt", "Fn", "Ctx", "rControl"],
["Left", "Down", "Right"],
["kp0", "kp.", null]
]
}, Le = [je, Ce, Ee, Ae, De, Re];
function ee({ value: e }) {
const { highlight: t, onClick: n, baseKeySize: a } = Y();
if (e === null)
return /* @__PURE__ */ r(ee, { value: "null" });
const { style: o, className: s, content: c } = Fe(a, e), l = t?.includes(e);
return /* @__PURE__ */ r(
"button",
{
style: o,
className: h(s, n ? "hover:bg-white/10" : "cursor-default", {
"outline-green-400 outline-2 bg-green-400/20": l
}),
children: c
}
);
}
function E({ keys: e, style: t, className: n }) {
const { baseKeySize: a } = Y();
return /* @__PURE__ */ r("div", { style: t?.((o) => y(a, o)), className: h("flex", n), children: e.map((o, s) => Array.isArray(o) ? /* @__PURE__ */ r(E, { keys: o }, s) : typeof o == "object" && o && "keys" in o ? /* @__PURE__ */ r(E, { keys: o.keys, style: o.style, className: o.className }, s) : /* @__PURE__ */ r(ee, { value: o }, s)) });
}
function st({
baseKeySize: e = Q,
highlight: t,
onClick: n
}) {
return /* @__PURE__ */ r(
"div",
{
className: "not-prose relative w-max outline p-3 rounded-md",
style: { fontSize: y(e, 0.25) },
children: /* @__PURE__ */ r("div", { className: "relative w-max", children: /* @__PURE__ */ r(Se, { value: { highlight: t, onClick: n, baseKeySize: e }, children: /* @__PURE__ */ r(E, { keys: Le, className: "flex-col" }) }) })
}
);
}
const J = L(!1);
function Me({ className: e, children: t }) {
return M(J) ? t : /* @__PURE__ */ r(J.Provider, { value: !0, children: /* @__PURE__ */ r("article", { className: h("prose dark:prose-invert w-full max-w-none", e), children: t }) });
}
function lt({ tooltip: e, children: t }) {
const n = V();
return /* @__PURE__ */ g(A, { children: [
/* @__PURE__ */ r("button", { popoverTarget: n, children: t }),
/* @__PURE__ */ r(
"div",
{
id: n,
className: `
fixed m-auto max-h-4/5 rounded-xl
py-4
backdrop:backdrop-blur-xs backdrop:backdrop-saturate-50
bg-gradient-to-br from-cyan-950 to-purple-950
`,
popover: "auto",
children: e
}
)
] });
}
const te = L([]);
function I() {
const e = M(te);
return w(() => e.map((t, n) => {
const a = t.slides[0], o = n === 0 ? "/" : `/${t.slug}/${a.slug}/`;
return {
...t,
path: o,
slides: t.slides.map((s, c) => {
const l = !n && !c ? "/" : `/${t.slug}/${s.slug}/`;
return { ...s, path: l };
})
};
}), [e]);
}
function ne() {
return ce().at(-1)?.data ?? {};
}
function $e() {
const { slide: e } = ne();
return e;
}
function N() {
const { topicIndex: e, slideIndex: t } = ne();
return [e ?? 0, t ?? 0];
}
function Be() {
const [e, t] = N();
return e > 0 || t > 0;
}
function Ie() {
const e = I(), t = e.length - 1, n = e[t].slides.length - 1, [a, o] = N();
return a < t || o < n;
}
function re() {
const e = I(), t = K(), n = w(() => e.flatMap(
(c, l) => c.slides.map((u, f) => ({
topic: c,
topicIndex: l,
slide: u,
slideIndex: f,
path: u.path
}))
), [e]), [a, o] = N(), s = n.findIndex(
({ topicIndex: c, slideIndex: l }) => c === a && l === o
);
return [
() => {
if (s <= 0) return;
const c = s - 1, { path: l } = n[c];
t(l);
},
() => {
if (s >= n.length - 1) return;
const c = s + 1, { path: l } = n[c];
t(l);
}
];
}
function ze({ open: e, setOpen: t }) {
const n = Be(), a = Ie(), [o, s] = re();
return /* @__PURE__ */ g(
"div",
{
className: h(
"flex items-center justify-between transition-all",
e ? "*:pointer-events-none" : "*:pointer-events-auto",
{
"-translate-y-full opacity-0": e
}
),
inert: e,
children: [
/* @__PURE__ */ r(
U,
{
className: "pr-0.5",
disabled: !n,
iconName: "chevron_left",
onClick: () => o()
}
),
/* @__PURE__ */ r(
"button",
{
className: "cursor-pointer p-2 text-slate-300 hover:text-slate-50",
onClick: (c) => {
c.stopPropagation(), t((l) => !l);
},
"aria-label": "Open slide navigator",
children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center border border-current rounded-full bg-cyan-950 outline-cyan-950 outline-3", children: /* @__PURE__ */ r($, { name: "more_horiz", className: "w-10 h-5 leading-5! block overflow-hidden" }) })
}
),
/* @__PURE__ */ r(
U,
{
className: "pl-0.5",
disabled: !a,
iconName: "chevron_right",
onClick: () => s()
}
)
]
}
);
}
function U({ className: e, disabled: t, iconClass: n, iconName: a, onClick: o }) {
return /* @__PURE__ */ r(
"button",
{
onClick: o,
onKeyDown: (s) => {
(s.key === "Enter" || s.key === " ") && (s.stopPropagation(), s.preventDefault(), o?.());
},
disabled: t,
className: h(
"cursor-pointer text-slate-300 pointer-events-auto p-2",
"disabled:text-slate-400 disabled:cursor-default"
),
children: /* @__PURE__ */ r(
"div",
{
className: h(
"bg-cyan-950",
"border-2 rounded-full w-8 h-6 flex items-center justify-center",
"border-current",
e
),
children: /* @__PURE__ */ r($, { name: a, className: n })
}
)
}
);
}
function ae(e) {
return e.toString().normalize("NFD").replace(new RegExp("\\p{M}", "gu"), "").toLowerCase().trim().replace(/\s+/g, "-").replace(/[^\w-]+/g, "").replace(/--+/g, "-");
}
function Te(e, t) {
return {
path: t === 0 ? "/" : `/${e.slug}/`,
children: e.slides.map((n, a) => {
const o = !t && !a ? "/" : `/${e.slug}/${n.slug}/`;
return {
index: a === 0,
Component: n.component,
path: o,
loader: () => ({ topic: e, topicIndex: t, slide: n, slideIndex: a }),
HydrateFallback: () => null
};
})
};
}
function He(e) {
return e.map(Te);
}
function _e({ LayoutComponent: e = oe, children: t }) {
return {
path: "/",
element: /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(ie, {}) }),
children: t
};
}
function qe({ slides: e, children: t }) {
return /* @__PURE__ */ r(te.Provider, { value: e, children: t });
}
function ct({
slides: e,
Layout: t = oe
}) {
const n = w(() => {
const a = _e({
LayoutComponent: t,
children: He(e)
}), o = new URL(document.baseURI).pathname || void 0;
return ue([a], { basename: o });
}, [t, e]);
return /* @__PURE__ */ r(qe, { slides: e, children: /* @__PURE__ */ r(de, { router: n }) });
}
function it(e) {
return e;
}
function ut({ title: e, slug: t, slides: n }) {
return {
title: e,
slug: t ?? ae(e),
slides: n
};
}
function Oe(e) {
return "slug" in e && e.slug ? e.slug : ae(e.title);
}
function We(e) {
return {
...e,
slug: Oe(e)
};
}
function dt(e) {
return {
...We(e),
type: "assignment"
};
}
function Je({ open: e, setOpen: t }) {
const n = X(null), a = I(), [o, s] = N(), c = K();
return x(() => {
if (!e) return;
const l = (u) => {
u.key === "Escape" && (u.preventDefault(), t(!1));
};
return window.addEventListener("keydown", l), () => {
window.removeEventListener("keydown", l);
};
}, [e, t]), x(() => {
if (!n.current || !e) return;
const u = document.querySelector("main");
if (u)
return u.inert = !0, () => {
u.inert = !1;
};
}, [e]), x(() => {
e && document.querySelector('a[data-current="true"]')?.focus();
}, [e]), /* @__PURE__ */ r(
"nav",
{
ref: n,
inert: !e,
"aria-hidden": !e,
"aria-label": "Slide navigation",
className: h("transition-all duration-400 relative z-20", {
"opacity-0 -translate-y-full": !e
}),
children: /* @__PURE__ */ r("ul", { className: "flex justify-center -mx-4", "aria-label": "Topics", children: a.map((l, u) => /* @__PURE__ */ g("li", { className: "w-34 flex flex-col", "aria-label": l.title, children: [
/* @__PURE__ */ r(
T,
{
to: l.path,
onClick: (f) => {
f.stopPropagation(), t(!1);
},
onKeyDown: (f) => {
(f.key === "Enter" || f.key === " ") && (f.target instanceof HTMLElement && f.target.blur(), f.preventDefault(), f.stopPropagation(), c(l.path), t(!1));
},
className: `
h-16 flex items-center justify-center text-center border p-1 rounded mx-2 mb-4
py-2.5 leading-[1.2] bg-slate-100/75 text-black font-bold px-2
transition hover:bg-slate-200 pointer-events-auto
`,
children: l.title
}
),
/* @__PURE__ */ r("ul", { className: "flex flex-col items-stretch gap-4 px-2", children: l.slides.map((f, i) => {
const p = u === o && i === s;
return /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
T,
{
to: f.path,
"data-current": p ? "true" : "false",
onKeyDown: (d) => {
(d.key === "Enter" || d.key === " ") && (d.target instanceof HTMLElement && d.target.blur(), d.preventDefault(), d.stopPropagation(), c(f.path), t(!1));
},
onClick: (d) => {
document.activeElement instanceof HTMLElement && document.activeElement.blur(), d.stopPropagation(), t(!1);
},
className: h(
"p-1 rounded transition hover:scale-105 w-full py-2.5 leading-[1.2] opacity-75 bg-slate-800 block text-center pointer-events-auto focus:outline-2 outline-sky-400",
{ "assignment-link": f.type === "assignment" },
p ? "border-2" : "border"
// {
// [isAssignment
// ? 'ring-2 ring-yellow-200 focus:ring-yellow-400'
// : 'ring-sky-500 ring-4']: isActive,
// },
),
children: f.title
}
) }, i);
}) })
] }, u)) })
}
);
}
function Ue() {
const [e, t] = re();
x(() => {
const n = (a) => {
(a.key === "ArrowRight" || a.key === " ") && t(), a.key === "ArrowLeft" && e();
};
return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
}, [t, e]), x(() => {
const n = (a) => {
a.target instanceof HTMLElement && a.target.closest("main") || (a.preventDefault(), a.pageX > window.innerWidth / 2 ? t() : e());
};
return window.addEventListener("click", n), () => window.removeEventListener("click", n);
}, [e, t]);
}
function Ze() {
const [e, t] = R(!1), n = (a) => {
a.stopPropagation(), document.activeElement instanceof HTMLElement && document.activeElement.blur(), t(!1);
};
return x(() => {
e ? (document.documentElement.classList.remove("overflow-auto"), document.documentElement.classList.add("overflow-hidden")) : (document.documentElement.classList.add("overflow-auto"), document.documentElement.classList.remove("overflow-hidden"));
}, [e]), Ue(), /* @__PURE__ */ g(
"div",
{
className: h(
"fixed left-0 top-0 h-full w-[100svw] px-6 py-2 pointer-events-none isolate z-20",
{
"before:-z-10 before:bg-slate-800 before:absolute before:inset-0 before:opacity-80 transition-opacity": e
}
),
children: [
/* @__PURE__ */ r(
"div",
{
onClick: n,
className: h(
"absolute left-0 top-0 h-full w-[100svw] -z-10",
e ? "pointer-events-auto" : "pointer-events-none"
),
"aria-hidden": "true"
}
),
/* @__PURE__ */ r(ze, { open: e, setOpen: t }),
/* @__PURE__ */ r(Je, { open: e, setOpen: t })
]
}
);
}
function oe({ children: e }) {
const { type: t } = $e() ?? {};
return /* @__PURE__ */ g(A, { children: [
/* @__PURE__ */ r("main", { className: "z-10 max-w-3xl p-12 w-full mx-auto bg-gray-950/50", "data-slide-type": t, children: /* @__PURE__ */ r(le, { components: { wrapper: Me }, children: e }) }),
/* @__PURE__ */ r(Ze, {})
] });
}
export {
tt as Checkbox,
nt as Code,
rt as Collapse,
at as ImagePreview,
ot as JsonViewer,
st as Keyboard,
oe as Layout,
$ as MuiIcon,
Ze as Nav,
Me as Prose,
ze as QuickBar,
Je as SlideNav,
qe as SlidesProvider,
ct as SlidesRouterProvider,
lt as Tooltip,
dt as createAssignment,
_e as createRootRoute,
We as createSlide,
it as createSlides,
ut as createTopic,
He as slidesToRoutes,
ae as slugify,
Te as topicToRoute,
Ue as useNavTriggers,
I as useSlides
};