@dickpy/dsh-imagegen 1.2.3 → 1.4.0

package/src/client/templates.module.css

@@ -1,453 +1,453 @@
-/**
- * Prompt-template library styles. Same conventions as panel.module.css:
- * scoped box-sizing, dsh --dsw-* tokens, no leakage outside the overlay
- * subtree.
- */
-
-.overlay,
-.overlay *,
-.overlay *::before,
-.overlay *::after {
-  box-sizing: border-box;
-}
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 130;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 28px;
-  background: var(--dsw-alias-bg-mask-1);
-  color: var(--dsw-alias-label-primary);
-  font-family: var(--dsw-font-family);
-}
-
-.shell {
-  display: flex;
-  flex-direction: column;
-  width: min(1180px, 100%);
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 14px;
-  background: var(--dsw-alias-bg-base);
-  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
-}
-
-/* --- header ------------------------------------------------------------ */
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 14px 18px 10px;
-  flex: none;
-}
-
-.heading {
-  display: flex;
-  align-items: baseline;
-  gap: 10px;
-  min-width: 0;
-}
-
-.title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 650;
-}
-
-.meta {
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary);
-  white-space: nowrap;
-}
-
-.headerActions {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  flex: none;
-}
-
-.close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-}
-
-.close:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-}
-
-/* --- toolbar ----------------------------------------------------------- */
-
-.toolbar {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 0 18px 12px;
-  flex: none;
-}
-
-.search {
-  width: 100%;
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 9px;
-  background: var(--dsw-alias-bg-layer-1);
-  color: var(--dsw-alias-label-primary);
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-}
-
-.search:focus {
-  border-color: var(--dsw-alias-brand-primary);
-}
-
-.search::placeholder {
-  color: var(--dsw-alias-label-dimmed);
-}
-
-.categoryRow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  max-height: 64px;
-  overflow-y: auto;
-}
-
-.categoryPill {
-  height: 26px;
-  padding: 0 11px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 999px;
-  background: var(--dsw-alias-bg-layer-1);
-  color: var(--dsw-alias-label-secondary);
-  font-size: 12px;
-  font-family: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.categoryPill:hover {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.categoryPill[data-active] {
-  border-color: var(--dsw-alias-brand-primary);
-  background: var(--dsw-alias-brand-primary);
-  color: var(--dsw-alias-bg-base);
-}
-
-.notice {
-  margin: 0 18px 10px;
-  padding: 8px 12px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 9px;
-  background: var(--dsw-alias-bg-layer-1);
-  color: var(--dsw-alias-label-secondary);
-  font-size: 12px;
-  flex: none;
-}
-
-/* --- body / grid -------------------------------------------------------- */
-
-.body {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 2px 18px 14px;
-}
-
-.state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  height: 100%;
-  min-height: 220px;
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 13px;
-}
-
-.spinner {
-  width: 26px;
-  height: 26px;
-  border: 2px solid var(--dsw-alias-border-l2);
-  border-top-color: var(--dsw-alias-brand-primary);
-  border-radius: 50%;
-  animation: dsh-imagegen-templates-spin 0.9s linear infinite;
-}
-
-@keyframes dsh-imagegen-templates-spin {
-  to { transform: rotate(360deg); }
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-  gap: 12px;
-}
-
-.card {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 11px;
-  background: var(--dsw-alias-bg-layer-1);
-  cursor: pointer;
-  text-align: left;
-  font-family: inherit;
-  color: var(--dsw-alias-label-primary);
-  transition: border-color 0.15s ease, transform 0.15s ease;
-}
-
-.card:hover {
-  border-color: var(--dsw-alias-brand-primary);
-  transform: translateY(-1px);
-}
-
-.thumbWrap {
-  position: relative;
-  display: block;
-  width: 100%;
-  aspect-ratio: 1 / 1;
-  background: var(--dsw-alias-bg-layer-2);
-}
-
-.thumb {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumbPlaceholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--dsw-alias-label-dimmed);
-}
-
-.featuredBadge {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: var(--dsw-alias-brand-primary);
-  color: var(--dsw-alias-bg-base);
-  font-size: 11px;
-  font-weight: 600;
-}
-
-.cardBody {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 9px 11px 10px;
-  min-width: 0;
-}
-
-.cardTitle {
-  font-size: 12.5px;
-  font-weight: 600;
-  line-height: 1.35;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.cardMeta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-  font-size: 11px;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.cardCategory {
-  flex: none;
-  padding: 1px 7px;
-  border-radius: 999px;
-  background: var(--dsw-alias-bg-layer-2);
-  color: var(--dsw-alias-label-secondary);
-}
-
-.cardSource {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* --- footer ------------------------------------------------------------- */
-
-.footer {
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 9px 18px;
-  border-top: 1px solid var(--dsw-alias-border-l1);
-}
-
-.attribution {
-  font-size: 11.5px;
-  color: var(--dsw-alias-label-dimmed);
-  min-width: 0;
-}
-
-.sourceLink {
-  flex: none;
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--dsw-alias-brand-primary);
-  text-decoration: none;
-  white-space: nowrap;
-}
-
-.sourceLink:hover {
-  text-decoration: underline;
-}
-
-/* --- detail overlay ----------------------------------------------------- */
-
-.detailOverlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 34px;
-  background: var(--dsw-alias-bg-mask-1);
-}
-
-.detail {
-  display: grid;
-  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
-  grid-template-rows: minmax(0, 1fr);
-  gap: 0;
-  width: min(980px, 100%);
-  max-height: 100%;
-  overflow: hidden;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 14px;
-  background: var(--dsw-alias-bg-base);
-  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
-}
-
-.detailMedia {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--dsw-alias-bg-layer-2);
-}
-
-.detailImage {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.detailInfo {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 18px;
-}
-
-.detailTitle {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 650;
-  line-height: 1.4;
-}
-
-.detailMeta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.detailLink {
-  color: var(--dsw-alias-brand-primary);
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detailLink:hover {
-  text-decoration: underline;
-}
-
-.detailPrompt {
-  flex: 1;
-  min-height: 0;
-  margin: 0;
-  padding: 12px;
-  overflow-y: auto;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 10px;
-  background: var(--dsw-alias-bg-layer-1);
-  color: var(--dsw-alias-label-primary);
-  font-size: 12.5px;
-  line-height: 1.6;
-  font-family: inherit;
-  white-space: pre-wrap;
-  word-break: break-word;
-  user-select: text;
-}
-
-.detailActions {
-  display: flex;
-  gap: 8px;
-  flex: none;
-  position: sticky;
-  bottom: 0;
-  margin: 0 -18px -18px;
-  padding: 12px 18px;
-  background: var(--dsw-alias-bg-base);
-  border-top: 1px solid var(--dsw-alias-border-l1);
-}
-
-/* Narrow shells: stack the detail pane. */
-@media (max-width: 760px) {
-  .detail {
-    grid-template-columns: 1fr;
-    grid-template-rows: minmax(0, 3fr) minmax(0, 4fr);
-  }
-}
+/**
+ * Prompt-template library styles. Same conventions as panel.module.css:
+ * scoped box-sizing, dsh --dsw-* tokens, no leakage outside the overlay
+ * subtree.
+ */
+
+.overlay,
+.overlay *,
+.overlay *::before,
+.overlay *::after {
+  box-sizing: border-box;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: var(--dsw-alias-bg-mask-1);
+  color: var(--dsw-alias-label-primary);
+  font-family: var(--dsw-font-family);
+}
+
+.shell {
+  display: flex;
+  flex-direction: column;
+  width: min(1180px, 100%);
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 14px;
+  background: var(--dsw-alias-bg-base);
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
+}
+
+/* --- header ------------------------------------------------------------ */
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px 10px;
+  flex: none;
+}
+
+.heading {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.meta {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}
+
+.headerActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.close:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* --- toolbar ----------------------------------------------------------- */
+
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0 18px 12px;
+  flex: none;
+}
+
+.search {
+  width: 100%;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 9px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+
+.search:focus {
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.search::placeholder {
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.categoryRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 64px;
+  overflow-y: auto;
+}
+
+.categoryPill {
+  height: 26px;
+  padding: 0 11px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.categoryPill:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.categoryPill[data-active] {
+  border-color: var(--dsw-alias-brand-primary);
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-bg-base);
+}
+
+.notice {
+  margin: 0 18px 10px;
+  padding: 8px 12px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 9px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  flex: none;
+}
+
+/* --- body / grid -------------------------------------------------------- */
+
+.body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 2px 18px 14px;
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: 100%;
+  min-height: 220px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+}
+
+.spinner {
+  width: 26px;
+  height: 26px;
+  border: 2px solid var(--dsw-alias-border-l2);
+  border-top-color: var(--dsw-alias-brand-primary);
+  border-radius: 50%;
+  animation: dsh-imagegen-templates-spin 0.9s linear infinite;
+}
+
+@keyframes dsh-imagegen-templates-spin {
+  to { transform: rotate(360deg); }
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 11px;
+  background: var(--dsw-alias-bg-layer-1);
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  color: var(--dsw-alias-label-primary);
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+
+.card:hover {
+  border-color: var(--dsw-alias-brand-primary);
+  transform: translateY(-1px);
+}
+
+.thumbWrap {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.thumb {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.featuredBadge {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-bg-base);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.cardBody {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 9px 11px 10px;
+  min-width: 0;
+}
+
+.cardTitle {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.cardCategory {
+  flex: none;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.cardSource {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* --- footer ------------------------------------------------------------- */
+
+.footer {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 18px;
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+.attribution {
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-dimmed);
+  min-width: 0;
+}
+
+.sourceLink {
+  flex: none;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--dsw-alias-brand-primary);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.sourceLink:hover {
+  text-decoration: underline;
+}
+
+/* --- detail overlay ----------------------------------------------------- */
+
+.detailOverlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 34px;
+  background: var(--dsw-alias-bg-mask-1);
+}
+
+.detail {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
+  width: min(980px, 100%);
+  max-height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 14px;
+  background: var(--dsw-alias-bg-base);
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.32);
+}
+
+.detailMedia {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.detailImage {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.detailInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px;
+}
+
+.detailTitle {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.detailMeta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.detailLink {
+  color: var(--dsw-alias-brand-primary);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detailLink:hover {
+  text-decoration: underline;
+}
+
+.detailPrompt {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 12px;
+  overflow-y: auto;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-1);
+  color: var(--dsw-alias-label-primary);
+  font-size: 12.5px;
+  line-height: 1.6;
+  font-family: inherit;
+  white-space: pre-wrap;
+  word-break: break-word;
+  user-select: text;
+}
+
+.detailActions {
+  display: flex;
+  gap: 8px;
+  flex: none;
+  position: sticky;
+  bottom: 0;
+  margin: 0 -18px -18px;
+  padding: 12px 18px;
+  background: var(--dsw-alias-bg-base);
+  border-top: 1px solid var(--dsw-alias-border-l1);
+}
+
+/* Narrow shells: stack the detail pane. */
+@media (max-width: 760px) {
+  .detail {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 3fr) minmax(0, 4fr);
+  }
+}