deckjsx 0.3.0 → 0.4.0

package/dist/index.d.mts

@@ -1,5 +1,35 @@
-import { $ as ImageStyle, $t as SourceIdentity, A as CssFlexDirection, At as CompositionContext, B as CssJustifyContent, Bt as GraphNodeId, C as CssAlignContent, Ct as TextTabStopAlignment, D as CssBoxSizing, Dt as ViewProps, E as CssAspectRatio, Et as VerticalAlign, F as CssGridShorthand, Ft as SourceContextInput, G as CssVisibility, Gt as SemanticNode, H as CssObjectPosition, Ht as SemanticContainerNode, I as CssGridTemplate, It as SourceContextMapper, J as DeckOptions, Jt as SemanticRole, K as DeckJsxIntrinsicElements, Kt as SemanticNodeKind, L as CssGridTemplateAreas, Lt as AssetEntity, M as CssGridAutoFlow, Mt as CompositionSourceInternals, N as CssGridLine, Nt as SlideFactory, O as CssDisplay, Ot as ViewStyle, P as CssGridPlacement, Pt as SlideFactoryInput, Q as ImageProps, Qt as SemanticTextRunNode, R as CssGridTemplateShorthand, Rt as AssetEntityId, S as ContentJsxChild, St as TextStyle, T as CssAlignSelf, Tt as TextTabStopLength, U as CssOverflow, Ut as SemanticDocumentNode, V as CssJustifySelf, Vt as SemanticAuthorGraph, W as CssPosition, Wt as SemanticImageNode, X as ImageCropAuthoring, Xt as SemanticSlideNode, Y as DeckPointLength, Yt as SemanticShapeNode, Z as ImageCropValue, Zt as SemanticTextNode, _ as AuthorNodeProps, _t as StrokeLineCap, a as createElement, an as DiagnosticSeverity, at as IntrinsicViewTag, b as BorderStyle, bt as TextJsxChild, c as isSlideNode, cn as formatDiagnostics, ct as OutputConfig, d as Slide, dn as SemanticGraphDiagnosticError, dt as SlideProps, en as SourceOrigin, et as ImplementedBackendName, f as Text, ft as SlideStyle, g as AuthorNodeMap, gt as StrokeDashType, h as AuthorNodeKind, ht as StackAxis, i as Fragment, in as DiagnosticLabel, it as IntrinsicTextTag, j as CssFlexWrap, jt as CompositionSource, k as CssFlexBasis, kt as COMPOSITION_SOURCE, l as Image, ln as CompositionDiagnosticError, lt as ShapeProps, m as AuthorNode, mn as SourceSpan, mt as StackAlignment, nn as StyleEntityId, nt as IntrinsicImgProps, o as isAuthorNode, on as Diagnostics, ot as JsxNode, p as View, pn as JsxKey, pt as Spacing, q as DeckLength, qt as SemanticOrigin, rn as Diagnostic, rt as IntrinsicPProps, s as isContentNode, sn as formatDiagnostic, st as LayoutMode, tn as StyleEntity, tt as IntrinsicDivProps, u as Shape, un as DeckDiagnosticError, ut as ShapeStyle, v as AuthorNodePropsMap, vt as StrokeLineJoin, w as CssAlignItems, wt as TextTabStopAuthoring, x as ContentAuthorNode, xt as TextProps, y as BackendName, yt as TextFit, z as CssGridTrack, zt as BaseSemanticNode } from "./jsx-runtime-DauuRkY2.mjs";
+import { $ as ImageCropAuthoring, $t as SemanticDocumentNode, A as CssBoxSizing, At as TextRunStyle, B as CssGridTemplateAreas, Bt as CompositionContext, C as ClassNameValueArray, Cn as StyleDiagnosticError, Ct as StyleClassStyle, D as CssAlignItems, Dt as TextJsxChild, E as CssAlignContent, En as SourceSpan, Et as TextFit, F as CssGridAutoFlow, Ft as VerticalAlign, G as CssObjectPosition, Gt as SourceContextInput, H as CssGridTrack, Ht as CompositionSourceInternals, I as CssGridLine, It as ViewProps, J as CssVisibility, Jt as AssetEntityId, K as CssOverflow, Kt as SourceContextMapper, L as CssGridPlacement, Lt as ViewStyle, M as CssFlexBasis, Mt as TextTabStopAlignment, N as CssFlexDirection, Nt as TextTabStopAuthoring, O as CssAlignSelf, Ot as TextProps, P as CssFlexWrap, Pt as TextTabStopLength, Q as DeckPointLength, Qt as SemanticContainerNode, R as CssGridShorthand, Rt as defineStyles, S as ClassNameValue, Sn as SemanticGraphDiagnosticError, St as StyleClassDefinition, T as ContentJsxChild, Tn as JsxKey, Tt as StyleTargetSelector, U as CssJustifyContent, Ut as SlideFactory, V as CssGridTemplateShorthand, Vt as CompositionSource, W as CssJustifySelf, Wt as SlideFactoryInput, X as DeckLength, Xt as GraphNodeId, Y as DeckJsxIntrinsicElements, Yt as BaseSemanticNode, Z as DeckOptions, Zt as SemanticAuthorGraph, _ as AuthorNodeProps, _n as Diagnostics, _t as StackAlignment, a as createElement, an as SemanticShapeNode, at as IntrinsicImgProps, b as BorderStyle, bn as CompositionDiagnosticError, bt as StrokeLineCap, c as isSlideNode, cn as SemanticTextRunNode, ct as IntrinsicViewTag, d as Slide, dn as StyleClassRef, dt as OutputConfig, en as SemanticImageNode, et as ImageCropValue, f as Text, fn as StyleEntity, ft as ShapeProps, g as AuthorNodeMap, gn as DiagnosticSeverity, gt as Spacing, h as AuthorNodeKind, hn as DiagnosticLabel, ht as SlideStyle, i as Fragment, in as SemanticRole, it as IntrinsicDivProps, j as CssDisplay, jt as TextStyle, k as CssAspectRatio, kt as TextRunNodeProps, l as Image, ln as SourceIdentity, lt as JsxNode, m as AuthorNode, mn as Diagnostic, mt as SlideProps, nn as SemanticNodeKind, nt as ImageStyle, o as isAuthorNode, on as SemanticSlideNode, ot as IntrinsicPProps, p as View, pn as StyleEntityId, pt as ShapeStyle, q as CssPosition, qt as AssetEntity, rn as SemanticOrigin, rt as ImplementedBackendName, s as isContentNode, sn as SemanticTextNode, st as IntrinsicTextTag, tn as SemanticNode, tt as ImageProps, u as Shape, un as SourceOrigin, ut as LayoutMode, v as AuthorNodePropsMap, vn as formatDiagnostic, vt as StackAxis, w as ContentAuthorNode, wt as StyleSheet, x as ClassNameObject, xn as DeckDiagnosticError, xt as StrokeLineJoin, y as BackendName, yn as formatDiagnostics, yt as StrokeDashType, z as CssGridTemplate, zt as COMPOSITION_SOURCE } from "./jsx-runtime-BMKEs7aG.mjs";
 
