@cratis/scene.blueprint.default 4.33.0 → 4.35.0

package/preview-host/diagnosePreview.ts

@@ -0,0 +1,132 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ApplicationStructure, NavigationModel, Screen, SampleDataPack, Toolbar, ToolbarButton } from '@cratis/scene.model';
+import {
+    ApplicationStructureIndex, collectComponents, diagnoseNavigationRegions, resolveScreenTemplates,
+    toolbarButtonFromItem, validateSampleDataSelection, validateToolbarButtons,
+} from '@cratis/scene.engine';
+import { ApplicationDocument } from './ApplicationDocument';
+import { CompositionOptions, findLayout, templatePoolFor, templatesOf } from './composeApplication';
+import { PreviewPlan, resolvePreviewPlan } from './resolvePreviewPlan';
+import { PreviewTarget } from './PreviewTarget';
+import { PreviewProblem, PreviewProblemCode, PreviewProblemSeverity } from './PreviewProblem';
+import { previewProfile } from './previewProfile';
+
+/** What {@link diagnosePreview} reads. */
+export interface PreviewDiagnosisInput {
+    document: ApplicationDocument;
+    structure: ApplicationStructure | ApplicationStructureIndex;
+    navigation?: NavigationModel;
+    target: PreviewTarget;
+
+    /** The packs available, for checking the profile's sample data selection. */
+    packs?: SampleDataPack[];
+
+    /** The composition options the host renders with, for the blueprint's layouts and templates. */
+    composition?: CompositionOptions;
+}
+
+export interface PreviewDiagnosis {
+    /** The plan the target resolved to; absent when it did not resolve. */
+    plan?: PreviewPlan;
+
+    /** The screen the preview's page is, when the plan has a feature. */
+    screen?: Screen;
+
+    problems: PreviewProblem[];
+}
+
+const make = (code: PreviewProblemCode, severity: PreviewProblemSeverity, message: string, nodeId?: string): PreviewProblem =>
+    ({ code, severity, message, ...(nodeId === undefined ? {} : { nodeId }) });
+
+/**
+ * Finds what would break or mislead a preview before it renders (PRV8), using the same engine validators the editor and the
+ * compiler use - nothing is judged here that the engine does not already judge:
+ *
+ * - the target must be in the structure, and a module must have a feature;
+ * - the page - the screen named by the target's feature - must exist, with a layout and a template that can be found and placed;
+ * - navigation (`diagnoseNavigationRegions`), toolbar buttons (`validateToolbarButtons`, whatever their severity), the structure's own
+ *   ids and the sample data selection are reported as warnings: the preview still renders, an item or button just will not behave
+ *   as authored.
+ *
+ * Errors block the preview - it shows these instead of a blank screen; the node id is what the host links to.
+ */
+export function diagnosePreview(input: PreviewDiagnosisInput): PreviewDiagnosis {
+    const index = input.structure instanceof ApplicationStructureIndex ? input.structure : new ApplicationStructureIndex(input.structure);
+    const options = input.composition ?? {};
+    const problems: PreviewProblem[] = [];
+
+    for (const diagnostic of index.diagnostics) {
+        problems.push(make(PreviewProblemCode.StructureInvalid, PreviewProblemSeverity.Warning, diagnostic.message, diagnostic.id));
+    }
+
+    const { plan, problems: targetProblems } = resolvePreviewPlan(index, input.target);
+    problems.push(...targetProblems);
+
+    let screen: Screen | undefined;
+    if (plan?.feature !== undefined) {
+        screen = input.document.screens.find(candidate => candidate.name === plan.feature);
+        // A slice is previewed over a minimal host page when its feature has no screen; a module or feature has nothing to show without one.
+        if (!screen && plan.slice === undefined) {
+            problems.push(make(PreviewProblemCode.ScreenMissing, PreviewProblemSeverity.Error, `The feature '${plan.feature}' has no screen in the document, so there is nothing to render.`, plan.feature));
+        } else if (screen) {
+            problems.push(...diagnoseScreen(input.document, screen, options));
+        }
+    }
+
+    if (input.navigation) {
+        for (const diagnostic of diagnoseNavigationRegions(index, input.navigation)) {
+            problems.push(make(PreviewProblemCode.NavigationInvalid, PreviewProblemSeverity.Warning, diagnostic.message, diagnostic.entry));
+        }
+    }
+
+    const buttons = input.document.screens.flatMap(candidate => collectComponents(candidate)
+        .filter(component => component.componentName.endsWith('toolbarItem'))
+        .map(component => toolbarButtonFromItem(component.id, component.properties as Record<string, unknown>))
+        .filter((button): button is ToolbarButton => button !== undefined));
+    const toolbar: Toolbar = { buttons };
+    for (const diagnostic of validateToolbarButtons(index, toolbar)) {
+        problems.push(make(PreviewProblemCode.ToolbarInvalid, PreviewProblemSeverity.Warning, diagnostic.message, diagnostic.button));
+    }
+
+    const selection = previewProfile(input.document.uiProfiles).sampleData;
+    if (selection) {
+        for (const message of validateSampleDataSelection(selection, input.packs ?? [])) {
+            problems.push(make(PreviewProblemCode.SampleDataInvalid, PreviewProblemSeverity.Warning, message));
+        }
+    }
+
+    return { plan, screen, problems };
+}
+
+function diagnoseScreen(document: ApplicationDocument, screen: Screen, options: CompositionOptions): PreviewProblem[] {
+    const problems: PreviewProblem[] = [];
+    const layout = findLayout(document, screen.layout, options);
+    if (!layout) {
+        problems.push(make(PreviewProblemCode.LayoutMissing, PreviewProblemSeverity.Error, `The screen '${screen.name}' uses the layout '${screen.layout}', which neither the document nor the blueprint provides.`, screen.name));
+    }
+
+    if (screen.screenTemplate === undefined) return problems;
+
+    const templates = templatesOf(document, options);
+    if (!templates.some(candidate => candidate.name === screen.screenTemplate)) {
+        problems.push(make(PreviewProblemCode.TemplateMissing, PreviewProblemSeverity.Error, `The screen '${screen.name}' uses the template '${screen.screenTemplate}', which neither the document nor the blueprint provides.`, screen.name));
+        return problems;
+    }
+
+    if (layout) {
+        const resolution = resolveScreenTemplates(layout, templatePoolFor(document, screen, options));
+        const unplaced = resolution.unplaced.find(candidate => candidate.template === screen.screenTemplate);
+        if (unplaced) {
+            problems.push(make(PreviewProblemCode.TemplateUnplaced, PreviewProblemSeverity.Error, `The template '${unplaced.template}' fits the slot '${unplaced.slot}', which ${unplaced.candidates.length === 0 ? 'nothing declares' : `${unplaced.candidates.join(' and ')} all declare`}.`, unplaced.template));
+        }
+
+        const cycle = resolution.cycles.find(candidate => candidate.includes(screen.screenTemplate!));
+        if (cycle) {
+            problems.push(make(PreviewProblemCode.TemplateUnplaced, PreviewProblemSeverity.Error, `The template '${screen.screenTemplate}' nests inside itself (${cycle.join(' → ')}).`, screen.screenTemplate));
+        }
+    }
+
+    return problems;
+}

