@compose-market/theme 0.0.4 → 0.0.6

package/css/index.css

@@ -0,0 +1,3 @@
+/* Auto-generated proxy — resolves @compose-market/theme/css for bundlers
+   that don't support package.json "exports" for CSS subpaths. */
+@import "../dist/css/index.css";

package/dist/css/effects.css

@@ -0,0 +1,197 @@
+/**
+ * Compose.Market Cyberpunk Effects
+ * @compose-market/theme/css/effects
+ *
+ * DO NOT EDIT – generated from the theme package.
+ */
+
+/* Glass Panel */
+.glass-panel {
+  background: linear-gradient(145deg, hsl(var(--card) / 0.8), hsl(var(--card) / 0.4));
+  backdrop-filter: blur(12px);
+  border: 1px solid hsl(var(--border) / 0.5);
+  box-shadow:
+    0 4px 24px -1px hsl(0 0% 0% / 0.3),
+    inset 0 1px 0 hsl(0 0% 100% / 0.05);
+}
+
+/* Neon Effects */
+.neon-border {
+  box-shadow: 0 0 10px -2px hsl(var(--primary) / 0.5);
+  border-color: hsl(var(--primary) / 0.5);
+}
+
+.neon-text {
+  text-shadow: 0 0 10px hsl(var(--primary) / 0.5);
+}
+
+.neon-glow {
+  animation: neon-pulse 2s ease-in-out infinite alternate;
+}
+
+@keyframes neon-pulse {
+  from {
+    box-shadow: 0 0 5px hsl(var(--primary) / 0.5),
+      0 0 10px hsl(var(--primary) / 0.3),
+      0 0 15px hsl(var(--primary) / 0.1);
+  }
+  to {
+    box-shadow: 0 0 10px hsl(var(--primary) / 0.6),
+      0 0 20px hsl(var(--primary) / 0.4),
+      0 0 30px hsl(var(--primary) / 0.2);
+  }
+}
+
+/* Background Grid Pattern */
+.bg-grid-pattern {
+  background-size: 40px 40px;
+  background-image: linear-gradient(to right, hsl(217 33% 17% / 0.3) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(217 33% 17% / 0.3) 1px, transparent 1px);
+}
+
+/* Scanline Animation */
+.scanline {
+  width: 100%;
+  height: 100px;
+  z-index: 50;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.05) 50%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.1;
+  position: absolute;
+  bottom: 100%;
+  animation: scanline 8s linear infinite;
+  pointer-events: none;
+}
+
+@keyframes scanline {
+  0% { bottom: 100%; }
+  100% { bottom: -100px; }
+}
+
+/* Glitch Border Effect */
+.glitch-border {
+  position: relative;
+}
+
+.glitch-border::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid hsl(188 95% 43% / 0.3);
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  animation: glitch-border 3s infinite linear alternate-reverse;
+  pointer-events: none;
+}
+
+@keyframes glitch-border {
+  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+  5% { clip-path: polygon(0 10%, 100% 0, 95% 100%, 5% 90%); }
+  10% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
+}
+
+/* Glitch Text Hover Effect */
+.glitch-text {
+  position: relative;
+}
+
+.glitch-text::before,
+.glitch-text::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.glitch-text:hover::before {
+  left: 2px;
+  color: hsl(292 85% 55%);
+  opacity: 0.7;
+  animation: glitch-1 0.3s infinite;
+  mix-blend-mode: screen;
+}
+
+.glitch-text:hover::after {
+  left: -2px;
+  color: hsl(188 95% 43%);
+  opacity: 0.7;
+  animation: glitch-2 0.3s infinite;
+  mix-blend-mode: screen;
+}
+
+@keyframes glitch-1 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(-2px, 2px); }
+  40% { transform: translate(-2px, -2px); }
+  60% { transform: translate(2px, 2px); }
+  80% { transform: translate(2px, -2px); }
+}
+
+@keyframes glitch-2 {
+  0%, 100% { transform: translate(0); }
+  20% { transform: translate(2px, 2px); }
+  40% { transform: translate(2px, -2px); }
+  60% { transform: translate(-2px, 2px); }
+  80% { transform: translate(-2px, -2px); }
+}
+
+/* Corner Decorations */
+.corner-decoration {
+  position: relative;
+}
+
+.corner-decoration::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  border-top: 2px solid hsl(var(--primary) / 0.5);
+  border-left: 2px solid hsl(var(--primary) / 0.5);
+}
+
+.corner-decoration::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 8px;
+  height: 8px;
+  border-bottom: 2px solid hsl(var(--primary) / 0.5);
+  border-right: 2px solid hsl(var(--primary) / 0.5);
+}
+
+/* Cyberpunk Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--background));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted));
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--primary) / 0.5);
+}
+
+/* Partner Badge Scanline Animation */
+@keyframes partner-scanline {
+  0% { transform: translateY(-100px); }
+  100% { transform: translateY(calc(100vh + 100px)); }
+}
+
+/* Shimmer Animation */
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}

