@iyulab/chat-components 0.3.0 → 0.5.0

package/dist/components/blocks/UFileBlock.styles.js

@@ -0,0 +1,128 @@
+import { css } from "lit";
+//#region src/components/blocks/UFileBlock.styles.ts
+var styles = css`
+  :host {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+    max-width: 200px;
+    gap: 10px;
+    padding: 8px 10px;
+    border: 1px solid var(--u-border-color);
+    border-radius: 8px;
+    background-color: var(--u-neutral-50);
+    overflow: visible;
+    cursor: pointer;
+    transition: background-color 0.12s ease, border-color 0.12s ease;
+    font-size: 14px;
+  }
+  :host(:hover) {
+    background-color: var(--u-neutral-100);
+    border-color: var(--u-border-color-strong);
+  }
+
+  u-icon[name="file-earmark-x"] {
+    color: var(--u-red-600);
+  }
+
+  .thumbnail {
+    position: relative;
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--u-icon-color);
+    font-size: 16px;
+    border-radius: 6px;
+    background-color: var(--u-neutral-200);
+    transition: background 0.15s ease;
+    overflow: hidden;
+  }
+
+  .info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--u-txt-color-strong);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    color: var(--u-txt-color-weak);
+    font-size: 10px;
+  }
+
+  .type {
+    padding: 1px 5px;
+    border-radius: 4px;
+    background-color: var(--u-neutral-200);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .size {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .download-btn {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    color: var(--u-neutral-0);
+    font-size: 14px;
+    border-radius: 6px;
+    background-color: color-mix(in srgb, var(--u-neutral-900) 70%, transparent);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+  }
+  .thumbnail:hover .download-btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .download-btn:hover {
+    background-color: color-mix(in srgb, var(--u-neutral-900) 85%, transparent);
+  }
+
+  .remove-btn {
+    position: absolute;
+    z-index: 10;
+    top: -8px;
+    right: -8px;
+    border-radius: 50%;
+    font-size: 10px;
+    background-color: var(--u-neutral-600);
+    color: var(--u-neutral-0);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.12s ease, background-color 0.12s ease;
+  }
+  :host(:hover) .remove-btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .remove-btn:hover {
+    background-color: var(--u-red-600);
+  }
+`;
+//#endregion
+export { styles };

package/dist/components/blocks/UJsonBlock.d.ts

@@ -1,7 +1,49 @@
-import { UJsonBlock } from './UJsonBlock.component.js';
+import { PropertyValues, TemplateResult } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { JsonNode } from '../../types/JsonNode.js';
+/**
+ * json 데이터를 트리 형태로 시각화하는 컴포넌트입니다.
+ */
+export declare class UJsonBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 초기 확장 상태를 관리하는 속성입니다. */
+    expanded: boolean;
+    /** JSON 데이터 (속성으로 전달 가능) */
+    value: JsonNode;
+    state: Record<string, boolean>;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    /**
+     * JsonNode를 렌더링합니다.
+     * @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
+     * @param parent - 부모 노드의 경로
+     */
+    private renderNode;
+    /**
+     * JsonValue를 렌더링합니다.
+     * @param node - JsonValue (string, number, boolean, null 등)
+     */
+    private renderValue;
+    /**
+     * JsonObject 또는 JsonArray를 렌더링합니다.
+     * @param node - JsonObject 또는 JsonArray
+     * @param depth - 현재 깊이
+     */
+    private renderObject;
+    /**
+     * 노드의 미리보기를 렌더링합니다.
+     * @param node - JsonObject 또는 JsonArray
+     */
+    private renderPreview;
+    /** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
+    private setState;
+    private isValueType;
+    /** 노드 확장/축소 클릭 핸들러 */
+    private handlePropertyKeyClick;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'u-json-block': UJsonBlock;
     }
 }
-export { UJsonBlock };

package/dist/components/blocks/UJsonBlock.js

