instaui 0.1.4__py3-none-any.whl → 0.1.6__py3-none-any.whl

instaui/components/shiki_code/static/themes/vitesse-light.mjs

@@ -0,0 +1,2 @@
+/* Theme: vitesse-light */
+export default Object.freeze(JSON.parse("{\"colors\":{\"activityBar.activeBorder\":\"#1c6b48\",\"activityBar.background\":\"#ffffff\",\"activityBar.border\":\"#f0f0f0\",\"activityBar.foreground\":\"#393a34\",\"activityBar.inactiveForeground\":\"#393a3450\",\"activityBarBadge.background\":\"#4e4f47\",\"activityBarBadge.foreground\":\"#ffffff\",\"badge.background\":\"#393a3490\",\"badge.foreground\":\"#ffffff\",\"breadcrumb.activeSelectionForeground\":\"#22222218\",\"breadcrumb.background\":\"#f7f7f7\",\"breadcrumb.focusForeground\":\"#393a34\",\"breadcrumb.foreground\":\"#6a737d\",\"breadcrumbPicker.background\":\"#ffffff\",\"button.background\":\"#1c6b48\",\"button.foreground\":\"#ffffff\",\"button.hoverBackground\":\"#1c6b48\",\"checkbox.background\":\"#f7f7f7\",\"checkbox.border\":\"#d1d5da\",\"debugToolBar.background\":\"#ffffff\",\"descriptionForeground\":\"#393a3490\",\"diffEditor.insertedTextBackground\":\"#1c6b4830\",\"diffEditor.removedTextBackground\":\"#ab595940\",\"dropdown.background\":\"#ffffff\",\"dropdown.border\":\"#f0f0f0\",\"dropdown.foreground\":\"#393a34\",\"dropdown.listBackground\":\"#f7f7f7\",\"editor.background\":\"#ffffff\",\"editor.findMatchBackground\":\"#e6cc7744\",\"editor.findMatchHighlightBackground\":\"#e6cc7766\",\"editor.focusedStackFrameHighlightBackground\":\"#fff5b1\",\"editor.foldBackground\":\"#22222210\",\"editor.foreground\":\"#393a34\",\"editor.inactiveSelectionBackground\":\"#22222210\",\"editor.lineHighlightBackground\":\"#f7f7f7\",\"editor.selectionBackground\":\"#22222218\",\"editor.selectionHighlightBackground\":\"#22222210\",\"editor.stackFrameHighlightBackground\":\"#fffbdd\",\"editor.wordHighlightBackground\":\"#1c6b4805\",\"editor.wordHighlightStrongBackground\":\"#1c6b4810\",\"editorBracketHighlight.foreground1\":\"#2993a3\",\"editorBracketHighlight.foreground2\":\"#1e754f\",\"editorBracketHighlight.foreground3\":\"#a65e2b\",\"editorBracketHighlight.foreground4\":\"#a13865\",\"editorBracketHighlight.foreground5\":\"#bda437\",\"editorBracketHighlight.foreground6\":\"#296aa3\",\"editorBracketMatch.background\":\"#1c6b4820\",\"editorError.foreground\":\"#ab5959\",\"editorGroup.border\":\"#f0f0f0\",\"editorGroupHeader.tabsBackground\":\"#ffffff\",\"editorGroupHeader.tabsBorder\":\"#f0f0f0\",\"editorGutter.addedBackground\":\"#1e754f\",\"editorGutter.commentRangeForeground\":\"#393a3450\",\"editorGutter.deletedBackground\":\"#ab5959\",\"editorGutter.foldingControlForeground\":\"#393a3490\",\"editorGutter.modifiedBackground\":\"#296aa3\",\"editorHint.foreground\":\"#1e754f\",\"editorIndentGuide.activeBackground\":\"#00000030\",\"editorIndentGuide.background\":\"#00000015\",\"editorInfo.foreground\":\"#296aa3\",\"editorInlayHint.background\":\"#f7f7f7\",\"editorInlayHint.foreground\":\"#999999\",\"editorLineNumber.activeForeground\":\"#4e4f47\",\"editorLineNumber.foreground\":\"#393a3450\",\"editorOverviewRuler.border\":\"#fff\",\"editorStickyScroll.background\":\"#f7f7f7\",\"editorStickyScrollHover.background\":\"#f7f7f7\",\"editorWarning.foreground\":\"#a65e2b\",\"editorWhitespace.foreground\":\"#00000015\",\"editorWidget.background\":\"#ffffff\",\"errorForeground\":\"#ab5959\",\"focusBorder\":\"#00000000\",\"foreground\":\"#393a34\",\"gitDecoration.addedResourceForeground\":\"#1e754f\",\"gitDecoration.conflictingResourceForeground\":\"#a65e2b\",\"gitDecoration.deletedResourceForeground\":\"#ab5959\",\"gitDecoration.ignoredResourceForeground\":\"#393a3450\",\"gitDecoration.modifiedResourceForeground\":\"#296aa3\",\"gitDecoration.submoduleResourceForeground\":\"#393a3490\",\"gitDecoration.untrackedResourceForeground\":\"#2993a3\",\"input.background\":\"#f7f7f7\",\"input.border\":\"#f0f0f0\",\"input.foreground\":\"#393a34\",\"input.placeholderForeground\":\"#393a3490\",\"inputOption.activeBackground\":\"#393a3450\",\"list.activeSelectionBackground\":\"#f7f7f7\",\"list.activeSelectionForeground\":\"#393a34\",\"list.focusBackground\":\"#f7f7f7\",\"list.highlightForeground\":\"#1c6b48\",\"list.hoverBackground\":\"#f7f7f7\",\"list.hoverForeground\":\"#393a34\",\"list.inactiveFocusBackground\":\"#ffffff\",\"list.inactiveSelectionBackground\":\"#f7f7f7\",\"list.inactiveSelectionForeground\":\"#393a34\",\"menu.separatorBackground\":\"#f0f0f0\",\"notificationCenterHeader.background\":\"#ffffff\",\"notificationCenterHeader.foreground\":\"#6a737d\",\"notifications.background\":\"#ffffff\",\"notifications.border\":\"#f0f0f0\",\"notifications.foreground\":\"#393a34\",\"notificationsErrorIcon.foreground\":\"#ab5959\",\"notificationsInfoIcon.foreground\":\"#296aa3\",\"notificationsWarningIcon.foreground\":\"#a65e2b\",\"panel.background\":\"#ffffff\",\"panel.border\":\"#f0f0f0\",\"panelInput.border\":\"#e1e4e8\",\"panelTitle.activeBorder\":\"#1c6b48\",\"panelTitle.activeForeground\":\"#393a34\",\"panelTitle.inactiveForeground\":\"#6a737d\",\"peekViewEditor.background\":\"#ffffff\",\"peekViewResult.background\":\"#ffffff\",\"pickerGroup.border\":\"#f0f0f0\",\"pickerGroup.foreground\":\"#393a34\",\"problemsErrorIcon.foreground\":\"#ab5959\",\"problemsInfoIcon.foreground\":\"#296aa3\",\"problemsWarningIcon.foreground\":\"#a65e2b\",\"progressBar.background\":\"#1c6b48\",\"quickInput.background\":\"#ffffff\",\"quickInput.foreground\":\"#393a34\",\"quickInputList.focusBackground\":\"#f7f7f7\",\"scrollbar.shadow\":\"#6a737d33\",\"scrollbarSlider.activeBackground\":\"#393a3450\",\"scrollbarSlider.background\":\"#393a3410\",\"scrollbarSlider.hoverBackground\":\"#393a3450\",\"settings.headerForeground\":\"#393a34\",\"settings.modifiedItemIndicator\":\"#1c6b48\",\"sideBar.background\":\"#ffffff\",\"sideBar.border\":\"#f0f0f0\",\"sideBar.foreground\":\"#4e4f47\",\"sideBarSectionHeader.background\":\"#ffffff\",\"sideBarSectionHeader.border\":\"#f0f0f0\",\"sideBarSectionHeader.foreground\":\"#393a34\",\"sideBarTitle.foreground\":\"#393a34\",\"statusBar.background\":\"#ffffff\",\"statusBar.border\":\"#f0f0f0\",\"statusBar.debuggingBackground\":\"#f7f7f7\",\"statusBar.debuggingForeground\":\"#4e4f47\",\"statusBar.foreground\":\"#4e4f47\",\"statusBar.noFolderBackground\":\"#ffffff\",\"statusBarItem.prominentBackground\":\"#f7f7f7\",\"tab.activeBackground\":\"#ffffff\",\"tab.activeBorder\":\"#f0f0f0\",\"tab.activeBorderTop\":\"#393a3490\",\"tab.activeForeground\":\"#393a34\",\"tab.border\":\"#f0f0f0\",\"tab.hoverBackground\":\"#f7f7f7\",\"tab.inactiveBackground\":\"#ffffff\",\"tab.inactiveForeground\":\"#6a737d\",\"tab.unfocusedActiveBorder\":\"#f0f0f0\",\"tab.unfocusedActiveBorderTop\":\"#f0f0f0\",\"tab.unfocusedHoverBackground\":\"#ffffff\",\"terminal.ansiBlack\":\"#121212\",\"terminal.ansiBlue\":\"#296aa3\",\"terminal.ansiBrightBlack\":\"#aaaaaa\",\"terminal.ansiBrightBlue\":\"#296aa3\",\"terminal.ansiBrightCyan\":\"#2993a3\",\"terminal.ansiBrightGreen\":\"#1e754f\",\"terminal.ansiBrightMagenta\":\"#a13865\",\"terminal.ansiBrightRed\":\"#ab5959\",\"terminal.ansiBrightWhite\":\"#dddddd\",\"terminal.ansiBrightYellow\":\"#bda437\",\"terminal.ansiCyan\":\"#2993a3\",\"terminal.ansiGreen\":\"#1e754f\",\"terminal.ansiMagenta\":\"#a13865\",\"terminal.ansiRed\":\"#ab5959\",\"terminal.ansiWhite\":\"#dbd7ca\",\"terminal.ansiYellow\":\"#bda437\",\"terminal.foreground\":\"#393a34\",\"terminal.selectionBackground\":\"#22222218\",\"textBlockQuote.background\":\"#ffffff\",\"textBlockQuote.border\":\"#f0f0f0\",\"textCodeBlock.background\":\"#ffffff\",\"textLink.activeForeground\":\"#1c6b48\",\"textLink.foreground\":\"#1c6b48\",\"textPreformat.foreground\":\"#586069\",\"textSeparator.foreground\":\"#d1d5da\",\"titleBar.activeBackground\":\"#ffffff\",\"titleBar.activeForeground\":\"#4e4f47\",\"titleBar.border\":\"#f7f7f7\",\"titleBar.inactiveBackground\":\"#ffffff\",\"titleBar.inactiveForeground\":\"#6a737d\",\"tree.indentGuidesStroke\":\"#e1e4e8\",\"welcomePage.buttonBackground\":\"#f6f8fa\",\"welcomePage.buttonHoverBackground\":\"#e1e4e8\"},\"displayName\":\"Vitesse Light\",\"name\":\"vitesse-light\",\"semanticHighlighting\":true,\"semanticTokenColors\":{\"class\":\"#5a6aa6\",\"interface\":\"#2e808f\",\"namespace\":\"#b05a78\",\"property\":\"#998418\",\"type\":\"#2e808f\"},\"tokenColors\":[{\"scope\":[\"comment\",\"punctuation.definition.comment\",\"string.comment\"],\"settings\":{\"foreground\":\"#a0ada0\"}},{\"scope\":[\"delimiter.bracket\",\"delimiter\",\"invalid.illegal.character-not-allowed-here.html\",\"keyword.operator.rest\",\"keyword.operator.spread\",\"keyword.operator.type.annotation\",\"keyword.operator.relational\",\"keyword.operator.assignment\",\"keyword.operator.type\",\"meta.brace\",\"meta.tag.block.any.html\",\"meta.tag.inline.any.html\",\"meta.tag.structure.input.void.html\",\"meta.type.annotation\",\"meta.embedded.block.github-actions-expression\",\"storage.type.function.arrow\",\"meta.objectliteral.ts\",\"punctuation\",\"punctuation.definition.string.begin.html.vue\",\"punctuation.definition.string.end.html.vue\"],\"settings\":{\"foreground\":\"#999999\"}},{\"scope\":[\"constant\",\"entity.name.constant\",\"variable.language\",\"meta.definition.variable\"],\"settings\":{\"foreground\":\"#a65e2b\"}},{\"scope\":[\"entity\",\"entity.name\"],\"settings\":{\"foreground\":\"#59873a\"}},{\"scope\":\"variable.parameter.function\",\"settings\":{\"foreground\":\"#393a34\"}},{\"scope\":[\"entity.name.tag\",\"tag.html\"],\"settings\":{\"foreground\":\"#1e754f\"}},{\"scope\":\"entity.name.function\",\"settings\":{\"foreground\":\"#59873a\"}},{\"scope\":[\"keyword\",\"storage.type.class.jsdoc\",\"punctuation.definition.template-expression\"],\"settings\":{\"foreground\":\"#1e754f\"}},{\"scope\":[\"storage\",\"storage.type\",\"support.type.builtin\",\"constant.language.undefined\",\"constant.language.null\",\"constant.language.import-export-all.ts\"],\"settings\":{\"foreground\":\"#ab5959\"}},{\"scope\":[\"text.html.derivative\",\"storage.modifier.package\",\"storage.modifier.import\",\"storage.type.java\"],\"settings\":{\"foreground\":\"#393a34\"}},{\"scope\":[\"string\",\"string punctuation.section.embedded source\",\"attribute.value\"],\"settings\":{\"foreground\":\"#b56959\"}},{\"scope\":[\"punctuation.definition.string\"],\"settings\":{\"foreground\":\"#b5695977\"}},{\"scope\":[\"punctuation.support.type.property-name\"],\"settings\":{\"foreground\":\"#99841877\"}},{\"scope\":\"support\",\"settings\":{\"foreground\":\"#998418\"}},{\"scope\":[\"property\",\"meta.property-name\",\"meta.object-literal.key\",\"entity.name.tag.yaml\",\"attribute.name\"],\"settings\":{\"foreground\":\"#998418\"}},{\"scope\":[\"entity.other.attribute-name\",\"invalid.deprecated.entity.other.attribute-name.html\"],\"settings\":{\"foreground\":\"#b07d48\"}},{\"scope\":[\"variable\",\"identifier\"],\"settings\":{\"foreground\":\"#b07d48\"}},{\"scope\":[\"support.type.primitive\",\"entity.name.type\"],\"settings\":{\"foreground\":\"#2e8f82\"}},{\"scope\":\"namespace\",\"settings\":{\"foreground\":\"#b05a78\"}},{\"scope\":[\"keyword.operator\",\"keyword.operator.assignment.compound\",\"meta.var.expr.ts\"],\"settings\":{\"foreground\":\"#ab5959\"}},{\"scope\":\"invalid.broken\",\"settings\":{\"fontStyle\":\"italic\",\"foreground\":\"#b31d28\"}},{\"scope\":\"invalid.deprecated\",\"settings\":{\"fontStyle\":\"italic\",\"foreground\":\"#b31d28\"}},{\"scope\":\"invalid.illegal\",\"settings\":{\"fontStyle\":\"italic\",\"foreground\":\"#b31d28\"}},{\"scope\":\"invalid.unimplemented\",\"settings\":{\"fontStyle\":\"italic\",\"foreground\":\"#b31d28\"}},{\"scope\":\"carriage-return\",\"settings\":{\"background\":\"#d73a49\",\"content\":\"^M\",\"fontStyle\":\"italic underline\",\"foreground\":\"#fafbfc\"}},{\"scope\":\"message.error\",\"settings\":{\"foreground\":\"#b31d28\"}},{\"scope\":\"string variable\",\"settings\":{\"foreground\":\"#b56959\"}},{\"scope\":[\"source.regexp\",\"string.regexp\"],\"settings\":{\"foreground\":\"#ab5e3f\"}},{\"scope\":[\"string.regexp.character-class\",\"string.regexp constant.character.escape\",\"string.regexp source.ruby.embedded\",\"string.regexp string.regexp.arbitrary-repitition\"],\"settings\":{\"foreground\":\"#b56959\"}},{\"scope\":\"string.regexp constant.character.escape\",\"settings\":{\"foreground\":\"#bda437\"}},{\"scope\":[\"support.constant\"],\"settings\":{\"foreground\":\"#a65e2b\"}},{\"scope\":[\"keyword.operator.quantifier.regexp\",\"constant.numeric\",\"number\"],\"settings\":{\"foreground\":\"#2f798a\"}},{\"scope\":[\"keyword.other.unit\"],\"settings\":{\"foreground\":\"#ab5959\"}},{\"scope\":[\"constant.language.boolean\",\"constant.language\"],\"settings\":{\"foreground\":\"#1e754f\"}},{\"scope\":\"meta.module-reference\",\"settings\":{\"foreground\":\"#1c6b48\"}},{\"scope\":\"punctuation.definition.list.begin.markdown\",\"settings\":{\"foreground\":\"#a65e2b\"}},{\"scope\":[\"markup.heading\",\"markup.heading entity.name\"],\"settings\":{\"fontStyle\":\"bold\",\"foreground\":\"#1c6b48\"}},{\"scope\":\"markup.quote\",\"settings\":{\"foreground\":\"#2e808f\"}},{\"scope\":\"markup.italic\",\"settings\":{\"fontStyle\":\"italic\",\"foreground\":\"#393a34\"}},{\"scope\":\"markup.bold\",\"settings\":{\"fontStyle\":\"bold\",\"foreground\":\"#393a34\"}},{\"scope\":\"markup.raw\",\"settings\":{\"foreground\":\"#1c6b48\"}},{\"scope\":[\"markup.deleted\",\"meta.diff.header.from-file\",\"punctuation.definition.deleted\"],\"settings\":{\"background\":\"#ffeef0\",\"foreground\":\"#b31d28\"}},{\"scope\":[\"markup.inserted\",\"meta.diff.header.to-file\",\"punctuation.definition.inserted\"],\"settings\":{\"background\":\"#f0fff4\",\"foreground\":\"#22863a\"}},{\"scope\":[\"markup.changed\",\"punctuation.definition.changed\"],\"settings\":{\"background\":\"#ffebda\",\"foreground\":\"#e36209\"}},{\"scope\":[\"markup.ignored\",\"markup.untracked\"],\"settings\":{\"background\":\"#005cc5\",\"foreground\":\"#f6f8fa\"}},{\"scope\":\"meta.diff.range\",\"settings\":{\"fontStyle\":\"bold\",\"foreground\":\"#6f42c1\"}},{\"scope\":\"meta.diff.header\",\"settings\":{\"foreground\":\"#005cc5\"}},{\"scope\":\"meta.separator\",\"settings\":{\"fontStyle\":\"bold\",\"foreground\":\"#005cc5\"}},{\"scope\":\"meta.output\",\"settings\":{\"foreground\":\"#005cc5\"}},{\"scope\":[\"brackethighlighter.tag\",\"brackethighlighter.curly\",\"brackethighlighter.round\",\"brackethighlighter.square\",\"brackethighlighter.angle\",\"brackethighlighter.quote\"],\"settings\":{\"foreground\":\"#586069\"}},{\"scope\":\"brackethighlighter.unmatched\",\"settings\":{\"foreground\":\"#b31d28\"}},{\"scope\":[\"constant.other.reference.link\",\"string.other.link\",\"punctuation.definition.string.begin.markdown\",\"punctuation.definition.string.end.markdown\"],\"settings\":{\"foreground\":\"#b56959\"}},{\"scope\":[\"markup.underline.link.markdown\",\"markup.underline.link.image.markdown\"],\"settings\":{\"fontStyle\":\"underline\",\"foreground\":\"#393a3490\"}},{\"scope\":[\"type.identifier\",\"constant.other.character-class.regexp\"],\"settings\":{\"foreground\":\"#5a6aa6\"}},{\"scope\":[\"entity.other.attribute-name.html.vue\"],\"settings\":{\"foreground\":\"#59873a\"}},{\"scope\":[\"invalid.illegal.unrecognized-tag.html\"],\"settings\":{\"fontStyle\":\"normal\"}}],\"type\":\"light\"}"))

instaui/components/value_element.py

@@ -11,6 +11,7 @@ from instaui import consts
 
 from instaui.vars.types import TMaybeRef
 from instaui.vars.web_computed import WebComputed
+from instaui.ui_functions.ui_types import is_bindable
 
 
 _T = TypeVar("_T")
@@ -28,10 +29,13 @@ class ValueElement(Element, Generic[_T]):
         self.__is_html_component = is_html_component
 
         if value is not None:
-            if isinstance(value, WebComputed):
-                self.props({value_name:value})
+            if is_bindable(value):
+                if isinstance(value, WebComputed):
+                    self.props({value_name: value})
+                else:
+                    self.vmodel(value, prop_name=value_name)
             else:
-                self.vmodel(value, prop_name=value_name)
+                self.props({value_name: value})
 
     def vmodel(
         self,

instaui/consts.py

@@ -13,8 +13,9 @@ APP_CSS_PATH = _STATIC_DIR.joinpath("insta-ui.css")
 VUE_IIFE_JS_PATH = _STATIC_DIR.joinpath("vue.global.prod.js")
 VUE_ES_JS_PATH = _STATIC_DIR.joinpath("vue.esm-browser.prod.js")
 VUE_ES_RUNTIME_JS_PATH = _STATIC_DIR.joinpath("vue.runtime.esm-browser.prod.js")
-TAILWIND_JS_PATH = _STATIC_DIR.joinpath("tailwindcss.min.js")
 FAVICON_PATH = _STATIC_DIR.joinpath("insta-ui.ico")
+# tools
+TOOLS_BROWSER_JS_PATH = _STATIC_DIR.joinpath("instaui-tools-browser.js")
 
 PAGE_TITLE = "insta-ui"
 

instaui/event/js_event.py

@@ -25,6 +25,7 @@ class JsEvent(Jsonable, EventMixin):
 
     def _to_json_dict(self):
         data = super()._to_json_dict()
+        data["type"] = self.event_type()
 
         if self._inputs:
             data["inputs"] = self._inputs

instaui/event/web_event.py

@@ -7,6 +7,8 @@ from instaui.vars.mixin_types.py_binding import CanInputMixin, CanOutputMixin
 from instaui.handlers import event_handler
 from .event_mixin import EventMixin
 
+_SYNC_TYPE = "sync"
+_ASYNC_TYPE = "async"
 
 P = ParamSpec("P")
 R = typing.TypeVar("R")
@@ -48,18 +50,15 @@ class WebEvent(Jsonable, EventMixin, typing.Generic[P, R]):
             page_path=app.page_path, handler=self._fn
         )
 
-        handler_path = (
-            event_handler.ASYNC_URL
-            if inspect.iscoroutinefunction(self._fn)
-            else event_handler.SYNC_URL
-        )
-
         event_handler.register_event_handler(
             hkey, self._fn, self._outputs, self._inputs
         )
 
         data = {}
-        data["url"] = handler_path
+        data["type"] = self.event_type()
+        data["fType"] = (
+            _ASYNC_TYPE if inspect.iscoroutinefunction(self._fn) else _SYNC_TYPE
+        )
         data["hKey"] = hkey
         data["sid"] = self._sid
 

instaui/experimental/link_sql/__init__.py

@@ -0,0 +1,3 @@
+__all__ = ["duckdb"]
+
+from ._duckdb import _facade as duckdb

instaui/experimental/link_sql/_base.py

@@ -0,0 +1,23 @@
+from instaui import ui
+from ._types import TFilters
+
+
+class DataSourceElement(ui.element, esm="./data_source.js"):
+    def __init__(
+        self,
+    ):
+        super().__init__()
+
+        self._ele_ref = ui.element_ref()
+        self.element_ref(self._ele_ref)
+
+        self.filters: TFilters = ui.state({})
+
+        self.on(
+            "filter-changed",
+            ui.js_event(
+                inputs=[ui.event_context.e()],
+                outputs=[self.filters],
+                code="v=> v.filters",
+            ),
+        )

instaui/experimental/link_sql/_duckdb.py

@@ -0,0 +1,221 @@
+from pathlib import Path
+from typing import Dict, TypeVar
+import itertools
+from instaui import ui, arco
+from ._base import DataSourceElement
+from ._types import TFilters, TQueryStrInfo
+
+try:
+    import pandas
+    import duckdb
+except ImportError as e:
+    raise e
+
+
+TElementClass = TypeVar("TElementClass", bound=ui.element)
+
+
+class DuckdbDataFrameSource:
+    QUERY_ID: int = 0
+
+    def __init__(
+        self,
+        table_name: str,
+    ):
+        super().__init__()
+
+        self._element = DataSourceElement()
+        self._conn = duckdb.connect(":default:", read_only=False)
+        self._table_name = table_name
+
+    def _generate_query_id(self):
+        self.QUERY_ID += 1
+        return self.QUERY_ID
+
+    def __getitem__(self, field: str):
+        def use_fn(cls: type[TElementClass]) -> TElementClass:
+            if issubclass(cls, arco.select):
+                return self.__apply_select(field)(cls)
+
+            if issubclass(cls, arco.input):
+                return self.__apply_input(field)(cls)
+
+            raise NotImplementedError(f"Not supported component:{cls.__name__}")
+
+        return use_fn
+
+    def __query_distinct_field_values(
+        self, field: str, query_id: int, order_sql: str = ""
+    ):
+        @ui.computed(inputs=[self.__query_str_info(field, query_id), field, order_sql])
+        def query_distinct_field_values_computed(
+            with_filters_info: TQueryStrInfo, field: str, order_sql: str
+        ):
+            sql = f"with cte as ({with_filters_info['sql']}) select distinct {field} from cte {order_sql}"
+
+            local_con = self._conn.cursor()
+
+            query = local_con.sql(sql, params=with_filters_info["params"])
+            return list(itertools.chain(*query.fetchall()))
+
+        return query_distinct_field_values_computed
+
+    def __apply_select(self, field: str):
+        def use_fn(cls: type[arco.select]) -> arco.select:
+            query_id = self._generate_query_id()
+            element = cls(
+                self.__query_distinct_field_values(
+                    field=field, query_id=query_id, order_sql=f"order by {field}"
+                )
+            )
+
+            on_change = ui.js_event(
+                inputs=[ui.event_context.e(), field, query_id],
+                outputs=[self._element._ele_ref],
+                code=r"""(value,field,query_id) => {
+if (value) {
+    return {method: 'addFilter', args:[{field, expr: `${field}= ?`,value,query_id}]};
+}
+
+return {method:'removeFilter', args:[{field,query_id}]};
+                }""",
+            )
+
+            element.on_change(on_change)
+
+            return element
+
+        return use_fn
+
+    def __apply_input(self, field: str):
+        def use_fn(cls: type[arco.input]) -> arco.input:
+            query_id = self._generate_query_id()
+            element = cls()
+
+            on_change = ui.js_event(
+                inputs=[ui.event_context.e(), field, query_id],
+                outputs=[self._element._ele_ref],
+                code=r"""(value,field,query_id) => {
+if (value) {
+    value = `%${value.trim()}%`
+    return {method: 'addFilter', args:[{field, expr: `${field} like ?`,value,replace:true,query_id}]};
+}
+
+return {method:'removeFilter', args:[{field,query_id}]};
+                }""",
+            )
+
+            element.on_input(on_change)
+
+            return element
+
+        return use_fn
+
+    def __query_str_info(self, target_field: str = "", query_id: int = -1):
+        @ui.computed(inputs=[self._element.filters, target_field, query_id])
+        def query_str_computed(filters: TFilters, target_field: str, query_id: int):
+            if not filters:
+                return {
+                    "sql": f"select * from {self._table_name}",
+                    "params": [],
+                }
+            else:
+                filter_exprs = []
+
+                if target_field:
+                    target_key = f"{target_field}-{query_id}"
+                    without_target_exprs = (
+                        exprs for key, exprs in filters.items() if key != target_key
+                    )
+                    filter_exprs = list(itertools.chain(*without_target_exprs))
+                else:
+                    filter_exprs = list(itertools.chain(*filters.values()))
+
+                where_stem = " and ".join(info["expr"] for info in filter_exprs)
+                if where_stem:
+                    where_stem = f" where {where_stem}"
+                return {
+                    "sql": f"select * from {self._table_name}{where_stem}",
+                    "params": [info["value"] for info in filter_exprs],
+                }
+
+        return query_str_computed
+
+    def query_str(self):
+        return ui.js_computed(
+            inputs=[self.__query_str_info()],
+            code=r"""info=>{
+    const {sql,params} = info;
+    let currentIndex = 0;
+    return sql.replace(/\?/g, function () {
+        if (currentIndex >= params.length) {
+            throw new Error('Not enough parameters provided for the SQL statement.');
+        }
+        return JSON.stringify(params[currentIndex++]);
+    });                                                
+}""",
+        )
+
+    def filters(self):
+        return self._element.filters
+
+    def __apply_table(self, *, sql: str):
+        def use_fn(cls: type[arco.table]) -> arco.table:
+            @ui.computed(inputs=[self.__query_str_info(), sql])
+            def table_query(with_filters_into: TQueryStrInfo, sql: str):
+                sql = f"with cte as ({with_filters_into['sql']}) {sql}"
+
+                local_con = self._conn.cursor()
+
+                query = local_con.sql(sql, params=with_filters_into["params"])
+                columns = query.columns
+                values = query.fetchall()
+
+                real_cols = [{"title": col, "dataIndex": col} for col in columns]
+
+                real_values = [
+                    {col: val for col, val in zip(columns, row)} for row in values
+                ]
+
+                return {
+                    "columns": real_cols,
+                    "data": real_values,
+                }
+
+            element = cls(
+                data=ui.js_computed(inputs=[table_query], code=r"v=> v ? v.data : []"),
+                columns=ui.js_computed(
+                    inputs=[table_query], code=r"v=> v ? v.columns : []"
+                ),
+            )
+
+            return element
+
+        return use_fn
+
+    def __call__(self, cls: type[arco.table], *, sql: str = "select * from cte"):
+        return self.__apply_table(sql=sql)(cls)
+
+    def query_table(self, *, sql: str):
+        return self.__apply_table(sql=sql)
+
+
+class Facade:
+    def __call__(self, db: Path):
+        self.db = db
+        raise NotImplementedError()
+
+    @classmethod
+    def from_pandas(
+        cls, dataframe: "pandas.DataFrame", *, table_name: str = "df"
+    ) -> DuckdbDataFrameSource:
+        ds = DuckdbDataFrameSource(table_name)
+
+        cursor = ds._conn.cursor()
+        cursor.execute(
+            f"create table if not exists {table_name} as select * from dataframe"
+        )
+        return ds
+
+
+_facade = Facade()

instaui/experimental/link_sql/_types.py

@@ -0,0 +1,15 @@
+from typing import Any, Dict, List
+from typing_extensions import TypedDict
+
+
+class TFilterInfo(TypedDict):
+    expr: str
+    value: Any
+
+
+TFilters = Dict[str, List[TFilterInfo]]
+
+
+class TQueryStrInfo(TypedDict):
+    sql: str
+    params: List[Any]

instaui/experimental/link_sql/data_source.js

@@ -0,0 +1,50 @@
+
+export default {
+    props: [],
+
+    setup(props, { emit, expose }) {
+        const filters = new Map()
+
+        function addFilter(filter) {
+            const { field, expr, value, replace = true, query_id } = filter
+            const key = `${field}-${query_id}`
+
+            if (!filters.has(key)) {
+                filters.set(key, [])
+            }
+
+            const info = { expr, value }
+
+            if (replace) {
+                filters.set(key, [info])
+            } else {
+                filters.get(key).push(info)
+            }
+            emit("filter-changed", { filters: Object.fromEntries(filters.entries()), target: field, query_id })
+        }
+
+        function removeFilter(info) {
+            const { field, query_id } = info
+            const key = `${field}-${query_id}`
+
+            filters.delete(key)
+            emit("filter-changed", { filters: Object.fromEntries(filters.entries()), target: field, query_id })
+        }
+
+
+
+        function test(count) {
+            console.log('test', count)
+        }
+
+        expose({
+            test,
+            addFilter,
+            removeFilter,
+        })
+
+
+    },
+
+
+}

instaui/fastapi_server/debug_mode_router.py

@@ -18,7 +18,7 @@ def create_router(app: FastAPI):
 
 
 async def event_generator(
-    request: Request, connection_id: str, interval_heart_beat_sec: int = 2
+    request: Request, connection_id: str, interval_heart_beat_sec: float = 0.8
 ):
     logger.debug("debug sse started")
     task_event = asyncio.Event()

instaui/fastapi_server/server.py

@@ -43,7 +43,6 @@ INSTAUI_STATIC_URL = f"/_instaui_{_INSTA_VERSION}/static"
 VUE_JS_HASH_LINK = f"{INSTAUI_STATIC_URL}/{consts.VUE_ES_JS_PATH.name}"
 INSTAUI_JS_HASH_LINK = f"{INSTAUI_STATIC_URL}/{consts.APP_ES_JS_PATH.name}"
 APP_CSS_LINK = f"{INSTAUI_STATIC_URL}/{consts.APP_CSS_PATH.name}"
-TAILWIND_JS_HASH_LINK = f"{INSTAUI_STATIC_URL}/{consts.TAILWIND_JS_PATH.name}"
 FAVICON_LINK = f"{INSTAUI_STATIC_URL}/{consts.FAVICON_PATH.name}"
 
 
@@ -143,13 +142,6 @@ class Server:
             or consts.PAGE_TITLE,
         )
 
-        if html_resource.use_tailwind is None:
-            if default_html_resource.use_tailwind:
-                model.js_links.append(JsLink(TAILWIND_JS_HASH_LINK))
-        else:
-            if html_resource.use_tailwind:
-                model.js_links.append(JsLink(TAILWIND_JS_HASH_LINK))
-
         # register custom components
         for component in system_slot._component_dependencies:
             if not component.esm:
@@ -192,8 +184,8 @@ class Server:
                     model.css_links.append(resource.record_resource(css_link))
 
         # css file link to web static link
-        for link, attrs in itertools.chain(
-            html_resource._css_links.items(), default_html_resource._css_links.items()
+        for link in html_resource.get_valid_css_links(
+            default_html_resource._css_links_manager
         ):
             if isinstance(link, Path):
                 model.css_links.append(resource.record_resource(link))
@@ -201,8 +193,8 @@ class Server:
                 model.css_links.append(link)
 
         # js file link to web static link
-        for info in itertools.chain(
-            html_resource._js_links, default_html_resource._js_links
+        for info in html_resource.get_valid_js_links(
+            default_html_resource._js_links_manager
         ):
             link = (
                 resource.record_resource(info.link)

instaui/handlers/event_handler.py

@@ -1,15 +1,17 @@
 from __future__ import annotations
 import threading
 from typing import Callable, Dict, Optional, Sequence, TYPE_CHECKING
-from . import _utils
 import ast
+from . import _utils
 from instaui.vars.event_context import DatasetEventContext
+from instaui.runtime._app import update_web_server_info
 
 if TYPE_CHECKING:
     from instaui.vars.mixin_types.py_binding import CanOutputMixin, CanInputMixin
 
 ASYNC_URL = "/instaui/event/async"
 SYNC_URL = "/instaui/event/sync"
+update_web_server_info(event_url=SYNC_URL, event_async_url=ASYNC_URL)
 _event_handlers: Dict[str, _utils.HandlerInfo] = {}
 dict_lock = threading.Lock()
 

instaui/handlers/watch_handler.py

@@ -9,12 +9,16 @@ from typing import (
 from dataclasses import dataclass
 
 from instaui.runtime.context import get_context
+from instaui.runtime._app import update_web_server_info
 from instaui.systems import func_system
 from . import _utils
 
 
 ASYNC_URL = "/instaui/watch/async"
 SYNC_URL = "/instaui/watch/sync"
+
+update_web_server_info(watch_url=SYNC_URL, watch_async_url=ASYNC_URL)
+
 _watch_handlers: Dict[str, _utils.HandlerInfo] = {}
 dict_lock = threading.Lock()
 

instaui/html_tools.py

@@ -3,13 +3,26 @@ from pathlib import Path
 from typing import Any, Dict, Literal, Optional, Union
 from instaui.common.jsonable import dumps, dumps2dict
 from instaui.runtime._app import get_app_slot
+from instaui.tailwind._index import use_tailwind
+
+use_tailwind = use_tailwind
 
 
 def add_css_link(href: Union[str, Path]):
+    """Add a link to a CSS file to the HTML document.
+
+    Args:
+        href (Union[str, Path]): The path to the CSS file.
+    """
     get_app_slot()._html_resource.add_css_link(href)
 
 
 def remove_css_link(href: Union[str, Path]):
+    """Remove a link to a CSS file from the HTML document.
+
+    Args:
+        href (Union[str, Path]): The path to the CSS file.
+    """
     get_app_slot()._html_resource.remove_css_link(href)
 
 
@@ -18,6 +31,13 @@ def add_js_link(
     *,
     type: Optional[Literal["module"]] = None,
 ):
+    """Add a link to a JavaScript file to the HTML document.
+
+    Args:
+        link (Union[str, Path]): The path to the JavaScript file.
+        type (Optional[Literal["module"]], optional): The type of the JavaScript file. Defaults to None.
+    """
+
     attrs = {
         "type": type,
     }
@@ -26,22 +46,39 @@ def add_js_link(
 
 
 def add_style(content: str):
-    get_app_slot()._html_resource.add_style_tag(content)
+    """Add a style tag to the HTML document.
 
-
-def use_tailwind(value=True):
-    get_app_slot()._html_resource.use_tailwind = value
+    Args:
+        content (str): The content of the style tag.
+    """
+    get_app_slot()._html_resource.add_style_tag(content)
 
 
 def use_page_title(title: str):
+    """Set the title of the HTML document.
+
+    Args:
+        title (str): The title of the HTML document.
+    """
     get_app_slot()._html_resource.title = title
 
 
 def use_favicon(favicon: Path):
+    """Set the favicon of the HTML document.
+
+    Args:
+        favicon (Path): The path to the favicon.
+    """
     get_app_slot()._html_resource.favicon = favicon
 
 
 def add_js_code(code: str, *, script_attrs: Optional[Dict[str, Any]] = None):
+    """Add a script tag to the HTML document with the given JavaScript code.
+
+    Args:
+        code (str): The JavaScript code.
+        script_attrs (Optional[Dict[str, Any]], optional): The attributes of the script tag. Defaults to None.
+    """
     get_app_slot()._html_resource.add_script_tag(code, script_attrs=script_attrs)