lookbook 1.0.0.rc.2 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03c7bc590a271bc1db49e9636c5c6a274ec45f9a449aaf811695e74c4de52aaa
-  data.tar.gz: a23446857053cf0789adf7ac0644ea3fe8968a8a7fee7c25e2f688ff5e15b7b5
+  metadata.gz: ff67ef3eb53b5a6605d46fdf186f859709112f09debfc72bab1a3f766475ea7b
+  data.tar.gz: c592dfa672ad57776c5c9ffb38dafc82998c51ca68c02fcfe7b7bc980e519ccd
 SHA512:
-  metadata.gz: b1eac6af6a1e73ef6c44aa637ca1552bba495d3f07a402ff2bb60d79606c391aaa4a54eeed8e44896273007cb9261cffe57d40b135951b94ea57919be9581d44
-  data.tar.gz: 70fd860db9aa315acd81b182188f3b7f53a38098f33a57bd7b4d8839437de932bc93462a5d00acd30195790157f8af70e7f8313778663bf784ffb3d8fb9437a1
+  metadata.gz: 7b0fc0d0a54945f24a543d18b44e1734453e166286823e85f17ed9f5d51235e3e4cd9733287089dc76c58617047fd4835a1051c5dbe8836c05fc8b1d7c36ec3f
+  data.tar.gz: 551d4744fb346cb835c53e26167f4a6e2fa71b612d2b212a7968b802775ac91655e15ac4f1ae4faf3d2fada0a95d7f7e1b7ecd581adb33b0ac49941cf508ccc1

data/README.md

@@ -1,83 +1,52 @@
-# Lookbook v1.0
+# Lookbook
 
 <div>
-<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook?include_prereleases" alt="Gem version"></a>
-<img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=v1.0-beta" alt="CI status">
+<a href="https://rubygems.org/gems/lookbook"><img src="https://img.shields.io/gem/v/lookbook" alt="Gem version"></a>
+<a href="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml"><img src="https://github.com/allmarkedup/lookbook/actions/workflows/ci.yml/badge.svg?branch=main" alt="CI status"></a>
 </div>
 <br>
 
-> **This is the Lookbook v1.0 BETA development branch.**<br>
->_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
+A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
 
+## Documentation
 
