studio-engine 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 382ba5d1064ff3ef73e0d5d7622b44da80477a9915a7a619a08aad9caebe40ca
4
- data.tar.gz: 041e44a225267824d720079316e66dbd598402f2710dc5e668e5302cb75a47ed
3
+ metadata.gz: 51c0e518d2b2f2f0868ec4b737e3b6f10a2987a01ab46d34ef49d9c3e7418e01
4
+ data.tar.gz: 6daa86afc8e098c6245622afa579653f4f24cb89549bb06342bb2603dd209d7e
5
5
  SHA512:
6
- metadata.gz: 7d2a59ad47d5ee598deaf0f81a9fce457ef81a183afa109d9ab5322845140fe5e27920e893fb29df45b6d8b3c70b52bfcd1b6ead57981652466455ed8037ba3c
7
- data.tar.gz: 630d7bf20e4d5a881a7efc790f4fb4ced77f6832b0608bae449a8256b129caa3b3b3b19d1b52b4b7128e5901324683514c84ffaedea6eaf593403fb62af0f22f
6
+ metadata.gz: 5eba2d0865c2d8cadd1eab36aeaf2be50fb44fd9dfc8eb77ff05c4cbc54c17c5127c2deb473c988b0e663b8c8a8d1b4d54297130db01932bb2462d0a9f34400f
7
+ data.tar.gz: 190ff612d9dbdef59bb7599e018f82c01d3e4d47900bcf4c77ec7cdda0231c71877919da4ae4b0aaf36006f6c72c6db558f39a39ba80838336725e49dd2546c2
data/CHANGELOG.md CHANGED
@@ -2,6 +2,29 @@
2
2
 
