@soroush.tech/design-system 0.1.0

package/dist/Toolbar-B-W22Sk4.cjs

@@ -0,0 +1,459 @@
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_Flex = require("./Flex.cjs");
+const require_Button = require("./Button.cjs");
+const require_ButtonGroup = require("./ButtonGroup.cjs");
+const require_Typography = require("./Typography.cjs");
+const require_Icon = require("./Icon-1YtNCUKo.cjs");
+const require_MarkdownContext = require("./MarkdownContext-DSwjzpH8.cjs");
+const require_NativeSelect = require("./NativeSelect.cjs");
+const require_Popover = require("./Popover-CRDLmywF.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Markdown/utils/buildTableSnippet.ts
+/**
+* Builds a GFM table snippet with `rows` total rows (a header row plus `rows - 1` body rows)
+* and `cols` columns, wrapped in blank lines so it sits on its own block.
+*/
+function buildTableSnippet(rows, cols) {
+	const row = (cell) => `| ${Array.from({ length: cols }, (_, index) => cell(index)).join(" | ")} |`;
+	return `\n${[
+		row((index) => `Column ${index + 1}`),
+		row(() => "---"),
+		...Array.from({ length: rows - 1 }, () => row(() => "Cell"))
+	].join("\n")}\n`;
+}
+//#endregion
+//#region src/Markdown/utils/groupToolbarActions.ts
+/**
+* Splits actions into render segments: consecutive actions sharing a `group` id collapse into
+* one segment (rendered as a joined `ButtonGroup`); ungrouped actions each get their own.
+*/
+function groupToolbarActions(actions) {
+	const segments = [];
+	actions.forEach((action) => {
+		const current = segments.at(-1);
+		if (current && action.group !== void 0 && current[0].group === action.group) current.push(action);
+		else segments.push([action]);
+	});
+	return segments;
+}
+//#endregion
+//#region src/Markdown/const.ts
+const LIST_MARKER = /^(?:- \[[ xX]\] |- |\d+\. )/;
+/**
+* Every formatting action the toolbar exposes — one per markdown feature the `Markdown`
+* renderer supports (GFM + the component map in `Markdown.Preview`). Data-driven so the
+* toolbar and the transform logic stay in sync.
+*/
+const TOOLBAR_ACTIONS = [
+	{
+		id: "bold",
+		label: "B",
+		ariaLabel: "Bold",
+		emphasis: "bold",
+		group: "inline",
+		kind: "wrap",
+		prefix: "**",
+		suffix: "**",
+		placeholder: "bold text"
+	},
+	{
+		id: "italic",
+		label: "I",
+		ariaLabel: "Italic",
+		emphasis: "italic",
+		group: "inline",
+		kind: "wrap",
+		prefix: "_",
+		suffix: "_",
+		placeholder: "italic text"
+	},
+	{
+		id: "strikethrough",
+		label: "S",
+		ariaLabel: "Strikethrough",
+		emphasis: "strike",
+		group: "inline",
+		kind: "wrap",
+		prefix: "~~",
+		suffix: "~~",
+		placeholder: "struck text"
+	},
+	{
+		id: "quote",
+		label: "Quote",
+		ariaLabel: "Blockquote",
+		icon: "format_quote",
+		kind: "linePrefix",
+		linePrefix: "> ",
+		family: /^> /
+	},
+	{
+		id: "ul",
+		label: "List",
+		ariaLabel: "Bulleted list",
+		icon: "format_list_bulleted",
+		group: "list",
+		kind: "linePrefix",
+		linePrefix: "- ",
+		family: LIST_MARKER
+	},
+	{
+		id: "ol",
+		label: "Ordered",
+		ariaLabel: "Numbered list",
+		icon: "format_list_numbered",
+		group: "list",
+		kind: "linePrefix",
+		linePrefix: "1. ",
+		family: LIST_MARKER
+	},
+	{
+		id: "task",
+		label: "Task",
+		ariaLabel: "Task list",
+		icon: "checklist",
+		group: "list",
+		kind: "linePrefix",
+		linePrefix: "- [ ] ",
+		family: LIST_MARKER
+	},
+	{
+		id: "link",
+		label: "Link",
+		ariaLabel: "Link",
+		icon: "link",
+		kind: "wrap",
+		prefix: "[",
+		suffix: "](url)",
+		placeholder: "link text"
+	},
+	{
+		id: "image",
+		label: "Image",
+		ariaLabel: "Image",
+		icon: "image",
+		kind: "wrap",
+		prefix: "![",
+		suffix: "](url)",
+		placeholder: "alt text"
+	},
+	{
+		id: "hr",
+		label: "HR",
+		ariaLabel: "Horizontal rule",
+		kind: "insert",
+		snippet: "\n\n---\n\n"
+	}
+];
+/** Fence languages offered by the code-block select; `value` is appended after the opening ```. */
+const CODE_LANGUAGES = [
+	{
+		label: "Plain",
+		value: "text"
+	},
+	{
+		label: "HTML",
+		value: "html"
+	},
+	{
+		label: "CSS",
+		value: "css"
+	},
+	{
+		label: "JavaScript",
+		value: "js"
+	},
+	{
+		label: "TypeScript",
+		value: "ts"
+	},
+	{
+		label: "JSON",
+		value: "json"
+	},
+	{
+		label: "Bash",
+		value: "bash"
+	},
+	{
+		label: "Python",
+		value: "python"
+	},
+	{
+		label: "Markdown",
+		value: "md"
+	}
+];
+/** Inline `code` — rendered next to the code-block select so both code controls sit together. */
+const INLINE_CODE_ACTION = {
+	id: "inline-code",
+	label: "Code",
+	ariaLabel: "Inline code",
+	icon: "code",
+	kind: "wrap",
+	prefix: "`",
+	suffix: "`",
+	placeholder: "code"
+};
+/** Builds the fenced-code-block wrap action for a chosen `language`. */
+const codeBlockAction = (language) => ({
+	id: "code-block",
+	label: "Code block",
+	ariaLabel: "Code block",
+	kind: "wrap",
+	prefix: `\`\`\`${language}\n`,
+	suffix: "\n```",
+	placeholder: "code",
+	block: true
+});
+const HEADING_MARKER = /^#{1,6} /;
+const headingAction = (level) => ({
+	id: `h${level}`,
+	label: `H${level}`,
+	ariaLabel: `Heading ${level}`,
+	kind: "linePrefix",
+	linePrefix: `${"#".repeat(level)} `,
+	family: HEADING_MARKER,
+	toggle: false
+});
+/** Every heading level the `Markdown` renderer supports (h1–h6) — offered via the toolbar select. */
+const HEADING_ACTIONS = [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+].map(headingAction);
+//#endregion
+//#region src/Markdown/Toolbar/TablePicker.tsx
+/** Smallest grid shown, and the hard cap it grows to as the hover nears the edge. */
+const MIN_EXTENT = 8;
+const MAX_EXTENT = 20;
+const DEFAULT_EXTENT = {
+	rows: MIN_EXTENT,
+	cols: MIN_EXTENT
+};
+const growExtent = (current, hovered) => Math.min(MAX_EXTENT, Math.max(current, hovered + 1));
+const Cell = require_src.styled("button", {
+	name: "MarkdownToolbar",
+	slot: "tablePickerCell",
+	label: "MarkdownEditorTableCell",
+	shouldForwardProp: (prop) => prop !== "isActive"
+})(({ theme, isActive }) => ({
+	width: 16,
+	height: 16,
+	padding: 0,
+	margin: 0,
+	appearance: "none",
+	cursor: "pointer",
+	borderRadius: theme.radii.sm,
+	border: `${theme.borderWidths.thin} solid ${theme.border.light}`,
+	backgroundColor: isActive ? theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main : theme.background[require_themeDefault.themeDefault(theme, "inputBg", "terminal")]
+}));
+/** A "Table" trigger that opens a hover grid for choosing table dimensions. */
+function TablePicker({ onSelect }) {
+	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
+	const [hover, setHover] = (0, react.useState)({
+		rows: 0,
+		cols: 0
+	});
+	const [extent, setExtent] = (0, react.useState)(DEFAULT_EXTENT);
+	const open = anchorEl !== null;
+	const close = () => {
+		setAnchorEl(null);
+		setHover({
+			rows: 0,
+			cols: 0
+		});
+		setExtent(DEFAULT_EXTENT);
+	};
+	const hoverCell = (rows, cols) => {
+		setHover({
+			rows,
+			cols
+		});
+		setExtent((prev) => ({
+			rows: growExtent(prev.rows, rows),
+			cols: growExtent(prev.cols, cols)
+		}));
+	};
+	const pick = (rows, cols) => {
+		onSelect(rows, cols);
+		close();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		type: "button",
+		variant: "outlined",
+		size: "sm",
+		"aria-label": "Table",
+		"aria-haspopup": "grid",
+		"aria-expanded": open,
+		onClick: (event) => setAnchorEl(event.currentTarget),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+			name: "table",
+			size: "1.1rem"
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
+		open,
+		anchorEl,
+		onClose: close,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "left"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "left"
+		},
+		disableAriaHidden: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+			flexDirection: "column",
+			gap: 2,
+			p: 2,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+				flexDirection: "column",
+				gap: 1,
+				role: "grid",
+				"aria-label": "Table size",
+				children: Array.from({ length: extent.rows }, (_, r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Flex.Flex, {
+					flexDirection: "row",
+					gap: 1,
+					role: "row",
+					children: Array.from({ length: extent.cols }, (_, c) => {
+						const rows = r + 1;
+						const cols = c + 1;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Cell, {
+							type: "button",
+							role: "gridcell",
+							isActive: rows <= hover.rows && cols <= hover.cols,
+							"aria-label": `${rows} by ${cols}`,
+							onMouseEnter: () => hoverCell(rows, cols),
+							onFocus: () => hoverCell(rows, cols),
+							onClick: () => pick(rows, cols)
+						}, c);
+					})
+				}, r))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				variant: "caption",
+				color: "secondary",
+				align: "center",
+				m: 0,
+				children: hover.rows > 0 ? `${hover.rows} × ${hover.cols}` : "Select size"
+			})]
+		})
+	})] });
+}
+//#endregion
+//#region src/Markdown/Toolbar/Toolbar.tsx
+const HEADING_OPTIONS = HEADING_ACTIONS.map((action) => ({
+	label: action.label,
+	value: action.id
+}));
+const HEADING_BY_ID = Object.fromEntries(HEADING_ACTIONS.map((action) => [action.id, action]));
+const ToolbarRoot = require_src.styled(require_Flex.Flex, {
+	name: "MarkdownToolbar",
+	label: "MarkdownToolbar"
+})();
+const StrikeLabel = require_src.styled(require_Typography.Typography, {
+	name: "MarkdownToolbar",
+	slot: "strike",
+	label: "MarkdownStrike"
+})({ textDecoration: "line-through" });
+/** Renders a button's content: an icon, an emphasis-styled letter, or the plain label. */
+function ActionLabel({ action }) {
+	if (action.icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+		name: action.icon,
+		size: "1.1rem"
+	});
+	if (action.emphasis === "bold") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		as: "span",
+		variant: "inherit",
+		fontWeight: "extraBold",
+		children: action.label
+	});
+	if (action.emphasis === "italic") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		as: "span",
+		variant: "inherit",
+		fontStyle: "italic",
+		children: action.label
+	});
+	if (action.emphasis === "strike") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrikeLabel, {
+		as: "span",
+		variant: "inherit",
+		children: action.label
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: action.label });
+}
+/** Formatting buttons, heading + code-language selects, and the table-size picker. */
+function Toolbar() {
+	const { dispatch } = require_MarkdownContext.useMarkdownContext();
+	const renderButton = (action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		type: "button",
+		variant: "outlined",
+		size: "sm",
+		"aria-label": action.ariaLabel,
+		onClick: () => dispatch(action),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionLabel, { action })
+	}, action.id);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ToolbarRoot, {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: 1,
+		role: "toolbar",
+		"aria-label": "Markdown formatting",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NativeSelect.NativeSelect, {
+				size: "sm",
+				variant: "outlined",
+				placeholder: "Heading",
+				value: "",
+				options: HEADING_OPTIONS,
+				onChange: (value) => dispatch(HEADING_BY_ID[String(value)]),
+				selectProps: { "aria-label": "Heading level" }
+			}),
+			groupToolbarActions(TOOLBAR_ACTIONS).map((segment) => segment.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ButtonGroup.ButtonGroup, {
+				borderRadius: "sq",
+				size: "sm",
+				variant: "outlined",
+				children: segment.map(renderButton)
+			}, segment[0].id) : renderButton(segment[0])),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TablePicker, { onSelect: (rows, cols) => dispatch({
+				id: "table",
+				label: "Table",
+				ariaLabel: "Table",
+				kind: "insert",
+				snippet: buildTableSnippet(rows, cols)
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+				flexDirection: "row",
+				gap: 0,
+				alignItems: "stretch",
+				children: [renderButton(INLINE_CODE_ACTION), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NativeSelect.NativeSelect, {
+					size: "sm",
+					variant: "outlined",
+					placeholder: "Code",
+					value: "",
+					options: CODE_LANGUAGES,
+					onChange: (value) => dispatch(codeBlockAction(String(value))),
+					selectProps: { "aria-label": "Code block language" }
+				})]
+			})
+		]
+	});
+}
+//#endregion
+Object.defineProperty(exports, "TablePicker", {
+	enumerable: true,
+	get: function() {
+		return TablePicker;
+	}
+});
+Object.defineProperty(exports, "Toolbar", {
+	enumerable: true,
+	get: function() {
+		return Toolbar;
+	}
+});