@@ -1,5 +1,130 @@
-import { UJsonBlock } from './UJsonBlock.component.js';
-
-UJsonBlock.define("u-json-block");
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import { styles } from "./UJsonBlock.styles.js";
+import { html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { map } from "lit/directives/map.js";
+import { when } from "lit/directives/when.js";
+import { jsonAttrConverter } from "@iyulab/components/dist/utilities/converters.js";
+//#region src/components/blocks/UJsonBlock.ts
+var _ref;
+var UJsonBlock = class UJsonBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.expanded = true;
+		this.value = {};
+		this.state = {};
+		this.isValueType = (value) => {
+			return value !== Object(value);
+		};
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("tabindex", "0");
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("value") || changedProperties.has("expanded")) this.state = this.setState(this.value);
+	}
+	render() {
+		return html`
+      <div part="base">
+        ${this.renderNode(this.value)}
+      </div>
+    `;
+	}
+	/**
+	* JsonNode를 렌더링합니다.
+	* @param value - JsonNode (JsonObject, JsonArray, 또는 JsonValue)
+	* @param parent - 부모 노드의 경로
+	*/
+	renderNode(value, parent = "") {
+		return this.isValueType(value) ? this.renderValue(value) : this.renderObject(value, parent);
+	}
+	/**
+	* JsonValue를 렌더링합니다.
+	* @param node - JsonValue (string, number, boolean, null 등)
+	*/
+	renderValue(node) {
+		const type = node === null ? "null" : Array.isArray(node) ? "array" : typeof node === "object" ? "object" : typeof node;
+		return html`
+      <span part="${type}" class="${type}" role="treeitem">
+        ${JSON.stringify(node)}
+      </span>
+    `;
+	}
+	/**
+	* JsonObject 또는 JsonArray를 렌더링합니다.
+	* @param node - JsonObject 또는 JsonArray
+	* @param depth - 현재 깊이
+	*/
+	renderObject(node, parent) {
+		return html`
+      <ul part="object" role="group">
+        ${map(Object.entries(node), ([key, value]) => {
+			const path = parent ? `${parent}.${key}` : key;
+			const isValue = this.isValueType(value);
+			const isExpanded = this.state[path] ?? this.expanded;
+			return html`
+            <li part="property" role="treeitem"
+                data-path="${path}"
+                aria-expanded="${isExpanded ? "true" : "false"}">
+              <span part="key"
+                    class="key"
+                    ?collapsable="${!isValue}"
+                    ?collapsed="${!isValue && !isExpanded}"
+                    @click=${!isValue ? () => this.handlePropertyKeyClick(path) : null}>
+                ${key}:
+                ${when(!isValue && !isExpanded, () => this.renderPreview(value))}
+              </span>
 
+              ${when(isValue || isExpanded, () => this.renderNode(value, path))}
+            </li>`;
+		})}
+      </ul>
+    `;
+	}
+	/**
+	* 노드의 미리보기를 렌더링합니다.
+	* @param node - JsonObject 또는 JsonArray
+	*/
+	renderPreview(node) {
+		return html`
+      <span part="preview" class="preview">
+        ${Array.isArray(node) ? node.length === 0 ? "[ ]" : `[ ${node.length} items ]` : Object.keys(node).length === 0 ? "{ }" : `{ ${Object.keys(node).length} properties }`}
+      </span>
+    `;
+	}
+	/** JSON 데이터를 순회하며 각 경로의 확장 상태를 설정합니다. */
+	setState(value, parent = "") {
+		if (typeof value !== "object" || value === null) return {};
+		const state = {};
+		Object.entries(value).forEach(([key, item]) => {
+			const path = parent ? `${parent}.${key}` : key;
+			state[path] = this.expanded;
+			Object.assign(state, this.setState(item, path));
+		});
+		return state;
+	}
+	/** 노드 확장/축소 클릭 핸들러 */
+	handlePropertyKeyClick(path) {
+		const isExpanded = this.state[path] ?? false;
+		this.state = {
+			...this.state,
+			[path]: !isExpanded
+		};
+	}
+};
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UJsonBlock.prototype, "expanded", void 0);
+__decorate([property({
+	type: Object,
+	converter: jsonAttrConverter()
+}), __decorateMetadata("design:type", Object)], UJsonBlock.prototype, "value", void 0);
+__decorate([state(), __decorateMetadata("design:type", typeof (_ref = typeof Record !== "undefined" && Record) === "function" ? _ref : Object)], UJsonBlock.prototype, "state", void 0);
+UJsonBlock = __decorate([customElement("u-json-block")], UJsonBlock);
+//#endregion
 export { UJsonBlock };

