kumiki 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 2a5c07f3fe7c9d026edda7c5bea10a3c782b4957d468d2345285ea6abb2cdccd
+  data.tar.gz: fb06aaa4ad15d1c2abac021233158aa7aca6d2a07510267edc57bf351bbd841c
+SHA512:
+  metadata.gz: c39a4c8d085fc796b6644710637f634e30bb3b2a62f06bff480a970784588beea74e42ce09b1aa83a48c848ea02233095a8fb320d3c7e7ebd7d3d4ce5b79ca42
+  data.tar.gz: 2c9111e037718a27643a88ec98e1d385d30233e120cae0670c5bcb90cf1979699373c7d93b06c9b9ea98e753de7b5b1cf3a80c9ebf1fbb114990275fe25466fb

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yasushi Itoh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,256 @@
+# Kumiki
+
+**A declarative, reactive GUI framework for Ruby**
+
+[![Ruby](https://img.shields.io/badge/ruby-%3E%3D%203.1-CC342D?logo=ruby)](https://www.ruby-lang.org/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
+
+Kumiki (組木) is a component-based desktop GUI framework for Ruby, based on a Ruby port of [castella](https://github.com/i2y/castella). Define your UI declaratively with a clean block-based DSL; the reactive state system handles updates automatically. Rendering is powered by [ranma](https://github.com/i2y/ranma) (tao + Vello GPU).
+
+---
+
+## Features
+
+- **Reactive state** — `State` objects trigger automatic UI rebuilds on change
+- **Block-based DSL** — `column`, `row`, `text`, `button`, ... with keyword-arg styling
+- **GPU rendering** — hardware-accelerated via ranma (tao + Vello)
+- **Rich widget set** — 20+ widgets covering inputs, layout, data display, and more
+- **Animation** — `AnimatedState` with built-in easing functions
+- **Theming** — Tokyo Night (default) and Material Design themes included
+- **Charts** — 8 chart types: Bar, Line, Pie, Scatter, Area, StackedBar, Gauge, Heatmap
+- **Markdown** — Markdown rendering with Mermaid diagram support
+- **WebView** — embedded browser widget
+
+---
+
+## Installation
+
+Add to your `Gemfile`:
+
+```ruby
+gem "kumiki"
+```
+
+Or install directly:
+
+```sh
+gem install kumiki
+```
+
+---
+
+## Quick Start
+
+```ruby
+require "kumiki"
+include Kumiki
+
+class Counter < Component
+  def initialize
+    super
+    @count = state(0)
+  end
+
+  def view
+    column(padding: 16.0, spacing: 8.0) {
+      text "Count: #{@count}", font_size: 32.0, align: :center
+      row(spacing: 8.0) {
+        button(" - ") { @count -= 1 }
+        button(" + ") { @count += 1 }
+      }
+    }
+  end
+end
+
+Kumiki.run("Counter", 400, 300) { Counter.new }
+```
+
+---
+
+## Widget Reference
+
+### Layouts
+
+| Widget | Description |
+|--------|-------------|
+| `Column` / `column` | Vertical stack |
+| `Row` / `row` | Horizontal stack |
+| `Box` / `box` | Z-stack overlay |
+
+### Container
+
+| Widget | Description |
+|--------|-------------|
+| `Container` / `container` | Background, border, border-radius, scrollable |
+
+### Leaf Widgets
+
+| Widget | Description |
+|--------|-------------|
+| `Text` / `text` | Static or dynamic text |
+| `Button` / `button` | Clickable button with `kind:` variants |
+| `Input` / `input` | Single-line text input |
+| `MultilineInput` / `multiline_input` | Multi-line text input |
+| `MultilineText` / `multiline_text` | Read-only multi-line text |
+| `Checkbox` / `checkbox` | Boolean toggle |
+| `RadioButtons` / `radio_buttons` | Single selection from options |
+| `Switch` / `switch` | Toggle switch |
+| `Slider` / `slider` | Value slider with range |
+| `ProgressBar` / `progress_bar` | Progress indicator |
+| `Divider` / `divider` | Horizontal rule |
+| `Spacer` / `spacer` | Flexible space |
+| `ImageWidget` / `image` | Local image |
+| `NetImageWidget` / `net_image` | Async remote image |
+| `WebViewWidget` / `webview` | Embedded web browser |
+
+### Complex Widgets
+
+| Widget | Description |
+|--------|-------------|
+| `Tabs` / `tabs` | Tabbed panels |
+| `Tree` / `tree` | Collapsible tree navigation |
+| `Calendar` / `calendar` | Month calendar with selection |
+| `Modal` / `modal` | Overlay dialog |
+| `DataTable` / `data_table` | Sortable, scrollable table |
+
+### Charts
+
+| Widget | Description |
+|--------|-------------|
+| `BarChart` | Vertical bar chart |
+| `LineChart` | Line / time-series chart |
+| `PieChart` | Pie chart |
+| `ScatterChart` | Scatter plot |
+| `AreaChart` | Area chart |
+| `StackedBarChart` | Stacked bar chart |
+| `GaugeChart` | Circular gauge |
+| `HeatmapChart` | 2D heatmap |
+
+### Markdown
+
+| Widget | Description |
+|--------|-------------|
+| `Markdown` / `markdown_text` | Renders Markdown with Mermaid diagram support |
+
+---
+
+## DSL Style vs Object Style
+
+Both styles can be mixed freely. The DSL is preferred for new code.
+
+**DSL (block-based):**
+
+```ruby
+column(padding: 16.0, spacing: 8.0) {
+  text "Hello", font_size: 24.0
+  button("Click me") { puts "clicked" }
+}
+```
+
+**Object-based:**
+
+```ruby
+Column(
+  Text("Hello").font_size(24.0),
+  Button("Click me") { puts "clicked" }
+).padding(16.0).spacing(8.0)
+```
+
+---
+
+## Animation
+
+```ruby
+class MyApp < Component
+  def initialize
+    super
+    # AnimatedState.new(initial_value, duration_ms, easing)
+    @x = AnimatedState.new(0.0, 400.0, :ease_out)
+    @x.attach(self)
+  end
+
+  def view
+    column {
+      box {
+        container(x: @x.value, width: 60.0, height: 60.0, background: 0xFF7AA2F7)
+      }
+      button("Animate") { @x.set(200.0) }
+    }
+  end
+end
+```
+
+Available easing functions: `:linear`, `:ease_in`, `:ease_out`, `:ease_in_out`, `:ease_in_cubic`, `:ease_out_cubic`, `:ease_in_out_cubic`, `:bounce`
+
+---
+
+## Theming
+
+```ruby
+require "kumiki"
+
+# Default: Tokyo Night
+Kumiki.run("App", 800, 600) { MyApp.new }
+
+# Material Design (light)
+Kumiki.theme = Kumiki.material_theme
+Kumiki.run("App", 800, 600) { MyApp.new }
+```
+
+Widget `kind:` prop applies semantic colors from the active theme:
+
+```ruby
+button("OK",     kind: :success)
+button("Cancel", kind: :danger)
+button("Info",   kind: :info)
+button("Warn",   kind: :warning)
+```
+
+---
+
+## Examples
+
+The `examples/` directory contains runnable demos:
+
+| File | Description |
+|------|-------------|
+| `dsl_counter_demo.rb` | Minimal counter — reactive state + DSL |
+| `counter.rb` | Counter using object-based style |
+| `all_widgets_demo.rb` | Comprehensive showcase of every widget |
+| `animation_demo.rb` | Animation system with various easing functions |
+| `chart_demo.rb` | All 8 chart types |
+| `data_table_demo.rb` | Sortable DataTable |
+| `calendar_demo.rb` | Calendar widget |
+| `tree_demo.rb` | Tree navigation |
+| `tabs_demo.rb` | Tabbed interface |
+| `modal_demo.rb` | Modal dialogs |
+| `markdown_demo.rb` | Markdown + Mermaid rendering |
+| `input_demo.rb` | Input fields and text widgets |
+| `scroll_demo.rb` | Scrollable containers |
+| `focus_demo.rb` | Keyboard focus and Tab cycling |
+| `theme_demo.rb` | Theme presets and `kind:` variants |
+| `theme_mode_demo.rb` | Light / dark mode switching |
+| `dsl_style_demo.rb` | DSL styling examples |
+| `dsl_calc.rb` | Calculator app |
+| `widgets_demo.rb` | Basic widgets overview |
+
+Run any example:
+
+```sh
+bundle install
+bundle exec ruby examples/dsl_counter_demo.rb
+```
+
+---
+
+## Requirements
+
+- Ruby >= 3.1.0
+- macOS or Linux
+- The `ranma` gem is installed automatically as a dependency
+
+---
+
+## License
+
+MIT — Copyright (c) 2026 Yasushi Itoh. See [LICENSE](LICENSE) for details.

data/lib/kumiki/animation/animated_state.rb

@@ -0,0 +1,83 @@
+module Kumiki
+  # AnimatedState - observable value that transitions smoothly
+  # Inherits from ObservableBase so Components can subscribe
+
+  class AnimatedState < ObservableBase
+    def initialize(initial_value, duration, easing_fn)
+      super()
+      @value = initial_value
+      @target = initial_value
+      @duration = duration        # milliseconds
+      @easing_fn = easing_fn      # Symbol
+      @tween = nil
+      @animating = false
+    end
+
+    def value
+      @value
+    end
+
+    def target
+      @target
+    end
+
+    def animating?
+      @animating
+    end
+
+    # Set a new target — begins animation from current value
+    def set(new_target)
+      if new_target == @target && !@animating
+        return
+      end
+      @target = new_target
+      @tween = ValueTween.new(@value, @target, @duration, @easing_fn)
+      @animating = true
+      # Register with App's animation loop
+      app = App.current
+      if app != nil
+        app.register_animation(self)
+      end
+    end
+
+    # Immediately jump to a value (no animation)
+    def set_immediate(new_value)
+      @value = new_value
+      @target = new_value
+      @tween = nil
+      @animating = false
+      notify_observers
+    end
+
+    # Call each frame with delta time in ms
+    def tick(dt)
+      return false if !@animating || @tween == nil
+      @tween.tick(dt)
+      @value = @tween.current
+      if @tween.finished?
+        @value = @target
+        @animating = false
+        @tween = nil
+      end
+      notify_observers
+      @animating
+    end
+
+    def duration
+      @duration
+    end
+
+    def duration=(d)
+      @duration = d
+    end
+
+    def easing_fn
+      @easing_fn
+    end
+
+    def easing_fn=(e)
+      @easing_fn = e
+    end
+  end
+
+end

data/lib/kumiki/animation/easing.rb

@@ -0,0 +1,62 @@
+module Kumiki
+  # Easing functions for animation
+  # All functions take t in [0.0, 1.0] and return a value in [0.0, 1.0]
+
+  EASING_PI = 3.14159265358979323846
+
+  module Easing
+    def self.linear(t)
+      t
+    end
+
+    def self.ease_in(t)
+      t * t
+    end
+
+    def self.ease_out(t)
+      1.0 - (1.0 - t) * (1.0 - t)
+    end
+
+    def self.ease_in_out(t)
+      if t < 0.5
+        2.0 * t * t
+      else
+        1.0 - (-2.0 * t + 2.0) * (-2.0 * t + 2.0) / 2.0
+      end
+    end
+
+    def self.ease_in_cubic(t)
+      t * t * t
+    end
+
+    def self.ease_out_cubic(t)
+      v = 1.0 - t
+      1.0 - v * v * v
+    end
+
+    def self.ease_in_out_cubic(t)
+      if t < 0.5
+        4.0 * t * t * t
+      else
+        v = -2.0 * t + 2.0
+        1.0 - v * v * v / 2.0
+      end
+    end
+
+    def self.bounce(t)
+      if t < 1.0 / 2.75
+        7.5625 * t * t
+      elsif t < 2.0 / 2.75
+        t2 = t - 1.5 / 2.75
+        7.5625 * t2 * t2 + 0.75
+      elsif t < 2.5 / 2.75
+        t2 = t - 2.25 / 2.75
+        7.5625 * t2 * t2 + 0.9375
+      else
+        t2 = t - 2.625 / 2.75
+        7.5625 * t2 * t2 + 0.984375
+      end
+    end
+  end
+
+end

data/lib/kumiki/animation/value_tween.rb

@@ -0,0 +1,69 @@
+module Kumiki
+  # ValueTween - interpolates between two numeric values over a duration
+  # Frame-based: call tick(dt) each frame to advance
+
+  class ValueTween
+    def initialize(from_val, to_val, duration, easing_fn)
+      @from_val = from_val
+      @to_val = to_val
+      @duration = duration      # milliseconds
+      @easing_fn = easing_fn    # Symbol: :linear, :ease_in, etc.
+      @elapsed = 0.0
+      @current = from_val
+      @finished = false
+    end
+
+    def tick(dt)
+      return if @finished
+      @elapsed = @elapsed + dt
+      if @elapsed >= @duration
+        @elapsed = @duration
+        @finished = true
+      end
+      t = @elapsed / @duration
+      eased = apply_easing(t)
+      @current = @from_val + (@to_val - @from_val) * eased
+    end
+
+    def current
+      @current
+    end
+
+    def finished?
+      @finished
+    end
+
+    def reset(from_val, to_val)
+      @from_val = from_val
+      @to_val = to_val
+      @elapsed = 0.0
+      @current = from_val
+      @finished = false
+    end
+
+    private
+
+    def apply_easing(t)
+      if @easing_fn == :linear
+        Easing.linear(t)
+      elsif @easing_fn == :ease_in
+        Easing.ease_in(t)
+      elsif @easing_fn == :ease_out
+        Easing.ease_out(t)
+      elsif @easing_fn == :ease_in_out
+        Easing.ease_in_out(t)
+      elsif @easing_fn == :ease_in_cubic
+        Easing.ease_in_cubic(t)
+      elsif @easing_fn == :ease_out_cubic
+        Easing.ease_out_cubic(t)
+      elsif @easing_fn == :ease_in_out_cubic
+        Easing.ease_in_out_cubic(t)
+      elsif @easing_fn == :bounce
+        Easing.bounce(t)
+      else
+        t
+      end
+    end
+  end
+
+end