-## Get started
+**Lookbook (v1.x)** documentation: **[https://lookbook.build](https://lookbook.build)**
 
-If you are already using Lookbook in your project, just update the Lookbook gem to the latest beta release and then head over to the [beta documentation site](https://beta.lookbook.build/) to read more about the new features.
+> _Looking for v0.9.x docs? [Head over here](https://github.com/allmarkedup/lookbook/tree/0.9.x)._
 
-```ruby
-gem "lookbook", ">= 1.0.0.beta.8"
-```
 
-If you are **new to Lookbook** then check out the <a href="https://beta.lookbook.build/guide/quick-start/">v1.0 quick start guide</a> for more detailed instructions on installing Lookbook in your project
+## Demo
 
+**Online Demo:** [https://lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook) 
 
-<h4>Useful Resources</h4>
+[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
 
-* 👉 <a href="https://beta.lookbook.build/">v1.0 docs</a>
-* 👉 <a href="https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook">v1.0 demo app</a> <em>(The repo for the demo <a href="https://github.com/allmarkedup/lookbook-demo/tree/v1.0-beta">is here</a> if you want to dig in further)</em>
 
+## Development
 
-
-## Changes and new features in v1.0
-
-Lookbook v1.0 includes a completely re-written UI, many under-the hood improvements and a some exciting new customisation options.
-
-### Frontend changes:
-
-* Completely re-written UI - now built with ViewComponents
-* New [UI themes and customisation options](https://beta.lookbook.build/guide/themes/)
-* Improved small-screen/mobile view
-* Debug menu
-* ...and many other small visual and usability improvements
-
-### New options for extending Lookbook:
-
-* Define [custom tags](https://beta.lookbook.build/guide/extend/tags/) for preview file annotations
-* Create [your own tab panels](https://beta.lookbook.build/guide/extend/panels/) - with complete control over content/layout and access to all Lookbook data
-* Use [lifecycle hooks](https://beta.lookbook.build/guide/extend/hooks/) to run your own code when Lookbook starts up, when files change or at shutdown
-
-### Other changes
-
-* 'Workbench' app for developing Lookbook's UI components in Lookbook
-* New Rspec-based test suite and dummy app
-* All new documentation site built using [Bridgetown](https://www.bridgetownrb.com/)
-
-
-[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
-
-## Workbench
-
-As of this release, Lookbook's UI is itself built using ViewComponent components. To help with development it is possible to preview these components (in a Lookbook instance!) by running the included 'Workbench" app, as follows:
+Lookbook's UI is itself built using ViewComponents. To preview these components in a Lookbook instance you can run the included `workbench` app:
 
 1. Clone this repo
 2. Install dependencies: `bundle install & npm install`
-3. Start the Workbench: `foreman start`
-4. Open http://localhost:4545 in your browser to view the Workbench
+3. Start the app: `bin/workbench`
+4. Visit http://localhost:4545/lookbook to view the Lookbook instance
+
+The `workbench` app will be started in development mode and any changes to Lookbook's views or assets will immediately be reflected in the UI.
 
-This will start the Workbench app in development mode and any changes to Lookbooks views or assets will immediately be visible in the UI.
+### Docs site
 
+The [Lookbook docs site](https://lookbook.build) is built using [Bridgetown](https://www.bridgetownrb.com/) and the source files can be found in the `./docs` directory.
 
-## Running tests
+To see a local version of the site run `bin/docs` from the root of this repo and then visit http://localhost:4000 in your browser.
 
-The test suite is in the process of being completely overhauled.
+### Testing
 
-Tests are now written using RSpec and the system now uses [Combustion](https://github.com/pat/combustion) under the hood.
+Lookbook uses RSpec for testing.
 
-- Tests can be run using the `rake lookbook:test` or `bundle exec rspec` commands.
-- The dummy app that the tests are being run against can be viewed by running the `rake lookbook:test:serve` command and then browsing to http://localhost:9292/lookbook
+Tests can be run using the `rake spec` or `bundle exec rspec` commands.
 
+The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
 
----
 
 ## License
 

data/app/components/lookbook/base_component.rb

@@ -35,7 +35,7 @@ module Lookbook
       alpine_component_name = x_data || @html_attrs&.dig(:"x-data") || alpine_component
       if alpine_component_name.present?
         args = Array.wrap(alpine_data)
-        args.any? ? "#{alpine_component_name}(#{safe_join(args).gsub(""", "'").tr("\"", "'")})" : alpine_component_name
+        args.any? ? "#{alpine_component_name}(#{safe_join(args)})" : alpine_component_name
       end
     end
   end

data/app/components/lookbook/header/component.html.erb

@@ -46,11 +46,11 @@
                   <span class="opacity-70 mr-1">Lookbook</span>
                   <span class="mr-6">v<%= Lookbook::VERSION %></span>
                   <div class="flex items-center space-x-2">
-                    <!-- a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Documentation">
-                      <%= icon  :book, size: 3 %>
-                    </a -->
+                    <a href="https://lookbook.build/guide" target="_blank" class="ml-auto opacity-70" title="Documentation">
+                      <%= icon :book, size: 3 %>
+                    </a>
                     <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
-                      <%= icon  :github, size: 3 %>
+                      <%= icon :github, size: 3 %>
                     </a>
                   </div>
                 </div>

data/app/components/lookbook/inspector_panel/component.rb

@@ -25,9 +25,8 @@ module Lookbook
             css_parser.each_selector do |selector, declarations, specificity|
               @panel_styles += "##{id} #{selector} { #{declarations} }\n"
             end
-            style_tag.unlink
           end
-          @panel_html = panel_dom.to_html.html_safe
+          @panel_html = content.gsub(/<style(?:\s[^>]*)?>.*<\/style>/, "").html_safe
         end
       end
       @panel_html ||= content

data/app/components/lookbook/params_editor/field/component.html.erb

@@ -1,7 +1,7 @@
 <%= render_component_tag class: "px-4 py-3" do %>
   <div class="flex items-start max-w-[800px]" :class="isNarrowLayout && '!block'">
     <label
-      for="param-<%= @name %>"
+      for="param-<%= name %>"
       class="block font-bold cursor-pointer flex-none py-2 w-[140px] truncate pr-2">
       <%= label %>
     </label>
@@ -27,12 +27,12 @@
         <select
           class="form-input"
           x-bind="bindings.input || {}"
-          x-model="value">
+          x-model="value"
+          name="<%= name %>">
           <%= options_for_select(@options || [], value) %>
         </select>
 
       <% elsif field_type == "toggle" %>
-
         <button type="button"
           class="<%= value == true ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle" %> relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-input-border-focus"
           role="switch"
@@ -42,7 +42,6 @@
             class="<%= value == true ? "translate-x-5" : "translate-x-0" %>  pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200"
           ></span>
         </button>
-
       <% end %>
     </div>
   </div>

data/app/components/lookbook/params_editor/field/component.rb

@@ -1,5 +1,7 @@
 module Lookbook
   class ParamsEditor::Field::Component < Lookbook::BaseComponent
+    attr_reader :name
+
     def initialize(input:, name:, default: nil, value: nil, input_type: nil, type: nil, options: nil, **html_attrs)
       @input = input
       @name = name
@@ -12,7 +14,7 @@ module Lookbook
     end
 
     def label
-      @name.titleize
+      name.titleize
     end
 
     def value
@@ -31,8 +33,8 @@ module Lookbook
     protected
 
     def alpine_data
-      escaped_value = value.is_a?(String) ? helpers.j(value) : value
-      "{name: '#{@name}', value: '#{escaped_value}'}"
+      escaped_value = helpers.raw json_escape(value.to_json)
+      "{name: '#{name}', value: #{escaped_value}}"
     end
 
     def alpine_component

data/app/helpers/lookbook/component_helper.rb

@@ -6,6 +6,10 @@ module Lookbook
       render Lookbook::Icon::Component.new(name: name, **attrs)
     end
 
+    def code(**attrs, &block)
+      render Lookbook::Code::Component.new(**attrs), &block
+    end
+
     def render_component(ref, **attrs, &block)
       klass = component_class(ref)
       comp = attrs.key?(:content) ? klass.new(**attrs.except(:content)).with_content(attrs[:content]) : klass.new(**attrs)

data/app/views/lookbook/index.html.erb

@@ -7,7 +7,7 @@
       <% if Lookbook.previews? %>
         <p>Select a preview from the nav to get started.</p>
       <% else %>
-        <p><a class="underline" href="https://beta.lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
+        <p><a class="underline" href="https://lookbook.build/guide/previews" target="_blank">Create a preview</a> to get started.</p>
       <% end %>
     </div>
   </div>

data/lib/lookbook/engine.rb

@@ -1,4 +1,3 @@
-require "rails"
 require "view_component"
 require "action_cable/engine"
 require "listen"

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "1.0.0.rc.2"
+  VERSION = "1.0.1"
 end

data/lib/tasks/lookbook_tasks.rake

@@ -1,18 +1,6 @@
 require_relative "../lookbook"
 
 namespace :lookbook do
-  desc "Run the rspec tests"
-  task :test do
-    sh "bundle exec rspec"
-  end
-
-  namespace :test do
-    desc "Start a server to view the test app"
-    task :serve do
-      sh "bundle exec rackup"
-    end
-  end
-
   namespace :previews do
     desc "Preparse the previews"
     task preparse: :environment do
@@ -20,21 +8,4 @@ namespace :lookbook do
       puts "Lookbook preview parsing complete"
     end
   end
-
-  namespace :release do
-    desc "Bump the Lookbook engine version number"
-    task :bump_version, [:version] do |t, args|
-      filename = Lookbook::Engine.root.join("lib/lookbook/version.rb")
-      current_version = Lookbook::VERSION.to_s
-      new_version = args[:version].sub("v", "").tr("-", ".")
-      file = File.open(filename)
-      contents = file.read
-      File.write(filename, contents.gsub(current_version, new_version))
-    end
-
-    desc "Build Gem and push to RubyGems"
-    task :build_and_push do
-      sh("rake build && gem push pkg/lookbook-#{Lookbook::VERSION}.gem")
-    end
-  end
 end

data/public/lookbook-assets/css/themes/zinc.css.map.91837.5

@@ -0,0 +1 @@
+{"mappings":"AAAA","sources":["app/assets/lookbook/css/themes/zinc.css"],"sourcesContent":[":root {\n  --lookbook-white: theme(\"colors.white\");\n  --lookbook-accent-50: theme(\"colors.zinc.50\");\n  --lookbook-accent-100: theme(\"colors.zinc.100\");\n  --lookbook-accent-200: theme(\"colors.zinc.200\");\n  --lookbook-accent-300: theme(\"colors.zinc.300\");\n  --lookbook-accent-400: theme(\"colors.zinc.400\");\n  --lookbook-accent-500: theme(\"colors.zinc.500\");\n  --lookbook-accent-600: theme(\"colors.zinc.600\");\n  --lookbook-accent-700: theme(\"colors.zinc.700\");\n  --lookbook-accent-800: theme(\"colors.zinc.800\");\n  --lookbook-accent-900: theme(\"colors.zinc.900\");\n  --lookbook-base-50: theme(\"colors.zinc.50\");\n  --lookbook-base-100: theme(\"colors.zinc.100\");\n  --lookbook-base-200: theme(\"colors.zinc.200\");\n  --lookbook-base-300: theme(\"colors.zinc.300\");\n  --lookbook-base-400: theme(\"colors.zinc.400\");\n  --lookbook-base-500: theme(\"colors.zinc.500\");\n  --lookbook-base-600: theme(\"colors.zinc.600\");\n  --lookbook-base-700: theme(\"colors.zinc.700\");\n  --lookbook-base-800: theme(\"colors.zinc.800\");\n  --lookbook-base-900: theme(\"colors.zinc.900\");\n  --lookbook-text: var(--lookbook-base-800);\n  --lookbook-divider: var(--lookbook-base-300);\n  --lookbook-icon-button-stroke: var(--lookbook-base-400);\n  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);\n  --lookbook-tooltip-bg: var(--lookbook-accent-500);\n  --lookbook-tooltip-text: var(--lookbook-white);\n  --lookbook-scrollbar: var(--lookbook-base-200);\n  --lookbook-scrollbar-hover: var(--lookbook-base-300);\n  --lookbook-toolbar-bg: var(--lookbook-white);\n  --lookbook-toolbar-divider: var(--lookbook-divider);\n  --lookbook-nav-text: var(--lookbook-text);\n  --lookbook-nav-toggle: var(--lookbook-base-500);\n  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);\n  --lookbook-nav-item-hover: var(--lookbook-base-100);\n  --lookbook-nav-item-active: var(--lookbook-accent-50);\n  --lookbook-input-bg: var(--lookbook-white);\n  --lookbook-input-border: var(--lookbook-base-300);\n  --lookbook-input-border-focus: var(--lookbook-accent-200);\n  --lookbook-input-text: var(--lookbook-base-600);\n  --lookbook-input-text-placeholder: var(--lookbook-base-400);\n  --lookbook-input-toggle: var(--lookbook-base-300);\n  --lookbook-input-toggle-active: var(--lookbook-accent-500);\n  --lookbook-prose-bg: var(--lookbook-white);\n  --lookbook-prose-text: var(--lookbook-base-600);\n  --lookbook-prose-link: var(--lookbook-accent-900);\n  --lookbook-tabs-text: var(--lookbook-base-500);\n  --lookbook-tabs-text-hover: var(--lookbook-base-700);\n  --lookbook-tabs-text-disabled: var(--lookbook-base-300);\n  --lookbook-tabs-border-active: var(--lookbook-accent-400);\n  --lookbook-viewport-handle: var(--lookbook-white);\n  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);\n  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);\n  --lookbook-sidebar-bg: var(--lookbook-base-50);\n  --lookbook-page-bg: var(--lookbook-white);\n  --lookbook-drawer-bg: var(--lookbook-base-50);\n  --lookbook-header-bg: var(--lookbook-accent-600);\n  --lookbook-header-text: var(--lookbook-white);\n  --lookbook-header-border: var(--lookbook-accent-700);\n  --lookbook-blank-slate-title: var(--lookbook-accent-600);\n  --lookbook-branding-text: var(--lookbook-header-text);\n  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);\n}\n"],"names":[],"version":3,"file":"zinc.css.map","sourceRoot":"../../../../"}

data/public/lookbook-assets/js/lookbook.js

@@ -7701,17 +7701,7 @@ function $5439cede634b2921$var$toCamel(s) {
 }
 
 
-var $f959e58624110d32$exports = {};
-var $99486586f6691564$exports = {};
-
-$parcel$defineInteropFlag($99486586f6691564$exports);
-
-$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
-function $99486586f6691564$export$2e2bcd8739ae039() {
-    return {};
-}
-
-
+var $730b795bb0498251$exports = {};
 var $cbd28b10fa9798c7$exports = {};
 
 $parcel$defineInteropFlag($cbd28b10fa9798c7$exports);
@@ -11364,6 +11354,72 @@ function $cbd28b10fa9798c7$export$2e2bcd8739ae039() {
 }
 
 
+var $99486586f6691564$exports = {};
+
+$parcel$defineInteropFlag($99486586f6691564$exports);
+
+$parcel$export($99486586f6691564$exports, "default", () => $99486586f6691564$export$2e2bcd8739ae039);
+function $99486586f6691564$export$2e2bcd8739ae039() {
+    return {};
+}
+
+
+var $47a1c62621be0c54$exports = {};
+
+$parcel$defineInteropFlag($47a1c62621be0c54$exports);
+
+$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
+var $122263eab94cad08$exports = {};
+
+$parcel$defineInteropFlag($122263eab94cad08$exports);
+
+$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
+$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
+
+function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
+    let copyTimeout = null;
+    return Object.assign(context, {
+        copied: false,
+        async copyToClipboard (target = null) {
+            let targetEl;
+            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
+            else if (typeof target === "string") targetEl = document.querySelector(target);
+            if (!targetEl) {
+                this.warn("Could not find copy target");
+                return false;
+            }
+            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerHTML.trim());
+            await window.navigator.clipboard.writeText(content);
+            this.copied = true;
+            if (copyTimeout) clearTimeout(copyTimeout);
+            copyTimeout = setTimeout(()=>{
+                this.copied = false;
+                this.onCopyComplete();
+            }, 1000);
+            return content;
+        },
+        onCopyComplete () {}
+    });
+}
+function $122263eab94cad08$export$2e2bcd8739ae039() {
+    return $122263eab94cad08$export$c6684e6159b21de3({});
+}
+
+
+
+function $47a1c62621be0c54$export$2e2bcd8739ae039() {
+    const button = (0, $cbd28b10fa9798c7$export$2e2bcd8739ae039)();
+    return {
+        ...button,
+        copied: false,
+        init () {
+            button.init.bind(this)();
+            (0, $122263eab94cad08$export$c6684e6159b21de3)(this);
+        }
+    };
+}
+
+
 var $e398acaded942bbe$exports = {};
 
 $parcel$defineInteropFlag($e398acaded942bbe$exports);
@@ -11397,31 +11453,6 @@ function $e398acaded942bbe$export$2e2bcd8739ae039(targetSelector) {
 }
 
 
-var $e9904a14dabf652d$exports = {};
-
-$parcel$defineInteropFlag($e9904a14dabf652d$exports);
-
-$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
-function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
-    return {
-        focussed: false,
-        get active () {
-            return store.active;
-        },
-        get text () {
-            return store.text;
-        },
-        clear () {
-            if (store.raw === "") this.$refs.input.blur();
-            else store.raw = "";
-        },
-        focus () {
-            this.$refs.input.focus();
-        }
-    };
-}
-
-
 var $e1f51f020443edd4$exports = {};
 
 $parcel$defineInteropFlag($e1f51f020443edd4$exports);
@@ -12287,57 +12318,26 @@ function $e1f51f020443edd4$export$2e2bcd8739ae039(id, embedStore) {
 }
 
 
-var $47a1c62621be0c54$exports = {};
-
-$parcel$defineInteropFlag($47a1c62621be0c54$exports);
-
-$parcel$export($47a1c62621be0c54$exports, "default", () => $47a1c62621be0c54$export$2e2bcd8739ae039);
-var $122263eab94cad08$exports = {};
-
-$parcel$defineInteropFlag($122263eab94cad08$exports);
-
-$parcel$export($122263eab94cad08$exports, "initClipboard", () => $122263eab94cad08$export$c6684e6159b21de3);
-$parcel$export($122263eab94cad08$exports, "default", () => $122263eab94cad08$export$2e2bcd8739ae039);
-
-function $122263eab94cad08$export$c6684e6159b21de3(context = {}) {
-    let copyTimeout = null;
-    return Object.assign(context, {
-        copied: false,
-        async copyToClipboard (target = null) {
-            let targetEl;
-            if (this.$refs.copyTarget) targetEl = this.$refs.copyTarget;
-            else if (typeof target === "string") targetEl = document.querySelector(target);
-            if (!targetEl) {
-                this.warn("Could not find copy target");
-                return false;
-            }
-            const content = (0, $7ae6ae39c2ec9059$export$6cb344a21ca18aec)(targetEl.innerHTML.trim());
-            await window.navigator.clipboard.writeText(content);
-            this.copied = true;
-            if (copyTimeout) clearTimeout(copyTimeout);
-            copyTimeout = setTimeout(()=>{
-                this.copied = false;
-                this.onCopyComplete();
-            }, 1000);
-            return content;
-        },
-        onCopyComplete () {}
-    });
-}
-function $122263eab94cad08$export$2e2bcd8739ae039() {
-    return $122263eab94cad08$export$c6684e6159b21de3({});
-}
-
+var $e9904a14dabf652d$exports = {};
 
+$parcel$defineInteropFlag($e9904a14dabf652d$exports);
 
-function $47a1c62621be0c54$export$2e2bcd8739ae039() {
-    const button = (0, $cbd28b10fa9798c7$export$2e2bcd8739ae039)();
+$parcel$export($e9904a14dabf652d$exports, "default", () => $e9904a14dabf652d$export$2e2bcd8739ae039);
+function $e9904a14dabf652d$export$2e2bcd8739ae039(store) {
     return {
-        ...button,
-        copied: false,
-        init () {
-            button.init.bind(this)();
-            (0, $122263eab94cad08$export$c6684e6159b21de3)(this);
+        focussed: false,
+        get active () {
+            return store.active;
+        },
+        get text () {
+            return store.text;
+        },
+        clear () {
+            if (store.raw === "") this.$refs.input.blur();
+            else store.raw = "";
+        },
+        focus () {
+            this.$refs.input.focus();
         }
     };
 }
@@ -13210,13 +13210,13 @@ function $6d64716f0b34fdf4$export$2e2bcd8739ae039(store) {
 }
 
 
-$f959e58624110d32$exports = {
-    "code": $99486586f6691564$exports,
+$730b795bb0498251$exports = {
     "button": $cbd28b10fa9798c7$exports,
+    "code": $99486586f6691564$exports,
+    "copy_button": $47a1c62621be0c54$exports,
     "dimensions_display": $e398acaded942bbe$exports,
-    "filter": $e9904a14dabf652d$exports,
     "embed": $e1f51f020443edd4$exports,
-    "copy_button": $47a1c62621be0c54$exports,
+    "filter": $e9904a14dabf652d$exports,
     "icon": $36506012e0c6e9e3$exports,
     "nav": $d92d9d5253f84566$exports,
     "params_editor": $b63b9c6d236b3f65$exports,
@@ -13367,7 +13367,7 @@ const $d73574cc5e9b9e72$var$prefix = window.APP_NAME;
 // Components
 (0, $caa9439642c6336c$export$2e2bcd8739ae039).data("app", (0, $d709d0f4027033b2$export$2e2bcd8739ae039));
 [
-    $f959e58624110d32$exports,
+    $730b795bb0498251$exports,
     $e4eab7529959b73b$exports,
     $4979d2d897a1c01f$exports
 ].forEach((scripts)=>{