@zcomponent/core 0.0.22 → 0.0.24

package/css/zcomponent.css

@@ -119,4 +119,94 @@
 
 .zcomponent-textalert-shown {
     opacity: 1;
+}
+
+.zcomponent-cookieconsent {
+    z-index: 10000000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#zcomponent-cookieconsent-panel {
+    background: white;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    margin-top: auto;
+    max-width: 500px;
+    font-family: sans-serif;
+    padding: 24px;
+    margin-left: 24px;
+    margin-right: 24px;
+    max-height: 80%;
+    overflow: scroll;
+}
+
+#zcomponent-cookieconsent-panel > h1 {
+    font-size: 24px;
+}
+
+#zcomponent-cookieconsent-panel button {
+    padding: 12px 24px;
+    background: none;
+    border: 2px solid black;
+    border-radius: 4px;
+    color: black;
+}
+
+#zcomponent-cookieconsent-panel button {
+    padding: 12px 24px;
+    background: none;
+    border: 2px solid black;
+    border-radius: 4px;
+    color: black;
+    display: block;
+    outline: none;
+}
+
+#zcomponent-cookieconsent-panel #zcomponent-cookieconsent-settings {
+    padding: 0;
+    border: 0;
+    background: none;
+    font-weight: bold;
+    text-decoration: underline;
+    padding-top: 12px;
+}
+
+.zcomponent-cookieconsent-type {
+    position: relative;
+}
+
+.zcomponent-cookieconsent-type input {
+    float: right;
+    /* top: 0px; */
+    /* right: 0px; */
+    width: 32px;
+    height: 32px;
+}
+
+#zcomponent-cookieconsent-panel h3 {
+    margin-bottom: 6px;
+}
+
+#zcomponent-cookieconsent-panel h5 {
+    margin-bottom: 6px;
+}
+
+#zcomponent-cookieconsent-panel #zcomponent-cookieconsent-save {
+    padding-top: 12px;
+}
+
+#zcomponent-cookieconsent-panel ul {
+    list-style-type: none;
+}
+
+#zcomponent-cookieconsent-privacypolicy {
+    padding-bottom: 12px;
 }

package/lib/animation/clips/clip.d.ts

