its-swiss 0.1.0

data/app/assets/stylesheets/its_swiss/transitions.css

@@ -0,0 +1,47 @@
+/* View transitions.
+ *
+ * The library names the transitions and says how long they last. Which page
+ * transitions to which is the application's, because it depends on what the
+ * pages are: a name is given to an element by whoever knows that the same
+ * record is on both sides of the navigation.
+ *
+ * The at-rule covers a plain cross-document navigation. Turbo drives the same
+ * transitions from the <meta name="view-transition"> tag the shell writes.
+ */
+
+@layer its-swiss.transitions {
+  @view-transition { navigation: auto; }
+
+  /* The page crossfade is taken of the body rather than of :root, which is
+     the element that carries it by default. A snapshot of :root is sized to
+     the viewport including the scrollbar, while the page is laid out in the
+     width left after it — so for the length of every navigation the document
+     is wider than its own viewport and genuinely scrolls sideways. It settles
+     back the moment the transition ends, which is why the page measures clean
+     whenever it is asked standing still. */
+  :root { view-transition-name: none; }
+
+  body { view-transition-name: page; }
+
+  ::view-transition-old(page),
+  ::view-transition-new(page) {
+    animation-duration: var(--transition-page);
+    animation-timing-function: var(--transition-ease);
+  }
+
+  /* Anything an application has named travels rather than crossfading, and
+     runs longer, because the thing travelling has to stay readable while it
+     does. */
+  ::view-transition-group(*) {
+    animation-duration: var(--transition-morph);
+    animation-timing-function: var(--transition-ease);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    @view-transition { navigation: none; }
+
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) { animation: none; }
+  }
+}

data/app/assets/stylesheets/its_swiss/type.css

