mbeditor 0.2.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 141c77f551fd195ca9003f28b527f22f29d735fa70e1a1f80f638ad5739edf2d
+  data.tar.gz: 479f09a85f6c11c76f014ec85f269d5597bee72eb9e10135e65df275046a4fac
+SHA512:
+  metadata.gz: d1015d5ca772fd35e20c83837ca54d4751ff3b09f0c1978a0d5e55bbb7ba392107e461bb7656ae7ac8158babb55289579afe15d9772f07024229ce6f77b1cb62
+  data.tar.gz: 4194a9575055264e59b6f1922bfb7fa225c64242e9de8c406ca43a4c1995397b711204471994651d9b94da6b4ae0a02958f9d48833436af7e5f4dddb083990c9

data/CHANGELOG.md

@@ -0,0 +1,116 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.2.2] - 2026-04-02
+
+### Changed
+- Bumped the gem version for the next tagged release.
+
+## [0.2.1] - 2026-04-01
+
+### Fixed
+- **Missing files in restored tabs** — file loads can now opt into a structured missing-file response so restored editor tabs stay stable instead of erroring when a file has been deleted.
+- **Markdown preview restore** — markdown preview tabs are only recreated after a real file load, which avoids blank preview panes for missing files.
+- **Fallback search exclusions** — the non-ripgrep search path now excludes configured nested directories without accidentally excluding unrelated sibling directories with the same basename.
+- **Branch combined diff baseline** — branch-wide combined diffs now prefer the same merge-base style baseline used elsewhere in the git panel instead of relying only on the upstream ref.
+- **PWA assets** — the web manifest is emitted with explicit manifest content, and the service worker now uses install and activate handlers instead of a no-op fetch listener.
+
+## [0.1.9] - 2026-03-27
+
+### Added
+- **Authentication hook** — new `authenticate_with` configuration option accepts a proc/lambda that runs as a `before_action` in all engine controllers. Use it to plug in the host app's auth system (e.g. Authlogic's `UserSession.find`, Devise's `authenticate_user!`). The proc executes via `instance_exec` so `session`, `cookies`, `redirect_to`, and auth library class methods are all accessible. Default: `nil` (no auth, existing behaviour preserved).
+
+### Fixed
+- **HTTP status code** — all 422 responses now use `:unprocessable_content` (the correct Rails symbol for HTTP 422 since RFC 9110) instead of the deprecated `:unprocessable_entity`.
+- **Search exclusion** — search command construction refactored for clearer exclusion handling.
+
+## [0.1.8] - 2026-03-27
+
+### Fixed
+- **Stray engine config** — removed `config/environments/development.rb` from the engine root; environment configs belong only in the dummy app.
+- **CI workflow** — corrected ref format in the GitHub Actions checkout step.
+- **Test reliability** — refactored HTTP stubbing in `RedmineServiceTest` for improved clarity.
+
+## [0.1.7] - 2026-03-26
+
+### Added
+- **Test results panel** — a dedicated panel shows pass/fail counts, per-test status icons, and error messages after a test run. Inline failure markers overlay the Monaco editor and can be toggled independently of RuboCop markers.
+- **File history context menu** — the tab bar context menu now includes a file history option that opens the per-file commit log.
+
+## [0.1.6] - 2026-03-25
+
+### Added
+- **Editor preferences** — added a settings tab for theme, font size, font family, tab size, and insert-spaces preferences.
+
+### Changed
+- **Theme support** — Monaco now initializes with the saved editor theme and other user preferences.
+- **Language tooling** — JavaScript and TypeScript use the dedicated worker setup for better editor support.
+
+### Fixed
+- **Search results** — capped workspace search results now surface the cap state in the UI.
+- **File size validation** — the 5 MB file-size limit now applies on write as well as read.
+- **System test teardown** — Cuprite sessions now reset before deleting temporary workspaces, preventing background git requests from hitting removed paths in CI.
+
+## [0.1.5] - 2026-03-24
+
+### Added
+- **Shared file icons** — explorer, git panel, tabs, and quick-open now use the same icon mapping.
+- **Quick-open polish** — Ctrl+P shows file icons beside each result and includes a clear button.
+
+### Changed
+- **Search UX** — the sidebar search now shows a loading spinner while the backend search request is in flight, and it includes a clear button.
+- **Git refresh UX** — the git panel refresh button now spins while refresh data is loading.
+
+## [0.1.4] - 2026-03-24
+
+### Fixed
+- **Blame workspace root** — git blame now resolves paths through the shared workspace-root helper, which keeps dummy-app and auto-detected repo roots consistent.
+- **Heartbeat log noise** — `/ping` requests are silenced at the middleware layer before Rails request logging runs.
+- **Blame presentation** — blame is rendered as grouped headers showing author and commit message above contiguous code blocks.
+
+## [0.1.3] - 2026-03-24
+
+### Performance
+- **Heartbeat log spam** — `ping` action now uses `Rails.logger.silence`; the frontend switches to a self-rescheduling `setTimeout` (30 s online / 5 s offline) and skips polls entirely while the browser tab is hidden (`document.hidden`).
+- **FileTree re-renders** — `FileTree` is now wrapped in `React.memo` with a data-only comparator. Event handler references (which are re-created on every `MbeditorApp` render) are intentionally ignored, preventing the entire O(n) tree traversal on every keypress, git poll, or status-bar update.
+- **Search index blocking** — `SearchService.buildIndex` is now deferred to idle time via `requestIdleCallback` (with a 50 ms `setTimeout` fallback for Safari). The main thread is no longer blocked during the synchronous MiniSearch rebuild that runs after every project-tree refresh.
+- **Blame decoration churn** — removed `tab.content` from the blame-decoration `useEffect` dependency array in `EditorPanel`. Decorations are derived from `blameData` (fetched once on toggle); re-applying the same decorations via `deltaDecorations` on every keystroke was unnecessary.
+- **EditorStore slice subscriptions** — added `EditorStore.subscribeToSlice(keys, fn)` so future sub-components can subscribe only to the store keys they care about, avoiding re-renders for unrelated state changes.
+
+## [0.1.2] - 2026-03-24
+
+### Fixed
+- **Webfonts 404** — Font Awesome CSS used relative `../webfonts/` paths that resolved to `/webfonts/fa-*` at the host-app root, where no route existed. The vendor stylesheet is now processed by Sprockets ERB so font URLs are rendered as fingerprint-correct `asset_path` calls, and `.ttf` fallback references (which were never bundled) have been removed.
+- **Git compatibility** — `git branch --show-current` is only available in Git ≥ 2.22. All three call sites have been replaced with `git rev-parse --abbrev-ref HEAD` (works on any modern Git), centralised in `GitService.current_branch`. The git panel no longer reports an error on older Git installations.
+- **Slow initial load** — `workspace_root` (when not explicitly configured) now caches the `git rev-parse --show-toplevel` subprocess result at the class level so the subprocess runs at most once per process. `rubocop_available?`, `haml_lint_available?`, and `git_available?` are similarly cached, keyed by their respective configuration values so tests and reconfiguration still get fresh results.
+
+## [0.1.1] - 2026-03-24
+
+### Changed
+- Bumped the release to avoid republishing the already-pushed 0.1.0 gem and to include the latest GitHub Actions publish workflow updates
+
+## [0.1.0] - 2026-03-20
+
+### Added
+- Mountable Rails engine providing a browser-based code editor (Monaco Editor)
+- File explorer with recursive tree, git status badges, inline create/rename/delete
+- Split-pane editor layout with draggable tabs
+- Ctrl+P quick-open file finder (MiniSearch)
+- Full-text workspace search (`rg` with `grep` fallback)
+- Ctrl+S save with dirty-state tracking
+- RuboCop lint and auto-format for Ruby files
+- Haml-Lint support for `.haml` files
+- Prettier auto-format for JS, JSX, JSON, CSS, SCSS, HTML, and Markdown
+- Markdown live preview
+- Git branch/status panel with ahead/behind counts
+- Real-time collaborative editing via Action Cable + Y.js CRDT
+- Remote cursor and selection display during collaboration
+- Configurable `workspace_root`, `allowed_environments`, `excluded_paths`, and `rubocop_command`
+- Path traversal protection — all file access validated within `workspace_root`
+- File size cap (5 MB) on read
+- CSRF guard on all write endpoints via `X-Mbeditor-Client` request header
+- MIT licence