@@ -8,7 +8,7 @@ export declare class Clip {
     readonly scriptName?: string | undefined;
     readonly id?: string | undefined;
     influencedPathsDirty: Observable<boolean, never>;
-    defaultFadeParameters?: Data.FadeParameters;
+    defaultFadeParameters?: Partial<Data.FadeParameters>;
     private _influencedPaths;
     private _tracksByPath;
     private _tracksByPathDirty;
@@ -21,7 +21,7 @@ export declare class Clip {
     get tracksByPath(): Map<string, Track[]>;
     get influencedPaths(): string[];
     fadePropertiesByPath(props: {
-        [id: string]: Data.FadeParameters;
+        [id: string]: Partial<Data.FadeParameters>;
     }): void;
     resolveClipTime(t: number, t0: number, s0: number, rate: number, t1?: number): number;
     streamPlay(speed?: number): void;

package/lib/animation/clips/clip.js

@@ -76,16 +76,13 @@ export class Clip {
         if (this.defaultFadeParameters) {
             // Replace any existing fade properties with our defaults
             for (const id in props) {
-                props[id] = { ...this.defaultFadeParameters };
+                props[id] = { ...props[id], ...this.defaultFadeParameters };
             }
         }
         for (const track of this._tracks) {
             if (track instanceof PropertyTrack) {
                 if (track.fadeParameters || this.defaultFadeParameters) {
                     const params = {
-                        time: 0,
-                        easing: null,
-                        pin: 0,
                         ...this.defaultFadeParameters,
                         ...track.fadeParameters,
                     };

package/lib/animation/layer.d.ts

@@ -10,6 +10,7 @@ export declare class Layer {
     clips: {
         [id: string]: LayerClip;
     };
+    defaultFadeParameters?: Data.FadeParameters;
     influencedPathsDirty: Observable<boolean, never>;
     private _influencedPaths;
     private _active;
@@ -40,7 +41,7 @@ export interface QueueEntry {
     layerClip: LayerClip | null;
     playOptions?: LayerClipPlayOptions;
     fadeByPath: {
-        [id: string]: Data.FadeParameters;
+        [id: string]: Partial<Data.FadeParameters>;
     };
     fadeTime: number;
     startTime?: number;

package/lib/animation/layer.js

@@ -25,7 +25,7 @@ export class Layer {
                 if (ct >= entry.fadeTime)
                     fadeValue = clipValue;
                 else
-                    fadeValue = computeFade(entry.fadeByPath[p], entry.playOptions?.fade, ct, entry.fadeTime, fadeValue, clipValue);
+                    fadeValue = computeFade(this.defaultFadeParameters, entry.fadeByPath[p], entry.playOptions?.fade, ct, entry.fadeTime, fadeValue, clipValue);
             }
             else {
                 fadeValue = clipValue;
@@ -71,20 +71,15 @@ export class Layer {
         this.influencedPathsDirty.value = true;
     }
     queue(layerClip, playOptions) {
-        const previous = this._queue[this._queue.length - 1];
         const fadeByPath = {};
-        previous?.layerClip?.clip?.fadePropertiesByPath(fadeByPath);
-        for (const [path, params] of Object.entries(fadeByPath)) {
-            fadeByPath[path] = {
-                ...params,
-                reverse: !(params.reverse ?? false),
-            };
-        }
         layerClip?.clip?.fadePropertiesByPath(fadeByPath);
         let fadeTime = playOptions?.fade?.time ?? 0;
         for (const params of Object.values(fadeByPath)) {
-            fadeTime = Math.max(fadeTime, params.time);
+            if (params.time !== undefined)
+                fadeTime = Math.max(fadeTime, params.time);
         }
+        if (this.defaultFadeParameters)
+            fadeTime = Math.max(fadeTime, this.defaultFadeParameters.time);
         const ret = {
             layerClip,
             fadeTime,
@@ -197,11 +192,11 @@ export class Layer {
         return this._influencedPaths;
     }
 }
-function computeFade(params, override, t, fadeTime, before, after) {
+function computeFade(defaults, params, override, t, fadeTime, before, after) {
     // TODO further implementation
-    const paramTime = override?.time ?? params?.time ?? 0;
-    let paramPin = override?.pin ?? params?.pin ?? 0;
-    const reverse = override?.reverse ?? params?.reverse ?? false;
+    const paramTime = override?.time ?? params?.time ?? defaults?.time ?? 0;
+    let paramPin = override?.pin ?? params?.pin ?? defaults?.pin ?? 0;
+    const reverse = override?.reverse ?? params?.reverse ?? defaults?.reverse ?? false;
     if (reverse)
         paramPin = 1 - paramPin;
     const emptyTime = fadeTime - paramTime;
@@ -213,7 +208,7 @@ function computeFade(params, override, t, fadeTime, before, after) {
     let prop = (t - startTime) / paramTime;
     if (reverse)
         prop = 1 - prop;
-    prop = computeEasing(prop, override?.easing ?? params?.easing);
+    prop = computeEasing(prop, override?.easing ?? params?.easing ?? defaults?.easing);
     if (reverse)
         prop = 1 - prop;
     return interpolate(before, after, prop);

package/lib/components/DefaultCookieConsent.d.ts

@@ -0,0 +1,157 @@
+import { Component } from "../component";
+import { ContextManager } from "../context";
+import { Observable } from "../observable";
+export interface DefaultCookieConsentConstructorProps {
+    /**
+     * Show the cookie consent dialog when the experience starts, rather than when the component is initialized.
+     * @zui
+     * @zdefault false
+     */
+    waitForStart: boolean;
+    /**
+     * Only show the cookie consent dialog if the experience contains analytics components that indicate they use cookies.
+     * @zui
+     * @zdefault true
+     */
+    onlyShowIfVendors: boolean;
+    /**
+     * Previews how the consent dialog looks at design time.
+     * @zui
+     * @zdefault false
+     */
+    preview: boolean;
+}
+/**
+ * @zcomponent
+ * @zgroup Cookie Consent
+ * @zicon cookie
+ */
+export declare class DefaultCookieConsent extends Component {
+    constructorProps: DefaultCookieConsentConstructorProps;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "This website uses cookies to store information on your computer."
+     */
+    title: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used."
+     */
+    description: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Privacy Policy"
+     */
+    privacyPolicyText: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault ""
+     */
+    privacyPolicyURL: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "I Accept Cookies"
+     */
+    acceptButton: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "Settings"
+     */
+    settingsButton: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Consent Screen
+     * @zgrouppriority 20
+     * @zdefault "Save"
+     */
+    saveButton: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Essential"
+     */
+    essentialTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that are necessary to provide the service."
+     */
+    essentialDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Functional"
+     */
+    functionalTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that provide you with useful functionality, such as saving your preferences."
+     */
+    functionalDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Performance"
+     */
+    performanceTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that help us measure and understand how the site is being used."
+     */
+    performanceDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Marketing"
+     */
+    marketingTitle: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Cookies that help us market our site and services."
+     */
+    marketingDescription: Observable<string>;
+    /**
+     * @zprop
+     * @zgroup Settings
+     * @zgrouppriority 10
+     * @zdefault "Required"
+     */
+    required: Observable<string>;
+    private _dom;
+    private _functional;
+    private _performance;
+    private _marketing;
+    constructor(contextManager: ContextManager, constructorProps: DefaultCookieConsentConstructorProps);
+    private _loadDOM;
+    private _save;
+    private _createEntry;
+    private _getConsentStatus;
+    private _setConsentStatus;
+    show(isSettings: boolean): void;
+    hide(): void;
+    acceptAll(): void;
+    dispose(): never;
+}

package/lib/components/DefaultCookieConsent.js

@@ -0,0 +1,205 @@
+import { Component } from "../component";
+import { ConsentStatus, CookieConsentContext, CookieType, Status, useCookieConsentFunctional, useCookieConsentMarketing, useCookieConsentPerformance, useMarketingVendors, usePerformanceVendors } from "../contexts/cookieconsentcontext";
+import { isDesignTime } from "../contexts/environmentcontext";
+import { constructed, started } from "../contexts/loadcontext";
+import { Observable } from "../observable";
+const html = `
+<div id='zcomponent-cookieconsent-panel'>
+	<h1 id='zcomponent-cookieconsent-title'></h1>
+	<p id='zcomponent-cookieconsent-description'></p>
+	<a id='zcomponent-cookieconsent-privacypolicy' target='_blank' ref='noreferrer noopener'></a>
+</div>
+`;
+/**
+ * @zcomponent
+ * @zgroup Cookie Consent
+ * @zicon cookie
+ */
+export class DefaultCookieConsent extends Component {
+    constructor(contextManager, constructorProps) {
+        super(contextManager, constructorProps);
+        this.constructorProps = constructorProps;
+        this._dom = document.createElement('div');
+        this._functional = document.createElement('input');
+        this._performance = document.createElement('input');
+        this._marketing = document.createElement('input');
+        const context = contextManager.get(CookieConsentContext);
+        context.functionalCookies.value = this._getConsentStatus(CookieType.functional);
+        context.performanceCookies.value = this._getConsentStatus(CookieType.performance);
+        context.marketingCookies.value = this._getConsentStatus(CookieType.marketing);
+        context.status.value = Status.initialized;
+        context.showSettings.value = () => this.show(true);
+        this._dom.classList.add('zcomponent-cookieconsent');
+        this.privacyPolicyText = new Observable('Privacy Policy');
+        this.privacyPolicyURL = new Observable('');
+        if (constructorProps.waitForStart)
+            started(contextManager).then(() => this.show(false));
+        else
+            constructed(contextManager).then(() => this.show(false));
+    }
+    _loadDOM(isSettings) {
+        this._dom.innerHTML = html;
+        this._functional.type = 'checkbox';
+        this._performance.type = 'checkbox';
+        this._marketing.type = 'checkbox';
+        const panel = this._dom.querySelector('#zcomponent-cookieconsent-panel');
+        if (!panel)
+            return;
+        const title = this._dom.querySelector('#zcomponent-cookieconsent-title');
+        this.title = new Observable('This website uses cookies to store information on your computer.', v => { if (title)
+            title.textContent = v; });
+        const description = this._dom.querySelector('#zcomponent-cookieconsent-description');
+        this.description = new Observable('Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used.', v => { if (description)
+            description.textContent = v; });
+        const privacyPolicy = this._dom.querySelector('#zcomponent-cookieconsent-privacypolicy');
+        this.privacyPolicyText.addListener(val => { if (privacyPolicy && privacyPolicy instanceof HTMLAnchorElement)
+            privacyPolicy.innerText = val; });
+        this.privacyPolicyURL.addListener(val => {
+            if (!privacyPolicy || !(privacyPolicy instanceof HTMLAnchorElement))
+                return;
+            privacyPolicy.style.display = val.length === 0 ? 'none' : 'block';
+            privacyPolicy.href = val;
+        });
+        if (isSettings) {
+            this.essentialTitle = new Observable('Essential');
+            this.essentialDescription = new Observable('Cookies that are necessary to provide the service.');
+            this.functionalTitle = new Observable('Functional');
+            this.functionalDescription = new Observable('Cookies that provide you with useful functionality, such as saving your preferences.');
+            this.performanceTitle = new Observable('Performance');
+            this.performanceDescription = new Observable('Cookies that help us measure and understand how the site is being used.');
+            this.marketingTitle = new Observable('Marketing');
+            this.marketingDescription = new Observable('Cookies that help us market our site and services.');
+            const requiredDOM = document.createElement('span');
+            requiredDOM.innerText = 'Required';
+            this.required = new Observable('Required', val => requiredDOM.innerText = val);
+            requiredDOM.style.float = 'right';
+            panel.appendChild(this._createEntry(this.essentialTitle, this.essentialDescription, [], requiredDOM));
+            panel.appendChild(this._createEntry(this.functionalTitle, this.functionalDescription, [], this._functional));
+            panel.appendChild(this._createEntry(this.performanceTitle, this.performanceDescription, usePerformanceVendors(this.contextManager), this._performance));
+            panel.appendChild(this._createEntry(this.marketingTitle, this.marketingDescription, useMarketingVendors(this.contextManager), this._marketing));
+            this._functional.checked = useCookieConsentFunctional(this.contextManager).value === ConsentStatus.granted;
+            this._performance.checked = useCookieConsentPerformance(this.contextManager).value === ConsentStatus.granted;
+            this._marketing.checked = useCookieConsentMarketing(this.contextManager).value === ConsentStatus.granted;
+            const saveButton = document.createElement('button');
+            saveButton.id = 'zcomponent-cookieconsent-save';
+            this.saveButton = new Observable('Save', v => { saveButton.textContent = v; });
+            panel.appendChild(saveButton);
+            if (!isDesignTime(this.contextManager)) {
+                saveButton.addEventListener('click', () => this._save());
+            }
+            return;
+        }
+        const acceptButton = document.createElement('button');
+        acceptButton.id = 'zcomponent-cookieconsent-accept';
+        this.acceptButton = new Observable('I Accept Cookies', v => { acceptButton.textContent = v; });
+        panel.appendChild(acceptButton);
+        const settingsButton = document.createElement('button');
+        settingsButton.id = 'zcomponent-cookieconsent-settings';
+        this.settingsButton = new Observable('Settings', v => { settingsButton.textContent = v; });
+        settingsButton.addEventListener('click', () => {
+            console.log('Settings click');
+            this._loadDOM(true);
+        });
+        panel.appendChild(settingsButton);
+        if (!isDesignTime(this.contextManager)) {
+            acceptButton.addEventListener('click', () => this.acceptAll());
+        }
+        this._dom.addEventListener('click', () => { });
+    }
+    _save() {
+        this._setConsentStatus(CookieType.essential, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.functional, this._functional.checked ? ConsentStatus.granted : ConsentStatus.rejected);
+        this._setConsentStatus(CookieType.performance, this._performance.checked ? ConsentStatus.granted : ConsentStatus.rejected);
+        this._setConsentStatus(CookieType.marketing, this._marketing.checked ? ConsentStatus.granted : ConsentStatus.rejected);
+        this.hide();
+    }
+    _createEntry(title, description, vendors, elm) {
+        const container = document.createElement('div');
+        container.classList.add('zcomponent-cookieconsent-type');
+        container.appendChild(elm);
+        const header = document.createElement('h3');
+        title.addListener(val => header.innerText = val);
+        container.appendChild(header);
+        const descriptionDom = document.createElement('div');
+        description.addListener(val => descriptionDom.innerText = val);
+        container.appendChild(descriptionDom);
+        if (vendors.length === 0)
+            return container;
+        const ul = document.createElement('ul');
+        for (const vendor of vendors) {
+            const li = document.createElement('li');
+            ul.appendChild(li);
+            const header = document.createElement('h5');
+            header.innerText = vendor.name;
+            li.appendChild(header);
+            li.append(vendor.description);
+            li.append(document.createElement('br'));
+            if (vendor.privacyPolicyUrl?.length > 0) {
+                const privacy = document.createElement('a');
+                this.privacyPolicyText.addListener(val => privacy.innerText = val);
+                privacy.href = vendor.privacyPolicyUrl;
+                privacy.rel = 'noreferrer noopener';
+                privacy.target = '_blank';
+                li.appendChild(privacy);
+            }
+        }
+        container.appendChild(ul);
+        return container;
+    }
+    _getConsentStatus(type) {
+        const val = window.localStorage.getItem('zcomponent-cookieconsent-' + type);
+        if (val === null)
+            return ConsentStatus.unknown;
+        if (val === '1')
+            return ConsentStatus.granted;
+        return ConsentStatus.rejected;
+    }
+    _setConsentStatus(type, status) {
+        if (status === ConsentStatus.unknown)
+            window.localStorage.removeItem('zcomponent-cookieconsent-' + type);
+        else
+            window.localStorage.setItem('zcomponent-cookieconsent-' + type, status === ConsentStatus.granted ? '1' : '0');
+        if (type === CookieType.functional)
+            useCookieConsentFunctional(this.contextManager).value = status;
+        if (type === CookieType.performance)
+            useCookieConsentPerformance(this.contextManager).value = status;
+        if (type === CookieType.marketing)
+            useCookieConsentMarketing(this.contextManager).value = status;
+    }
+    show(isSettings) {
+        const designTimeOverride = isDesignTime(this.contextManager) && (this.constructorProps.preview ?? false);
+        if (isDesignTime(this.contextManager) && !designTimeOverride)
+            return;
+        const context = this.contextManager.get(CookieConsentContext);
+        if (context.functionalCookies.value !== ConsentStatus.unknown &&
+            context.marketingCookies.value !== ConsentStatus.unknown &&
+            context.performanceCookies.value !== ConsentStatus.unknown &&
+            !designTimeOverride)
+            return;
+        this._loadDOM(isSettings);
+        const acceptedEssential = window.localStorage.getItem('zcomponent-cookieconsent-essential');
+        if (acceptedEssential !== null && !designTimeOverride)
+            return;
+        if ((this.constructorProps.onlyShowIfVendors ?? true) && !designTimeOverride) {
+            const performanceVendors = usePerformanceVendors(this.contextManager);
+            const marketingVendors = useMarketingVendors(this.contextManager);
+            if (performanceVendors.length === 0 && marketingVendors.length === 0)
+                return;
+        }
+        document.body.appendChild(this._dom);
+    }
+    hide() {
+        this._dom.remove();
+    }
+    acceptAll() {
+        this._setConsentStatus(CookieType.essential, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.functional, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.performance, ConsentStatus.granted);
+        this._setConsentStatus(CookieType.marketing, ConsentStatus.granted);
+        this.hide();
+    }
+    dispose() {
+        this._dom.remove();
+        return super.dispose();
+    }
+}

package/lib/contexts/cookieconsentcontext.d.ts

@@ -10,6 +10,12 @@ export declare enum ConsentStatus {
     "granted" = "granted",
     "rejected" = "rejected"
 }
+export declare enum CookieType {
+    "essential" = "essential",
+    "functional" = "functional",
+    "performance" = "performance",
+    "marketing" = "marketing"
+}
 export interface Vendor {
     name: string;
     description: string;

package/lib/contexts/cookieconsentcontext.js

@@ -12,6 +12,13 @@ export var ConsentStatus;
     ConsentStatus["granted"] = "granted";
     ConsentStatus["rejected"] = "rejected";
 })(ConsentStatus || (ConsentStatus = {}));
+export var CookieType;
+(function (CookieType) {
+    CookieType["essential"] = "essential";
+    CookieType["functional"] = "functional";
+    CookieType["performance"] = "performance";
+    CookieType["marketing"] = "marketing";
+})(CookieType || (CookieType = {}));
 export class CookieConsentContext extends Context {
     constructor() {
         super(...arguments);

package/lib/contexts/loadcontext.d.ts

@@ -12,11 +12,14 @@ export declare class LoadContext extends Context {
     progressPercent: Observable<number, never>;
     private _startedResolved;
     started: Promise<void>;
+    private _constructedResolved;
+    constructed: Promise<void>;
     private _loadables;
     private _startWhenLoaded;
     private _totalLoadables;
     private _loadedCount;
     start(): void;
+    constructionComplete(): void;
     private _update;
     startWhenLoaded(): void;
     registerLoadable(p: Promise<any>): void;
@@ -32,3 +35,5 @@ export declare function registerLoadable(mgr: ContextManager, p: Promise<any>):
 export declare function start(mgr: ContextManager): void;
 export declare function startWhenLoaded(mgr: ContextManager): void;
 export declare function started(mgr: ContextManager): Promise<void>;
+export declare function constructed(mgr: ContextManager): Promise<void>;
+export declare function constructionComplete(mgr: ContextManager): void;

package/lib/contexts/loadcontext.js

@@ -13,6 +13,7 @@ export class LoadContext extends Context {
         /** @zui */
         this.progressPercent = new Observable(0);
         this.started = new Promise(resolve => this._startedResolved = resolve);
+        this.constructed = new Promise(resolve => this._constructedResolved = resolve);
         this._loadables = new Set();
         this._startWhenLoaded = false;
         this._totalLoadables = 0;
@@ -26,6 +27,10 @@ export class LoadContext extends Context {
         if (document.body)
             document.body.classList.add('zcomponent-started');
     }
+    constructionComplete() {
+        this._constructedResolved();
+        this.isConstructed.value = true;
+    }
     _update() {
         if (this._loadables.size > 0 && this.isLoaded.value === true) {
             this.isLoaded.value = false;
@@ -94,3 +99,9 @@ export function startWhenLoaded(mgr) {
 export function started(mgr) {
     return mgr.get(LoadContext).started;
 }
+export function constructed(mgr) {
+    return mgr.get(LoadContext).constructed;
+}
+export function constructionComplete(mgr) {
+    return mgr.get(LoadContext).constructionComplete();
+}

package/lib/data/animation.d.ts

@@ -51,7 +51,7 @@ export interface Clip {
     tracks: ByID<Track>;
     length: number;
     lengthType: ClipLengthType;
-    defaultFadeParameters?: FadeParameters;
+    defaultFadeParameters?: Partial<FadeParameters>;
     timeSourceTrack?: string;
     scriptName?: string;
 }
@@ -117,7 +117,7 @@ export interface StreamTrack extends BaseTrack {
     data: ByID<StreamTrackEntity>;
     weight: ByID<Keyframe>;
 }
-export interface StreamTrackEntity {
+export interface StreamTrackEntity extends BaseTrack {
     t0: number;
     t1: number;
     s0: number;

package/lib/data/change.d.ts

@@ -41,3 +41,4 @@ export interface NodeDataCombined extends EntityDataCombined {
 export interface BehaviorDataCombined extends EntityDataCombined {
     data: BehaviorData;
 }
+export declare function getUniqueLabel(zcomp: ZComponentData, label: string): string;

package/lib/data/change.js

@@ -350,6 +350,16 @@ export function deleteEntity(zcomp, id) {
             delete zcomp.entityPropOverrides[overrideID];
         }
     }
+    if (zcomp.animation) {
+        for (const clip of Object.values(zcomp.animation.clips)) {
+            if (!clip)
+                continue;
+            for (const track of Object.values(clip.tracks)) {
+                if (track?.entityID === id)
+                    delete clip.tracks[track.id];
+            }
+        }
+    }
 }
 export function forEachNodeAncestor(zcomp, id, fn) {
     const node = zcomp.nodes[id];
@@ -358,3 +368,14 @@ export function forEachNodeAncestor(zcomp, id, fn) {
     fn(node.parent.id);
     forEachNodeAncestor(zcomp, node.parent.id, fn);
 }
+export function getUniqueLabel(zcomp, label) {
+    const existingLabels = zcomp.entitiesByLabel ?? {};
+    for (let i = 1; i < 10000; i++) {
+        const testName = i === 1 ? label : `${label} ${i.toString()}`;
+        if (!Object.prototype.hasOwnProperty.call(existingLabels, testName)) {
+            label = testName;
+            break;
+        }
+    }
+    return label;
+}

package/lib/inflate.js

@@ -94,6 +94,7 @@ export function createLayerClipFromData(zcomp, layer, data) {
 export function createLayerFromData(zcomp, anim, data) {
     const ret = new Layer(anim, data.scriptName, data.id);
     ret.active = undefined;
+    ret.defaultFadeParameters = data.defaultFadeParameters;
     if (data.defaultClip === null)
         ret.active = null;
     for (const layerClip of Object.values(data.clips)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",