trmnl_preview 0.10.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 445d3f901f97e586cf2bfeb3dd8286cf2b02cb3c14d8380f50f0d34d35d7d97f
-  data.tar.gz: e40390fff7ec0ca67127209eacd5de1e096fb800a91148c1068c91aa66748411
+  metadata.gz: e476239f7e0c53801c4a3100d40640de825bda5ad90174893caf919d26c7a8c4
+  data.tar.gz: 66552a72bd4a6e761090064712f8bc01cb84c5cbff4a8a166b14020f6fcf8f79
 SHA512:
-  metadata.gz: 8bd5fe746adb49697c526ff51256ece9febc2172aa5177af97399a45664f6ce2925f019ed73efdc0bb0515f2405abb45583faf27d8046feb706ccbde9c9e8c46
-  data.tar.gz: 22ec5594e73ec2903e5f6d83a0b62699cc7cc4543aca6e0bf8f8b5f376dd3418be4ba2b6d2c7d2ef7af63cedb6c451612333a00f5e6dc66dbb60f6f76383cf27
+  metadata.gz: 54e5c7f1044484fb55f26881a8c853455fdf0a3149ad9567633dec55fc2004c36645ab84c00589984cb82192298fd0a8ab40040ed5c57442058595d532102508
+  data.tar.gz: dea4cfcecfeb3fabf9f0df522cc23bffbf90dc1638f03406d17d1022ae777f2846fe9fd7acd1ced2b7c379c2bd6e3d79d665e7b94e80864a64698c3c617ea4ef

data/CHANGELOG.md

@@ -1,6 +1,16 @@
 
 # Changelog
 
