@e280/shiny 0.1.0-1 → 0.1.0-10

package/s/demo/demo.bundle.ts

@@ -1,11 +1,26 @@
 
 import {css, html} from "lit"
 import {dom, view} from "@e280/sly"
-import {themes} from "../themes/index.js"
-import {themeViews} from "../ui/themers.js"
+import {shiny} from "../shiny.js"
+import {auraViews} from "./aura-views.js"
+import {plain} from "../themes/plain.css.js"
+import {makeLipsumDispenser} from "./utils/lipsum.js"
+import {TabControl} from "../components/tabs/control.js"
 import {Demonstration} from "./views/demonstration/view.js"
 
-const views = themeViews(themes.basic)
+const viewsets = [
+	{label: "aura", views: auraViews},
+	{label: "plain", views: shiny({theme: plain}).views},
+]
+
+const labels = {
+	html: {button: "html", text: "html web component"},
+	view: {button: "view", text: "sly view"},
+	css: {button: "css", text: "custom css"},
+}
+
+const dispenser = makeLipsumDispenser()
+const lipsum = () => dispenser.takeFirst()
 
 dom.register({ShinyDemo: view.component(use => {
 	use.styles(css`
@@ -15,28 +30,203 @@ dom.register({ShinyDemo: view.component(use => {
 			gap: 1em;
 		}
 
-		[view="shiny-copy"]::part(content) {
-			font-size: 4em;
+		.themes {
+			display: flex;
+			justify-content: end;
+			gap: 0.5em;
+
+			span {
+				font-size: 1.2em;
+				opacity: 0.5;
+				font-family: serif;
+				font-style: italic;
+			}
+
+			[view="shiny-tabs"] {
+				display: flex;
+			}
 		}
 	`)
 
-	return [
+	const tabControl = use.once(() => new TabControl(0))
+	const $viewset = use.derived(() => viewsets.at(tabControl.$index())!)
+	const views = $viewset().views
+	dispenser.takeAll()
+
+	const demonstrations = [
 		Demonstration({
-			views,
 			name: "shiny-copy",
 			explain: html`
-				<p>button for click-to-copy text</p>
+				<p>click-to-copy text button.</p>
 			`,
-			exampleView: `
-				ShinyCopy("hello world")
+			snippets: [
+				[labels.html, `
+					<shiny-copy text="hello world"></shiny-copy>
+				`],
+				[labels.view, `
+					ShinyCopy("hello world")
+				`],
+				[labels.css, `
+					shiny-copy {
+						font-size: 1em;
+						--happy: #0fa;
+						--angry: #f50;
+						--lame: #8888;
+						--inactive-opacity: 0.5;
+					}
+				`],
+			],
+			content: views.ShinyCopy("hello world"),
+			style: css`
+				.content sly-view {
+					font-size: 4em;
+				}
 			`,
-			exampleComponent: `
-				<shiny-copy text="hello world"></shiny-copy>
+		}),
+
+		Demonstration({
+			name: "shiny-drawer",
+			explain: html`
+				<p>slide-out panel. button optional.</p>
+			`,
+			snippets: [
+				[labels.html, `
+					<shiny-drawer button side=left>
+						<header>example</header>
+						<section slot=plate>
+							lorem kettlebell..
+						</section>
+					</shiny-drawer>
+				`],
+				[labels.view, `
+					ShinyDrawer
+						.props({button: true, side: "left"})
+						.children(html\`
+							<header>example</header>
+							<section slot=plate>
+								lorem kettlebell..
+							</section>
+						\`)
+						.render()
+				`],
+				[labels.css, `
+					shiny-drawer {
+						--button-size: 2em;
+						--anim-duration: 200ms;
+						--blanket-backdrop-filter: blur(0.5em);
+						--blanket-bg: color-mix(
+							in oklab,
+							transparent,
+							var(--bg)
+						);
+					}
+				`],
+			],
+			content: views.ShinyDrawer
+				.props({button: true})
+				.children(html`
+					<header>
+						<h2>example drawer</h2>
+						<p>you can put any content in here.</p>
+						<p class=lipsum>${lipsum()}</p>
+					</header>
+					<section slot=plate>
+						<p class=lipsum>${lipsum()}</p>
+						<p class=lipsum>${lipsum()}</p>
+					</section>
+				`)
+				.render(),
+			style: css`
+				.content sly-view {
+					border-radius: 0.5em;
+					overflow: hidden;
+					--button-size: 3em;
+
+					header {
+						> * + * { margin-top: 0.5em; }
+					}
+
+					section {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						min-height: 100%;
+						padding: 1em;
+						padding-top: 3em;
+						> * + * { margin-top: 0.5em; }
+					}
+				}
+			`,
+		}),
+
+		Demonstration({
+			name: "shiny-tabs",
+			explain: html`
+				<p>button bar. panels optional.</p>
+			`,
+			snippets: [
+				[labels.html, `
+					<shiny-tabs>
+						<button>tab1</button>
+						<button>tab2</button>
+						<button>tab3</button>
+						<div slot=panel>panel1</div>
+						<div slot=panel>panel2</div>
+						<div slot=panel>panel3</div>
+					</shiny-tabs>
+				`],
+				[labels.view, `
+					ShinyTabs
+						.props()
+						.children(html\`
+							<button>tab1</button>
+							<button>tab2</button>
+							<button>tab3</button>
+							<div slot=panel>panel1</div>
+							<div slot=panel>panel2</div>
+							<div slot=panel>panel3</div>
+						\`)
+						.render()
+				`],
+				[labels.css, `
+					shiny-tabs::part(tabs) {}
+					shiny-tabs::part(panels) {}
+				`],
+			],
+			content: views.ShinyTabs
+				.props()
+				.children(html`
+					<button>tab1</button>
+					<button>tab2</button>
+					<button>tab3</button>
+					<p slot=panel class=lipsum>${lipsum()}</p>
+					<p slot=panel class=lipsum>${lipsum()}</p>
+					<p slot=panel class=lipsum>${lipsum()}</p>
+				`)
+				.render(),
+			style: css`
+				.content {
+					justify-content: start;
+					p { margin-top: 0.5em; }
+				}
 			`,
-			content: views.ShinyCopy("hello world"),
 		}),
 	]
+
+	return html`
+		<div class=themes>
+			<span>theme</span>
+			${auraViews.ShinyTabs
+				.props(tabControl)
+				.children(viewsets.map(viewset => html`
+					<button>${viewset.label}</button>
+				`))
+				.render()}
+		</div>
+
+		${demonstrations}
+	`
 })})
 
-console.log("✨ shiny")
+console.log("✨shiny")
 

package/s/demo/demo.css

@@ -71,7 +71,7 @@
 		--tint: #070429aa;
 		background:
 			linear-gradient(0deg, var(--tint), var(--tint)),
-			#141519 url("/assets/bg.webp") center 60% / cover no-repeat;
+			#141519 url("/assets/bg.webp") center 80% / cover no-repeat;
 
 		background-attachment: fixed, fixed;
 
@@ -100,6 +100,8 @@
 		strong {
 			font-size: 1.5em;
 			color: var(--prime);
+			color: color-mix(in oklab, white, var(--prime) 20%);
+			text-shadow: 0 0 0.8em color-mix(in oklab, white, var(--prime) 50%);
 		}
 
 		small {

package/s/demo/utils/lipsum.ts

@@ -0,0 +1,19 @@
+
+import {Dispenser} from "@e280/stz"
+
+export const makeLipsumDispenser = () => new Dispenser(() => [
+	`lorem kettlebell dolor sit amet, mountain squats consectetur trail-running. adipiscing deadlift elit, sed do 45lb turkish get-up eiusmod tempor incididunt ut hike magna aliqua. ut enim ad minim clean & press, quis nostrud exercitation lunges ullamco kettlebell snatch trailhead nisi ut aliquip ex dolore summit irure dolor.`,
+
+	`lorem protein dolor sit amet, creatine scoop elit shaker bottle tempor. grilled steak magna keto-fasting culpa, carb-loading perspiciatis cheat day. whey isolate dolor sit macros elit, intermittent fasting tempor electrolyte magna; barefoot shoes culpa, liver perspiciatis ancestral squat rack gospel. lorem bulking dolor sit cut elit, tdee tracker tempor calorie deficit magna; chicken breast culpa gatorade perspiciatis meal prep.`,
+
+	`lorem caffeine dolor sit amet, double espresso elit cold brew tempor jitter. adderall magna focus culpa, lion’s mane perspiciatis nootropic. nicotine gum dolor sit vape elit, dopamine hit tempor buzz magna; lsd microdosing culpa, productivity perspiciatis agile sprint. lorem latte dolor sit drip elit, french press tempor aeropress magna; insomnia culpa, circadian rhythm perspiciatis blue light filter.`,
+
+	`lorem arch dolor sit amet, pacman -Syu elit rolling release tempor breakage. i3-gaps commodo tiling, bspwm magna culpa xinitrc. alias neovim configs in .dotfiles forest, r/unixporn veniam rice showcase perspiciatis.`,
+
+	`lorem authlocal dolor sit amet, user-sovereign identity elit, cryptographic tempor signatures. ed25519 magna keypair culpa, elliptic perspiciatis handshake ut zero-knowledge proof. decentralized login elit mnemonic seed tempor recovery phrase. DID magna alias culpa federation, lorem oauth2 perspiciatis antiquated.`,
+
+	`lorem webgpu dolor sit amet, fragment shader elit vertex buffer tempor pipeline; bindgroup magna sampler culpa, wgsl perspiciatis alignment bug. compute pass workgroup barrier magna, mipmap cascade culpa drawcall instancing overflow. spir-v dolor sit wasm elit, canvas context lost magna; fallback webgl2 perspiciatis, polyfill slowpath dolore, glsl antique culpa extension hell 144hz tearing. command encoder perspiciatis out-of-memory, chromium nightly.`,
+
+	`lorem sedentary dolor sit amet, infinite scroll elit chair-bound tempor. commit marathon magna carpal tunnel culpa, caffeine perspiciatis heartbeat irregular. lorem backlog dolor sit ticket elit, jira sprint tempor sedentary slump magna; gym membership culpa expired, standing desk perspiciatis unused. lorem procrastination dolor sit youtube elit, keyboard crumbs tempor pizza box magna; cardio avoidant culpa, hike someday perspiciatis maybe.`,
+])
+

package/s/demo/views/demonstration/style.css.ts

@@ -1,6 +1,6 @@
 
 import {css} from "lit"
-export default css`
+export default css`@layer view {
 
 :host {
 	position: relative;
@@ -37,6 +37,12 @@ export default css`
 	}
 }
 
+p.lipsum {
+	opacity: 0.7;
+	font-family: serif;
+	font-style: italic;
+}
+
 .meta {
 	flex: 1 1 10em;
 	display: flex;
@@ -78,6 +84,7 @@ export default css`
 				white-space: pre;
 				text-wrap: wrap;
 				tab-size: 2;
+				word-break: break-word;
 
 				font-size: 0.8em;
 				font-family: monospace;
@@ -87,6 +94,7 @@ export default css`
 
 		[view="shiny-copy"] {
 			flex: 0 0 0;
+			font-size: 1.5em;
 			padding: 0.2em;
 		}
 	}
@@ -104,5 +112,5 @@ export default css`
 	border: 1px dashed #fff4;
 }
 
-`
+}`
 

package/s/demo/views/demonstration/view.ts

@@ -1,32 +1,31 @@
 
-import {html} from "lit"
+import {untab} from "@e280/stz"
 import {Content, view} from "@e280/sly"
+import {CSSResultGroup, html} from "lit"
 import styleCss from "./style.css.js"
-import {untab} from "../../../tools/untab.js"
-import {ShinyViews} from "../../../ui/themers.js"
-import {basic} from "../../../themes/basic.css.js"
+import {auraViews} from "../../aura-views.js"
+import {foundationCss} from "../../../components/foundation.css.js"
 
 export const Demonstration = view(use => (options: {
 		name: string
 		explain: Content
-		views: ShinyViews
-		exampleView: string
-		exampleComponent: string
+		snippets: [label: {button: string, text: string}, code: string][]
 		content: Content
+		style: CSSResultGroup
 	}) => {
 
 	use.name(options.name)
-	use.styles(basic, styleCss)
+	use.styles(foundationCss, styleCss, options.style)
 
 	function codeblock(heading: string, code: string) {
 		const cleanCode = untab(code).trim()
 		return html`
-			<div class=codeblock>
+			<div class=codeblock slot=panel>
 				<div class=zone>
 					<h3>${heading}</h3>
 					<code>${cleanCode}</code>
 				</div>
-				${options.views.ShinyCopy(cleanCode)}
+				${auraViews.ShinyCopy(cleanCode)}
 			</div>
 		`
 	}
@@ -35,10 +34,15 @@ export const Demonstration = view(use => (options: {
 		<div class=meta>
 			<h2>✨ ${options.name}</h2>
 			<div class=explain>${options.explain}</div>
-			<div class=codes>
-				${codeblock("sly view", options.exampleView)}
-				${codeblock("html web component", options.exampleComponent)}
-			</div>
+			${auraViews.ShinyTabs
+				.props()
+				.children(html`
+					${options.snippets.map(([label]) => html`
+						<button>${label.button}</button>
+					`)}
+					${options.snippets.map(([label, code]) => codeblock(label.text, code))}
+				`)
+				.render()}
 		</div>
 
 		<div class=content part=content>

package/s/icons/tabler/menu-2.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-menu-2"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6l16 0" /><path d="M4 12l16 0" /><path d="M4 18l16 0" /></svg>`
+

package/s/icons/tabler/x.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>`
+

package/s/index.html.ts

@@ -22,13 +22,13 @@ export default ssg.page(import.meta.url, async orb => ({
 
 	body: html`
 		<h1>
-			<strong>✨ @e280/shiny</strong>
+			<strong>✨shiny✨</strong>
 			<small>v${orb.packageVersion()}</small>
 		</h1>
 
 		<section>
 			<p>web ui components</p>
-			<p><a href="https://github.com/e280/shiny#readme">readme</a></p>
+			<p><a href="https://github.com/e280/shiny#readme">readme for installation</a></p>
 		</section>
 
 		<shiny-demo></shiny-demo>

package/s/index.ts

@@ -1,7 +1,19 @@
 
 export * from "./themes/index.js"
-export * from "./ui/example/component.js"
-export * from "./ui/copy/component.js"
-export * from "./ui/themers.js"
-export * from "./ui/components.js"
+
+export * from "./components/copy/component.js"
+
+export * from "./components/drawer/component.js"
+export * from "./components/drawer/control.js"
+
+export * from "./components/example/component.js"
+
+export * from "./components/tabs/component.js"
+export * from "./components/tabs/control.js"
+
+export * from "./components/foundation.css.js"
+export * from "./components/framework.js"
+export * from "./components/raw-components.js"
+
+export * from "./shiny.js"
 

package/s/install/aura.bundle.ts

@@ -0,0 +1,9 @@
+
+import {dom} from "@e280/sly"
+import {shiny} from "../shiny.js"
+import {aura} from "../themes/aura.css.js"
+
+dom.register(
+	shiny({theme: aura}).components
+)
+

package/s/install/plain.bundle.ts

@@ -0,0 +1,9 @@
+
+import {dom} from "@e280/sly"
+import {shiny} from "../shiny.js"
+import {plain} from "../themes/plain.css.js"
+
+dom.register(
+	shiny({theme: plain}).components
+)
+

package/s/shiny.ts

@@ -0,0 +1,15 @@
+
+import {contextualizeComponents, getViews} from "@e280/sly"
+import {ShinyContext} from "./components/framework.js"
+import {rawComponents} from "./components/raw-components.js"
+
+export function shiny(context: ShinyContext) {
+	const components = contextualizeComponents(context, rawComponents)
+	const views = getViews(components)
+	return {components, views}
+}
+
+export type Shiny = ReturnType<typeof shiny>
+export type ShinyViews = Shiny["views"]
+export type ShinyComponents = Shiny["components"]
+

package/s/themes/aura.css.ts

@@ -0,0 +1,48 @@
+
+import {css} from "lit"
+import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
+export const aura = css`@layer overlay {
+
+:host {
+	display: block;
+
+	${renderCssVars({
+		...defaultCssVars(),
+	})}
+}
+
+:host([view="shiny-drawer"]) {
+	display: block;
+
+	&::part(tray) {
+		padding: 1em;
+		background: linear-gradient(
+			to top right,
+			#00a9dd69,
+			#70ffd77a
+		);
+	}
+}
+
+:host([view="shiny-drawer"]:state(left)) {
+	&::part(tray) {
+		border-bottom-right-radius: 0.5em;
+	}
+}
+
+:host([view="shiny-drawer"]:state(right)) {
+	&::part(tray) {
+		border-bottom-left-radius: 0.5em;
+	}
+}
+
+:host([view="shiny-tabs"]) {
+	display: block;
+
+	&::part(tabs) {
+		display: flex;
+	}
+}
+
+}`
+

package/s/themes/index.barrel.ts

@@ -1,3 +1,4 @@
 
-export * from "./basic.css.js"
+export * from "./plain.css.js"
+export * from "./aura.css.js"
 

package/s/themes/index.ts

@@ -1,3 +1,4 @@
 
 export * as themes from "./index.barrel.js"
+export type * from "./index.barrel.js"
 

package/s/themes/infra/css-vars.ts

@@ -0,0 +1,33 @@
+
+import {unsafeCSS} from "lit"
+
+export type CssVars = {
+	"bg": string
+	"alpha": string
+	"happy": string
+	"sad": string
+	"angry": string
+	"lame": string
+	"inactive-opacity": string
+}
+
+export function defaultCssVars(): CssVars {
+	return {
+		"bg": "#111",
+		"alpha": "#afa",
+		"happy": "#0fa",
+		"sad": "#74f",
+		"angry": "#f50",
+		"lame": "#8888",
+		"inactive-opacity": "0.5",
+	}
+}
+
+export function renderCssVars(vars: CssVars) {
+	return unsafeCSS(
+		Object.entries(vars)
+			.map(([key, value]) => `--${key}: var(--shiny-${key}, ${value});`)
+			.join("\n")
+	)
+}
+

package/s/themes/plain.css.ts

@@ -0,0 +1,12 @@
+
+import {css} from "lit"
+import {defaultCssVars, renderCssVars} from "./infra/css-vars.js"
+export const plain = css`@layer overlay {
+
+:host {
+	display: block;
+	${renderCssVars(defaultCssVars())}
+}
+
+}`
+

package/s/utils/states.ts

@@ -0,0 +1,15 @@
+
+export class States {
+	#states: Set<string>
+
+	constructor(element: HTMLElement) {
+		this.#states = element.attachInternals().states as any
+	}
+
+	assign(...states: string[]) {
+		this.#states.forEach(s => this.#states.delete(s))
+		for (const s of states) this.#states.add(s)
+		return this
+	}
+}
+

package/x/{ui → components}/copy/component.d.ts

@@ -1,11 +1,15 @@
-import { CSSResult } from "lit";
+import { ShinyContext } from "../framework.js";
 declare const ShinyCopy_base: import("@e280/sly").ComponentClass<{
     new (): {
-        attrs: import("@e280/sly").AttrTypes<{
+        #attrs: import("@e280/sly").AttrTypes<{
             text: StringConstructor;
             ms: NumberConstructor;
         }>;
-        theme: CSSResult;
+        get text(): string | undefined;
+        set text(v: string | undefined);
+        get ms(): number | undefined;
+        set ms(v: number | undefined);
+        context: ShinyContext;
         #private: any;
         readonly shadow: ShadowRoot;
         createShadow(): ShadowRoot;
@@ -366,7 +370,7 @@ declare const ShinyCopy_base: import("@e280/sly").ComponentClass<{
         focus(options?: FocusOptions): void;
     };
     styles: import("lit").CSSResultGroup | undefined;
-}, [theme: CSSResult, text: string | undefined, ms?: any]>;
+}, [context: ShinyContext, text: string | undefined, ms?: any]>;
 export declare class ShinyCopy extends ShinyCopy_base {
 }
 export {};

package/x/{ui → components}/copy/component.js

@@ -1,14 +1,15 @@
+import { html } from "lit";
 import { debounce } from "@e280/stz";
 import { dom, view } from "@e280/sly";
-import { html } from "lit";
 import styleCss from "./style.css.js";
+import { foundationCss } from "../foundation.css.js";
 import { ShinyElement } from "../framework.js";
 import clipboardSvg from "../../icons/tabler/clipboard.svg.js";
 import clipboardXFilledSvg from "../../icons/tabler/clipboard-x-filled.svg.js";
 import clipboardCheckFilledSvg from "../../icons/tabler/clipboard-check-filled.svg.js";
-export class ShinyCopy extends (view(use => (theme, text, ms = 1000) => {
+export class ShinyCopy extends (view(use => (context, text, ms = 1000) => {
     use.name("shiny-copy");
-    use.styles(theme, styleCss);
+    use.styles(foundationCss, context.theme, styleCss);
     const baseStatus = () => (text === undefined
         ? "invalid"
         : "neutral");
@@ -46,11 +47,15 @@ export class ShinyCopy extends (view(use => (theme, text, ms = 1000) => {
 		`;
 })
     .component(class extends ShinyElement {
-    attrs = dom.attrs(this).spec({
+    #attrs = dom.attrs(this).spec({
         text: String,
         ms: Number,
     });
+    get text() { return this.#attrs.text; }
+    set text(v) { this.#attrs.text = v; }
+    get ms() { return this.#attrs.ms; }
+    set ms(v) { this.#attrs.ms = v; }
 })
-    .props(el => [el.theme, el.attrs.text, el.attrs.ms])) {
+    .props(el => [el.context, el.text, el.ms])) {
 }
 //# sourceMappingURL=component.js.map

package/x/components/copy/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../../s/components/copy/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAClC,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AAEnC,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,EAAC,aAAa,EAAC,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAe,YAAY,EAAC,MAAM,iBAAiB,CAAA;AAC1D,OAAO,YAAY,MAAM,qCAAqC,CAAA;AAC9D,OAAO,mBAAmB,MAAM,8CAA8C,CAAA;AAC9E,OAAO,uBAAuB,MAAM,kDAAkD,CAAA;AAEtF,MAAM,OAAO,SAAU,SAAQ,CAC9B,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,OAAqB,EAAE,IAAwB,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE;IAC1E,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IACtB,GAAG,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IAIlD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACxB,IAAI,KAAK,SAAS;QACjB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,SAAS,CACZ,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,CAAC,MAAM,CAAS,UAAU,EAAE,CAAC,CAAA;IAChD,MAAM,WAAW,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAA;IACjF,MAAM,WAAW,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,EAAC,MAAc,EAAE,EAAE;QAC1D,MAAM,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QACzB,MAAM,WAAW,EAAE,CAAA;IACpB,CAAC,CAAC,CAAA;IAEF,KAAK,UAAU,KAAK;QACnB,IAAI,IAAI,KAAK,SAAS;YAAE,OAAM;QAC9B,IAAI,CAAC;YACJ,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACzC,MAAM,WAAW,CAAC,MAAM,CAAC,CAAA;QAC1B,CAAC;QACD,OAAO,KAAK,EAAE,CAAC;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YACpB,MAAM,WAAW,CAAC,KAAK,CAAC,CAAA;QACzB,CAAC;IACF,CAAC;IAED,MAAM,IAAI,GAAG,CAAC,GAAG,EAAE;QAAE,QAAQ,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC;YAC5C,KAAK,SAAS,CAAC,CAAC,OAAO,YAAY,CAAA;YACnC,KAAK,SAAS,CAAC,CAAC,OAAO,YAAY,CAAA;YACnC,KAAK,MAAM,CAAC,CAAC,OAAO,uBAAuB,CAAA;YAC3C,KAAK,KAAK,CAAC,CAAC,OAAO,mBAAmB,CAAA;YACtC,OAAO,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAA;QAChD,CAAC;IAAA,CAAC,CAAC,EAAE,CAAA;IAEL,OAAO,IAAI,CAAA;0BACa,OAAO,CAAC,GAAG,EAAE,aAAa,KAAK;MACnD,IAAI;;GAEP,CAAA;AACF,CAAC,CAAC;KACD,SAAS,CAAC,KAAM,SAAQ,YAAY;IACpC,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QAC7B,IAAI,EAAE,MAAM;QACZ,EAAE,EAAE,MAAM;KACV,CAAC,CAAA;IACF,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,IAAI,CAAA,CAAC,CAAC;IACtC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAA,CAAC,CAAC;IACpC,IAAI,EAAE,KAAK,OAAO,IAAI,CAAC,MAAM,CAAC,EAAE,CAAA,CAAC,CAAC;IAClC,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,CAAA,CAAC,CAAC;CAChC,CAAC;KACD,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAC1C;CAAG"}