@kadal/deck 0.0.0-stage → 0.1.0

package/dist/components/bling.js

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { icons } from "lucide-react";
+//#region src/components/bling.tsx
+/**
+* ─────────────────────────────────────────────────────────────────────────────
+* BLING  —  the small things that make a slide feel designed
+* ─────────────────────────────────────────────────────────────────────────────
+*
+*   <GradientText>      a heading painted with the theme's accent ramp (or your colours)
+*   <Glass>             a frosted card with a gradient hairline border
+*   <Glow>              a soft radial light behind whatever sits in the same box
+*   <Chip>              a pill with a coloured dot — tags, statuses, levels
+*   <Icon name="…">     any lucide icon by its name, sized in em
+*   <Divider>           a hairline with an optional label
+*   <Ribbon>            a corner ribbon ("live", "draft")
+*   <Halo>              a number or word inside a soft ring
+*   <Shimmer>           text with a slow sheen passing over it
+*   <Blob>              a soft organic shape to tuck behind a figure
+*   <Tilt>              a card that leans toward the pointer
+*
+* Every one reads the theme's tokens, so they change with the theme selector.
+* ─────────────────────────────────────────────────────────────────────────────
+*/
+const cx = (...parts) => parts.filter(Boolean).join(" ");
+function GradientText({ children, from, to, angle = 90, className, as: Tag = "span" }) {
+	const style = {
+		"--gt-from": from ?? "var(--deck-accent)",
+		"--gt-to": to ?? "var(--deck-accent-2)",
+		"--gt-angle": `${angle}deg`
+	};
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx("deck-gradient-text", className),
+		style,
+		children
+	});
+}
+function Glass({ children, className, tone = "neutral", pad = "1em", glow = false, style }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("deck-glass", `tone-${tone}`, glow && "has-glow", className),
+		style: {
+			padding: pad,
+			...style
+		},
+		children
+	});
+}
+function Glow({ color, size = "60%", x = "50%", y = "50%", opacity = .35, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("deck-glow", className),
+		"aria-hidden": true,
+		style: {
+			background: `radial-gradient(circle at ${x} ${y}, ${color ?? "var(--deck-accent)"} 0, transparent ${size})`,
+			opacity
+		}
+	});
+}
+function Chip({ children, tone = "neutral", icon, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cx("deck-chip", `tone-${tone}`, className),
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			name: icon,
+			size: "1em"
+		}) : /* @__PURE__ */ jsx("i", { className: "deck-chip-dot" }), children]
+	});
+}
+function Icon({ name, size = "1em", color, strokeWidth = 1.75, className }) {
+	const pascal = name.replace(/(^|[-_ ])(\w)/g, (_m, _s, c) => c.toUpperCase());
+	const Cmp = icons[pascal];
+	if (!Cmp) return /* @__PURE__ */ jsx("span", {
+		className: "deck-icon-missing",
+		title: `No icon "${name}"`,
+		children: "▢"
+	});
+	return /* @__PURE__ */ jsx(Cmp, {
+		size,
+		color,
+		strokeWidth,
+		className: cx("deck-icon", className)
+	});
+}
+function Divider({ label, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("deck-divider", label ? "has-label" : "", className),
+		role: "separator",
+		children: label ? /* @__PURE__ */ jsx("span", { children: label }) : null
+	});
+}
+function Ribbon({ children, tone = "accent", corner = "right" }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("deck-ribbon", `tone-${tone}`, `corner-${corner}`),
+		children
+	});
+}
+function Halo({ children, tone = "accent", size = "3.2em", className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("deck-halo", `tone-${tone}`, className),
+		style: {
+			width: size,
+			height: size
+		},
+		children: /* @__PURE__ */ jsx("span", { children })
+	});
+}
+function Shimmer({ children, className, as: Tag = "span" }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx("deck-shimmer", className),
+		children
+	});
+}
+function Blob({ color, x = "50%", y = "50%", size = "40%", rotate = 0, opacity = .5, className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className: cx("deck-blob", className),
+		viewBox: "0 0 200 200",
+		"aria-hidden": true,
+		style: {
+			left: x,
+			top: y,
+			width: size,
+			transform: `translate(-50%, -50%) rotate(${rotate}deg)`,
+			opacity,
+			color: color ?? "var(--deck-accent-2)"
+		},
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M44.1,-63.6C57.4,-55.8,68.6,-43.4,74.7,-28.9C80.8,-14.4,81.9,2.1,77.5,16.9C73.1,31.7,63.3,44.7,50.7,54.5C38.2,64.4,22.9,71,6.7,72.1C-9.6,73.2,-26.8,68.8,-40.4,59.7C-54,50.6,-64,36.7,-70,20.9C-75.9,5.1,-77.8,-12.7,-71.7,-27.2C-65.6,-41.7,-51.5,-52.9,-37.2,-60.5C-22.9,-68.1,-8.4,-72.1,5.6,-79.9C19.7,-87.8,30.8,-71.4,44.1,-63.6Z",
+			transform: "translate(100 100)"
+		})
+	});
+}
+function Tilt({ children, className, max = 8 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("deck-tilt", className),
+		onPointerMove: (e) => {
+			const r = e.currentTarget.getBoundingClientRect();
+			const px = (e.clientX - r.left) / r.width - .5;
+			const py = (e.clientY - r.top) / r.height - .5;
+			e.currentTarget.style.transform = `perspective(900px) rotateY(${px * max * 2}deg) rotateX(${-py * max * 2}deg)`;
+		},
+		onPointerLeave: (e) => {
+			e.currentTarget.style.transform = "";
+		},
+		children
+	});
+}
+//#endregion
+export { Blob, Chip, Divider, Glass, Glow, GradientText, Halo, Icon, Ribbon, Shimmer, Tilt };

