instaui 0.2.2__py2.py3-none-any.whl → 0.3.0__py2.py3-none-any.whl

instaui/runtime/_app.py

@@ -6,7 +6,6 @@ from instaui.common.jsonable import Jsonable
 from .resource import HtmlResource
 from instaui.consts import _T_App_Mode
 from contextvars import ContextVar, Token
-from contextlib import contextmanager
 from instaui.runtime.scope import Scope, GlobalScope
 from types import MappingProxyType
 
@@ -17,7 +16,6 @@ if TYPE_CHECKING:
     from instaui.dependencies.component_dependency import ComponentDependencyInfo
     from instaui.dependencies.plugin_dependency import PluginDependencyInfo
     from instaui.spa_router._route_model import RouteCollector
-    from instaui.js.fn import JsFn
 
 
 class App(Jsonable):
@@ -27,9 +25,6 @@ class App(Jsonable):
     def __init__(self, *, mode: _T_App_Mode, meta: Optional[Dict] = None) -> None:
         super().__init__()
         self._scope_id_counter = 0
-        self._vfor_id_counter = 0
-        self._slot_id_counter = 0
-        self._js_fn_id_counter = 0
         self._mode: _T_App_Mode = mode
         self.items: List[Component] = []
         self.meta = meta
@@ -38,6 +33,7 @@ class App(Jsonable):
         defalut_scope = self.create_scope()
         self._scope_stack: List[Scope] = [defalut_scope]
         self._scopes: List[Scope] = [defalut_scope]
+        self._sid = defalut_scope.id
         self._html_resource = HtmlResource()
         self._component_dependencies: Set[ComponentDependencyInfo] = set()
         self._temp_component_dependencies: Dict[str, ComponentDependencyInfo] = {}
@@ -47,12 +43,15 @@ class App(Jsonable):
         self._page_params: Dict[str, Any] = {}
         self._query_params: Dict[str, Any] = {}
         self._route_collector: Optional[RouteCollector] = None
-        self._js_fns: List[JsFn] = []
 
     @property
     def mode(self) -> _T_App_Mode:
         return self._mode
 
+    @property
+    def top_scope(self) -> Scope:
+        return self._scope_stack[0]
+
     @property
     def page_path(self) -> str:
         assert self._page_path is not None, "Page path is not set"
@@ -71,21 +70,6 @@ class App(Jsonable):
         scope = Scope(str(self._scope_id_counter))
         return scope
 
-    def generate_vfor_id(self) -> str:
-        self._vfor_id_counter += 1
-        return str(self._vfor_id_counter)
-
-    def generate_slot_id(self) -> str:
-        self._slot_id_counter += 1
-        return str(self._slot_id_counter)
-
-    def generate_js_fn_id(self) -> str:
-        self._js_fn_id_counter += 1
-        return str(self._js_fn_id_counter)
-
-    def register_js_fn(self, fn: JsFn) -> None:
-        self._js_fns.append(fn)
-
     def reset_html_resource(self):
         self._html_resource = HtmlResource()
 
@@ -130,8 +114,7 @@ class App(Jsonable):
 
             data["url"] = url_info
 