package/preview-host/index.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './PreviewTarget';
+export * from './PreviewProblem';
+export * from './ApplicationDocument';
+export * from './previewProfile';
+export * from './defaultApplicationChrome';
+export * from './FlowArrangementView';
+export * from './useSizeClass';
+export * from './PreviewTemplate';
+export * from './composeApplication';
+export * from './resolvePreviewPlan';
+export * from './diagnosePreview';
+export * from './previewSampleData';
+export * from './PreviewSliceFragment';
+export * from './PreviewToast';
+export * from './PreviewProblemsView';
+export * from './ApplicationHost';
+export * from './ScenePreviewHost';

package/preview-host/previewProfile.ts

@@ -0,0 +1,47 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { UiProfile } from '@cratis/scene.model';
+import type { PackageCatalog } from '@cratis/scene.engine';
+import { ComponentName } from '../ComponentName';
+import { defaultBlueprintName } from '../packageName';
+import { coreComponents } from '@cratis/scene.react';
+
+/** The packages every preview and Stage application resolves bare component names against, in ascending priority. */
+export const requiredPackages = ['core', defaultBlueprintName];
+
+/** What the packages every host has declare, so a bare name resolves to the package that provides it. */
+export const blueprintPackageCatalog: PackageCatalog = {
+    core: Object.keys(coreComponents).map(key => key.slice(key.indexOf(':') + 1)),
+    [defaultBlueprintName]: Object.values(ComponentName),
+};
+
+/**
+ * The profile an application renders against: the document's own web profile (else its first), with the packages every host
+ * renders with admitted even when the model never named them - without that, a template written against the blueprint's
+ * vocabulary would come out as a column of dashed placeholders. A host with more packages (PrimeReact, a custom set) lists them
+ * in `additionalPackages`.
+ *
+ * The profile's `sampleData` is carried through: it is where the application chose its active pack (spec 11, SD3).
+ *
+ * @param profiles The profiles the document declares.
+ * @param additionalPackages Packages the host renders with beyond the required ones, lowest priority first.
+ * @returns The profile to resolve component names with.
+ */
+export function previewProfile(profiles: UiProfile[] | undefined, additionalPackages: string[] = []): UiProfile {
+    const declared = profiles?.find(profile => profile.targetPlatform === 'web') ?? profiles?.[0];
+    const packages = [...(declared?.packages ?? [])];
+    for (const required of [...requiredPackages, ...additionalPackages]) {
+        if (!packages.includes(required)) packages.push(required);
+    }
+
+    return {
+        name: declared?.name ?? 'Preview',
+        targetPlatform: declared?.targetPlatform ?? 'web',
+        packages,
+        defaultSizeClass: declared?.defaultSizeClass,
+        layout: declared?.layout,
+        theme: declared?.theme,
+        sampleData: declared?.sampleData,
+    };
+}