+## 0.12.0
+
+- `required_ruby_version` is now `>= 4.0`, matching the Ruby version trmnlp actually needs. It has understated the real floor since 0.4.0: both `xdg` (Ruby 4.0 in the 10.x series pinned since 0.8.0) and `trmnl-liquid` (Ruby 4.0 since 0.5.0) require more than the gemspec claimed. RubyGems resolves against the declared value, so `gem install trmnl_preview` on an older Ruby did not fail. It quietly walked backwards to the newest version whose dependency tree resolved, reporting "Successfully installed" for a build up to twenty months old. On Ruby 3.4 that was 0.7.1, and on Ruby 3.3 and below it was 0.3.2, which predates the Thor CLI and offers only `serve`, `build` and `version`. Asking for the current version explicitly (`gem install trmnl_preview -v 0.11.0`) crashed RubyGems inside its own conflict reporting rather than explaining the problem. Installing on an unsupported Ruby now stops with "requires Ruby version >= 4.0".
+- Dependencies updated to their current releases. `trmnl-liquid` moves from 0.7.0 to 0.8.2, the only pin that excluded a newer release; every other dependency already resolved to its newest version on a fresh install. The two trmnl-liquid versions ship identical code and identical dependencies, so rendering is unchanged.
+
+## 0.11.0
+
+- `framework_version:` now resolves against the release manifest published by the design system, not only the version list shipped inside the gem, so a framework version released after your trmnlp install can be pinned without upgrading. The manifest is read once per run with a 2 second timeout. If the request fails, or the response is not a version list, the copy bundled in the gem is used and rendering continues. That bundled copy is refreshed here too: `latest` moves from 3.1.1 to 3.2.0.
+- `rake framework:sync` reads the published manifest by default. Pass a local design-system checkout (`rake framework:sync[/path/to/repo]`) for the previous behaviour.
+
 ## 0.10.0
 
 - Added support for the `description` plugin setting, an optional one-line summary of the plugin. `trmnlp init` scaffolds the key in `src/settings.yml`, `trmnlp lint` reports descriptions longer than 35 characters (the hosted service's limit), and `trmnlp list` shows a DESCRIPTION column when any plugin has one. Only the length is checked. Storing the value needs the matching hosted service release; until then `trmnlp push` drops it, because it rewrites the local `settings.yml` from the server's response.

data/README.md

@@ -13,6 +13,8 @@ The server watches the filesystem for changes to the Liquid templates, seamlessl
 
 ## Quick Start
 
+trmnlp requires Ruby 4.0 or newer. Check with `ruby -v` before installing.
+
 ```sh
 gem install trmnl_preview     # install
 trmnlp init my_plugin         # scaffold a project
@@ -427,7 +429,7 @@ A complete worked example lives at [`examples/hn-stories/`](examples/hn-stories/
 
 The `settings.yml` file is part of the plugin definition, and is uploaded and downloaded by `trmnlp push` / `pull`.
 
-`framework_version:` pins the [TRMNL Design System](https://trmnl.com/framework) version this plugin renders against — `latest` (the default) tracks the newest release, or set a specific version for reproducibility. It lives here rather than in `.trmnlp.yml` so the value round-trips with the hosted plugin service.
+`framework_version:` pins the [TRMNL Design System](https://trmnl.com/framework) version this plugin renders against — `latest` (the default) tracks the newest release, or set a specific version for reproducibility. It lives here rather than in `.trmnlp.yml` so the value round-trips with the hosted plugin service. The list of known versions is read from the [design system's published manifest](https://github.com/usetrmnl/trmnl-framework) once per run; if that request fails, the copy bundled in the gem is used. Because either list can lag a release, any well-formed version number is accepted — a version the manifest has not heard of still renders against that version's assets rather than failing — `trmnlp serve` and `build` note it with a warning, in case it was a typo.
 
 `description:` is an optional one-line summary of the plugin, up to 35 characters. `trmnlp lint` reports anything longer, and `trmnlp list` shows it next to each plugin name.
 

data/db/data/framework_versions.yml

@@ -1,6 +1,6 @@
 # Mirrored from the TRMNL design-system source.
 # Refresh with `rake framework:sync` — do not edit manually.
-latest: 3.1.1
+latest: 3.2.0
 versions:
 - number: 0.0.1
   released_at: '2024-06-22'
@@ -70,3 +70,19 @@ versions:
   released_at: '2026-04-29'
 - number: 3.1.1
   released_at: '2026-05-01'
+- number: 3.1.2
+  released_at: '2026-07-09'
+- number: 3.1.3
+  released_at: '2026-07-14'
+- number: 3.1.4
+  released_at: '2026-07-15'
+- number: 3.1.5
+  released_at: '2026-07-16'
+- number: 3.1.6
+  released_at: '2026-07-17'
+- number: 3.1.7
+  released_at: '2026-07-18'
+- number: 3.1.8
+  released_at: '2026-07-23'
+- number: 3.2.0
+  released_at: '2026-08-05'

data/lib/trmnlp/app.rb

@@ -3,8 +3,10 @@
 require 'securerandom'
 require 'sinatra'
 require 'sinatra/base'
+require 'yaml'
 
 require_relative 'context'
+require_relative 'errors'
 require_relative 'screen_generator'
 require_relative 'screenshot'
 
@@ -127,6 +129,46 @@ module TRMNLP
       redirect back
     end
 
+    # API: current project config (custom field values) plus the plugin's
+    # field definitions, so the editor can render plugin-declared fields.
+    get '/api/config' do
+      content_type :json
+
+      # author_bio is informational-only — not a data field a user can set.
+      plugin_fields = @context.config.plugin.custom_field_definitions.reject do |field|
+        field['field_type'] == 'author_bio'
+      end
+
+      {
+        custom_fields: @context.config.project.custom_fields,
+        plugin_fields: plugin_fields
+      }.to_json
+    end
+
+    # API: update the project config's custom_fields in .trmnlp.yml
+    post '/api/config' do
+      content_type :json
+
+      custom_fields = validate_custom_fields!(request.body.read)
+
+      config_path = @context.paths.trmnlp_config
+      config = read_project_config(config_path)
+      config['custom_fields'] = custom_fields
+      config_path.write(YAML.dump(config))
+
+      # Reload config and re-poll so URLs/headers pick up the new values
+      @context.config.project.reload!
+      @poller.poll_data
+
+      { success: true, custom_fields: @context.config.project.custom_fields }.to_json
+    rescue InvalidCustomFields => e
+      status 400
+      { error: e.message }.to_json
+    rescue StandardError => e
+      status 500
+      { error: e.message }.to_json
+    end
+
     get '/oauth/connect' do
       halt 400, 'OAuth is not configured. Add the oauth_* keys to src/settings.yml.' unless @oauth_session.configured?
 
@@ -189,6 +231,40 @@ module TRMNLP
 
     private
 
+    # Validates the incoming custom-fields payload, raising InvalidCustomFields
+    # (reported to the user as a 400) on bad input. JSON.parse only yields
+    # strings, numbers, booleans, nil, arrays, and hashes — all of which
+    # Config::Project#custom_fields can stringify — so the meaningful checks
+    # are the payload shape and the field names.
+    def validate_custom_fields!(body)
+      custom_fields = parse_json_object(body).fetch('custom_fields', {})
+
+      unless custom_fields.is_a?(Hash)
+        raise InvalidCustomFields, 'custom_fields must be a JSON object of field name/value pairs'
+      end
+
+      raise InvalidCustomFields, 'custom field names cannot be blank' if custom_fields.keys.any? { |k| k.strip.empty? }
+
+      custom_fields
+    end
+
+    def parse_json_object(body)
+      json = JSON.parse(body)
+      raise InvalidCustomFields, 'request body must be a JSON object' unless json.is_a?(Hash)
+
+      json
+    rescue JSON::ParserError => e
+      raise InvalidCustomFields, "request body is not valid JSON: #{e.message}"
+    end
+
+    # Mirrors Config::Project#reload! so a round-trip through the editor
+    # preserves whatever else lives in .trmnlp.yml.
+    def read_project_config(config_path)
+      return {} unless config_path.exist?
+
+      YAML.safe_load_file(config_path, permitted_classes: [Date, Time]) || {}
+    end
+
     # On timeout (queue idle), a colon-prefixed SSE comment line both
     # keeps proxies awake and surfaces a dead client via the next
     # io.write — the route's outer rescue then cleans up.

data/lib/trmnlp/commands/base.rb

@@ -54,6 +54,15 @@ module TRMNLP
         end
       end
 
+      def report_framework_version_warning
+        framework = config.plugin.framework_version
+        return if framework.known?
+
+        warning = "warning: settings.yml framework_version #{framework} — not in the design " \
+                  "system's published version list; its assets may not exist"
+        reporter.info(reporter.yellow(warning))
+      end
+
       def prompt(message)
         print message
         $stdin.gets.chomp

data/lib/trmnlp/commands/build.rb

@@ -16,6 +16,7 @@ module TRMNLP
       def call
         context.validate!
         report_form_field_warnings
+        report_framework_version_warning
         context.poller.poll_data
         context.paths.create_build_dir
 

data/lib/trmnlp/commands/serve.rb

@@ -13,6 +13,7 @@ module TRMNLP
       def call
         context.validate!
         report_form_field_warnings
+        report_framework_version_warning
 
         # Must come AFTER parsing options
         require_relative '../app'

data/lib/trmnlp/config/plugin.rb

@@ -85,8 +85,9 @@ module TRMNLP
       # Lives on the plugin (settings.yml), like serverless_language,
       # because production stores it on the plugin_setting record — so it
       # round-trips through `trmnlp push` / `pull`. Accepts 'latest'
-      # (default), a pinned version, or nil (treated as latest). See
-      # db/data/framework_versions.yml for the supported set.
+      # (default), any well-formed version number, or nil (treated as
+      # latest) — see FrameworkVersion for why a release the bundled
+      # db/data/framework_versions.yml has not heard of is still allowed.
       def framework_version
         FrameworkVersion.new(@config['framework_version'], asset_host: project_config.asset_host)
       rescue ArgumentError => e

data/lib/trmnlp/config/project.rb

@@ -85,8 +85,8 @@ module TRMNLP
       # behavior.
       def stringify_field_value(value)
         case value
-        when Array then value.map(&:to_s)
-        when Hash then value.transform_values { |v| stringify_field_value(v) }
+        when Array then value.map { |item| stringify_field_value(item) }
+        when Hash then value.transform_values { |item| stringify_field_value(item) }
         else value.to_s
         end
       end

data/lib/trmnlp/errors.rb

@@ -11,5 +11,6 @@ module TRMNLP
   class InvalidApiKey       < Error; end
   class AuthenticationFailed < Error; end
   class InvalidConfig       < Error; end
+  class InvalidCustomFields < Error; end
   class RenderError         < Error; end
 end

data/lib/trmnlp/framework_version.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require 'date'
+require 'faraday'
 require 'yaml'
 
 module TRMNLP
@@ -11,10 +13,31 @@ module TRMNLP
 
     DEFAULT_ASSET_HOST = 'https://trmnl.com'
     DATA_PATH = File.expand_path('../../db/data/framework_versions.yml', __dir__)
+    # DATA_PATH holds a copy of this file, refreshed by `rake framework:sync`.
+    MANIFEST_URL = 'https://raw.githubusercontent.com/usetrmnl/trmnl-framework/main/db/data/framework_versions.yml'
+    MANIFEST_TIMEOUT = 2
 
     attr_reader :number
 
-    def self.config = @config ||= YAML.load_file(DATA_PATH).freeze
+    def self.config = @config ||= (remote_config || YAML.load_file(DATA_PATH)).freeze
+
+    # Answers nil on any failure, so rendering never depends on the network.
+    # The shape check rejects error pages, which are also valid YAML.
+    def self.remote_config
+      response = Faraday.get(MANIFEST_URL) do |request|
+        request.options.open_timeout = MANIFEST_TIMEOUT
+        request.options.timeout = MANIFEST_TIMEOUT
+      end
+      return unless response.success?
+
+      # Release dates are quoted today, but the manifest is generated
+      # upstream and an unquoted date would otherwise be rejected here.
+      manifest = YAML.safe_load(response.body, permitted_classes: [Date])
+      manifest if manifest.is_a?(Hash) && manifest.key?('latest') && manifest.key?('versions')
+    rescue StandardError
+      nil
+    end
+    private_class_method :remote_config
 
     def self.version_numbers = config.fetch('versions').map { |v| v['number'] }.freeze
 
@@ -28,22 +51,27 @@ module TRMNLP
         newest_first.map { |number| { "v#{number}" => number } }
     end
 
+    # A release the manifest has not heard of is still served by the CDN, and
+    # the manifest in hand may simply be stale — the bundled copy ages with
+    # the gem, and it is what we fall back to whenever the published one is
+    # unreachable. So any well-formed number is accepted and only nonsense is
+    # rejected; #known? reports whether the manifest lists it.
     def initialize(number, asset_host: DEFAULT_ASSET_HOST)
       @asset_host = asset_host
 
       if number.nil? || number == 'latest'
         @number = self.class.config.fetch('latest')
         @pinned = false
-      elsif self.class.version_numbers.include?(number)
-        @number = number
-        @pinned = true
       else
-        raise ArgumentError, "unknown framework version: #{number}"
+        @number = validated(number)
+        @pinned = true
       end
     end
 
     def pinned? = @pinned
 
+    def known? = self.class.version_numbers.include?(number)
+
     # Both a pinned and an unpinned ("latest") version resolve to a
     # concrete release here — #number is never the literal "latest" — so a
     # local preview renders the same bundle as the hosted service instead
@@ -63,5 +91,18 @@ module TRMNLP
     def as_json(*) = number
 
     def to_s = number
+
+    private
+
+    # Gem::Version is deliberately the only gate: it accepts every number the
+    # framework has shipped, and rejects the path traversal or stray markup an
+    # unvalidated value would otherwise splice into the asset URLs.
+    # Answers a String so an unquoted `framework_version: 3.1` in settings.yml
+    # — which YAML hands over as a Float — still compares against the manifest.
+    def validated(number)
+      Gem::Version.correct?(number) or raise ArgumentError, "invalid framework version: #{number}"
+
+      number.to_s
+    end
   end
 end

data/lib/trmnlp/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module TRMNLP
-  VERSION = '0.10.0'
+  VERSION = '0.12.0'
 end

data/trmnl_preview.gemspec

@@ -12,7 +12,7 @@ Gem::Specification.new do |spec|
   spec.description = 'Automatically rebuild and preview TRNML plugins in multiple views'
   spec.homepage = 'https://github.com/usetrmnl/trmnlp'
   spec.license = 'MIT'
-  spec.required_ruby_version = '>= 3.4'
+  spec.required_ruby_version = '>= 4.0'
 
   spec.metadata['allowed_push_host'] = 'https://rubygems.org'
 
@@ -47,7 +47,7 @@ Gem::Specification.new do |spec|
 
   # HTML rendering
   spec.add_dependency 'activesupport', '~> 8.0'
-  spec.add_dependency 'trmnl-liquid', '~> 0.7.0'
+  spec.add_dependency 'trmnl-liquid', '~> 0.8.2'
 
   # PNG rendering
   # spec.add_dependency 'puppeteer-ruby', '~> 0.45.6'

data/web/public/index.css

@@ -115,6 +115,108 @@ pre > code {
 .payload-size--warn { color: #bf8700; opacity: 1; }
 .payload-size--over { color: #d1242f; opacity: 1; }
 
+/* Custom Fields Editor */
+.custom-fields-editor {
+  margin: 1em 0;
+  max-width: 950px;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5em;
+  background: var(--bg-color);
+}
+
+.custom-fields-editor summary {
+  padding: 0.75em 1em;
+  cursor: pointer;
+  font-weight: bold;
+}
+
+/* Border only when expanded, so a collapsed editor has no doubled edge. */
+.custom-fields-editor[open] summary {
+  border-bottom: 1px solid var(--border-color);
+}
+
+#custom-fields-container {
+  padding: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.custom-field-row {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.custom-field-row input {
+  padding: 0.5em;
+  border: 1px solid var(--border-color);
+  border-radius: 0.25em;
+  background: var(--bg-color);
+  color: var(--text-color);
+}
+
+.custom-field-row input[name="key"] {
+  width: 150px;
+}
+
+.custom-field-row input[name="key"].required-field {
+  background: #3b82f620;
+  border-color: #3b82f6;
+  font-weight: bold;
+}
+
+.custom-field-row input[name="value"] {
+  flex: 1;
+}
+
+.custom-field-row select[name="value"],
+.custom-field-select {
+  flex: 1;
+  padding: 0.5em;
+  border: 1px solid var(--border-color);
+  border-radius: 0.25em;
+  background: var(--bg-color);
+  color: var(--text-color);
+  font: inherit;
+}
+
+.custom-field-row .btn-remove {
+  padding: 0.3em 0.6em;
+  background: #ef4444;
+  color: white;
+  border: none;
+}
+
+.custom-fields-actions {
+  padding: 1em;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  gap: 0.5em;
+  justify-content: flex-end;
+}
+
+/* Matches the transform-error banner styling used above the preview. */
+.custom-fields-error {
+  margin: 0 1em 1em;
+  padding: 0.5em 0.75em;
+  background: #fee;
+  border: 1px solid #c33;
+  border-radius: 4px;
+  color: #900;
+  white-space: pre-wrap;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+  border-color: #2563eb;
+}
+
+.btn-primary:hover {
+  filter: brightness(110%);
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #191b21;

data/web/public/index.js

@@ -59,6 +59,200 @@ trmnlp.refreshUserData = async function (state) {
   }
 };
 
+// Load custom fields from API and populate editor
+trmnlp.loadCustomFields = async function () {
+  const container = document.getElementById('custom-fields-container');
+  container.innerHTML = ''; // Clear existing fields
+
+  let config;
+  try {
+    const response = await fetch('/api/config');
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    config = await response.json();
+  } catch (err) {
+    trmnlp.showCustomFieldsError(`Failed to load custom fields: ${err.message}`);
+    return;
+  }
+
+  trmnlp.clearCustomFieldsError();
+  const customFields = config.custom_fields || {};
+  const pluginFields = config.plugin_fields || [];
+
+  // Create a set of existing field keys
+  const existingKeys = new Set(Object.keys(customFields));
+
+  // First, add rows for plugin-defined fields (with or without values)
+  pluginFields.forEach(field => {
+    const keyname = field.keyname;
+    const value = customFields[keyname] || field.default || '';
+
+    if (field.field_type === 'select' && field.options) {
+      // Render as dropdown
+      trmnlp.addSelectFieldRow(container, keyname, value, field.options);
+    } else {
+      // Render as text input
+      const placeholder = field.description || 'Value';
+      trmnlp.addFieldRowWithHint(container, keyname, value, placeholder, true);
+    }
+    existingKeys.delete(keyname);
+  });
+
+  // Then add any custom fields that aren't in plugin definition
+  existingKeys.forEach(key => {
+    trmnlp.addFieldRow(container, key, customFields[key]);
+  });
+};
+
+// Custom fields editor functionality
+trmnlp.initCustomFieldsEditor = async function () {
+  const container = document.getElementById('custom-fields-container');
+  const addBtn = document.getElementById('add-field-btn');
+  const saveBtn = document.getElementById('save-fields-btn');
+
+  await trmnlp.loadCustomFields();
+
+  // Add field button
+  addBtn.addEventListener('click', () => {
+    trmnlp.addFieldRow(container, '', '');
+  });
+
+  // Save button
+  saveBtn.addEventListener('click', async () => {
+    const fields = trmnlp.collectCustomFields(container);
+    if (!fields) return; // validation error already shown
+
+    saveBtn.disabled = true;
+    saveBtn.textContent = 'Saving...';
+
+    try {
+      const response = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ custom_fields: fields })
+      });
+
+      let result = {};
+      try {
+        result = await response.json();
+      } catch {
+        // non-JSON response body; fall through to the status check
+      }
+
+      if (!response.ok || result.error) {
+        trmnlp.showCustomFieldsError(`Error saving: ${result.error || `HTTP ${response.status}`}`);
+      } else {
+        trmnlp.clearCustomFieldsError();
+        // Refresh the preview and user data display
+        trmnlp.fetchPreview();
+        trmnlp.refreshUserData(trmnlp.picker?.state);
+      }
+    } catch (err) {
+      trmnlp.showCustomFieldsError(`Error saving: ${err.message}`);
+    } finally {
+      saveBtn.disabled = false;
+      saveBtn.textContent = 'Save & Reload';
+    }
+  });
+};
+
+// Gathers field rows into an object, validating before anything is sent to
+// the server. Returns null (with the error banner shown) on invalid input.
+trmnlp.collectCustomFields = function (container) {
+  const rows = container.querySelectorAll('.custom-field-row');
+  // Null prototype so field names like "constructor" behave as plain keys.
+  const fields = Object.create(null);
+  const problems = [];
+
+  rows.forEach((row, index) => {
+    const key = row.querySelector('input[name="key"]').value.trim();
+    // Value can be either input or select
+    const valueInput = row.querySelector('input[name="value"]');
+    const valueSelect = row.querySelector('select[name="value"]');
+    const value = valueInput ? valueInput.value : (valueSelect ? valueSelect.value : '');
+
+    if (!key) {
+      if (value.trim()) problems.push(`row ${index + 1} has a value but no field name`);
+      return;
+    }
+    if (key in fields) {
+      problems.push(`duplicate field name "${key}"`);
+      return;
+    }
+    fields[key] = value;
+  });
+
+  if (problems.length > 0) {
+    trmnlp.showCustomFieldsError(`Not saved: ${problems.join('; ')}`);
+    return null;
+  }
+
+  trmnlp.clearCustomFieldsError();
+  return fields;
+};
+
+trmnlp.showCustomFieldsError = function (message) {
+  const banner = document.getElementById('custom-fields-error');
+  banner.textContent = message;
+  banner.hidden = false;
+};
+
+trmnlp.clearCustomFieldsError = function () {
+  const banner = document.getElementById('custom-fields-error');
+  banner.textContent = '';
+  banner.hidden = true;
+};
+
+trmnlp.addFieldRow = function (container, key, value) {
+  trmnlp.addFieldRowWithHint(container, key, value, 'Value', false);
+};
+
+trmnlp.addSelectFieldRow = function (container, key, selectedValue, options) {
+  const row = document.createElement('div');
+  row.className = 'custom-field-row';
+
+  const optionsHtml = options.map(opt => {
+    const selected = String(opt) === String(selectedValue) ? 'selected' : '';
+    return `<option value="${trmnlp.escapeHtml(String(opt))}" ${selected}>${trmnlp.escapeHtml(String(opt))}</option>`;
+  }).join('');
+
+  row.innerHTML = `
+    <input type="text" name="key" placeholder="Field name" value="${trmnlp.escapeHtml(key)}" readonly class="required-field">
+    <select name="value" class="custom-field-select">
+      ${optionsHtml}
+    </select>
+    <button type="button" class="btn btn-remove" disabled>×</button>
+  `;
+
+  container.appendChild(row);
+};
+
+trmnlp.addFieldRowWithHint = function (container, key, value, placeholder, isRequired) {
+  const row = document.createElement('div');
+  row.className = 'custom-field-row';
+  const keyReadonly = isRequired ? 'readonly' : '';
+  const keyClass = isRequired ? 'required-field' : '';
+  row.innerHTML = `
+    <input type="text" name="key" placeholder="Field name" value="${trmnlp.escapeHtml(key)}" ${keyReadonly} class="${keyClass}">
+    <input type="text" name="value" placeholder="${trmnlp.escapeHtml(placeholder)}" value="${trmnlp.escapeHtml(value)}">
+    <button type="button" class="btn btn-remove" ${isRequired ? 'disabled' : ''}>×</button>
+  `;
+
+  const removeBtn = row.querySelector('.btn-remove');
+  if (!isRequired) {
+    removeBtn.addEventListener('click', () => {
+      row.remove();
+    });
+  }
+
+  container.appendChild(row);
+};
+
+trmnlp.escapeHtml = function (text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+};
+
 document.addEventListener("DOMContentLoaded", async function () {
   trmnlp.view = document.querySelector("meta[name='trmnl-view']").content;
   trmnlp.iframe = document.querySelector("iframe");
@@ -93,4 +287,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   });
 
   trmnlp.picker = await TRMNLPicker.create('picker-form', { localStorageKey: 'trmnlp-picker' });
+
+  // Initialize custom fields editor
+  await trmnlp.initCustomFieldsEditor();
 });

data/web/views/index.erb

@@ -72,6 +72,17 @@
 
         <iframe style="width: 800px; height: 480px; border: 1px solid black; background: white;">Rendering…</iframe>
 
+        <!-- Custom Fields Editor -->
+        <details id="custom-fields-editor" class="custom-fields-editor">
+            <summary>Custom Fields</summary>
+            <div id="custom-fields-container"></div>
+            <div id="custom-fields-error" class="custom-fields-error" hidden></div>
+            <div class="custom-fields-actions">
+                <button class="btn" id="add-field-btn">+ Add Field</button>
+                <button class="btn btn-primary" id="save-fields-btn">Save & Reload</button>
+            </div>
+        </details>
+
         <div class="payload-size <%= payload_size_class(@payload_size) %>">Payload: <%= format_bytes(@payload_size) %></div>
         <pre id="user-data"><code><%= h @user_data %></code></pre>
     </main>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trmnl_preview
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.12.0
 platform: ruby
 authors:
 - Rockwell Schrock
@@ -71,14 +71,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.7.0
+        version: 0.8.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.7.0
+        version: 0.8.2
 - !ruby/object:Gem::Dependency
   name: mini_magick
   requirement: !ruby/object:Gem::Requirement
@@ -376,14 +376,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '3.4'
+      version: '4.0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.10
+rubygems_version: 4.0.16
 specification_version: 4
 summary: Local web server to preview TRMNL plugins
 test_files: []