lookbook 2.3.0 → 3.0.0.alpha.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0277029efee9bfc07832f5bc2ea7d1a57063a81e2e2986978c93abca8750fbe2'
-  data.tar.gz: c03b8c178645b7dba6572d37711cb4664ea4175fa56430acd595a369069d54c9
+  metadata.gz: b1abe573d8ff2988838217abe357ec62bf107b4117203388872f622ef5575253
+  data.tar.gz: cee6369ffc488c3cbe1a502b85cbfb96b55c65144866b6f958ee19f9278b526f
 SHA512:
-  metadata.gz: c34fbd701d1f7818dea444b9ad899b7dce012968a0cc0038dd197bf0e70ea2af105c2d299e3ac21302f9276d0dde162b56cfebb8f45ba4e7eb9c1ab1455c4555
-  data.tar.gz: 50613e6f04c758f5c93fa4ff659a0a0a4c1a903e80d167a3c1aead2f6e5af7278549b260255405c077fe1f35ba920fc050fdfdb0dab4d37ce7df18658f6ace47
+  metadata.gz: 58b876a5c0deae713e792516f22b935e2852b5647626b9f758f736864a084d1cc13bba6b4ace46edc1ed233451724dbbfb7f3dcb254fc262bf27f5cda3e49a74
+  data.tar.gz: c464e9e51c3a7b7bcaaacd9178f0bdda3f4acb2d6cf2e0fa77ab25408357e8c46ed56119980815c5fe89f74a6827fa559b78d951e0f556bbd9bae3f4fae6f025

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2021 Mark Perkins
+Copyright (c) 2021-present Mark Perkins & Lookbook contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

data/README.md

@@ -1,83 +1,360 @@
-<div align="center">
-<br>
-<p><a href="https://lookbook.build"><img src=".github/assets/lookbook_logo.svg" width="240"></a></p>
+<img src=".github/assets/lookbook_logo.svg" width="240">
 
-<p>A UI development environment for Ruby on Rails applications.</p>
+<hr>
 
-<p><strong><a href="https://lookbook.build">Documentation</a> &nbsp;|&nbsp; <a href="http://demo.lookbook.build/lookbook">Demo site</a></strong></p>
+## Lookbook v3.0 [development branch]
 
-<p><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/ViewComponent/lookbook/actions/workflows/ci.yml"><img src="https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml/badge.svg" alt="CI status"></a></p>
+This branch contains a work-in-progress, exploratory, from-scratch rebuild of Lookbook, intended to form the basis of a future v3.0 release.
 