data/README.md

@@ -0,0 +1,180 @@
+# mbeditor
+
+[![Gem Version](https://badge.fury.io/rb/mbeditor.svg)](https://rubygems.org/gems/mbeditor)
+[![Test](https://github.com/ojnoonan/mbeditor/actions/workflows/test.yml/badge.svg)](https://github.com/ojnoonan/mbeditor/actions/workflows/test.yml)
+
+Mbeditor (Mini Browser Editor) is a mountable Rails engine that adds a browser-based editor UI to a Rails app.
+
+## Features
+- Two-pane tabbed editor with drag-to-move tabs
+- File tree and project search
+- Git panel with working tree changes, unpushed file changes, and branch commit titles
+- Optional RuboCop lint and format endpoints (uses host app RuboCop)
+- Optional test runner with inline failure markers and a dedicated results panel (Minitest and RSpec)
+
+## Security Warning
+Mbeditor exposes read and write access to your Rails application directory over HTTP. It is intended only for local development.
+
+- Never install mbeditor in production or staging.
+- Never run it on infrastructure accessible to untrusted users.
+- Always keep it in the development group in your Gemfile.
+- The engine enforces environment restrictions at runtime, and Gemfile scoping is a second line of defense that keeps the gem out of deploy builds.
+
+## Installation
+1. Add the gem to the host app Gemfile in development only:
+
+```ruby
+gem 'mbeditor', group: :development
+```
+
+2. Install dependencies:
+
+```bash
+bundle install
+```
+
+3. Mount the engine in host app routes:
+
+```ruby
+mount Mbeditor::Engine, at: "/mbeditor"
+```
+
+4. Create `config/initializers/mbeditor.rb` using the configuration options below.
+
+5. Boot your app and open `/mbeditor`.
+
+## Configuration
+
+Use a single initializer to set the engine options you need:
+
+```ruby
+Mbeditor.configure do |config|
+  config.allowed_environments = [:development]
+  # config.workspace_root = Rails.root
+  config.excluded_paths = %w[.git tmp log node_modules .bundle coverage vendor/bundle]
+  config.rubocop_command = "bundle exec rubocop"
+
+  # Optional authentication (runs as a before_action in the engine controllers)
+  # config.authenticate_with = proc { redirect_to login_path unless UserSession.find }
+
+  # Optional test runner (Minitest or RSpec)
+  # config.test_framework = :minitest   # :minitest or :rspec — auto-detected when nil
+  # config.test_command   = "bundle exec rails test"  # defaults to bin/rails test or bundle exec ruby -Itest
+  # config.test_timeout   = 60
+
+  # Optional Redmine integration
+  # config.redmine_enabled = true
+  # config.redmine_url = "https://redmine.example.com/"
+  # config.redmine_api_key = "optional_api_key_override"
+  # config.redmine_ticket_source = :commit  # :commit (scan recent commit messages for #123) or :branch (leading digits of branch name)
+end
+```
+
+Available options:
+
+- `allowed_environments` controls which Rails environments can access the engine. Default: `[:development]`.
+- `authenticate_with` accepts a proc that runs as a `before_action` in all engine controllers. Use it to plug in the host app's authentication. The proc executes via `instance_exec` inside the engine controller, so it has access to `session`, `cookies`, `redirect_to`, and auth library class methods (e.g. Authlogic's `UserSession.find`), but not helper methods defined in the host app's `ApplicationController`. Default: `nil` (no authentication).
+- `workspace_root` sets the root directory exposed by Mbeditor. Default: `Rails.root` from the host app.
+- `excluded_paths` hides files and directories from the tree and path-based operations. Entries without `/` match names anywhere in the workspace path; entries with `/` match relative paths and their descendants. Default: `%w[.git tmp log node_modules .bundle coverage vendor/bundle]`.
+- `rubocop_command` sets the command used for inline Ruby linting and formatting. Default: `"rubocop"`.
+- `test_framework` sets the test framework. `:minitest` or `:rspec`. Auto-detected from file suffix, `.rspec`, or `test`/`spec` directory when `nil`. Default: `nil`.
+- `test_command` overrides the full command used to run a test file. When `nil`, the engine picks `bin/rails test` (Minitest) or `bin/rspec` / `bundle exec rspec` (RSpec). Default: `nil`.
+- `test_timeout` sets the maximum seconds a test run may take before being killed. Default: `60`.
+- `redmine_enabled` enables issue lookup integration. Default: `false`.
+- `redmine_url` sets the Redmine base URL. Required when `redmine_enabled` is `true`.
+- `redmine_api_key` sets the Redmine API key. Required when `redmine_enabled` is `true`.
+- `redmine_ticket_source` controls how the current Redmine ticket is identified. `:commit` scans the 100 most recent branch commits for a `#123` reference in the commit message. `:branch` reads the leading digits from the branch name (e.g. `123-my-feature` → ticket 123). Default: `:commit`.
+
+## Test Runner
+
+The Test button appears in the editor toolbar for any `.rb` file when a `test/` or `spec/` directory exists in the workspace root. Clicking it:
+
+1. Resolves the active source file to its matching test file using standard Rails conventions (`app/models/user.rb` → `test/models/user_test.rb`). If the open file is already a test file, it runs that file directly.
+2. Runs the test file using the configured command in a subprocess with a timeout.
+3. Shows a **Test Results** panel with pass/fail counts, per-test status icons, and error messages.
+4. Optionally overlays inline failure markers in the Monaco editor (separate from RuboCop markers — the two never interfere). Use the marker icon in the panel header to toggle them.
+
+**Framework auto-detection order:**
+1. File suffix: `_spec.rb` → RSpec, `_test.rb` → Minitest
+2. `.rspec` file present → RSpec
+3. `spec/` directory present → RSpec
+4. `test/` directory present → Minitest
+
+**Default commands** (when `test_command` is not set):
+- Minitest: `bin/rails test <file>` if `bin/rails` exists, otherwise `bundle exec ruby -Itest <file>`
+- RSpec: `bin/rspec <file>` if `bin/rspec` exists, otherwise `bundle exec rspec --format json <file>`
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+P` | Quick-open file by name |
+| `Ctrl+S` | Save the active file |
+| `Ctrl+Shift+S` | Save all dirty files |
+| `Alt+Shift+F` | Format the active file |
+| `Ctrl+Shift+G` | Toggle the git panel |
+| `Ctrl+Z` / `Ctrl+Y` | Undo / Redo (Monaco built-in) |
+
+## Host Requirements (Optional)
+The gem keeps host/tooling responsibilities in the host app:
+- `rubocop` and `rubocop-rails` gems (optional, required for Ruby lint/format endpoints)
+- `haml_lint` gem (optional, required for HAML lint — add to your app's Gemfile if needed)
+- `git` installed in environment (for Git panel data)
+- `minitest` or `rspec` in the host app's bundle (required for the test runner)
+
+All lint and test tools are auto-detected at runtime. The engine gracefully disables features if the tools are not available. Neither `rubocop`, `haml_lint`, nor any test framework are runtime dependencies of the gem itself — they are discovered from the host app's environment.
+
+### Syntax Highlighting Support
+Monaco runtime assets are served from the engine route namespace (`/mbeditor/monaco-editor/*` and `/mbeditor/monaco_worker.js`).
+The gem includes syntax highlighting for common Rails and React development file types:
+
+**Web & Template Languages:**
+- **Ruby** (.rb, Gemfile, gemspec, Rakefile)
+- **HTML** 
+- **ERB** (.html.erb, .erb) — Handlebars-based template syntax
+- **HAML** (.haml) — plaintext syntax highlighting (no dedicated HAML grammar in Monaco; haml-lint provides inline error markers when available)
+- **CSS** and **SCSS** stylesheets
+
+**JavaScript & React:**
+- **JavaScript** (.js, .jsx)
+- **TypeScript** for JSX with full language server support
+
+**Configuration & Documentation:**
+- **YAML** (.yml, .yaml)
+- **Markdown** (.md)
+
+These language modules are packaged locally with the gem for true offline operation. No network fallback is needed—all highlighting works without internet connectivity.
+
+## Asset Pipeline
+
+Mbeditor requires **Sprockets** (`sprockets-rails >= 3.4`). Host apps using **Propshaft** as their asset pipeline are not supported — the engine depends on Sprockets directives to load its JavaScript and CSS assets.
+
+## Development
+
+A minimal dummy Rails app is included for local development and testing:
+
+```bash
+cd test/dummy && rails server
+```
+
+Then visit http://localhost:3000/mbeditor.
+
+## Testing
+
+The test suite uses Minitest via the dummy Rails app. Run all tests from the project root:
+
+```bash
+bundle exec rake test
+```
+
+Run a single test file:
+
+```bash
+bundle exec ruby -Itest test/controllers/mbeditor/editors_controller_test.rb
+```
+
+Run a single test by name:
+
+```bash
+bundle exec ruby -Itest test/controllers/mbeditor/editors_controller_test.rb -n test_ping_returns_ok
+```

data/app/assets/javascripts/mbeditor/application.js

@@ -0,0 +1,21 @@
+//= require mbeditor/editor_store
+//= require mbeditor/file_icon
+//= require mbeditor/file_service
+//= require mbeditor/git_service
+//= require mbeditor/search_service
+//= require mbeditor/tab_manager
+//= require mbeditor/editor_plugins
+//= require mbeditor/components/CollapsibleSection
+//= require mbeditor/components/ShortcutHelp
+//= require mbeditor/components/DiffViewer
+//= require mbeditor/components/CombinedDiffViewer
+//= require mbeditor/components/CommitGraph
+//= require mbeditor/components/FileHistoryPanel
+//= require mbeditor/components/TestResultsPanel
+//= require mbeditor/components/CodeReviewPanel
+//= require mbeditor/components/EditorPanel
+//= require mbeditor/components/FileTree
+//= require mbeditor/components/GitPanel
+//= require mbeditor/components/QuickOpenDialog
+//= require mbeditor/components/TabBar
+//= require mbeditor/components/MbeditorApp

data/app/assets/javascripts/mbeditor/components/CodeReviewPanel.js

@@ -0,0 +1,202 @@
+'use strict';
+
+var CodeReviewPanel = function CodeReviewPanel(_ref) {
+  var gitInfo = _ref.gitInfo;
+  var onClose = _ref.onClose;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      redmineIssue = _React$useState2[0],
+      setRedmineIssue = _React$useState2[1];
+
+  var _React$useState3 = React.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      redmineError = _React$useState4[0],
+      setRedmineError = _React$useState4[1];
+
+  var _React$useState5 = React.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      isRedmineLoading = _React$useState6[0],
+      setIsRedmineLoading = _React$useState6[1];
+
+  var branchIdMatch = gitInfo && gitInfo.branch && gitInfo.branch.match(/(?:feature|bug|hotfix|task)\/(?:#)?(\d+)/i);
+  var issueId = branchIdMatch ? branchIdMatch[1] : null;
+
+  React.useEffect(function () {
+    if (!issueId) return;
+    setIsRedmineLoading(true);
+
+    // Call the redmine endpoint. It will 503 if disabled via config.
+    axios.get((window.MBEDITOR_BASE_PATH || '/mbeditor' ) + '/redmine/issue/' + issueId)
+      .then(function (res) {
+        setRedmineIssue(res.data);
+        setIsRedmineLoading(false);
+      })
+      .catch(function (err) {
+        if (err.response && err.response.status !== 503) {
+          setRedmineError(err.response.data.error || 'Failed to load Redmine issue.');
+        }
+        setIsRedmineLoading(false);
+      });
+  }, [issueId]);
+
+  var handleOpenDiff = function handleOpenDiff(path) {
+    var baseSha = gitInfo.upstreamBranch ? gitInfo.upstreamBranch : 'HEAD';
+    TabManager.openDiffTab(path, path.split('/').pop(), baseSha, 'WORKING', null);
+  };
+
+  var commits = gitInfo && gitInfo.branchCommits || [];
+  var unpushed = gitInfo && gitInfo.unpushedFiles || [];
+
+  return React.createElement(
+    'div',
+    { className: 'ide-code-review' },
+    React.createElement(
+      'div',
+      { className: 'ide-code-review-header' },
+      React.createElement(
+        'div',
+        { className: 'ide-code-review-title' },
+        React.createElement('i', { className: 'fas fa-clipboard-check' }),
+        ' Code Review: ',
+        gitInfo ? gitInfo.branch : 'Unknown Branch'
+      ),
+      React.createElement(
+        'button',
+        { className: 'ide-icon-btn', onClick: onClose, title: 'Close Review' },
+        React.createElement('i', { className: 'fas fa-times' })
+      )
+    ),
+    React.createElement(
+      'div',
+      { className: 'ide-code-review-content' },
+
+      // Redmine Issue Section
+      issueId && React.createElement(
+        'div',
+        { className: 'review-section' },
+        React.createElement(
+          'h3',
+          { className: 'review-section-title' },
+          'Redmine Issue #',
+          issueId
+        ),
+        isRedmineLoading ? React.createElement(
+          'div',
+          { className: 'ide-loading-state' },
+          'Loading issue details...'
+        ) : redmineError ? React.createElement(
+          'div',
+          { className: 'ide-error-state' },
+          redmineError
+        ) : redmineIssue ? React.createElement(
+          'div',
+          { className: 'redmine-card' },
+          React.createElement(
+            'div',
+            { className: 'redmine-card-header' },
+            React.createElement('strong', null, redmineIssue.title),
+            React.createElement(
+              'span',
+              { className: 'redmine-badge' },
+              redmineIssue.status
+            )
+          ),
+          React.createElement(
+            'div',
+            { className: 'redmine-meta' },
+            'Assigned to: ',
+            redmineIssue.author
+          ),
+          React.createElement(
+            'div',
+            { className: 'redmine-desc' },
+            redmineIssue.description
+          )
+        ) : null
+      ),
+
+      // Files to Review Section
+      React.createElement(
+        'div',
+        { className: 'review-section' },
+        React.createElement(
+          'h3',
+          { className: 'review-section-title' },
+          'Files Altered in Branch (',
+          unpushed.length,
+          ')'
+        ),
+        unpushed.length === 0 ? React.createElement(
+          'div',
+          { className: 'ide-empty-state' },
+          'No unpushed files to review.'
+        ) : React.createElement(
+          'div',
+          { className: 'git-list' },
+          unpushed.map(function (item) {
+            return React.createElement(
+              'div',
+              { key: item.path, className: 'git-commit-item hoverable', onClick: function () {
+                  return handleOpenDiff(item.path);
+                } },
+              React.createElement(
+                'div',
+                { className: 'git-commit-title' },
+                item.path
+              ),
+              React.createElement(
+                'div',
+                { className: 'git-commit-meta' },
+                'Status: ',
+                item.status,
+                ' \xB7 Click to view full diff against base branch'
+              )
+            );
+          })
+        )
+      ),
+
+      // Commits Section
+      React.createElement(
+        'div',
+        { className: 'review-section' },
+        React.createElement(
+          'h3',
+          { className: 'review-section-title' },
+          'Branch Commits (',
+          commits.length,
+          ')'
+        ),
+        commits.length === 0 ? React.createElement(
+          'div',
+          { className: 'ide-empty-state' },
+          'No local commits.'
+        ) : React.createElement(
+          'div',
+          { className: 'git-list' },
+          commits.map(function (commit) {
+            return React.createElement(
+              'div',
+              { key: commit.hash, className: 'git-commit-item' },
+              React.createElement(
+                'div',
+                { className: 'git-commit-title' },
+                commit.title
+              ),
+              React.createElement(
+                'div',
+                { className: 'git-commit-meta' },
+                commit.hash.slice(0, 7),
+                ' \xB7 ',
+                commit.author
+              )
+            );
+          })
+        )
+      )
+    )
+  );
+};
+
+window.CodeReviewPanel = CodeReviewPanel;

data/app/assets/javascripts/mbeditor/components/CollapsibleSection.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();
+
+var _React = React;
+var useState = _React.useState;
+var useEffect = _React.useEffect;
+
+var CollapsibleSection = function CollapsibleSection(_ref) {
+  var title = _ref.title;
+  var children = _ref.children;
+  var _ref$isCollapsed = _ref.isCollapsed;
+  var isCollapsed = _ref$isCollapsed === undefined ? false : _ref$isCollapsed;
+  var _ref$onToggle = _ref.onToggle;
+  var onToggle = _ref$onToggle === undefined ? null : _ref$onToggle;
+  var _ref$icon = _ref.icon;
+  var icon = _ref$icon === undefined ? null : _ref$icon;
+  var _ref$actions = _ref.actions;
+  var actions = _ref$actions === undefined ? null : _ref$actions;
+
+  var _useState = useState(isCollapsed);
+
+  var _useState2 = _slicedToArray(_useState, 2);
+
+  var localCollapsed = _useState2[0];
+  var setLocalCollapsed = _useState2[1];
+
+  // Sync parent isCollapsed prop to local state when it changes
+  useEffect(function () {
+    setLocalCollapsed(isCollapsed);
+  }, [isCollapsed]);
+
+  var toggleCollapsed = function toggleCollapsed(e) {
+    e.stopPropagation();
+    var newState = !localCollapsed;
+    setLocalCollapsed(newState);
+    if (onToggle) {
+      onToggle(newState);
+    }
+  };
+
+  return React.createElement(
+    "div",
+    { className: "collapsible-section" },
+    React.createElement(
+      "div",
+      { className: "collapsible-header", onClick: toggleCollapsed },
+      React.createElement("i", { className: "collapsible-toggle fas fa-chevron-" + (localCollapsed ? 'right' : 'down') }),
+      icon && React.createElement("i", { className: "collapsible-icon " + icon }),
+      React.createElement(
+        "span",
+        { className: "collapsible-title" },
+        title
+      ),
+      actions && React.createElement(
+        "div",
+        { className: "collapsible-actions", onClick: function (e) {
+            return e.stopPropagation();
+          } },
+        actions
+      )
+    ),
+    !localCollapsed && React.createElement(
+      "div",
+      { className: "collapsible-content" },
+      children
+    )
+  );
+};
+
+window.CollapsibleSection = CollapsibleSection;