@@ -0,0 +1,109 @@
+/* Typography.
+ *
+ * One family, five sizes, two weights. Hierarchy comes from size, weight and
+ * where a thing sits on the grid — never from a box drawn around it.
+ *
+ * Every line box is a whole number of baselines, taken from the one ladder in
+ * tokens.css, so a line of type and the space beneath it are measured in the
+ * same units.
+ */
+
+@layer its-swiss.type {
+  body {
+    font-family: var(--font-family);
+    font-size: var(--size-2);
+    font-weight: 400;
+    line-height: var(--space-3);
+    text-align: left;
+    /* A weight the file does not carry is better absent than drawn by the
+       browser: a synthesised bold at a large size is visibly a smeared
+       regular, and this style leans on exactly two weights. */
+    font-synthesis: none;
+  }
+
+  /* Flush left, ragged right, everywhere. */
+  h1, h2, h3, h4, p, dt, dd, li, label, legend, caption, th, td { text-align: left; }
+
+  /* --- The five registers -------------------------------------------------
+     Named for what they are rather than for the elements that happen to use
+     them, so an application can put a page title in an <h2> when the outline
+     calls for it without the type changing under it. */
+
+  .page-title {
+    font-size: var(--size-5);
+    line-height: var(--space-6);
+    font-weight: 700;
+    letter-spacing: -0.028em;
+    text-wrap: balance;
+  }
+
+  h1 { font-size: var(--size-4); line-height: var(--space-5); font-weight: 700; letter-spacing: -0.02em; }
+
+  h2 { font-size: var(--size-3); line-height: var(--space-4); font-weight: 700; letter-spacing: -0.015em; }
+
+  h3, h4 { font-size: var(--size-2); line-height: var(--space-3); font-weight: 700; }
+
+  /* The micro register: labels, metadata, captions. Size and value carry it.
+     Nothing here is set in capitals — that is a different tradition, and in
+     lowercase the wide tracking it needs reads as a gap. */
+  .micro,
+  caption,
+  legend,
+  label,
+  .field label {
+    font-size: var(--size-1);
+    line-height: var(--space-2);
+    letter-spacing: 0.01em;
+  }
+
+  /* The same size on a line box one step taller: the micro type you can tap.
+     At a 16px line box these are 14px targets, under the 24px minimum. The
+     leading does the work so the type does not have to change. */
+  .micro--tap,
+  .pagination a,
+  .pagination [aria-current] { line-height: var(--space-3); }
+
+  /* Quiet: this is secondary. One rule, so the whole library says it the same
+     way and an application adds its own selectors to the list rather than
+     picking a gray. */
+  .quiet,
+  .hint,
+  .nav a,
+  .footer,
+  .pairs dt,
+  .button--quiet,
+  .button--danger,
+  .link-quiet { color: var(--ink-quiet); }
+
+  .hint {
+    font-size: var(--size-1);
+    line-height: var(--space-3);
+    max-width: var(--measure);
+  }
+
+  /* Prose stops where the field it sits in stops. */
+  .measure,
+  .lede,
+  p { max-width: var(--measure); }
+
+  .lede { margin-top: var(--space-2); }
+
+  /* Navigation and actions read at body size. They are how an application is
+     used, not annotations on it. */
+  .nav a,
+  .button { font-size: var(--size-2); line-height: var(--space-3); }
+
+  /* Anything read as a column of digits rather than as a word. */
+  .tabular,
+  .pairs dd,
+  td,
+  th { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
+
+  /* A button brings its own font, and a button that exists to look like the
+     text it replaced has to give it back. Stated here rather than in
+     components.css so it stays ahead of the size modifiers there: a `font`
+     shorthand after them would flatten every one. */
+  .copy { font: inherit; }
+
+  code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
+}

data/app/controllers/its_swiss/specimen_controller.rb

@@ -0,0 +1,24 @@
+module ItsSwiss
+  # The specimen is documentation and a regression fixture, not a page an
+  # application serves. Refused unless the configuration has asked for it —
+  # the installer mounts the engine inside `if Rails.env.development?`, and
+  # this is the second lock, because a route is a line in a file someone can
+  # move and this page names every component the library has.
+  class SpecimenController < ActionController::Base
+    layout "its_swiss/shell"
+
+    before_action :refuse_unless_asked_for
+
+    def show
+      @sizes = (1..5).map { |step| "--size-#{step}" }
+      @values = (0..5).map { |step| "--value-#{step}" }
+    end
+
+    private
+      def refuse_unless_asked_for
+        return if ItsSwiss.config.specimen?
+
+        raise ActionController::RoutingError, "the its-swiss specimen is not enabled in #{Rails.env}"
+      end
+  end
+end

data/app/helpers/its_swiss/application_helper.rb

@@ -0,0 +1,73 @@
+module ItsSwiss
+  # The library's markup contracts. Each of these exists because the markup it
+  # writes carries a detail that is easy to leave out by hand and silent when
+  # it is missing.
+  module ApplicationHelper
+    # Six link tags rather than the one file that imports the six. An @import
+    # is a request the browser cannot start until it has read the file that
+    # asks for it, so the single file is a waterfall six deep — it is still
+    # shipped, for anything that is not Rails and can afford the wait.
+    #
+    # The order matters less than it looks like it does: every file states its
+    # own cascade layer, so these resolve the same way whatever order they
+    # arrive in. It is written in order anyway, because a file that has not
+    # arrived yet is a file whose layer has not been declared.
+    def its_swiss_stylesheet_tags(**options)
+      stylesheet_link_tag(*ItsSwiss::STYLESHEETS.map { |name| "its_swiss/#{name}" },
+        **{ "data-turbo-track": "reload" }.merge(options))
+    end
+
+    # A destination, and whether you are already there. aria-current rather
+    # than a class alone: the CSS gives the current item the accent and the
+    # weight, and neither of those is audible.
+    #
+    # `current` is passed rather than worked out, because only the application
+    # knows that /palettes/12 is still the Palettes destination.
+    def nav_link_to(name, url, current: nil, **options, &block)
+      current = current_page?(url) if current.nil?
+      options[:"aria-current"] = "page" if current
+
+      link_to(name, url, **options, &block)
+    end
+
+    # A value on screen exists to be taken somewhere else, so it is a button
+    # that copies itself. The value stays visible text inside it, which is
+    # what keeps it usable when the clipboard is not available at all.
+    def copy_button(value, **options)
+      options[:class] = token_list("copy", options[:class])
+
+      tag.button(value, type: "button", **options,
+        data: {
+          controller: "its-swiss-clipboard",
+          action: "its-swiss-clipboard#copy",
+          its_swiss_clipboard_text_value: value
+        },
+        aria: { label: "Copy #{value}" })
+    end
+
+    # What to call the application when a page has not titled itself. Rails
+    # already knows: the module the application is defined in.
+    def its_swiss_application_name
+      Rails.application.class.module_parent_name.underscore.humanize
+    end
+
+    # Which page numbers a run of them should show. Elided around the current
+    # page and at both ends, because a hundred numbers is not a control —
+    # nil is where the gap goes.
+    def its_swiss_page_numbers(page, pages, window: 2)
+      shown = [ 1, pages, *((page - window)..(page + window)) ].select { |n| n.between?(1, pages) }.uniq.sort
+
+      shown.each_with_object([]) do |number, run|
+        run << nil if run.any? && number - run.last.to_i > 1
+        run << number
+      end
+    end
+
+    # form_with, already holding the library's builder. An application that
+    # wants its own builder still can; this is the shorthand for the case
+    # where it does not.
+    def its_swiss_form_with(**options, &block)
+      form_with(**{ builder: ItsSwiss::FormBuilder, class: "form" }.merge(options), &block)
+    end
+  end
+end

data/app/views/its_swiss/shared/_errors.html.erb

@@ -0,0 +1,14 @@
+<%# Why a record was refused, above the form that was refused. The field-level
+    messages the builder writes say it again beside each control; this says
+    how many there were, which is the thing you want before you start looking.
+%>
+<% if record.errors.any? %>
+  <div class="errors" role="alert">
+    <p class="errors__title"><%= pluralize(record.errors.count, "problem") %> stopped this being saved.</p>
+    <ul>
+      <% record.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

data/app/views/its_swiss/shared/_flash.html.erb

@@ -0,0 +1,8 @@
+<%# The two things a page has to say, in the register the library keeps for
+    each. A refusal interrupts, with a rule rather than a filled panel; a
+    confirmation does not interrupt at all. %>
+<% if flash[:alert].present? %>
+  <div class="errors" role="alert"><p class="errors__title"><%= flash[:alert] %></p></div>
+<% elsif flash[:notice].present? %>
+  <p class="hint" role="status"><%= flash[:notice] %></p>
+<% end %>

data/app/views/its_swiss/shared/_masthead.html.erb

@@ -0,0 +1,15 @@
+<%# A band, a mark at one end, the destinations beside it, a hairline
+    underneath — and nothing at all if the application has given it neither.
+    A library that insisted on a bar across the top would be insisting on a
+    shape rather than offering one. %>
+<% if content_for?(:mark) || content_for?(:nav) %>
+  <header class="masthead page">
+    <% if content_for?(:mark) %>
+      <p class="masthead__mark"><%= content_for(:mark) %></p>
+    <% end %>
+
+    <% if content_for?(:nav) %>
+      <nav class="nav"><%= content_for(:nav) %></nav>
+    <% end %>
+  </header>
+<% end %>

data/app/views/its_swiss/shared/_pagination.html.erb

@@ -0,0 +1,26 @@
+<%#
+  A run of numbers under a hairline. Takes a page number, a total, and a block
+  that turns a number into a URL — the library has no paginator and no opinion
+  about which one an application uses.
+
+    <%= render "its_swiss/shared/pagination", page: @page, pages: @pages,
+          url: ->(n) { colors_path(page: n) } %>
+
+  Long runs are elided around the current page, because a hundred numbers is
+  not a control.
+%>
+<% window = local_assigns.fetch(:window, 2) %>
+<% numbers = its_swiss_page_numbers(page, pages, window:) %>
+<% if pages > 1 %>
+  <nav class="pagination" aria-label="<%= local_assigns.fetch(:label, "Pages") %>">
+    <% numbers.each do |number| %>
+      <% if number.nil? %>
+        <span class="pagination__gap" aria-hidden="true">…</span>
+      <% elsif number == page %>
+        <span aria-current="page"><%= number %></span>
+      <% else %>
+        <%= link_to number, url.call(number) %>
+      <% end %>
+    <% end %>
+  </nav>
+<% end %>

data/app/views/its_swiss/specimen/_buttons.html.erb

@@ -0,0 +1,15 @@
+<section data-specimen="buttons">
+  <h3>Buttons</h3>
+  <div class="run">
+    <button type="button" class="button button--primary">Primary</button>
+    <button type="button" class="button">Secondary</button>
+    <button type="button" class="button button--accent">Accent</button>
+    <button type="button" class="button button--quiet">Quiet</button>
+    <button type="button" class="button button--danger">Delete</button>
+  </div>
+  <p class="hint">
+    Destroying is set apart by a gap before it is coloured on hover: a reader
+    scanning the row has not hovered anything yet.
+  </p>
+  <p><%= copy_button "#E30613" %> — a value on screen to be taken somewhere else.</p>
+</section>

data/app/views/its_swiss/specimen/_footer.html.erb

@@ -0,0 +1,7 @@
+<section data-specimen="footer">
+  <h3>Footer</h3>
+  <footer class="footer">
+    A hairline, the micro register, and whatever belongs after the page. The
+    library ships no links of its own down here.
+  </footer>
+</section>

data/app/views/its_swiss/specimen/_form.html.erb

@@ -0,0 +1,18 @@
+<section data-specimen="form">
+  <h3>Form</h3>
+  <%= its_swiss_form_with url: "#form", method: :get do |form| %>
+    <%= form.text_field :name, value: "Brand Core", hint: "As it appears in the nav." %>
+    <%= form.text_area :notes, value: "" %>
+    <%= form.select :kind, [ %w[ Note note ], %w[ Essay essay ] ] %>
+    <%= form.check_box :published %>
+    <div class="field field--invalid">
+      <label for="specimen_refused">Refused</label>
+      <input id="specimen_refused" type="text" aria-invalid="true" aria-describedby="specimen_refused_error">
+      <p class="field__error" id="specimen_refused_error">Refused cannot be blank</p>
+    </div>
+    <div class="run">
+      <%= form.submit "Save" %>
+      <button type="button" class="button button--quiet">Cancel</button>
+    </div>
+  <% end %>
+</section>

data/app/views/its_swiss/specimen/_grid.html.erb

@@ -0,0 +1,14 @@
+<section data-specimen="grid">
+  <h3>Grid primitives</h3>
+  <p class="hint">
+    The library ships the machinery and never the grid. This page declares
+    <code>--columns: <%= 6 %></code>; a child says how many fields it takes
+    with <code>--span</code>, and a child that says nothing runs the field.
+  </p>
+  <div class="grid specimen__grid">
+    <% 6.times do %><span style="--span: 1"><span class="specimen__field"></span></span><% end %>
+    <span style="--span: 2"><span class="specimen__field"></span></span>
+    <span style="--span: 4"><span class="specimen__field"></span></span>
+    <span><span class="specimen__field"></span></span>
+  </div>
+</section>

data/app/views/its_swiss/specimen/_masthead.html.erb

@@ -0,0 +1,15 @@
+<section data-specimen="masthead">
+  <h3>Masthead and navigation</h3>
+  <header class="masthead">
+    <p class="masthead__mark"><a href="#masthead">Wordmark</a></p>
+    <nav class="nav">
+      <a href="#masthead" aria-current="page">Where you are</a>
+      <a href="#masthead">Somewhere else</a>
+      <a href="#masthead">And another</a>
+    </nav>
+  </header>
+  <p class="hint">
+    The current destination carries the accent and the weight. Two signals,
+    because colour alone is not one.
+  </p>
+</section>

data/app/views/its_swiss/specimen/_messages.html.erb

@@ -0,0 +1,13 @@
+<section data-specimen="messages">
+  <h3>What a page has to say</h3>
+  <p class="hint" role="status">It worked. This does not interrupt.</p>
+  <div class="errors">
+    <p class="errors__title">2 problems stopped this being saved.</p>
+    <ul>
+      <li>Name cannot be blank</li>
+      <li>Name is already taken</li>
+    </ul>
+  </div>
+  <p class="empty">Nothing here yet.</p>
+  <hr>
+</section>

data/app/views/its_swiss/specimen/_pagination.html.erb

@@ -0,0 +1,4 @@
+<section data-specimen="pagination">
+  <h3>Pagination</h3>
+  <%= render "its_swiss/shared/pagination", page: 4, pages: 20, url: ->(n) { "#page-#{n}" } %>
+</section>

data/app/views/its_swiss/specimen/_pairs.html.erb

@@ -0,0 +1,8 @@
+<section data-specimen="pairs">
+  <h3>Definition list</h3>
+  <dl class="pairs">
+    <dt>Baseline</dt><dd>8px. Everything vertical is a whole number of these.</dd>
+    <dt>Measure</dt><dd>Three fields wide, derived from the page rather than chosen.</dd>
+    <dt>Accent</dt><dd>State and emphasis only. The consumer's to set.</dd>
+  </dl>
+</section>

data/app/views/its_swiss/specimen/_table.html.erb

@@ -0,0 +1,15 @@
+<section data-specimen="table">
+  <h3>Table</h3>
+  <table class="table">
+    <caption>Ruled horizontally, never vertically. No zebra: a filled row is a filled area.</caption>
+    <thead>
+      <tr><th scope="col">Token</th><th scope="col">Step</th><th scope="col" class="numeric">Lightness</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Paper</td><td><code>--value-0</code></td><td class="numeric">98%</td></tr>
+      <tr><td>Hairline</td><td><code>--value-2</code></td><td class="numeric">89%</td></tr>
+      <tr><td>Quiet ink</td><td><code>--value-4</code></td><td class="numeric">54%</td></tr>
+      <tr><td>Ink</td><td><code>--value-5</code></td><td class="numeric">18%</td></tr>
+    </tbody>
+  </table>
+</section>

data/app/views/its_swiss/specimen/_take.html.erb

@@ -0,0 +1,19 @@
+<section data-specimen-take="<%= take %>" <%= tag.attributes(style: ("--accent: #{accent}" if accent)) %>>
+  <hr class="rule--heavy">
+  <h2><%= take.humanize %></h2>
+  <p class="hint"><%= caption %></p>
+
+  <%# Every section is rendered in both takes from the same partials, or the
+      second take is not a comparison — it is a different page. %>
+  <%= render "its_swiss/specimen/values" %>
+  <%= render "its_swiss/specimen/type" %>
+  <%= render "its_swiss/specimen/grid" %>
+  <%= render "its_swiss/specimen/masthead" %>
+  <%= render "its_swiss/specimen/buttons" %>
+  <%= render "its_swiss/specimen/form" %>
+  <%= render "its_swiss/specimen/table" %>
+  <%= render "its_swiss/specimen/pairs" %>
+  <%= render "its_swiss/specimen/pagination" %>
+  <%= render "its_swiss/specimen/messages" %>
+  <%= render "its_swiss/specimen/footer" %>
+</section>

data/app/views/its_swiss/specimen/_type.html.erb

@@ -0,0 +1,24 @@
+<section data-specimen="type">
+  <h3>Type scale</h3>
+  <p class="hint">
+    Five sizes on an alternating 1.33 / 1.5 ratio. Every line box is a whole
+    number of baselines.
+  </p>
+  <%# The rung and the line box it is set on. Written out rather than derived,
+      because the ladder is not every whole number: there is no --space-7, and
+      asking for one silently drops the line box back to the browser's. %>
+  <% { 1 => [ 2, "Labels and metadata" ], 2 => [ 3, "Body copy" ], 3 => [ 4, "Section" ],
+       4 => [ 5, "Subhead" ], 5 => [ 6, "Page title" ] }.each do |step, (leading, name)| %>
+    <p data-size="<%= step %>" style="font-size: var(--size-<%= step %>); line-height: var(--space-<%= leading %>)">
+      <%= name %> — <code>--size-<%= step %></code> on <code>--space-<%= leading %></code>
+    </p>
+  <% end %>
+
+  <h4>Registers</h4>
+  <p>Body. The measure holds prose to three fields, which is where it stops rather than where the window does.</p>
+  <p class="quiet">Quiet. This is secondary.</p>
+  <p class="micro">Micro. Labels, metadata, captions — never capitals.</p>
+  <p class="hint">Hint. What a field needs said about it.</p>
+  <p class="tabular">Tabular 0123456789 — figures read down a column.</p>
+  <p><%= link_to "A link keeps its underline", "#type", class: "link-quiet" %> and a button does not.</p>
+</section>

data/app/views/its_swiss/specimen/_values.html.erb

@@ -0,0 +1,18 @@
+<section data-specimen="values">
+  <h3>Value scale</h3>
+  <p class="hint">
+    Six steps of OKLCH lightness, paper to ink. Neutral as shipped; a consumer
+    warms the whole ladder with <code>--value-chroma</code> and
+    <code>--value-hue</code>.
+  </p>
+  <dl class="pairs">
+    <% (0..5).each do |step| %>
+      <dt data-value="<%= step %>"><code>--value-<%= step %></code></dt>
+      <dd>
+        <span class="specimen__value" style="background: var(--value-<%= step %>)"></span>
+      </dd>
+    <% end %>
+    <dt><code>--accent</code></dt>
+    <dd><span class="specimen__value" style="background: var(--accent)"></span></dd>
+  </dl>
+</section>

data/app/views/its_swiss/specimen/show.html.erb

@@ -0,0 +1,27 @@
+<% content_for :title, "its-swiss specimen" %>
+<%# The specimen's own furniture, loaded only here: none of it is a component
+    an application should reach for. %>
+<% content_for :head, stylesheet_link_tag("its_swiss/specimen") %>
+<% content_for :mark, link_to("its-swiss", specimen_path) %>
+<% content_for :nav do %>
+  <%= nav_link_to "Specimen", specimen_path %>
+<% end %>
+<% content_for :footer, "its-swiss #{ItsSwiss::VERSION} — the specimen is the documentation and the regression fixture." %>
+
+<h1 class="page-title">its-swiss</h1>
+<p class="lede">
+  Every component the library ships, the type scale, the value scale and the
+  grid primitives — rendered twice. The first take is the library exactly as
+  it ships, with the accent slot left unfilled and collapsed onto ink. The
+  second sets an accent. If the first reads correctly, the values are doing
+  the work.
+</p>
+
+<%# The second take differs by one custom property. Not a second stylesheet
+    and not a modifier class: the accent is one slot, and the comparison is
+    only honest if that is all that changed between them. %>
+<%= render "its_swiss/specimen/take", take: "monochrome", accent: nil,
+      caption: "Accent unset. The library ships like this: --accent falls back to ink." %>
+
+<%= render "its_swiss/specimen/take", take: "accent", accent: "oklch(57.7% 0.234 28)",
+      caption: "Accent set to a signal red. Nothing else changed." %>

data/app/views/layouts/its_swiss/shell.html.erb

@@ -0,0 +1,55 @@
+<%#
+  The shell. Everything an application's own layout would otherwise have to
+  remember: the view transition opt-in, the stylesheets in layer order, a way
+  past the masthead for a keyboard, and the two things a page has to say.
+
+  Slots, all optional:
+
+    :title       the page's title; falls back to the application's name
+    :head        anything else that belongs in <head>
+    :mark        the wordmark. No mark and no nav means no masthead at all
+    :nav         the destinations
+    :main_class  what the page's main region is, if it is a grid
+    :footer      whatever belongs after the page
+
+  It stops there. A page layout beyond this shell is the application's, for
+  the same reason its grid is.
+%>
+<!DOCTYPE html>
+<html lang="<%= I18n.locale %>">
+  <head>
+    <title><%= content_for(:title) || its_swiss_application_name %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+
+    <%# Opts every same-origin navigation into the View Transitions API.
+        Turbo reads this tag; transitions.css covers the same navigation with
+        JavaScript switched off. %>
+    <meta name="view-transition" content="same-origin">
+
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= yield :head %>
+
+    <%= its_swiss_stylesheet_tags %>
+    <%= javascript_importmap_tags if respond_to?(:javascript_importmap_tags) %>
+  </head>
+
+  <body>
+    <%# Before anything else in the document, so it is the first thing a
+        keyboard reaches. Off screen until it is focused, at which point it
+        has to be somewhere you can read it. %>
+    <a class="skip-link" href="#main">Skip to content</a>
+
+    <%= render "its_swiss/shared/masthead" %>
+
+    <main id="main" class="page <%= content_for(:main_class) %>">
+      <%= render "its_swiss/shared/flash" %>
+      <%= yield %>
+    </main>
+
+    <% if content_for?(:footer) %>
+      <footer class="footer page"><%= content_for(:footer) %></footer>
+    <% end %>
+  </body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,5 @@
+# The library's whole JavaScript surface. A typographic system does not need
+# script to set type; this is here because a value that exists to be taken
+# somewhere else should be a button that copies itself, and that cannot be
+# done in CSS.
+pin "its_swiss/clipboard_controller", to: "its_swiss/clipboard_controller.js"

data/config/routes.rb

@@ -0,0 +1,6 @@
+ItsSwiss::Engine.routes.draw do
+  # Mounted by the installer under `if Rails.env.development?`, and refused by
+  # the controller as well: a route is a line in a file someone can move, and
+  # the specimen names every component the library has.
+  get "specimen", to: "specimen#show", as: :specimen
+end