stream_weaver 0.3.0

data/lib/stream_weaver/assets/js/sw-sidebar-toc.js

@@ -0,0 +1,116 @@
+/**
+ * StreamWeaver SidebarToc Scroll Spy
+ *
+ * Uses IntersectionObserver to highlight the active section in the
+ * sidebar table-of-contents. Works with both desktop (sticky sidebar)
+ * and mobile (horizontal scrollable bar) layouts.
+ */
+(function() {
+  'use strict';
+
+  function initSidebarToc() {
+    var navEl = document.querySelector('.sw-sidebar-toc__nav');
+    // A real htmx swap replaces navEl outright, so this flag is naturally
+    // fresh there. A host that re-invokes init without a real swap (the
+    // browser extension's sandbox, which has no htmx at all) would
+    // otherwise attach a second click listener to every link and leak a
+    // second IntersectionObserver watching the first one's now-detached
+    // targets -- not hypothetical, this exact host now calls init directly.
+    if (!navEl || navEl.dataset.swTocReady) return;
+    navEl.dataset.swTocReady = 'true';
+
+    var links = navEl.querySelectorAll('.sw-sidebar-toc__link');
+    if (links.length === 0) return;
+
+    // Collect target section IDs
+    var sectionIds = [];
+    links.forEach(function(link) {
+      var id = link.getAttribute('data-sw-toc-target');
+      if (id) sectionIds.push(id);
+    });
+
+    // Track which sections are intersecting
+    var visibleSections = {};
+
+    // Create IntersectionObserver
+    var observer = new IntersectionObserver(function(entries) {
+      entries.forEach(function(entry) {
+        visibleSections[entry.target.id] = entry.isIntersecting;
+      });
+
+      // Find the first visible section (in DOM order)
+      var activeId = null;
+      for (var i = 0; i < sectionIds.length; i++) {
+        if (visibleSections[sectionIds[i]]) {
+          activeId = sectionIds[i];
+          break;
+        }
+      }
+
+      if (activeId) {
+        setActiveLink(activeId, links);
+      }
+    }, {
+      rootMargin: '-80px 0px -60% 0px',
+      threshold: 0
+    });
+
+    // Observe each section target
+    sectionIds.forEach(function(id) {
+      var el = document.getElementById(id);
+      if (el) observer.observe(el);
+    });
+
+    // Smooth-scroll click handler
+    links.forEach(function(link) {
+      link.addEventListener('click', function(e) {
+        e.preventDefault();
+        var targetId = link.getAttribute('data-sw-toc-target');
+        var target = document.getElementById(targetId);
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          setActiveLink(targetId, links);
+        }
+      });
+    });
+
+    // Activate the first link by default
+    if (links.length > 0 && sectionIds.length > 0) {
+      setActiveLink(sectionIds[0], links);
+    }
+  }
+
+  function setActiveLink(activeId, links) {
+    links.forEach(function(link) {
+      var isActive = link.getAttribute('data-sw-toc-target') === activeId;
+      if (isActive) {
+        link.classList.add('sw-is-active');
+      } else {
+        link.classList.remove('sw-is-active');
+      }
+    });
+
+    // On mobile, scroll the active link into view in the horizontal bar
+    var activeLink = document.querySelector('.sw-sidebar-toc__link.sw-is-active');
+    if (activeLink) {
+      var nav = activeLink.closest('.sw-sidebar-toc__nav');
+      if (nav && nav.scrollWidth > nav.clientWidth) {
+        activeLink.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+      }
+    }
+  }
+
+  // Hosts with no htmx at all (the browser extension's sandbox, a one-shot
+  // static render) call this directly instead of relying on the htmx
+  // listener below -- a named, greppable hook rather than that host faking
+  // an htmx event it never actually loads.
+  window.swInitSidebarToc = initSidebarToc;
+
+  // Initialize on DOMContentLoaded and after HTMX swaps
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initSidebarToc);
+  } else {
+    initSidebarToc();
+  }
+  document.addEventListener('htmx:afterSwap', initSidebarToc);
+})();

data/lib/stream_weaver/assets/js/sw-slide-nav.js

