@hypen-space/web 0.4.31 → 0.4.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/accessibility.js +19 -9
- package/dist/canvas/accessibility.js.map +2 -2
- package/dist/canvas/events.d.ts +7 -0
- package/dist/canvas/events.js +53 -17
- package/dist/canvas/events.js.map +3 -3
- package/dist/canvas/index.js +19 -2134
- package/dist/canvas/index.js.map +3 -11
- package/dist/canvas/input.js +19 -9
- package/dist/canvas/input.js.map +2 -2
- package/dist/canvas/layout.js +19 -9
- package/dist/canvas/layout.js.map +2 -2
- package/dist/canvas/paint.d.ts +4 -0
- package/dist/canvas/paint.js +100 -11
- package/dist/canvas/paint.js.map +3 -3
- package/dist/canvas/renderer.js +821 -707
- package/dist/canvas/renderer.js.map +7 -7
- package/dist/canvas/text.js +19 -9
- package/dist/canvas/text.js.map +2 -2
- package/dist/canvas/utils.js +19 -9
- package/dist/canvas/utils.js.map +2 -2
- package/dist/client.js +19 -3863
- package/dist/client.js.map +3 -57
- package/dist/dom/applicators/advanced-layout.js +19 -9
- package/dist/dom/applicators/advanced-layout.js.map +2 -2
- package/dist/dom/applicators/background.js +19 -9
- package/dist/dom/applicators/background.js.map +2 -2
- package/dist/dom/applicators/border.js +19 -9
- package/dist/dom/applicators/border.js.map +2 -2
- package/dist/dom/applicators/color.js +19 -9
- package/dist/dom/applicators/color.js.map +2 -2
- package/dist/dom/applicators/display.js +19 -9
- package/dist/dom/applicators/display.js.map +2 -2
- package/dist/dom/applicators/effects.js +19 -9
- package/dist/dom/applicators/effects.js.map +2 -2
- package/dist/dom/applicators/events.js +26 -10
- package/dist/dom/applicators/events.js.map +3 -3
- package/dist/dom/applicators/font.js +19 -9
- package/dist/dom/applicators/font.js.map +2 -2
- package/dist/dom/applicators/index.js +26 -10
- package/dist/dom/applicators/index.js.map +3 -3
- package/dist/dom/applicators/layout.js +19 -9
- package/dist/dom/applicators/layout.js.map +2 -2
- package/dist/dom/applicators/margin.js +19 -9
- package/dist/dom/applicators/margin.js.map +2 -2
- package/dist/dom/applicators/padding.js +19 -9
- package/dist/dom/applicators/padding.js.map +2 -2
- package/dist/dom/applicators/size.js +19 -9
- package/dist/dom/applicators/size.js.map +2 -2
- package/dist/dom/applicators/transform.js +19 -9
- package/dist/dom/applicators/transform.js.map +2 -2
- package/dist/dom/applicators/transition.js +19 -9
- package/dist/dom/applicators/transition.js.map +2 -2
- package/dist/dom/applicators/typography.js +19 -9
- package/dist/dom/applicators/typography.js.map +2 -2
- package/dist/dom/canvas/index.js +19 -9
- package/dist/dom/canvas/index.js.map +2 -2
- package/dist/dom/components/app.js +19 -9
- package/dist/dom/components/app.js.map +2 -2
- package/dist/dom/components/audio.js +19 -9
- package/dist/dom/components/audio.js.map +2 -2
- package/dist/dom/components/avatar.js +19 -9
- package/dist/dom/components/avatar.js.map +2 -2
- package/dist/dom/components/badge.js +19 -9
- package/dist/dom/components/badge.js.map +2 -2
- package/dist/dom/components/button.js +19 -9
- package/dist/dom/components/button.js.map +2 -2
- package/dist/dom/components/card.js +19 -9
- package/dist/dom/components/card.js.map +2 -2
- package/dist/dom/components/center.js +19 -9
- package/dist/dom/components/center.js.map +2 -2
- package/dist/dom/components/checkbox.js +19 -9
- package/dist/dom/components/checkbox.js.map +2 -2
- package/dist/dom/components/column.js +19 -9
- package/dist/dom/components/column.js.map +2 -2
- package/dist/dom/components/container.js +19 -9
- package/dist/dom/components/container.js.map +2 -2
- package/dist/dom/components/divider.js +19 -9
- package/dist/dom/components/divider.js.map +2 -2
- package/dist/dom/components/grid.js +19 -9
- package/dist/dom/components/grid.js.map +2 -2
- package/dist/dom/components/heading.js +19 -9
- package/dist/dom/components/heading.js.map +2 -2
- package/dist/dom/components/hypenapp.js +19 -9
- package/dist/dom/components/hypenapp.js.map +2 -2
- package/dist/dom/components/image.js +19 -9
- package/dist/dom/components/image.js.map +2 -2
- package/dist/dom/components/index.js +20 -10
- package/dist/dom/components/index.js.map +3 -3
- package/dist/dom/components/input.js +19 -9
- package/dist/dom/components/input.js.map +2 -2
- package/dist/dom/components/link.js +19 -9
- package/dist/dom/components/link.js.map +2 -2
- package/dist/dom/components/list.js +19 -9
- package/dist/dom/components/list.js.map +2 -2
- package/dist/dom/components/paragraph.js +19 -9
- package/dist/dom/components/paragraph.js.map +2 -2
- package/dist/dom/components/progressbar.js +19 -9
- package/dist/dom/components/progressbar.js.map +2 -2
- package/dist/dom/components/route.js +19 -9
- package/dist/dom/components/route.js.map +2 -2
- package/dist/dom/components/router.js +19 -9
- package/dist/dom/components/router.js.map +2 -2
- package/dist/dom/components/row.js +19 -9
- package/dist/dom/components/row.js.map +2 -2
- package/dist/dom/components/select.js +19 -9
- package/dist/dom/components/select.js.map +2 -2
- package/dist/dom/components/slider.js +19 -9
- package/dist/dom/components/slider.js.map +2 -2
- package/dist/dom/components/spacer.js +19 -9
- package/dist/dom/components/spacer.js.map +2 -2
- package/dist/dom/components/spinner.js +19 -9
- package/dist/dom/components/spinner.js.map +2 -2
- package/dist/dom/components/stack.js +19 -9
- package/dist/dom/components/stack.js.map +2 -2
- package/dist/dom/components/switch.js +19 -9
- package/dist/dom/components/switch.js.map +2 -2
- package/dist/dom/components/text.js +19 -9
- package/dist/dom/components/text.js.map +2 -2
- package/dist/dom/components/textarea.js +20 -10
- package/dist/dom/components/textarea.js.map +3 -3
- package/dist/dom/components/video.js +19 -9
- package/dist/dom/components/video.js.map +2 -2
- package/dist/dom/debug.js +19 -9
- package/dist/dom/debug.js.map +2 -2
- package/dist/dom/element-data.js +19 -9
- package/dist/dom/element-data.js.map +2 -2
- package/dist/dom/events.js +28 -18
- package/dist/dom/events.js.map +3 -3
- package/dist/dom/index.js +19 -3682
- package/dist/dom/index.js.map +3 -57
- package/dist/dom/renderer.js +31 -11
- package/dist/dom/renderer.js.map +5 -5
- package/dist/hypen.js +31 -11
- package/dist/hypen.js.map +5 -5
- package/dist/index.js +19 -5810
- package/dist/index.js.map +3 -66
- package/package.json +2 -2
- package/src/canvas/events.ts +35 -8
- package/src/canvas/paint.ts +104 -4
- package/src/dom/applicators/events.ts +11 -2
- package/src/dom/components/textarea.ts +3 -3
- package/src/dom/events.ts +14 -12
- package/src/dom/renderer.ts +8 -1
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -49,4 +59,4 @@ export {
|
|
|
49
59
|
spacerHandler
|
|
50
60
|
};
|
|
51
61
|
|
|
52
|
-
//# debugId=
|
|
62
|
+
//# debugId=91A794B246FBDF7064756E2164756E21
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourcesContent": [
|
|
5
5
|
"/**\n * Spacer Component - Flexible space in flex layouts\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const spacerHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"div\");\n el.style.flex = \"1\";\n el.dataset.hypenType = \"spacer\";\n return el;\n },\n};\n\n\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,kBAAkC;AAAA,IAC7C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,OAAO;AAAA,MAChB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,EAEX;AAAA;",
|
|
8
|
+
"debugId": "91A794B246FBDF7064756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -84,4 +94,4 @@ export {
|
|
|
84
94
|
spinnerHandler
|
|
85
95
|
};
|
|
86
96
|
|
|
87
|
-
//# debugId=
|
|
97
|
+
//# debugId=4A7FD1E767DEE90464756E2164756E21
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourcesContent": [
|
|
5
5
|
"/**\n * Spinner Component (Loading Indicator)\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const spinnerHandler: ComponentHandler = {\n create(): HTMLElement {\n const wrapper = document.createElement(\"div\");\n wrapper.dataset.hypenType = \"spinner\";\n wrapper.style.display = \"inline-block\";\n\n const spinner = document.createElement(\"div\");\n spinner.style.width = \"40px\";\n spinner.style.height = \"40px\";\n spinner.style.border = \"4px solid #f3f3f3\";\n spinner.style.borderTop = \"4px solid #3498db\";\n spinner.style.borderRadius = \"50%\";\n spinner.style.animation = \"spin 1s linear infinite\";\n\n // Add keyframe animation\n const style = document.createElement(\"style\");\n style.textContent = `\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n `;\n \n wrapper.appendChild(style);\n wrapper.appendChild(spinner);\n \n return wrapper;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n const spinner = el.querySelector(\"div:not(style)\") as HTMLElement;\n if (!spinner) return;\n\n // Size\n if (props.size !== undefined) {\n const size = String(props.size);\n const sizeMap: Record<string, string> = {\n small: \"24px\",\n medium: \"40px\",\n large: \"60px\",\n };\n const actualSize = sizeMap[size] || size;\n spinner.style.width = actualSize;\n spinner.style.height = actualSize;\n }\n\n // Color\n if (props.color !== undefined) {\n spinner.style.borderTopColor = String(props.color);\n }\n },\n};\n\n\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,mBAAmC;AAAA,IAC9C,MAAM,GAAgB;AAAA,MACpB,MAAM,UAAU,SAAS,cAAc,KAAK;AAAA,MAC5C,QAAQ,QAAQ,YAAY;AAAA,MAC5B,QAAQ,MAAM,UAAU;AAAA,MAExB,MAAM,UAAU,SAAS,cAAc,KAAK;AAAA,MAC5C,QAAQ,MAAM,QAAQ;AAAA,MACtB,QAAQ,MAAM,SAAS;AAAA,MACvB,QAAQ,MAAM,SAAS;AAAA,MACvB,QAAQ,MAAM,YAAY;AAAA,MAC1B,QAAQ,MAAM,eAAe;AAAA,MAC7B,QAAQ,MAAM,YAAY;AAAA,MAG1B,MAAM,QAAQ,SAAS,cAAc,OAAO;AAAA,MAC5C,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOpB,QAAQ,YAAY,KAAK;AAAA,MACzB,QAAQ,YAAY,OAAO;AAAA,MAE3B,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,UAAU,GAAG,cAAc,gBAAgB;AAAA,MACjD,IAAI,CAAC;AAAA,QAAS;AAAA,MAGd,IAAI,MAAM,SAAS,WAAW;AAAA,QAC5B,MAAM,OAAO,OAAO,MAAM,IAAI;AAAA,QAC9B,MAAM,UAAkC;AAAA,UACtC,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,QACA,MAAM,aAAa,QAAQ,SAAS;AAAA,QACpC,QAAQ,MAAM,QAAQ;AAAA,QACtB,QAAQ,MAAM,SAAS;AAAA,MACzB;AAAA,MAGA,IAAI,MAAM,UAAU,WAAW;AAAA,QAC7B,QAAQ,MAAM,iBAAiB,OAAO,MAAM,KAAK;AAAA,MACnD;AAAA;AAAA,EAEJ;AAAA;",
|
|
8
|
+
"debugId": "4A7FD1E767DEE90464756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -74,4 +84,4 @@ export {
|
|
|
74
84
|
stackHandler
|
|
75
85
|
};
|
|
76
86
|
|
|
77
|
-
//# debugId=
|
|
87
|
+
//# debugId=C1407FA0E87F310464756E2164756E21
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourcesContent": [
|
|
5
5
|
"/**\n * Stack Component - Overlaying elements with absolute positioning\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\n// Inject global styles once\nlet stackStylesInjected = false;\nfunction ensureStackStyles(): void {\n if (stackStylesInjected) return;\n stackStylesInjected = true;\n\n const style = document.createElement(\"style\");\n style.id = \"hypen-stack-styles\";\n style.textContent = `\n [data-hypen-type=\"stack\"] {\n position: relative;\n display: grid;\n grid-template-areas: \"stack\";\n /* Default alignment: top-left (matching iOS/Android ZStack default) */\n justify-items: start;\n align-items: start;\n /* Ensure Stack participates properly in flex layouts (Row/Column) */\n min-width: 0;\n min-height: 0;\n }\n [data-hypen-type=\"stack\"] > * {\n grid-area: stack;\n /* Don't set justify-self/align-self here - let parent's justify-items/align-items control */\n }\n `;\n document.head.appendChild(style);\n}\n\nexport const stackHandler: ComponentHandler = {\n create(): HTMLElement {\n ensureStackStyles();\n\n const el = document.createElement(\"div\");\n el.dataset.hypenType = \"stack\";\n\n return el;\n },\n};\n\n\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,SAAS,iBAAiB,GAAS;AAAA,EACjC,IAAI;AAAA,IAAqB;AAAA,EACzB,sBAAsB;AAAA,EAEtB,MAAM,QAAQ,SAAS,cAAc,OAAO;AAAA,EAC5C,MAAM,KAAK;AAAA,EACX,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBpB,SAAS,KAAK,YAAY,KAAK;AAAA;AAAA,IAxB7B,sBAAsB,OA2Bb;AAAA;AAAA,iBAAiC;AAAA,IAC5C,MAAM,GAAgB;AAAA,MACpB,kBAAkB;AAAA,MAElB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,QAAQ,YAAY;AAAA,MAEvB,OAAO;AAAA;AAAA,EAEX;AAAA;",
|
|
8
|
+
"debugId": "C1407FA0E87F310464756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -102,4 +112,4 @@ export {
|
|
|
102
112
|
switchHandler
|
|
103
113
|
};
|
|
104
114
|
|
|
105
|
-
//# debugId=
|
|
115
|
+
//# debugId=DA4873C0A5D2BB2464756E2164756E21
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourcesContent": [
|
|
5
5
|
"/**\n * Switch Component (Toggle)\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const switchHandler: ComponentHandler = {\n create(): HTMLElement {\n const wrapper = document.createElement(\"label\");\n wrapper.dataset.hypenType = \"switch\";\n wrapper.style.display = \"inline-flex\";\n wrapper.style.alignItems = \"center\";\n wrapper.style.gap = \"8px\";\n wrapper.style.cursor = \"pointer\";\n\n const input = document.createElement(\"input\");\n input.type = \"checkbox\";\n input.dataset.hypenSwitch = \"true\";\n \n // Style the switch\n input.style.appearance = \"none\";\n input.style.width = \"44px\";\n input.style.height = \"24px\";\n input.style.backgroundColor = \"#ccc\";\n input.style.borderRadius = \"12px\";\n input.style.position = \"relative\";\n input.style.cursor = \"pointer\";\n input.style.transition = \"background-color 0.2s\";\n \n // Add pseudo-element styling via CSS\n const style = document.createElement(\"style\");\n style.textContent = `\n input[data-hypen-switch=\"true\"]::before {\n content: \"\";\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: white;\n border-radius: 50%;\n top: 2px;\n left: 2px;\n transition: transform 0.2s;\n }\n input[data-hypen-switch=\"true\"]:checked {\n background-color: #4CAF50;\n }\n input[data-hypen-switch=\"true\"]:checked::before {\n transform: translateX(20px);\n }\n `;\n wrapper.appendChild(style);\n wrapper.appendChild(input);\n \n return wrapper;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n const input = el.querySelector('input[type=\"checkbox\"]') as HTMLInputElement;\n if (!input) return;\n\n // On state (checked)\n if (props.on !== undefined) {\n input.checked = Boolean(props.on);\n }\n\n // Disabled\n if (props.disabled !== undefined) {\n input.disabled = Boolean(props.disabled);\n }\n\n // Label text\n const label = props[\"0\"] || props.label;\n if (label !== undefined) {\n // Remove existing text node if any\n const textNodes = Array.from(el.childNodes).filter(\n node => node.nodeType === Node.TEXT_NODE\n );\n textNodes.forEach(node => node.remove());\n \n // Add new label text\n el.appendChild(document.createTextNode(String(label)));\n }\n },\n};\n\n\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,kBAAkC;AAAA,IAC7C,MAAM,GAAgB;AAAA,MACpB,MAAM,UAAU,SAAS,cAAc,OAAO;AAAA,MAC9C,QAAQ,QAAQ,YAAY;AAAA,MAC5B,QAAQ,MAAM,UAAU;AAAA,MACxB,QAAQ,MAAM,aAAa;AAAA,MAC3B,QAAQ,MAAM,MAAM;AAAA,MACpB,QAAQ,MAAM,SAAS;AAAA,MAEvB,MAAM,QAAQ,SAAS,cAAc,OAAO;AAAA,MAC5C,MAAM,OAAO;AAAA,MACb,MAAM,QAAQ,cAAc;AAAA,MAG5B,MAAM,MAAM,aAAa;AAAA,MACzB,MAAM,MAAM,QAAQ;AAAA,MACpB,MAAM,MAAM,SAAS;AAAA,MACrB,MAAM,MAAM,kBAAkB;AAAA,MAC9B,MAAM,MAAM,eAAe;AAAA,MAC3B,MAAM,MAAM,WAAW;AAAA,MACvB,MAAM,MAAM,SAAS;AAAA,MACrB,MAAM,MAAM,aAAa;AAAA,MAGzB,MAAM,QAAQ,SAAS,cAAc,OAAO;AAAA,MAC5C,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmBpB,QAAQ,YAAY,KAAK;AAAA,MACzB,QAAQ,YAAY,KAAK;AAAA,MAEzB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,QAAQ,GAAG,cAAc,wBAAwB;AAAA,MACvD,IAAI,CAAC;AAAA,QAAO;AAAA,MAGZ,IAAI,MAAM,OAAO,WAAW;AAAA,QAC1B,MAAM,UAAU,QAAQ,MAAM,EAAE;AAAA,MAClC;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,MAAM,WAAW,QAAQ,MAAM,QAAQ;AAAA,MACzC;AAAA,MAGA,MAAM,QAAQ,MAAM,QAAQ,MAAM;AAAA,MAClC,IAAI,UAAU,WAAW;AAAA,QAEvB,MAAM,YAAY,MAAM,KAAK,GAAG,UAAU,EAAE,OAC1C,UAAQ,KAAK,aAAa,KAAK,SACjC;AAAA,QACA,UAAU,QAAQ,UAAQ,KAAK,OAAO,CAAC;AAAA,QAGvC,GAAG,YAAY,SAAS,eAAe,OAAO,KAAK,CAAC,CAAC;AAAA,MACvD;AAAA;AAAA,EAEJ;AAAA;",
|
|
8
|
+
"debugId": "DA4873C0A5D2BB2464756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -60,4 +70,4 @@ export {
|
|
|
60
70
|
textHandler
|
|
61
71
|
};
|
|
62
72
|
|
|
63
|
-
//# debugId=
|
|
73
|
+
//# debugId=0B22EF181751DE4864756E2164756E21
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourcesContent": [
|
|
5
5
|
"/**\n * Text Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const textHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"span\");\n // Use inline-block for proper flex child behavior\n el.style.display = \"inline-block\";\n // Tight line-height to match iOS/Android\n el.style.lineHeight = \"1\";\n // Align to top to remove descender space in flex containers\n el.style.verticalAlign = \"top\";\n el.style.margin = \"0\";\n el.style.padding = \"0\";\n el.dataset.hypenType = \"text\";\n return el;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n // Text content from first positional arg or \"text\" prop\n const text = props[\"0\"] || props.text;\n if (text !== undefined) {\n // Store the original text template for state interpolation\n el.dataset.textTemplate = String(text);\n el.textContent = String(text);\n }\n },\n};\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,gBAAgC;AAAA,IAC3C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,MAAM;AAAA,MAExC,GAAG,MAAM,UAAU;AAAA,MAEnB,GAAG,MAAM,aAAa;AAAA,MAEtB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,MAAM,SAAS;AAAA,MAClB,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAE5D,MAAM,OAAO,MAAM,QAAQ,MAAM;AAAA,MACjC,IAAI,SAAS,WAAW;AAAA,QAEtB,GAAG,QAAQ,eAAe,OAAO,IAAI;AAAA,QACrC,GAAG,cAAc,OAAO,IAAI;AAAA,MAC9B;AAAA;AAAA,EAEJ;AAAA;",
|
|
8
|
+
"debugId": "0B22EF181751DE4864756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -42,7 +52,7 @@ var init_textarea = __esm(() => {
|
|
|
42
52
|
},
|
|
43
53
|
applyProps(el, props) {
|
|
44
54
|
const textarea = el;
|
|
45
|
-
const value = props["0"]
|
|
55
|
+
const value = props.value ?? props["0"];
|
|
46
56
|
if (value !== undefined) {
|
|
47
57
|
textarea.value = String(value);
|
|
48
58
|
}
|
|
@@ -70,4 +80,4 @@ export {
|
|
|
70
80
|
textareaHandler
|
|
71
81
|
};
|
|
72
82
|
|
|
73
|
-
//# debugId=
|
|
83
|
+
//# debugId=BE67C8050DA5C11564756E2164756E21
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/dom/components/textarea.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * Textarea Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const textareaHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"textarea\");\n el.dataset.hypenType = \"textarea\";\n return el as
|
|
5
|
+
"/**\n * Textarea Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const textareaHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"textarea\");\n el.dataset.hypenType = \"textarea\";\n return el as HTMLElement;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n const textarea = el as HTMLTextAreaElement;\n\n // Value property - check named prop first, then positional (consistent with Input)\n const value = props.value ?? props[\"0\"];\n if (value !== undefined) {\n textarea.value = String(value);\n }\n\n // Placeholder\n if (props.placeholder !== undefined) {\n textarea.placeholder = String(props.placeholder);\n }\n\n // Rows\n if (props.rows !== undefined) {\n textarea.rows = Number(props.rows);\n }\n\n // Cols\n if (props.cols !== undefined) {\n textarea.cols = Number(props.cols);\n }\n\n // Disabled\n if (props.disabled !== undefined) {\n textarea.disabled = Boolean(props.disabled);\n }\n\n // Readonly\n if (props.readonly !== undefined) {\n textarea.readOnly = Boolean(props.readonly);\n }\n },\n};\n\n\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,oBAAoC;AAAA,IAC/C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,UAAU;AAAA,MAC5C,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,WAAW;AAAA,MAGjB,MAAM,QAAQ,MAAM,SAAS,MAAM;AAAA,MACnC,IAAI,UAAU,WAAW;AAAA,QACvB,SAAS,QAAQ,OAAO,KAAK;AAAA,MAC/B;AAAA,MAGA,IAAI,MAAM,gBAAgB,WAAW;AAAA,QACnC,SAAS,cAAc,OAAO,MAAM,WAAW;AAAA,MACjD;AAAA,MAGA,IAAI,MAAM,SAAS,WAAW;AAAA,QAC5B,SAAS,OAAO,OAAO,MAAM,IAAI;AAAA,MACnC;AAAA,MAGA,IAAI,MAAM,SAAS,WAAW;AAAA,QAC5B,SAAS,OAAO,OAAO,MAAM,IAAI;AAAA,MACnC;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,SAAS,WAAW,QAAQ,MAAM,QAAQ;AAAA,MAC5C;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,SAAS,WAAW,QAAQ,MAAM,QAAQ;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAAA;",
|
|
8
|
+
"debugId": "BE67C8050DA5C11564756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -70,4 +80,4 @@ export {
|
|
|
70
80
|
videoHandler
|
|
71
81
|
};
|
|
72
82
|
|
|
73
|
-
//# debugId=
|
|
83
|
+
//# debugId=4E65B972535C1B2B64756E2164756E21
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourcesContent": [
|
|
5
5
|
"/**\n * Video Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const videoHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"video\");\n el.dataset.hypenType = \"video\";\n return el as any as HTMLElement;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n const video = el as HTMLVideoElement;\n\n // Source\n const src = props[\"0\"] || props.src;\n if (src !== undefined) {\n video.src = String(src);\n }\n\n // Controls\n if (props.controls !== undefined) {\n video.controls = Boolean(props.controls);\n }\n\n // Autoplay\n if (props.autoplay !== undefined) {\n video.autoplay = Boolean(props.autoplay);\n }\n\n // Loop\n if (props.loop !== undefined) {\n video.loop = Boolean(props.loop);\n }\n\n // Muted\n if (props.muted !== undefined) {\n video.muted = Boolean(props.muted);\n }\n\n // Poster\n if (props.poster !== undefined) {\n video.poster = String(props.poster);\n }\n },\n};\n\n\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,iBAAiC;AAAA,IAC5C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,OAAO;AAAA,MACzC,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,QAAQ;AAAA,MAGd,MAAM,MAAM,MAAM,QAAQ,MAAM;AAAA,MAChC,IAAI,QAAQ,WAAW;AAAA,QACrB,MAAM,MAAM,OAAO,GAAG;AAAA,MACxB;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,MAAM,WAAW,QAAQ,MAAM,QAAQ;AAAA,MACzC;AAAA,MAGA,IAAI,MAAM,aAAa,WAAW;AAAA,QAChC,MAAM,WAAW,QAAQ,MAAM,QAAQ;AAAA,MACzC;AAAA,MAGA,IAAI,MAAM,SAAS,WAAW;AAAA,QAC5B,MAAM,OAAO,QAAQ,MAAM,IAAI;AAAA,MACjC;AAAA,MAGA,IAAI,MAAM,UAAU,WAAW;AAAA,QAC7B,MAAM,QAAQ,QAAQ,MAAM,KAAK;AAAA,MACnC;AAAA,MAGA,IAAI,MAAM,WAAW,WAAW;AAAA,QAC9B,MAAM,SAAS,OAAO,MAAM,MAAM;AAAA,MACpC;AAAA;AAAA,EAEJ;AAAA;",
|
|
8
|
+
"debugId": "4E65B972535C1B2B64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|
package/dist/dom/debug.js
CHANGED
|
@@ -2,27 +2,37 @@ var __defProp = Object.defineProperty;
|
|
|
2
2
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
-
|
|
5
|
+
function __accessProp(key) {
|
|
6
|
+
return this[key];
|
|
7
|
+
}
|
|
6
8
|
var __toCommonJS = (from) => {
|
|
7
|
-
var entry = __moduleCache.get(from), desc;
|
|
9
|
+
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
8
10
|
if (entry)
|
|
9
11
|
return entry;
|
|
10
12
|
entry = __defProp({}, "__esModule", { value: true });
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function")
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (var key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(entry, key))
|
|
16
|
+
__defProp(entry, key, {
|
|
17
|
+
get: __accessProp.bind(from, key),
|
|
18
|
+
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
+
});
|
|
20
|
+
}
|
|
16
21
|
__moduleCache.set(from, entry);
|
|
17
22
|
return entry;
|
|
18
23
|
};
|
|
24
|
+
var __moduleCache;
|
|
25
|
+
var __returnValue = (v) => v;
|
|
26
|
+
function __exportSetter(name, newValue) {
|
|
27
|
+
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
+
}
|
|
19
29
|
var __export = (target, all) => {
|
|
20
30
|
for (var name in all)
|
|
21
31
|
__defProp(target, name, {
|
|
22
32
|
get: all[name],
|
|
23
33
|
enumerable: true,
|
|
24
34
|
configurable: true,
|
|
25
|
-
set: (
|
|
35
|
+
set: __exportSetter.bind(all, name)
|
|
26
36
|
});
|
|
27
37
|
};
|
|
28
38
|
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
@@ -194,4 +204,4 @@ export {
|
|
|
194
204
|
RerenderTracker
|
|
195
205
|
};
|
|
196
206
|
|
|
197
|
-
//# debugId=
|
|
207
|
+
//# debugId=8C572E0EC0BBC39E64756E2164756E21
|
package/dist/dom/debug.js.map
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourcesContent": [
|
|
5
5
|
"/**\n * Debug utilities for DOM rendering visualization\n *\n * Provides heatmap overlays to visualize re-renders\n */\n\nimport { frameworkLoggers } from \"@hypen-space/core/logger\";\n\nconst log = frameworkLoggers.debug;\n\nexport interface DebugConfig {\n /** Enable debug mode */\n enabled: boolean;\n /** Show heatmap overlays on re-renders */\n showHeatmap: boolean;\n /** Increment per re-render (default: 5%) */\n heatmapIncrement: number;\n /** Maximum opacity for heatmap (default: 0.8) */\n maxOpacity: number;\n /** Fade out duration in ms (0 to disable) */\n fadeOutDuration: number;\n}\n\nexport const defaultDebugConfig: DebugConfig = {\n enabled: false,\n showHeatmap: true,\n heatmapIncrement: 5,\n maxOpacity: 0.8,\n fadeOutDuration: 2000,\n};\n\n/**\n * Tracks re-render counts for each element\n */\nexport class RerenderTracker {\n private renderCounts = new Map<string, number>();\n private overlays = new Map<string, HTMLDivElement>();\n private config: DebugConfig;\n\n constructor(config: DebugConfig = defaultDebugConfig) {\n this.config = config;\n }\n\n /**\n * Update the configuration\n */\n setConfig(config: Partial<DebugConfig>): void {\n this.config = { ...this.config, ...config };\n\n // If debug mode is disabled, clean up all overlays\n if (!this.config.enabled) {\n this.cleanup();\n }\n }\n\n /**\n * Track a re-render for an element\n */\n trackRerender(id: string, element: HTMLElement, patchType: string): void {\n if (!this.config.enabled || !this.config.showHeatmap) {\n return;\n }\n\n log.debug(`Tracking re-render: ${id} - ${patchType}`);\n\n // Increment render count\n const currentCount = this.renderCounts.get(id) || 0;\n const newCount = currentCount + 1;\n this.renderCounts.set(id, newCount);\n\n // Create or update heatmap overlay\n this.updateHeatmap(id, element, newCount, patchType);\n }\n\n /**\n * Create or update the heatmap overlay for an element\n */\n private updateHeatmap(id: string, element: HTMLElement, renderCount: number, patchType: string): void {\n // Calculate opacity based on render count (increment by heatmapIncrement% each time)\n const opacity = Math.min(\n (renderCount * this.config.heatmapIncrement) / 100,\n this.config.maxOpacity\n );\n\n log.debug(`Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);\n\n // For inline elements or text, use a simpler approach: background color + outline\n const isInline = window.getComputedStyle(element).display.includes('inline');\n\n if (isInline || element.tagName === 'SPAN') {\n // Store original styles if not already stored\n if (!element.dataset.hypenDebugOriginalBg) {\n element.dataset.hypenDebugOriginalBg = element.style.backgroundColor || '';\n element.dataset.hypenDebugOriginalOutline = element.style.outline || '';\n element.dataset.hypenDebugOriginalPosition = element.style.position || '';\n }\n\n // Apply red background and outline directly to the element\n element.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;\n element.style.outline = `2px solid rgba(255, 0, 0, ${Math.max(opacity + 0.2, 0.3)})`;\n element.style.outlineOffset = '2px';\n element.style.position = 'relative';\n\n // Add count badge as ::before pseudo-element or data attribute\n element.setAttribute('data-hypen-renders', `${renderCount}× ${patchType}`);\n\n // Add CSS for the badge if not already added\n if (!document.getElementById('hypen-debug-styles')) {\n const style = document.createElement('style');\n style.id = 'hypen-debug-styles';\n style.textContent = `\n [data-hypen-renders]::before {\n content: attr(data-hypen-renders);\n position: absolute;\n top: -18px;\n left: 0;\n background: rgba(255, 0, 0, 0.9);\n color: white;\n padding: 2px 6px;\n font-size: 10px;\n font-family: 'Courier New', monospace;\n font-weight: bold;\n border-radius: 3px;\n z-index: 999999;\n pointer-events: none;\n white-space: nowrap;\n text-shadow: none;\n }\n `;\n document.head.appendChild(style);\n }\n\n // Store in overlays map for cleanup\n this.overlays.set(id, element as any);\n\n // Fade out after duration if enabled\n if (this.config.fadeOutDuration > 0) {\n setTimeout(() => {\n const originalBg = element.dataset.hypenDebugOriginalBg || '';\n const originalOutline = element.dataset.hypenDebugOriginalOutline || '';\n element.style.backgroundColor = originalBg;\n element.style.outline = originalOutline;\n element.style.opacity = '1';\n }, this.config.fadeOutDuration);\n }\n } else {\n // For block elements, use overlay approach\n let overlay = this.overlays.get(id);\n\n if (!overlay) {\n overlay = document.createElement(\"div\");\n overlay.className = \"hypen-debug-overlay\";\n overlay.style.cssText = `\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n z-index: 999999 !important;\n transition: opacity ${this.config.fadeOutDuration}ms ease-out;\n border: 2px solid rgba(255, 0, 0, 0.7) !important;\n box-sizing: border-box;\n font-size: 11px;\n color: white;\n text-shadow: 0 0 3px black, 0 0 5px black;\n padding: 4px;\n font-family: 'Courier New', monospace;\n font-weight: bold;\n display: block !important;\n visibility: visible !important;\n `;\n\n const currentPosition = window.getComputedStyle(element).position;\n if (currentPosition === 'static') {\n element.style.position = 'relative';\n }\n\n element.appendChild(overlay);\n this.overlays.set(id, overlay);\n }\n\n overlay.style.backgroundColor = `rgba(255, 0, 0, ${Math.max(opacity, 0.15)})`;\n overlay.style.opacity = '1';\n overlay.textContent = `${renderCount}× ${patchType}`;\n\n if (this.config.fadeOutDuration > 0) {\n setTimeout(() => {\n if (overlay) {\n overlay.style.opacity = '0.2';\n }\n }, this.config.fadeOutDuration);\n }\n }\n }\n\n /**\n * Reset tracking for a specific element\n */\n reset(id: string): void {\n this.renderCounts.delete(id);\n const overlay = this.overlays.get(id);\n if (overlay) {\n overlay.remove();\n this.overlays.delete(id);\n }\n }\n\n /**\n * Reset tracking for all elements\n */\n resetAll(): void {\n this.renderCounts.clear();\n for (const overlay of this.overlays.values()) {\n overlay.remove();\n }\n this.overlays.clear();\n }\n\n /**\n * Get render count for an element\n */\n getRenderCount(id: string): number {\n return this.renderCounts.get(id) || 0;\n }\n\n /**\n * Clean up all overlays (called when debug mode is disabled)\n */\n private cleanup(): void {\n for (const overlay of this.overlays.values()) {\n overlay.remove();\n }\n this.overlays.clear();\n }\n\n /**\n * Get statistics about re-renders\n */\n getStats(): { totalRerenders: number; elementCount: number; avgRerenders: number } {\n const totalRerenders = Array.from(this.renderCounts.values()).reduce((sum, count) => sum + count, 0);\n const elementCount = this.renderCounts.size;\n const avgRerenders = elementCount > 0 ? totalRerenders / elementCount : 0;\n\n return {\n totalRerenders,\n elementCount,\n avgRerenders: Math.round(avgRerenders * 100) / 100,\n };\n }\n}\n"
|
|
6
6
|
],
|
|
7
|
-
"mappings": "
|
|
8
|
-
"debugId": "
|
|
7
|
+
"mappings": "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",
|
|
8
|
+
"debugId": "8C572E0EC0BBC39E64756E2164756E21",
|
|
9
9
|
"names": []
|
|
10
10
|
}
|