@solidxai/core-ui 0.1.9-beta.2 → 0.1.9-beta.20

package/dist/components/core/module/ModulePackageDialog.css

@@ -0,0 +1,540 @@
+.solid-module-package-dialog {
+  width: min(1180px, calc(100vw - 2rem));
+}
+
+.solid-module-package-dialog__header {
+  align-items: flex-start;
+}
+
+.solid-module-package-dialog__body {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.solid-module-package-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.solid-module-package-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+  border-radius: 18px;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, white 2%), var(--card));
+}
+
+.solid-module-package-panel--wizard {
+  gap: 20px;
+}
+
+.solid-module-package-dropzone {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 18px;
+  border: 1px dashed color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 18px;
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, #14b8a6 8%, transparent), transparent 45%),
+    linear-gradient(180deg, color-mix(in srgb, #0ea5e9 5%, transparent), transparent);
+  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
+}
+
+.solid-module-package-dropzone.is-active,
+.solid-module-package-dropzone:hover {
+  border-color: color-mix(in srgb, #0ea5e9 42%, var(--border));
+  background:
+    radial-gradient(circle at top right, color-mix(in srgb, #14b8a6 12%, transparent), transparent 45%),
+    linear-gradient(180deg, color-mix(in srgb, #0ea5e9 8%, transparent), transparent);
+  transform: translateY(-1px);
+}
+
+.solid-module-package-dropzone__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 15px;
+  background: color-mix(in srgb, #0ea5e9 10%, transparent);
+  color: color-mix(in srgb, #0369a1 92%, var(--foreground));
+  flex: 0 0 auto;
+}
+
+.solid-module-package-dropzone__copy {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.solid-module-package-dropzone__title {
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: color-mix(in srgb, var(--foreground) 94%, transparent);
+}
+
+.solid-module-package-dropzone__copy p {
+  margin: 6px 0 0;
+  font-size: 11.5px;
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--foreground) 72%, transparent);
+}
+
+.solid-module-package-dropzone__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.solid-module-package-file-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--accent) 6%, transparent);
+}
+
+.solid-module-package-file-card__main {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.solid-module-package-file-card__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: color-mix(in srgb, #0f766e 9%, transparent);
+  color: color-mix(in srgb, #0f766e 90%, var(--foreground));
+  flex: 0 0 auto;
+}
+
+.solid-module-package-file-card__name {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.25;
+  color: color-mix(in srgb, var(--foreground) 92%, transparent);
+  word-break: break-word;
+}
+
+.solid-module-package-file-card__meta {
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: color-mix(in srgb, var(--foreground) 66%, transparent);
+}
+
+.solid-module-package-stepper {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0;
+  align-items: start;
+  padding: 18px 14px 10px;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 22px;
+  background: color-mix(in srgb, var(--background) 72%, white 28%);
+}
+
+.solid-module-package-stepper__item {
+  position: relative;
+  padding: 0 10px;
+}
+
+.solid-module-package-stepper__track {
+  position: absolute;
+  top: 24px;
+  left: -50%;
+  width: 100%;
+  height: 2px;
+  background: color-mix(in srgb, var(--border) 90%, transparent);
+  z-index: 0;
+}
+
+.solid-module-package-stepper__item:first-child .solid-module-package-stepper__track {
+  display: none;
+}
+
+.solid-module-package-stepper__item.is-done .solid-module-package-stepper__track,
+.solid-module-package-stepper__item.is-current .solid-module-package-stepper__track {
+  background: color-mix(in srgb, var(--foreground) 86%, transparent);
+}
+
+.solid-module-package-stepper__node {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--background) 90%, white 10%);
+  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
+  color: color-mix(in srgb, var(--foreground) 78%, transparent);
+  font-size: 18px;
+  font-weight: 700;
+  box-shadow: 0 8px 24px color-mix(in srgb, black 4%, transparent);
+}
+
+.solid-module-package-stepper__item.is-done .solid-module-package-stepper__node,
+.solid-module-package-stepper__item.is-current .solid-module-package-stepper__node {
+  background: #05060a;
+  color: white;
+  border-color: #05060a;
+}
+
+.solid-module-package-stepper__item.is-warning .solid-module-package-stepper__node {
+  background: color-mix(in srgb, #f59e0b 18%, white 82%);
+  color: color-mix(in srgb, #92400e 92%, transparent);
+  border-color: color-mix(in srgb, #f59e0b 36%, transparent);
+}
+
+.solid-module-package-stepper__button {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  text-align: center;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.solid-module-package-stepper__button:disabled {
+  cursor: default;
+}
+
+.solid-module-package-stepper__item.is-clickable .solid-module-package-stepper__label,
+.solid-module-package-stepper__item.is-clickable .solid-module-package-stepper__caption {
+  transition: color 0.2s ease;
+}
+
+.solid-module-package-stepper__item.is-clickable .solid-module-package-stepper__button:hover .solid-module-package-stepper__label {
+  color: color-mix(in srgb, var(--foreground) 100%, transparent);
+}
+
+.solid-module-package-stepper__item.is-clickable .solid-module-package-stepper__button:hover .solid-module-package-stepper__caption {
+  color: color-mix(in srgb, var(--foreground) 72%, transparent);
+}
+
+.solid-module-package-stepper__label {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: color-mix(in srgb, var(--foreground) 94%, transparent);
+}
+
+.solid-module-package-stepper__caption {
+  font-size: 10.5px;
+  line-height: 1.45;
+  color: color-mix(in srgb, var(--foreground) 60%, transparent);
+}
+
+.solid-module-package-stage {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 26px;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 22px;
+  background:
+    radial-gradient(circle at top left, color-mix(in srgb, #14b8a6 7%, transparent), transparent 44%),
+    linear-gradient(180deg, color-mix(in srgb, var(--background) 60%, white 40%), white);
+}
+
+.solid-module-package-stage__meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: color-mix(in srgb, var(--foreground) 56%, transparent);
+}
+
+.solid-module-package-stage__meta span + span::before {
+  content: "|";
+  margin-right: 10px;
+  color: color-mix(in srgb, var(--foreground) 30%, transparent);
+}
+
+.solid-module-package-stage__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.solid-module-package-stage__header p {
+  flex: 1 1 auto;
+  margin: 0;
+  max-width: 760px;
+  font-size: 14px;
+  line-height: 1.7;
+  color: color-mix(in srgb, var(--foreground) 66%, transparent);
+}
+
+.solid-module-package-stage__status {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 42px;
+  min-height: 42px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+  color: color-mix(in srgb, var(--foreground) 76%, transparent);
+}
+
+.solid-module-package-stage__status.is-success {
+  background: color-mix(in srgb, #22c55e 10%, transparent);
+  color: color-mix(in srgb, #166534 92%, var(--foreground));
+}
+
+.solid-module-package-stage__status.is-warning,
+.solid-module-package-stage__status.is-error {
+  background: color-mix(in srgb, #f59e0b 10%, transparent);
+  color: color-mix(in srgb, #92400e 92%, var(--foreground));
+}
+
+.solid-module-package-stage__status.is-running {
+  background: color-mix(in srgb, #0ea5e9 10%, transparent);
+  color: color-mix(in srgb, #0c4a6e 92%, var(--foreground));
+}
+
+.solid-module-package-stage__cta {
+  display: flex;
+  justify-content: center;
+  padding-top: 6px;
+}
+
+.solid-module-package-step-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.solid-module-package-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.solid-module-package-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.solid-module-package-metric {
+  padding: 12px;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+}
+
+.solid-module-package-metric__label {
+  display: block;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--foreground) 58%, transparent);
+}
+
+.solid-module-package-metric__value {
+  display: block;
+  margin-top: 6px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.25;
+  color: color-mix(in srgb, var(--foreground) 94%, transparent);
+  word-break: break-word;
+}
+
+.solid-module-package-checklist {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.solid-module-package-checklist__section,
+.solid-module-package-notice {
+  padding: 12px;
+  border-radius: 14px;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  background: color-mix(in srgb, var(--accent) 4%, transparent);
+}
+
+.solid-module-package-notice.is-warning {
+  border-color: color-mix(in srgb, #f59e0b 26%, var(--border));
+  background: color-mix(in srgb, #f59e0b 9%, transparent);
+}
+
+.solid-module-package-notice.is-danger {
+  border-color: color-mix(in srgb, #ef4444 26%, var(--border));
+  background: color-mix(in srgb, #ef4444 8%, transparent);
+}
+
+.solid-module-package-checklist__title,
+.solid-module-package-notice__title {
+  margin-bottom: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: color-mix(in srgb, var(--foreground) 88%, transparent);
+}
+
+.solid-module-package-inline-list {
+  margin: 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 6px;
+}
+
+.solid-module-package-inline-list li {
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: color-mix(in srgb, var(--foreground) 76%, transparent);
+  word-break: break-word;
+}
+
+.solid-module-package-notice .solid-checkbox {
+  margin-top: 10px;
+}
+
+.solid-module-package-tree {
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--accent) 3%, transparent);
+}
+
+.solid-module-package-tree__row {
+  padding: 9px 12px;
+  font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace);
+  font-size: 11px;
+  line-height: 1.45;
+  color: color-mix(in srgb, var(--foreground) 80%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
+}
+
+.solid-module-package-tree__row:last-child {
+  border-bottom: 0;
+}
+
+.solid-module-package-step__output {
+  margin: 0;
+  padding: 16px 18px;
+  width: 100%;
+  min-height: 160px;
+  max-height: 320px;
+  overflow: auto;
+  border-radius: 16px;
+  background: color-mix(in srgb, #0f172a 96%, transparent);
+  color: #e2e8f0;
+  font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace);
+  font-size: 11px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  box-sizing: border-box;
+}
+
+.solid-module-package-step-dot {
+  display: inline-flex;
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--foreground) 22%, transparent);
+}
+
+.solid-module-package-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  border: 1px solid color-mix(in srgb, #0ea5e9 22%, var(--border));
+  background: color-mix(in srgb, #0ea5e9 8%, transparent);
+  font-size: 12px;
+  line-height: 1.55;
+  color: color-mix(in srgb, var(--foreground) 82%, transparent);
+}
+
+.solid-module-package-summary__copy {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.solid-module-package-empty {
+  min-height: 220px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent);
+  border-radius: 16px;
+  color: color-mix(in srgb, var(--foreground) 66%, transparent);
+}
+
+.solid-module-package-empty p {
+  max-width: 360px;
+  margin: 0;
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+
+@media (max-width: 1024px) {
+  .solid-module-package-stepper {
+    grid-template-columns: repeat(4, minmax(140px, 1fr));
+    overflow-x: auto;
+    padding-bottom: 14px;
+  }
+}
+
+@media (max-width: 720px) {
+  .solid-module-package-dialog {
+    width: min(100vw - 1rem, 1180px);
+  }
+
+  .solid-module-package-dropzone {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .solid-module-package-file-card,
+  .solid-module-package-stage__header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .solid-module-package-dropzone__actions {
+    width: 100%;
+  }
+
+  .solid-module-package-metrics {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/components/core/module/ModulePackageDialog.d.ts

@@ -0,0 +1,16 @@
+import "./ModulePackageDialog.css";
+type ModulePackageDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onImported?: () => void;
+};
+type ModulePackageImportContentProps = {
+    onClose: () => void;
+    onImported?: () => void;
+    initialTransactionKey?: string | null;
+    autoResume?: boolean;
+};
+export declare function ModulePackageDialog({ open, onOpenChange, onImported }: ModulePackageDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModulePackageImportContent({ onClose, onImported, initialTransactionKey, autoResume }: ModulePackageImportContentProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModulePackageDialog.d.ts.map

package/dist/components/core/module/ModulePackageDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModulePackageDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/core/module/ModulePackageDialog.tsx"],"names":[],"mappings":"AAyBA,OAAO,2BAA2B,CAAC;AAEnC,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,KAAK,+BAA+B,GAAG;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgLF,wBAAgB,mBAAmB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,wBAAwB,2CAgB/F;AAED,wBAAgB,0BAA0B,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,qBAA4B,EAAE,UAAkB,EAAE,EAAE,+BAA+B,2CAiqBpJ"}