package/preview-host/previewSampleData.ts

@@ -0,0 +1,144 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BindingExpression, SampleDataPack, SampleShape } from '@cratis/scene.model';
+import { BindingResolver, SampleDataResolution, resolveSampleData } from '@cratis/scene.engine';
+import type { SliceCommandField } from '@cratis/scene.react';
+import { ApplicationDocument } from './ApplicationDocument';
+import { previewProfile } from './previewProfile';
+
+/**
+ * Which sample data a preview shows (spec 11, PRV6). The active pack is the application profile's (`sampleData.activePack`),
+ * chosen once for the whole application; `sessionActivePack` is the preview strip's selector, a session-only override of that
+ * setting - not a second source of truth. Resolution is `resolveSampleData`'s: bound pack, active pack, the blueprint's default
+ * pack, then generated data, and the same seed gives the same rows every time.
+ */
+export interface PreviewSampleData {
+    /** Every pack available: the blueprints' and the author's own. */
+    packs: SampleDataPack[];
+
+    /** The preview strip's choice for this session: a pack id, or the empty string for generated data. Absent leaves the profile's. */
+    sessionActivePack?: string;
+
+    /** The default pack of the blueprint the templates came from. */
+    blueprintDefaultPack?: string;
+
+    /** The locale of generated data when no pack supplies one. */
+    locale?: string;
+
+    /** The seed for generated data; 1 by default, so previews are stable. */
+    seed?: number;
+
+    /** The number of generated rows. */
+    rowCount?: number;
+
+    /** The shape of the rows of each read model or query, by name, for generating rows where no pack has them. */
+    shapes?: Record<string, SampleShape>;
+}
+
+/** What a preview reads its data from. */
+export interface PreviewSampleDataSource {
+    /** The rows for a read model or query; empty when nothing supplies any. */
+    rows(target: string, shape?: SampleShape): SampleDataResolution;
+
+    /** The rows of every query the document binds, by query name - the `queryResults` of the render scope. */
+    queryResults: Record<string, unknown>;
+
+    /** Resolves a binding that names a query against the sample rows. */
+    resolveBinding: BindingResolver;
+
+    /** Starting values for a command's fields from the sample rows, for the task dialog of a slice. */
+    commandFields(command: string, fields: SliceCommandField[]): SliceCommandField[];
+}
+
+const noSample: PreviewSampleData = { packs: [] };
+
+/** The names of the queries a document binds: every `query` it names, in bindings and on components. */
+export function collectQueryNames(value: unknown): string[] {
+    const names = new Set<string>();
+    const visit = (candidate: unknown) => {
+        if (candidate === null || typeof candidate !== 'object') return;
+        if (Array.isArray(candidate)) {
+            candidate.forEach(visit);
+            return;
+        }
+
+        for (const [key, entry] of Object.entries(candidate as Record<string, unknown>)) {
+            if (key === 'query' && typeof entry === 'string' && entry.length > 0) names.add(entry);
+            else visit(entry);
+        }
+    };
+
+    visit(value);
+    return [...names];
+}
+
+function readPath(source: unknown, path: string): unknown {
+    if (!path) return source;
+    return path.split('.').reduce<unknown>((current, segment) => {
+        if (current === null || current === undefined || typeof current !== 'object') return undefined;
+        if (Array.isArray(current)) return /^(0|[1-9][0-9]*)$/.test(segment) ? current[Number(segment)] : undefined;
+        return Object.hasOwn(current, segment) ? (current as Record<string, unknown>)[segment] : undefined;
+    }, source);
+}
+
+function shapeOfFields(name: string, fields: SliceCommandField[]): SampleShape {
+    return { name, fields: fields.map(field => ({ name: field.name, type: field.type })) };
+}
+
+function scalar(value: unknown): string | number | boolean | undefined {
+    return typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ? value : undefined;
+}
+
+/**
+ * Plugs the sample data resolution into what a preview renders with (PRV6). Nothing here decides what a row looks like - that is
+ * `resolveSampleData` - this only asks it, with the application profile's selection, for the queries the document binds and the
+ * commands its slices accept. It is design/preview time only: a production host never builds one (SD6).
+ *
+ * @param application The document whose profile carries the selection and whose bindings are scanned.
+ * @param sample The packs, session override and seed.
+ */
+export function createPreviewSampleData(application: ApplicationDocument, sample: PreviewSampleData = noSample): PreviewSampleDataSource {
+    const profile = previewProfile(application.uiProfiles);
+    const context = {
+        packs: sample.packs,
+        profile,
+        sessionActivePack: sample.sessionActivePack,
+        blueprintDefaultPack: sample.blueprintDefaultPack,
+        locale: sample.locale,
+        seed: sample.seed,
+        rowCount: sample.rowCount,
+        isDesignOrPreview: true,
+    };
+
+    const rows = (target: string, shape?: SampleShape): SampleDataResolution => {
+        const known = shape ?? sample.shapes?.[target];
+        const resolved = resolveSampleData({ target, ...(known === undefined ? {} : { shape: known }) }, context);
+        if (resolved.rows.length > 0 || !target.includes('.')) return resolved;
+
+        const short = target.slice(target.lastIndexOf('.') + 1);
+        return resolveSampleData({ target: short, ...(known === undefined ? {} : { shape: known }) }, context);
+    };
+
+    const queryResults: Record<string, unknown> = {};
+    for (const name of collectQueryNames([application.screens, application.screenTemplates, application.dialogTemplates ?? [], application.layouts])) {
+        const resolved = rows(name);
+        if (resolved.rows.length > 0) queryResults[name] = resolved.rows;
+    }
+
+    return {
+        rows,
+        queryResults,
+        resolveBinding: (binding: BindingExpression) => binding.query ? readPath(queryResults[binding.query], binding.path) : undefined,
+        commandFields: (command, fields) => {
+            const first = rows(command, shapeOfFields(command, fields)).rows[0];
+            if (!first) return fields;
+
+            return fields.map(field => {
+                const key = Object.keys(first).find(candidate => candidate.toLowerCase() === field.name.toLowerCase());
+                const value = key === undefined ? undefined : scalar(first[key]);
+                return value === undefined ? field : { ...field, initialValue: value };
+            });
+        },
+    };
+}

