@seamless-auth/svelte 0.0.0-stage → 0.2.0

package/dist/seamless-auth.css

@@ -0,0 +1,260 @@
+/*
+ * Styles for the bundled Seamless Auth screens of the Angular and Vue bindings
+ * (and those that follow). One file, so the screens look the same in every
+ * framework. Theme them with the same --seamless-* custom properties the React
+ * screens read, or override the .sa-* classes. Every rule is scoped under
+ * .sa-auth.
+ */
+
+.sa-auth {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--seamless-text, white);
+  font-family: inherit;
+}
+
+.sa-auth *,
+.sa-auth *::before,
+.sa-auth *::after {
+  box-sizing: border-box;
+}
+
+.sa-auth .sa-card {
+  background-color: var(--seamless-surface, #1f2937);
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 4px 6px var(--seamless-shadow, rgba(0, 0, 0, 0.1));
+  width: 100%;
+  max-width: 28rem;
+}
+
+.sa-auth .sa-heading {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin: 0 0 1.5rem;
+  text-align: center;
+  color: var(--seamless-text, white);
+}
+
+.sa-auth .sa-subtitle,
+.sa-auth .sa-description {
+  color: var(--seamless-text-muted, #d1d5db);
+  text-align: center;
+  margin: 0 0 1rem;
+}
+
+.sa-auth .sa-input-group {
+  margin-bottom: 1rem;
+}
+
+.sa-auth .sa-label {
+  display: block;
+  color: var(--seamless-text-muted, #d1d5db);
+}
+
+.sa-auth .sa-input {
+  width: 100%;
+  padding: 0.5rem;
+  color: inherit;
+  background-color: var(--seamless-surface-raised, #4b5563);
+  border: 1px solid var(--seamless-border, #d1d5db);
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.sa-auth .sa-input:focus,
+.sa-auth .sa-otp-input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--seamless-accent, #3b82f6);
+}
+
+.sa-auth .sa-helper-text {
+  font-size: 0.75rem;
+  color: var(--seamless-text-muted, #9ca3af);
+  margin-top: 0.5rem;
+}
+
+.sa-auth .sa-error {
+  color: var(--seamless-danger, #f87171);
+  font-size: 0.875rem;
+}
+
+.sa-auth .sa-success {
+  color: var(--seamless-success, #68d391);
+  font-size: 0.875rem;
+}
+
+.sa-auth .sa-button {
+  width: 100%;
+  border: none;
+  background-color: var(--seamless-accent, #2563eb);
+  color: var(--seamless-accent-contrast, white);
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  transition:
+    background-color 0.3s,
+    opacity 0.3s;
+  cursor: pointer;
+  margin-top: 1rem;
+  font: inherit;
+}
+
+.sa-auth .sa-button:hover:not(:disabled) {
+  background-color: var(--seamless-accent-hover, #1d4ed8);
+}
+
+.sa-auth .sa-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sa-auth .sa-secondary {
+  width: 100%;
+  margin-top: 0.75rem;
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--seamless-text, white);
+  border: 1px solid var(--seamless-border, #d1d5db);
+  cursor: pointer;
+  font: inherit;
+}
+
+.sa-auth .sa-submit-hint {
+  font-size: 0.75rem;
+  color: var(--seamless-text-muted, #9ca3af);
+  margin-top: 0.5rem;
+  text-align: center;
+}
+
+.sa-auth .sa-link {
+  margin-top: 1rem;
+  width: 100%;
+  font-size: 0.875rem;
+  color: var(--seamless-accent-soft, #60a5fa);
+  text-align: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.sa-auth .sa-link:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.sa-auth .sa-fallback {
+  margin-top: 18px;
+  padding: 18px;
+  border-radius: 12px;
+  background: var(--seamless-surface-raised, rgba(255, 255, 255, 0.04));
+  border: 1px solid var(--seamless-border, rgba(255, 255, 255, 0.08));
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sa-auth .sa-fallback-header {
+  font-weight: 600;
+}
+
+.sa-auth .sa-fallback-description {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--seamless-text-muted, #9ca3af);
+}
+
+.sa-auth .sa-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 1rem;
+}
+
+.sa-auth .sa-action {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: var(--seamless-surface, rgba(255, 255, 255, 0.02));
+  border: 1px solid var(--seamless-border, rgba(255, 255, 255, 0.12));
+  color: var(--seamless-text, white);
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+}
+
+.sa-auth .sa-action:hover {
+  border-color: var(--seamless-accent, #3b82f6);
+}
+
+.sa-auth .sa-action-title {
+  font-weight: 600;
+}
+
+.sa-auth .sa-action-subtext {
+  font-size: 0.8rem;
+  color: var(--seamless-text-muted, #9ca3af);
+}
+
+.sa-auth .sa-otp {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  margin: 0.75rem 0;
+}
+
+.sa-auth .sa-otp-input {
+  width: 2.75rem;
+  height: 3rem;
+  text-align: center;
+  font-size: 1.25rem;
+  color: inherit;
+  background-color: var(--seamless-surface-raised, #4b5563);
+  border: 1px solid var(--seamless-border, #d1d5db);
+  border-radius: 0.375rem;
+}
+
+.sa-auth .sa-timer {
+  font-size: 0.75rem;
+  color: var(--seamless-warning, #facc15);
+}
+
+.sa-auth .sa-identifier {
+  margin: 0.75rem auto;
+  padding: 0.25rem 0.75rem;
+  width: fit-content;
+  border-radius: 999px;
+  background: var(--seamless-surface-raised, #4b5563);
+}
+
+.sa-auth .sa-center {
+  text-align: center;
+}
+
+.sa-auth .sa-spinner {
+  width: 2rem;
+  height: 2rem;
+  margin: 1rem auto;
+  border: 3px solid var(--seamless-border, rgba(255, 255, 255, 0.2));
+  border-top-color: var(--seamless-accent, #3b82f6);
+  border-radius: 50%;
+  animation: sa-spin 0.9s linear infinite;
+}
+
+@keyframes sa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sa-auth .sa-spinner {
+    animation: none;
+  }
+}

package/dist/styles.generated.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;

package/dist/styles.generated.js

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-svelte-styles.mjs from resources/styles/seamless-auth.css.
+const css = "/*\n * Styles for the bundled Seamless Auth screens of the Angular and Vue bindings\n * (and those that follow). One file, so the screens look the same in every\n * framework. Theme them with the same --seamless-* custom properties the React\n * screens read, or override the .sa-* classes. Every rule is scoped under\n * .sa-auth.\n */\n\n.sa-auth {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--seamless-text, white);\n  font-family: inherit;\n}\n\n.sa-auth *,\n.sa-auth *::before,\n.sa-auth *::after {\n  box-sizing: border-box;\n}\n\n.sa-auth .sa-card {\n  background-color: var(--seamless-surface, #1f2937);\n  padding: 2rem;\n  border-radius: 0.5rem;\n  box-shadow: 0 4px 6px var(--seamless-shadow, rgba(0, 0, 0, 0.1));\n  width: 100%;\n  max-width: 28rem;\n}\n\n.sa-auth .sa-heading {\n  font-size: 1.5rem;\n  font-weight: bold;\n  margin: 0 0 1.5rem;\n  text-align: center;\n  color: var(--seamless-text, white);\n}\n\n.sa-auth .sa-subtitle,\n.sa-auth .sa-description {\n  color: var(--seamless-text-muted, #d1d5db);\n  text-align: center;\n  margin: 0 0 1rem;\n}\n\n.sa-auth .sa-input-group {\n  margin-bottom: 1rem;\n}\n\n.sa-auth .sa-label {\n  display: block;\n  color: var(--seamless-text-muted, #d1d5db);\n}\n\n.sa-auth .sa-input {\n  width: 100%;\n  padding: 0.5rem;\n  color: inherit;\n  background-color: var(--seamless-surface-raised, #4b5563);\n  border: 1px solid var(--seamless-border, #d1d5db);\n  border-radius: 0.375rem;\n  margin-top: 0.25rem;\n}\n\n.sa-auth .sa-input:focus,\n.sa-auth .sa-otp-input:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--seamless-accent, #3b82f6);\n}\n\n.sa-auth .sa-helper-text {\n  font-size: 0.75rem;\n  color: var(--seamless-text-muted, #9ca3af);\n  margin-top: 0.5rem;\n}\n\n.sa-auth .sa-error {\n  color: var(--seamless-danger, #f87171);\n  font-size: 0.875rem;\n}\n\n.sa-auth .sa-success {\n  color: var(--seamless-success, #68d391);\n  font-size: 0.875rem;\n}\n\n.sa-auth .sa-button {\n  width: 100%;\n  border: none;\n  background-color: var(--seamless-accent, #2563eb);\n  color: var(--seamless-accent-contrast, white);\n  padding: 0.5rem;\n  border-radius: 0.375rem;\n  transition:\n    background-color 0.3s,\n    opacity 0.3s;\n  cursor: pointer;\n  margin-top: 1rem;\n  font: inherit;\n}\n\n.sa-auth .sa-button:hover:not(:disabled) {\n  background-color: var(--seamless-accent-hover, #1d4ed8);\n}\n\n.sa-auth .sa-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.sa-auth .sa-secondary {\n  width: 100%;\n  margin-top: 0.75rem;\n  padding: 0.5rem;\n  border-radius: 0.375rem;\n  background: transparent;\n  color: var(--seamless-text, white);\n  border: 1px solid var(--seamless-border, #d1d5db);\n  cursor: pointer;\n  font: inherit;\n}\n\n.sa-auth .sa-submit-hint {\n  font-size: 0.75rem;\n  color: var(--seamless-text-muted, #9ca3af);\n  margin-top: 0.5rem;\n  text-align: center;\n}\n\n.sa-auth .sa-link {\n  margin-top: 1rem;\n  width: 100%;\n  font-size: 0.875rem;\n  color: var(--seamless-accent-soft, #60a5fa);\n  text-align: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.sa-auth .sa-link:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.sa-auth .sa-fallback {\n  margin-top: 18px;\n  padding: 18px;\n  border-radius: 12px;\n  background: var(--seamless-surface-raised, rgba(255, 255, 255, 0.04));\n  border: 1px solid var(--seamless-border, rgba(255, 255, 255, 0.08));\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n\n.sa-auth .sa-fallback-header {\n  font-weight: 600;\n}\n\n.sa-auth .sa-fallback-description {\n  margin: 0;\n  font-size: 0.875rem;\n  color: var(--seamless-text-muted, #9ca3af);\n}\n\n.sa-auth .sa-actions {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 1rem;\n}\n\n.sa-auth .sa-action {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 2px;\n  width: 100%;\n  padding: 12px 14px;\n  border-radius: 10px;\n  background: var(--seamless-surface, rgba(255, 255, 255, 0.02));\n  border: 1px solid var(--seamless-border, rgba(255, 255, 255, 0.12));\n  color: var(--seamless-text, white);\n  cursor: pointer;\n  text-align: left;\n  font: inherit;\n}\n\n.sa-auth .sa-action:hover {\n  border-color: var(--seamless-accent, #3b82f6);\n}\n\n.sa-auth .sa-action-title {\n  font-weight: 600;\n}\n\n.sa-auth .sa-action-subtext {\n  font-size: 0.8rem;\n  color: var(--seamless-text-muted, #9ca3af);\n}\n\n.sa-auth .sa-otp {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: center;\n  margin: 0.75rem 0;\n}\n\n.sa-auth .sa-otp-input {\n  width: 2.75rem;\n  height: 3rem;\n  text-align: center;\n  font-size: 1.25rem;\n  color: inherit;\n  background-color: var(--seamless-surface-raised, #4b5563);\n  border: 1px solid var(--seamless-border, #d1d5db);\n  border-radius: 0.375rem;\n}\n\n.sa-auth .sa-timer {\n  font-size: 0.75rem;\n  color: var(--seamless-warning, #facc15);\n}\n\n.sa-auth .sa-identifier {\n  margin: 0.75rem auto;\n  padding: 0.25rem 0.75rem;\n  width: fit-content;\n  border-radius: 999px;\n  background: var(--seamless-surface-raised, #4b5563);\n}\n\n.sa-auth .sa-center {\n  text-align: center;\n}\n\n.sa-auth .sa-spinner {\n  width: 2rem;\n  height: 2rem;\n  margin: 1rem auto;\n  border: 3px solid var(--seamless-border, rgba(255, 255, 255, 0.2));\n  border-top-color: var(--seamless-accent, #3b82f6);\n  border-radius: 50%;\n  animation: sa-spin 0.9s linear infinite;\n}\n\n@keyframes sa-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sa-auth .sa-spinner {\n    animation: none;\n  }\n}\n";
+export default css;

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "@seamless-auth/svelte",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Svelte bindings for Seamless Auth: a rune-based session, SvelteKit guards, and optional sign-in screens.",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./kit": {
+      "types": "./dist/kit/index.d.ts",
+      "svelte": "./dist/kit/index.js",
+      "default": "./dist/kit/index.js"
+    },
+    "./seamless-auth.css": "./dist/seamless-auth.css"
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=22",
+    "npm": ">=9.0.0 <13.0.0"
+  },
+  "scripts": {
+    "styles": "node ../../scripts/generate-svelte-styles.mjs",
+    "build": "npm run styles && node ../../scripts/clean-dist.mjs && svelte-package -i src -o dist && node ../../scripts/finalize-svelte-dist.mjs",
+    "typecheck": "npm run styles && svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+    "test": "npm run styles && vitest run",
+    "check-npm-build": "npm pack --dry-run"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fells-code/seamless-auth-react.git",
+    "directory": "packages/svelte"
+  },
+  "author": "Fells Code, LLC",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/fells-code/seamless-auth-react/issues"
+  },
+  "homepage": "https://github.com/fells-code/seamless-auth-react/tree/main/packages/svelte#readme",
+  "keywords": [
+    "svelte",
+    "sveltekit",
+    "authentication",
+    "passkeys",
+    "webauthn",
+    "seamless-auth"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": "^2.26.0 || ^3.0.0",
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@sveltejs/kit": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@seamless-auth/client": "^0.6.0"
+  },
+  "sideEffects": [
+    "*.css"
+  ]
+}