@svp-chain-sdk/ui 0.1.4 → 0.1.6

package/dist/styles.css

@@ -1,7 +1,7 @@
 @import "tailwindcss";
 @theme { --color-background: oklch(0.99 0.01 220); --color-foreground: oklch(0.24 0.04 235); --color-primary: oklch(0.55 0.16 220); --color-primary-foreground: oklch(0.99 0.01 220); --color-secondary: oklch(0.93 0.04 205); --color-secondary-foreground: oklch(0.28 0.07 225); --color-accent: oklch(0.9 0.06 195); --color-accent-foreground: oklch(0.25 0.07 225); --color-destructive: oklch(0.58 0.2 25); --color-destructive-foreground: white; --color-input: oklch(0.86 0.03 220); --color-ring: oklch(0.6 0.14 195); }
 
-/* 钱包控件与 SVP 应用保持同一视觉基线，消费方只负责摆放。 */
+/* Wallet controls */
 .svp-header-wallet {
   display: flex;
   min-width: 0;
@@ -48,10 +48,7 @@
   font-weight: 700;
 }
 
-.svp-wallet-btn:hover {
-  opacity: 0.9;
-}
-
+.svp-wallet-btn:hover { opacity: 0.9; }
 .svp-wallet-btn-error {
   background: linear-gradient(90deg, #ef4444, #f87171);
   box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
@@ -72,9 +69,7 @@
   font-weight: 600;
 }
 
-.svp-network-btn:hover {
-  background: #f8fafc;
-}
+.svp-network-btn:hover { background: #f8fafc; }
 
 @media (max-width: 640px) {
   .svp-network-btn,
@@ -85,7 +80,204 @@
     font-size: 0.75rem;
   }
 
-  .svp-wallet-btn-connect {
-    width: 104px;
+  .svp-wallet-btn-connect { width: 104px; }
+}
+
+/* Notice */
+@keyframes ui-notice-marquee-scroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+.ui-notice-marquee {
+  position: fixed;
+  z-index: 2147483647;
+  top: 100px;
+  left: 50%;
+  display: grid;
+  width: min(42rem, calc(100vw - 32px));
+  min-height: 54px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 10px 8px 14px;
+  border: 1px solid rgba(37, 99, 235, 0.18);
+  border-radius: 14px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 16px 46px rgba(15, 30, 61, 0.2);
+  color: var(--color-foreground, #17334a);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  transform: translateX(-50%);
+}
+
+.ui-notice-marquee__icon {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #2563eb, #38bdf8);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.ui-notice-marquee__viewport {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.ui-notice-marquee__track {
+  display: flex;
+  width: max-content;
+  flex-shrink: 0;
+  align-items: center;
+  animation: ui-notice-marquee-scroll var(--ui-notice-marquee-duration, 32s) linear infinite;
+  will-change: transform;
+}
+
+.ui-notice-marquee__group {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 1rem;
+  padding-inline-end: 2rem;
+}
+
+.ui-notice-marquee__item {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.ui-notice-marquee:hover .ui-notice-marquee__track { animation-play-state: paused; }
+
+.ui-notice-marquee__actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.ui-notice-marquee__acknowledge,
+.ui-notice-marquee__close {
+  height: 36px;
+  border: 0;
+  border-radius: 9px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.ui-notice-marquee__acknowledge {
+  padding: 0 13px;
+  background: rgba(37, 99, 235, 0.1);
+  color: #2563eb;
+}
+
+.ui-notice-marquee__acknowledge:hover { background: rgba(37, 99, 235, 0.16); }
+
+.ui-notice-marquee__close {
+  width: 36px;
+  padding: 0;
+  background: transparent;
+  color: rgba(15, 30, 61, 0.58);
+  font-size: 21px;
+  line-height: 1;
+}
+
+.ui-notice-marquee__close:hover {
+  background: rgba(15, 30, 61, 0.06);
+  color: #0f1e3d;
+}
+
+.ui-notice-marquee__acknowledge:focus-visible,
+.ui-notice-marquee__close:focus-visible {
+  outline: 2px solid var(--color-ring, #2563eb);
+  outline-offset: 2px;
+}
+
+@media (max-width: 560px) {
+  .ui-notice-marquee {
+    top: max(16px, env(safe-area-inset-top));
+    width: calc(100vw - 24px);
+    min-height: 0;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 9px;
+    padding: 9px;
+    border-radius: 12px;
+  }
+
+  .ui-notice-marquee__icon { display: none; }
+  .ui-notice-marquee__item { white-space: normal; }
+  .ui-notice-marquee__track {
+    width: auto;
+    animation: none;
+  }
+  .ui-notice-marquee__group { padding: 0; }
+  .ui-notice-marquee__group[aria-hidden="true"] { display: none; }
+  .ui-notice-marquee__acknowledge { padding: 0 10px; }
+}
+
+/* Feedback */
+.svp-contact-fab {
+  position: fixed;
+  right: 1.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1500;
+  width: 54px;
+  height: 54px;
+  border-radius: 16px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, var(--svp-primary, #2563eb), var(--svp-accent, #38bdf8));
+  color: #fff;
+  box-shadow: 0 12px 30px rgba(37,99,235,0.4);
+  transition: transform .18s ease, box-shadow .18s ease;
+}
+
+.svp-contact-fab:hover {
+  transform: translateY(-50%) scale(1.06);
+  box-shadow: 0 16px 40px rgba(37,99,235,0.5);
+}
+
+.svp-contact-fab:active { transform: translateY(-50%) scale(0.97); }
+.svp-contact-fab:focus-visible {
+  outline: 2px solid var(--color-ring, #2563eb);
+  outline-offset: 3px;
+}
+
+.svp-contact-fab-icon {
+  width: 26px;
+  height: 26px;
+  flex: 0 0 auto;
+  fill: currentColor;
+}
+
+@media (max-width: 560px) {
+  .svp-contact-fab {
+    width: 48px;
+    height: 48px;
+    right: 0.85rem;
+    border-radius: 14px;
+  }
+
+  .svp-contact-fab-icon {
+    width: 22px;
+    height: 22px;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-notice-marquee__track {
+    animation: none;
+    will-change: auto;
+  }
+
+  .svp-contact-fab { transition: none; }
+}

package/dist/tailwind.d.ts

@@ -36,8 +36,207 @@ export declare const uiButtonComponents: {
         };
     };
 };
+/** Explicit styles matching the website footer's 16rem infinite marquee. */
+export declare const uiNoticeMarqueeComponents: {
+    '@keyframes ui-notice-marquee-scroll': {
+        from: {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+    '.ui-notice-marquee': {
+        position: string;
+        'z-index': string;
+        top: string;
+        left: string;
+        display: string;
+        width: string;
+        'min-height': string;
+        'grid-template-columns': string;
+        'align-items': string;
+        gap: string;
+        padding: string;
+        border: string;
+        'border-radius': string;
+        overflow: string;
+        'background-color': string;
+        'box-shadow': string;
+        color: string;
+        'font-size': string;
+        'line-height': string;
+        transform: string;
+    };
+    '.ui-notice-marquee__icon': {
+        display: string;
+        width: string;
+        height: string;
+        'place-items': string;
+        'border-radius': string;
+        background: string;
+        color: string;
+        'font-size': string;
+        'font-weight': string;
+    };
+    '.ui-notice-marquee__viewport': {
+        'min-width': string;
+        overflow: string;
+    };
+    '.ui-notice-marquee__actions': {
+        display: string;
+        'align-items': string;
+        gap: string;
+    };
+    '.ui-notice-marquee__acknowledge, .ui-notice-marquee__close': {
+        height: string;
+        border: string;
+        'border-radius': string;
+        cursor: string;
+        'font-size': string;
+        'font-weight': string;
+    };
+    '.ui-notice-marquee__acknowledge': {
+        padding: string;
+        'background-color': string;
+        color: string;
+    };
+    '.ui-notice-marquee__close': {
+        width: string;
+        padding: string;
+        'background-color': string;
+        color: string;
+        'font-size': string;
+    };
+    '.ui-notice-marquee__track': {
+        display: string;
+        width: string;
+        'flex-shrink': string;
+        'align-items': string;
+        animation: string;
+        'will-change': string;
+    };
+    '.ui-notice-marquee__group': {
+        display: string;
+        'flex-shrink': string;
+        'align-items': string;
+        gap: string;
+        'padding-inline-end': string;
+    };
+    '.ui-notice-marquee__item': {
+        'flex-shrink': string;
+        'white-space': string;
+    };
+    '.ui-notice-marquee:hover .ui-notice-marquee__track': {
+        'animation-play-state': string;
+    };
+    '@media (prefers-reduced-motion: reduce)': {
+        '.ui-notice-marquee__track': {
+            animation: string;
+            'will-change': string;
+        };
+    };
+};
 /** Complete component configuration registered by the default SVP UI plugin. */
 export declare const uiComponents: {
+    '@keyframes ui-notice-marquee-scroll': {
+        from: {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+    '.ui-notice-marquee': {
+        position: string;
+        'z-index': string;
+        top: string;
+        left: string;
+        display: string;
+        width: string;
+        'min-height': string;
+        'grid-template-columns': string;
+        'align-items': string;
+        gap: string;
+        padding: string;
+        border: string;
+        'border-radius': string;
+        overflow: string;
+        'background-color': string;
+        'box-shadow': string;
+        color: string;
+        'font-size': string;
+        'line-height': string;
+        transform: string;
+    };
+    '.ui-notice-marquee__icon': {
+        display: string;
+        width: string;
+        height: string;
+        'place-items': string;
+        'border-radius': string;
+        background: string;
+        color: string;
+        'font-size': string;
+        'font-weight': string;
+    };
+    '.ui-notice-marquee__viewport': {
+        'min-width': string;
+        overflow: string;
+    };
+    '.ui-notice-marquee__actions': {
+        display: string;
+        'align-items': string;
+        gap: string;
+    };
+    '.ui-notice-marquee__acknowledge, .ui-notice-marquee__close': {
+        height: string;
+        border: string;
+        'border-radius': string;
+        cursor: string;
+        'font-size': string;
+        'font-weight': string;
+    };
+    '.ui-notice-marquee__acknowledge': {
+        padding: string;
+        'background-color': string;
+        color: string;
+    };
+    '.ui-notice-marquee__close': {
+        width: string;
+        padding: string;
+        'background-color': string;
+        color: string;
+        'font-size': string;
+    };
+    '.ui-notice-marquee__track': {
+        display: string;
+        width: string;
+        'flex-shrink': string;
+        'align-items': string;
+        animation: string;
+        'will-change': string;
+    };
+    '.ui-notice-marquee__group': {
+        display: string;
+        'flex-shrink': string;
+        'align-items': string;
+        gap: string;
+        'padding-inline-end': string;
+    };
+    '.ui-notice-marquee__item': {
+        'flex-shrink': string;
+        'white-space': string;
+    };
+    '.ui-notice-marquee:hover .ui-notice-marquee__track': {
+        'animation-play-state': string;
+    };
+    '@media (prefers-reduced-motion: reduce)': {
+        '.ui-notice-marquee__track': {
+            animation: string;
+            'will-change': string;
+        };
+    };
     '.ui-button': {
         display: string;
         'align-items': string;
@@ -74,11 +273,6 @@ export declare const uiComponents: {
         };
     };
 };
-/**
- * Tailwind provider for the framework-agnostic SVP UI classes.
- *
- * Register this once in the consuming project's Tailwind configuration, then
- * use `ui-button` classes from HTML, JSX, or any other markup.
- */
+/** Tailwind provider for all framework-agnostic SVP UI classes. */
 declare const svpUiPlugin: import("tailwindcss/plugin").PluginWithConfig;
 export default svpUiPlugin;

package/dist/tailwind.js

@@ -1,14 +1,14 @@
-function e(o, r) {
-  return { handler: o, config: r };
+function n(e, r) {
+  return { handler: e, config: r };
 }
-e.withOptions = function(o, r = () => ({})) {
-  function n(t) {
-    return { handler: o(t), config: r(t) };
+n.withOptions = function(e, r = () => ({})) {
+  function o(i) {
+    return { handler: e(i), config: r(i) };
   }
-  return n.__isOptionsFunction = !0, n;
+  return o.__isOptionsFunction = !0, o;
 };
-var i = e;
-const c = {
+var t = n;
+const a = {
   ".ui-button": {
     display: "inline-flex",
     "align-items": "center",
@@ -44,11 +44,110 @@ const c = {
       "background-color": "color-mix(in srgb, var(--color-destructive, #e5484d) 90%, transparent)"
     }
   }
-}, a = c, u = i(({ addBase: o, addComponents: r }) => {
-  o({ ":root": { "--svp-ui-brand": "#159bb5" } }), r(a);
+}, c = {
+  "@keyframes ui-notice-marquee-scroll": {
+    from: { transform: "translateX(0)" },
+    to: { transform: "translateX(-50%)" }
+  },
+  ".ui-notice-marquee": {
+    position: "fixed",
+    "z-index": "2147483647",
+    top: "100px",
+    left: "50%",
+    display: "grid",
+    width: "min(42rem, calc(100vw - 32px))",
+    "min-height": "54px",
+    "grid-template-columns": "auto minmax(0, 1fr) auto",
+    "align-items": "center",
+    gap: "0.75rem",
+    padding: "0.5rem 0.625rem 0.5rem 0.875rem",
+    border: "1px solid rgba(37, 99, 235, 0.18)",
+    "border-radius": "0.875rem",
+    overflow: "hidden",
+    "background-color": "rgba(255, 255, 255, 0.98)",
+    "box-shadow": "0 16px 46px rgba(15, 30, 61, 0.2)",
+    color: "var(--color-foreground, #17334a)",
+    "font-size": "0.8125rem",
+    "line-height": "1.25rem",
+    transform: "translateX(-50%)"
+  },
+  ".ui-notice-marquee__icon": {
+    display: "grid",
+    width: "1.75rem",
+    height: "1.75rem",
+    "place-items": "center",
+    "border-radius": "0.5625rem",
+    background: "linear-gradient(135deg, #2563eb, #38bdf8)",
+    color: "white",
+    "font-size": "0.875rem",
+    "font-weight": "800"
+  },
+  ".ui-notice-marquee__viewport": {
+    "min-width": "0",
+    overflow: "hidden"
+  },
+  ".ui-notice-marquee__actions": {
+    display: "flex",
+    "align-items": "center",
+    gap: "0.25rem"
+  },
+  ".ui-notice-marquee__acknowledge, .ui-notice-marquee__close": {
+    height: "2.25rem",
+    border: "0",
+    "border-radius": "0.5625rem",
+    cursor: "pointer",
+    "font-size": "0.8125rem",
+    "font-weight": "700"
+  },
+  ".ui-notice-marquee__acknowledge": {
+    padding: "0 0.8125rem",
+    "background-color": "rgba(37, 99, 235, 0.1)",
+    color: "#2563eb"
+  },
+  ".ui-notice-marquee__close": {
+    width: "2.25rem",
+    padding: "0",
+    "background-color": "transparent",
+    color: "rgba(15, 30, 61, 0.58)",
+    "font-size": "1.3125rem"
+  },
+  ".ui-notice-marquee__track": {
+    display: "flex",
+    width: "max-content",
+    "flex-shrink": "0",
+    "align-items": "center",
+    animation: "ui-notice-marquee-scroll var(--ui-notice-marquee-duration, 32s) linear infinite",
+    "will-change": "transform"
+  },
+  ".ui-notice-marquee__group": {
+    display: "flex",
+    "flex-shrink": "0",
+    "align-items": "center",
+    gap: "1rem",
+    "padding-inline-end": "1rem"
+  },
+  ".ui-notice-marquee__item": {
+    "flex-shrink": "0",
+    "white-space": "nowrap"
+  },
+  ".ui-notice-marquee:hover .ui-notice-marquee__track": {
+    "animation-play-state": "paused"
+  },
+  "@media (prefers-reduced-motion: reduce)": {
+    ".ui-notice-marquee__track": {
+      animation: "none",
+      "will-change": "auto"
+    }
+  }
+}, u = {
+  ...a,
+  ...c
+}, m = t(({ addBase: e, addComponents: r }) => {
+  e({ ":root": { "--svp-ui-brand": "#159bb5" } }), r(u);
 });
 export {
-  u as default,
-  c as uiButtonComponents,
-  a as uiComponents
+  m as default,
+  a as uiButtonComponents,
+  u as uiComponents,
+  c as uiNoticeMarqueeComponents
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@svp-chain-sdk/ui",
-    "version": "0.1.4",
+    "version": "0.1.6",
     "description": "Accessible UI primitives for SVP Chain SDK applications.",
     "type": "module",
     "files": [