+//#region src/style/resolve.d.ts
+type ResolvedStyleLayer = "default" | "theme" | "class" | "style";
+type ResolvedStyleSource = {
+  readonly layer: "default";
+} | {
+  readonly layer: "theme";
+} | {
+  readonly layer: "class";
+  readonly className: string;
+  readonly stylesheetIndex: number;
+  readonly ruleIndex: number;
+  readonly selector: string;
+} | {
+  readonly layer: "style";
+};
+type ResolvedStyleProperty = {
+  readonly value: unknown;
+  readonly source: ResolvedStyleSource;
+};
+type ResolvedStyle = {
+  readonly style: Readonly<Record<string, unknown>>;
+  readonly properties: Readonly<Record<string, ResolvedStyleProperty>>;
+  readonly appliedClasses: readonly ResolvedStyleSource[];
+};
+type ResolvedStyleMap = ReadonlyMap<StyleEntityId, ResolvedStyle>;
+type StyleResolutionResult = {
+  readonly resolvedStyles: ResolvedStyleMap;
+  readonly diagnostics: Diagnostics;
+};
+//#endregion
 //#region src/ir/index.d.ts
 type PresentationIR = {
   version: "0.1";
@@ -247,6 +277,7 @@ type CompileMode = "inspect" | "strict";
 type CompileInspectResult = {
   readonly graph?: SemanticAuthorGraph;
   readonly diagnostics: Diagnostics;
+  readonly resolvedStyles?: ResolvedStyleMap;
 };
 type WithSource<TSourceContext> = [TSourceContext] extends [void] ? never : (sourceContext: TSourceContext) => BoundSource<TSourceContext>;
 declare class BoundSource<TSourceContext = void> implements CompositionSource<TSourceContext> {
@@ -269,6 +300,7 @@ declare class Deck<TSourceContext = void> implements CompositionSource<TSourceCo
   constructor(options: DeckOptions);
   get options(): DeckOptions;
   [COMPOSITION_SOURCE](): CompositionSourceInternals<TSourceContext>;
+  useStyles(stylesheet: StyleSheet): this;
   add(slide: SlideFactory<TSourceContext>): this;
   mount<TChildContext>(sourceKey: string, child: Deck<TChildContext>, ...context: [TChildContext] extends [void] ? [] : [sourceContext: SourceContextInput<TSourceContext, TChildContext>]): this;
   mount<TChildContext>(sourceKey: string, child: BoundSource<TChildContext>): this;
@@ -304,4 +336,4 @@ declare global {
   }
 }
 //#endregion
-export { type AssetEntity, type AssetEntityId, type AuthorNode, type AuthorNodeKind, type AuthorNodeMap, type AuthorNodeProps, type AuthorNodePropsMap, type BackendArtifact, type BackendName, type BackgroundImageLayerIR, type BackgroundLayerIR, type BaseNodeIR, type BaseSemanticNode, type BorderStyle, type BoundSource, type CompileBackend, type CompileInspectResult, type CompileMode, type CompositionContext, CompositionDiagnosticError, type ContentAuthorNode, type ContentJsxChild, type CssAlignContent, type CssAlignItems, type CssAlignSelf, type CssAspectRatio, type CssBoxSizing, type CssDisplay, type CssFlexBasis, type CssFlexDirection, type CssFlexWrap, type CssGridAutoFlow, type CssGridLine, type CssGridPlacement, type CssGridShorthand, type CssGridTemplate, type CssGridTemplateAreas, type CssGridTemplateShorthand, type CssGridTrack, type CssJustifyContent, type CssJustifySelf, type CssObjectPosition, type CssOverflow, type CssPosition, type CssVisibility, Deck, DeckDiagnosticError, type DeckJsxIntrinsicElements, type DeckLength, type DeckOptions, type DeckPointLength, type Diagnostic, type DiagnosticLabel, type DiagnosticSeverity, type Diagnostics, EMU_PER_INCH, type EdgeStrokeIR, type FillIR, Fragment, type FrameIR, type GraphNodeId, type GroupIR, type HyperlinkIR, Image, type ImageCropAuthoring, type ImageCropIR, type ImageCropValue, type ImageIR, type ImageProps, type ImageSourceIR, type ImageStyle, type ImplementedBackendName, type IntrinsicDivProps, type IntrinsicImgProps, type IntrinsicPProps, type IntrinsicTextTag, type IntrinsicViewTag, type JsxKey, type JsxNode, type LayoutMode, type LinearGradientFillIR, type LinearGradientStopIR, type NodeIR, type ObjectPositionIR, type OutputConfig, POINTS_PER_INCH, type PresentationIR, type RadialGradientFillIR, type SemanticAuthorGraph, type SemanticContainerNode, type SemanticDocumentNode, SemanticGraphDiagnosticError, type SemanticImageNode, type SemanticNode, type SemanticNodeKind, type SemanticOrigin, type SemanticRole, type SemanticShapeNode, type SemanticSlideNode, type SemanticTextNode, type SemanticTextRunNode, type ShadowIR, Shape, type ShapeIR, type ShapeProps, type ShapeStyle, type SizeIR, Slide, type SlideFactory, type SlideFactoryInput, type SlideIR, type SlideProps, type SlideStyle, type SolidFillIR, type SourceContextMapper, type SourceIdentity, type SourceOrigin, type SourceSpan, type Spacing, type StackAlignment, type StackAxis, type StrokeDashType, type StrokeIR, type StrokeLineCap, type StrokeLineJoin, type StyleEntity, type StyleEntityId, Text, type TextBulletListIR, type TextContentIR, type TextFit, type TextIR, type TextJsxChild, type TextListIR, type TextNoListIR, type TextNumberListIR, type TextProps, type TextRunIR, type TextStyle, type TextStyleIR, type TextTabStopAlignment, type TextTabStopAuthoring, type TextTabStopIR, type TextTabStopLength, type VerticalAlign, View, type ViewProps, type ViewStyle, createElement, formatDiagnostic, formatDiagnostics, isAuthorNode, isContentNode, isSlideNode, pptxgenjsBackend };
+export { type AssetEntity, type AssetEntityId, type AuthorNode, type AuthorNodeKind, type AuthorNodeMap, type AuthorNodeProps, type AuthorNodePropsMap, type BackendArtifact, type BackendName, type BackgroundImageLayerIR, type BackgroundLayerIR, type BaseNodeIR, type BaseSemanticNode, type BorderStyle, type BoundSource, type ClassNameObject, type ClassNameValue, type ClassNameValueArray, type CompileBackend, type CompileInspectResult, type CompileMode, type CompositionContext, CompositionDiagnosticError, type ContentAuthorNode, type ContentJsxChild, type CssAlignContent, type CssAlignItems, type CssAlignSelf, type CssAspectRatio, type CssBoxSizing, type CssDisplay, type CssFlexBasis, type CssFlexDirection, type CssFlexWrap, type CssGridAutoFlow, type CssGridLine, type CssGridPlacement, type CssGridShorthand, type CssGridTemplate, type CssGridTemplateAreas, type CssGridTemplateShorthand, type CssGridTrack, type CssJustifyContent, type CssJustifySelf, type CssObjectPosition, type CssOverflow, type CssPosition, type CssVisibility, Deck, DeckDiagnosticError, type DeckJsxIntrinsicElements, type DeckLength, type DeckOptions, type DeckPointLength, type Diagnostic, type DiagnosticLabel, type DiagnosticSeverity, type Diagnostics, EMU_PER_INCH, type EdgeStrokeIR, type FillIR, Fragment, type FrameIR, type GraphNodeId, type GroupIR, type HyperlinkIR, Image, type ImageCropAuthoring, type ImageCropIR, type ImageCropValue, type ImageIR, type ImageProps, type ImageSourceIR, type ImageStyle, type ImplementedBackendName, type IntrinsicDivProps, type IntrinsicImgProps, type IntrinsicPProps, type IntrinsicTextTag, type IntrinsicViewTag, type JsxKey, type JsxNode, type LayoutMode, type LinearGradientFillIR, type LinearGradientStopIR, type NodeIR, type ObjectPositionIR, type OutputConfig, POINTS_PER_INCH, type PresentationIR, type RadialGradientFillIR, type ResolvedStyle, type ResolvedStyleLayer, type ResolvedStyleMap, type ResolvedStyleProperty, type ResolvedStyleSource, type SemanticAuthorGraph, type SemanticContainerNode, type SemanticDocumentNode, SemanticGraphDiagnosticError, type SemanticImageNode, type SemanticNode, type SemanticNodeKind, type SemanticOrigin, type SemanticRole, type SemanticShapeNode, type SemanticSlideNode, type SemanticTextNode, type SemanticTextRunNode, type ShadowIR, Shape, type ShapeIR, type ShapeProps, type ShapeStyle, type SizeIR, Slide, type SlideFactory, type SlideFactoryInput, type SlideIR, type SlideProps, type SlideStyle, type SolidFillIR, type SourceContextMapper, type SourceIdentity, type SourceOrigin, type SourceSpan, type Spacing, type StackAlignment, type StackAxis, type StrokeDashType, type StrokeIR, type StrokeLineCap, type StrokeLineJoin, type StyleClassDefinition, type StyleClassRef, type StyleClassStyle, StyleDiagnosticError, type StyleEntity, type StyleEntityId, type StyleResolutionResult, type StyleSheet, type StyleTargetSelector, Text, type TextBulletListIR, type TextContentIR, type TextFit, type TextIR, type TextJsxChild, type TextListIR, type TextNoListIR, type TextNumberListIR, type TextProps, type TextRunIR, type TextRunNodeProps, type TextRunStyle, type TextStyle, type TextStyleIR, type TextTabStopAlignment, type TextTabStopAuthoring, type TextTabStopIR, type TextTabStopLength, type VerticalAlign, View, type ViewProps, type ViewStyle, createElement, defineStyles, formatDiagnostic, formatDiagnostics, isAuthorNode, isContentNode, isSlideNode, pptxgenjsBackend };

package/dist/index.mjs

@@ -28,6 +28,11 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 var __require = /* @__PURE__ */ createRequire(import.meta.url);
 //#endregion
+//#region src/authoring/index.ts
+function defineStyles(stylesheet) {
+	return stylesheet;
+}
+//#endregion
 //#region src/types.ts
 const EMU_PER_INCH = 914400;
 const POINTS_PER_INCH = 72;
@@ -4189,6 +4194,12 @@ var CompositionDiagnosticError = class extends DeckDiagnosticError {
 		this.name = "CompositionDiagnosticError";
 	}
 };
