@tempots/dom 33.1.1 → 34.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/dom",
-  "version": "33.1.1",
+  "version": "34.1.0",
   "type": "module",
   "main": "./index.cjs",
   "module": "./index.js",
@@ -35,5 +35,8 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fponticelli/tempots.git"
+  },
+  "peerDependencies": {
+    "@tempots/core": "^1.0.0"
   }
 }

package/renderable/attribute.d.ts

@@ -1,5 +1,5 @@
 import { Renderable, SplitNValue } from '../types/domain';
-import { Value } from '../std/value';
+import { Value } from '@tempots/core';
 /**
  * Creates a renderable for an HTML attribute with the specified name and value.
  *
@@ -83,7 +83,7 @@ export declare const attr: {
     draggable: (value: SplitNValue<boolean | "true" | "false">) => Renderable;
     dropzone: (value: SplitNValue<string>) => Renderable;
     enctype: (value: SplitNValue<string>) => Renderable;
-    enterkeyhint: (value: SplitNValue<"search" | "enter" | "done" | "go" | "next" | "previous" | "send">) => Renderable;
+    enterkeyhint: (value: SplitNValue<"enter" | "done" | "go" | "next" | "previous" | "search" | "send">) => Renderable;
     for: (value: SplitNValue<string>) => Renderable;
     form: (value: SplitNValue<string>) => Renderable;
     formaction: (value: SplitNValue<string>) => Renderable;
@@ -93,7 +93,7 @@ export declare const attr: {
     formtarget: (value: SplitNValue<string>) => Renderable;
     headers: (value: SplitNValue<string>) => Renderable;
     height: (value: SplitNValue<string>) => Renderable;
-    hidden: (value: SplitNValue<boolean | "" | "hidden" | "until-found">) => Renderable;
+    hidden: (value: SplitNValue<boolean | "" | "until-found" | "hidden">) => Renderable;
     high: (value: SplitNValue<string>) => Renderable;
     href: (value: SplitNValue<string>) => Renderable;
     hreflang: (value: SplitNValue<string>) => Renderable;
@@ -141,7 +141,7 @@ export declare const attr: {
     playsinline: (value: SplitNValue<boolean>) => Renderable;
     popover: (value: SplitNValue<"" | "auto" | "manual">) => Renderable;
     popovertarget: (value: SplitNValue<string>) => Renderable;
-    popovertargetaction: (value: SplitNValue<"toggle" | "hide" | "show">) => Renderable;
+    popovertargetaction: (value: SplitNValue<"hide" | "show" | "toggle">) => Renderable;
     poster: (value: SplitNValue<string>) => Renderable;
     preload: (value: SplitNValue<string>) => Renderable;
     property: (value: SplitNValue<string>) => Renderable;
@@ -344,7 +344,7 @@ export declare const SVGAttr: (name: string, value: unknown) => Renderable;
 export declare const svgAttr: {
     'accent-height': (value: SplitNValue<string | number>) => Renderable;
     accumulate: (value: SplitNValue<"none" | "sum">) => Renderable;
-    additive: (value: SplitNValue<"replace" | "sum">) => Renderable;
+    additive: (value: SplitNValue<"sum" | "replace">) => Renderable;
     'alignment-baseline': (value: SplitNValue<"auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit">) => Renderable;
     'allow-reorder': (value: SplitNValue<"yes" | "no">) => Renderable;
     alphabetic: (value: SplitNValue<string | number>) => Renderable;
@@ -478,7 +478,7 @@ export declare const svgAttr: {
     orient: (value: SplitNValue<string | number>) => Renderable;
     orientation: (value: SplitNValue<"h" | "v">) => Renderable;
     origin: (value: SplitNValue<string>) => Renderable;
-    overflow: (value: SplitNValue<"hidden" | "scroll" | "auto" | "inherit" | "visible">) => Renderable;
+    overflow: (value: SplitNValue<"auto" | "hidden" | "scroll" | "inherit" | "visible">) => Renderable;
     'overline-position': (value: SplitNValue<string | number>) => Renderable;
     'overline-thickness': (value: SplitNValue<string | number>) => Renderable;
     'paint-order': (value: SplitNValue<string>) => Renderable;
@@ -520,7 +520,7 @@ export declare const svgAttr: {
     specularConstant: (value: SplitNValue<string | number>) => Renderable;
     specularExponent: (value: SplitNValue<string | number>) => Renderable;
     speed: (value: SplitNValue<string | number>) => Renderable;
-    spreadMethod: (value: SplitNValue<"repeat" | "pad" | "reflect">) => Renderable;
+    spreadMethod: (value: SplitNValue<"pad" | "reflect" | "repeat">) => Renderable;
     startOffset: (value: SplitNValue<string | number>) => Renderable;
     stdDeviation: (value: SplitNValue<string | number>) => Renderable;
     stemh: (value: SplitNValue<string | number>) => Renderable;
@@ -548,7 +548,7 @@ export declare const svgAttr: {
     targetX: (value: SplitNValue<string | number>) => Renderable;
     targetY: (value: SplitNValue<string | number>) => Renderable;
     'text-anchor': (value: SplitNValue<"middle" | "inherit" | "start" | "end">) => Renderable;
-    'text-decoration': (value: SplitNValue<"none" | "blink" | "inherit" | "underline" | "overline" | "line-through">) => Renderable;
+    'text-decoration': (value: SplitNValue<"none" | "inherit" | "underline" | "overline" | "line-through" | "blink">) => Renderable;
     textLength: (value: SplitNValue<string | number>) => Renderable;
     'text-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "geometricPrecision" | "optimizeLegibility">) => Renderable;
     title: (value: SplitNValue<string>) => Renderable;
@@ -561,7 +561,7 @@ export declare const svgAttr: {
     'underline-position': (value: SplitNValue<string | number>) => Renderable;
     'underline-thickness': (value: SplitNValue<string | number>) => Renderable;
     unicode: (value: SplitNValue<string>) => Renderable;
-    'unicode-bidi': (value: SplitNValue<"embed" | "plaintext" | "normal" | "inherit" | "isolate" | "bidi-override" | "isolate-override">) => Renderable;
+    'unicode-bidi': (value: SplitNValue<"normal" | "inherit" | "embed" | "isolate" | "bidi-override" | "isolate-override" | "plaintext">) => Renderable;
     'unicode-range': (value: SplitNValue<string>) => Renderable;
     'units-per-em': (value: SplitNValue<string | number>) => Renderable;
     'v-alphabetic': (value: SplitNValue<string | number>) => Renderable;
@@ -590,16 +590,16 @@ export declare const svgAttr: {
     'xlink:arcrole': (value: SplitNValue<string>) => Renderable;
     'xlink:href': (value: SplitNValue<string>) => Renderable;
     'xlink:role': (value: SplitNValue<string>) => Renderable;
-    'xlink:show': (value: SplitNValue<"none" | "other" | "embed" | "replace" | "new">) => Renderable;
+    'xlink:show': (value: SplitNValue<"none" | "other" | "replace" | "embed" | "new">) => Renderable;
     'xlink:title': (value: SplitNValue<string>) => Renderable;
-    'xlink:type': (value: SplitNValue<"none" | "title" | "simple" | "extended" | "locator" | "arc" | "resource">) => Renderable;
+    'xlink:type': (value: SplitNValue<"none" | "simple" | "extended" | "locator" | "arc" | "resource" | "title">) => Renderable;
     xlinkActuate: (value: SplitNValue<"none" | "other" | "onLoad" | "onRequest">) => Renderable;
     xlinkArcrole: (value: SplitNValue<string>) => Renderable;
     xlinkHref: (value: SplitNValue<string>) => Renderable;
     xlinkRole: (value: SplitNValue<string>) => Renderable;
-    xlinkShow: (value: SplitNValue<"none" | "other" | "embed" | "replace" | "new">) => Renderable;
+    xlinkShow: (value: SplitNValue<"none" | "other" | "replace" | "embed" | "new">) => Renderable;
     xlinkTitle: (value: SplitNValue<string>) => Renderable;
-    xlinkType: (value: SplitNValue<"none" | "title" | "simple" | "extended" | "locator" | "arc" | "resource">) => Renderable;
+    xlinkType: (value: SplitNValue<"none" | "simple" | "extended" | "locator" | "arc" | "resource" | "title">) => Renderable;
     'xml:base': (value: SplitNValue<string>) => Renderable;
     'xml:lang': (value: SplitNValue<string>) => Renderable;
     'xml:space': (value: SplitNValue<"default" | "preserve">) => Renderable;
@@ -650,7 +650,7 @@ export declare const MathAttr: (name: string, value: unknown) => Renderable;
 export declare const mathAttr: {
     accent: (value: SplitNValue<string | boolean>) => Renderable;
     accentunder: (value: SplitNValue<string | boolean>) => Renderable;
-    actiontype: (value: SplitNValue<"input" | "statusline" | "tooltip">) => Renderable;
+    actiontype: (value: SplitNValue<"statusline" | "tooltip" | "input">) => Renderable;
     align: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
     altimg: (value: SplitNValue<string>) => Renderable;
     altimgheight: (value: SplitNValue<string>) => Renderable;
@@ -685,16 +685,16 @@ export declare const mathAttr: {
     fontfamily: (value: SplitNValue<string>) => Renderable;
     fontsize: (value: SplitNValue<string>) => Renderable;
     fontstyle: (value: SplitNValue<"normal" | "italic">) => Renderable;
-    fontweight: (value: SplitNValue<"bold" | "normal">) => Renderable;
+    fontweight: (value: SplitNValue<"normal" | "bold">) => Renderable;
     form: (value: SplitNValue<"prefix" | "infix" | "postfix">) => Renderable;
     frame: (value: SplitNValue<string>) => Renderable;
     groupalign: (value: SplitNValue<string>) => Renderable;
     height: (value: SplitNValue<string>) => Renderable;
     href: (value: SplitNValue<string>) => Renderable;
     id: (value: SplitNValue<string>) => Renderable;
-    indentalign: (value: SplitNValue<"left" | "right" | "center" | "id" | "auto">) => Renderable;
-    indentalignfirst: (value: SplitNValue<"left" | "right" | "center" | "id" | "auto" | "indentaling">) => Renderable;
-    indentalignlast: (value: SplitNValue<"left" | "right" | "center" | "id" | "auto" | "indentaling">) => Renderable;
+    indentalign: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id">) => Renderable;
+    indentalignfirst: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id" | "indentaling">) => Renderable;
+    indentalignlast: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id" | "indentaling">) => Renderable;
     indentshift: (value: SplitNValue<string>) => Renderable;
     indentshiftfirst: (value: SplitNValue<string>) => Renderable;
     indentshiftlast: (value: SplitNValue<string>) => Renderable;
@@ -717,7 +717,7 @@ export declare const mathAttr: {
     mathcolor: (value: SplitNValue<string>) => Renderable;
     mathdepth: (value: SplitNValue<string>) => Renderable;
     mathsize: (value: SplitNValue<string>) => Renderable;
-    mathvariant: (value: SplitNValue<"script" | "bold" | "normal" | "italic" | "bold-italic" | "double-struck" | "bold-fraktur" | "bold-script" | "fraktur" | "sans-serif" | "bold-sans-serif" | "sans-serif-italic" | "sans-serif-bold-italic" | "monospace" | "initial" | "tailed" | "looped" | "stretched">) => Renderable;
+    mathvariant: (value: SplitNValue<"normal" | "italic" | "bold" | "bold-italic" | "double-struck" | "bold-fraktur" | "script" | "bold-script" | "fraktur" | "sans-serif" | "bold-sans-serif" | "sans-serif-italic" | "sans-serif-bold-italic" | "monospace" | "initial" | "tailed" | "looped" | "stretched">) => Renderable;
     maxsize: (value: SplitNValue<string>) => Renderable;
     maxwidth: (value: SplitNValue<string>) => Renderable;
     minlabelspacing: (value: SplitNValue<string>) => Renderable;
@@ -728,7 +728,7 @@ export declare const mathAttr: {
     numalign: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
     open: (value: SplitNValue<string>) => Renderable;
     other: (value: SplitNValue<string>) => Renderable;
-    overflow: (value: SplitNValue<"scale" | "scroll" | "linebreak" | "elide" | "truncate">) => Renderable;
+    overflow: (value: SplitNValue<"scale" | "linebreak" | "scroll" | "elide" | "truncate">) => Renderable;
     position: (value: SplitNValue<string>) => Renderable;
     rightoverhang: (value: SplitNValue<string>) => Renderable;
     rowalign: (value: SplitNValue<string>) => Renderable;

package/renderable/bind.d.ts

@@ -1,4 +1,4 @@
-import { Prop } from '../std/signal';
+import { Prop } from '@tempots/core';
 import { Renderable } from '../types/domain';
 import { on } from './on';
 /**

package/renderable/conjunction.d.ts

@@ -1,6 +1,5 @@
-import { Signal } from '../std/signal';
+import { Signal, ElementPosition } from '@tempots/core';
 import { Renderable, TNode } from '../types/domain';
-import { ElementPosition } from '../std/element-position';
 /**
  * Options for configuring a conjunction.
  * @public

package/renderable/domnode.d.ts

@@ -5,7 +5,7 @@ import { Renderable } from '../types/domain';
  *
  * @param node - The DOM node to render.
  * @param ctx - The DOM context to render the node in.
- * @returns A function that can be called to remove the rendered node from the DOM.
+ * @returns A renderable object that can be used to remove the rendered node from the DOM.
  * @public
  */
 export declare const DOMNode: (node: Node) => Renderable<BrowserContext>;