3
3
  The format is [Keep a Changelog](https://keepachangelog.com/en/1.1.0/). This project follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html) — `MAJOR.MINOR.PATCH`. Consumer Rails apps install the released RubyGems package with `gem "studio-engine", "~> 0.6"`; bumping the gem version and updating consumer lockfiles is a release.
4
4
 
5
+ ## 0.17.0 — 2026-07-27
6
+
7
+ ### Added
8
+
9
+ - **`admin/design_system` — the living style guide (first slice).** A new
10
+ admin-gated page (`DesignSystemController#index`, route
11
+ `admin_design_system_path`) that renders the engine's shared UI primitives
12
+ live in the host app's theme. The route is propagated to every consumer by
13
+ `Studio.routes`, and the view is a bare content wrapper that renders inside
14
+ each host's `application.html.erb`, inheriting that app's navbar + theme. This
15
+ slice ships the **Style** section — a grouped, live gallery where each
16
+ specimen shows the rendered primitive, its class name, and a copyable usage
17
+ snippet: **Buttons** (`.btn` + every role variant + `.btn-sm` / `.btn-lg`
18
+ sizes), **Surfaces / text / form** (`.card`, `.card-hover`, `.badge`,
19
+ `.input-field`, `.empty-state`, `.label-upper`), the seven **Motion**
20
+ primitives from `engine-motion.css` (`.studio-border-glow`, `.spinner`,
21
+ `.loading-dots`, `.sheen`, `.ping`, `.fade-edge-*`, `.progress-meter`) each
22
+ with tunable CSS-var knobs demonstrated, and the seven **Theme tokens** as
23
+ swatches read live off `var(--color-*)`. Specimens use ONLY the engine's own
24
+ classes, so a consumer that bundles `engine.css` and imports
25
+ `engine-motion.css` styles them for real (nothing is inlined). The Modals,
26
+ Theme, and Tasks sections are later slices.
27
+
5
28
  ## 0.16.0 — 2026-07-26
6
29
 
7
30
  ### Added
@@ -0,0 +1,12 @@
1
+ # The living style guide — a single admin-gated page that renders the engine's
2
+ # shared UI primitives (buttons, surfaces, the seven motion primitives, and the
3
+ # theme role tokens) live in the host app's theme. Mirrors ThemeSettingsController:
4
+ # a plain host-inherited controller, gated by `require_admin` from the already-
5
+ # included Studio::ErrorHandling concern. The view is a bare content wrapper that
6
+ # renders inside each host's application.html.erb, so it inherits that app's
7
+ # navbar + theme automatically.
8
+ class DesignSystemController < ApplicationController
9
+ before_action :require_admin
10
+
11
+ def index; end
12
+ end
@@ -0,0 +1,27 @@
1
+ <%# Specimen card for the living style guide (admin/design_system).
2
+ Reusable chrome around ONE primitive:
3
+ stage - the rendered primitive (yielded from the caller block)
4
+ meta - its class name and a copyable usage snippet
5
+ locals: klass (String, required) and usage (String, optional).
6
+ Rendered via `render layout: "design_system/specimen"` so the caller's
7
+ block becomes the staged primitive. Checks local_assigns (never
8
+ block_given?) so a shared partial does not inherit the host layout yield. %>
9
+ <article class="card overflow-hidden flex flex-col">
10
+ <div class="flex flex-1 flex-wrap items-center justify-center gap-4 p-6 bg-surface-alt min-h-32">
11
+ <%= yield %>
12
+ </div>
13
+ <div class="border-t border-subtle p-3 space-y-2">
14
+ <code class="block font-mono text-2xs text-heading break-all"><%= local_assigns[:klass] %></code>
15
+ <% snippet = local_assigns[:usage] %>
16
+ <% if snippet.present? %>
17
+ <div class="relative" x-data="{ copied: false }">
18
+ <pre class="bg-inset text-body text-2xs rounded-lg px-3 py-2 pr-16 overflow-x-auto"><code x-ref="snippet"><%= snippet %></code></pre>
19
+ <button type="button"
20
+ class="btn btn-neutral btn-sm absolute top-2 right-2"
21
+ @click="navigator.clipboard?.writeText($refs.snippet.innerText); copied = true; setTimeout(() => copied = false, 1200)">
22
+ <span x-text="copied ? 'Copied' : 'Copy'">Copy</span>
23
+ </button>
24
+ </div>
25
+ <% end %>
26
+ </div>
27
+ </article>
@@ -0,0 +1,232 @@
1
+ <%# admin/design_system - the living style guide (slice A: shell + Style section).
2
+ A bare content wrapper (no `layout` call): it renders inside each host's
3
+ application.html.erb, inheriting that app's navbar and theme, so every
4
+ specimen restyles per app and in dark or light automatically.
5
+
6
+ Specimens use ONLY the engine's own classes (engine.css component layer plus
7
+ engine-motion.css motion layer), so a consumer that bundles engine.css and
8
+ imports engine-motion.css styles them for real. The primitive CSS is NOT
9
+ inlined here - the consumer's Tailwind build provides it. Page chrome uses
10
+ the engine's own .card / .label-upper / theme tokens. %>
11
+ <%
12
+ button_variants = {
13
+ "primary" => "Primary",
14
+ "secondary" => "Secondary",
15
+ "success" => "Success",
16
+ "danger" => "Danger",
17
+ "warning" => "Warning",
18
+ "neutral" => "Neutral",
19
+ "outline" => "Outline",
20
+ "google" => "Continue with Google"
21
+ }
22
+
23
+ # The 7 theme role tokens, read LIVE off the host theme so each swatch restyles
24
+ # per app and in dark/light. Names verified against Studio::ThemeResolver
25
+ # (the heading role reads --color-text; there is no --color-heading var).
26
+ theme_tokens = [
27
+ ["--color-cta", "CTA / primary action"],
28
+ ["--color-surface", "Surface"],
29
+ ["--color-success", "Success"],
30
+ ["--color-danger", "Danger"],
31
+ ["--color-warning", "Warning"],
32
+ ["--color-text", "Heading / text"],
33
+ ["--color-border-strong", "Border (strong)"]
34
+ ]
35
+ %>
36
+ <div class="max-w-6xl mx-auto px-4 py-8 space-y-14">
37
+ <header class="space-y-2">
38
+ <p class="label-upper">studio-engine &middot; v<%= Studio::VERSION %></p>
39
+ <h1 class="text-3xl font-bold text-heading">Design System</h1>
40
+ <p class="text-body max-w-2xl">
41
+ A living gallery of the shared UI primitives, rendered live in this app's
42
+ theme. Everything below is styled by the engine's own
43
+ <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">engine.css</code>
44
+ and
45
+ <code class="font-mono text-2xs bg-inset px-1.5 py-0.5 rounded">engine-motion.css</code>
46
+ layers - toggle this app between light and dark and every specimen follows.
47
+ </p>
48
+ </header>
49
+
50
+ <!-- Buttons -->
51
+ <section class="space-y-5">
52
+ <div class="space-y-1">
53
+ <h2 class="text-xl font-bold text-heading">Buttons</h2>
54
+ <p class="text-muted text-sm">
55
+ <code class="font-mono text-2xs">.btn</code> base plus one role variant, and the
56
+ <code class="font-mono text-2xs">.btn-sm</code> / <code class="font-mono text-2xs">.btn-lg</code> sizes.
57
+ </p>
58
+ </div>
59
+ <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
60
+ <% button_variants.each do |name, label| %>
61
+ <%= render layout: "design_system/specimen",
62
+ locals: { klass: ".btn .btn-#{name}",
63
+ usage: %(<button class="btn btn-#{name}">#{label}</button>) } do %>
64
+ <button type="button" class="btn btn-<%= name %>"><%= label %></button>
65
+ <% end %>
66
+ <% end %>
67
+
68
+ <%= render layout: "design_system/specimen",
69
+ locals: { klass: ".btn-sm / .btn (default) / .btn-lg",
70
+ usage: %(<button class="btn btn-primary btn-sm">Small</button>\n<button class="btn btn-primary">Default</button>\n<button class="btn btn-primary btn-lg">Large</button>) } do %>
71
+ <div class="flex flex-wrap items-center justify-center gap-3">
72
+ <button type="button" class="btn btn-primary btn-sm">Small</button>
73
+ <button type="button" class="btn btn-primary">Default</button>
74
+ <button type="button" class="btn btn-primary btn-lg">Large</button>
75
+ </div>
76
+ <% end %>
77
+ </div>
78
+ </section>
79
+
80
+ <!-- Surfaces, text and form -->
81
+ <section class="space-y-5">
82
+ <div class="space-y-1">
83
+ <h2 class="text-xl font-bold text-heading">Surfaces, text &amp; form</h2>
84
+ <p class="text-muted text-sm">Cards, badges, inputs, the empty state, and the uppercase meta label.</p>
85
+ </div>
86
+ <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
87
+ <%= render layout: "design_system/specimen",
88
+ locals: { klass: ".card", usage: %(<div class="card p-5">...</div>) } do %>
89
+ <div class="card p-5 text-sm text-body w-full max-w-xs text-center">Surface card</div>
90
+ <% end %>
91
+
92
+ <%= render layout: "design_system/specimen",
93
+ locals: { klass: ".card-hover", usage: %(<div class="card-hover p-5">...</div>) } do %>
94
+ <div class="card-hover p-5 text-sm text-body w-full max-w-xs text-center">Hover me</div>
95
+ <% end %>
96
+
97
+ <%= render layout: "design_system/specimen",
98
+ locals: { klass: ".badge", usage: %(<span class="badge">Neutral</span>) } do %>
99
+ <div class="flex flex-wrap items-center justify-center gap-2">
100
+ <span class="badge text-body">Neutral</span>
101
+ <span class="badge" style="color: var(--color-success); border-color: var(--color-success)">Success</span>
102
+ <span class="badge" style="color: var(--color-warning); border-color: var(--color-warning)">Warning</span>
103
+ <span class="badge" style="color: var(--color-danger); border-color: var(--color-danger)">Danger</span>
104
+ </div>
105
+ <% end %>
106
+
107
+ <%= render layout: "design_system/specimen",
108
+ locals: { klass: ".input-field", usage: %(<input class="input-field" placeholder="you@example.com">) } do %>
109
+ <input type="text" class="input-field" placeholder="you@example.com" aria-label="Sample input">
110
+ <% end %>
111
+
112
+ <%= render layout: "design_system/specimen",
113
+ locals: { klass: ".label-upper", usage: %(<p class="label-upper">Section label</p>) } do %>
114
+ <p class="label-upper">Section label</p>
115
+ <% end %>
116
+
117
+ <%= render layout: "design_system/specimen",
118
+ locals: { klass: ".empty-state", usage: %(<div class="empty-state">Nothing here yet</div>) } do %>
119
+ <div class="empty-state w-full max-w-xs text-sm text-muted">Nothing here yet</div>
120
+ <% end %>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- Motion primitives -->
125
+ <section class="space-y-5">
126
+ <div class="space-y-1">
127
+ <h2 class="text-xl font-bold text-heading">Motion primitives</h2>
128
+ <p class="text-muted text-sm">
129
+ The seven <code class="font-mono text-2xs">engine-motion.css</code> primitives. Each knob is a themeable
130
+ CSS variable - tune it inline with <code class="font-mono text-2xs">style="--knob: value"</code>.
131
+ </p>
132
+ </div>
133
+ <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
134
+ <%= render layout: "design_system/specimen",
135
+ locals: { klass: ".studio-border-glow (rounded-xl wrapper)",
136
+ usage: %(<div class="studio-border-glow rounded-xl">...</div>) } do %>
137
+ <div class="studio-border-glow rounded-xl p-5 bg-surface text-center text-sm text-heading">Border glow</div>
138
+ <% end %>
139
+
140
+ <%= render layout: "design_system/specimen",
141
+ locals: { klass: ".spinner (knob: --spinner-size)",
142
+ usage: %(<span class="spinner"></span>\n<span class="spinner" style="--spinner-size: 2rem"></span>) } do %>
143
+ <span class="spinner"></span>
144
+ <span class="spinner" style="--spinner-size: 1.6rem"></span>
145
+ <span class="spinner" style="--spinner-size: 2.4rem; --spinner-thickness: 3px"></span>
146
+ <button type="button" class="btn btn-primary">
147
+ <span class="spinner" style="--spinner-color: currentColor; --spinner-track: rgba(255,255,255,.35)"></span>
148
+ <span class="ml-2">Saving</span>
149
+ </button>
150
+ <% end %>
151
+
152
+ <%= render layout: "design_system/specimen",
153
+ locals: { klass: ".loading-dots (3 span children)",
154
+ usage: %(<span class="loading-dots"><span></span><span></span><span></span></span>) } do %>
155
+ <span class="loading-dots"><span></span><span></span><span></span></span>
156
+ <span class="loading-dots" style="--loading-dots-size: 12px; --loading-dots-color: var(--color-cta)"><span></span><span></span><span></span></span>
157
+ <% end %>
158
+
159
+ <%= render layout: "design_system/specimen",
160
+ locals: { klass: ".sheen .sheen--loop",
161
+ usage: %(<span class="sheen sheen--loop">...</span>) } do %>
162
+ <span class="sheen sheen--loop badge text-body">Level 5 unlocked</span>
163
+ <span class="sheen sheen--loop card px-4 py-2 text-sm text-body" style="--sheen-duration: 3s">Sheen sweep</span>
164
+ <% end %>
165
+
166
+ <%= render layout: "design_system/specimen",
167
+ locals: { klass: ".ping .ping--dot (knob: --ping-color)",
168
+ usage: %(<span class="ping ping--dot"></span>) } do %>
169
+ <span class="ping ping--dot"></span>
170
+ <span class="ping ping--dot" style="--ping-color: var(--color-success)"></span>
171
+ <span class="ping ping--dot" style="--ping-color: var(--color-danger); --ping-size: 0.9rem"></span>
172
+ <% end %>
173
+
174
+ <%= render layout: "design_system/specimen",
175
+ locals: { klass: ".fade-edge-{t,b,l,r,x,y} (knob: --fade-edge-size)",
176
+ usage: %(<div class="fade-edge-y overflow-y-auto">...long content...</div>) } do %>
177
+ <div class="fade-edge-y overflow-y-auto h-32 w-full max-w-xs bg-surface rounded-lg p-3 text-sm text-body space-y-2">
178
+ <p>Scroll me - the top and bottom edges dissolve.</p>
179
+ <p>The mask softens content near either end of the container.</p>
180
+ <p>No JavaScript, no gradient overlay - just a mask-image.</p>
181
+ <p>It masks the element itself, so it works over any background.</p>
182
+ <p>Keep scrolling to watch the fade track the edge.</p>
183
+ </div>
184
+ <% end %>
185
+
186
+ <%= render layout: "design_system/specimen",
187
+ locals: { klass: ".progress-meter (knob: --progress)",
188
+ usage: %(<div class="progress-meter" style="--progress: 62%">\n <div class="progress-meter-track"><span class="progress-meter-label">62%</span></div>\n <div class="progress-meter-fill"><span class="progress-meter-label">62%</span></div>\n</div>) } do %>
189
+ <div class="w-full max-w-xs space-y-3">
190
+ <div class="progress-meter" style="--progress: 25%">
191
+ <div class="progress-meter-track"><span class="progress-meter-label">25%</span></div>
192
+ <div class="progress-meter-fill"><span class="progress-meter-label">25%</span></div>
193
+ </div>
194
+ <div class="progress-meter" style="--progress: 62%">
195
+ <div class="progress-meter-track"><span class="progress-meter-label">62%</span></div>
196
+ <div class="progress-meter-fill"><span class="progress-meter-label">62%</span></div>
197
+ </div>
198
+ <div class="progress-meter" style="--progress: 88%; --progress-fill: var(--color-success)">
199
+ <div class="progress-meter-track"><span class="progress-meter-label">88% complete</span></div>
200
+ <div class="progress-meter-fill"><span class="progress-meter-label">88% complete</span></div>
201
+ </div>
202
+ <div class="progress-meter progress-meter--indeterminate">
203
+ <div class="progress-meter-track"></div>
204
+ <div class="progress-meter-fill"></div>
205
+ </div>
206
+ </div>
207
+ <% end %>
208
+ </div>
209
+ </section>
210
+
211
+ <!-- Theme tokens -->
212
+ <section class="space-y-5">
213
+ <div class="space-y-1">
214
+ <h2 class="text-xl font-bold text-heading">Theme tokens</h2>
215
+ <p class="text-muted text-sm">
216
+ The 7 role colors, read live off this app's theme via <code class="font-mono text-2xs">var(--color-*)</code>.
217
+ Change the app or its light/dark mode and every swatch (and every specimen above) follows.
218
+ </p>
219
+ </div>
220
+ <div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
221
+ <% theme_tokens.each do |var, label| %>
222
+ <div class="card overflow-hidden">
223
+ <div class="h-16 border-b border-subtle" style="background: var(<%= var %>)"></div>
224
+ <div class="p-3 space-y-0.5">
225
+ <p class="text-sm text-heading font-medium"><%= label %></p>
226
+ <code class="font-mono text-2xs text-muted break-all"><%= var %></code>
227
+ </div>
228
+ </div>
229
+ <% end %>
230
+ </div>
231
+ </section>
232
+ </div>
@@ -1,3 +1,3 @@
1
1
  module Studio
2
- VERSION = "0.16.0"
2
+ VERSION = "0.17.0"
3
3
  end
data/lib/studio.rb CHANGED
@@ -324,6 +324,7 @@ module Studio
324
324
  patch "admin/theme", to: "theme_settings#update", as: :admin_theme_update
325
325
  post "admin/theme/regenerate", to: "theme_settings#regenerate", as: :admin_theme_regenerate
326
326
  get "admin/schema", to: "schema#index", as: :admin_schema
327
+ get "admin/design_system", to: "design_system#index", as: :admin_design_system
327
328
 
328
329
  # Admin-managed transactional-email banner images (Studio::EmailImage).
329
330
  # index lists each managed email variant + its current banner; update
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: studio-engine
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.16.0
4
+ version: 0.17.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Alex McRitchie
@@ -178,6 +178,7 @@ files:
178
178
  - app/controllers/concerns/studio/error_handling.rb
179
179
  - app/controllers/concerns/studio/impersonation.rb
180
180
  - app/controllers/concerns/studio/link_consumption.rb
181
+ - app/controllers/design_system_controller.rb
181
182
  - app/controllers/error_logs_controller.rb
182
183
  - app/controllers/magic_links_controller.rb
183
184
  - app/controllers/navbar_controller.rb
@@ -227,6 +228,8 @@ files:
227
228
  - app/views/components/_theme_toggle.html.erb
228
229
  - app/views/components/_theme_toggle_morph.html.erb
229
230
  - app/views/components/_user_nav.html.erb
231
+ - app/views/design_system/_specimen.html.erb
232
+ - app/views/design_system/index.html.erb
230
233
  - app/views/error_logs/index.html.erb
231
234
  - app/views/error_logs/show.html.erb
232
235
  - app/views/layouts/_navbar.html.erb