@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/container-blocks/watermark.md

@@ -0,0 +1,515 @@
+# Watermark
+
+Watermark overlay with text, image, and font customization.
+
+```yaml
+- id: basic_single
+  type: Watermark
+  properties:
+    text: Lowdefy
+  blocks:
+    - id: basic_single_child
+      type: Box
+      style:
+        height: 200px
+- id: basic_multiline
+  type: Watermark
+  properties:
+    text:
+      - Lowdefy
+      - Confidential
+  blocks:
+    - id: basic_multiline_child
+      type: Box
+      style:
+        height: 220px
+```
+
+```yaml
+- id: img_logo
+  type: Watermark
+  properties:
+    image: https://lowdefy.com/favicon-32x32.png
+    width: 80
+    height: 80
+  blocks:
+    - id: img_logo_child
+      type: Box
+      style:
+        height: 240px
+- id: img_small
+  type: Watermark
+  properties:
+    image: https://lowdefy.com/favicon-32x32.png
+    width: 40
+    height: 40
+  blocks:
+    - id: img_small_child
+      type: Box
+      style:
+        height: 200px
+```
+
+```yaml
+- id: font_red
+  type: Watermark
+  properties:
+    text: Rejected
+    font:
+      color: rgba(255, 0, 0, 0.15)
+  blocks:
+    - id: font_red_child
+      type: Box
+      style:
+        height: 180px
+- id: font_large_bold
+  type: Watermark
+  properties:
+    text: DRAFT
+    font:
+      fontSize: 28
+      fontWeight: bold
+      color: rgba(255, 0, 0, 0.08)
+  blocks:
+    - id: font_large_bold_child
+      type: Box
+      style:
+        height: 220px
+- id: font_serif_italic
+  type: Watermark
+  properties:
+    text: Elegant
+    font:
+      fontFamily: Georgia, serif
+      fontStyle: italic
+      fontSize: 20
+      color: rgba(139, 92, 246, 0.1)
+  blocks:
+    - id: font_serif_italic_child
+      type: Box
+      style:
+        height: 200px
+```
+
+```yaml
+- id: align_left
+  type: Watermark
+  properties:
+    text:
+      - Left Aligned
+      - Second Line
+    font:
+      textAlign: left
+      color: rgba(0, 0, 0, 0.1)
+  blocks:
+    - id: align_left_child
+      type: Box
+      style:
+        height: 200px
+- id: align_center
+  type: Watermark
+  properties:
+    text:
+      - Center Aligned
+      - Second Line
+    font:
+      textAlign: center
+      color: rgba(0, 0, 0, 0.1)
+  blocks:
+    - id: align_center_child
+      type: Box
+      style:
+        height: 200px
+- id: align_right
+  type: Watermark
+  properties:
+    text:
+      - Right Aligned
+      - Second Line
+    font:
+      textAlign: right
+      color: rgba(0, 0, 0, 0.1)
+  blocks:
+    - id: align_right_child
+      type: Box
+      style:
+        height: 200px
+```
+
+```yaml
+- id: rotate_default
+  type: Watermark
+  properties:
+    text: Default (-22 degrees)
+  blocks:
+    - id: rotate_default_child
+      type: Box
+      style:
+        height: 180px
+- id: rotate_horizontal
+  type: Watermark
+  properties:
+    text: Horizontal (0 degrees)
+    rotate: 0
+  blocks:
+    - id: rotate_horizontal_child
+      type: Box
+      style:
+        height: 180px
+- id: rotate_steep
+  type: Watermark
+  properties:
+    text: Steep (-45 degrees)
+    rotate: -45
+  blocks:
+    - id: rotate_steep_child
+      type: Box
+      style:
+        height: 200px
+```
+
+```yaml
+- id: gap_tight
+  type: Watermark
+  properties:
+    text: Tight Gap
+    gap:
+      - 50
+      - 50
+  blocks:
+    - id: gap_tight_child
+      type: Box
+      style:
+        height: 200px
+- id: gap_wide
+  type: Watermark
+  properties:
+    text: Wide Gap
+    gap:
+      - 200
+      - 200
+  blocks:
+    - id: gap_wide_child
+      type: Box
+      style:
+        height: 200px
+- id: offset_shifted
+  type: Watermark
+  properties:
+    text: Offset (50, 40)
+    offset:
+      - 50
+      - 40
+  blocks:
+    - id: offset_shifted_child
+      type: Box
+      style:
+        height: 200px
+```
+
+```yaml
+- id: zindex_high
+  type: Watermark
+  properties:
+    text: High zIndex (100)
+    zIndex: 100
+  blocks:
+    - id: zindex_high_child
+      type: Box
+      style:
+        height: 180px
+- id: inherit_false
+  type: Watermark
+  properties:
+    text: Inherit disabled
+    inherit: false
+  blocks:
+    - id: inherit_false_child
+      type: Box
+      style:
+        height: 180px
+```
+
+```yaml
+- id: theme_color_fill
+  type: Watermark
+  properties:
+    text: Custom Fill Color
+    theme:
+      colorFill: rgba(22, 119, 255, 0.12)
+  blocks:
+    - id: theme_color_fill_child
+      type: Box
+      style:
+        height: 200px
+- id: theme_font_size
+  type: Watermark
+  properties:
+    text: Large Default Font
+    theme:
+      fontSizeLG: 24
+  blocks:
+    - id: theme_font_size_child
+      type: Box
+      style:
+        height: 200px
+- id: theme_font_family
+  type: Watermark
+  properties:
+    text: Serif Theme Font
+    theme:
+      fontFamily: Georgia, serif
+  blocks:
+    - id: theme_font_family_child
+      type: Box
+      style:
+        height: 200px
+```
+
+The element CSS key applies Tailwind classes to the Watermark wrapper. Here a gradient background and rounded corners create a styled preview area.
+
+Dark Background
+
+White watermark text with low opacity stays subtle on a dark surface. Useful for dark-mode interfaces and embedded viewers.
+
+Drag and drop files here or click to browse
+
+```yaml
+- id: css_gradient_bg
+  type: Watermark
+  class:
+    element: bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-4
+  properties:
+    text: Preview
+    font:
+      color: rgba(79, 70, 229, 0.1)
+      fontSize: 18
+  blocks:
+    - id: css_gradient_bg_content
+      type: Paragraph
+      properties:
+        content: >
+          The element CSS key applies Tailwind classes to the Watermark wrapper.
+          Here a gradient background and rounded corners create a styled preview
+          area.
+- id: css_dark_surface
+  type: Watermark
+  class:
+    element: bg-bg-layout rounded-lg p-4
+  properties:
+    text: Dark Theme
+    font:
+      color: rgba(255, 255, 255, 0.08)
+      fontSize: 16
+  blocks:
+    - id: css_dark_surface_title
+      type: Title
+      style:
+        color: white
+      properties:
+        content: Dark Background
+        level: 5
+    - id: css_dark_surface_content
+      type: Paragraph
+      style:
+        color: rgba(255, 255, 255, 0.7)
+      properties:
+        content: >
+          White watermark text with low opacity stays subtle on a dark surface.
+          Useful for dark-mode interfaces and embedded viewers.
+- id: css_bordered_area
+  type: Watermark
+  class:
+    element: border-2 border-dashed border-border rounded-xl p-6
+  properties:
+    text: Upload Area
+    font:
+      color: rgba(0, 0, 0, 0.06)
+      fontSize: 20
+    rotate: 0
+    gap:
+      - 120
+      - 80
+  blocks:
+    - id: css_bordered_area_text
+      type: Paragraph
+      style:
+        textAlign: center
+        color: "#999"
+      properties:
+        content: Drag and drop files here or click to browse
+```
+
+Quarterly Financial Report
+
+Prepared for the Board of Directors — Q1 2026
+
+Revenue for the first quarter reached $12.4M, representing a 15% increase year-over-year. Operating margins improved to 23% driven by efficiency gains across all business units.
+
+Customer acquisition costs decreased by 8% while customer lifetime value increased by 12%, indicating strong unit economics. The sales pipeline remains robust with $45M in qualified opportunities.
+
+```yaml
+- id: report_wrapper
+  type: Box
+  class: bg-bg-container rounded-lg shadow-sm
+  blocks:
+    - id: report_watermark
+      type: Watermark
+      properties:
+        text: DRAFT
+        font:
+          fontSize: 28
+          fontWeight: bold
+          color: rgba(255, 0, 0, 0.06)
+        gap:
+          - 150
+          - 150
+        rotate: -30
+      blocks:
+        - id: report_heading
+          type: Title
+          properties:
+            content: Quarterly Financial Report
+            level: 4
+        - id: report_subtitle
+          type: Paragraph
+          properties:
+            content: Prepared for the Board of Directors — Q1 2026
+        - id: report_divider
+          type: Divider
+        - id: report_body_1
+          type: Paragraph
+          properties:
+            content: >
+              Revenue for the first quarter reached $12.4M, representing a 15%
+              increase year-over-year. Operating margins improved to 23% driven
+              by efficiency gains across all business units.
+        - id: report_body_2
+          type: Paragraph
+          properties:
+            content: >
+              Customer acquisition costs decreased by 8% while customer lifetime
+              value increased by 12%, indicating strong unit economics. The
+              sales pipeline remains robust with $45M in qualified
+              opportunities.
+```
+
+Project Overview
+
+A web application for managing team workflows and project timelines. Currently in active development with scheduled release next quarter.
+
+Mobile app for real-time inventory tracking across multiple warehouses. Integrates with existing ERP systems for seamless data sync.
+
+```yaml
+- id: dashboard_watermark
+  type: Watermark
+  properties:
+    text:
+      - CONFIDENTIAL
+      - Do Not Copy
+    font:
+      fontSize: 18
+      color: rgba(22, 119, 255, 0.06)
+      fontWeight: bold
+    gap:
+      - 120
+      - 120
+  blocks:
+    - id: dashboard_title
+      type: Title
+      properties:
+        content: Project Overview
+        level: 4
+    - id: dashboard_cards
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: dashboard_card_alpha
+          type: Card
+          layout:
+            flex: 1 1 0
+          properties:
+            title: Project Alpha
+          slots:
+            extra:
+              blocks:
+                - id: dashboard_alpha_tag
+                  type: Tag
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Active
+                    color: success
+          blocks:
+            - id: dashboard_alpha_desc
+              type: Paragraph
+              properties:
+                content: A web application for managing team workflows and project timelines.
+                  Currently in active development with scheduled release next
+                  quarter.
+            - id: dashboard_alpha_progress
+              type: Progress
+              properties:
+                percent: 68
+        - id: dashboard_card_beta
+          type: Card
+          layout:
+            flex: 1 1 0
+          properties:
+            title: Project Beta
+          slots:
+            extra:
+              blocks:
+                - id: dashboard_beta_tag
+                  type: Tag
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Planning
+                    color: warning
+          blocks:
+            - id: dashboard_beta_desc
+              type: Paragraph
+              properties:
+                content: Mobile app for real-time inventory tracking across multiple warehouses.
+                  Integrates with existing ERP systems for seamless data sync.
+            - id: dashboard_beta_progress
+              type: Progress
+              properties:
+                percent: 25
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `font` | object | - | Font style configuration with color, fontSize, fontWeight, fontFamily, fontStyle, textAlign. |
+| `font.color` | string | - | Font color of the watermark. |
+| `font.fontFamily` | string | - | Font family of the watermark. |
+| `font.fontSize` | number | - | Font size of the watermark. |
+| `font.fontStyle` | string | - | Font style of the watermark. |
+| `font.fontWeight` | string \| number | - | Font weight of the watermark. |
+| `font.textAlign` | string | - | Text alignment of the watermark. Enum: `start`, `end`, `left`, `right`, `center`. |
+| `gap` | array | - | Gap between watermarks as [horizontal, vertical]. |
+| `height` | number | - | Height of the watermark. |
+| `image` | string | - | Image URL to use as watermark. If set, text content is ignored. |
+| `inherit` | boolean | `true` | Inherit watermark config from parent Watermark block. |
+| `offset` | array | - | Offset of the watermark from the top-left as [x, y]. |
+| `rotate` | number | `-22` | Rotation angle of watermark in degrees. |
+| `text` | string \| array | - | Watermark text content. Maps to antd "content" prop. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design watermark tokens](https://ant.design/components/watermark#design-token). |
+| `theme.colorFill` | string | - | Default watermark text color when font.color is not set. Maps to the global colorFill token. |
+| `theme.fontSizeLG` | number | `16` | Default watermark font size when font.fontSize is not set. Maps to the global fontSizeLG token. |
+| `theme.fontFamily` | string | `"sans-serif"` | Default font family used when font.fontFamily is not set. |
+| `width` | number | - | Width of the watermark. |
+| `zIndex` | integer | - | Z-index of the watermark. |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Watermark element. |
+
+| Slot | Description |
+| --- | --- |
+| `content` | Child blocks with a watermark overlay. |

package/content/controls/for.md

@@ -0,0 +1,103 @@
+# :for
+
+```
+({:for: string, :in: any[], :do: routine}): void
+```
+
+The `:for` control iterates over an array, executing a routine for each item sequentially.
+The routine defined by the `:do` key is executed for each item within the array defined by the `:in` key. This routine is executed sequentially for each item in the array.
+The value of the current array item can be accessed using the [`_item`](/_item) operator with the item key set by the `:for` key. This operator is only available within the `:for` and [`:parallel_for`](/:parallel_for) controls.
+
+#### Keys
+
+- `:for: string`: __Required__ - Used to define the key that can be used to access the value of the array item of the current iteration.
+- `:in: array`: __Required__ - Used to define the array of data to iterate over.
+- `:do: routine`: __Required__ - Used to define the routine that will be executed for each array item.
+
+#### Examples
+
+###### Simple Example
+```yaml
+- :for: count
+  :in:
+    - 1
+    - 2
+    - 3
+  :do:
+    :log:
+      _item: count
+```
+Logs:
+```
+  1
+  2
+  3
+```
+
+###### Calculate Order Total
+```yaml
+- :set_state:
+    order_total: 0
+
+- :for: item
+  :in:
+    _payload: order_items
+  :do:
+    - :set_state:
+        item_total:
+          _math.multiply:
+            - _item: item.price
+            - _item: item.quantity
+
+    - :set_state:
+        order_total:
+          _math.add:
+            - _state: order_total
+            - _state: item_total
+
+    - :log:
+        _string.concat:
+          - _item: item.name
+          - ' x '
+          - _item: item.quantity
+          - ' = $'
+          - _state: item_total
+
+- :return:
+    total:
+      _state: order_total
+```
+
+###### Setting Active Users in MongoDB
+```yaml
+- id: get_active_users
+  type: MongoDBAggregation
+  connectionId: activity-log
+  properties:
+    pipeline:
+      - $match:
+          $expr:
+            $gte:
+              - $timestamp
+              - $dateTrunc:
+                  date: $$NOW
+                  unit: day
+      - $group:
+          _id: $user_id
+- :for: user
+  :in:
+    _step: get_active_users
+  :do:
+    - id: update_user_status
+      type: MongoDBUpdateOne
+      connectionId: users
+      properties:
+        filter:
+          _id:
+            _item: user._id
+        update:
+          $set:
+            last_processed:
+              _date: now
+            status: 'active'
+```

package/content/controls/if.md

@@ -0,0 +1,107 @@
+# :if
+
+```
+({:if: boolean, :then: routine, :else: routine}): void
+```
+
+The `:if` control executes different routines based on a boolean condition. It evaluates the condition and runs the `:then` branch if true, or the optional `:else` branch if false. Generally other operators are used to evaluate the test.
+
+The `:if` control also works in client [event action lists](/events-and-actions) — there each branch is a list of actions, and the same syntax and semantics apply.
+
+The condition uses JS truthiness — any truthy value takes the `:then` branch. This differs from an action's `skip` field, which only skips when it evaluates to exactly `true`.
+
+#### Keys
+
+- `:if: boolean`: __Required__ - The boolean result of a test or value.
+- `:then: routine`: __Required__ - The routine to execute if the test result is true.
+- `:else: routine`: The routine to execute if the test result is false.
+
+#### Examples
+
+###### Simple Example
+```yaml
+routine:
+  - :if: true
+    :then:
+      :log: 'Test was true'
+    :else:
+      :log: 'Test was false'
+```
+Logs:
+`Test was true`
+
+###### Set User Features
+```yaml
+routine:
+  - :if:
+      _eq:
+        - _payload: user_type
+        - 'premium'
+    :then:
+      - :set_state:
+          discount: 0.2
+          features: ['unlimited', 'priority_support']
+    :else:
+      - :set_state:
+          discount: 0
+          features: ['basic']
+```
+
+###### Optional Fraud Check
+
+```yaml
+routines:
+  - :if:
+      _gte:
+        - _payload: order_amount
+        - 1000
+    :then:
+      - :log: 'High-value order detected, applying fraud checks'
+      - id: fraud_check
+        type: FraudDetectionAPI
+        connectionId: fraud-service
+        properties:
+          amount:
+            _payload: order_amount
+          customer_id:
+            _payload: customer_id
+      - :if:
+          _gt:
+            - _step: fraud_check.risk_score
+            - 0.7
+        :then:
+          :reject: 'Order flagged for manual review'
+  - id: create_payment_intent
+    type: StripeRequest
+    connectionId: stripe
+    properties:
+      paymentIntents:
+        create:
+          - amount: 2000
+            currency: eur
+            payment_method_types: ['card']
+```
+
+###### In a client event action list
+
+```yaml
+events:
+  onClick:
+    - :if:
+        _not:
+          _state: skip_reopen
+      :then:
+        - id: reopen_ticket
+          type: Request
+          params: reopen_ticket
+        - id: redirect
+          type: Link
+          params:
+            pageId: ticket-view
+      :else:
+        - id: show_blocked
+          type: DisplayMessage
+          params:
+            content: Ticket cannot be reopened.
+            status: warning
+```