+var StyleDiagnosticError = class extends DeckDiagnosticError {
+	constructor(diagnostics) {
+		super(formatDiagnostics(diagnostics), diagnostics);
+		this.name = "StyleDiagnosticError";
+	}
+};
 //#endregion
 //#region src/diagnostics/index.ts
 function createDiagnostics(items = []) {
@@ -4402,6 +4413,7 @@ function resolveSource(source, context) {
 	return {
 		source: context.source,
 		sourceIdentityMaterial: context.sourceIdentityMaterial,
+		stylesheets: sourceState.stylesheets,
 		context: effectiveContext,
 		entries,
 		slideCount,
@@ -4440,6 +4452,7 @@ function flattenPlan(plan, deckTotalSlides, deckSlideIndex, roots, diagnostics)
 			root,
 			source: plan.source,
 			sourceIdentityMaterial: plan.sourceIdentityMaterial,
+			stylesheets: plan.stylesheets,
 			path: entry.path,
 			composition,
 			slotOrigins: plan.slotOrigins
@@ -4581,21 +4594,53 @@ function textOriginFor(node, path, context) {
 		...node.sourceSpan ? { sourceSpan: node.sourceSpan } : {}
 	};
 }
-function propsWithoutStyle(props) {
-	const { style: _style, children: _children, ...direct } = props;
-	return Object.keys(direct).length === 0 ? void 0 : direct;
+function collectClassNames(value, names) {
+	if (value === false || value === null || value === void 0) return;
+	if (typeof value === "string") {
+		names.push(...value.trim().split(/\s+/).filter(Boolean));
+		return;
+	}
+	if (Array.isArray(value)) {
+		value.forEach((item) => collectClassNames(item, names));
+		return;
+	}
+	if (typeof value === "object") Object.entries(value).forEach(([name, enabled]) => {
+		if (enabled === true) collectClassNames(name, names);
+	});
+}
+function classRefsFor(value) {
+	const names = [];
+	collectClassNames(value, names);
+	return names.length === 0 ? void 0 : names.map((name, index) => ({
+		name,
+		index
+	}));
+}
+function directStyleProps(props) {
+	const { children: _children, className: _className, data: _data, name: _name, shape: _shape, src: _src, style: _style, ...directStyle } = props;
+	return Object.keys(directStyle).length === 0 ? void 0 : directStyle;
+}
+function mergedAuthoredStyle(props) {
+	const directStyle = directStyleProps(props);
+	const inlineStyle = props.style;
+	if (directStyle === void 0) return inlineStyle;
+	if (inlineStyle !== void 0 && (typeof inlineStyle !== "object" || inlineStyle === null || Array.isArray(inlineStyle))) return inlineStyle;
+	return {
+		...directStyle,
+		...inlineStyle
+	};
 }
 function styleRefFor(state, idMaterial, target, props) {
-	const style = props.style;
-	const direct = propsWithoutStyle(props);
-	if (style === void 0 && direct === void 0) return;
+	const style = mergedAuthoredStyle(props);
+	const classRefs = classRefsFor(props.className);
+	if (style === void 0 && classRefs === void 0) return;
 	const id = styleEntityId(idMaterial);
 	state.styles.set(id, {
 		id,
 		target,
 		authored: {
 			...style !== void 0 ? { style } : {},
-			...direct !== void 0 ? { direct } : {}
+			...classRefs !== void 0 ? { classRefs } : {}
 		}
 	});
 	return id;
@@ -4851,6 +4896,7 @@ function asComposedRoot(root, index) {
 		root,
 		source: rootSource(),
 		sourceIdentityMaterial: ["source", "root"],
+		stylesheets: [],
 		path: `document > slideFactory[${index}]`,
 		composition: {
 			slideIndex: index,
@@ -4910,6 +4956,237 @@ function buildSemanticAuthorGraph(roots) {
 	};
 }
 //#endregion
+//#region src/style/resolve.ts
+function sourceKeyFor(source) {
+	return !source || source.kind === "root" ? "root" : source.sourceIdentity;
+}
+function classesBySource(roots) {
+	const stylesheets = /* @__PURE__ */ new Map();
+	roots.forEach((root) => {
+		const key = sourceKeyFor(root.source);
+		if (!stylesheets.has(key)) stylesheets.set(key, root.stylesheets);
+	});
+	return stylesheets;
+}
+function isTargetedDefinition(definition) {
+	return typeof definition === "object" && definition !== null && "style" in definition && typeof definition.style === "object" && definition.style !== null;
+}
+function styleObjectFor(definition) {
+	return isTargetedDefinition(definition) ? definition.style : definition;
+}
+function targetsFor(definition) {
+	if (!isTargetedDefinition(definition) || definition.target === void 0) return;
+	return typeof definition.target === "string" ? [definition.target] : definition.target;
+}
+function invalidClassNameReason(name) {
+	if (name.trim().length === 0) return "Style Class names must not be empty.";
+	if (/\s/.test(name)) return "Style Class names must not contain whitespace.";
+	if (name.includes("/")) return "Style Class names must not contain /.";
+}
+function styleDiagnostic(input) {
+	return diagnostic({
+		severity: "error",
+		code: input.code,
+		title: input.title,
+		message: input.message,
+		labels: [{
+			path: input.path,
+			message: input.message
+		}],
+		...input.help ? { help: input.help } : {}
+	});
+}
+function compareSpecificity(left, right) {
+	return left[0] - right[0] || left[1] - right[1] || left[2] - right[2];
+}
+function parseSelector(selector) {
+	const value = selector.trim();
+	if (value.length === 0 || /[\s>+~#:[\],*]/.test(value)) return;
+	const tag = value.match(/^[a-z][a-z0-9-]*/)?.[0];
+	const rest = tag ? value.slice(tag.length) : value;
+	if (rest.length === 0) return {
+		...tag ? { tag } : {},
+		classes: [],
+		specificity: [
+			0,
+			0,
+			tag ? 1 : 0
+		]
+	};
+	const classMatches = [...rest.matchAll(/\.([_a-zA-Z-][_a-zA-Z0-9-]*)/g)];
+	if (classMatches.map((match) => match[0]).join("") !== rest || classMatches.length === 0) return;
+	return {
+		...tag ? { tag } : {},
+		classes: classMatches.map((match) => match[1]),
+		specificity: [
+			0,
+			classMatches.length,
+			tag ? 1 : 0
+		]
+	};
+}
+function selectorFor(className, target) {
+	if (target === void 0) return `.${className}`;
+	return target;
+}
+function effectiveSpecificity(className, selector) {
+	const includesClassName = selector.classes.includes(className);
+	return [
+		selector.specificity[0],
+		selector.specificity[1] + (includesClassName ? 0 : 1),
+		selector.specificity[2]
+	];
+}
+function selectorMatches(className, selector, node, activeClassNames) {
+	if (!activeClassNames.has(className)) return false;
+	if (selector.tag !== void 0 && node.authoredTag !== selector.tag) return false;
+	return selector.classes.every((name) => activeClassNames.has(name));
+}
+function registerStylesheets(sourceKey, stylesheets, diagnostics) {
+	const classes = /* @__PURE__ */ new Map();
+	let ruleIndex = 0;
+	stylesheets?.forEach((stylesheet, stylesheetIndex) => {
+		Object.entries(stylesheet.classes).forEach(([className, definition]) => {
+			const path = `source:${sourceKey} > stylesheet[${stylesheetIndex}].classes.${className}`;
+			const invalidReason = invalidClassNameReason(className);
+			if (invalidReason) {
+				diagnostics.push(styleDiagnostic({
+					code: "E_STYLE_INVALID_CLASS_NAME",
+					title: "invalid style class name",
+					path,
+					message: invalidReason
+				}));
+				return;
+			}
+			const list = classes.get(className) ?? [];
+			classes.set(className, [...list, {
+				className,
+				definition,
+				stylesheetIndex,
+				ruleIndex: ruleIndex++,
+				path
+			}]);
+		});
+	});
+	return classes;
+}
+function resolveClassMatches(node, entity, registry, diagnostics) {
+	const classRefs = entity.authored.classRefs ?? [];
+	const activeClassNames = new Set(classRefs.map((ref) => ref.name));
+	const matched = [];
+	[...activeClassNames].forEach((className) => {
+		const registrations = registry.get(className);
+		if (!registrations || registrations.length === 0) {
+			diagnostics.push(styleDiagnostic({
+				code: "E_STYLE_UNKNOWN_CLASS",
+				title: "unknown style class",
+				path: node.origin.path,
+				message: `Style Class "${className}" is referenced but is not defined in this source.`,
+				help: ["Register a stylesheet with deck.useStyles() on the same Deck source."]
+			}));
+			return;
+		}
+		const before = matched.length;
+		let hasSelectorDiagnostic = false;
+		registrations.forEach((registration) => {
+			const targets = targetsFor(registration.definition);
+			(targets === void 0 ? [void 0] : targets).forEach((target) => {
+				const selectorText = selectorFor(className, target);
+				const selector = parseSelector(selectorText);
+				if (!selector) {
+					hasSelectorDiagnostic = true;
+					diagnostics.push(styleDiagnostic({
+						code: "E_STYLE_UNSUPPORTED_SELECTOR",
+						title: "unsupported stylesheet selector",
+						path: registration.path,
+						message: `Selector "${selectorText}" is not supported in v0.4.0.`,
+						help: ["Use a simple class selector such as .title or a compound selector such as p.title."]
+					}));
+					return;
+				}
+				if (!selectorMatches(className, selector, node, activeClassNames)) return;
+				matched.push({
+					registration,
+					selector: selectorText,
+					specificity: effectiveSpecificity(className, selector),
+					style: styleObjectFor(registration.definition)
+				});
+			});
+		});
+		if (matched.length === before && !hasSelectorDiagnostic) diagnostics.push(styleDiagnostic({
+			code: "E_STYLE_TARGET_MISMATCH",
+			title: "style class target does not match element",
+			path: node.origin.path,
+			message: `Style Class "${className}" is defined but no target matches this element.`,
+			help: ["Adjust the class target selector or move the className to a matching element."]
+		}));
+	});
+	return matched.sort((left, right) => {
+		return compareSpecificity(left.specificity, right.specificity) || left.registration.ruleIndex - right.registration.ruleIndex;
+	});
+}
+function applyProperties(style, source, properties) {
+	Object.entries(style).forEach(([key, value]) => {
+		properties[key] = {
+			value,
+			source
+		};
+	});
+}
+function resolvedStyleFor(node, entity, registry, diagnostics) {
+	const properties = {};
+	const appliedClasses = [];
+	resolveClassMatches(node, entity, registry, diagnostics).forEach((match) => {
+		const source = {
+			layer: "class",
+			className: match.registration.className,
+			stylesheetIndex: match.registration.stylesheetIndex,
+			ruleIndex: match.registration.ruleIndex,
+			selector: match.selector
+		};
+		appliedClasses.push(source);
+		applyProperties(match.style, source, properties);
+	});
+	if (typeof entity.authored.style === "object" && entity.authored.style !== null) applyProperties(entity.authored.style, { layer: "style" }, properties);
+	return {
+		style: Object.fromEntries(Object.entries(properties).map(([key, property]) => [key, property.value])),
+		properties,
+		appliedClasses
+	};
+}
+function nodeByStyleRef(graph) {
+	const nodes = /* @__PURE__ */ new Map();
+	graph.nodes.forEach((node) => {
+		if (node.styleRef) nodes.set(node.styleRef, node);
+	});
+	return nodes;
+}
+function resolveStyles(graph, roots) {
+	const diagnostics = [];
+	const stylesheets = classesBySource(roots);
+	const registries = /* @__PURE__ */ new Map();
+	const nodes = nodeByStyleRef(graph);
+	const resolvedStyles = /* @__PURE__ */ new Map();
+	stylesheets.forEach((sourceStylesheets, sourceKey) => {
+		registries.set(sourceKey, registerStylesheets(sourceKey, sourceStylesheets, diagnostics));
+	});
+	graph.styles.forEach((entity, id) => {
+		const node = nodes.get(id);
+		if (!node) return;
+		const sourceKey = sourceKeyFor(node.origin.source);
+		let registry = registries.get(sourceKey);
+		if (!registry) {
+			registry = registerStylesheets(sourceKey, stylesheets.get(sourceKey), diagnostics);
+			registries.set(sourceKey, registry);
+		}
+		resolvedStyles.set(id, resolvedStyleFor(node, entity, registry, diagnostics));
+	});
+	return {
+		resolvedStyles,
+		diagnostics: createDiagnostics(diagnostics)
+	};
+}
+//#endregion
 //#region node_modules/inherits/inherits_browser.js
 var require_inherits_browser = /* @__PURE__ */ __commonJSMin(((exports, module) => {
 	if (typeof Object.create === "function") module.exports = function inherits(ctor, superCtor) {
@@ -16044,6 +16321,9 @@ function directSlideFactories(entries) {
 function mountedSourceError() {
 	return /* @__PURE__ */ new Error("Mounted sources are supported by compile() only until the output pipeline supports graph composition.");
 }
+function combineDiagnostics(...diagnostics) {
+	return createDiagnostics(diagnostics.flatMap((item) => item.items));
+}
 function compileSource(source, config = {}) {
 	const composition = resolveComposition(source);
 	if (composition.diagnostics.hasErrors) {
@@ -16051,8 +16331,15 @@ function compileSource(source, config = {}) {
 		throw new CompositionDiagnosticError(composition.diagnostics);
 	}
 	const result = buildSemanticAuthorGraph(composition.roots ?? []);
-	if (config.mode === "inspect") return result;
+	const styleResult = result.graph ? resolveStyles(result.graph, composition.roots ?? []) : void 0;
+	const diagnostics = styleResult ? combineDiagnostics(result.diagnostics, styleResult.diagnostics) : result.diagnostics;
+	if (config.mode === "inspect") return {
+		...result.graph ? { graph: result.graph } : {},
+		diagnostics,
+		...styleResult ? { resolvedStyles: styleResult.resolvedStyles } : {}
+	};
 	if (result.diagnostics.hasErrors) throw new SemanticGraphDiagnosticError(result.diagnostics);
+	if (styleResult?.diagnostics.hasErrors) throw new StyleDiagnosticError(styleResult.diagnostics);
 	if (!result.graph) throw new SemanticGraphDiagnosticError(result.diagnostics);
 	return result.graph;
 }
@@ -16067,6 +16354,7 @@ var BoundSource = class {
 		const source = this.#source[COMPOSITION_SOURCE]();
 		return {
 			entries: source.entries,
+			stylesheets: source.stylesheets,
 			cycleId: source.cycleId,
 			boundContext: {
 				present: true,
@@ -16092,6 +16380,7 @@ var BoundSource = class {
 var Deck = class {
 	#options;
 	#entries = [];
+	#stylesheets = [];
 	withSource;
 	constructor(options) {
 		this.#options = options;
@@ -16103,10 +16392,15 @@ var Deck = class {
 	[COMPOSITION_SOURCE]() {
 		return {
 			entries: this.#entries,
+			stylesheets: this.#stylesheets,
 			cycleId: this,
 			boundContext: { present: false }
 		};
 	}
+	useStyles(stylesheet) {
+		this.#stylesheets.push(stylesheet);
+		return this;
+	}
 	add(slide) {
 		this.#entries.push({
 			kind: "slide",
@@ -16136,4 +16430,4 @@ var Deck = class {
 	}
 };
 //#endregion
-export { CompositionDiagnosticError, Deck, DeckDiagnosticError, EMU_PER_INCH, Fragment, Image, POINTS_PER_INCH, SemanticGraphDiagnosticError, Shape, Slide, Text, View, createElement, formatDiagnostic, formatDiagnostics, isAuthorNode, isContentNode, isSlideNode, pptxgenjsBackend };
+export { CompositionDiagnosticError, Deck, DeckDiagnosticError, EMU_PER_INCH, Fragment, Image, POINTS_PER_INCH, SemanticGraphDiagnosticError, Shape, Slide, StyleDiagnosticError, Text, View, createElement, defineStyles, formatDiagnostic, formatDiagnostics, isAuthorNode, isContentNode, isSlideNode, pptxgenjsBackend };

package/dist/jsx-dev-runtime.d.mts

@@ -1,4 +1,4 @@
-import { fn as AuthorTreeNode, i as Fragment, n as jsx, pn as JsxKey, r as jsxs, t as JSX } from "./jsx-runtime-DauuRkY2.mjs";
+import { Tn as JsxKey, i as Fragment, n as jsx, r as jsxs, t as JSX, wn as AuthorTreeNode } from "./jsx-runtime-BMKEs7aG.mjs";
 
 //#region src/jsx-dev-runtime.d.ts
 declare function jsxDEV(type: unknown, props: unknown, key?: JsxKey, _isStaticChildren?: boolean, source?: unknown): AuthorTreeNode;

package/dist/{jsx-runtime-DauuRkY2.d.mts → jsx-runtime-BMKEs7aG.d.mts}

@@ -55,6 +55,9 @@ declare class SemanticGraphDiagnosticError extends DeckDiagnosticError {
 declare class CompositionDiagnosticError extends DeckDiagnosticError {
   constructor(diagnostics: Diagnostics);
 }
+declare class StyleDiagnosticError extends DeckDiagnosticError {
+  constructor(diagnostics: Diagnostics);
+}
 //#endregion
 //#region src/diagnostics/format.d.ts
 declare function formatDiagnostic(diagnostic: Diagnostic): string;
@@ -167,14 +170,17 @@ type SemanticShapeNode = BaseSemanticNode & {
   readonly kind: "shape";
 };
 type SemanticNode = SemanticContainerNode | SemanticDocumentNode | SemanticImageNode | SemanticShapeNode | SemanticSlideNode | SemanticTextNode | SemanticTextRunNode;
+type StyleClassRef = {
+  readonly name: string;
+  readonly index: number;
+};
 type StyleEntity = {
   readonly id: StyleEntityId;
   readonly target: SemanticNodeKind;
   readonly authored: {
     readonly style?: unknown;
-    readonly direct?: unknown;
+    readonly classRefs?: readonly StyleClassRef[];
   };
-  readonly resolved?: unknown;
 };
 type AssetEntity = {
   readonly id: AssetEntityId;
@@ -238,6 +244,7 @@ type CompositionEntry<TSourceContext = unknown> = {
 };
 type CompositionSourceInternals<TSourceContext = unknown> = {
   readonly entries: readonly CompositionEntry<TSourceContext>[];
+  readonly stylesheets: readonly StyleSheet[];
   readonly cycleId: object;
   readonly boundContext: SourceContextBinding<TSourceContext>;
 };
@@ -305,6 +312,12 @@ interface ViewIntrinsicJsxChildArray extends ReadonlyArray<ViewIntrinsicJsxChild
 type ViewIntrinsicJsxChild = ContentJsxChild | string | number | ViewIntrinsicJsxChildArray;
 interface JsxNodeArray extends ReadonlyArray<JsxNode> {}
 type JsxNode = AuthorNode | AuthorTreeNode | string | number | boolean | null | undefined | JsxNodeArray;
+interface ClassNameValueArray extends ReadonlyArray<ClassNameValue> {}
+type ClassNameObject = Readonly<Record<string, boolean | null | undefined>>;
+type ClassNameValue = string | false | null | undefined | ClassNameValueArray | ClassNameObject;
+type ClassNameAuthorProps = {
+  className?: ClassNameValue;
+};
 type BaseAuthorProps = {
   opacity?: number;
   rotation?: number;
@@ -508,6 +521,18 @@ type ShapeStyle = FrameAuthorProps & Omit<BoxStyleAuthorProps, "backgroundColor"
   borderRadius?: DeckLength;
   radius?: DeckLength;
 };
+type TextRunStyle = Pick<TextStyle, "fontFamily" | "fontSize" | "fontWeight" | "italic" | "fontStyle" | "underline" | "strike" | "textDecoration" | "textDecorationLine" | "textDecorationStyle" | "textDecorationColor" | "textTransform" | "direction" | "writingMode" | "color" | "verticalAlign" | "charSpacing" | "letterSpacing" | "href" | "tooltip" | "superscript" | "subscript" | "textShadow">;
+type StyleTargetSelector = string;
+type StyleClassStyle = SlideStyle | ViewStyle | TextStyle | TextRunStyle | ImageStyle | ShapeStyle;
+type TargetedStyleClassDefinition<TStyle extends StyleClassStyle = StyleClassStyle> = {
+  readonly target?: StyleTargetSelector | readonly StyleTargetSelector[];
+  readonly style: TStyle;
+};
+type StyleClassDefinition<TStyle extends StyleClassStyle = StyleClassStyle> = TStyle | TargetedStyleClassDefinition<TStyle>;
+type StyleSheet<TClasses extends Readonly<Record<string, StyleClassDefinition>> = Readonly<Record<string, StyleClassDefinition>>> = {
+  readonly classes: TClasses;
+};
+declare function defineStyles<const TStyleSheet extends StyleSheet>(stylesheet: TStyleSheet): TStyleSheet;
 type DeckOptions = {
   layout: {
     width: number;
@@ -526,6 +551,7 @@ type OutputConfig = {
 };
 type SlideNodeProps = {
   name?: string;
+  className?: ClassNameValue;
   style?: SlideStyle;
   background?: string;
   backgroundImage?: string;
@@ -542,19 +568,22 @@ type SlideProps = SlideNodeProps & {
 };
 type ViewNodeProps = {
   style?: ViewStyle;
-} & ViewStyle;
+} & ClassNameAuthorProps & ViewStyle;
 type ViewProps = ViewNodeProps & {
   children?: ContentJsxChild;
 };
 type TextNodeProps = {
   style?: TextStyle;
-} & TextStyle;
+} & ClassNameAuthorProps & TextStyle;
 type TextProps = TextNodeProps & {
   children?: TextJsxChild;
 };
+type TextRunNodeProps = {
+  style?: TextRunStyle;
+} & ClassNameAuthorProps & TextRunStyle;
 type ImageNodeProps = {
   style?: ImageStyle;
-} & ImageStyle & ({
+} & ClassNameAuthorProps & ImageStyle & ({
   src: string;
   data?: string;
 } | {
@@ -567,7 +596,7 @@ type ImageProps = ImageNodeProps & {
 type ShapeNodeProps = {
   style?: ShapeStyle;
   shape: "rect" | "ellipse" | "line";
-} & ShapeStyle;
+} & ClassNameAuthorProps & ShapeStyle;
 type ShapeProps = ShapeNodeProps & {
   children?: never;
 };
@@ -612,12 +641,15 @@ type IntrinsicDivProps = ViewNodeProps & {
 type IntrinsicPProps = TextNodeProps & {
   children?: TextJsxChild;
 };
+type IntrinsicSpanProps = TextRunNodeProps & {
+  children?: TextJsxChild;
+};
 type IntrinsicImgProps = ImageProps;
 type IntrinsicViewTag = "article" | "aside" | "div" | "figure" | "footer" | "header" | "main" | "nav" | "section";
 type IntrinsicTextTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
 type DeckJsxIntrinsicElements = {
   img: IntrinsicImgProps;
-  span: IntrinsicPProps;
+  span: IntrinsicSpanProps;
 } & { [Tag in IntrinsicViewTag]: IntrinsicDivProps } & { [Tag in IntrinsicTextTag]: IntrinsicPProps };
 //#endregion
 //#region src/authoring/components.d.ts
@@ -677,4 +709,4 @@ declare namespace JSX {
   }
 }
 //#endregion
-export { ImageStyle as $, SourceIdentity as $t, CssFlexDirection as A, CompositionContext as At, CssJustifyContent as B, GraphNodeId as Bt, CssAlignContent as C, TextTabStopAlignment as Ct, CssBoxSizing as D, ViewProps as Dt, CssAspectRatio as E, VerticalAlign as Et, CssGridShorthand as F, SourceContextInput as Ft, CssVisibility as G, SemanticNode as Gt, CssObjectPosition as H, SemanticContainerNode as Ht, CssGridTemplate as I, SourceContextMapper as It, DeckOptions as J, SemanticRole as Jt, DeckJsxIntrinsicElements as K, SemanticNodeKind as Kt, CssGridTemplateAreas as L, AssetEntity as Lt, CssGridAutoFlow as M, CompositionSourceInternals as Mt, CssGridLine as N, SlideFactory as Nt, CssDisplay as O, ViewStyle as Ot, CssGridPlacement as P, SlideFactoryInput as Pt, ImageProps as Q, SemanticTextRunNode as Qt, CssGridTemplateShorthand as R, AssetEntityId as Rt, ContentJsxChild as S, TextStyle as St, CssAlignSelf as T, TextTabStopLength as Tt, CssOverflow as U, SemanticDocumentNode as Ut, CssJustifySelf as V, SemanticAuthorGraph as Vt, CssPosition as W, SemanticImageNode as Wt, ImageCropAuthoring as X, SemanticSlideNode as Xt, DeckPointLength as Y, SemanticShapeNode as Yt, ImageCropValue as Z, SemanticTextNode as Zt, AuthorNodeProps as _, StrokeLineCap as _t, createElement as a, DiagnosticSeverity as an, IntrinsicViewTag as at, BorderStyle as b, TextJsxChild as bt, isSlideNode as c, formatDiagnostics as cn, OutputConfig as ct, Slide as d, SemanticGraphDiagnosticError as dn, SlideProps as dt, SourceOrigin as en, ImplementedBackendName as et, Text as f, AuthorTreeNode as fn, SlideStyle as ft, AuthorNodeMap as g, StrokeDashType as gt, AuthorNodeKind as h, StackAxis as ht, Fragment as i, DiagnosticLabel as in, IntrinsicTextTag as it, CssFlexWrap as j, CompositionSource as jt, CssFlexBasis as k, COMPOSITION_SOURCE as kt, Image as l, CompositionDiagnosticError as ln, ShapeProps as lt, AuthorNode as m, SourceSpan as mn, StackAlignment as mt, jsx as n, StyleEntityId as nn, IntrinsicImgProps as nt, isAuthorNode as o, Diagnostics as on, JsxNode as ot, View as p, JsxKey as pn, Spacing as pt, DeckLength as q, SemanticOrigin as qt, jsxs as r, Diagnostic as rn, IntrinsicPProps as rt, isContentNode as s, formatDiagnostic as sn, LayoutMode as st, JSX as t, StyleEntity as tn, IntrinsicDivProps as tt, Shape as u, DeckDiagnosticError as un, ShapeStyle as ut, AuthorNodePropsMap as v, StrokeLineJoin as vt, CssAlignItems as w, TextTabStopAuthoring as wt, ContentAuthorNode as x, TextProps as xt, BackendName as y, TextFit as yt, CssGridTrack as z, BaseSemanticNode as zt };
+export { ImageCropAuthoring as $, SemanticDocumentNode as $t, CssBoxSizing as A, TextRunStyle as At, CssGridTemplateAreas as B, CompositionContext as Bt, ClassNameValueArray as C, StyleDiagnosticError as Cn, StyleClassStyle as Ct, CssAlignItems as D, TextJsxChild as Dt, CssAlignContent as E, SourceSpan as En, TextFit as Et, CssGridAutoFlow as F, VerticalAlign as Ft, CssObjectPosition as G, SourceContextInput as Gt, CssGridTrack as H, CompositionSourceInternals as Ht, CssGridLine as I, ViewProps as It, CssVisibility as J, AssetEntityId as Jt, CssOverflow as K, SourceContextMapper as Kt, CssGridPlacement as L, ViewStyle as Lt, CssFlexBasis as M, TextTabStopAlignment as Mt, CssFlexDirection as N, TextTabStopAuthoring as Nt, CssAlignSelf as O, TextProps as Ot, CssFlexWrap as P, TextTabStopLength as Pt, DeckPointLength as Q, SemanticContainerNode as Qt, CssGridShorthand as R, defineStyles as Rt, ClassNameValue as S, SemanticGraphDiagnosticError as Sn, StyleClassDefinition as St, ContentJsxChild as T, JsxKey as Tn, StyleTargetSelector as Tt, CssJustifyContent as U, SlideFactory as Ut, CssGridTemplateShorthand as V, CompositionSource as Vt, CssJustifySelf as W, SlideFactoryInput as Wt, DeckLength as X, GraphNodeId as Xt, DeckJsxIntrinsicElements as Y, BaseSemanticNode as Yt, DeckOptions as Z, SemanticAuthorGraph as Zt, AuthorNodeProps as _, Diagnostics as _n, StackAlignment as _t, createElement as a, SemanticShapeNode as an, IntrinsicImgProps as at, BorderStyle as b, CompositionDiagnosticError as bn, StrokeLineCap as bt, isSlideNode as c, SemanticTextRunNode as cn, IntrinsicViewTag as ct, Slide as d, StyleClassRef as dn, OutputConfig as dt, SemanticImageNode as en, ImageCropValue as et, Text as f, StyleEntity as fn, ShapeProps as ft, AuthorNodeMap as g, DiagnosticSeverity as gn, Spacing as gt, AuthorNodeKind as h, DiagnosticLabel as hn, SlideStyle as ht, Fragment as i, SemanticRole as in, IntrinsicDivProps as it, CssDisplay as j, TextStyle as jt, CssAspectRatio as k, TextRunNodeProps as kt, Image as l, SourceIdentity as ln, JsxNode as lt, AuthorNode as m, Diagnostic as mn, SlideProps as mt, jsx as n, SemanticNodeKind as nn, ImageStyle as nt, isAuthorNode as o, SemanticSlideNode as on, IntrinsicPProps as ot, View as p, StyleEntityId as pn, ShapeStyle as pt, CssPosition as q, AssetEntity as qt, jsxs as r, SemanticOrigin as rn, ImplementedBackendName as rt, isContentNode as s, SemanticTextNode as sn, IntrinsicTextTag as st, JSX as t, SemanticNode as tn, ImageProps as tt, Shape as u, SourceOrigin as un, LayoutMode as ut, AuthorNodePropsMap as v, formatDiagnostic as vn, StackAxis as vt, ContentAuthorNode as w, AuthorTreeNode as wn, StyleSheet as wt, ClassNameObject as x, DeckDiagnosticError as xn, StrokeLineJoin as xt, BackendName as y, formatDiagnostics as yn, StrokeDashType as yt, CssGridTemplate as z, COMPOSITION_SOURCE as zt };

package/dist/jsx-runtime.d.mts

@@ -1,2 +1,2 @@
-import { i as Fragment, n as jsx, pn as JsxKey, r as jsxs, t as JSX } from "./jsx-runtime-DauuRkY2.mjs";
+import { Tn as JsxKey, i as Fragment, n as jsx, r as jsxs, t as JSX } from "./jsx-runtime-BMKEs7aG.mjs";
 export { Fragment, JSX, JsxKey, jsx, jsxs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckjsx",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Generate PowerPoint presentations from TSX/JSX through a compiler pipeline.",
   "license": "MIT",
   "author": "deckjsx contributors",