package/dist/components/blocks/UJsonBlock.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UJsonBlock.styles.ts
+var styles = css`
   :host {
     --indent-size: 2em;
     
@@ -111,5 +111,5 @@ const styles = css`
     bottom: 0.2em;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/blocks/UMarkedBlock.d.ts

@@ -1,7 +1,49 @@
-import { UMarkedBlock } from './UMarkedBlock.component.js';
+import { PropertyValues } from 'lit';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { ReferenceCitation } from '../../types/References.js';
+/**
+ * 마크다운 컨텐츠를 렌더링하는 컴포넌트입니다.
+ *
+ * 주의:
+ * - refs로 삽입되는 커스텀 태그(u-ref-*)는 속성/내용을 모두 escape하여 XSS를 방지합니다.
+ * - 코드블록 내부는 HTML을 전부 텍스트로 취급(escape)하며, refs 태그는 통째 제거합니다.
+ * - 인덱스 기반 삽입(ref.endIndex)이 깨지지 않도록 "normalize(제로폭 제거)"를 insertRefs 전에 1회 수행합니다.
+ */
+export declare class UMarkedBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 마크다운 컨텐츠를 렌더링할 때 사용할 값입니다. */
+    value?: string;
+    /** 컨텐츠의 인용 출처들입니다. */
+    refs?: ReferenceCitation[];
+    private parser;
+    private placeholder;
+    private queued;
+    private timer?;
+    disconnectedCallback(): void;
+    protected shouldUpdate(_changedProperties: PropertyValues): boolean;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/unsafe-html.js').UnsafeHTMLDirective>;
+    /**
+     * 코드블록은 별도의 컴포넌트로 렌더링 합니다.
+     */
+    private renderCode;
+    /**
+     * 테이블은 JSON 데이터로 변환하여 별도의 컴포넌트로 렌더링합니다.
+     * 셀 내부의 인라인 마크다운(볼드, 코드, br 등)도 HTML로 변환합니다.
+     */
+    private renderTable;
+    /**
+     * 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
+     * 마크다운 문자열의 해당 위치에 주석 플레이스홀더를 삽입합니다.
+     */
+    private insertRefs;
+    /**
+     * 코드블록 내부의 <!--ref:idx--> 플레이스홀더와 그 외 refs 태그를 모두 제거하여 HTML이 코드로 렌더링되도록 합니다.
+     */
+    private removeRefs;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-marked-block": UMarkedBlock;
     }
 }
-export { UMarkedBlock };

package/dist/components/blocks/UMarkedBlock.js

