@plitzi/sdk-elements 0.38.6 → 0.38.7

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.d.ts

@@ -43,6 +43,8 @@ declare const declaration: {
                 readonly base: {
                     readonly default: {
                         readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
+                        readonly 'min-height': "24px";
+                        readonly 'min-width': "24px";
                         readonly 'padding-right': "4px";
                         readonly 'padding-bottom': "4px";
                         readonly 'padding-left': "4px";

package/dist/elements/basic/Dropdown/DropdownPopup/declaration.mjs

@@ -37,6 +37,8 @@ var t = e()({
 			displayMode: "desktop",
 			style: { base: { default: {
 				"background-color": "light-dark(white, oklch(0.21 0.006 285.885))",
+				"min-height": "24px",
+				"min-width": "24px",
 				"padding-right": "4px",
 				"padding-bottom": "4px",
 				"padding-left": "4px",

package/dist/elements/basic/Dropdown/DropdownPopup/index.d.ts

@@ -42,6 +42,8 @@ declare const DropdownPopup: {
                 readonly base: {
                     readonly default: {
                         readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
+                        readonly 'min-height': "24px";
+                        readonly 'min-width': "24px";
                         readonly 'padding-right': "4px";
                         readonly 'padding-bottom': "4px";
                         readonly 'padding-left': "4px";

package/dist/elements/basic/Dropdown/index.d.ts

@@ -47,6 +47,8 @@ declare const Dropdown: {
                         readonly base: {
                             readonly default: {
                                 readonly 'background-color': "light-dark(white, oklch(0.21 0.006 285.885))";
+                                readonly 'min-height': "24px";
+                                readonly 'min-width': "24px";
                                 readonly 'padding-right': "4px";
                                 readonly 'padding-bottom': "4px";
                                 readonly 'padding-left': "4px";

package/dist/elements/basic/Heading/declaration.d.ts

@@ -47,7 +47,11 @@ declare const declaration: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {};
+                    readonly default: {
+                        readonly 'margin-top': "25px";
+                        readonly 'margin-bottom': "25px";
+                        readonly 'font-weight': 700;
+                    };
                 };
             };
             readonly subTypes: {

package/dist/elements/basic/Heading/declaration.mjs

@@ -44,7 +44,11 @@ var n = e()({
 		defaultStyle: {
 			name: "Heading",
 			displayMode: "desktop",
-			style: { base: { default: {} } },
+			style: { base: { default: {
+				"margin-top": "25px",
+				"margin-bottom": "25px",
+				"font-weight": 700
+			} } },
 			subTypes: {
 				h1: {
 					name: "H1 Heading",

package/dist/elements/basic/Heading/index.d.ts

@@ -46,7 +46,11 @@ declare const Heading: {
             readonly displayMode: "desktop";
             readonly style: {
                 readonly base: {
-                    readonly default: {};
+                    readonly default: {
+                        readonly 'margin-top': "25px";
+                        readonly 'margin-bottom': "25px";
+                        readonly 'font-weight': 700;
+                    };
                 };
             };
             readonly subTypes: {

package/dist/elements/basic/Link/Link.d.ts

@@ -32,8 +32,14 @@ export type LinkProps = {
     icon?: string;
     /** Which side of the words the icon sits on. */
     iconPlacement?: IconPlacement;
+    /**
+     * Where the link is current. `page` (the default): on the page it leads to and nowhere else. `section`: on that page
+     * and every page under its path — `/automations/runs` stays lit on `/automations/runs/42`, a journal's link on its
+     * articles — announced there as the current entry (`aria-current="true"`) rather than the current page.
+     */
+    current?: 'page' | 'section';
 };
-declare const Link: ({ ref, children, className, href, target, mode, hash, label, content, contentPlacement, icon, iconPlacement }: LinkProps) => import('react').JSX.Element;
+declare const Link: ({ ref, children, className, href, target, mode, hash, label, content, contentPlacement, icon, iconPlacement, current }: LinkProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<LinkProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Link/Link.mjs

@@ -2,7 +2,7 @@ import e from "../../../Element/hocs/withElement.mjs";
 import t from "../../../Element/hooks/useElement.mjs";
 import { RootElement as n } from "../../../Element/RootElement.mjs";
 import r from "../../../Element/ElementWords.mjs";
-import { isCurrentPage as i } from "./isCurrentPage.mjs";
+import { ariaCurrent as i } from "./ariaCurrent.mjs";
 import { useMemo as a } from "react";
 import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
 import { useSdkStore as s } from "@plitzi/sdk-shared/store";
@@ -11,84 +11,84 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "clsx";
 import { getPageFullPath as f } from "@plitzi/sdk-navigation/NavigationHelper";
 //#region src/elements/basic/Link/Link.tsx
-var p = ({ ref: e, children: p, className: m = "", href: h = "#", target: g = "self", mode: _ = "page", hash: v = "", label: y = "", content: b = "", contentPlacement: x = "after", icon: S = "", iconPlacement: C = "before" }) => {
-	let { style: w, definition: { styleSelectors: T } } = t(), { settings: { previewMode: E } } = o(), [[D, O, k, A, j, M]] = s([
+var p = ({ ref: e, children: p, className: m = "", href: h = "#", target: g = "self", mode: _ = "page", hash: v = "", label: y = "", content: b = "", contentPlacement: x = "after", icon: S = "", iconPlacement: C = "before", current: w = "page" }) => {
+	let { style: T, definition: { styleSelectors: E } } = t(), { settings: { previewMode: D } } = o(), [[O, k, A, j, M, N]] = s([
 		"pageDefinitions",
 		"schema.pageFolders",
 		"navigation.routeParams",
 		"navigation.queryParams",
 		"navigation.navigate",
 		"navigation.href"
-	]), N = a(() => {
+	]), P = a(() => {
 		if (_ === "external") return h;
 		if (_ === "internal") {
 			let e = `/${h}`.replaceAll(/[/]+/gim, "/");
 			try {
 				let t = c(e, {
-					...A,
-					...k
+					...j,
+					...A
 				}, !0);
 				return typeof t == "string" ? t : e;
 			} catch {}
 			return e;
 		}
-		return f(D, O, h, !0);
+		return f(O, k, h, !0);
 	}, [
 		_,
 		h,
-		D,
 		O,
-		A,
-		k
-	]), P = _ !== "external" && v ? `${N}#${v}` : N, F = _ !== "external" && i(N, M), I = (e) => {
-		if (!E) return;
+		k,
+		j,
+		A
+	]), F = _ !== "external" && v ? `${P}#${v}` : P, I = _ === "external" ? void 0 : i(P, N, w), L = (e) => {
+		if (!D) return;
 		e.stopPropagation();
 		let t = g !== "self" || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
-		(_ === "page" || _ === "internal") && !t && (e.preventDefault(), j(P));
-	}, L = a(() => {
+		(_ === "page" || _ === "internal") && !t && (e.preventDefault(), M(F));
+	}, R = a(() => {
 		let t = {
 			ref: e,
-			style: w,
+			style: T,
 			target: `_${g}`,
 			...g === "blank" ? { rel: "noopener noreferrer" } : {},
 			"aria-label": y || void 0,
-			"aria-current": F ? "page" : void 0,
+			"aria-current": I,
 			className: d("plitzi-component__link", m)
 		};
-		return E ? {
+		return D ? {
 			...t,
-			href: P
+			href: F
 		} : {
 			...t,
-			"href-disabled": P
+			"href-disabled": F
 		};
 	}, [
 		e,
-		w,
+		T,
 		g,
 		y,
-		F,
+		I,
 		m,
-		E,
-		P
+		D,
+		F
 	]);
 	return /* @__PURE__ */ u(n, {
 		tag: "a",
-		...L,
-		onClick: I,
+		...R,
+		onClick: L,
 		children: [
 			x === "before" && /* @__PURE__ */ l(r, {
 				content: b,
 				icon: S,
 				iconPlacement: C,
-				iconClassName: T.icon
+				iconClassName: E.icon
 			}),
 			p,
 			x === "after" && /* @__PURE__ */ l(r, {
 				content: b,
 				icon: S,
 				iconPlacement: C,
-				iconClassName: T.icon
+				iconClassName: E.icon
 			})
 		]
 	});

package/dist/elements/basic/Link/Settings.d.ts

@@ -8,7 +8,8 @@ type SettingsProps = {
     contentPlacement?: 'before' | 'after';
     icon?: string;
     iconPlacement?: 'before' | 'after';
+    current?: 'page' | 'section';
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ mode, href, hash, target, label, content, contentPlacement, icon, iconPlacement, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ mode, href, hash, target, label, content, contentPlacement, icon, iconPlacement, current, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/basic/Link/Settings.mjs

@@ -8,13 +8,13 @@ import { getPageFullPath as d } from "@plitzi/sdk-navigation/NavigationHelper";
 import f from "@plitzi/plitzi-ui/Input";
 import p from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Link/Settings.tsx
-var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", label: v = "", content: y = "", contentPlacement: b = "after", icon: x = "", iconPlacement: S = "before", onUpdate: C }) => {
-	let { contexts: { NetworkContext: w } } = a(), [[T, E, D]] = o([
+var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", label: v = "", content: y = "", contentPlacement: b = "after", icon: x = "", iconPlacement: S = "before", current: C = "page", onUpdate: w }) => {
+	let { contexts: { NetworkContext: T } } = a(), [[E, D, O]] = o([
 		"schema.flat",
 		"schema.pages",
 		"schema.pageFolders"
-	]), { server: O } = t(w), k = i(() => s(O, "domain", "https://subdomain.plitzi.app"), [O]), A = i(() => {
-		let e = c(T, E);
+	]), { server: k } = t(T), A = i(() => s(k, "domain", "https://subdomain.plitzi.app"), [k]), j = i(() => {
+		let e = c(E, D);
 		return Object.keys(e).reduce((t, n) => {
 			let r = e[n], i = s(r, "attributes.name", n), a = s(r, "attributes.default", !1);
 			return [...t, {
@@ -23,31 +23,31 @@ var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", la
 				defaultPage: a
 			}];
 		}, []);
-	}, [T, E]), j = n((e) => (t) => C?.(e, t), [C]), M = n((e) => C?.("href", e), [C]), N = n((e) => {
-		if (C?.("mode", e), e !== "page") {
-			C?.("href", "#");
+	}, [E, D]), M = n((e) => (t) => w?.(e, t), [w]), N = n((e) => w?.("href", e), [w]), P = n((e) => {
+		if (w?.("mode", e), e !== "page") {
+			w?.("href", "#");
 			return;
 		}
-		let t = A.find((e) => e.defaultPage);
-		t && C?.("href", t.key);
-	}, [C, A]);
+		let t = j.find((e) => e.defaultPage);
+		t && w?.("href", t.key);
+	}, [w, j]);
 	r(() => {
 		if (m === "page" && h === "#") {
-			let e = A.find((e) => e.defaultPage);
-			e && C?.("href", e.key);
+			let e = j.find((e) => e.defaultPage);
+			e && w?.("href", e.key);
 		}
 	}, [
 		m,
 		h,
-		A,
-		C
+		j,
+		w
 	]);
-	let P = i(() => m === "page" ? `${k}${d(T, D, h, !0)}` : h.replaceAll(/[/]+/gim, "/"), [
+	let F = i(() => m === "page" ? `${A}${d(E, O, h, !0)}` : h.replaceAll(/[/]+/gim, "/"), [
 		m,
-		T,
-		D,
+		E,
+		O,
 		h,
-		k
+		A
 	]);
 	return /* @__PURE__ */ u("div", {
 		className: "flex h-full flex-col gap-4 py-2",
@@ -56,13 +56,13 @@ var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", la
 				value: y,
 				label: "Content",
 				placeholder: "The link's words, without a text inside it",
-				onChange: j("content"),
+				onChange: M("content"),
 				size: "sm"
 			}),
 			/* @__PURE__ */ u(p, {
 				value: b,
 				label: "Content Placement",
-				onChange: j("contentPlacement"),
+				onChange: M("contentPlacement"),
 				size: "sm",
 				children: [/* @__PURE__ */ l("option", {
 					value: "before",
@@ -75,7 +75,7 @@ var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", la
 			/* @__PURE__ */ u(p, {
 				value: _,
 				label: "Target",
-				onChange: j("target"),
+				onChange: M("target"),
 				size: "sm",
 				children: [
 					/* @__PURE__ */ l("option", {
@@ -99,7 +99,7 @@ var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", la
 			/* @__PURE__ */ u(p, {
 				value: m,
 				label: "Mode",
-				onChange: N,
+				onChange: P,
 				size: "sm",
 				children: [
 					/* @__PURE__ */ l("option", {
@@ -119,7 +119,7 @@ var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", la
 			m !== "page" && /* @__PURE__ */ l(f, {
 				value: h,
 				label: "Url",
-				onChange: M,
+				onChange: N,
 				size: "sm"
 			}),
 			m === "page" && /* @__PURE__ */ u("div", {
@@ -127,40 +127,53 @@ var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", la
 				children: [/* @__PURE__ */ u(p, {
 					value: h,
 					label: "Url",
-					onChange: M,
+					onChange: N,
 					className: { inputContainer: "rounded-t" },
 					size: "sm",
 					children: [/* @__PURE__ */ l("option", {
 						value: "",
 						disabled: !0,
 						children: "Select a page"
-					}), A.map((e) => /* @__PURE__ */ l("option", {
+					}), j.map((e) => /* @__PURE__ */ l("option", {
 						value: e.key,
 						children: e.label
 					}, e.key))]
 				}), /* @__PURE__ */ l("div", {
 					className: "truncate rounded-b border-r border-b border-l border-gray-200 p-1 text-xs",
-					children: P
+					children: F
+				})]
+			}),
+			m !== "external" && /* @__PURE__ */ u(p, {
+				value: C,
+				label: "Current On",
+				onChange: M("current"),
+				size: "sm",
+				children: [/* @__PURE__ */ l("option", {
+					value: "page",
+					children: "Its Page"
+				}), /* @__PURE__ */ l("option", {
+					value: "section",
+					children: "Its Page And The Pages Under It"
 				})]
 			}),
 			m !== "external" && /* @__PURE__ */ l(f, {
 				value: g,
 				label: "Section",
 				placeholder: "An element's anchor, without the #",
-				onChange: j("hash"),
+				onChange: M("hash"),
 				size: "sm"
 			}),
 			/* @__PURE__ */ l(f, {
 				value: v,
 				label: "Accessible Name",
 				placeholder: "For a link that wraps a whole card",
-				onChange: j("label"),
+				onChange: M("label"),
 				size: "sm"
 			}),
 			/* @__PURE__ */ l(e, {
 				icon: x,
 				iconPlacement: S,
-				onUpdate: C
+				onUpdate: w
 			})
 		]
 	});

package/dist/elements/basic/Link/ariaCurrent.d.ts

@@ -0,0 +1,12 @@
+import { LinkProps } from './Link';
+/**
+ * What a link says of the page being shown, given its whole address (`navigation.href`): `'page'` when it leads to that
+ * page, `'true'` when it is the section that page is in — the entry of a menu lit for the pages under it — and nothing
+ * otherwise. The values `aria-current` takes: a screen reader announces the first as "current page" and the second as
+ * "current", since the link does not lead to the page itself.
+ *
+ * The fragment (`#plans`) is the same page, and so is any query the link does not name. A query it does name must be
+ * the one shown: `/?window=6h` and `/?window=24h` are one path, and with the path alone every window's link was the
+ * current one. Undefined while no address is known — nothing is current then.
+ */
+export declare const ariaCurrent: (path: string, location: string | undefined, current: NonNullable<LinkProps["current"]>) => "page" | "true" | undefined;

package/dist/elements/basic/Link/ariaCurrent.mjs

@@ -0,0 +1,11 @@
+//#region src/elements/basic/Link/ariaCurrent.ts
+var e = (e) => e.length > 1 ? e.replace(/\/+$/, "") : e, t = (e, t, n) => t === e || n === "section" && t.startsWith(e === "/" ? "/" : `${e}/`), n = (n, r, i) => {
+	if (r && n.startsWith("/")) try {
+		let a = new URL(r), o = new URL(n, r), s = e(decodeURI(a.pathname)), c = e(decodeURI(o.pathname));
+		return ![...o.searchParams].every(([e, t]) => a.searchParams.getAll(e).includes(t)) || !t(c, s, i) ? void 0 : s === c ? "page" : "true";
+	} catch {
+		return;
+	}
+};
+//#endregion
+export { n as ariaCurrent };

package/dist/elements/basic/Link/declaration.d.ts

@@ -9,6 +9,7 @@ declare const declaration: {
         readonly target: readonly string[];
         readonly contentPlacement: readonly string[];
         readonly iconPlacement: readonly string[];
+        readonly current: readonly string[];
     };
     readonly content: {
         readonly attributes: {
@@ -21,6 +22,7 @@ declare const declaration: {
             readonly contentPlacement: "after";
             readonly icon: "";
             readonly iconPlacement: "before";
+            readonly current: "page";
         };
         readonly definition: {
             readonly label: "Link";
@@ -61,7 +63,8 @@ declare const declaration: {
                 readonly base: {
                     readonly default: {
                         readonly display: "inline-block";
-                        readonly color: "#333";
+                        readonly color: "light-dark(#333, oklch(0.92 0.004 286.32))";
+                        readonly 'text-decoration': "none";
                         readonly cursor: "pointer";
                     };
                 };
@@ -76,6 +79,7 @@ declare const declaration: {
     target?: "self" | "blank" | "parent" | "top" | undefined;
     content?: string | undefined;
     icon?: string | undefined;
+    current?: "page" | "section" | undefined;
     iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
     contentPlacement?: "before" | "after" | undefined;
     hash?: string | undefined;

package/dist/elements/basic/Link/declaration.mjs

@@ -15,7 +15,8 @@ var n = e()({
 			"top"
 		]),
 		contentPlacement: t()(["before", "after"]),
-		iconPlacement: t()(["before", "after"])
+		iconPlacement: t()(["before", "after"]),
+		current: t()(["page", "section"])
 	},
 	content: {
 		attributes: {
@@ -27,12 +28,13 @@ var n = e()({
 			content: "",
 			contentPlacement: "after",
 			icon: "",
-			iconPlacement: "before"
+			iconPlacement: "before",
+			current: "page"
 		},
 		definition: {
 			label: "Link",
 			type: "link",
-			description: "Navigation. Moves the user between pages of the site or to an external URL (its `mode`/`href` decide which). Use this to go page-to-page rather than a button + interaction. Its words are its own `content` and an icon beside them its `icon` (Font Awesome classes) — no text or fontAwesome element inside it for them.",
+			description: "Navigation. Moves the user between pages of the site or to an external URL (its `mode`/`href` decide which). Use this to go page-to-page rather than a button + interaction. Its words are its own `content` and an icon beside them its `icon` (Font Awesome classes) — no text or fontAwesome element inside it for them. It marks itself current on the page it leads to (`aria-current`, the `current` style state); its `current` set to `section` keeps it current on every page under its path too — a menu entry for a section and its pages.",
 			items: [],
 			bindings: {},
 			styleSelectors: {
@@ -64,7 +66,8 @@ var n = e()({
 			displayMode: "desktop",
 			style: { base: { default: {
 				display: "inline-block",
-				color: "#333",
+				color: "light-dark(#333, oklch(0.92 0.004 286.32))",
+				"text-decoration": "none",
 				cursor: "pointer"
 			} } }
 		},

package/dist/elements/basic/Link/index.d.ts

@@ -8,6 +8,7 @@ declare const Link: {
         readonly target: readonly string[];
         readonly contentPlacement: readonly string[];
         readonly iconPlacement: readonly string[];
+        readonly current: readonly string[];
     };
     readonly content: {
         readonly attributes: {
@@ -20,6 +21,7 @@ declare const Link: {
             readonly contentPlacement: "after";
             readonly icon: "";
             readonly iconPlacement: "before";
+            readonly current: "page";
         };
         readonly definition: {
             readonly label: "Link";
@@ -60,7 +62,8 @@ declare const Link: {
                 readonly base: {
                     readonly default: {
                         readonly display: "inline-block";
-                        readonly color: "#333";
+                        readonly color: "light-dark(#333, oklch(0.92 0.004 286.32))";
+                        readonly 'text-decoration': "none";
                         readonly cursor: "pointer";
                     };
                 };
@@ -75,6 +78,7 @@ declare const Link: {
     target?: "self" | "blank" | "parent" | "top" | undefined;
     content?: string | undefined;
     icon?: string | undefined;
+    current?: "page" | "section" | undefined;
     iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
     contentPlacement?: "before" | "after" | undefined;
     hash?: string | undefined;

package/dist/elements/basic/Markdown/Markdown.d.ts

@@ -3,8 +3,13 @@ export type MarkdownProps = {
     ref?: RefObject<HTMLElement>;
     className?: string;
     content?: string;
+    /**
+     * Whether a heading offers a link to itself (`a.anchor`) before its words. `false` leaves the link out and keeps the
+     * heading's id, so `/page#its-words` still lands on it.
+     */
+    headingLinks?: boolean;
 };
-declare const Markdown: ({ ref, content, className }: MarkdownProps) => import('react').JSX.Element;
+declare const Markdown: ({ ref, content, className, headingLinks }: MarkdownProps) => import('react').JSX.Element;
 declare const _default: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<MarkdownProps>): import('react').JSX.Element;
     displayName: string;

package/dist/elements/basic/Markdown/Markdown.mjs

@@ -1,21 +1,25 @@
 import e from "../../../Element/hocs/withElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { jsx as r } from "react/jsx-runtime";
-import i from "clsx";
-import a from "@plitzi/plitzi-ui/Markdown";
-import { uniqueAnchor as o } from "@plitzi/sdk-shared/schema/anchor";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "../../../components/MarkdownDocument/index.mjs";
+import i from "./hooks/useMarkdownClassNames.mjs";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as o } from "react/jsx-runtime";
+import s from "clsx";
+import { uniqueAnchor as c } from "@plitzi/sdk-shared/schema/anchor";
 //#region src/elements/basic/Markdown/Markdown.tsx
-var s = ({ ref: e, content: s = "Markdown", className: c = "" }) => {
-	let { settings: { previewMode: l } } = n();
-	return /* @__PURE__ */ r(t, {
+var l = ({ ref: e, content: l = "Markdown", className: u = "", headingLinks: d = !0 }) => {
+	let { settings: { previewMode: f } } = a(), { definition: { styleSelectors: p } } = t(), m = i(p);
+	return /* @__PURE__ */ o(n, {
 		ref: e,
-		className: i("plitzi-component__markdown", { "plitzi-component__markdown--edit-mode": !l }, c),
-		children: /* @__PURE__ */ r(a, {
-			headingAnchor: o,
-			children: s
+		className: s("plitzi-component__markdown", { "plitzi-component__markdown--edit-mode": !f }, u),
+		children: /* @__PURE__ */ o(r, {
+			headingAnchor: c,
+			headingLinks: d,
+			classNames: m,
+			children: l
 		})
 	});
-}, c = e(s);
+}, u = e(l);
 //#endregion
-export { s as Markdown, c as default };
+export { l as Markdown, u as default };

package/dist/elements/basic/Markdown/Settings.d.ts

@@ -1,6 +1,7 @@
 type SettingsProps = {
     content?: string;
+    headingLinks?: boolean;
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ content, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ content, headingLinks, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

package/dist/elements/basic/Markdown/Settings.mjs

@@ -1,18 +1,24 @@
 import { useCallback as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import n from "@plitzi/plitzi-ui/TextArea";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/TextArea";
 //#region src/elements/basic/Markdown/Settings.tsx
-var r = ({ content: r = "Markdown", onUpdate: i }) => {
-	let a = e((e) => i?.("content", e), [i]);
-	return /* @__PURE__ */ t("div", {
+var a = ({ content: a = "Markdown", headingLinks: o = !0, onUpdate: s }) => {
+	let c = e((e) => s?.("content", e), [s]), l = e((e) => s?.("headingLinks", e.target.checked), [s]);
+	return /* @__PURE__ */ n("div", {
 		className: "flex h-full flex-col gap-4 py-2",
-		children: /* @__PURE__ */ t(n, {
-			value: r,
+		children: [/* @__PURE__ */ t(r, {
+			checked: o,
+			label: "Link Each Heading To Itself",
+			onChange: l,
+			size: "xs"
+		}), /* @__PURE__ */ t(i, {
+			value: a,
 			label: "Content",
 			className: "h-full",
-			onChange: a
-		})
+			onChange: c
+		})]
 	});
 };
 //#endregion
-export { r as default };
+export { a as default };