@@ -0,0 +1,103 @@
+/**
+ * StreamWeaver Slide Navigation (sw-slide-nav.js)
+ *
+ * Alpine.js data component for slide container navigation.
+ * Handles both :swap and :scroll_snap modes.
+ *
+ * Usage: x-data="swSlideNav(totalSlides, mode)"
+ *
+ * Registers keyboard shortcuts via swKeyboard (if available).
+ */
+(function() {
+  'use strict';
+
+  /**
+   * Alpine.js data factory for slide navigation.
+   * @param {number} total - Total number of slides
+   * @param {string} mode - 'swap' or 'scroll_snap'
+   * @param {boolean} keyboardNav - Whether to register keyboard shortcuts
+   * @returns {object} Alpine.js data object
+   */
+  window.swSlideNav = function(total, mode, keyboardNav, initialSlide) {
+    return {
+      current: initialSlide || 0,
+      total: total,
+      mode: mode || 'swap',
+
+      init: function() {
+        if (keyboardNav !== false && typeof swKeyboard !== 'undefined') {
+          var self = this;
+
+          swKeyboard.register('arrowright', 'navigation', function() {
+            self.next();
+          });
+          swKeyboard.register('arrowleft', 'navigation', function() {
+            self.prev();
+          });
+          swKeyboard.register('arrowdown', 'navigation', function() {
+            self.next();
+          });
+          swKeyboard.register('arrowup', 'navigation', function() {
+            self.prev();
+          });
+          swKeyboard.register(' ', 'navigation', function() {
+            self.next();
+          });
+        }
+      },
+
+      next: function() {
+        if (this.current < this.total - 1) {
+          this.current++;
+          this._onNavigate();
+        }
+      },
+
+      prev: function() {
+        if (this.current > 0) {
+          this.current--;
+          this._onNavigate();
+        }
+      },
+
+      goTo: function(index) {
+        if (index >= 0 && index < this.total) {
+          this.current = index;
+          this._onNavigate();
+        }
+      },
+
+      /** Progress as a percentage (0-100) */
+      progress: function() {
+        if (this.total <= 1) return 100;
+        return Math.round((this.current / (this.total - 1)) * 100);
+      },
+
+      /** Whether the Back button should be enabled */
+      canPrev: function() {
+        return this.current > 0;
+      },
+
+      /** Whether the Next button should be enabled */
+      canNext: function() {
+        return this.current < this.total - 1;
+      },
+
+      /** Handle post-navigation actions (scroll-snap scroll, scroll-to-top for swap) */
+      _onNavigate: function() {
+        if (this.mode === 'scroll_snap') {
+          var slideEl = document.getElementById('sw-slide-' + this.current);
+          if (slideEl) {
+            slideEl.scrollIntoView({ behavior: 'smooth' });
+          }
+        } else if (this.mode === 'swap') {
+          // Scroll the slide container into view so the new slide is visible
+          var container = this.$el;
+          if (container) {
+            container.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          }
+        }
+      }
+    };
+  };
+})();

data/lib/stream_weaver/canvas/bridge.rb

