Fixed command id collision. Added class support in style preset

docs/DataGrid Formatting System.md

@@ -250,6 +250,42 @@ manager.add_formatter_preset("CHF", {
 })
 ```
 
+**CSS Classes in Style Presets:**
+
+Style presets can include a special `__class__` key to apply CSS classes (DaisyUI, Tailwind, or custom):
+
+```python
+manager.add_style_preset("badge", {
+    "__class__": "badge badge-primary",
+    "background-color": "blue",
+    "color": "white"
+})
+```
+
+When a preset with `__class__` is applied:
+- The CSS classes are added to the element's `class` attribute
+- The CSS properties are applied as inline styles
+- This allows combining DaisyUI component classes with custom styling
+
+**Example with DaisyUI badges:**
+
+```python
+# Define badge presets
+manager.add_style_preset("status_draft", {
+    "__class__": "badge badge-neutral"
+})
+
+manager.add_style_preset("status_approved", {
+    "__class__": "badge badge-success",
+    "font-weight": "bold"
+})
+
+# Use in DSL
+column status:
+    style("status_draft") if value == "draft"
+    style("status_approved") if value == "approved"
+```
+
 ---
 
 ## Layer 1: Formatting Engine
@@ -441,7 +477,7 @@ def apply_format(
     rules: list[FormatRule],
     cell_value: Any,
     row_data: dict = None
-) -> tuple[str | None, str | None]:
+) -> tuple[StyleContainer | None, str | None]:
     """
     Apply format rules to a cell value.
 
@@ -451,8 +487,8 @@ def apply_format(
         row_data: Dict of {col_id: value} for column references
 
     Returns:
-        Tuple of (css_string, formatted_value):
-        - css_string: CSS inline style string, or None
+        Tuple of (style_container, formatted_value):
+        - style_container: StyleContainer with cls and css attributes, or None
         - formatted_value: Formatted string, or None
     """
 ```
@@ -478,9 +514,17 @@ rules = [
 ]
 
 # Apply to cell
-css, formatted = engine.apply_format(rules, -1234.56)
-# css = "background-color: var(--color-error); color: var(--color-error-content);"
+style, formatted = engine.apply_format(rules, -1234.56)
+# style = StyleContainer(
+#     cls=None,
+#     css="background-color: var(--color-error); color: var(--color-error-content);"
+# )
 # formatted = "-1 234,56 €"
+
+# Access CSS string
+if style:
+    css_string = style.css
+    css_classes = style.cls
 ```
 
 ### Sub-components
@@ -511,11 +555,47 @@ Converts `Style` objects to CSS strings:
 resolver = StyleResolver()
 
 style = Style(preset="error", font_weight="bold")
+
+# Get CSS properties dict
 css_dict = resolver.resolve(style)
 # {"background-color": "var(--color-error)", "color": "var(--color-error-content)", "font-weight": "bold"}
 
+# Get CSS inline string
 css_string = resolver.to_css_string(style)
 # "background-color: var(--color-error); color: var(--color-error-content); font-weight: bold;"
+
+# Get StyleContainer with classes and CSS
+container = resolver.to_style_container(style)
+# StyleContainer(cls=None, css="background-color: var(--color-error); ...")
+```
+
+**StyleContainer:**
+
+The `to_style_container()` method returns a `StyleContainer` object that separates CSS classes from inline styles:
+
+```python
+@dataclass
+class StyleContainer:
+    cls: str | None = None  # CSS class names
+    css: str = None         # Inline CSS string
+```
+
+This is useful when presets include the `__class__` key:
+
+```python
+# Preset with CSS classes
+custom_presets = {
+    "badge": {
+        "__class__": "badge badge-primary",
+        "background-color": "blue"
+    }
+}
+resolver = StyleResolver(style_presets=custom_presets)
+style = Style(preset="badge")
+
+container = resolver.to_style_container(style)
+# container.cls = "badge badge-primary"
+# container.css = "background-color: blue;"
 ```
 
 #### FormatterResolver
@@ -1217,9 +1297,12 @@ Used by `DataGridFormattingEditor` to configure the CodeMirror editor.
 7. DataGrid renders cells
    - mk_body_cell_content() applies formatting
    - FormattingEngine.apply_format(rules, cell_value, row_data)
+   - Returns (StyleContainer, formatted_value)
          │
          ▼
-8. CSS + formatted value rendered in cell
+8. CSS classes + inline styles + formatted value rendered in cell
+   - StyleContainer.cls applied to class attribute
+   - StyleContainer.css applied as inline style
 ```
 
 ---
@@ -1235,11 +1318,33 @@ from myfasthtml.controls.DataGridsManager import DataGridsManager
 
 manager = DataGridsManager.get_instance(session)
 
+# Style preset with CSS properties only
 manager.add_style_preset("corporate", {
     "background-color": "#003366",
     "color": "#FFFFFF",
     "font-weight": "bold"
 })
+
+# Style preset with CSS classes (DaisyUI/Tailwind)
+manager.add_style_preset("badge_primary", {
+    "__class__": "badge badge-primary",
+    "font-weight": "bold"
+})
+
+# Style preset mixing classes and inline styles
+manager.add_style_preset("highlighted", {
+    "__class__": "badge badge-accent",
+    "background-color": "#fef08a",
+    "color": "#854d0e"
+})
+```
+
+**Usage in DSL:**
+
+```python
+column status:
+    style("badge_primary") if value == "active"
+    style("highlighted") if value == "important"
 ```
 
 #### Add Custom Formatter Presets

docs/Panel.md

@@ -941,4 +941,4 @@ The Panel component uses JavaScript for manual resizing:
 - Sends width updates to server via HTMX
 - Constrains width between 150px and 500px
 
-**File:** `src/myfasthtml/assets/myfasthtml.js`
+**File:** `src/myfasthtml/assets/core/myfasthtml.js`