@@ -1,5 +1,155 @@
-import { UMarkedBlock } from './UMarkedBlock.component.js';
-
-UMarkedBlock.define("u-marked-block");
-
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "./UCodeBlock.js";
+import "../references/URefTag.js";
+import { URefCard } from "../references/URefCard.js";
+import "../references/URefCardGroup.js";
+import { UTableBlock } from "./UTableBlock.js";
+import { UView } from "../views/UView.js";
+import { styles } from "./UMarkedBlock.styles.js";
+import { nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { Marked, Parser } from "marked";
+import markedKatex from "marked-katex-extension";
+import { escapeHtmlText, stripZeroWidth } from "@iyulab/components/dist/utilities/sanitizers.js";
+import { buildElementHTML } from "@iyulab/components/dist/utilities/elements.js";
+//#region src/components/blocks/UMarkedBlock.ts
+var UMarkedBlock = class UMarkedBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.parser = new Marked({
+			pedantic: false,
+			gfm: true,
+			breaks: true,
+			silent: true,
+			renderer: {
+				code: (token) => this.renderCode(token),
+				table: (token) => this.renderTable(token)
+			}
+		}).use(markedKatex({ output: "mathml" }));
+		this.placeholder = new HtmlPlaceholder();
+		this.queued = false;
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	disconnectedCallback() {
+		clearTimeout(this.timer);
+		super.disconnectedCallback();
+	}
+	shouldUpdate(_changedProperties) {
+		if (this.queued) return false;
+		return true;
+	}
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has("value")) {
+			if (this.queued) return;
+			this.queued = true;
+			this.timer = window.setTimeout(() => {
+				this.queued = false;
+				this.requestUpdate();
+			}, 80);
+		}
+	}
+	render() {
+		let value = this.value;
+		if (!value) return nothing;
+		this.placeholder.reset();
+		value = stripZeroWidth(value);
+		if (this.refs?.length) value = this.insertRefs(value, this.refs);
+		let html = this.parser.parse(value, { async: false });
+		return unsafeHTML(this.placeholder.restore(html));
+	}
+	/** 
+	* 코드블록은 별도의 컴포넌트로 렌더링 합니다.
+	*/
+	renderCode(token) {
+		const lang = token.lang ?? "plaintext";
+		const trimmed = token.raw.trimEnd();
+		const isClosed = trimmed.endsWith("```") || trimmed.endsWith("~~~");
+		if (lang === "view-json") return UView.buildHTML(token.text, { loading: !isClosed });
+		if (lang === "intent-json") return "";
+		const safeText = this.removeRefs(token.text);
+		return buildElementHTML("u-code-block", {
+			lang,
+			loading: !isClosed
+		}, safeText);
+	}
+	/**
+	* 테이블은 JSON 데이터로 변환하여 별도의 컴포넌트로 렌더링합니다.
+	* 셀 내부의 인라인 마크다운(볼드, 코드, br 등)도 HTML로 변환합니다.
+	*/
+	renderTable(token) {
+		const headers = token.header.map((h) => ({
+			text: h.tokens ? Parser.parseInline(h.tokens) : h.text,
+			align: h.align
+		}));
+		const rows = token.rows.map((row) => row.map((cell) => ({
+			text: cell.tokens ? Parser.parseInline(cell.tokens) : cell.text,
+			align: cell.align
+		})));
+		return UTableBlock.buildHTML({
+			headers,
+			rows
+		});
+	}
+	/**
+	* 인용/출처 참조객체가 있을때 ref 태그 HTML을 this.placeholder에 보관하고
+	* 마크다운 문자열의 해당 위치에 주석 플레이스홀더를 삽입합니다.
+	*/
+	insertRefs(value, refs) {
+		const sorted = [...refs].sort((a, b) => b.endIndex - a.endIndex);
+		for (const ref of sorted) {
+			const sources = ref.sources ?? [];
+			const label = escapeHtmlText(ref.label ?? `[${refs.indexOf(ref) + 1}]`);
+			const link = sources.at(0)?.url;
+			let tooltip = "";
+			if (sources.length > 0) tooltip = buildElementHTML("u-ref-card-group", { slot: "tooltip" }, sources.map((s) => URefCard.buildHTML(s)).join(""));
+			const html = buildElementHTML("u-ref-tag", { href: link }, label + tooltip);
+			const key = this.placeholder.store(html);
+			value = value.slice(0, ref.endIndex) + key + value.slice(ref.endIndex);
+		}
+		return value;
+	}
+	/**
+	* 코드블록 내부의 <!--ref:idx--> 플레이스홀더와 그 외 refs 태그를 모두 제거하여 HTML이 코드로 렌더링되도록 합니다.   
+	*/
+	removeRefs(value) {
+		value = value.replace(/<u-ref-tag\b[^>]*>[\s\S]*?<\/u-ref-tag>/gi, "");
+		value = value.replace(/<!--ref:\d+-->/g, "");
+		return value;
+	}
+};
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UMarkedBlock.prototype, "value", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UMarkedBlock.prototype, "refs", void 0);
+UMarkedBlock = __decorate([customElement("u-marked-block")], UMarkedBlock);
+/**
+* Marked 파싱 중 HTML이 GFM에 의해 오염되는 것을 방지하기 위해
+* HTML을 주석 플레이스홀더로 치환하고, 나중에 원래 HTML로 복원하는 유틸입니다.
+*/
+var HtmlPlaceholder = class {
+	constructor() {
+		this.map = {};
+		this.idx = 0;
+	}
+	reset() {
+		this.map = {};
+		this.idx = 0;
+	}
+	/** html을 저장하고 대응하는 플레이스홀더 키를 반환합니다. */
+	store(html) {
+		const key = `<!--ref:${this.idx++}-->`;
+		this.map[key] = html;
+		return key;
+	}
+	/** html 안의 등록된 모든 플레이스홀더를 원래 HTML로 복원합니다. */
+	restore(html) {
+		if (this.idx === 0) return html;
+		return html.replace(/<!--ref:\d+-->/g, (key) => this.map[key] ?? "");
+	}
+};
+//#endregion
 export { UMarkedBlock };

package/dist/components/blocks/UMarkedBlock.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/UMarkedBlock.styles.ts
+var styles = css`
   /* github-markdown styles */
   :host {
     --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
@@ -575,5 +575,5 @@ const styles = css`
     margin: 0 -1.6em .25em .2em;
   }
 `;
-
+//#endregion
 export { styles };

package/dist/components/blocks/URefBlock.d.ts

@@ -1,7 +1,21 @@
-import { URefBlock } from './URefBlock.component.js';
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+import { ReferenceSource } from '../../types/References.js';
+/**
+ * 레퍼런스 정보를 블록 형태로 표시하는 컴포넌트입니다.
+ * 단일 또는 다중 레퍼런스 카드를 그리드 레이아웃으로 표시합니다.
+ */
+export declare class URefBlock extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** 접힘 상태 @default: true */
+    collapsed: boolean;
+    /** 블록 제목 */
+    title: string;
+    /** 출처 목록 */
+    sources?: ReferenceSource[];
+    render(): import('lit-html').TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         "u-ref-block": URefBlock;
     }
 }
-export { URefBlock };

package/dist/components/blocks/URefBlock.js

@@ -1,5 +1,60 @@
-import { URefBlock } from './URefBlock.component.js';
-
-URefBlock.define("u-ref-block");
+import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js";
+import "../references/URefCard.js";
+import { styles } from "./URefBlock.styles.js";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/components/blocks/URefBlock.ts
+var URefBlock = class URefBlock extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.collapsed = true;
+		this.title = "";
+	}
+	static {
+		this.styles = [super.styles, styles];
+	}
+	render() {
+		return html`
+      <button class="header" @click=${() => this.collapsed = !this.collapsed}>
+        <u-icon
+          ?collapsed=${this.collapsed}
+          lib="internal" 
+          name="chevron-down"
+        ></u-icon>
+        <div class="title">
+          ${this.title || "References"}
+        </div>
+        <div style="flex: 1;"></div>
+        <div class="count">
+          ${this.sources ? this.sources.length : 0}
+        </div>
+      </button>
 
+      <div class="body" ?collapsed=${this.collapsed}>
+        ${repeat(this.sources || [], (_, idx) => idx, (source) => {
+			return html`
+            <u-ref-card
+              .type=${source.type}
+              .url=${source.url}
+              .title=${source.title || ""}
+              .snippet=${source.snippet || ""}
+              .tags=${source.tags}
+            ></u-ref-card>
+          `;
+		})}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], URefBlock.prototype, "collapsed", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], URefBlock.prototype, "title", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], URefBlock.prototype, "sources", void 0);
+URefBlock = __decorate([customElement("u-ref-block")], URefBlock);
+//#endregion
 export { URefBlock };

package/dist/components/blocks/URefBlock.styles.js

@@ -1,6 +1,6 @@
-import { css } from 'lit';
-
-const styles = css`
+import { css } from "lit";
+//#region src/components/blocks/URefBlock.styles.ts
+var styles = css`
   :host {
     display: flex;
     flex-direction: column;
@@ -71,5 +71,5 @@ const styles = css`
     width: 100%;
   }
 `;
-
+//#endregion
 export { styles };