package/preview-host/resolvePreviewPlan.ts

@@ -0,0 +1,100 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ApplicationStructure, FeatureNode, SliceKind } from '@cratis/scene.model';
+import { ApplicationStructureIndex } from '@cratis/scene.engine';
+import { PreviewTarget, isSliceTarget } from './PreviewTarget';
+import { PreviewProblem, PreviewProblemCode, PreviewProblemSeverity } from './PreviewProblem';
+
+/** What a target resolved to in the application structure. */
+export interface PreviewPlan {
+    /** `module`, `feature`, `stateChange` or `stateView`. */
+    kind: 'module' | 'feature' | 'stateChange' | 'stateView';
+
+    /** The module the preview is in. */
+    module: string;
+
+    /** The qualified id of the feature whose screen is the page: the module's first feature, the feature itself, or the slice's feature. */
+    feature?: string;
+
+    /** The qualified id of the slice, for a slice target. */
+    slice?: string;
+
+    /** The command a State Change slice accepts. */
+    command?: string;
+
+    /** The display names from the module down to the target - what the preview strip shows as `Sales › Orders` (PRV7). */
+    breadcrumb: string[];
+}
+
+export interface PreviewPlanResult {
+    plan?: PreviewPlan;
+    problems: PreviewProblem[];
+}
+
+const error = (code: PreviewProblemCode, message: string, nodeId?: string): PreviewProblem => ({ code, severity: PreviewProblemSeverity.Error, message, ...(nodeId === undefined ? {} : { nodeId }) });
+
+/** The feature a qualified id names, and the display names of the features above it, outermost first. */
+function featurePath(structure: ApplicationStructure, qualified: string): { feature: FeatureNode; names: string[] } | undefined {
+    const [moduleId, ...rest] = qualified.split('.');
+    let features = structure.modules.find(module => module.id === moduleId)?.features;
+    const names: string[] = [];
+    let found: FeatureNode | undefined;
+    for (const id of rest) {
+        found = features?.find(candidate => candidate.id === id);
+        if (!found) return undefined;
+        names.push(found.name);
+        features = found.features;
+    }
+
+    return found ? { feature: found, names } : undefined;
+}
+
+/**
+ * Resolves a preview target against the application structure (PRV3): a module previews its first feature, a feature itself,
+ * a slice the page of the feature it belongs to with the slice itself opened (State Change) or isolated (State View).
+ * A target that is not in the structure resolves to a problem, not to a blank screen.
+ */
+export function resolvePreviewPlan(structure: ApplicationStructure | ApplicationStructureIndex, target: PreviewTarget): PreviewPlanResult {
+    const index = structure instanceof ApplicationStructureIndex ? structure : new ApplicationStructureIndex(structure);
+
+    if (isSliceTarget(target)) {
+        const slice = index.findSlice(target.slice);
+        if (!slice) return { problems: [error(PreviewProblemCode.TargetNotFound, `The slice '${target.slice}' is not in the application.`, target.slice)] };
+        if (slice.kind === SliceKind.Automation) {
+            return { problems: [error(PreviewProblemCode.SliceNotPreviewable, `The slice '${target.slice}' is an automation: it reacts to events and has nothing to show.`, target.slice)] };
+        }
+
+        const segments = target.slice.split('.');
+        const module = segments[0];
+        const featureId = segments.length > 2 ? segments.slice(0, -1).join('.') : undefined;
+        const moduleNode = index.findModule(module);
+        const path = featureId ? featurePath(index.structure, featureId) : undefined;
+        const containerFeature = featureId ?? index.firstFeatureId(module);
+        return {
+            plan: {
+                kind: slice.kind === SliceKind.StateChange ? 'stateChange' : 'stateView',
+                module,
+                feature: containerFeature,
+                slice: target.slice,
+                ...(slice.kind === SliceKind.StateChange ? { command: slice.command ?? slice.id } : {}),
+                breadcrumb: [moduleNode?.name ?? module, ...(path?.names ?? []), slice.name],
+            },
+            problems: [],
+        };
+    }
+
+    const moduleNode = index.findModule(target.module);
+    if (!moduleNode) return { problems: [error(PreviewProblemCode.TargetNotFound, `The module '${target.module}' is not in the application.`, target.module)] };
+
+    if (target.feature === undefined) {
+        const first = index.firstFeatureId(target.module);
+        if (first === undefined) return { problems: [error(PreviewProblemCode.ModuleWithoutFeatures, `The module '${moduleNode.name}' has no feature to show.`, target.module)] };
+        return { plan: { kind: 'module', module: target.module, feature: first, breadcrumb: [moduleNode.name, ...(featurePath(index.structure, first)?.names ?? [])] }, problems: [] };
+    }
+
+    const qualified = target.feature.startsWith(`${target.module}.`) ? target.feature : `${target.module}.${target.feature}`;
+    const path = featurePath(index.structure, qualified);
+    if (!path) return { problems: [error(PreviewProblemCode.TargetNotFound, `The feature '${qualified}' is not in the application.`, qualified)] };
+    return { plan: { kind: 'feature', module: target.module, feature: qualified, breadcrumb: [moduleNode.name, ...path.names] }, problems: [] };
+}