package/dist/components/content.d.ts

@@ -0,0 +1,232 @@
+import { ReactNode } from "react";
+//#region src/components/content.d.ts
+/** `$…$` in Markdown is rendered at build time; this is for JSX: `<Math tex="…" block />`. */
+export declare function Tex({ tex, block, children }: {
+  tex?: string;
+  block?: boolean;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/** A Mermaid diagram, rendered in the browser in the deck's colour scheme. */
+export declare function Mermaid({ children, scale, className }: {
+  children?: ReactNode;
+  scale?: number;
+  className?: string;
+}): import("react").JSX.Element;
+/** Speaker notes are lifted out at compile time; anything left renders nowhere. */
+export declare function Notes(_props: {
+  children?: ReactNode;
+}): null;
+/** Go to a slide by number (1-based), `h.v`, or id. */
+export declare function Link({ to, title, children, className }: {
+  to: string | number;
+  title?: string;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** The `a` mapping: in-deck `#/…` links navigate, external links open in a new tab. */
+export declare function Anchor({ href, children, ...rest }: {
+  href?: string;
+  children?: ReactNode;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+export interface TocProps {
+  columns?: number;
+  maxDepth?: number;
+  minDepth?: number;
+  mode?: "all" | "onlyCurrentTree" | "onlySiblings";
+  listClass?: string;
+}
+/** The table of contents from every slide's title and level (`hideInToc` slides skipped). */
+export declare function Toc({ columns, maxDepth, minDepth, mode, listClass }: TocProps): import("react").JSX.Element;
+/** The `img` mapping: lazy, optionally a lightbox on click (`preview`). */
+export declare function Image({ src, alt, preview, fit, className, ...rest }: {
+  src?: string;
+  alt?: string;
+  preview?: boolean | string;
+  fit?: string;
+  className?: string;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+export declare function Video({ src, autoplay, loop, muted, controls, className, ...rest }: {
+  src: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  controls?: boolean;
+  className?: string;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+export declare function Audio({ src, autoplay, loop, controls, className }: {
+  src: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  controls?: boolean;
+  className?: string;
+}): import("react").JSX.Element;
+/** An embedded page, loaded only while its slide is near (`preload` loads it earlier). */
+export declare function Iframe({ src, preload, className, title, poster, posterSize, scale }: {
+  src: string;
+  preload?: boolean;
+  className?: string;
+  title?: string;
+  /** Stands in for the page in print, the overview and the next-slide box, and while it loads. */
+  poster?: string;
+  posterSize?: readonly [number, number];
+  /** Render the page larger and shrink it: 0.5 gives a small pane the desktop layout. */
+  scale?: number;
+  [key: string]: unknown;
+}): import("react").JSX.Element;
+export declare function Youtube({ id, url, autoplay, start, className }: {
+  id?: string;
+  url?: string;
+  autoplay?: boolean;
+  start?: number;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Tweet({ id, url, scale }: {
+  id?: string | number;
+  url?: string;
+  scale?: number;
+}): import("react").JSX.Element;
+/** reveal.js's `r-stack`: children stacked at the same spot, for stepping through with clicks. */
+export declare function Stack({ children, className }: {
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** reveal.js's `r-stretch`: grows to fill the slide's remaining height. */
+export declare function Stretch({ children, className }: {
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** Columns: `<Cols cols="2fr 1fr">` or `<Cols n={3}>`, each child a column (or use `<Col>`). */
+export declare function Cols({ cols, n, gap, children, className, align }: {
+  cols?: string;
+  n?: number;
+  gap?: string;
+  children?: ReactNode;
+  className?: string;
+  align?: string;
+}): import("react").JSX.Element;
+export declare function Col({ children, className, span }: {
+  children?: ReactNode;
+  className?: string;
+  span?: number;
+}): import("react").JSX.Element;
+export declare function Grid({ cols, rows, gap, children, className }: {
+  cols?: number | string;
+  rows?: number | string;
+  gap?: string;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Center({ children, className }: {
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Spacer({ size }: {
+  size?: string;
+}): import("react").JSX.Element;
+/** reveal.js's `r-frame`. */
+export declare function Frame({ children, className }: {
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** Slidev's `<Transform>`: scale a block around an origin. */
+export declare function Transform({ scale, origin, children, className }: {
+  scale?: number;
+  origin?: string;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** Place a block at stage coordinates: `<Absolute x={100} y={200} w={400}>`. */
+export declare function Absolute({ x, y, w, h, rotate, children, className }: {
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  rotate?: number;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** reveal.js's `r-fit-text` and Slidev's `AutoFitText`: as big as fits, no bigger than `max`. */
+export declare function FitText({ children, max, min, className }: {
+  children?: ReactNode;
+  max?: number;
+  min?: number;
+  className?: string;
+}): import("react").JSX.Element;
+/** Slidev's `<Arrow>`: a straight arrow in stage coordinates. */
+export declare function Arrow({ x1, y1, x2, y2, width, color, twoWay, className }: {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  width?: number;
+  color?: string;
+  twoWay?: boolean;
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Kbd({ children }: {
+  children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Badge({ children, tone, className }: {
+  children?: ReactNode;
+  tone?: "neutral" | "accent" | "good" | "warn" | "bad";
+  className?: string;
+}): import("react").JSX.Element;
+export declare function Callout({ kind, title, children, className }: {
+  kind?: "info" | "tip" | "warn" | "danger" | "note";
+  title?: string;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** A number that counts up when its slide is shown (or at its click). */
+export declare function Counter({ value, from, duration, decimals, prefix, suffix, className }: {
+  value: number;
+  from?: number;
+  duration?: number;
+  decimals?: number;
+  prefix?: string;
+  suffix?: string;
+  className?: string;
+}): import("react").JSX.Element;
+/** Text that types itself out when the slide is shown. */
+export declare function Typewriter({ text, speed, className, cursor }: {
+  text: string;
+  speed?: number;
+  className?: string;
+  cursor?: boolean;
+}): import("react").JSX.Element;
+/** Text that resolves out of noise, glyph by glyph — the RLA deck's `EncryptedText`. */
+export declare function Encrypted({ text, speed, delay, className }: {
+  text: string;
+  speed?: number;
+  delay?: number;
+  className?: string;
+}): import("react").JSX.Element;
+/** A countdown or stopwatch that starts when its slide is shown. */
+export declare function Timer({ seconds, className }: {
+  seconds?: number;
+  className?: string;
+}): import("react").JSX.Element;
+/** A hand-drawn mark around inline content, drawn on its click: underline, circle, box, highlight. */
+export declare function Mark({ type, color, at, children, className }: {
+  type?: "underline" | "circle" | "box" | "highlight" | "strike";
+  color?: string;
+  at?: number | string;
+  children?: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+/** A quick burst of confetti when the slide (or its click) arrives. */
+export declare function Confetti({ at, count, duration }: {
+  at?: number | string;
+  count?: number;
+  duration?: number;
+}): import("react").JSX.Element;
+/** A QR code, rendered locally. */
+export declare function Qr({ value, size, className }: {
+  value: string;
+  size?: number;
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion