instaui 0.1.15__py2.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/slot.py

@@ -0,0 +1,81 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING, Dict, List, Optional, Set
+from instaui.common.jsonable import Jsonable
+from instaui.runtime import get_slot_stacks, pop_slot
+from instaui.runtime._app import get_app_slot
+from instaui.vars.slot_prop import BindingSlotPropItem
+
+if TYPE_CHECKING:
+    from instaui.components.component import Component
+
+_DEFAULT_SLOT_NAME = ":"
+
+
+class SlotManager(Jsonable):
+    def __init__(self) -> None:
+        super().__init__()
+        self._slots: Dict[str, Slot] = {}
+
+    def get_slot(self, name: str) -> Slot:
+        name = _DEFAULT_SLOT_NAME if name == "default" else name
+
+        if name not in self._slots:
+            self._slots[name] = Slot(name)
+
+        return self._slots[name]
+
+    @property
+    def default(self):
+        return self.get_slot(_DEFAULT_SLOT_NAME)
+
+    def _to_json_dict(self):
+        if (
+            len(self._slots) == 1
+            and _DEFAULT_SLOT_NAME in self._slots
+            and (not self._slots[_DEFAULT_SLOT_NAME]._has_props_use())
+        ):
+            return self._slots[_DEFAULT_SLOT_NAME]._children
+
+        return {name: slot._to_json_dict() for name, slot in self._slots.items()}
+
+    def has_slot(self) -> bool:
+        return len(self._slots) > 0
+
+
+class Slot(Jsonable):
+    def __init__(self, name: str) -> None:
+        super().__init__()
+
+        self._id: Optional[str] = None
+        self._name = name
+        self._children: List[Component] = []
+        self._props_use_name: Set[str] = set()
+
+    def _has_props_use(self):
+        return len(self._props_use_name) > 0
+
+    def props(self, name: str):
+        if self._id is None:
+            self._id = get_app_slot().generate_slot_id()
+
+        self._props_use_name.add(name)
+        return BindingSlotPropItem(self._id, name)
+
+    def __enter__(self):
+        get_slot_stacks().append(self)
+        return self
+
+    def __exit__(self, *_):
+        pop_slot()
+
+    def _to_json_dict(self):
+        data = super()._to_json_dict()
+
+        if self._children:
+            data["items"] = self._children
+
+        if self._props_use_name:
+            data["props"] = {"id": self._id, "use": list(self._props_use_name)}
+
+        return data

instaui/components/transition_group.py

@@ -0,0 +1,9 @@
+from __future__ import annotations
+from instaui.components.element import Element
+
+
+class TransitionGroup(Element):
+    def __init__(
+        self,
+    ):
+        super().__init__("ts-group")

instaui/components/value_element.py

@@ -0,0 +1,52 @@
+from __future__ import annotations
+from typing import (
+    Generic,
+    List,
+    Optional,
+    Union,
+    TypeVar,
+)
+from instaui.components.element import Element
+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")
+
+
+class ValueElement(Element, Generic[_T]):
+    def __init__(
+        self,
+        tag: Optional[str] = None,
+        value: Union[_T, TMaybeRef[_T], None] = None,
+        is_html_component: bool = False,
+        value_name: str = "value",
+    ):
+        super().__init__(tag)
+        self.__is_html_component = is_html_component
+
+        if value is not None:
+            if is_bindable(value):
+                if isinstance(value, WebComputed):
+                    self.props({value_name: value})
+                else:
+                    self.vmodel(value, prop_name=value_name)
+            else:
+                self.props({value_name: value})
+
+    def vmodel(
+        self,
+        value,
+        modifiers: Union[consts.TModifier, List[consts.TModifier], None] = None,
+        *,
+        prop_name: str = "value",
+    ):
+        return super().vmodel(
+            value,
+            modifiers,
+            prop_name=prop_name,
+            is_html_component=self.__is_html_component,
+        )

instaui/components/vfor.py

@@ -0,0 +1,142 @@
+from __future__ import annotations
+from typing import (
+    Dict,
+    List,
+    Literal,
+    Mapping,
+    Optional,
+    Union,
+    Sequence,
+    Generic,
+    TypeVar,
+    overload,
+)
+import pydantic
+
+from instaui.components.component import Component
+from instaui.vars.vfor_item import VForItem, VForDict, VForWithIndex
+from instaui.runtime._app import get_app_slot, new_scope
+
+from instaui.vars.mixin_types.element_binding import ElementBindingMixin
+
+_T = TypeVar("_T")
+
+
+class VFor(Component, Generic[_T]):
+    def __init__(
+        self,
+        data: Union[Sequence[_T], ElementBindingMixin[List[_T]]],
+        *,
+        key: Union[Literal["item", "index"], str] = "index",
+    ):
+        """for loop component.
+
+        Args:
+            data (Union[Sequence[_T], ElementBindingMixin[List[_T]]]): data source.
+            key (Union[Literal["item", "index"], str]]): key for each item. Defaults to 'index'.
+
+        Examples:
+        .. code-block:: python
+            items = ui.state([1,2,3])
+
+            with ui.vfor(items) as item:
+                html.span(item)
+
+            # object key
+            items = ui.state([{"name": "Alice", "age": 20}, {"name": "Bob", "age": 30}])
+            with ui.vfor(items, key=":item=>item.name") as item:
+                html.span(item.name)
+        """
+
+        super().__init__("vfor")
+        self._data = data
+        if isinstance(self._data, ElementBindingMixin):
+            self._data._mark_used()
+        self._key = key
+        self._fid = get_app_slot().generate_vfor_id()
+        self.__scope_manager = new_scope(append_to_app=False)
+        self.__scope = None
+        self._num = None
+        self._transition_group_setting = None
+
+    def __enter__(self) -> _T:
+        self.__scope = self.__scope_manager.__enter__()
+        super().__enter__()
+        return VForItem(self).proxy  # type: ignore
+
+    def __exit__(self, *_) -> None:
+        self.__scope_manager.__exit__(*_)
+        return super().__exit__(*_)
+
+    def _set_num(self, num):
+        self._num = num
+
+    def transition_group(self, name="fade", tag: Optional[str] = None):
+        self._transition_group_setting = {"name": name, "tag": tag}
+        return self
+
+    @property
+    def current(self):
+        return VForItem(self)
+
+    def with_index(self):
+        return VForWithIndex(self)
+
+    def _to_json_dict(self):
+        data = super()._to_json_dict()
+        data["props"] = {"fid": self._fid}
+
+        props: Dict = data["props"]
+        if self._key is not None and self._key != "index":
+            props["fkey"] = self._key
+
+        if self._data is not None:
+            if isinstance(self._data, ElementBindingMixin):
+                props["bArray"] = self._data._to_element_binding_config()
+            else:
+                props["array"] = self._data
+
+        if self._num is not None:
+            props["num"] = self._num
+
+        if self._transition_group_setting is not None:
+            props["tsGroup"] = {
+                k: v for k, v in self._transition_group_setting.items() if v is not None
+            }
+
+        props["scope"] = self.__scope
+
+        if self._slot_manager.has_slot():
+            props["items"] = self._slot_manager
+
+        data.pop("slots", None)
+
+        return data
+
+    @overload
+    @classmethod
+    def range(cls, end: int) -> VFor[int]: ...
+
+    @overload
+    @classmethod
+    def range(cls, end: ElementBindingMixin[int]) -> VFor[int]: ...
+
+    @classmethod
+    def range(cls, end: Union[int, ElementBindingMixin[int]]) -> VFor[int]:
+        obj = cls(None)  # type: ignore
+
+        num = (  # type: ignore
+            end._to_element_binding_config()
+            if isinstance(end, ElementBindingMixin)
+            else end
+        )
+
+        obj._set_num(num)
+
+        return obj  # type: ignore
+
+    @classmethod
+    def from_dict(
+        cls, data: Union[Mapping, pydantic.BaseModel, ElementBindingMixin[Dict]]
+    ):
+        return VForDict(VFor(data))  # type: ignore

instaui/components/vif.py

@@ -0,0 +1,42 @@
+from __future__ import annotations
+from typing import Dict, cast
+from instaui.components.component import Component
+from instaui.runtime._app import new_scope
+from instaui.vars.mixin_types.element_binding import ElementBindingMixin
+from instaui.vars.types import TMaybeRef
+
+
+class VIf(Component):
+    def __init__(self, on: TMaybeRef[bool]):
+        super().__init__("vif")
+        self._on = cast(ElementBindingMixin, on)
+        if isinstance(on, ElementBindingMixin):
+            on._mark_used()
+        self.__scope_manager = new_scope(append_to_app=False)
+        self.__scope = None
+
+    def __enter__(self):
+        self.__scope = self.__scope_manager.__enter__()
+        return super().__enter__()
+
+    def __exit__(self, *_) -> None:
+        self.__scope_manager.__exit__(*_)
+        return super().__exit__(*_)
+
+    def _to_json_dict(self):
+        data = super()._to_json_dict()
+        data["props"] = {
+            "on": self._on
+            if isinstance(self._on, bool)
+            else self._on._to_element_binding_config(),
+        }
+        props: Dict = data["props"]
+
+        props["scope"] = self.__scope
+
+        if self._slot_manager.has_slot():
+            props["items"] = self._slot_manager
+
+        data.pop("slots", None)
+
+        return data

instaui/consts.py

@@ -0,0 +1,23 @@
+from pathlib import Path
+from typing import Literal
+
+_THIS_DIR = Path(__file__).parent
+_TEMPLATES_DIR = _THIS_DIR.joinpath("templates")
+_STATIC_DIR = _THIS_DIR.joinpath("static")
+
+INDEX_TEMPLATE_PATH = _TEMPLATES_DIR.joinpath("index.html")
+APP_IIFE_JS_PATH = _STATIC_DIR.joinpath("insta-ui.iife.js")
+APP_ES_JS_PATH = _STATIC_DIR.joinpath("insta-ui.esm-browser.prod.js")
+APP_ES_JS_MAP_PATH = _STATIC_DIR.joinpath("insta-ui.js.map")
+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")
+FAVICON_PATH = _STATIC_DIR.joinpath("insta-ui.ico")
+# tools
+TOOLS_BROWSER_JS_PATH = _STATIC_DIR.joinpath("instaui-tools-browser.js")
+
+PAGE_TITLE = "insta-ui"
+
+_T_App_Mode = Literal["zero", "web", "webview"]
+TModifier = Literal["trim", "number", "lazy"]

instaui/dependencies/component_dependency.py

@@ -0,0 +1,22 @@
+from __future__ import annotations
+from dataclasses import dataclass, field
+from pathlib import Path
+from typing import Dict, Set
+
+_TTagName = str
+
+
+@dataclass(frozen=True)
+class ComponentDependencyInfo:
+    tag_name: _TTagName = field(hash=True)
+    esm: Path = field(hash=False)
+    externals: Dict[str, Path] = field(default_factory=dict, compare=False, hash=False)
+    css: Set[Path] = field(default_factory=set, compare=False, hash=False)
+
+    def copy(self):
+        return ComponentDependencyInfo(
+            tag_name=self.tag_name,
+            esm=self.esm,
+            externals={**self.externals},
+            css=set(self.css),
+        )

instaui/dependencies/plugin_dependency.py

@@ -0,0 +1,28 @@
+from __future__ import annotations
+from dataclasses import dataclass, field
+from pathlib import Path
+from typing import List, Optional
+from instaui.runtime._app import get_app_slot
+
+
+@dataclass(frozen=True)
+class PluginDependencyInfo:
+    name: str = field(hash=True)
+    esm: Path = field(hash=False)
+    externals: Optional[List[Path]] = field(
+        default_factory=list, compare=False, hash=False
+    )
+    css: List[Path] = field(default_factory=list, compare=False, hash=False)
+
+
+def register_plugin(
+    name: str,
+    esm: Path,
+    *,
+    externals: Optional[List[Path]] = None,
+    css: Optional[List[Path]] = None,
+):
+    info = PluginDependencyInfo(f"plugin/{name}", esm, externals or [], css or [])
+
+    get_app_slot().use_plugin_dependency(info)
+    return info

instaui/event/event_mixin.py

@@ -0,0 +1,12 @@
+from abc import ABC, abstractmethod
+import typing
+
+
+class EventMixin(ABC):
+    @abstractmethod
+    def copy_with_extends(self, extends: typing.Sequence) -> "EventMixin":
+        pass
+
+    @abstractmethod
+    def event_type(self) -> typing.Literal["web", "js"]:
+        pass

instaui/event/js_event.py

@@ -0,0 +1,82 @@
+import typing
+from instaui.vars.mixin_types.py_binding import CanInputMixin, CanOutputMixin
+from instaui.common.jsonable import Jsonable
+from .event_mixin import EventMixin
+
+
+class JsEvent(Jsonable, EventMixin):
+    def __init__(
+        self,
+        code: str,
+        inputs: typing.Optional[typing.Sequence[CanInputMixin]] = None,
+        outputs: typing.Optional[typing.Sequence[CanOutputMixin]] = None,
+    ):
+        self._is_const_data = [
+            int(not isinstance(input, CanInputMixin)) for input in inputs or []
+        ]
+        self._org_inputs = list(inputs or [])
+        self._org_outputs = list(outputs or [])
+        self._inputs = [
+            input._to_input_config() if isinstance(input, CanInputMixin) else input
+            for input in inputs or []
+        ]
+        self._outputs = [output._to_output_config() for output in outputs or []]
+        self.code = code
+
+    def _to_json_dict(self):
+        data = super()._to_json_dict()
+        data["type"] = self.event_type()
+
+        if self._inputs:
+            data["inputs"] = self._inputs
+
+        if self._outputs:
+            data["set"] = self._outputs
+
+        if sum(self._is_const_data) > 0:
+            data["data"] = self._is_const_data
+
+        return data
+
+    def copy_with_extends(self, extends: typing.Sequence):
+        return js_event(
+            code=self.code,
+            inputs=self._org_inputs + list(extends),
+            outputs=self._org_outputs,
+        )
+
+    def event_type(self):
+        return "js"
+
+
+def js_event(
+    *,
+    inputs: typing.Optional[typing.Sequence] = None,
+    outputs: typing.Optional[typing.Sequence] = None,
+    code: str,
+):
+    """
+    Creates a client-side event handler decorator for binding JavaScript logic to UI component events.
+
+    Args:
+        inputs (typing.Optional[typing.Sequence], optional):Reactive sources (state variables, computed values)
+                                   that should be passed to the event handler. These values
+                                   will be available in the JavaScript context through the `args` array.
+        outputs (typing.Optional[typing.Sequence], optional): Targets (state variables, UI elements) that should
+                                    update when this handler executes. Used for coordinating
+                                    interface updates after the event is processed.
+        code (str): JavaScript code to execute when the event is triggered.
+
+    # Example:
+    .. code-block:: python
+        from instaui import ui, html
+
+        a = ui.state(0)
+
+        plus_one = ui.js_event(inputs=[a], outputs=[a], code="a =>a + 1")
+
+        html.button("click me").on_click(plus_one)
+        html.paragraph(a)
+
+    """
+    return JsEvent(inputs=inputs, outputs=outputs, code=code)

instaui/event/vue_event.py

@@ -0,0 +1,66 @@
+import typing
+from instaui.common.jsonable import Jsonable
+from instaui.vars.mixin_types.observable import ObservableMixin
+from .event_mixin import EventMixin
+
+
+class VueEvent(Jsonable, EventMixin):
+    """
+    Create an event object that can be bound to a UI component's event listener.
+
+    This function generates a callable event handler with optional contextual bindings.
+    The event logic is defined via a code string, which can reference bound variables.
+
+    Args:
+        code (str): A string containing the executable logic for the event handler.
+                    Typically contains a function body or expression that utilizes bound variables.
+        bindings (typing.Optional[typing.Dict[str, typing.Any]], optional): A dictionary mapping variable names to values that should be available in the
+            event handler's context. If None, no additional bindings are created.. Defaults to None.
+
+    Example:
+    .. code-block:: python
+        a = ui.state(1)
+
+        event = ui.vue_event(bindings={"a": a}, code=r'''()=> { a.value +=1}''')
+
+        html.span(a)
+        html.button("plus").on("click", event)
+    """
+
+    def __init__(
+        self,
+        *,
+        code: str,
+        bindings: typing.Optional[typing.Dict[str, typing.Any]] = None,
+    ):
+        self.code = code
+        self._bindings = bindings
+
+        if bindings:
+            bindData = [
+                int(not isinstance(v, ObservableMixin)) for v in bindings.values()
+            ]
+
+            if sum(bindData) > 0:
+                self.bindData = bindData
+
+            self.bind = {
+                k: typing.cast(ObservableMixin, v)._to_observable_config()
+                if isinstance(v, ObservableMixin)
+                else v
+                for k, v in bindings.items()
+            }
+
+    def copy_with_extends(self, extends: typing.Dict):
+        raise NotImplementedError("VueEvent does not support extends")
+
+    def event_type(self):
+        return "vue"
+
+    def _to_json_dict(self):
+        data = super()._to_json_dict()
+        data["type"] = self.event_type()
+        return data
+
+
+vue_event = VueEvent