deckjsx 0.3.1 → 0.4.0

package/dist/index.d.mts

@@ -1,5 +1,35 @@
-import { $ as ImageCropAuthoring, $t as SemanticSlideNode, A as CssBoxSizing, At as ViewProps, B as CssGridTemplateAreas, Bt as AssetEntity, C as ClassNameValueArray, Ct as TextJsxChild, D as CssAlignItems, Dt as TextTabStopAuthoring, E as CssAlignContent, Et as TextTabStopAlignment, F as CssGridAutoFlow, Ft as CompositionSourceInternals, G as CssObjectPosition, Gt as SemanticContainerNode, H as CssGridTrack, Ht as BaseSemanticNode, I as CssGridLine, It as SlideFactory, J as CssVisibility, Jt as SemanticNode, K as CssOverflow, Kt as SemanticDocumentNode, L as CssGridPlacement, Lt as SlideFactoryInput, M as CssFlexBasis, Mt as COMPOSITION_SOURCE, N as CssFlexDirection, Nt as CompositionContext, O as CssAlignSelf, Ot as TextTabStopLength, P as CssFlexWrap, Pt as CompositionSource, Q as DeckPointLength, Qt as SemanticShapeNode, R as CssGridShorthand, Rt as SourceContextInput, S as ClassNameValue, St as TextFit, T as ContentJsxChild, Tt as TextStyle, U as CssJustifyContent, Ut as GraphNodeId, V as CssGridTemplateShorthand, Vt as AssetEntityId, W as CssJustifySelf, Wt as SemanticAuthorGraph, X as DeckLength, Xt as SemanticOrigin, Y as DeckJsxIntrinsicElements, Yt as SemanticNodeKind, Z as DeckOptions, Zt as SemanticRole, _ as AuthorNodeProps, _n as JsxKey, _t as StackAlignment, a as createElement, an as StyleEntity, at as IntrinsicImgProps, b as BorderStyle, bt as StrokeLineCap, c as isSlideNode, cn as DiagnosticLabel, ct as IntrinsicViewTag, d as Slide, dn as formatDiagnostic, dt as OutputConfig, en as SemanticTextNode, et as ImageCropValue, f as Text, fn as formatDiagnostics, ft as ShapeProps, g as AuthorNodeMap, gt as Spacing, h as AuthorNodeKind, hn as SemanticGraphDiagnosticError, ht as SlideStyle, i as Fragment, in as StyleClassRef, it as IntrinsicDivProps, j as CssDisplay, jt as ViewStyle, k as CssAspectRatio, kt as VerticalAlign, l as Image, ln as DiagnosticSeverity, lt as JsxNode, m as AuthorNode, mn as DeckDiagnosticError, mt as SlideProps, nn as SourceIdentity, nt as ImageStyle, o as isAuthorNode, on as StyleEntityId, ot as IntrinsicPProps, p as View, pn as CompositionDiagnosticError, pt as ShapeStyle, q as CssPosition, qt as SemanticImageNode, rn as SourceOrigin, rt as ImplementedBackendName, s as isContentNode, sn as Diagnostic, st as IntrinsicTextTag, tn as SemanticTextRunNode, tt as ImageProps, u as Shape, un as Diagnostics, ut as LayoutMode, v as AuthorNodePropsMap, vn as SourceSpan, vt as StackAxis, w as ContentAuthorNode, wt as TextProps, x as ClassNameObject, xt as StrokeLineJoin, y as BackendName, yt as StrokeDashType, z as CssGridTemplate, zt as SourceContextMapper } from "./jsx-runtime-CJ9_d_0Q.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 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 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 StyleClassRef, 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,10 +4594,6 @@ function textOriginFor(node, path, context) {
 		...node.sourceSpan ? { sourceSpan: node.sourceSpan } : {}
 	};
 }
-function propsWithoutStyle(props) {
-	const { style: _style, children: _children, className: _className, ...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") {
@@ -4607,18 +4616,30 @@ function classRefsFor(value) {
 		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);
+	const style = mergedAuthoredStyle(props);
 	const classRefs = classRefsFor(props.className);
-	if (style === void 0 && direct === void 0 && classRefs === void 0) return;
+	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 } : {}
 		}
 	});
@@ -4875,6 +4896,7 @@ function asComposedRoot(root, index) {
 		root,
 		source: rootSource(),
 		sourceIdentityMaterial: ["source", "root"],
+		stylesheets: [],
 		path: `document > slideFactory[${index}]`,
 		composition: {
 			slideIndex: index,
@@ -4934,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) {
@@ -16068,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) {
@@ -16075,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;
 }
@@ -16091,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,
@@ -16116,6 +16380,7 @@ var BoundSource = class {
 var Deck = class {
 	#options;
 	#entries = [];
+	#stylesheets = [];
 	withSource;
 	constructor(options) {
 		this.#options = options;
@@ -16127,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",
@@ -16160,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 { _n as JsxKey, gn as AuthorTreeNode, i as Fragment, n as jsx, r as jsxs, t as JSX } from "./jsx-runtime-CJ9_d_0Q.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-CJ9_d_0Q.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;
@@ -176,7 +179,6 @@ type StyleEntity = {
   readonly target: SemanticNodeKind;
   readonly authored: {
     readonly style?: unknown;
-    readonly direct?: unknown;
     readonly classRefs?: readonly StyleClassRef[];
   };
 };
@@ -242,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>;
 };
@@ -518,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;
@@ -563,6 +578,9 @@ type TextNodeProps = {
 type TextProps = TextNodeProps & {
   children?: TextJsxChild;
 };
+type TextRunNodeProps = {
+  style?: TextRunStyle;
+} & ClassNameAuthorProps & TextRunStyle;
 type ImageNodeProps = {
   style?: ImageStyle;
 } & ClassNameAuthorProps & ImageStyle & ({
@@ -623,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
@@ -688,4 +709,4 @@ declare namespace JSX {
   }
 }
 //#endregion
-export { ImageCropAuthoring as $, SemanticSlideNode as $t, CssBoxSizing as A, ViewProps as At, CssGridTemplateAreas as B, AssetEntity as Bt, ClassNameValueArray as C, TextJsxChild as Ct, CssAlignItems as D, TextTabStopAuthoring as Dt, CssAlignContent as E, TextTabStopAlignment as Et, CssGridAutoFlow as F, CompositionSourceInternals as Ft, CssObjectPosition as G, SemanticContainerNode as Gt, CssGridTrack as H, BaseSemanticNode as Ht, CssGridLine as I, SlideFactory as It, CssVisibility as J, SemanticNode as Jt, CssOverflow as K, SemanticDocumentNode as Kt, CssGridPlacement as L, SlideFactoryInput as Lt, CssFlexBasis as M, COMPOSITION_SOURCE as Mt, CssFlexDirection as N, CompositionContext as Nt, CssAlignSelf as O, TextTabStopLength as Ot, CssFlexWrap as P, CompositionSource as Pt, DeckPointLength as Q, SemanticShapeNode as Qt, CssGridShorthand as R, SourceContextInput as Rt, ClassNameValue as S, TextFit as St, ContentJsxChild as T, TextStyle as Tt, CssJustifyContent as U, GraphNodeId as Ut, CssGridTemplateShorthand as V, AssetEntityId as Vt, CssJustifySelf as W, SemanticAuthorGraph as Wt, DeckLength as X, SemanticOrigin as Xt, DeckJsxIntrinsicElements as Y, SemanticNodeKind as Yt, DeckOptions as Z, SemanticRole as Zt, AuthorNodeProps as _, JsxKey as _n, StackAlignment as _t, createElement as a, StyleEntity as an, IntrinsicImgProps as at, BorderStyle as b, StrokeLineCap as bt, isSlideNode as c, DiagnosticLabel as cn, IntrinsicViewTag as ct, Slide as d, formatDiagnostic as dn, OutputConfig as dt, SemanticTextNode as en, ImageCropValue as et, Text as f, formatDiagnostics as fn, ShapeProps as ft, AuthorNodeMap as g, AuthorTreeNode as gn, Spacing as gt, AuthorNodeKind as h, SemanticGraphDiagnosticError as hn, SlideStyle as ht, Fragment as i, StyleClassRef as in, IntrinsicDivProps as it, CssDisplay as j, ViewStyle as jt, CssAspectRatio as k, VerticalAlign as kt, Image as l, DiagnosticSeverity as ln, JsxNode as lt, AuthorNode as m, DeckDiagnosticError as mn, SlideProps as mt, jsx as n, SourceIdentity as nn, ImageStyle as nt, isAuthorNode as o, StyleEntityId as on, IntrinsicPProps as ot, View as p, CompositionDiagnosticError as pn, ShapeStyle as pt, CssPosition as q, SemanticImageNode as qt, jsxs as r, SourceOrigin as rn, ImplementedBackendName as rt, isContentNode as s, Diagnostic as sn, IntrinsicTextTag as st, JSX as t, SemanticTextRunNode as tn, ImageProps as tt, Shape as u, Diagnostics as un, LayoutMode as ut, AuthorNodePropsMap as v, SourceSpan as vn, StackAxis as vt, ContentAuthorNode as w, TextProps as wt, ClassNameObject as x, StrokeLineJoin as xt, BackendName as y, StrokeDashType as yt, CssGridTemplate as z, SourceContextMapper 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 { _n as JsxKey, i as Fragment, n as jsx, r as jsxs, t as JSX } from "./jsx-runtime-CJ9_d_0Q.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.1",
+  "version": "0.4.0",
   "description": "Generate PowerPoint presentations from TSX/JSX through a compiler pipeline.",
   "license": "MIT",
   "author": "deckjsx contributors",