-</div>
+[Demo](#demo-site)  ・ [Usage](#usage)  ・ [Development](#development) ・ [Background & motivation](#v3-rebuild---background-and-motivation) ・ [Current status](#v3-rebuild---current-status)
 
----
+![CI status](https://github.com/lookbook-hq/lookbook/actions/workflows/ci.yml/badge.svg?branch=v3)
 
-<div align="center">
-Lookbook combines a powerful <strong>component browser</strong> and <strong>preview system</strong> with an <strong>integrated documentation engine</strong> to help teams build robust, modular, maintainable user interfaces.<br><br>
-It's compatible with <a href="https://viewcomponent.org/">ViewComponent</a>, <a href="https://www.phlex.fun/">Phlex</a>, ActionView partials and more.
-<br><br>
-<a href="https://lookbook.build"><strong>Read the docs &rarr;</strong></a>
+## Demo site
 
-</div>
+You can find a hosted version of the [demo/test app](#demo-app) here: https://v3-demo-app.lookbook.build/lookbook
 
+This pulls directly from the `v3` development branch and so may occasionally be broken.
 
----
+## Usage
 
-[![Lookbook UI](.github/assets/lookbook_ui.png)](http://lookbook.build/)
+Lookbook v3 is currently under heavy development and **should not be considered stable**. 
+
+However, intrepid individuals who are familiar with Lookbook and wish to kick the tyres or get a preview of the upcoming changes can install the Lookbook gem directly from the `v3` branch of this repository.
+
+> Alternatively you can pull down the codebase and [run the included demo app](#demo-app) to see some of the new features in action.
+
+### Requirements
+
+* Ruby >= 3.0.0
+* Rails >= 6.1.0
+
+### Installation
+
+Add Lookbook to the `development` group in your Gemfile:
+
+```rb
+group :development do
+  gem "lookbook", github: "lookbook-hq/lookbook", branch: "v3"
+  gem "listen" # Required for 'live' UI updates when file changes are detected
+end
+```
+
+Lookbook will automatically be mounted at `/lookbook` within your app when the server is started.
+
+> 🚨 Previously Lookbook required manual mounting in your app. This is **no longer the case**, so if trialing v3 in a project with an existing Lookbook install you must remove [the mounting code](https://lookbook.build/guide/installation#step-2) from your routes.rb file first.
+
+### Configuration
+
+The currently implemented v3 configuration options are not yet documented, but can be seen in the [config.rb](lib/lookbook/config.rb) file.
+
+> 🚨 If testing out the v3 branch on an existing Lookbook install you may see errors if setting v2.x config options that have not yet been re-implemented in v3.
+
+### Breaking changes
+
+Lookbook v3.0 will contain a number of breaking changes from the v2.x releases.
+
+The majority of these changes will be in the _extending_, _theming_ and _API_ areas, so heavily customised Lookbook installations may find upgrading a more involved process. As yet there is no documentation on the exact scope of these changes.
+
+In addition, until v3 development reaches beta release stage there are likely to be _unintentional breaking changes_ due to missing or partly-implemented features.
+
+For these reasons, it is recommended that anyone who wants to kick the tyres on the pre-alpha v3 codebase do so **on new projects** or **existing projects with simple, 'vanilla' Lookbook installs** to minimise the chance of running into issues.
+
+### Running in production
+
+ Please don't do this. It's really not ready yet.
 
 ## Development
 
-Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails.org/engines.html) and uses [ViewComponent](https://viewcomponent.org), [Tailwind](https://tailwindcss.com/) and [Alpine](https://alpinejs.dev/) for its UI.
+### Demo app
+
+The Lookbook v3 codebase includes a runnable dummy/demo app for development and testing purposes.
 
-This repository contains:
+To run the app, clone the contents of the `v3` branch to your machine and then run the following commands from within the root directory:
 
-* The Lookbook source code ([`/app`](https://github.com/ViewComponent/lookbook/tree/main/app), [`/lib`](https://github.com/ViewComponent/lookbook/tree/main/lib), [`/config`](https://github.com/ViewComponent/lookbook/tree/main/config), etc)
-* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/ViewComponent/lookbook/tree/main/docs)).
-* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/ViewComponent/lookbook/tree/main/spec)).
+```
+bundle install
+npm install
+bin/dev
+```
+
+Visit http://localhost:4444/lookbook to view the Lookbook UI.
+
+> In development mode assets will be rebuilt as changes are made but there is not yet any asset live-reloading in place.
+
+### Testing
+
+Run the tests:
+
+```
+bin/test
+```
+
+> Integration tests run against the demo app.
 
 ### Documentation 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.
+Run the docs site locally in dev mode:
 
-To preview changes locally you can run a development version of the docs site:
+```
+bin/docs
+```
 
-1. Clone this repo
-2. Install dependencies: `bundle install`
-3. Start the app: `bin/docs`
-4. Visit http://localhost:4000 
+Visit http://localhost:4000 to view the docs. Not much to see there at the moment!
 
-### Testing
+### Logging and debugging
+
+`Lookbook` logs its activity to `Lookbook.logger`.
+This is the primary method of debugging.
+
+#### Custom logger
+
+You can call `Lookbook.logger =` to set a custom `Lookbook` logger for the process. For example:
+
+```rb
+Lookbook.logger = Rails.logger
+```
+
+#### Default logger
+
+If no custom logger is set, a default `Lookbook` logger which logs to to `STDERR` will be created and assigned to `Lookbook.logger`.
+
+The default logger defaults to the `error` logging level (severity).
+You can override the logging level by setting the environment variable `LOOKBOOK_LOG_LEVEL=<level>`.
+For `<level>`, all standard `::Logger` levels are supported, with any mix of upper-/lower-case:
+
+```bash
+export LOOKBOOK_LOG_LEVEL=debug
+export LOOKBOOK_LOG_LEVEL=info
+export LOOKBOOK_LOG_LEVEL=warn
+export LOOKBOOK_LOG_LEVEL=fatal
+export LOOKBOOK_LOG_LEVEL=error
+```
+
+The default of `error` will be used if an unsupported value is set.
+
+#### Disabling logging
+
+If you want to disable `Lookbook` logging, set
+
+```rb
+Lookbook.logger = ::Logger.new('/dev/null')
+```
+
+## v3 rebuild - background and motivation
+
+The current Lookbook codebase has grown organically and haphazardly from a few custom ViewComponent preview templates into a standalone Rails Engine gem with support for previewing many different types of components and views.
+
+In order to provide a solid foundation for future development this v3 branch was created with aspirations to improve the quality of the Lookbook codebase, reduce the number of third party dependencies, fix long-standing issues that are hard to address in the current implementation
+and explore building out new (and experimental) feature ideas.
+
+More concretely, a number of **key goals** are helping shape the development work:
+
+#### UI
+
+* Improve accessibilty and usability of the app (#17)
+* Expose a better theming system using CSS variables (with light and dark modes out of the box)
+* Replace ViewComponent dependency with bespoke component system for building the UI
+
+#### Previews
+
+* Add support for ActionMailer previews (#570)
+* Implement customisable preview overview/documentation pages
+* Fix compatability issues with partial/view template previews (#581, #555)
+* Improve handling and logging of parser errors (#593)
+
+#### Preview embeds
+
+* Add more granualar security configuration options for embed iframes (#571)
+* Implement `<lookbook-embed></lookbook-embed>` as a native web component
+
+#### Pages
+
+* Make it easier to customise the look and feel of pages
+* Expand set of UI and path helpers available in pages
+
+#### Development/Testing
+
+* Streamline Lookbook development process - runnable test/demo/development app, simpler asset dev/build pipeline
+* Improve test setup - switch to Minitest, run tests against demo app, better integration test coverage
+* Make logging play nicer with standard Rails logging options and third party gems
+
+#### Other
+
+* Remove ActionCable requirement, use SSE for live UI updates in dev
+* Improve error handling and compatability with `better_errors` etc (#528)
+* Remove some of the madness from codebase 🙈
+
+## v3 rebuild - Current status
+
+Lookbook v3 is currently in a pre-alpha stage and is under active, exploratory development.
+
+The 'todo' list below is intended to provide a _very rough_ overview of the current state of progress. **It is not exhaustive**. Checked off items may still be revisited/refactored/removed in the future without warning.
+
+**Emoji key:**
+
+* 🆕 - New feature in v3
+* 🚧 - In progress or implemented but incomplete 
+* 🧪 - Experimental feature/implementation
 
-Lookbook uses [RSpec](https://relishapp.com/rspec) for testing.
+### UI
 
-Tests can be run using the `rake spec` or `bundle exec rspec` commands.
+#### General
 
-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
+* [x] Basic desktop UI implementation
+* [x] Replace Tailwind with vanilla CSS
+* [x] Bespoke component system to replace ViewComponent
+* [x] Status bar 🆕 🚧
+* [x] Notifications for parser errors
+* [x] SSE-based live UI updating 🧪 
+* [x] Expand nav to current item when opening app
+* [x] Don't fetch/render entire DOM on navigation (no need to re-render sidebar etc)
+* [ ] Improve accessibilty (exact requirements tbd)
+* [ ] Mobile/small screen layout optimisations
+* [ ] Side-dockable preview inspector drawer
+* [ ] Search fields 'clear' buttons
+* [ ] Use custom icon sprite instead of inlined icons
 
-### Releases
+#### Code samples
 
-Lookbook uses [Release It!](https://github.com/release-it/release-it) to automate the release process.
+* [x] Syntax highlighting 🆕 🚧 🧪
+* [ ] Replace Shiki with something lighter (server-side?)
+* [ ] Click to copy
+* [ ] Line wrap toggle
 
-Running `npm run release` will start the process of publishing a new release and walks though all the steps from picking a version number to publishing the updated gem.
+#### Theming/branding
 
-Publishing a release requires write permissions for this repository (ViewComponent/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
+* [x] Light/dark mode themes + toggle 🆕 🚧
+* [x] Project links in header 🆕
+* [ ] Theme system based on CSS custom properties 🚧
+* [ ] Project logo customisation
 
-## Contributing
+### Previews
 
-Lookbook is an un-funded open source project and contributions of all types and sizes are most welcome!
+#### Preview types
 
-Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/ViewComponent/lookbook/discussions) and we will do our best to help you out.
+* [x] ViewComponent previews
+* [x] Phlex previews
+* [x] Partials/templates previews
+* [x] ActionMailer previews 🆕 🧪
 
-## Contributors 
+#### Tags/annotations
 
-Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and continues to grow
-&amp; improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/ViewComponent/lookbook/graphs/contributors):
-<br>
-<br>
-<a href="https://github.com/ViewComponent/lookbook/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
-</a>
+* [x] Notes
+* [x] `@label`
+* [x] `@hidden`
+* [x] `@param`
+* [x] `@display`
+* [x] `@!group ... @!endgroup`
+* [x] `@id` 🆕
+* [x] `@priority` 🆕
+* [x] `@location/@logical_path`
+* [ ] `@component/@renders`
+* [ ] `@source`
+* [ ] `@after_render`
+* [ ] `@status/@wip` ?
+
+#### Dynamic params
+
+* [x] Text input
+* [x] Textarea input
+* [x] Select input
+* [x] Checkbox input 🆕
+* [ ] Toggle input
+* [ ] Color picker input
+* [ ] Range input
+
+#### Display options
+
+* [x] Static display options
+* [x] Dynamic display options
+
+#### Inspector
+
+* [x] Preview panel
+* [x] Output panel
+* [x] Usage panel (combination of old 'source' and 'notes' panels)
+* [x] Metadata panel 🚧 🆕 🧪
+* [x] Params panel 🚧 
+* [ ] Configurable breakpoints for quick preview viewport resizing
+* [ ] Embed code dropdown
+* [ ] Preview URL copy button
+* [ ] Manual preview refresh button
+
+#### Other
+
+* [x] Grouped scenarios
+* [x] Preview overview pages 🚧 🆕
+* [x] Custom preview controllers support
+* [x] Custom preview layouts support
+* [x] Preview parser error reporting
+* [x] Render previews in parent app context to fix path helper issues
+* [x] JSON endpoint
+* [x] ActionView annotation stripping
+* [ ] Option to specify order of preview directories in nav (i.e. non-alphabetical)
+* [ ] Output transformation
+
+### Preview Embeds
+
+* [x] `<lookbook-embed>` implemented as HTML custom element
+* [x] Internal embeds (within pages in Lookbook)
+* [ ] External embeds (outside of Lookbook)
+* [ ] Configurable frame ancestors
+
+### Pages
+
+* [x] Basic markdown + ERB pages system
+* [x] YAML Frontmatter config
+* [x] Landing page
+* [ ] Tabbed pages
+* [ ] Page layout and styling options 🚧
+
+### Extending
+
+* [x] Custom inspector panels 🚧
+* [ ] Custom param inputs
+* [ ] Custom tags
+* [ ] Lifecycle hooks
+* [ ] Global data store
+* [ ] Ruby API
+
+### Development
+
+* [x] Replace Parcel with PostCSS + esbuild for compiling assets
+* [x] Runnable, bundled demo app for development
+* [x] Minitest test suite setup
+* [x] Setup GH actions CI
+* [ ] Comprehensive set of test components + previews 🚧
+* [ ] UI integration tests 🚧
+* [ ] Set up Ruby & Rails versions test matrix via Appraisal
+* [ ] Release script (automate from GH?)
+
+### Internals
+
+* [x] Auto-mounting of Lookbook engine 🆕
+* [x] Remove ActionCable dependency, use SSE for triggering UI live updates 🆕 🧪
+* [x] File change detection system
+* [x] Config options defined in Ruby and not YAML
+* [x] Config options synced with ViewComponent where appropriate
+* [x] UUID-based permalink endpoint 🆕 🧪
+* [x] Improved logger implementation
+* [ ] Rationalise & document entity method names
+* [ ] Make debug logging more consitent
+* [ ] Improve parsing/tree building performance
+
+### Documentation
+
+* [ ] Switch to Nanoc for static docs building?
+* [ ] Document new features in v3 
+* [ ] Port and update existing docs to new docs site
+* [ ] Automate config option documentation via YARD
+* [ ] Automate API docs via YARD
+* [ ] Set up automated build & deploy process for docs
+
+### Other/Ideas/Maybe
+
+* [ ] CLI tool
+* [ ] JSON API
 
 ## License
 

data/app/components/lookbook/ui/app/app.css

@@ -0,0 +1,13 @@
+[data-component="app"] {
+  height: 100vh;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+
+  &[data-status-bar="true"] {
+    grid-template-rows: min-content 1fr min-content;
+  }
+
+  main {
+    display: contents;
+  }
+}

data/app/components/lookbook/ui/app/app.html.erb

@@ -0,0 +1,24 @@
+<%= render component_tag(x: {data: "app", bind: "bindings.root"}, data: {status_bar: status_bar?.to_json}) do %>
+  <div id="app-header">
+    <%= header %>
+  </div>
+  
+  <% if pages.any? || previews.any? %>    
+    <%=
+      lb_pane_group("app-body", tag: :div, opts: body_split) do |body|
+        body.with_pane do
+          sidebar
+        end
+        body.with_pane { main }
+      end
+    %>
+  <% else %>
+    <%= main %>
+  <% end %>
+
+  <% if status_bar? %>
+    <footer id="app-status-bar">
+      <%= status_bar %>
+    </footer>  
+  <% end %>
+<% end %>

data/app/components/lookbook/ui/app/app.js

@@ -0,0 +1,30 @@
+import AlpineComponent from "@js/alpine/component";
+import Cookies from "js-cookie";
+
+export default AlpineComponent("app", () => {
+  return {
+    reflowing: false,
+
+    resetUI() {
+      Cookies.remove("lookbook-display-options");
+      Cookies.remove("lookbook-color-scheme");
+      Alpine.store("app").clear();
+      window.location.reload();
+      this.$logger.info(`Local storage cleared`);
+    },
+
+    bindings: {
+      root: {
+        ["@ui:resizing-start"]() {
+          this.reflowing = true;
+        },
+        ["@ui:resizing-end"]() {
+          this.reflowing = false;
+        },
+        ["@ui:reset"]() {
+          this.resetUI();
+        },
+      },
+    },
+  };
+});

data/app/components/lookbook/ui/app/app.rb

@@ -0,0 +1,26 @@
+module Lookbook
+  module UI
+    class App < BaseComponent
+      with_slot :header, Lookbook::UI::Header
+      with_slot :sidebar, Lookbook::UI::Sidebar
+      with_slot :main
+      with_slot :status_bar, Lookbook::UI::StatusBar
+
+      def body_split
+        {
+          orientation: :vertical,
+          sizes: ["280px", "auto"],
+          min_sizes: [200, 200]
+        }
+      end
+
+      def pages
+        Lookbook::Pages
+      end
+
+      def previews
+        Lookbook::Previews
+      end
+    end
+  end
+end

data/app/components/lookbook/ui/app/header/color_scheme_switcher/color_scheme_switcher.css

@@ -0,0 +1,69 @@
+[data-component="color-scheme-switcher"] {
+  display: block;
+  height: fit-content;
+  line-height: 1;
+
+  .switcher-button {
+    &,
+    &:hover,
+    &:active,
+    &.active {
+      color: currentColor;
+    }
+  }
+
+  .switcher-icon-light,
+  .switcher-icon-dark {
+    display: none;
+  }
+
+  [data-color-scheme="light"] & {
+    .switcher-icon-light {
+      display: block;
+    }
+  }
+
+  [data-color-scheme="dark"] & {
+    .switcher-icon-dark {
+      display: block;
+    }
+  }
+
+  .switcher-dropdown {
+    background-color: var(--lb-dropdown-background-color);
+    padding-block: var(--lb-spacing-2xs);
+    min-width: 9em;
+  }
+
+  .switcher-option {
+    color: var(--lb-color-scheme-switcher-button-color);
+    padding-block: var(--lb-spacing-xs);
+    padding-left: var(--lb-spacing-md);
+    padding-right: var(--lb-spacing-lg);
+    display: flex;
+    align-items: center;
+    column-gap: var(--lb-spacing-sm);
+    width: 100%;
+
+    .icon {
+      color: var(--lb-color-scheme-switcher-icon-color);
+    }
+
+    &:hover {
+      color: var(--lb-color-scheme-switcher-button-color-hover);
+
+      .icon {
+        color: var(--lb-color-scheme-switcher-icon-color-hover);
+      }
+    }
+
+    &.selected {
+      font-weight: var(--lb-font-weight-semibold);
+      color: var(--lb-color-scheme-switcher-button-color-selected);
+
+      .icon {
+        color: var(--lb-color-scheme-switcher-icon-color-selected);
+      }
+    }
+  }
+}

data/app/components/lookbook/ui/app/header/color_scheme_switcher/color_scheme_switcher.html.erb

@@ -0,0 +1,23 @@
+<%= render component_tag do %>
+  <%= lb_toolbar_button(class: "switcher-button") do |button| %>
+      <% button.with_dropdown do %>
+        <div class="switcher-dropdown" x-data="colorSchemeSwitcher">
+          <button class="switcher-option" @click="setScheme('light')" :class="{selected: isActiveScheme('light')}">
+            <%= lb_icon(:sun) %>
+            <span class="switcher-label">Light</span>
+          </button>
+          <button class="switcher-option" @click="setScheme('dark')" :class="{selected: isActiveScheme('dark')}">
+            <%= lb_icon(:moon) %>
+            <span class="switcher-label">Dark</span>
+          </button>
+          <button class="switcher-option" @click="setScheme('system')" :class="{selected: isActiveScheme('system')}">
+            <%= lb_icon(:monitor) %>
+            <span class="switcher-label">System</span>
+          </button>
+        </div>
+      <% end %>
+
+      <%= render Lookbook::UI::Icon.new(name: :sun, class: "switcher-icon-light") %>
+      <%= render Lookbook::UI::Icon.new(name: :moon, class: "switcher-icon-dark") %>
+    <% end %>
+<% end %>

data/app/components/lookbook/ui/app/header/color_scheme_switcher/color_scheme_switcher.js

@@ -0,0 +1,51 @@
+import AlpineComponent from "@js/alpine/component";
+import Cookies from "js-cookie";
+
+const colorSchemeCookie = "lookbook-color-scheme";
+
+export default AlpineComponent("colorSchemeSwitcher", () => {
+  const store = Alpine.store("app");
+  store.setDefault("colorScheme", "light");
+
+  return {
+    init() {
+      this.onSystemSchemeChange = this.onSystemSchemeChange.bind(this);
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", this.onSystemSchemeChange);
+    },
+
+    onSystemSchemeChange(event) {
+      this.applyScheme(event.matches ? "dark" : "light");
+    },
+
+    applyScheme(scheme) {
+      const schemeValue = scheme === "system" ? this.systemScheme : scheme;
+      document.documentElement.setAttribute("data-color-scheme", schemeValue);
+      Cookies.set(colorSchemeCookie, schemeValue);
+    },
+
+    setScheme(scheme) {
+      store.set("colorScheme", scheme);
+      this.applyScheme(scheme);
+      this.$nextTick(() => this.$dispatch("color-scheme:change"));
+    },
+
+    isActiveScheme(scheme) {
+      return store.get("colorScheme") === scheme;
+    },
+
+    destroy() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener("change", this.onSystemSchemeChange);
+    },
+
+    get systemScheme() {
+      return window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    },
+  };
+});