-        data["scopeId"] = self._scopes[0].id
-        data["scopes"] = self._scopes
+        # data["scopes"] = self._scopes
 
         if self._route_collector is not None:
             data["router"] = self._route_collector.model_dump(
@@ -141,8 +124,7 @@ class App(Jsonable):
         if self._web_server_info is not None:
             data["webInfo"] = self._web_server_info
 
-        if self._js_fns:
-            data["jsFn"] = self._js_fns
+        data["sid"] = self._sid
 
         return data
 
@@ -193,19 +175,45 @@ def get_current_scope():
     return current_scope
 
 
-@contextmanager
-def new_scope(*, append_to_app: bool = True):
-    app = get_app_slot()
-    scope = app.create_scope()
+class ready_scope:
+    def __init__(self) -> None:
+        self._scope = None
+
+    @property
+    def used(self) -> bool:
+        return self._scope is not None
+
+    @property
+    def has_vars(self) -> bool:
+        return self._scope.has_var  # type: ignore
+
+    @property
+    def scope(self) -> Scope:
+        return self._scope  # type: ignore
+
+    @property
+    def scope_id(self) -> str:
+        return self._scope.id  # type: ignore
+
+    def __enter__(self):
+        return self.enter()
+
+    def __exit__(self, *_) -> None:
+        self.exit(*_)
+
+    def enter(self):
+        if self._scope is not None:
+            raise ValueError("Scope is already used")
 
-    if append_to_app:
-        app._scopes.append(scope)
+        app = get_app_slot()
+        self._scope = app.create_scope()
+        app._scopes.append(self._scope)
+        app._scope_stack.append(self._scope)
 
-    scope_stack = app._scope_stack
-    scope_stack.append(scope)
+        return self._scope
 
-    yield scope
-    scope_stack.pop()
+    def exit(self, *_) -> None:
+        get_app_slot()._scope_stack.pop()
 
 
 def get_slot_stacks():

instaui/runtime/scope.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, Callable, List
+from typing import TYPE_CHECKING, Callable, Dict, List, Optional
 import functools
 import weakref
 from instaui.common.jsonable import Jsonable
@@ -17,6 +17,9 @@ if TYPE_CHECKING:
     from instaui.watch.js_watch import JsWatch
     from instaui.watch.vue_watch import VueWatch
     from instaui.vars.element_ref import ElementRef
+    from instaui.vars.vfor_item import VForItem, VForIndex, VForItemKey
+    from instaui.components.slot import SlotPropInfo
+    from instaui.js.fn import JsFn
 
 
 class Scope(Jsonable):
@@ -26,33 +29,38 @@ class Scope(Jsonable):
         self._vars_id_counter = 0
         self._element_ref_id_counter = 0
         self._refs: List[VarMixin] = []
+        self._element_refs: List[ElementRef] = []
         self._const_data: List[ConstData] = []
         self._js_computeds: List[JsComputed] = []
         self._vue_computeds: List[VueComputed] = []
         self._web_computeds: List[WebComputed] = []
-        self._element_refs: List[ElementRef] = []
         self._run_method_records: List = []
-        self._web_watchs: List[WebWatch] = []
-        self._js_watchs: List[JsWatch] = []
-        self._vue_watchs: List[VueWatch] = []
+        self._web_watch_configs: List[Dict] = []
+        self._js_watch_configs: List[Dict] = []
+        self._vue_watch_configs: List[Dict] = []
+        self._vfor_item: Optional[VForItem] = None
+        self._vfor_item_key: Optional[VForItemKey] = None
+        self._vfor_index: Optional[VForIndex] = None
+        self._slot_prop_info: Optional[SlotPropInfo] = None
+        self._js_fns: List[JsFn] = []
         self._query = {}
+        self.__has_registered_task = False
+
+    def _mark_has_registered_task(self):
+        self.__has_registered_task = True
 
-    def set_run_method_record(
-        self, scope_id: str, element_ref_id: str, method_name: str, args
-    ):
-        self._run_method_records.append((scope_id, element_ref_id, method_name, args))
+    @property
+    def has_var(self):
+        return self._vars_id_counter > 0
+
+    @property
+    def has_registered_task(self):
+        return self.__has_registered_task
 
     def generate_vars_id(self) -> str:
         self._vars_id_counter += 1
         return str(self._vars_id_counter)
 
-    def generate_element_ref_id(self) -> str:
-        self._element_ref_id_counter += 1
-        return str(self._element_ref_id_counter)
-
-    def register_element_ref(self, ref: ElementRef):
-        self._element_refs.append(ref)
-
     def set_query(self, url: str, key: str, on: List[CanInputMixin]) -> None:
         self._query = {
             "url": url,
@@ -61,13 +69,16 @@ class Scope(Jsonable):
         }
 
     def register_web_watch(self, watch: WebWatch) -> None:
-        self._web_watchs.append(watch)
+        self._mark_has_registered_task()
+        self._web_watch_configs.append(watch._to_json_dict())
 
     def register_js_watch(self, watch: JsWatch) -> None:
-        self._js_watchs.append(watch)
+        self._mark_has_registered_task()
+        self._js_watch_configs.append(watch._to_json_dict())
 
     def register_vue_watch(self, watch: VueWatch) -> None:
-        self._vue_watchs.append(watch)
+        self._mark_has_registered_task()
+        self._vue_watch_configs.append(watch._to_json_dict())
 
     def register_data_task(self, data: ConstData):
         weak_obj = weakref.ref(data)
@@ -76,7 +87,7 @@ class Scope(Jsonable):
             self._const_data.append(weak_obj())  # type: ignore
             return self.generate_vars_id()
 
-        return VarRegisterTask(self.id, register_fn)
+        return VarRegisterTaskForScope(self, register_fn)
 
     def register_ref_task(self, ref: VarMixin):
         weak_obj = weakref.ref(ref)
@@ -85,7 +96,52 @@ class Scope(Jsonable):
             self._refs.append(weak_obj())  # type: ignore
             return self.generate_vars_id()
 
-        return VarRegisterTask(self.id, register_fn)
+        return VarRegisterTaskForScope(self, register_fn)
+
+    def register_element_ref_task(self, target: ElementRef):
+        weak_obj = weakref.ref(target)
+
+        def register_fn():
+            self._element_refs.append(weak_obj())  # type: ignore
+            return self.generate_vars_id()
+
+        return VarRegisterTaskForScope(self, register_fn)
+
+    def register_vfor_item_task(self, vfor_item: VForItem):
+        weak_obj = weakref.ref(vfor_item)
+
+        def register_fn():
+            self._vfor_item = weak_obj()
+            return self.generate_vars_id()
+
+        return VarRegisterTaskForScope(self, register_fn)
+
+    def register_slot_prop_info_task(self, slot_prop_info: SlotPropInfo):
+        weak_obj = weakref.ref(slot_prop_info)
+
+        def register_fn():
+            self._slot_prop_info = weak_obj()
+            return self.generate_vars_id()
+
+        return VarRegisterTaskForScope(self, register_fn)
+
+    def register_vfor_index_task(self, vfor_index: VForIndex):
+        weak_obj = weakref.ref(vfor_index)
+
+        def register_fn():
+            self._vfor_index = weak_obj()
+            return self.generate_vars_id()
+
+        return VarRegisterTaskForScope(self, register_fn)
+
+    def register_vfor_key_task(self, vfor_key: VForItemKey):
+        weak_obj = weakref.ref(vfor_key)
+
+        def register_fn():
+            self._vfor_item_key = weak_obj()
+            return self.generate_vars_id()
+
+        return VarRegisterTaskForScope(self, register_fn)
 
     def register_js_computed_task(self, computed: JsComputed):
         weak_obj = weakref.ref(computed)
@@ -94,7 +150,7 @@ class Scope(Jsonable):
             self._js_computeds.append(weak_obj())  # type: ignore
             return self.generate_vars_id()
 
-        return VarRegisterTask(self.id, register_fn)
+        return VarRegisterTaskForScope(self, register_fn)
 
     def register_computed_task(self, computed: WebComputed):
         weak_obj = weakref.ref(computed)
@@ -103,7 +159,7 @@ class Scope(Jsonable):
             self._web_computeds.append(weak_obj())  # type: ignore
             return self.generate_vars_id()
 
-        return VarRegisterTask(self.id, register_fn)
+        return VarRegisterTaskForScope(self, register_fn)
 
     def register_vue_computed_task(self, computed: VueComputed):
         weak_obj = weakref.ref(computed)
@@ -112,7 +168,16 @@ class Scope(Jsonable):
             self._vue_computeds.append(weak_obj())  # type: ignore
             return self.generate_vars_id()
 
-        return VarRegisterTask(self.id, register_fn)
+        return VarRegisterTaskForScope(self, register_fn)
+
+    def register_js_fn_task(self, fn: JsFn):
+        weak_obj = weakref.ref(fn)
+
+        def register_fn():
+            self._js_fns.append(weak_obj())  # type: ignore
+            return self.generate_vars_id()
+
+        return VarRegisterTaskForScope(self, register_fn)
 
     def _to_json_dict(self):
         data = super()._to_json_dict()
@@ -120,12 +185,12 @@ class Scope(Jsonable):
             data["refs"] = self._refs
         if self._query:
             data["query"] = self._query
-        if self._web_watchs:
-            data["py_watch"] = self._web_watchs
-        if self._js_watchs:
-            data["js_watch"] = self._js_watchs
-        if self._vue_watchs:
-            data["vue_watch"] = self._vue_watchs
+        if self._web_watch_configs:
+            data["py_watch"] = self._web_watch_configs
+        if self._js_watch_configs:
+            data["js_watch"] = self._js_watch_configs
+        if self._vue_watch_configs:
+            data["vue_watch"] = self._vue_watch_configs
         if self._element_refs:
             data["eRefs"] = self._element_refs
 
@@ -140,6 +205,24 @@ class Scope(Jsonable):
         if self._const_data:
             data["data"] = self._const_data
 
+        if self._js_fns:
+            data["jsFn"] = self._js_fns
+
+        # vfor info
+        vfor_dict = {}
+        if self._vfor_item:
+            vfor_dict[self._vfor_item.SCOPE_TYPE] = self._vfor_item
+        if self._vfor_index:
+            vfor_dict[self._vfor_index.SCOPE_TYPE] = self._vfor_index
+        if self._vfor_item_key:
+            vfor_dict[self._vfor_item_key.SCOPE_TYPE] = self._vfor_item_key
+
+        if vfor_dict:
+            data["vfor"] = vfor_dict
+
+        if self._slot_prop_info:
+            data["sp"] = self._slot_prop_info._to_json_dict()
+
         return data
 
 
@@ -169,9 +252,10 @@ class GlobalScope(Scope):
         raise ValueError("Can not register vue_watchs  in global scope")
 
 
-class VarRegisterTask:
-    def __init__(self, scope_id: str, register_fn: Callable[[], str]) -> None:
-        self._scope_id = scope_id
+class VarRegisterTaskForScope:
+    def __init__(self, scope: Scope, register_fn: Callable[[], str]) -> None:
+        scope._mark_has_registered_task()
+        self._scope_id = scope.id
         self._id_gen_fn = functools.lru_cache(maxsize=1)(register_fn)
 
     @property

instaui/spa_router/_functions.py

@@ -2,7 +2,7 @@ import typing
 from . import _types
 from instaui.runtime._app import get_app_slot
 from . import _install
-from ._router_param_var import RouterParamsVar
+from ._router_param_var import RouteParamsVar
 from ._router_output import RouterOutput, RouterMethod
 from ._route_model import RouteItem
 
@@ -64,15 +64,15 @@ def config_router(
 
 
 def get_params(param_name: str) -> typing.Any:
-    return RouterParamsVar("params")[param_name]
+    return RouteParamsVar("params")[param_name]
 
 
 def get_path():
-    return RouterParamsVar("path")
+    return RouteParamsVar("path")
 
 
 def get_full_path():
-    return RouterParamsVar("fullPath")
+    return RouteParamsVar("fullPath")
 
 
 def push(

instaui/spa_router/_route_model.py

@@ -3,7 +3,7 @@ import typing
 from pydantic import BaseModel, Field, ConfigDict, field_serializer, model_serializer
 
 from instaui.components.html.div import Div
-from instaui.runtime._app import get_app_slot, new_scope
+from instaui.runtime._app import get_app_slot, get_current_scope
 from instaui.components.component import Component
 from instaui.common.jsonable import dumps2dict
 
@@ -14,7 +14,7 @@ class RouteItem(BaseModel):
     model_config = ConfigDict(arbitrary_types_allowed=True)
 
     component_fn: typing.Optional[typing.Callable] = Field(exclude=True)
-    scopeId: typing.Optional[str] = None
+    sid: typing.Optional[str] = None
     vue_route_item: VueRouteItem = Field(serialization_alias="vueItem")
     meta: typing.Optional[typing.Dict] = None
 
@@ -32,17 +32,16 @@ class RouteItem(BaseModel):
             self.vue_route_item.path = f"/{'' if self.component_fn.__name__ == 'index' else self.component_fn.__name__}"
 
         app = get_app_slot()
-        with new_scope() as scope:
-            with Div() as div:
-                self.component_fn()
+        with Div() as div:
+            self.component_fn()
+            scope_id = get_current_scope().id
 
         app.items.pop()
 
-        self.scopeId = scope.id
         self.vue_route_item.component = div._slot_manager.default._children
 
         return {
-            "scopeId": scope.id,
+            "sid": scope_id,
             "vueItem": self.vue_route_item,
         }
 

instaui/spa_router/_router_output.py

@@ -1,5 +1,6 @@
 from typing import List, Optional
 from instaui.common.jsonable import Jsonable
+from instaui.vars._types import OutputSetType
 from instaui.vars.mixin_types.py_binding import CanOutputMixin
 from pydantic import BaseModel
 
@@ -9,13 +10,16 @@ class RouterOutput(Jsonable, CanOutputMixin):
         self.type = "routeAct"
 
     def _to_output_config(self):
-        return self._to_json_dict()
+        return {}
 
     def _to_json_dict(self):
         data = super()._to_json_dict()
 
         return data
 
+    def _to_event_output_type(self) -> OutputSetType:
+        return OutputSetType.RouterAction
+
 
 class RouterMethod(BaseModel):
     fn: str

instaui/spa_router/_router_param_var.py

@@ -10,7 +10,7 @@ from instaui.vars.mixin_types.str_format_binding import StrFormatBindingMixin
 from instaui.vars.mixin_types.pathable import CanPathPropMixin
 
 
-class RouterParamsVar(
+class RouteParamsVar(
     Jsonable,
     PathVar,
     ObservableMixin,
@@ -18,7 +18,7 @@ class RouterParamsVar(
     StrFormatBindingMixin,
     ElementBindingMixin,
 ):
-    VAR_TYPE = "routePar"
+    VAR_TYPE = "rp"
 
     def __init__(
         self,
@@ -28,7 +28,7 @@ class RouterParamsVar(
         self._prop = prop
 
     def __to_binding_config(self):
-        return self._to_json_dict()
+        return {"type": "rp", "prop": self._prop}
 
     def _to_pathable_binding_config(self) -> typing.Dict:
         return self.__to_binding_config()
@@ -43,9 +43,4 @@ class RouterParamsVar(
         return self.__to_binding_config()
 
     def _to_json_dict(self):
-        data = super()._to_json_dict()
-        data["type"] = self.VAR_TYPE
-
-        if self._prop != "params":
-            data["prop"] = self._prop
-        return data
+        raise NotImplementedError("RouteParamsVar is not json serializable")

instaui/static/insta-ui.css

@@ -1 +1 @@
-.insta-themes:where([data-scaling="90%"]){--scaling: .9 }.insta-themes:where([data-scaling="95%"]){--scaling: .95 }.insta-themes:where([data-scaling="100%"]){--scaling: 1 }.insta-themes:where([data-scaling="105%"]){--scaling: 1.05 }.insta-themes:where([data-scaling="110%"]){--scaling: 1.1 }.insta-themes{--space-1: calc(4px* var(--scaling));--space-2: calc(8px* var(--scaling));--space-3: calc(12px* var(--scaling));--space-4: calc(16px* var(--scaling));--space-5: calc(24px* var(--scaling));--space-6: calc(32px* var(--scaling));--space-7: calc(40px* var(--scaling));--space-8: calc(48px* var(--scaling));--space-9: calc(64px* var(--scaling));--font-size-1: calc(12px* var(--scaling));--font-size-2: calc(14px* var(--scaling));--font-size-3: calc(16px* var(--scaling));--font-size-4: calc(18px* var(--scaling));--font-size-5: calc(20px* var(--scaling));--font-size-6: calc(24px* var(--scaling));--font-size-7: calc(28px* var(--scaling));--font-size-8: calc(35px* var(--scaling));--font-size-9: calc(60px* var(--scaling));--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--line-height-1: calc(16px* var(--scaling));--line-height-2: calc(20px* var(--scaling));--line-height-3: calc(24px* var(--scaling));--line-height-4: calc(26px* var(--scaling));--line-height-5: calc(28px* var(--scaling));--line-height-6: calc(30px* var(--scaling));--line-height-7: calc(36px* var(--scaling));--line-height-8: calc(40px* var(--scaling));--line-height-9: calc(60px* var(--scaling));--letter-spacing-1: .0025em;--letter-spacing-2: 0em;--letter-spacing-3: 0em;--letter-spacing-4: -.0025em;--letter-spacing-5: -.005em;--letter-spacing-6: -.00625em;--letter-spacing-7: -.0075em;--letter-spacing-8: -.01em;--letter-spacing-9: -.025em;--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI (Custom)", Roboto, "Helvetica Neue", "Open Sans (Custom)", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--default-font-size: var(--font-size-3);--default-font-style: normal;--default-font-weight: var(--font-weight-regular);--default-line-height: 1.5;--default-letter-spacing: 0em;--default-leading-trim-start: .42em;--default-leading-trim-end: .36em;--heading-font-family: var(--default-font-family);--heading-font-size-adjust: 1;--heading-font-style: normal;--heading-leading-trim-start: var(--default-leading-trim-start);--heading-leading-trim-end: var(--default-leading-trim-end);--heading-letter-spacing: 0em;--heading-line-height-1: calc(16px* var(--scaling));--heading-line-height-2: calc(18px* var(--scaling));--heading-line-height-3: calc(22px* var(--scaling));--heading-line-height-4: calc(24px* var(--scaling));--heading-line-height-5: calc(26px* var(--scaling));--heading-line-height-6: calc(30px* var(--scaling));--heading-line-height-7: calc(36px* var(--scaling));--heading-line-height-8: calc(40px* var(--scaling));--heading-line-height-9: calc(60px* var(--scaling));--strong-font-family: var(--default-font-family);--strong-font-size-adjust: 1;--strong-font-style: inherit;--strong-font-weight: var(--font-weight-bold);--strong-letter-spacing: 0em;--em-font-family: "Times New Roman", "Times", serif;--em-font-size-adjust: 1.18;--em-font-style: italic;--em-font-weight: inherit;--em-letter-spacing: -.025em;overflow-wrap:break-word;font-family:var(--default-font-family);font-size:var(--default-font-size);font-weight:var(--default-font-weight);font-style:var(--default-font-style);line-height:var(--default-line-height);letter-spacing:var(--default-letter-spacing);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--container-1: 448px;--container-2: 688px;--container-3: 880px;--container-4: 1136px}.i-weight-light{font-weight:var(--font-weight-light)}.i-weight-regular{font-weight:var(--font-weight-regular)}.i-weight-medium{font-weight:var(--font-weight-medium)}.i-weight-bold{font-weight:var(--font-weight-bold)}.i-text-align-left{text-align:left}.i-text-align-center{text-align:center}.i-text-align-right{text-align:right}.insta-Heading:where(.i-size-1){font-size:calc(var(--font-size-1) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-1);letter-spacing:calc(var(-letter-spacing-1) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-2){font-size:calc(var(--font-size-2) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-2);letter-spacing:calc(var(-letter-spacing-2) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-3){font-size:calc(var(--font-size-3) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-3);letter-spacing:calc(var(-letter-spacing-3) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-4){font-size:calc(var(--font-size-4) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-4);letter-spacing:calc(var(-letter-spacing-4) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-5){font-size:calc(var(--font-size-5) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-5);letter-spacing:calc(var(-letter-spacing-5) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-6){font-size:calc(var(--font-size-6) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-6);letter-spacing:calc(var(-letter-spacing-6) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-7){font-size:calc(var(--font-size-7) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-7);letter-spacing:calc(var(-letter-spacing-7) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-8){font-size:calc(var(--font-size-8) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-8);letter-spacing:calc(var(-letter-spacing-8) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-9){font-size:calc(var(--font-size-9) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-9);letter-spacing:calc(var(-letter-spacing-9) + var(--heading-letter-spacing))}:root{color-scheme:light dark}:where(body){--insta-column-gap: 1rem;height:100vh}:where(*){box-sizing:border-box;margin:0;padding:0}:where(#app){height:100%}:where(.app-box,.insta-main){height:100%;overflow-y:auto}:where(.insta-main){--insta-padding: 16px;padding:var(--insta-padding, 16px)}
+.insta-themes:where([data-scaling="90%"]){--scaling: .9 }.insta-themes:where([data-scaling="95%"]){--scaling: .95 }.insta-themes:where([data-scaling="100%"]){--scaling: 1 }.insta-themes:where([data-scaling="105%"]){--scaling: 1.05 }.insta-themes:where([data-scaling="110%"]){--scaling: 1.1 }.insta-themes{--space-1: calc(4px* var(--scaling));--space-2: calc(8px* var(--scaling));--space-3: calc(12px* var(--scaling));--space-4: calc(16px* var(--scaling));--space-5: calc(24px* var(--scaling));--space-6: calc(32px* var(--scaling));--space-7: calc(40px* var(--scaling));--space-8: calc(48px* var(--scaling));--space-9: calc(64px* var(--scaling));--font-size-1: calc(12px* var(--scaling));--font-size-2: calc(14px* var(--scaling));--font-size-3: calc(16px* var(--scaling));--font-size-4: calc(18px* var(--scaling));--font-size-5: calc(20px* var(--scaling));--font-size-6: calc(24px* var(--scaling));--font-size-7: calc(28px* var(--scaling));--font-size-8: calc(35px* var(--scaling));--font-size-9: calc(60px* var(--scaling));--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--line-height-1: calc(16px* var(--scaling));--line-height-2: calc(20px* var(--scaling));--line-height-3: calc(24px* var(--scaling));--line-height-4: calc(26px* var(--scaling));--line-height-5: calc(28px* var(--scaling));--line-height-6: calc(30px* var(--scaling));--line-height-7: calc(36px* var(--scaling));--line-height-8: calc(40px* var(--scaling));--line-height-9: calc(60px* var(--scaling));--letter-spacing-1: .0025em;--letter-spacing-2: 0em;--letter-spacing-3: 0em;--letter-spacing-4: -.0025em;--letter-spacing-5: -.005em;--letter-spacing-6: -.00625em;--letter-spacing-7: -.0075em;--letter-spacing-8: -.01em;--letter-spacing-9: -.025em;--default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI (Custom)", Roboto, "Helvetica Neue", "Open Sans (Custom)", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--default-font-size: var(--font-size-3);--default-font-style: normal;--default-font-weight: var(--font-weight-regular);--default-line-height: 1.5;--default-letter-spacing: 0em;--default-leading-trim-start: .42em;--default-leading-trim-end: .36em;--heading-font-family: var(--default-font-family);--heading-font-size-adjust: 1;--heading-font-style: normal;--heading-leading-trim-start: var(--default-leading-trim-start);--heading-leading-trim-end: var(--default-leading-trim-end);--heading-letter-spacing: 0em;--heading-line-height-1: calc(16px* var(--scaling));--heading-line-height-2: calc(18px* var(--scaling));--heading-line-height-3: calc(22px* var(--scaling));--heading-line-height-4: calc(24px* var(--scaling));--heading-line-height-5: calc(26px* var(--scaling));--heading-line-height-6: calc(30px* var(--scaling));--heading-line-height-7: calc(36px* var(--scaling));--heading-line-height-8: calc(40px* var(--scaling));--heading-line-height-9: calc(60px* var(--scaling));--strong-font-family: var(--default-font-family);--strong-font-size-adjust: 1;--strong-font-style: inherit;--strong-font-weight: var(--font-weight-bold);--strong-letter-spacing: 0em;--em-font-family: "Times New Roman", "Times", serif;--em-font-size-adjust: 1.18;--em-font-style: italic;--em-font-weight: inherit;--em-letter-spacing: -.025em;overflow-wrap:break-word;font-family:var(--default-font-family);font-size:var(--default-font-size);font-weight:var(--default-font-weight);font-style:var(--default-font-style);line-height:var(--default-line-height);letter-spacing:var(--default-letter-spacing);-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--container-1: 448px;--container-2: 688px;--container-3: 880px;--container-4: 1136px}.i-weight-light{font-weight:var(--font-weight-light)}.i-weight-regular{font-weight:var(--font-weight-regular)}.i-weight-medium{font-weight:var(--font-weight-medium)}.i-weight-bold{font-weight:var(--font-weight-bold)}.i-text-align-left{text-align:left}.i-text-align-center{text-align:center}.i-text-align-right{text-align:right}.insta-Heading:where(.i-size-1){font-size:calc(var(--font-size-1) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-1);letter-spacing:calc(var(-letter-spacing-1) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-2){font-size:calc(var(--font-size-2) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-2);letter-spacing:calc(var(-letter-spacing-2) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-3){font-size:calc(var(--font-size-3) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-3);letter-spacing:calc(var(-letter-spacing-3) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-4){font-size:calc(var(--font-size-4) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-4);letter-spacing:calc(var(-letter-spacing-4) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-5){font-size:calc(var(--font-size-5) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-5);letter-spacing:calc(var(-letter-spacing-5) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-6){font-size:calc(var(--font-size-6) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-6);letter-spacing:calc(var(-letter-spacing-6) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-7){font-size:calc(var(--font-size-7) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-7);letter-spacing:calc(var(-letter-spacing-7) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-8){font-size:calc(var(--font-size-8) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-8);letter-spacing:calc(var(-letter-spacing-8) + var(--heading-letter-spacing))}.insta-Heading:where(.i-size-9){font-size:calc(var(--font-size-9) * var(--heading-font-size-adjust));--line-height: var(--heading-line-height-9);letter-spacing:calc(var(-letter-spacing-9) + var(--heading-letter-spacing))}:root{color-scheme:light dark}:where(body){--insta-column-gap: 1rem;height:100vh}:where(*){box-sizing:border-box;margin:0;padding:0}:where(#app){height:100%}:where(.app-box,.insta-main){height:100%;overflow-y:auto}:where(.insta-main){--insta-padding: 16px;padding:var(--insta-padding, 16px)}