package/dist/css/index.css

@@ -8,3 +8,4 @@
 @import './tokens.css';
 @import './dark.css';
 @import './shell.css';
+@import './effects.css';

package/dist/css/shell.css

@@ -412,3 +412,359 @@
     overflow-x: auto;
   }
 }
+
+/* ── Form Controls ── */
+.cm-form-group {
+  margin-bottom: 16px;
+}
+
+.cm-form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  font-weight: 500;
+}
+
+.cm-form-input,
+.cm-form-textarea,
+.cm-form-select {
+  width: 100%;
+  padding: 10px 12px;
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  color: hsl(var(--foreground));
+  font-size: 14px;
+  font-family: var(--font-sans), sans-serif;
+  transition: border-color 0.2s;
+}
+
+.cm-form-input:focus,
+.cm-form-textarea:focus,
+.cm-form-select:focus {
+  outline: none;
+  border-color: hsl(var(--primary));
+}
+
+.cm-form-input:disabled,
+.cm-form-textarea:disabled,
+.cm-form-select:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cm-form-textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+/* ── Notification / Alert ── */
+.cm-notification {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  animation: cm-slide-in 0.2s ease;
+}
+
+@keyframes cm-slide-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.cm-notification--success {
+  background: hsl(142 71% 45% / 0.15);
+  color: hsl(142 71% 45%);
+  border: 1px solid hsl(142 71% 45%);
+}
+
+.cm-notification--error {
+  background: hsl(var(--destructive) / 0.15);
+  color: hsl(var(--destructive));
+  border: 1px solid hsl(var(--destructive));
+}
+
+.cm-notification--warning {
+  background: hsl(42 100% 48% / 0.12);
+  color: hsl(42 100% 52%);
+  border: 1px solid hsl(42 100% 52% / 0.5);
+}
+
+.cm-notification--info {
+  background: hsl(var(--primary) / 0.08);
+  border: 1px solid hsl(var(--primary) / 0.22);
+  color: hsl(var(--foreground));
+}
+
+/* ── Navigation ── */
+.cm-nav {
+  display: flex;
+  gap: 4px;
+  padding: 12px 0 0;
+}
+
+.cm-nav-btn {
+  padding: 8px 16px;
+  background: transparent;
+  border: none;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--font-sans), sans-serif;
+  transition: all 0.2s;
+}
+
+.cm-nav-btn:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+
+.cm-nav-btn[data-active="true"],
+.cm-nav-btn.active {
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.15);
+}
+
+/* ── Loading State ── */
+.cm-loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  color: hsl(var(--muted-foreground));
+}
+
+.cm-spinner {
+  animation: cm-spin 1s linear infinite;
+}
+
+@keyframes cm-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+/* ── Badge / Tag ── */
+.cm-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.cm-badge--primary {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+}
+
+.cm-badge--accent {
+  background: hsl(var(--accent) / 0.15);
+  color: hsl(var(--accent));
+}
+
+.cm-badge--muted {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+.cm-badge--success {
+  background: hsl(142 71% 45% / 0.15);
+  color: hsl(142 71% 45%);
+}
+
+.cm-badge--destructive {
+  background: hsl(var(--destructive) / 0.15);
+  color: hsl(var(--destructive));
+}
+
+/* ── Search Bar ── */
+.cm-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.cm-search-bar__icon {
+  color: hsl(var(--muted-foreground));
+  flex-shrink: 0;
+}
+
+.cm-search-bar__input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: hsl(var(--foreground));
+  font-size: 14px;
+  font-family: var(--font-sans), sans-serif;
+  outline: none;
+}
+
+.cm-search-bar__input::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+/* ── Filter Buttons ── */
+.cm-filter-btn {
+  padding: 6px 14px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 16px;
+  color: hsl(var(--muted-foreground));
+  font-size: 13px;
+  font-family: var(--font-sans), sans-serif;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cm-filter-btn:hover {
+  border-color: hsl(var(--primary));
+  color: hsl(var(--foreground));
+}
+
+.cm-filter-btn[data-active="true"],
+.cm-filter-btn.active {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--primary));
+}
+
+/* ── Icon Button ── */
+.cm-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  background: transparent;
+  border: 1px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: var(--font-sans), sans-serif;
+  transition: all 0.2s;
+}
+
+.cm-icon-btn:hover {
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+}
+
+.cm-icon-btn--danger:hover {
+  border-color: hsl(var(--destructive));
+  color: hsl(var(--destructive));
+}
+
+/* ── Settings Section ── */
+.cm-settings-section {
+  margin-bottom: 24px;
+  padding: 20px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+.cm-settings-section__title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: hsl(var(--muted-foreground));
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.cm-settings-section__hint {
+  margin-bottom: 14px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ── Pagination ── */
+.cm-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.cm-page-btn {
+  padding: 8px 16px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 6px;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  font-size: 13px;
+  font-family: var(--font-sans), sans-serif;
+  transition: all 0.2s;
+}
+
+.cm-page-btn:hover:not(:disabled) {
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+}
+
+.cm-page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.cm-page-info {
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ── Card ── */
+.cm-card {
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 10px;
+  padding: 18px;
+  transition: all 0.2s;
+}
+
+.cm-card:hover {
+  border-color: hsl(var(--border) / 0.8);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+/* ── Code Block ── */
+.cm-code-block {
+  display: block;
+  padding: 10px 12px;
+  background: hsl(var(--muted));
+  border-radius: 6px;
+  font-size: 12px;
+  color: hsl(var(--primary));
+  word-break: break-all;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+/* ── Error / Empty States ── */
+.cm-error-message {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  background: hsl(var(--destructive) / 0.15);
+  border: 1px solid hsl(var(--destructive));
+  border-radius: 8px;
+  color: hsl(var(--destructive));
+}

package/dist/effects/styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Cyberpunk Visual Effects - Compose.Market Design System
+ *
+ * Shared effects used across web and desktop apps.
+ * Generated from @compose-market/theme.
+ */
+export declare const effectsCss = "/**\n * Compose.Market Cyberpunk Effects\n * @compose-market/theme/css/effects\n *\n * DO NOT EDIT \u2013 generated from the theme package.\n */\n\n/* Glass Panel */\n.glass-panel {\n  background: linear-gradient(145deg, hsl(var(--card) / 0.8), hsl(var(--card) / 0.4));\n  backdrop-filter: blur(12px);\n  border: 1px solid hsl(var(--border) / 0.5);\n  box-shadow:\n    0 4px 24px -1px hsl(0 0% 0% / 0.3),\n    inset 0 1px 0 hsl(0 0% 100% / 0.05);\n}\n\n/* Neon Effects */\n.neon-border {\n  box-shadow: 0 0 10px -2px hsl(var(--primary) / 0.5);\n  border-color: hsl(var(--primary) / 0.5);\n}\n\n.neon-text {\n  text-shadow: 0 0 10px hsl(var(--primary) / 0.5);\n}\n\n.neon-glow {\n  animation: neon-pulse 2s ease-in-out infinite alternate;\n}\n\n@keyframes neon-pulse {\n  from {\n    box-shadow: 0 0 5px hsl(var(--primary) / 0.5),\n      0 0 10px hsl(var(--primary) / 0.3),\n      0 0 15px hsl(var(--primary) / 0.1);\n  }\n  to {\n    box-shadow: 0 0 10px hsl(var(--primary) / 0.6),\n      0 0 20px hsl(var(--primary) / 0.4),\n      0 0 30px hsl(var(--primary) / 0.2);\n  }\n}\n\n/* Background Grid Pattern */\n.bg-grid-pattern {\n  background-size: 40px 40px;\n  background-image: linear-gradient(to right, hsl(217 33% 17% / 0.3) 1px, transparent 1px),\n    linear-gradient(to bottom, hsl(217 33% 17% / 0.3) 1px, transparent 1px);\n}\n\n/* Scanline Animation */\n.scanline {\n  width: 100%;\n  height: 100px;\n  z-index: 50;\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.05) 50%, rgba(0, 0, 0, 0) 100%);\n  opacity: 0.1;\n  position: absolute;\n  bottom: 100%;\n  animation: scanline 8s linear infinite;\n  pointer-events: none;\n}\n\n@keyframes scanline {\n  0% { bottom: 100%; }\n  100% { bottom: -100px; }\n}\n\n/* Glitch Border Effect */\n.glitch-border {\n  position: relative;\n}\n\n.glitch-border::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px solid hsl(188 95% 43% / 0.3);\n  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);\n  animation: glitch-border 3s infinite linear alternate-reverse;\n  pointer-events: none;\n}\n\n@keyframes glitch-border {\n  0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n  5% { clip-path: polygon(0 10%, 100% 0, 95% 100%, 5% 90%); }\n  10% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n}\n\n/* Glitch Text Hover Effect */\n.glitch-text {\n  position: relative;\n}\n\n.glitch-text::before,\n.glitch-text::after {\n  content: attr(data-text);\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.glitch-text:hover::before {\n  left: 2px;\n  color: hsl(292 85% 55%);\n  opacity: 0.7;\n  animation: glitch-1 0.3s infinite;\n  mix-blend-mode: screen;\n}\n\n.glitch-text:hover::after {\n  left: -2px;\n  color: hsl(188 95% 43%);\n  opacity: 0.7;\n  animation: glitch-2 0.3s infinite;\n  mix-blend-mode: screen;\n}\n\n@keyframes glitch-1 {\n  0%, 100% { transform: translate(0); }\n  20% { transform: translate(-2px, 2px); }\n  40% { transform: translate(-2px, -2px); }\n  60% { transform: translate(2px, 2px); }\n  80% { transform: translate(2px, -2px); }\n}\n\n@keyframes glitch-2 {\n  0%, 100% { transform: translate(0); }\n  20% { transform: translate(2px, 2px); }\n  40% { transform: translate(2px, -2px); }\n  60% { transform: translate(-2px, 2px); }\n  80% { transform: translate(-2px, -2px); }\n}\n\n/* Corner Decorations */\n.corner-decoration {\n  position: relative;\n}\n\n.corner-decoration::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 8px;\n  height: 8px;\n  border-top: 2px solid hsl(var(--primary) / 0.5);\n  border-left: 2px solid hsl(var(--primary) / 0.5);\n}\n\n.corner-decoration::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  width: 8px;\n  height: 8px;\n  border-bottom: 2px solid hsl(var(--primary) / 0.5);\n  border-right: 2px solid hsl(var(--primary) / 0.5);\n}\n\n/* Cyberpunk Scrollbar */\n::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::-webkit-scrollbar-track {\n  background: hsl(var(--background));\n}\n\n::-webkit-scrollbar-thumb {\n  background: hsl(var(--muted));\n  border-radius: 2px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: hsl(var(--primary) / 0.5);\n}\n\n/* Partner Badge Scanline Animation */\n@keyframes partner-scanline {\n  0% { transform: translateY(-100px); }\n  100% { transform: translateY(calc(100vh + 100px)); }\n}\n\n/* Shimmer Animation */\n@keyframes shimmer {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/effects/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/effects/styles.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,UAAU,i/IAqMtB,CAAC"}