@kywi-software/core 0.6.1 → 0.6.2

package/dist/site/styles.css

@@ -382,3 +382,194 @@
   outline-offset: 3px;
 }
 [data-kywi-editing] [data-kywi-editable] { position: relative; cursor: text; }
+
+/* ── Personalization UI ──────────────────────────────────────────────────────
+ * Default scaffolding for the client runtime's own surfaces (@kywi-software/js):
+ * the self-ID widget, the transparency bar, the personalization badge, and the
+ * variant-container loading state. Same contract as the rest of this file —
+ * neutral, token-driven, respectable out of the box, restyled by overriding
+ * `--kywi-*` tokens rather than rewriting rules. A theme that wants a bespoke
+ * widget can override any of these; nothing here is `!important`. */
+
+/* Self-ID widget — shared card. Three display modes (inline / modal / slide-in)
+ * position the same card differently. `hello_bar_*` and `drawer` configs map to
+ * slide-in in the scaffold runtime. */
+.kywi-selfid-widget {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 24rem;
+  padding: var(--kywi-spacing-lg, 1.5rem);
+  background: var(--kywi-color-surface, #f8fafc);
+  color: var(--kywi-color-text, #0f172a);
+  border: 1px solid var(--kywi-color-border, #e2e8f0);
+  border-radius: var(--kywi-border-radius-lg, 16px);
+  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.25);
+  font-family: var(--kywi-font-family-base, system-ui, sans-serif);
+}
+.kywi-selfid-inline { margin: var(--kywi-spacing-lg, 1.5rem) auto; }
+.kywi-selfid-slide-in {
+  position: fixed;
+  right: var(--kywi-spacing-lg, 1.5rem);
+  bottom: var(--kywi-spacing-lg, 1.5rem);
+  z-index: 60;
+  animation: kywi-selfid-in 240ms ease-out both;
+}
+.kywi-selfid-modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 60;
+  animation: kywi-selfid-in 200ms ease-out both;
+}
+.kywi-selfid-modal::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: rgba(15, 23, 42, 0.45);
+}
+@keyframes kywi-selfid-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.kywi-selfid-modal { animation-name: kywi-selfid-in-modal; }
+@keyframes kywi-selfid-in-modal {
+  from { opacity: 0; transform: translate(-50%, -46%); }
+  to   { opacity: 1; transform: translate(-50%, -50%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kywi-selfid-slide-in, .kywi-selfid-modal { animation: none; }
+}
+
+.kywi-selfid-headline {
+  margin: 0 0 var(--kywi-spacing-xs, 0.25rem);
+  font-family: var(--kywi-font-family-heading, var(--kywi-font-family-base, system-ui, sans-serif));
+  font-size: 1.125rem;
+  line-height: 1.3;
+  color: var(--kywi-color-heading, var(--kywi-color-text, #0f172a));
+}
+.kywi-selfid-subheadline {
+  margin: 0 0 var(--kywi-spacing-md, 1rem);
+  font-size: 0.9rem;
+  color: var(--kywi-color-muted, #64748b);
+}
+.kywi-selfid-form { display: flex; flex-direction: column; gap: var(--kywi-spacing-md, 1rem); }
+.kywi-selfid-field { display: flex; flex-direction: column; gap: var(--kywi-spacing-xs, 0.25rem); }
+.kywi-selfid-field label { font-size: 0.8rem; font-weight: 600; color: var(--kywi-color-muted, #64748b); }
+.kywi-selfid-field select,
+.kywi-selfid-field input {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.55rem 0.7rem;
+  font: inherit;
+  color: var(--kywi-color-text, #0f172a);
+  background: var(--kywi-color-background, #ffffff);
+  border: 1px solid var(--kywi-color-border, #e2e8f0);
+  border-radius: var(--kywi-border-radius-md, 10px);
+}
+.kywi-selfid-field select:focus,
+.kywi-selfid-field input:focus {
+  outline: 2px solid var(--kywi-color-primary, #2563eb);
+  outline-offset: 1px;
+  border-color: var(--kywi-color-primary, #2563eb);
+}
+.kywi-selfid-actions { display: flex; align-items: center; gap: var(--kywi-spacing-sm, 0.5rem); }
+.kywi-selfid-submit {
+  padding: 0.55rem 1.1rem;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--kywi-color-primary-contrast, #ffffff);
+  background: var(--kywi-color-primary, #2563eb);
+  border: 1px solid transparent;
+  border-radius: var(--kywi-border-radius-md, 10px);
+}
+.kywi-selfid-submit:hover { filter: brightness(1.07); }
+.kywi-selfid-skip {
+  padding: 0.55rem 0.6rem;
+  font: inherit;
+  cursor: pointer;
+  color: var(--kywi-color-muted, #64748b);
+  background: none;
+  border: none;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.kywi-selfid-skip:hover { color: var(--kywi-color-text, #0f172a); }
+
+/* Transparency bar — pinned to the bottom edge, one line. */
+.kywi-transparency-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kywi-spacing-md, 1rem);
+  padding: var(--kywi-spacing-sm, 0.5rem) var(--kywi-spacing-lg, 1.5rem);
+  font-family: var(--kywi-font-family-base, system-ui, sans-serif);
+  font-size: 0.85rem;
+  color: var(--kywi-color-text, #0f172a);
+  background: var(--kywi-color-surface, #f8fafc);
+  border-top: 1px solid var(--kywi-color-border, #e2e8f0);
+}
+.kywi-transparency-text { margin: 0; }
+.kywi-transparency-opt-out {
+  padding: 0.3rem 0.75rem;
+  font: inherit;
+  cursor: pointer;
+  color: var(--kywi-color-text, #0f172a);
+  background: var(--kywi-color-background, #ffffff);
+  border: 1px solid var(--kywi-color-border, #e2e8f0);
+  border-radius: var(--kywi-border-radius-sm, 6px);
+}
+.kywi-transparency-opt-out:hover { border-color: var(--kywi-color-primary, #2563eb); }
+
+/* Personalization badge — small inline pill. */
+.kywi-personalization-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kywi-spacing-sm, 0.5rem);
+  padding: 0.35rem 0.7rem;
+  font-size: 0.8rem;
+  color: var(--kywi-color-muted, #64748b);
+  background: var(--kywi-color-surface, #f8fafc);
+  border: 1px solid var(--kywi-color-border, #e2e8f0);
+  border-radius: 999px;
+}
+.kywi-badge-opt-out {
+  padding: 0.15rem 0.55rem;
+  font: inherit;
+  cursor: pointer;
+  color: var(--kywi-color-text, #0f172a);
+  background: var(--kywi-color-background, #ffffff);
+  border: 1px solid var(--kywi-color-border, #e2e8f0);
+  border-radius: var(--kywi-border-radius-sm, 6px);
+}
+.kywi-badge-opt-out:hover { border-color: var(--kywi-color-primary, #2563eb); }
+
+/* Variant container — arms manage their own visibility (inline display).
+ * Only the loading state needs styling: a low skeleton shimmer while the client
+ * resolves which arm to show. */
+.kywi-variant-loading { position: relative; min-height: 2rem; }
+.kywi-variant-skeleton {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--kywi-border-radius-md, 10px);
+  background: linear-gradient(90deg,
+    var(--kywi-color-surface, #f8fafc) 25%,
+    var(--kywi-color-border, #e2e8f0) 50%,
+    var(--kywi-color-surface, #f8fafc) 75%);
+  background-size: 200% 100%;
+  animation: kywi-variant-shimmer 1.4s ease-in-out infinite;
+}
+@keyframes kywi-variant-shimmer {
+  from { background-position: 200% 0; }
+  to   { background-position: -200% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kywi-variant-skeleton { animation: none; }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kywi-software/core",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Kywi CMS core — schema generator, REST API, and admin UI for Next.js.",
   "type": "module",
   "license": "AGPL-3.0-only",