From 27854cf5f509a2e891a9115e76a872e4a3c1fed2 Mon Sep 17 00:00:00 2001
From: Masterluke77 <163446896+Masterluke77@users.noreply.github.com>
Date: Sun, 12 Jul 2026 09:50:19 +0200
Subject: [PATCH] style(ux): add responsive template workspace

---
 public/template-workspace.css | 473 ++++++++++++++++++++++++++++++++++
 1 file changed, 473 insertions(+)
 create mode 100644 public/template-workspace.css

diff --git a/public/template-workspace.css b/public/template-workspace.css
new file mode 100644
index 0000000..42e51c3
--- /dev/null
+++ b/public/template-workspace.css
@@ -0,0 +1,473 @@
+#templates.ux-template-workspace-ready {
+  display: grid;
+  gap: var(--vd-space-5, 20px);
+}
+
+#templates .ux-template-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--vd-space-5, 20px);
+  padding: clamp(20px, 3vw, 34px);
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: var(--vd-radius-xl, 20px);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--vd-color-surface, var(--surface)) 94%, var(--vd-color-accent, var(--accent)) 6%), var(--vd-color-surface, var(--surface)));
+  box-shadow: var(--vd-shadow-sm, 0 8px 24px rgba(15, 23, 42, .06));
+}
+
+#templates .ux-template-hero-copy {
+  min-width: 0;
+}
+
+#templates .ux-template-kicker {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--vd-color-accent, var(--accent));
+  font-size: .72rem;
+  font-weight: 800;
+  letter-spacing: .09em;
+  text-transform: uppercase;
+}
+
+#templates .ux-template-hero h2,
+#templates .ux-template-editor-head h3 {
+  margin: 0;
+  color: var(--vd-color-text, var(--text));
+}
+
+#templates .ux-template-hero p,
+#templates .ux-template-editor-head p {
+  max-width: 720px;
+  margin: 8px 0 0;
+  color: var(--vd-color-text-muted, var(--text-muted));
+  line-height: 1.55;
+}
+
+#templates .ux-template-metrics {
+  display: flex;
+  gap: 10px;
+}
+
+#templates .ux-template-metric {
+  min-width: 112px;
+  padding: 12px 14px;
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: var(--vd-radius-lg, 14px);
+  background: color-mix(in srgb, var(--vd-color-surface, var(--surface)) 88%, transparent);
+}
+
+#templates .ux-template-metric strong,
+#templates .ux-template-metric span {
+  display: block;
+}
+
+#templates .ux-template-metric strong {
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+#templates .ux-template-metric span {
+  margin-top: 5px;
+  color: var(--vd-color-text-muted, var(--text-muted));
+  font-size: .72rem;
+}
+
+#templates .ux-template-primary-action {
+  white-space: nowrap;
+}
+
+#templates .ux-template-toolbar {
+  display: grid;
+  grid-template-columns: minmax(240px, 1fr) auto;
+  align-items: end;
+  gap: 16px;
+  padding: 16px;
+}
+
+#templates .ux-template-search,
+#templates .ux-template-filter-controls label {
+  display: grid;
+  gap: 6px;
+}
+
+#templates .ux-template-search > span,
+#templates .ux-template-filter-controls label > span {
+  color: var(--vd-color-text-muted, var(--text-muted));
+  font-size: .72rem;
+  font-weight: 700;
+}
+
+#templates .ux-template-search input,
+#templates .ux-template-filter-controls select {
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: var(--vd-radius-md, 10px);
+  background: var(--vd-color-surface, var(--surface));
+  color: var(--vd-color-text, var(--text));
+}
+
+#templates .ux-template-filter-controls {
+  display: flex;
+  align-items: end;
+  gap: 10px;
+}
+
+#templates .ux-template-result-count {
+  min-width: 92px;
+  padding: 11px 12px;
+  border-radius: 999px;
+  background: var(--vd-color-surface-muted, var(--surface-2));
+  color: var(--vd-color-text-muted, var(--text-muted));
+  font-size: .78rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+#templates #template-list.template-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
+  gap: 14px;
+}
+
+#templates .ux-template-card {
+  display: grid;
+  align-content: space-between;
+  min-height: 174px;
+  overflow: visible;
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: var(--vd-radius-lg, 15px);
+  background: var(--vd-color-surface, var(--surface));
+  box-shadow: var(--vd-shadow-xs, 0 3px 12px rgba(15, 23, 42, .05));
+  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
+}
+
+#templates .ux-template-card:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--vd-color-accent, var(--accent)) 42%, var(--vd-color-border, var(--border)));
+  box-shadow: var(--vd-shadow-sm, 0 8px 24px rgba(15, 23, 42, .08));
+}
+
+#templates .ux-template-card-head {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+}
+
+#templates .ux-template-card-identity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+#templates .ux-template-card-mark {
+  display: grid;
+  place-items: center;
+  flex: 0 0 42px;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--vd-color-accent, var(--accent)) 13%, var(--vd-color-surface, var(--surface)));
+  color: var(--vd-color-accent, var(--accent));
+  font-size: .78rem;
+  font-weight: 850;
+  letter-spacing: .04em;
+}
+
+#templates .ux-template-card .tpl-info {
+  min-width: 0;
+}
+
+#templates .ux-template-card .tpl-name {
+  overflow: hidden;
+  color: var(--vd-color-text, var(--text));
+  font-size: 1rem;
+  font-weight: 760;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#templates .ux-template-card .tpl-meta {
+  margin-top: 4px;
+  color: var(--vd-color-text-muted, var(--text-muted));
+  font-size: .76rem;
+}
+
+#templates .ux-template-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+}
+
+#templates .ux-template-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 4px 9px;
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: 999px;
+  background: var(--vd-color-surface-muted, var(--surface-2));
+  color: var(--vd-color-text-muted, var(--text-muted));
+  font-size: .69rem;
+  font-weight: 720;
+}
+
+#templates .ux-template-badge.is-universal {
+  border-color: color-mix(in srgb, var(--vd-color-accent, var(--accent)) 35%, var(--vd-color-border, var(--border)));
+  color: var(--vd-color-accent, var(--accent));
+}
+
+#templates .ux-template-badge.is-language {
+  min-width: 34px;
+  justify-content: center;
+  font-weight: 850;
+}
+
+#templates .ux-template-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 14px;
+  border-top: 1px solid var(--vd-color-border, var(--border));
+  background: color-mix(in srgb, var(--vd-color-surface-muted, var(--surface-2)) 62%, transparent);
+}
+
+#templates .ux-template-edit {
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+#templates .ux-template-more-actions {
+  position: relative;
+}
+
+#templates .ux-template-more-actions summary {
+  min-height: 34px;
+  padding: 8px 10px;
+  border-radius: 9px;
+  color: var(--vd-color-text-muted, var(--text-muted));
+  cursor: pointer;
+  font-size: .72rem;
+  font-weight: 700;
+  list-style: none;
+}
+
+#templates .ux-template-more-actions summary::-webkit-details-marker {
+  display: none;
+}
+
+#templates .ux-template-more-actions[open] summary {
+  background: var(--vd-color-surface, var(--surface));
+}
+
+#templates .ux-template-more-actions-body {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 7px);
+  z-index: 8;
+  min-width: 150px;
+  padding: 8px;
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: 11px;
+  background: var(--vd-color-surface, var(--surface));
+  box-shadow: var(--vd-shadow-md, 0 16px 38px rgba(15, 23, 42, .16));
+}
+
+#templates .ux-template-more-actions-body button {
+  width: 100%;
+}
+
+#templates .ux-template-filtered-out {
+  display: none !important;
+}
+
+#templates .ux-template-editor-open .ux-template-toolbar,
+#templates .ux-template-editor-open #template-list,
+#templates .ux-template-editor-open .ux-template-metrics {
+  display: none !important;
+}
+
+#templates .ux-template-list-open #template-form {
+  display: none;
+}
+
+#templates #template-form.ux-template-form,
+#templates #template-form {
+  width: 100%;
+  max-width: none;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+#templates .ux-template-editor-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  padding: clamp(20px, 3vw, 30px);
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: var(--vd-radius-xl, 20px);
+  background: var(--vd-color-surface, var(--surface));
+}
+
+#templates .ux-template-editor-status {
+  max-width: 320px;
+  padding: 9px 12px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--vd-color-success, #16835a) 12%, var(--vd-color-surface, var(--surface)));
+  color: var(--vd-color-success, #16835a);
+  font-size: .76rem;
+  font-weight: 750;
+  text-align: right;
+}
+
+#templates .ux-template-editor-status.is-incomplete {
+  background: color-mix(in srgb, var(--vd-color-warning, #b76a00) 12%, var(--vd-color-surface, var(--surface)));
+  color: var(--vd-color-warning, #9a5a00);
+}
+
+#templates .ux-template-editor-layout {
+  display: grid;
+  grid-template-columns: minmax(260px, .82fr) minmax(340px, 1.18fr);
+  gap: 16px;
+  margin-top: 16px;
+}
+
+#templates .ux-template-editor-section {
+  display: grid;
+  align-content: start;
+  gap: 16px;
+  padding: 20px;
+}
+
+#templates .ux-template-section-heading {
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--vd-color-border, var(--border));
+  color: var(--vd-color-text, var(--text));
+  font-size: .84rem;
+  font-weight: 800;
+}
+
+#templates .ux-template-editor-section .setting-group {
+  margin: 0;
+}
+
+#templates .ux-template-editor-section input,
+#templates .ux-template-editor-section select {
+  width: 100%;
+}
+
+#templates .ux-template-content-section #tpl-notes-editor {
+  min-height: 180px !important;
+}
+
+#templates .ux-template-editor-actions {
+  position: sticky;
+  bottom: 14px;
+  z-index: 7;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 16px;
+  padding: 12px;
+  border: 1px solid var(--vd-color-border, var(--border));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--vd-color-surface, var(--surface)) 94%, transparent);
+  box-shadow: var(--vd-shadow-md, 0 14px 36px rgba(15, 23, 42, .13));
+  backdrop-filter: blur(12px);
+}
+
+#templates :focus-visible {
+  outline: 3px solid color-mix(in srgb, var(--vd-color-accent, var(--accent)) 42%, transparent);
+  outline-offset: 2px;
+}
+
+@media (max-width: 920px) {
+  #templates .ux-template-hero {
+    grid-template-columns: 1fr auto;
+  }
+
+  #templates .ux-template-metrics {
+    grid-column: 1 / -1;
+    grid-row: 2;
+  }
+
+  #templates .ux-template-editor-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 700px) {
+  #templates .ux-template-hero,
+  #templates .ux-template-toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  #templates .ux-template-primary-action {
+    width: 100%;
+  }
+
+  #templates .ux-template-filter-controls {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  #templates .ux-template-result-count {
+    grid-column: 1 / -1;
+  }
+
+  #templates .ux-template-editor-head {
+    display: grid;
+  }
+
+  #templates .ux-template-editor-status {
+    max-width: none;
+    text-align: left;
+  }
+}
+
+@media (max-width: 470px) {
+  #templates .ux-template-metrics,
+  #templates .ux-template-filter-controls {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  #templates .ux-template-metric {
+    min-width: 0;
+  }
+
+  #templates #template-list.template-list {
+    grid-template-columns: 1fr;
+  }
+
+  #templates .ux-template-card-footer,
+  #templates .ux-template-editor-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  #templates .ux-template-more-actions,
+  #templates .ux-template-more-actions summary,
+  #templates .ux-template-editor-actions button {
+    width: 100%;
+  }
+
+  #templates .ux-template-more-actions-body {
+    right: auto;
+    left: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #templates .ux-template-card {
+    transition: none;
+  }
+
+  #templates .ux-template-card:hover {
+    transform: none;
+  }
+}