package/preview-host/useSizeClass.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useEffect, useState } from 'react';
+import type { SizeClass } from '@cratis/scene.model';
+import { computeSizeClass } from '@cratis/scene.engine';
+
+/**
+ * Tracks the browser window's {@link SizeClass}, recomputing whenever it resizes across a boundary the
+ * shared engine cares about. This is what lets a modeled `when width compact` override actually take
+ * effect on a narrow window instead of the arrangement engine's size-aware logic never being asked.
+ */
+export function useSizeClass(): SizeClass {
+    const [sizeClass, setSizeClass] = useState<SizeClass>(() => computeSizeClass(globalThis.innerWidth, globalThis.innerHeight));
+
+    useEffect(() => {
+        const onResize = () => setSizeClass(computeSizeClass(globalThis.innerWidth, globalThis.innerHeight));
+        globalThis.addEventListener('resize', onResize);
+        return () => globalThis.removeEventListener('resize', onResize);
+    }, []);
+
+    return sizeClass;
+}

package/shell/layout.css

@@ -1059,6 +1059,28 @@
     align-items: center;
     gap: 0.5rem;
 }
+/* The template wrapper and the preview host's own chrome. The shell, the navigation regions and the slice dialog are styled by
+   `@cratis/scene.blueprint.default/styles.css`; import both. */
+.flow-container { display: flex; min-width: 0; min-height: 0; }
+.flow-container--row { flex-direction: row; }
+.flow-container--column { flex-direction: column; }
+.flow-container--grid { display: grid; }
+.flow-child { display: flex; min-width: 0; min-height: 0; }
+.flow-child > .flow-container,
+.flow-child > .scene-template-slot { flex: 1 1 auto; }
+.scene-template { display: flex; flex-direction: column; gap: var(--layout-gap, 1rem); min-width: 0; }
+.scene-template-slot { display: grid; gap: var(--layout-gap, 1rem); min-width: 0; width: 100%; align-content: start; }
+
+.scene-preview-problems { margin: 1rem; padding: 1rem 1.25rem; border: 1px solid #e11d48; border-radius: 0.75rem; background: #fff1f2; color: #881337; }
+.scene-preview-problems h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
+.scene-preview-problems ul { margin: 0; padding-left: 1.25rem; }
+.scene-preview-problems li[data-severity='warning'] { color: #7a4b00; }
+.scene-preview-problems code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
+
+.scene-preview-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 1300; max-width: 26rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: #161b22; color: #fff; box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.35); }
+.scene-preview-toast summary { cursor: pointer; margin-top: 0.25rem; color: #c9d1d9; }
+.scene-preview-toast pre { margin: 0.5rem 0 0; max-height: 14rem; overflow: auto; font-size: 0.75rem; }
+
 
 /*
  * FOUNDATION COMPONENTS