@lab206/dom 0.1.0
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/LICENSE +114 -0
- package/README.md +6 -0
- package/dist/bind.d.ts +23 -0
- package/dist/bind.d.ts.map +1 -0
- package/dist/bind.js +170 -0
- package/dist/bind.js.map +1 -0
- package/dist/component.d.ts +47 -0
- package/dist/component.d.ts.map +1 -0
- package/dist/component.js +95 -0
- package/dist/component.js.map +1 -0
- package/dist/dynamic.d.ts +17 -0
- package/dist/dynamic.d.ts.map +1 -0
- package/dist/dynamic.js +68 -0
- package/dist/dynamic.js.map +1 -0
- package/dist/fragment.d.ts +13 -0
- package/dist/fragment.d.ts.map +1 -0
- package/dist/fragment.js +41 -0
- package/dist/fragment.js.map +1 -0
- package/dist/h.d.ts +26 -0
- package/dist/h.d.ts.map +1 -0
- package/dist/h.js +164 -0
- package/dist/h.js.map +1 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +23 -0
- package/dist/index.js.map +1 -0
- package/dist/insert.d.ts +5 -0
- package/dist/insert.d.ts.map +1 -0
- package/dist/insert.js +10 -0
- package/dist/insert.js.map +1 -0
- package/dist/jsx-runtime.d.ts +52 -0
- package/dist/jsx-runtime.d.ts.map +1 -0
- package/dist/jsx-runtime.js +43 -0
- package/dist/jsx-runtime.js.map +1 -0
- package/dist/list.d.ts +23 -0
- package/dist/list.d.ts.map +1 -0
- package/dist/list.js +77 -0
- package/dist/list.js.map +1 -0
- package/dist/mount.d.ts +19 -0
- package/dist/mount.d.ts.map +1 -0
- package/dist/mount.js +40 -0
- package/dist/mount.js.map +1 -0
- package/dist/on.d.ts +8 -0
- package/dist/on.d.ts.map +1 -0
- package/dist/on.js +7 -0
- package/dist/on.js.map +1 -0
- package/dist/props.d.ts +54 -0
- package/dist/props.d.ts.map +1 -0
- package/dist/props.js +211 -0
- package/dist/props.js.map +1 -0
- package/dist/show.d.ts +12 -0
- package/dist/show.d.ts.map +1 -0
- package/dist/show.js +42 -0
- package/dist/show.js.map +1 -0
- package/package.json +71 -0
- package/src/bind.ts +195 -0
- package/src/component.ts +127 -0
- package/src/dynamic.ts +93 -0
- package/src/fragment.ts +43 -0
- package/src/h.ts +236 -0
- package/src/index.ts +54 -0
- package/src/insert.ts +14 -0
- package/src/jsx-runtime.ts +100 -0
- package/src/list.ts +111 -0
- package/src/mount.ts +46 -0
- package/src/on.ts +31 -0
- package/src/props.ts +259 -0
- package/src/show.ts +52 -0
- package/src/test-setup.ts +17 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
Business Source License 1.1
|
|
2
|
+
|
|
3
|
+
Parameters
|
|
4
|
+
|
|
5
|
+
Licensor: Scott Powers
|
|
6
|
+
|
|
7
|
+
Licensed Work: Powers
|
|
8
|
+
The Licensed Work is (c) 2026 Scott Powers
|
|
9
|
+
|
|
10
|
+
Additional Use Grant: You may make production use of the Licensed Work,
|
|
11
|
+
provided You do not use the Licensed Work for a
|
|
12
|
+
Competing Offering.
|
|
13
|
+
|
|
14
|
+
A “Competing Offering” is a product, hosted service,
|
|
15
|
+
library, framework, design system, or documentation
|
|
16
|
+
site whose primary purpose is to provide a
|
|
17
|
+
general-purpose UI runtime, component library, or
|
|
18
|
+
design-system kit that substitutes for the Licensed
|
|
19
|
+
Work (including rebranded or forked distributions
|
|
20
|
+
marketed as a competing UI kit or “Powers
|
|
21
|
+
alternative”).
|
|
22
|
+
|
|
23
|
+
Building end-user applications, internal tools, or
|
|
24
|
+
client project work *with* the Licensed Work is
|
|
25
|
+
allowed and is not a Competing Offering.
|
|
26
|
+
|
|
27
|
+
Change Date: Four years from the first public release of each
|
|
28
|
+
version of the Licensed Work, or 2030-08-15,
|
|
29
|
+
whichever is earlier for that version
|
|
30
|
+
|
|
31
|
+
Change License: Apache License, Version 2.0
|
|
32
|
+
|
|
33
|
+
For information about alternative licensing arrangements for the Software,
|
|
34
|
+
see LICENSE-COMMERCIAL.md or contact the Licensor.
|
|
35
|
+
|
|
36
|
+
Notice
|
|
37
|
+
|
|
38
|
+
The Business Source License (this document, or the “License”) is not an Open
|
|
39
|
+
Source license. However, the Licensed Work will eventually be made available
|
|
40
|
+
under an Open Source License, as stated in this License.
|
|
41
|
+
|
|
42
|
+
License text copyright (c) 2017 MariaDB Corporation Ab, All Rights Reserved.
|
|
43
|
+
“Business Source License” is a trademark of MariaDB Corporation Ab.
|
|
44
|
+
|
|
45
|
+
-----------------------------------------------------------------------------
|
|
46
|
+
|
|
47
|
+
Business Source License 1.1
|
|
48
|
+
|
|
49
|
+
Terms
|
|
50
|
+
|
|
51
|
+
The Licensor hereby grants you the right to copy, modify, create derivative
|
|
52
|
+
works, redistribute, and make non-production use of the Licensed Work. The
|
|
53
|
+
Licensor may make an Additional Use Grant, above, permitting limited
|
|
54
|
+
production use.
|
|
55
|
+
|
|
56
|
+
Effective on the Change Date, or the fourth anniversary of the first publicly
|
|
57
|
+
available distribution of a specific version of the Licensed Work under this
|
|
58
|
+
License, whichever comes first, the Licensor hereby grants you rights under
|
|
59
|
+
the terms of the Change License, and the rights granted in the paragraph
|
|
60
|
+
above terminate.
|
|
61
|
+
|
|
62
|
+
If your use of the Licensed Work does not comply with the requirements
|
|
63
|
+
currently in effect as described in this License, you must purchase a
|
|
64
|
+
commercial license from the Licensor, its affiliated entities, or authorized
|
|
65
|
+
resellers, or you must refrain from using the Licensed Work.
|
|
66
|
+
|
|
67
|
+
All copies of the original and modified Licensed Work, and derivative works
|
|
68
|
+
of the Licensed Work, are subject to this License. This License applies
|
|
69
|
+
separately for each version of the Licensed Work and the Change Date may vary
|
|
70
|
+
for each version of the Licensed Work released by Licensor.
|
|
71
|
+
|
|
72
|
+
You must conspicuously display this License on each original or modified copy
|
|
73
|
+
of the Licensed Work. If you receive the Licensed Work in original or
|
|
74
|
+
modified form from a third party, the terms and conditions set forth in this
|
|
75
|
+
License apply to your use of that work.
|
|
76
|
+
|
|
77
|
+
Any use of the Licensed Work in violation of this License will automatically
|
|
78
|
+
terminate your rights under this License for the current and all other
|
|
79
|
+
versions of the Licensed Work.
|
|
80
|
+
|
|
81
|
+
This License does not grant you any right in any trademark or logo of
|
|
82
|
+
Licensor or its affiliates (provided that you may use a trademark or logo of
|
|
83
|
+
Licensor as expressly required by this License).
|
|
84
|
+
|
|
85
|
+
TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON
|
|
86
|
+
AN “AS IS” BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS,
|
|
87
|
+
EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF
|
|
88
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND
|
|
89
|
+
TITLE.
|
|
90
|
+
|
|
91
|
+
MariaDB hereby grants you permission to use this License’s text to license
|
|
92
|
+
your works, and to refer to it using the trademark “Business Source License”,
|
|
93
|
+
as long as you comply with the Covenants of Licensor below.
|
|
94
|
+
|
|
95
|
+
Covenants of Licensor
|
|
96
|
+
|
|
97
|
+
In consideration of the right to use this License’s text and the “Business
|
|
98
|
+
Source License” name and trademark, Licensor covenants to MariaDB, and to all
|
|
99
|
+
other recipients of the licensed work to be provided by Licensor:
|
|
100
|
+
|
|
101
|
+
1. To specify as the Change License the GPL Version 2.0 or any later version,
|
|
102
|
+
or a license that is compatible with GPL Version 2.0 or a later version,
|
|
103
|
+
where “compatible” means that software provided under the Change License can
|
|
104
|
+
be included in a program with software provided under GPL Version 2.0 or a
|
|
105
|
+
later version. Licensor may specify additional Change Licenses without
|
|
106
|
+
limitation.
|
|
107
|
+
|
|
108
|
+
2. To either: (a) specify an additional grant of rights to use that does not
|
|
109
|
+
impose any additional restriction on the right granted in this License, as
|
|
110
|
+
the Additional Use Grant; or (b) insert the text “None”.
|
|
111
|
+
|
|
112
|
+
3. To specify a Change Date.
|
|
113
|
+
|
|
114
|
+
4. Not to modify this License in any other way.
|
package/README.md
ADDED
package/dist/bind.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type Dispose } from "@lab206/core";
|
|
2
|
+
/** Reactive text content of an Element or Text node. */
|
|
3
|
+
export declare function bindText(node: Element | Text, get: () => string | number | boolean | null | undefined): Dispose;
|
|
4
|
+
/**
|
|
5
|
+
* Reactive attribute. `false` / `null` / `undefined` removes the attribute.
|
|
6
|
+
* `true` sets a boolean attribute to `""`.
|
|
7
|
+
*/
|
|
8
|
+
export declare function bindAttr(el: Element, name: string, get: () => string | number | boolean | null | undefined): Dispose;
|
|
9
|
+
/** Reactive DOM property (e.g. `value`, `checked`, `disabled`). */
|
|
10
|
+
export declare function bindProp<T>(el: Element, name: string, get: () => T): Dispose;
|
|
11
|
+
/**
|
|
12
|
+
* Reactive className.
|
|
13
|
+
* - string → full className
|
|
14
|
+
* - record → toggles keys by truthiness (merged onto base if second arg)
|
|
15
|
+
*/
|
|
16
|
+
export declare function bindClass(el: Element, get: () => string | Record<string, boolean | undefined | null> | null | undefined): Dispose;
|
|
17
|
+
/**
|
|
18
|
+
* Reactive inline styles.
|
|
19
|
+
* Pass a partial style object; keys are CSS properties (camelCase or kebab-case).
|
|
20
|
+
* `null` / `undefined` values clear that property.
|
|
21
|
+
*/
|
|
22
|
+
export declare function bindStyle(el: HTMLElement | SVGElement, get: () => Record<string, string | number | null | undefined> | null | undefined): Dispose;
|
|
23
|
+
//# sourceMappingURL=bind.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bind.d.ts","sourceRoot":"","sources":["../src/bind.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,cAAc,CAAC;AAEpD,wDAAwD;AACxD,wBAAgB,QAAQ,CACtB,IAAI,EAAE,OAAO,GAAG,IAAI,EACpB,GAAG,EAAE,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GACtD,OAAO,CAUT;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CACtB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GACtD,OAAO,CAWT;AAED,mEAAmE;AACnE,wBAAgB,QAAQ,CAAC,CAAC,EACxB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,CAAC,GACX,OAAO,CAST;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,EAAE,EAAE,OAAO,EACX,GAAG,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,GAChF,OAAO,CAiBT;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,EAAE,EAAE,WAAW,GAAG,UAAU,EAC5B,GAAG,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,IAAI,GAAG,SAAS,GAC/E,OAAO,CA2BT"}
|
package/dist/bind.js
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import { effect } from "@lab206/core";
|
|
2
|
+
/** Reactive text content of an Element or Text node. */
|
|
3
|
+
export function bindText(node, get) {
|
|
4
|
+
return effect(() => {
|
|
5
|
+
const value = get();
|
|
6
|
+
const text = value == null ? "" : String(value);
|
|
7
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
8
|
+
node.data = text;
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
node.textContent = text;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Reactive attribute. `false` / `null` / `undefined` removes the attribute.
|
|
17
|
+
* `true` sets a boolean attribute to `""`.
|
|
18
|
+
*/
|
|
19
|
+
export function bindAttr(el, name, get) {
|
|
20
|
+
return effect(() => {
|
|
21
|
+
const value = get();
|
|
22
|
+
if (value === false || value == null) {
|
|
23
|
+
el.removeAttribute(name);
|
|
24
|
+
}
|
|
25
|
+
else if (value === true) {
|
|
26
|
+
el.setAttribute(name, "");
|
|
27
|
+
}
|
|
28
|
+
else {
|
|
29
|
+
el.setAttribute(name, String(value));
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
/** Reactive DOM property (e.g. `value`, `checked`, `disabled`). */
|
|
34
|
+
export function bindProp(el, name, get) {
|
|
35
|
+
return effect(() => {
|
|
36
|
+
const next = get();
|
|
37
|
+
const rec = el;
|
|
38
|
+
// Skip no-ops — assigning input.value every keystroke resets the caret
|
|
39
|
+
if (rec[name] !== next) {
|
|
40
|
+
rec[name] = next;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Reactive className.
|
|
46
|
+
* - string → full className
|
|
47
|
+
* - record → toggles keys by truthiness (merged onto base if second arg)
|
|
48
|
+
*/
|
|
49
|
+
export function bindClass(el, get) {
|
|
50
|
+
return effect(() => {
|
|
51
|
+
const value = get();
|
|
52
|
+
if (value == null || value === "") {
|
|
53
|
+
el.className = "";
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (typeof value === "string") {
|
|
57
|
+
el.className = value;
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
const parts = [];
|
|
61
|
+
for (const key of Object.keys(value)) {
|
|
62
|
+
if (value[key])
|
|
63
|
+
parts.push(key);
|
|
64
|
+
}
|
|
65
|
+
el.className = parts.join(" ");
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Reactive inline styles.
|
|
70
|
+
* Pass a partial style object; keys are CSS properties (camelCase or kebab-case).
|
|
71
|
+
* `null` / `undefined` values clear that property.
|
|
72
|
+
*/
|
|
73
|
+
export function bindStyle(el, get) {
|
|
74
|
+
let prevKeys = [];
|
|
75
|
+
return effect(() => {
|
|
76
|
+
const styles = get() ?? {};
|
|
77
|
+
const nextKeys = Object.keys(styles);
|
|
78
|
+
for (const key of prevKeys) {
|
|
79
|
+
if (!(key in styles)) {
|
|
80
|
+
setStyleProp(el, key, "");
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
for (const key of nextKeys) {
|
|
84
|
+
const value = styles[key];
|
|
85
|
+
if (value == null) {
|
|
86
|
+
setStyleProp(el, key, "");
|
|
87
|
+
}
|
|
88
|
+
else if (typeof value === "number") {
|
|
89
|
+
setStyleProp(el, key, toCssValue(key.includes("-")
|
|
90
|
+
? key.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
|
|
91
|
+
: key, value));
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
setStyleProp(el, key, String(value));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
prevKeys = nextKeys;
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
/** CSS props that accept unitless numbers (like React). Everything else gets `px`. */
|
|
101
|
+
const UNITLESS = new Set([
|
|
102
|
+
"animationIterationCount",
|
|
103
|
+
"aspectRatio",
|
|
104
|
+
"borderImageOutset",
|
|
105
|
+
"borderImageSlice",
|
|
106
|
+
"borderImageWidth",
|
|
107
|
+
"boxFlex",
|
|
108
|
+
"boxFlexGroup",
|
|
109
|
+
"boxOrdinalGroup",
|
|
110
|
+
"columnCount",
|
|
111
|
+
"columns",
|
|
112
|
+
"flex",
|
|
113
|
+
"flexGrow",
|
|
114
|
+
"flexPositive",
|
|
115
|
+
"flexShrink",
|
|
116
|
+
"flexNegative",
|
|
117
|
+
"flexOrder",
|
|
118
|
+
"gridArea",
|
|
119
|
+
"gridRow",
|
|
120
|
+
"gridRowEnd",
|
|
121
|
+
"gridRowSpan",
|
|
122
|
+
"gridRowStart",
|
|
123
|
+
"gridColumn",
|
|
124
|
+
"gridColumnEnd",
|
|
125
|
+
"gridColumnSpan",
|
|
126
|
+
"gridColumnStart",
|
|
127
|
+
"fontWeight",
|
|
128
|
+
"lineClamp",
|
|
129
|
+
"lineHeight",
|
|
130
|
+
"opacity",
|
|
131
|
+
"order",
|
|
132
|
+
"orphans",
|
|
133
|
+
"tabSize",
|
|
134
|
+
"widows",
|
|
135
|
+
"zIndex",
|
|
136
|
+
"zoom",
|
|
137
|
+
"fillOpacity",
|
|
138
|
+
"floodOpacity",
|
|
139
|
+
"stopOpacity",
|
|
140
|
+
"strokeDasharray",
|
|
141
|
+
"strokeDashoffset",
|
|
142
|
+
"strokeMiterlimit",
|
|
143
|
+
"strokeOpacity",
|
|
144
|
+
"strokeWidth",
|
|
145
|
+
]);
|
|
146
|
+
function toCssValue(key, value) {
|
|
147
|
+
if (typeof value === "number") {
|
|
148
|
+
if (value === 0 || UNITLESS.has(key))
|
|
149
|
+
return String(value);
|
|
150
|
+
return `${value}px`;
|
|
151
|
+
}
|
|
152
|
+
return value;
|
|
153
|
+
}
|
|
154
|
+
function setStyleProp(el, key, value) {
|
|
155
|
+
// Support both camelCase and kebab-case.
|
|
156
|
+
if (key.startsWith("--")) {
|
|
157
|
+
el.style.setProperty(key, value);
|
|
158
|
+
return;
|
|
159
|
+
}
|
|
160
|
+
const camel = key.includes("-")
|
|
161
|
+
? key.replace(/-([a-z])/g, (_, c) => c.toUpperCase())
|
|
162
|
+
: key;
|
|
163
|
+
// value may already be stringified; re-apply unit rule when it's a bare number
|
|
164
|
+
const asNum = Number(value);
|
|
165
|
+
const final = value !== "" && Number.isFinite(asNum) && String(asNum) === value.trim()
|
|
166
|
+
? toCssValue(camel, asNum)
|
|
167
|
+
: value;
|
|
168
|
+
el.style[camel] = final;
|
|
169
|
+
}
|
|
170
|
+
//# sourceMappingURL=bind.js.map
|
package/dist/bind.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"bind.js","sourceRoot":"","sources":["../src/bind.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import type { Child } from "./h.js";
|
|
2
|
+
import { type ListOptions } from "./list.js";
|
|
3
|
+
import { type ReactiveProps } from "./props.js";
|
|
4
|
+
export type ComponentProps<P extends object> = ReactiveProps<P & {
|
|
5
|
+
children?: unknown;
|
|
6
|
+
}>;
|
|
7
|
+
export type ComponentSetup<P extends object> = (props: ComponentProps<P>) => Node | DocumentFragment | null | undefined;
|
|
8
|
+
export type Component<P extends object = Record<string, never>> = (props?: P & {
|
|
9
|
+
children?: unknown;
|
|
10
|
+
}) => Node | DocumentFragment | null | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Declare a function component with **reactive props**.
|
|
13
|
+
*
|
|
14
|
+
* Setup runs **once** per instance. Reading `props.x` inside effects /
|
|
15
|
+
* JSX reactive scopes tracks the parent's signal or accessor.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* const Hello = component((props: { name: string }) => (
|
|
20
|
+
* <p>{() => `Hello, ${props.name}`}</p>
|
|
21
|
+
* ));
|
|
22
|
+
*
|
|
23
|
+
* // Live updates — pass a signal or accessor:
|
|
24
|
+
* <Hello name={name} />
|
|
25
|
+
* <Hello name={() => user().name} />
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare function component<P extends object>(setup: ComponentSetup<P>): Component<P>;
|
|
29
|
+
/**
|
|
30
|
+
* Conditional render for JSX.
|
|
31
|
+
* `when` may be a boolean, signal, or zero-arg accessor — unwrapped on read
|
|
32
|
+
* when used with reactive props / JSX.
|
|
33
|
+
*/
|
|
34
|
+
export declare function Show(props: {
|
|
35
|
+
when: boolean | (() => boolean);
|
|
36
|
+
children: (() => Node) | Node | Child;
|
|
37
|
+
fallback?: (() => Node) | Node | Child;
|
|
38
|
+
}): HTMLElement;
|
|
39
|
+
/**
|
|
40
|
+
* Keyed list for JSX.
|
|
41
|
+
*/
|
|
42
|
+
export declare function For<T>(props: {
|
|
43
|
+
each: readonly T[] | (() => readonly T[]);
|
|
44
|
+
children: (item: () => T, index: () => number) => Node;
|
|
45
|
+
key?: ListOptions<T>["key"];
|
|
46
|
+
}): HTMLElement;
|
|
47
|
+
//# sourceMappingURL=component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAGpC,OAAO,EAAQ,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;AACnD,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,aAAa,CAC1D,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAC3B,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,CAC7C,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,KACrB,IAAI,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,IAAI,CAChE,KAAK,CAAC,EAAE,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,KAC/B,IAAI,GAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;AAEhD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EACxC,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GACvB,SAAS,CAAC,CAAC,CAAC,CAgBd;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAC1B,IAAI,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;CACxC,GAAG,WAAW,CA0Cd;AAED;;GAEG;AACH,wBAAgB,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE;IAC5B,IAAI,EAAE,SAAS,CAAC,EAAE,GAAG,CAAC,MAAM,SAAS,CAAC,EAAE,CAAC,CAAC;IAC1C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,MAAM,KAAK,IAAI,CAAC;IACvD,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CAC7B,GAAG,WAAW,CAWd"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { h } from "./h.js";
|
|
2
|
+
import { show } from "./show.js";
|
|
3
|
+
import { list } from "./list.js";
|
|
4
|
+
import { createProps } from "./props.js";
|
|
5
|
+
/**
|
|
6
|
+
* Declare a function component with **reactive props**.
|
|
7
|
+
*
|
|
8
|
+
* Setup runs **once** per instance. Reading `props.x` inside effects /
|
|
9
|
+
* JSX reactive scopes tracks the parent's signal or accessor.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* const Hello = component((props: { name: string }) => (
|
|
14
|
+
* <p>{() => `Hello, ${props.name}`}</p>
|
|
15
|
+
* ));
|
|
16
|
+
*
|
|
17
|
+
* // Live updates — pass a signal or accessor:
|
|
18
|
+
* <Hello name={name} />
|
|
19
|
+
* <Hello name={() => user().name} />
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export function component(setup) {
|
|
23
|
+
const Comp = (raw) => {
|
|
24
|
+
// If JSX already applied createProps, `raw` is a Proxy — still safe
|
|
25
|
+
// to wrap again only when we have a plain object. Detect proxy via
|
|
26
|
+
// missing own keys reliability: always normalize through createProps
|
|
27
|
+
// on a shallow bag of current keys so double-proxy still reads source.
|
|
28
|
+
const props = createProps((raw ?? {}));
|
|
29
|
+
return setup(props);
|
|
30
|
+
};
|
|
31
|
+
Object.defineProperty(Comp, "name", {
|
|
32
|
+
value: setup.name || "Component",
|
|
33
|
+
configurable: true,
|
|
34
|
+
});
|
|
35
|
+
return Comp;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Conditional render for JSX.
|
|
39
|
+
* `when` may be a boolean, signal, or zero-arg accessor — unwrapped on read
|
|
40
|
+
* when used with reactive props / JSX.
|
|
41
|
+
*/
|
|
42
|
+
export function Show(props) {
|
|
43
|
+
// Normalize so accessors stay lazy for the show() effect.
|
|
44
|
+
const p = props;
|
|
45
|
+
const whenFn = () => {
|
|
46
|
+
const w = p.when;
|
|
47
|
+
if (typeof w === "function")
|
|
48
|
+
return !!w();
|
|
49
|
+
return !!w;
|
|
50
|
+
};
|
|
51
|
+
const host = document.createElement("div");
|
|
52
|
+
host.style.display = "contents";
|
|
53
|
+
const resolve = (value) => {
|
|
54
|
+
if (value == null || value === false || value === true) {
|
|
55
|
+
return document.createComment("show");
|
|
56
|
+
}
|
|
57
|
+
if (typeof value === "function") {
|
|
58
|
+
const result = value();
|
|
59
|
+
if (result instanceof Node)
|
|
60
|
+
return result;
|
|
61
|
+
return h("span", { text: value });
|
|
62
|
+
}
|
|
63
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
64
|
+
return document.createTextNode(String(value));
|
|
65
|
+
}
|
|
66
|
+
return value;
|
|
67
|
+
};
|
|
68
|
+
show(host, whenFn, () => resolve(p.children));
|
|
69
|
+
if (p.fallback !== undefined) {
|
|
70
|
+
const fallbackHost = document.createElement("div");
|
|
71
|
+
fallbackHost.style.display = "contents";
|
|
72
|
+
show(fallbackHost, () => !whenFn(), () => resolve(p.fallback));
|
|
73
|
+
const outer = document.createElement("div");
|
|
74
|
+
outer.style.display = "contents";
|
|
75
|
+
outer.append(host, fallbackHost);
|
|
76
|
+
return outer;
|
|
77
|
+
}
|
|
78
|
+
return host;
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Keyed list for JSX.
|
|
82
|
+
*/
|
|
83
|
+
export function For(props) {
|
|
84
|
+
const host = document.createElement("div");
|
|
85
|
+
host.style.display = "contents";
|
|
86
|
+
const getItems = () => {
|
|
87
|
+
const e = props.each;
|
|
88
|
+
return typeof e === "function" ? e() : e;
|
|
89
|
+
};
|
|
90
|
+
list(host, getItems, props.children, {
|
|
91
|
+
...(props.key ? { key: props.key } : {}),
|
|
92
|
+
});
|
|
93
|
+
return host;
|
|
94
|
+
}
|
|
95
|
+
//# sourceMappingURL=component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type Dispose } from "@lab206/core";
|
|
2
|
+
/**
|
|
3
|
+
* Values a reactive JSX child function may return.
|
|
4
|
+
* Nodes mount as DOM; strings/numbers become text; nullish clears the slot.
|
|
5
|
+
*/
|
|
6
|
+
export type DynamicChild = Node | DocumentFragment | string | number | boolean | null | undefined | DynamicChild[];
|
|
7
|
+
/**
|
|
8
|
+
* Mount a reactive child that may return **text or DOM nodes**.
|
|
9
|
+
*
|
|
10
|
+
* Previously function children were always treated as text via `String(value)`,
|
|
11
|
+
* which produced `[object HTMLParagraphElement]` when a node was returned
|
|
12
|
+
* (common for Tabs / Accordion / List content).
|
|
13
|
+
*
|
|
14
|
+
* Uses a `display: contents` host so layout is unaffected.
|
|
15
|
+
*/
|
|
16
|
+
export declare function bindDynamic(parent: ParentNode, get: () => DynamicChild): Dispose;
|
|
17
|
+
//# sourceMappingURL=dynamic.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dynamic.d.ts","sourceRoot":"","sources":["../src/dynamic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,OAAO,EAAE,MAAM,cAAc,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,YAAY,GACpB,IAAI,GACJ,gBAAgB,GAChB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,YAAY,EAAE,CAAC;AAEnB;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,UAAU,EAClB,GAAG,EAAE,MAAM,YAAY,GACtB,OAAO,CAuCT"}
|
package/dist/dynamic.js
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { effect } from "@lab206/core";
|
|
2
|
+
/**
|
|
3
|
+
* Mount a reactive child that may return **text or DOM nodes**.
|
|
4
|
+
*
|
|
5
|
+
* Previously function children were always treated as text via `String(value)`,
|
|
6
|
+
* which produced `[object HTMLParagraphElement]` when a node was returned
|
|
7
|
+
* (common for Tabs / Accordion / List content).
|
|
8
|
+
*
|
|
9
|
+
* Uses a `display: contents` host so layout is unaffected.
|
|
10
|
+
*/
|
|
11
|
+
export function bindDynamic(parent, get) {
|
|
12
|
+
const host = document.createElement("span");
|
|
13
|
+
host.setAttribute("data-pu-dyn", "");
|
|
14
|
+
// contents: children participate in parent layout as if unwrapped
|
|
15
|
+
host.style.display = "contents";
|
|
16
|
+
parent.appendChild(host);
|
|
17
|
+
let textNode = null;
|
|
18
|
+
let mode = "empty";
|
|
19
|
+
return effect(() => {
|
|
20
|
+
const value = get();
|
|
21
|
+
if (value == null || value === false || value === true) {
|
|
22
|
+
host.replaceChildren();
|
|
23
|
+
textNode = null;
|
|
24
|
+
mode = "empty";
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
28
|
+
const s = String(value);
|
|
29
|
+
if (mode === "text" && textNode) {
|
|
30
|
+
textNode.data = s;
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
host.replaceChildren();
|
|
34
|
+
textNode = document.createTextNode(s);
|
|
35
|
+
host.appendChild(textNode);
|
|
36
|
+
mode = "text";
|
|
37
|
+
}
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
// Nodes / arrays — never String(object)
|
|
41
|
+
textNode = null;
|
|
42
|
+
mode = "nodes";
|
|
43
|
+
host.replaceChildren();
|
|
44
|
+
appendValue(host, value);
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
function appendValue(parent, value) {
|
|
48
|
+
if (value == null || value === false || value === true)
|
|
49
|
+
return;
|
|
50
|
+
if (typeof value === "string" || typeof value === "number") {
|
|
51
|
+
parent.appendChild(document.createTextNode(String(value)));
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
// Prefer nodeType over instanceof — DocumentFragment may be missing in some test envs
|
|
55
|
+
if (typeof value === "object" &&
|
|
56
|
+
value !== null &&
|
|
57
|
+
"nodeType" in value &&
|
|
58
|
+
typeof value.nodeType === "number") {
|
|
59
|
+
parent.appendChild(value);
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (Array.isArray(value)) {
|
|
63
|
+
for (const item of value)
|
|
64
|
+
appendValue(parent, item);
|
|
65
|
+
}
|
|
66
|
+
// Non-node objects are ignored (avoids "[object HTML…]")
|
|
67
|
+
}
|
|
68
|
+
//# sourceMappingURL=dynamic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dynamic.js","sourceRoot":"","sources":["../src/dynamic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAgB,MAAM,cAAc,CAAC;AAgBpD;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CACzB,MAAkB,EAClB,GAAuB;IAEvB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;IACrC,kEAAkE;IACjE,IAAI,CAAC,KAA6B,CAAC,OAAO,GAAG,UAAU,CAAC;IACzD,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAEzB,IAAI,QAAQ,GAAgB,IAAI,CAAC;IACjC,IAAI,IAAI,GAA+B,OAAO,CAAC;IAE/C,OAAO,MAAM,CAAC,GAAG,EAAE;QACjB,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC;QAEpB,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;YACvD,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,QAAQ,GAAG,IAAI,CAAC;YAChB,IAAI,GAAG,OAAO,CAAC;YACf,OAAO;QACT,CAAC;QAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC3D,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;YACxB,IAAI,IAAI,KAAK,MAAM,IAAI,QAAQ,EAAE,CAAC;gBAChC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC;YACpB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;gBACtC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;gBAC3B,IAAI,GAAG,MAAM,CAAC;YAChB,CAAC;YACD,OAAO;QACT,CAAC;QAED,wCAAwC;QACxC,QAAQ,GAAG,IAAI,CAAC;QAChB,IAAI,GAAG,OAAO,CAAC;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,WAAW,CAAC,MAAkB,EAAE,KAAmB;IAC1D,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAE/D,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3D,OAAO;IACT,CAAC;IAED,sFAAsF;IACtF,IACE,OAAO,KAAK,KAAK,QAAQ;QACzB,KAAK,KAAK,IAAI;QACd,UAAU,IAAK,KAAgB;QAC/B,OAAQ,KAAc,CAAC,QAAQ,KAAK,QAAQ,EAC5C,CAAC;QACD,MAAM,CAAC,WAAW,CAAC,KAAa,CAAC,CAAC;QAClC,OAAO;IACT,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,KAAK,MAAM,IAAI,IAAI,KAAK;YAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACtD,CAAC;IACD,yDAAyD;AAC3D,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Child } from "./h.js";
|
|
2
|
+
/** Normalize JSX children into a flat list. */
|
|
3
|
+
export declare function normalizeChildren(children: unknown): Child[];
|
|
4
|
+
/** Append a Child to a parent (static node, reactive text, or reactive nodes). */
|
|
5
|
+
export declare function appendChild(parent: ParentNode, child: Child): void;
|
|
6
|
+
/**
|
|
7
|
+
* JSX Fragment — groups children without a wrapper element.
|
|
8
|
+
* Returns a DocumentFragment (children move into the parent on insert).
|
|
9
|
+
*/
|
|
10
|
+
export declare function Fragment(props: {
|
|
11
|
+
children?: unknown;
|
|
12
|
+
}): DocumentFragment;
|
|
13
|
+
//# sourceMappingURL=fragment.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fragment.d.ts","sourceRoot":"","sources":["../src/fragment.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAGpC,+CAA+C;AAC/C,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,CAY5D;AAED,kFAAkF;AAClF,wBAAgB,WAAW,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,CAWlE;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,gBAAgB,CAMxE"}
|
package/dist/fragment.js
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { bindDynamic } from "./dynamic.js";
|
|
2
|
+
/** Normalize JSX children into a flat list. */
|
|
3
|
+
export function normalizeChildren(children) {
|
|
4
|
+
if (children == null || children === false || children === true) {
|
|
5
|
+
return [];
|
|
6
|
+
}
|
|
7
|
+
if (Array.isArray(children)) {
|
|
8
|
+
const out = [];
|
|
9
|
+
for (const child of children) {
|
|
10
|
+
out.push(...normalizeChildren(child));
|
|
11
|
+
}
|
|
12
|
+
return out;
|
|
13
|
+
}
|
|
14
|
+
return [children];
|
|
15
|
+
}
|
|
16
|
+
/** Append a Child to a parent (static node, reactive text, or reactive nodes). */
|
|
17
|
+
export function appendChild(parent, child) {
|
|
18
|
+
if (child == null || child === false || child === true)
|
|
19
|
+
return;
|
|
20
|
+
if (typeof child === "function") {
|
|
21
|
+
bindDynamic(parent, child);
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
if (typeof child === "string" || typeof child === "number") {
|
|
25
|
+
parent.appendChild(document.createTextNode(String(child)));
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
parent.appendChild(child);
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* JSX Fragment — groups children without a wrapper element.
|
|
32
|
+
* Returns a DocumentFragment (children move into the parent on insert).
|
|
33
|
+
*/
|
|
34
|
+
export function Fragment(props) {
|
|
35
|
+
const frag = document.createDocumentFragment();
|
|
36
|
+
for (const child of normalizeChildren(props.children)) {
|
|
37
|
+
appendChild(frag, child);
|
|
38
|
+
}
|
|
39
|
+
return frag;
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=fragment.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fragment.js","sourceRoot":"","sources":["../src/fragment.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAqB,MAAM,cAAc,CAAC;AAE9D,+CAA+C;AAC/C,MAAM,UAAU,iBAAiB,CAAC,QAAiB;IACjD,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;QAChE,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC5B,MAAM,GAAG,GAAY,EAAE,CAAC;QACxB,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,GAAG,CAAC,IAAI,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QACxC,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC;IACD,OAAO,CAAC,QAAiB,CAAC,CAAC;AAC7B,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,WAAW,CAAC,MAAkB,EAAE,KAAY;IAC1D,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAC/D,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;QAChC,WAAW,CAAC,MAAM,EAAE,KAA2B,CAAC,CAAC;QACjD,OAAO;IACT,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC3D,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3D,OAAO;IACT,CAAC;IACD,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,KAA6B;IACpD,MAAM,IAAI,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;IAC/C,KAAK,MAAM,KAAK,IAAI,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QACtD,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3B,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}
|