@rusticarcade/palette 0.1.0-rc.5

package/dist/prod/index.d.ts

@@ -0,0 +1,922 @@
+type StateListener<Shape> = (state: Shape) => void;
+/**
+* Powerful and flexible state management with deep reactivity, transaction, and
+* locking support.
+*
+* The State class wraps stateful data and provides an API for mutating the data
+* while listeners subscribe to meaningful updates.
+*
+* Modify state with setters, mutators, transactions, or proxied updates with
+* deep reactivity and array mutation support built in.
+*
+* @example
+*
+* ```typescript
+* const state = new State({count: 1});
+* state.addListener(data => console.log(data))
+*
+* state.set("count", 2); // Prints "2"
+* state.set("count", 2); // Nothing happens, no change
+* state.live.count = 3; // Prints "3"
+* ```
+*/
+declare class State<Shape extends object> {
+	private _data;
+	private _listeners;
+	private _proxy?;
+	private _proxyCache;
+	private _reverseProxyCache;
+	private _isLocked;
+	private _hasWarned;
+	constructor(initialData: Shape, onChange?: StateListener<Shape>);
+	/**
+	* Lazily create and cache proxies into the state for reactive updates on
+	* nested values.
+	*/
+	private _createProxy;
+	private _unwrapProxy;
+	/**
+	* Handle setting nested values and emitting updated data if the value changed
+	*/
+	private _setNested;
+	/**
+	* Process an incoming partial state and emit updates to listeners if there
+	* are any changes detected.
+	*
+	* @remarks
+	* Object.is() to check for differences. Does not attempt deep diffing.
+	*/
+	private _processIncomingState;
+	/**
+	* Emit the current state to all listeners
+	*/
+	private _emit;
+	/**
+	* The current state
+	*
+	* @remarks
+	* This is a direct reference to the internal state. It is marked as Readonly
+	* to help prevent accidental changes. Never edit this value directly.
+	*/
+	get current(): Readonly<Shape>;
+	/**
+	* Proxied access to state properties with automatic reconciliation.
+	*
+	* Allows direct property access for both reading and writing state values.
+	*
+	* @example
+	*
+	* Deep reactivity with the `.live` accessor
+	*
+	* ```typescript
+	* const state = new State({
+	*   nested: {
+	*     values: [1, 2, 3],
+	*   }
+	* });
+	*
+	* // Deep value assignment triggers state updates
+	* state.live.nested.values[1] = 5;
+	*
+	* // Array mutators are automatically reactive as well
+	* state.live.nested.values.push(4);
+	* state.live.nested.values.reverse();
+	* ```
+	*/
+	get live(): Shape;
+	/**
+	* Indicates if this state is currently locked (true) or not (false)
+	*/
+	get isLocked(): boolean;
+	/**
+	* Add a handler function for when this state changes.
+	*
+	* Listeners are invoked in the order they are registered and are passed a
+	* reference to the internally managed state object as a readonly object.
+	*
+	* **Do not modify state values directly**. Instead, use {@link set} or
+	* {@link patch} to make immutable updates.
+	*/
+	addListener: (listener: StateListener<Shape>) => void;
+	/**
+	* Remove a previously registered state handler
+	*/
+	removeListener: (listener: StateListener<Shape>) => void;
+	/**
+	* Get a single value from the state object
+	*
+	* The value is returned as Readonly to prevent accidental state mutations.
+	* To mutate stateful properties, use {@link set} or {@link patch} instead.
+	*
+	* @example
+	*
+	* ```typescript
+	* const state = new State({ count: 1 });
+	* console.log(state.get("count")); // 1
+	* ```
+	*
+	*/
+	get: <K extends keyof Shape>(key: K) => Readonly<Shape[K]>;
+	/**
+	* Returns a deep clone of the current state data using `structuredClone()` to
+	* make the copy.
+	*
+	* The object returned from this function can be edited without modifying the
+	* actual internal state.
+	*
+	* @example
+	*
+	* ```typescript
+	* const snap = state.snapshot();
+	* snap.count += 1;
+	* state.patch(snap);
+	* ```
+	*/
+	snapshot: () => Shape;
+	/**
+	* Set a single stateful property while leaving other properties unchanged.
+	*
+	* Triggers an update to all listeners if the value is different from before
+	* when compared using shallow equality.
+	*
+	* @example
+	*
+	* ```typescript
+	* const state = new State({ count: 1, color: "red" });
+	* state.set("count", 2); // State is now { count: 2, color: "red" }
+	* ```
+	*/
+	set: <K extends keyof Shape>(key: K, value: Shape[K]) => void;
+	/**
+	* Set multiple stateful properties at once, leaving omitted properties
+	* unchanged.
+	*
+	* @example
+	*
+	* Patch a partial state, updating all listed properties at once
+	*
+	* ```typescript
+	* const state = new State({
+	*   weather: "sunny",
+	*   temperature: 30,
+	*   humidity: 70,
+	* });
+	*
+	* // Leaves `temperature` unchanged
+	* state.patch({
+	*   weather: "cloudy",
+	*   humidity: 50,
+	* });
+	* ```
+	*/
+	patch: (patch: Partial<Shape>) => State<Shape>;
+	/**
+	* Fully replace the current state data and force listeners to receive the
+	* updated data immediately.
+	*/
+	replace: (state: Shape) => State<Shape>;
+	/**
+	* Lock this State instance, preventing further external changes
+	*/
+	lock: () => State<Shape>;
+	/**
+	* Unlock this State instance, allowing further external changes
+	*/
+	unlock: () => State<Shape>;
+	/**
+	* Apply complex updates to the state using a mutator function.
+	*
+	* The mutator function takes one parameter which is a structuredClone copy of
+	* the current state object. Whatever is returned by the mutator is then
+	* patched in to the state.
+	*/
+	mutate: (mutator: (current: Shape) => Shape) => State<Shape>;
+	/**
+	* Perform an async mutation of the state, optionally locking the state during
+	* the process.
+	* @param mutator A function to mutate and return the new state
+	* @param lock If `true`, lock the state until the mutator completes
+	*/
+	mutateAsync: (mutator: (current: Shape) => Promise<Shape>, lock?: boolean) => Promise<State<Shape>>;
+	/**
+	* Perform a transaction-style set of actions defined within a function.
+	*
+	* The provided function can do anything, beyond just setting state. Any
+	* uncaught errors thrown from within the function will cause the transaction
+	* to fail and the state to automatically roll back to the last valid state.
+	*
+	* During a transaction, this state instance will be locked, preventing other
+	* changes.
+	*
+	* Transactions will always result in a state update when successful.
+	*
+	* @example
+	*
+	* Transactions with locking and rollback support
+	*
+	* ```typescript
+	* const state = new State({count: 1});
+	*
+	* state.transaction(async (s) => {
+	*   // `s` is a full State object you can safely manipulate
+	*   s.set("count", 10);
+	* });
+	* state.get("count"); // => 10;
+	*
+	* // Errors inside the transaction roll back the state
+	* state.transaction(async (s) => {
+	*   s.set("count", 100);
+	*   throw new Error();
+	* });
+	* state.get("count"); // => 10;
+	*/
+	transaction: (fn: (state: State<Shape>) => void) => boolean;
+	/**
+	* Perform a transaction-style set of actions defined within an async function
+	*
+	* The provided function can do anything, beyond just setting state. Any
+	* uncaught errors thrown from within the function will cause the transaction
+	* to fail and the state to automatically roll back to the last valid state.
+	*
+	* During a transaction, this state instance will be locked, preventing other
+	* changes.
+	*
+	* Transactions will always result in a state update when successful.
+	*
+	* @example
+	*
+	* Transactions with locking and rollback support
+	*
+	* ```typescript
+	* const state = new State({count: 1});
+	*
+	* // Awaiting the result of a transaction
+	* await state.transactionAsync(async (s) => {
+	*   // `s` is a full State object you can safely manipulate
+	*   s.set("count", 10);
+	* });
+	* state.get("count"); // => 10;
+	*
+	* // Errors inside the transaction roll back the state
+	* await state.transactionAsync(async (s) => {
+	*   s.set("count", 100);
+	*   throw new Error();
+	* });
+	* state.get("count"); // => 10;
+	*
+	* // If you forget to await the transaction, its still locked
+	* state.transactionAsync(async (s) => {
+	*   await waitSeconds(1);
+	* });
+	* state.set("count", 1); // Error: State is locked!
+	* ```
+	*/
+	transactionAsync: (fn: (state: State<Shape>) => Promise<void>) => Promise<boolean>;
+}
+type TemplateRoot = HTMLElement | ShadowRoot;
+type TemplateContext = {
+	attr?: Record<string, string | null>;
+	state?: Record<string, unknown>;
+	data?: Record<string, unknown>;
+	item?: Record<string, unknown>;
+	index?: number;
+};
+/**
+* A renderable template from an HTMLTemplateElement
+*
+* Leverages a simple syntax to provide accessors to template data from one of
+* four categories, based on use case:
+*
+* ```
+* `@` -> The `attr` namespace (the host element's attributes)
+* `$` -> The `state` namespace (the host element's reactive state)
+* `*` -> The `data` namespace (the host element's computed data)
+* `#` -> The `item` namespace (list item access with ::each)
+* ```
+*
+* Bind attributes to a value using the `:attribute` syntax:
+*
+* ```html
+* <div :id="$id" :class="@classname"></div>
+* ```
+*/
+declare class Template {
+	/**
+	* Properties related to the global Template build cache.
+	*
+	* This is not something typically needed for general app development, but
+	* allows for advanced configuration to tune the caching system if need be.
+	*
+	* Cache sizes default to 500 HTML Template Fragments and compiled Palette
+	* templates (includes nested templates like lists) to cover most application
+	* needs without using much memory.
+	*/
+	static cache: {
+		/**
+		* Wipe all cached templates and HTML fragments
+		*/
+		clear: () => void;
+		/**
+		* the default cache capacity of 500 items per cache
+		*
+		* General caching guidance:
+		* - 95% of the time, 500 works fine
+		* - For very large applications, up to 1000 is reasonable
+		* - For smaller apps, dropping down to 100 - 250 may save memory
+		*
+		* Ultimately the impact will be minimal unless your app has very specific
+		* rendering needs.
+		*/
+		setCapacity: (maxSize: number) => void;
+	};
+	private _compiled;
+	/**
+	* The original {@link HTMLTemplateElement} used to create this Template.
+	*
+	* @remarks
+	* Make sure to never operate directly on this element. Always clone.
+	*/
+	private _templateElement?;
+	/** The current known root element that this Template is rendered into */
+	private _mountedRoot?;
+	/** The most recent set value for each notation that has rendered */
+	private _latestRenderedValues;
+	/** The active HTMLElement which the template is updating on renders */
+	private _fragment;
+	/** Value Notations -> Set<Render Plans> */
+	private _plansByNotation;
+	/** Value Notations -> Accessor functions */
+	private _notationAccessors;
+	constructor(template: HTMLTemplateElement);
+	/**
+	* Create a full copy of this template for use in rendering to another root
+	*/
+	clone: () => Template;
+	/**
+	* @returns An {@link HTMLTemplateElement} representing this template
+	*/
+	element: () => HTMLTemplateElement;
+	private _collectUpdatedValues;
+	private _update;
+	/**
+	* Render this template into a target host element.
+	*
+	* @remarks
+	* If no context is provided, the root element is used as the context, which
+	* allows for accessing nested properties of the host element itself.
+	*/
+	render: (root: TemplateRoot, context: TemplateContext) => void;
+}
+type EventName = keyof GlobalEventHandlersEventMap;
+type EventHandler<K extends EventName = EventName> = (event: GlobalEventHandlersEventMap[K]) => void;
+interface LiveAttributes<State extends object = {}> {
+	[name: string]: {
+		onChange?: (this: Component<State>, current: string | null, previous: string | null) => void;
+		reflect?: (this: Component<State>) => unknown;
+	};
+}
+type ComputedProperties<StateShape extends object = {}> = Record<string, unknown> | ((this: Component<StateShape>) => Record<string, unknown>);
+type ComponentStyles = CSSStyleSheet | CSSStyleSheet[] | string;
+type AttributeMap = Map<string, string | null>;
+type StateInitializer<Shape extends object = {}> = Shape | State<Shape> | ((this: Component<Shape>) => Shape | State<Shape>);
+/**
+* The **Component** class extends the base HTMLElement class to provide an
+* ergonomic way to design and develop Web Components with reactive state,
+* managed attributes, and dynamic templating.
+*/
+declare abstract class Component<StateShape extends object = {}> extends HTMLElement {
+	/**
+	* Register a Component with the browser. Optionally provide an overriding
+	* tag name.
+	*/
+	static register(component: CustomElementConstructor | typeof Component, tagName?: string): void;
+	/**
+	* The HTML tag name to use for this Component
+	*/
+	static tagName: string;
+	/**
+	* An HTML Template element for this element to use.
+	*/
+	static template: HTMLTemplateElement | Template;
+	/**
+	* A {@link CSSStyleSheet} array to adopt to the element's shadow DOM
+	*/
+	static styles: ComponentStyles;
+	/**
+	* An array of html attribute names to observe to trigger updates.
+	*
+	* @remarks
+	* If you use the {@link define} factory helper, this value will be
+	* automatically merged with a list of any defined {@link liveAttributes}.
+	*/
+	static observedAttributes: string[];
+	/**
+	* The mode for this Component's ShadowRoot.
+	*
+	* - `"open"` allows JS access to the children of this component
+	* - `"closed"` (default) disallows internal JS access
+	*/
+	static shadowRootMode: "closed" | "open";
+	/**
+	* Called immediately before each template update
+	*/
+	protected beforeUpdate?(): void;
+	/**
+	* Called immediately after each template update
+	*/
+	protected afterUpdate?(previousAttributes: Map<string, string | null>): void;
+	/**
+	* Called as the final lifecycle method at the end of the unmounting process.
+	*
+	* Content has been removed from the DOM and the component is no longer
+	* considered mounted when this function runs.
+	*
+	* Use this for final cleanup tasks and freeing resources.
+	*/
+	protected finalize?(): void;
+	/**
+	* If defined, receives errors caught during the lifecycle methods of this
+	* component and it's children. If not defined, this component will instead
+	* throw errors as they are found.
+	*
+	* If the error cannot be handled, `onError()` should re-throw it for a higher
+	* up component to evaluate.
+	*
+	* To display an error message while removing an erroring component from the
+	* DOM, use `this.replaceWith()` and a newly constructed placeholder element.
+	*
+	* @example
+	*
+	* Recovering from errors or displaying a fallback
+	*
+	* ```typescript
+	* onError(error) {
+	*   // Handle known errors
+	*   if (error.message = "Invalid Input") {
+	*     this.state.input = "";
+	*     return;
+	*   }
+	*
+	*   // Display a fallback banner
+	*   const banner = document.createElement("div");
+	*   banner.textContent = "An unexpected error done did";
+	*   this.replaceWith(banner);
+	* }
+	* ```
+	*/
+	protected onError?(error: unknown): void;
+	/**
+	* The initial value for this Component's reactive internal state, if any.
+	*
+	* If `initialState` is defined as a function, the function is evaluated at
+	* mounting time and the return value is used as the initial state.
+	*/
+	protected initialState?: StateInitializer<StateShape>;
+	/**
+	* An object or function returning an object which populates the `data` values
+	* in the templating engine. Such values are accessed using the `*` notation.
+	*
+	* When a hosted value is accessed, it's value is coerced based on the way it
+	* is being used. For attributes, values are serialized to a string or null,
+	* which will set the attribute (string) or remove it (null).
+	*
+	* For content swaps, strings, numbers and booleans are rendered as strings
+	* and set as textContent. null and undefined values render nothing (with a
+	* comment placeholder), an HTMLElement will be swapped in as a cloned node.
+	*
+	* Functions are evaluated at render/update time, and their return value is
+	* used instead. Functions are passed the current target node accessing the
+	* property as its first and only argument.
+	*
+	* Other types are unsupported.
+	*
+	* @example
+	*
+	* ```typescript
+	* host = {
+	*   avatarUrl: "http://...",
+	*   renderTime: () => new Date().toISOString(),
+	* }
+	* ```
+	*
+	* ```html
+	* <img :src="*avatarUrl" />
+	* <span>Rendered at ${"*renderTime"}</span>
+	* ```
+	*/
+	protected computedProperties?: ComputedProperties<StateShape>;
+	/**
+	* Declaration of attribute behaviors during updates.
+	*
+	* Each key is the name of an attribute. Values are an object with two
+	* optional function definitions:
+	*
+	* `onChange(newValue, oldValue): void`, a handler function for when the value
+	* of this attribute has changed. Runs once per update cycle, *before* the
+	* update occurs.
+	*
+	* `reflect(): unknown`, a function which returns a value to serialize and set
+	* as this attribute *after* an update completes.
+	*
+	* @example
+	*
+	* ```typescript
+	* liveAttributes = {
+	*   done: {
+	*     onChange(newValue) {
+	*       this.state.set("done", !!newValue);
+	*     },
+	*     reflect() { return this.state.current.done }
+	*   }
+	* };
+	* ```
+	*
+	* @remarks
+	*
+	* If using the {@link define} helper, the keys of this property are
+	* automatically merged with any defined {@link observedAttributes}.
+	*
+	* If you are directly extending the class, `observedAttributes` must be
+	* explicitly defined with any attributes that should be monitored, regardless
+	* of if they're defined here.
+	*/
+	protected liveAttributes?: LiveAttributes<StateShape>;
+	private _isComponentMounted;
+	private _template;
+	private _root;
+	private _state?;
+	private _delegator?;
+	private _ownListeners;
+	private _liveAttributeConfigs;
+	private _nextListenerAutoId;
+	private _cleanupFn?;
+	private _renderInternals;
+	constructor();
+	/** Produce the data object to pass to the template's render function */
+	private _getRenderContext;
+	private _safeGetState;
+	private _reportError;
+	private _executeAttributeChangeHandlers;
+	private _reflectLiveAttributes;
+	/** The actual update behavior */
+	private _performUpdate;
+	/** Safely request for an update to run on the next frame */
+	private _scheduleUpdate;
+	private _adoptState;
+	/**
+	* @deprecated Use {@link script} instead
+	*/
+	protected connectedCallback(): void;
+	/**
+	* @deprecated use {@link finalize}
+	*/
+	protected disconnectedCallback(): void;
+	/**
+	* @deprecated Use {@link liveAttributes} instead
+	*/
+	protected attributeChangedCallback(name: string, _: string | null, newValue: string | null): void;
+	/**
+	* The ShadowRoot node of this element
+	*/
+	get root(): ShadowRoot;
+	/**
+	* Directly access and manipulate this Component's reactive state with deep
+	* reactivity enabled.
+	*
+	* @example
+	*
+	* ```typescript
+	* initialState = { values: { count: 1, time: 0 } };
+	*
+	* increment() {
+	*   this.state.values.count = 2;
+	* }
+	* ```
+	*
+	* @remarks
+	* This is a shorthand getter for `this.getState().live`
+	*/
+	get state(): StateShape;
+	/**
+	* Replace the current state with a new value or adopt a whole different State
+	* instance
+	*
+	* @example
+	*
+	* State replacement
+	*
+	* ```typescript
+	* // Always triggers a render
+	* this.state = { some: "newState" }
+	*
+	* // Adopt a new state instance altogether
+	* const otherState = new State({some: "newState"});
+	* this.state = otherState;
+	*
+	* // Causes a render
+	* otherState.set("some", "value");
+	* ```
+	*/
+	set state(newState: StateShape | State<StateShape>);
+	/**
+	* Access the full {@link State} instance for this Component.
+	*
+	* Using this method on a component which is not using reactive state
+	* will result in an error being thrown.
+	*
+	* @example
+	*
+	* Retrieve stateful value
+	*
+	* ```typescript
+	* class Example extends Component {
+	*   initialState = { count: 1 };
+	*
+	*   script() {
+	*     const state = this.getState();
+	*     console.log(`The count is ${state.get("count")}`);
+	*   }
+	*
+	* }
+	* ```
+	*
+	* @example
+	*
+	* Set a stateful value
+	*
+	* ```typescript
+	* class Example extends Component {
+	*   initialState = { count: 1 };
+	*
+	*   increment() {
+	*     const state = this.getState();
+	*     const current = state.get("count");
+	*     state.set("count", current + 1);
+	*   }
+	* }
+	* ```
+	*/
+	getState(): State<StateShape>;
+	/**
+	* Manually schedule a render to occur
+	*
+	* @remarks
+	* Calling {@link requestRender} multiple times in the same event loop won't
+	* schedule multiple renders. Renders are scheduled to occur on the next
+	* animation frame.
+	*/
+	requestRender(callback?: VoidFunction): void;
+	/**
+	* Create a managed event listener on this Component with an optional query
+	* filter string to specify which elements to listen to events from.
+	*
+	* Event handlers set up with `listen()` are automatically cleaned up when
+	* the component is unmounted. Event listeners are executed with this instance
+	* as the `this` binding.
+	*
+	* Handlers are delegated to a single listener per event on the root of the
+	* Component, which is the closed ShadowRoot by default.
+	*
+	* @example
+	*
+	* Set up an event listener for a click event from a button with ID "submit"
+	*
+	* ```typescript
+	* this.listen("#submit", "click", this.handleClick);
+	* ```
+	*
+	* @example
+	*
+	* Set up an event listener on the host element itself (`this`).
+	*
+	* ```typescript
+	* // Use ":host" or ":HOST" as the query selector to targe the host element
+	* this.listen(":host", "animationend", this.handler);
+	* ```
+	*/
+	listen<E extends EventName>(targetDescriptor: string | typeof Component<any> | HTMLElement, eventName: E, eventHandler: EventHandler<E>): void;
+	dispatchEvent(event: Event): boolean;
+	/**
+	* Dispatch a {@link CustomEvent} with the specified name and detail
+	*
+	* @example Defining custom events
+	*
+	* ```typescript
+	* // Define types. This can happen in the same file or elsewhere for common
+	* // and shared events.
+	* type MyEvent = CustomEvent<T> // Set `T` to the event detail type
+	*
+	* declare global {
+	*  interface GlobalEventHandlersEventMap {
+	*    "my-event-name": MyEvent
+	*  }
+	* }
+	*
+	* // Dispatch a custom event
+	* this.dispatchEvent("my-event-name", T);
+	*
+	* // Listen to a custom event
+	* $el.addEventListener("my-event-name", ...);
+	* ```
+	*/
+	dispatchEvent<T>(event: string, detail?: T, options?: {
+		bubbles: boolean;
+		cancelable: boolean;
+		composed: boolean;
+	}): boolean;
+	querySelector<E extends HTMLElement>(query: string): E | null;
+	querySelectorAll<E extends HTMLElement>(query: string): NodeListOf<E>;
+	getElementById<E extends HTMLElement>(id: string): E | null;
+	requireElementById<E extends HTMLElement>(id: string): E;
+	setAttribute(name: string, value: string): void;
+	/**
+	* Set a value as an attribute, serializing to a string or `null`.
+	*
+	* null values cause the attribute to be removed from this element
+	*/
+	setAttribute(name: string, value: unknown): void;
+	getAttribute(name: string): string | null;
+	/**
+	* Get an attribute as a number, falling back to a specified default.
+	*
+	*
+	* `null` attributes are returned as `null`, while string attributes are
+	* parsed using the `Number()` constructor.
+	*
+	* Values which evaluate to NaN are returned as `null`.
+	*/
+	getAttribute(name: string, defaultValue: number): number;
+	/**
+	* Get an attribute as a string, falling back to a specified default
+	*/
+	getAttribute(name: string, defaultValue: string): string;
+	/**
+	* Set the value of an attribute on this element if the provided value
+	* differs from the attribute when serialized
+	*/
+	reflectAttribute(name: string, value: unknown): void;
+	/**
+	* Serialize this element to a string
+	*/
+	toString(full?: boolean): string;
+}
+interface ComponentShorthand<StateShape extends object = {}> {
+	/**
+	* An HTML Template element for this element to use.
+	*/
+	template?: HTMLTemplateElement;
+	/**
+	* A {@link CSSStyleSheet} array to adopt to the element's shadow DOM
+	*/
+	styles?: ComponentStyles;
+	/**
+	* The mode for this Component's ShadowRoot.
+	*
+	* - `"open"` allows JS access to the children of this component
+	* - `"closed"` (default) disallows internal JS access
+	*/
+	shadowRootMode?: "closed" | "open";
+	/**
+	* The initial state for this Component's reactive internal state, if any.
+	*/
+	initialState?: StateInitializer<StateShape>;
+	/**
+	* An object or function returning an object which populates the `data` values
+	* in the templating engine. Such values are accessed using the `*` notation.
+	*/
+	computedProperties?: ComputedProperties<StateShape>;
+	/**
+	* Declaration of attribute behaviors during updates.
+	*/
+	liveAttributes?: LiveAttributes<StateShape>;
+	/**
+	* Initialization scripting for this Component
+	*/
+	script?: (this: Component<StateShape>) => VoidFunction | void;
+	/**
+	* Called immediately before each template update
+	*/
+	beforeUpdate?: (this: Component<StateShape>) => void;
+	/**
+	* Called immediately after each template update
+	*/
+	afterUpdate?: (this: Component<StateShape>, previousAttributes: AttributeMap) => void;
+	/**
+	* Called as the final lifecycle method at the end of the unmounting process.
+	*
+	* Content has been removed from the DOM and the component is no longer
+	* considered mounted when this function runs.
+	*
+	* Use this for final cleanup tasks and freeing resources.
+	*/
+	finalize?: (this: Component<StateShape>) => void;
+	/**
+	* If defined, receives errors caught during the lifecycle methods of this
+	* component and it's children. If not defined, this component will instead
+	* throw errors as they are found.
+	*
+	* If the error cannot be handled, `onError()` should re-throw it for a higher
+	* up component to evaluate.
+	*
+	* To display an error message while removing an erroring component from the
+	* DOM, use `this.replaceWith()` and a newly constructed placeholder element.
+	*
+	* @example
+	*
+	* Recovering from errors or displaying a fallback
+	*
+	* ```typescript
+	* onError(error) {
+	*   // Handle known errors
+	*   if (error.message = "Invalid Input") {
+	*     this.state.input = "";
+	*     return;
+	*   }
+	*
+	*   // Display a fallback banner
+	*   const banner = document.createElement("div");
+	*   banner.textContent = "An unexpected error done did";
+	*   this.replaceWith(banner);
+	* }
+	* ```
+	*/
+	onError?: (this: Component<StateShape>, error: unknown) => void;
+}
+declare function define<StateShape extends object = {}>(tagname: string, definition: ComponentShorthand<StateShape>): typeof Component<StateShape>;
+/**
+* An error originating from within a Palette subsystem.
+*
+* In the `development` environment, the error will surface with extended info
+* about the error and any details which may be relevant to help with debugging.
+*
+* In the `production` environment, a minimal error only surfacing the numeric
+* error code is thrown instead.
+*
+* Codes are categorized into groups by the 100's:
+*
+* - 0 - 99: Invariants
+* - 100 - 199: Custom Elements / Environment Errors
+* - 200 - 299: Templating Errors
+* - 300 - 399: Runtime Errors
+*/
+declare class PaletteError extends Error {
+	name: string;
+	code: number;
+	constructor(code: number, ...values: string[]);
+}
+/**
+* @returns An array of {@link CSSStyleSheet}s containing the provided CSS
+*/
+declare function css(strings: TemplateStringsArray, ...values: unknown[]): CSSStyleSheet;
+type ClassValue = string | number | boolean | undefined | null | ClassArray | ClassObject;
+type ClassArray = ClassValue[];
+type ClassObject = Record<string, any>;
+/**
+* Given flexible input, generate a string suitable for setting as an html class
+*
+* @example
+*
+* ```typescript
+* classify("my-class", "another-class") // "my-class another-class"
+* classify(["my-class", "another-class"]) // "my-class another-class"
+* classify({ enabled: true, disabled: false }) // "enabled"
+* ```
+*/
+declare function classify(...args: ClassValue[]): string;
+/**
+* Create an {@link HTMLTemplateElement} from the provided HTML string.
+*
+* These HTML Templates can be used as standard HTML Templates, or as the
+* foundation for a {@link Component} or standalone {@link Template}
+*
+* Interpolates values in the template string to provide helpers for composing
+* templates:
+*
+* - HTMLTemplateElement references are serialized to HTML and inlined
+* - Strings are modified to become <span> tags with the ::swap directive set
+*   to the string value. This is helpful shorthand for content placeholders.
+*
+* @example
+*
+* This template string
+*
+* ```typescript
+* const $template = html`
+* <div :class="*classnames">
+*   ${"@content"}
+* </div>
+* `
+* ```
+*
+* Produces this template element (portrayed as HTML)
+*
+* ```html
+* <template>
+*   <div :class="*classnames">
+*     <span ::swap="@content"></span>
+*   </div>
+* </template>
+* ```
+*/
+declare function html(strings: TemplateStringsArray, ...values: (`@${string}` | `$${string}` | `#${string}` | `*${string}` | HTMLTemplateElement | typeof Component<any>)[]): HTMLTemplateElement;
+export { html, define, css, classify, TemplateRoot, TemplateContext, Template, StateListener, StateInitializer, State, PaletteError, LiveAttributes, EventName, EventHandler, ComputedProperties, ComponentStyles, ComponentShorthand, Component, AttributeMap };