package/renderable/element.d.ts

@@ -12,17 +12,17 @@ export declare const renderableOfTNode: <T extends DOMContext>(child: TNode<T>)
  *
  * @param tagName - The tag name of the HTML element.
  * @param children - The child nodes of the HTML element.
- * @returns A renderable function that creates and appends the HTML element to the DOM.
+ * @returns A renderable object that creates and appends the HTML element to the DOM.
  * @public
  */
 export declare const El: (tagName: string, ...children: TNode[]) => Renderable;
 /**
- * Creates a renderable function that represents an element in the DOM with a specified namespace.
+ * Creates a renderable object that represents an element in the DOM with a specified namespace.
  *
  * @param tagName - The name of the HTML tag for the element.
  * @param namespace - The namespace of the element.
  * @param children - The child nodes of the element.
- * @returns A renderable function that creates and appends the element to the DOM.
+ * @returns A renderable object that creates and appends the element to the DOM.
  * @public
  */
 export declare const ElNS: (tagName: string, namespace: string, ...children: TNode[]) => Renderable;
@@ -165,12 +165,8 @@ export declare const input: {
     time: (...children: TNode[]) => Renderable;
     text: (...children: TNode[]) => Renderable;
     color: (...children: TNode[]) => Renderable;
-    hidden: (...children: TNode[]) => Renderable;
-    button: (...children: TNode[]) => Renderable;
     search: (...children: TNode[]) => Renderable;
-    image: (...children: TNode[]) => Renderable;
-    reset: (...children: TNode[]) => Renderable;
-    submit: (...children: TNode[]) => Renderable;
+    hidden: (...children: TNode[]) => Renderable;
     tel: (...children: TNode[]) => Renderable;
     email: (...children: TNode[]) => Renderable;
     url: (...children: TNode[]) => Renderable;
@@ -178,7 +174,11 @@ export declare const input: {
     radio: (...children: TNode[]) => Renderable;
     file: (...children: TNode[]) => Renderable;
     password: (...children: TNode[]) => Renderable;
+    button: (...children: TNode[]) => Renderable;
+    submit: (...children: TNode[]) => Renderable;
+    reset: (...children: TNode[]) => Renderable;
     range: (...children: TNode[]) => Renderable;
+    image: (...children: TNode[]) => Renderable;
     month: (...children: TNode[]) => Renderable;
     week: (...children: TNode[]) => Renderable;
     "datetime-local": (...children: TNode[]) => Renderable;

package/renderable/empty.d.ts

@@ -1,7 +1,7 @@
 import { Renderable } from '../types/domain';
 /**
- * Represents an empty renderable function.
- * @returns A renderable function that does nothing.
+ * Represents an empty renderable object.
+ * @returns A renderable object that does nothing.
  * @public
  */
 export declare const Empty: Renderable;

package/renderable/ensure.d.ts

@@ -1,6 +1,5 @@
 import { TNode, Renderable } from '../types/domain';
-import { Signal } from '../std/signal';
-import { Value } from '../std/value';
+import { Signal, Value } from '@tempots/core';
 export type NillifyValue<T> = Value<T | null | undefined> | Value<T | undefined> | Value<T | null>;
 export type Id<T> = {} & {
     [P in keyof T]: T[P];

package/renderable/foreach.d.ts

@@ -1,7 +1,5 @@
 import { TNode, Renderable } from '../types/domain';
-import { Signal } from '../std/signal';
-import { ElementPosition } from '../std/element-position';
-import { Value } from '../std/value';
+import { Signal, Value, ElementPosition } from '@tempots/core';
 /**
  * Efficiently renders a dynamic list of items from an array signal.
  *

package/renderable/fragment.d.ts

@@ -8,7 +8,7 @@ import { DOMContext } from '../dom/dom-context';
  * It can be used any time a single Renderable/TNode is expected, but multiple renderables are needed.
  *
  * @param children - The child renderables to include in the fragment.
- * @returns A renderable function that renders the child renderables in the given DOM context.
+ * @returns A renderable object that renders the child renderables in the given DOM context.
  * @public
  */
 export declare const Fragment: <T extends DOMContext>(...children: TNode<T>[]) => Renderable<T>;

package/renderable/map-signal.d.ts

@@ -1,5 +1,5 @@
 import { Renderable, TNode } from '../types/domain';
-import { Value } from '../std/value';
+import { Value } from '@tempots/core';
 /**
  * Maps the values emitted by a signal to a renderable function and returns a new renderable function.
  *

package/renderable/not-empty.d.ts

@@ -1,5 +1,4 @@
-import { Signal } from '../std/signal';
-import { Value } from '../std/value';
+import { Signal, Value } from '@tempots/core';
 import { Renderable } from '../types/domain';
 /**
  * Returns a renderable component that displays the given `display` component

package/renderable/on-dispose.d.ts

@@ -5,9 +5,9 @@ export type WithDispose = {
     dispose: DisposeCallback;
 };
 /**
- * Creates a renderable function that will be called when the component is unmounted.
+ * Creates a renderable object that will be called when the component is unmounted.
  * @param fns - The function(s) to be called when the component is unmounted.
- * @returns A renderable function that takes a DOMContext and returns a function that takes a boolean indicating whether to remove the tree.
+ * @returns A renderable object that takes a DOMContext and returns a function that takes a boolean indicating whether to remove the tree.
  * @public
  */
 export declare const OnDispose: (...fns: (DisposeCallback | WithDispose)[]) => Renderable;

package/renderable/oneof.d.ts

@@ -1,5 +1,4 @@
-import { Signal } from '../std/signal';
-import { Value } from '../std/value';
+import { Signal, Value } from '@tempots/core';
 import { Renderable, TNode } from '../types/domain';
 /**
  * Represents a set of options for a one-of type.

package/renderable/provider.d.ts

@@ -30,7 +30,7 @@ export type ProviderOptions = {
     set: <T, O = any>(provider: Provider<T, O>, options?: O) => void;
 };
 /**
- * Returns a renderable function that executes the given function with the
+ * Returns a renderable object that executes the given function with the
  * current DOMContext as argument.
  * The given function can return a TNode or void. If you need to perform some
  * actions when the Renderable is disposed, you can use `OnDispose` as the

package/renderable/render.d.ts

@@ -1,7 +1,7 @@
 import { Providers, Renderable } from '../types/domain';
 import { DOMContext } from '../dom/dom-context';
 import { HeadlessPortal } from '../dom/headless-context';
-import { Value } from '../std/value';
+import { Value } from '@tempots/core';
 /**
  * Renders the given `renderable` with the provided `ctx` DOM context.
  *
@@ -79,7 +79,7 @@ export type HeadlessOptions = {
 export declare const runHeadless: (makeRenderable: () => Renderable, { startUrl, selector, providers, }?: HeadlessOptions) => {
     clear: (removeTree?: boolean) => void;
     root: HeadlessPortal;
-    currentURL: import('..').Prop<string>;
+    currentURL: import('@tempots/core').Prop<string>;
 };
 /**
  * Represents an error that occurs during rendering.

package/renderable/repeat.d.ts

@@ -1,5 +1,4 @@
-import { ElementPosition } from '../std/element-position';
-import { Value } from '../std/value';
+import { ElementPosition, Value } from '@tempots/core';
 import { TNode, Renderable } from '../types/domain';
 /**
  * Renders content a specified number of times, with each iteration receiving position information.

package/renderable/shadow-root.d.ts

@@ -0,0 +1,9 @@
+import { TNode } from '../types/domain';
+export interface ShadowRootOptions {
+    mode: 'open' | 'closed';
+    delegatesFocus?: boolean;
+    slotAssignment?: 'named' | 'manual';
+    clonable?: boolean;
+    serializable?: boolean;
+}
+export declare function ShadowRoot({ mode, delegatesFocus, slotAssignment, clonable, serializable, }: ShadowRootOptions, ...children: TNode[]): import('..').Renderable;

package/renderable/task.d.ts

@@ -16,7 +16,7 @@ export type TaskOptions<T> = {
  * @typeParam T - The type of the value returned by the task.
  * @param task - The asynchronous task to be executed.
  * @param options - The options for the task or a function that transforms the task result into a renderable node.
- * @returns - A function that renders the task and returns a cleanup function.
+ * @returns - A renderable object that renders the task and returns a cleanup function.
  * @public
  */
 export declare const Task: <T>(task: () => Promise<T>, options: TaskOptions<T> | ((value: T) => TNode)) => Renderable;

package/renderable/text.d.ts

@@ -1,6 +1,5 @@
 import { Renderable } from '../types/domain';
-import { Signal } from '../std/signal';
-import { Value } from '../std/value';
+import { Signal, Value } from '@tempots/core';
 /**
  * @internal
  */

package/renderable/utils.d.ts

@@ -1,7 +1,6 @@
 import { Clear, TNode } from '../types/domain';
 import { DOMContext } from '../dom/dom-context';
-import { Signal } from '../std/signal';
-import { Value } from '../std/value';
+import { Signal, Value } from '@tempots/core';
 /**
  * Helper function to handle a value that could be either a Signal or a static value.
  * Delegates to the appropriate handler based on whether the value is a Signal.

package/renderable/when.d.ts

@@ -1,5 +1,5 @@
 import { Renderable, TNode } from '../types/domain';
-import { Value } from '../std/value';
+import { Value } from '@tempots/core';
 /**
  * Lazily renders content based on a boolean condition.
  * @param condition - The condition to evaluate

package/renderable/with-browser-ctx.d.ts

@@ -1,7 +1,7 @@
 import { BrowserContext } from '../dom/browser-context';
 import { Renderable, TNode } from '../types/domain';
 /**
- * Returns a renderable function that executes the given function with the
+ * Returns a renderable object that executes the given function with the
  * current DOMContext as argument.
  * The given function can return a TNode or void. If you need to perform some
  * actions when the Renderable is disposed, you can use `OnDispose` as the

package/renderable/with-ctx.d.ts

@@ -1,7 +1,7 @@
 import { DOMContext } from '../dom/dom-context';
 import { Renderable, TNode } from '../types/domain';
 /**
- * Returns a renderable function that executes the given function with the
+ * Returns a renderable object that executes the given function with the
  * current DOMContext as argument.
  * The given function can return a TNode or void. If you need to perform some
  * actions when the Renderable is disposed, you can use `OnDispose` as the

package/renderable/with-headless-ctx.d.ts

@@ -1,7 +1,7 @@
 import { HeadlessContext } from '../dom/headless-context';
 import { Renderable, TNode } from '../types/domain';
 /**
- * Returns a renderable function that executes the given function with the current DOMContext as argument.
+ * Returns a renderable object that executes the given function with the current DOMContext as argument.
  *
  * @param fn - The function to be executed with the DOMContext argument.
  * @returns A Clear function that can be used to clean up any resources associated with the execution.

package/renderable/with-scope.d.ts

@@ -1,4 +1,4 @@
-import { DisposalScope } from '../std/disposal-scope';
+import { DisposalScope } from '@tempots/core';
 import { Renderable, TNode } from '../types/domain';
 /**
  * Creates a renderable that provides explicit access to a DisposalScope.

package/types/domain.d.ts

@@ -1,25 +1,35 @@
 import { DOMContext } from '../dom/dom-context';
-import { AnySignal, Computed, Prop, Signal } from '../std/signal';
-import { Value } from '../std/value';
+import { AnySignal, Computed, Prop, Signal, Value, ValueType, BaseValueType, ValueTypes, Values, RemoveSignals, Nil, Clear, ProviderMark, makeProviderMark, Renderable as CoreRenderable } from '@tempots/core';
+export type { Clear, ProviderMark, Value, ValueType, BaseValueType, ValueTypes, Values, RemoveSignals, Nil, AnySignal, Signal, Prop, Computed, };
+export { makeProviderMark };
 /**
- * A function that renders content into the DOM and returns a cleanup function.
+ * Symbol to brand DOM renderables and prevent mixing with other contexts
+ * @public
+ */
+export declare const DOM_RENDERABLE_TYPE: unique symbol;
+/**
+ * A renderable object that can render content into the DOM.
  *
- * Renderables are the fundamental building blocks of Tempo applications. They receive
- * a DOMContext and use it to create DOM elements, text nodes, or other content.
- * The returned Clear function is called when the renderable needs to be removed
- * from the DOM.
+ * Renderables are the fundamental building blocks of Tempo applications. They are
+ * objects with a `render()` method that receives a DOMContext and returns a cleanup
+ * function, and a `type` symbol for runtime type checking.
+ *
+ * This is a specialized version of the core Renderable type for DOM contexts.
  *
  * @example
  * ```typescript
  * // Simple renderable that creates a div
- * const MyComponent: Renderable = (ctx) => {
- *   const divCtx = ctx.makeChildElement('div', undefined)
- *   divCtx.makeChildText('Hello, World!')
- *
- *   // Return cleanup function
- *   return (removeTree) => {
- *     if (removeTree) {
- *       // Cleanup logic here
+ * const MyComponent: Renderable = {
+ *   type: DOM_RENDERABLE_TYPE,
+ *   render: (ctx) => {
+ *     const divCtx = ctx.makeChildElement('div', undefined)
+ *     divCtx.makeChildText('Hello, World!')
+ *
+ *     // Return cleanup function
+ *     return (removeTree) => {
+ *       if (removeTree) {
+ *         // Cleanup logic here
+ *       }
  *     }
  *   }
  * }
@@ -28,26 +38,32 @@ import { Value } from '../std/value';
  * @example
  * ```typescript
  * // Renderable with event listeners
- * const Button: Renderable = (ctx) => {
- *   const buttonCtx = ctx.makeChildElement('button', undefined)
- *   buttonCtx.makeChildText('Click me')
- *
- *   const clearClick = buttonCtx.on('click', () => {
- *     console.log('Button clicked!')
- *   })
- *
- *   return (removeTree) => {
- *     clearClick(removeTree)
+ * const Button: Renderable = {
+ *   type: DOM_RENDERABLE_TYPE,
+ *   render: (ctx) => {
+ *     const buttonCtx = ctx.makeChildElement('button', undefined)
+ *     buttonCtx.makeChildText('Click me')
+ *
+ *     const clearClick = buttonCtx.on('click', () => {
+ *       console.log('Button clicked!')
+ *     })
+ *
+ *     return (removeTree) => {
+ *       clearClick(removeTree)
+ *     }
  *   }
  * }
  * ```
  *
  * @template CTX - The type of DOMContext (defaults to DOMContext)
- * @param ctx - The DOM context for rendering
- * @returns A cleanup function that removes the rendered content when called
  * @public
  */
-export type Renderable<CTX extends DOMContext = DOMContext> = (ctx: CTX) => Clear;
+export type Renderable<CTX extends DOMContext = DOMContext> = CoreRenderable<CTX, typeof DOM_RENDERABLE_TYPE>;
+/**
+ * Helper to create DOM renderables (internal use)
+ * @internal
+ */
+export declare const domRenderable: <CTX extends DOMContext = DOMContext>(renderFn: (ctx: CTX) => Clear) => Renderable<CTX>;
 /**
  * A flexible type representing any content that can be rendered in Tempo.
  *
@@ -112,20 +128,6 @@ export type Renderable<CTX extends DOMContext = DOMContext> = (ctx: CTX) => Clea
  * @public
  */
 export type TNode<CTX extends DOMContext = DOMContext> = Renderable<CTX> | Value<string> | undefined | null | Renderable<CTX>[];
-/**
- * Represents a function that clears a resource.
- * @param removeTree - A boolean value indicating whether to remove the tree associated with the resource.
- * @public
- */
-export type Clear = (removeTree: boolean) => void;
-/**
- * Represents a provider mark.
- * @typeParam T - The type of the mark.
- * @public
- */
-export type ProviderMark<T> = symbol & {
-    readonly __type: T;
-};
 /**
  * Represents a collection of providers.
  * The keys of the record are ProviderMark types, and the values are of unknown type.
@@ -157,46 +159,3 @@ export type Size = {
 export type NValue<T> = Value<NonNullable<T>> | AnySignal<T> | AnySignal<T | null> | AnySignal<T | undefined> | AnySignal<T | null | undefined> | null | undefined;
 type TupleToUnion<T extends unknown[]> = T[number];
 export type SplitNValue<T> = (T extends unknown ? TupleToUnion<NValue<T>[]> : never) | NValue<T>;
-/**
- * Gets the value type of a given Value type.
- * If the type is a `Signal`, it returns the inferred value type.
- * Otherwise, it returns the type itself.
- * @public
- */
-export type ValueType<T> = T extends Computed<infer V> ? V : T extends Prop<infer V> ? V : T extends Signal<infer V> ? V : T;
-/**
- * Gets the base value type of a given Value type.
- * @public
- */
-export type BaseValueType<T> = NonNullable<ValueType<T>>;
-/**
- * Gets the value types of a given array of Value types.
- * @public
- */
-export type ValueTypes<T extends Value<unknown>[]> = {
-    [K in keyof T]: ValueType<T[K]>;
-};
-/**
- * Wraps all non-`Value` types in the array in `Value`.
- * @public
- */
-export type Values<T extends unknown[]> = {
-    [K in keyof T]: T[K] extends Signal<unknown> | Computed<unknown> | Prop<unknown> ? T[K] : Value<T[K]>;
-};
-/**
- * Removes signals from a given object type and returns a new object type
- * with only the non-signal properties.
- *
- * @typeParam T - The input object type.
- * @typeParam K - The keys of the input object type to keep (optional).
- * @public
- */
-export type RemoveSignals<T extends Record<string | number | symbol, Value<unknown>>, K extends (string | number | symbol) & keyof T = keyof T> = {
-    [k in K]: ValueType<T[k]>;
-};
-/**
- * Represents a value that can be null or undefined.
- * @public
- */
-export type Nil = null | undefined;
-export {};