@@ -0,0 +1,239 @@
+# frozen_string_literal: true
+
+require_relative 'protocol'
+require_relative 'session'
+
+module StreamWeaver
+  module Canvas
+    # Bridge between Claude Code (Unix socket) and browsers (WebSocket).
+    # Manages sessions and routes messages between the two.
+    class Bridge
+      DEFAULT_PORT = 4568
+
+      # Result of rendering DSL to HTML
+      RenderResult = Struct.new(:html, :error, :stylesheets, keyword_init: true)
+
+      attr_reader :sessions, :port
+
+      def initialize(port: DEFAULT_PORT)
+        @sessions = {}
+        @port = port
+      end
+
+      # Create or get an existing session
+      # @param name [String] Session name
+      # @return [Session]
+      def create_session(name, layout: :fluid, theme: :default)
+        @sessions[name] ||= Session.new(name, layout: layout, theme: theme)
+      end
+
+      # Get a session by name
+      # @param name [String] Session name
+      # @return [Session, nil]
+      def get_session(name)
+        @sessions[name]
+      end
+
+      # Close and remove a session
+      # @param name [String] Session name
+      # @return [Boolean] true if session existed
+      def close_session(name)
+        !!@sessions.delete(name)
+      end
+
+      # List all sessions
+      # @return [Array<Hash>]
+      def list_sessions
+        @sessions.values.map(&:to_h)
+      end
+
+      # Handle a message from Claude Code (via Unix socket)
+      # @param message [Hash] Message from Claude
+      # @return [Hash] Response message
+      def handle_claude_message(message)
+        case message[:type]
+        when 'create'
+          handle_create(message[:name], layout: (message[:layout] || :fluid).to_sym, theme: (message[:theme] || :default).to_sym)
+        when 'push'
+          handle_push(message[:name], message[:dsl], message[:source_dir])
+        when 'toast'
+          handle_toast(message[:name], message[:message], message[:variant], message[:duration])
+        when 'close'
+          handle_close(message[:name])
+        when 'get_dsl'
+          handle_get_dsl(message[:name])
+        when 'set_pane_id'
+          handle_set_pane_id(message[:name], message[:pane_id])
+        when 'reset'
+          handle_reset(message[:name], message[:all])
+        when 'list'
+          handle_list
+        when 'get_state'
+          handle_get_state(message[:name])
+        else
+          { type: 'error', message: "Unknown message type: #{message[:type]}" }
+        end
+      end
+
+      # Handle a message from browser (via WebSocket)
+      # @param session_name [String] Session name
+      # @param message [Hash] Message from browser
+      # @return [Hash] Event message to forward to Claude
+      def handle_browser_message(session_name, message)
+        session = get_session(session_name)
+        return nil unless session
+
+        # Update session state from browser
+        if message[:state]
+          session.update_state(message[:state])
+        end
+
+        # Return event for Claude
+        {
+          type: 'event',
+          name: session_name,
+          event: message[:type],
+          data: {
+            button: message[:button],
+            state: message[:state]
+          }
+        }
+      end
+
+      private
+
+      def handle_create(name, layout: :fluid, theme: :default)
+        create_session(name, layout: layout, theme: theme)
+        {
+          type: 'ready',
+          name: name,
+          url: "http://localhost:#{@port}/canvas/#{name}"
+        }
+      end
+
+      def handle_push(name, dsl, source_dir = nil)
+        session = get_session(name)
+        return { type: 'error', message: "Session not found: #{name}" } unless session
+
+        # Render DSL to HTML
+        result = render_dsl(dsl, session_name: name)
+
+        # Store in session for polling clients
+        session.set_html(result.html)
+
+        # Broadcast to all websockets (if any connected)
+        session.broadcast({ type: 'update', html: result.html })
+
+        # Return error info if rendering failed
+        if result.error
+          { type: 'push_error', message: result.error }
+        else
+          # Persist raw DSL, its inline stylesheets, and the directory it was
+          # pushed from only on successful render so a later failed push
+          # doesn't clobber the user's last-good content, re-skin
+          # (stream_weaver-9uk), or desync source_dir from the DSL it's
+          # paired with (canvas-doc-location-and-discovery.md).
+          session.set_dsl(dsl)
+          session.set_stylesheets(result.stylesheets)
+          session.set_source_dir(source_dir)
+          { type: 'push_ok' }
+        end
+      end
+
+      def handle_toast(name, message, variant, duration)
+        session = get_session(name)
+        return { type: 'error', message: "Session not found: #{name}" } unless session
+
+        session.queue_toast(
+          message: message,
+          variant: variant || 'warning',
+          duration: duration || 0
+        )
+
+        nil # No response to Claude for toast
+      end
+
+      def handle_close(name)
+        session = get_session(name)
+        pane_id = session&.pane_id
+        session&.broadcast(type: 'closed')
+        close_session(name)
+        { type: 'closed', name: name, pane_id: pane_id }
+      end
+
+      # canvas-snapshot's DSL/body source (stream_weaver-ps84): returns the
+      # session's current in-memory dsl plus the theme/layout it was created
+      # with, since the bridge only sets those at Session.new and neither
+      # can drift afterward (Session has no theme=/layout= setter).
+      def handle_get_dsl(name)
+        session = get_session(name)
+        return { type: 'error', message: "Session not found: #{name}" } unless session
+
+        { type: 'dsl', name: name, dsl: session.dsl, theme: session.theme, layout: session.layout }
+      end
+
+      def handle_set_pane_id(name, pane_id)
+        session = get_session(name)
+        return { type: 'error', message: "Session not found: #{name}" } unless session
+
+        session.pane_id = pane_id
+        { type: 'pane_id_set', name: name }
+      end
+
+      def handle_get_state(name)
+        session = get_session(name)
+        return { type: 'error', message: "Session not found: #{name}" } unless session
+
+        {
+          type: 'state',
+          name: name,
+          data: session.state
+        }
+      end
+
+      def handle_reset(name, reset_all = false)
+        return reset_all_sessions if reset_all
+
+        session = get_session(name) or return { type: 'error', message: "Session not found: #{name}" }
+        session.reset!
+        { type: 'reset_ok', name: name }
+      end
+
+      def reset_all_sessions
+        @sessions.each_value(&:reset!)
+        { type: 'reset_ok', count: @sessions.size }
+      end
+
+      def handle_list
+        { type: 'list', sessions: list_sessions }
+      end
+
+      # Render StreamWeaver DSL to HTML
+      # @param dsl [String] DSL code
+      # @param session_name [String] Session name for routing
+      # @return [RenderResult] Result with html and optional error
+      def render_dsl(dsl, session_name:)
+        # Create a mini app to evaluate the DSL
+        mini_app = StreamWeaver::App.new("Canvas")
+        mini_app.instance_eval(dsl)
+
+        # Create adapter in websocket mode
+        adapter = StreamWeaver::Adapter::AlpineJS.new(
+          url_prefix: "/canvas/#{session_name}",
+          mode: :websocket
+        )
+
+        # Render to HTML
+        state = {}
+        html = StreamWeaver::Views::AppContentView.new(mini_app, state, adapter, false).call
+        RenderResult.new(html: html, error: nil, stylesheets: mini_app.inline_stylesheets)
+      rescue => e
+        RenderResult.new(
+          html: "<div class='error'>Error: #{e.message}</div>",
+          error: e.message,
+          stylesheets: []
+        )
+      end
+    end
+  end
+end