@singlebase/elements 0.1.0

package/dist/uploader-D-Da1trc.js

@@ -0,0 +1,2290 @@
+var ue = (r) => {
+  throw TypeError(r);
+};
+var be = (r, e, t) => e.has(r) || ue("Cannot " + t);
+var d = (r, e, t) => (be(r, e, "read from private field"), t ? t.call(r) : e.get(r)), l = (r, e, t) => e.has(r) ? ue("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), c = (r, e, t, o) => (be(r, e, "write to private field"), o ? o.call(r, t) : e.set(r, t), t);
+import { unsafeCSS as ge, css as se, LitElement as Ce, nothing as x, html as f } from "lit";
+import { property as g, state as Z, customElement as Me } from "lit/decorators.js";
+import { getDefaultClient as Le } from "@singlebase/core";
+const he = {
+  font: '"Geist", -apple-system, "Segoe UI", Helvetica, sans-serif',
+  mono: '"Geist Mono", ui-monospace, monospace',
+  accent: "#111111",
+  onAccent: "#ffffff",
+  radius: "4px",
+  surface: "#ffffff",
+  surfaceAlt: "#fafafa",
+  ink: "#16181a",
+  mutedInk: "#61666c",
+  border: "#e4e6e9",
+  borderStrong: "#cdd1d6",
+  danger: "#b4231a",
+  dangerBg: "#fdf1f0",
+  dangerBorder: "#f3d6d3",
+  dangerOutline: "#e8c4c0",
+  dangerPanelBorder: "#efd9d6",
+  dangerPanelBg: "#fdf7f6",
+  ok: "#0f6b4a",
+  okBg: "#f0f7f3",
+  okBorder: "#cfe5da",
+  gap: "16px",
+  pad: "20px",
+  fieldPad: "11px 13px"
+}, Te = se`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    font-family: var(--sb-font, ${ge(he.font)});
+    color: var(--sb-ink, ${ge(he.ink)});
+  }
+
+  :host([theme="dark"]) {
+    /* The light default accent is near-black, which disappears on a dark
+       surface — primary buttons and links both use it. A host that sets its
+       own --sb-accent still wins: outer-page declarations beat :host rules. */
+    --sb-accent: #f3f4f5;
+    --sb-on-accent: #17181b;
+    --sb-surface: #17181b;
+    --sb-surface-alt: #202226;
+    --sb-ink: #f3f4f5;
+    --sb-muted-ink: #a2a8ae;
+    --sb-border: #2c2f34;
+    --sb-border-strong: #3a3e44;
+    --sb-danger: #f08379;
+    --sb-danger-bg: rgba(240, 131, 121, 0.1);
+    --sb-danger-border: rgba(240, 131, 121, 0.3);
+    --sb-danger-outline: rgba(240, 131, 121, 0.4);
+    --sb-danger-panel-border: rgba(240, 131, 121, 0.3);
+    --sb-danger-panel-bg: rgba(240, 131, 121, 0.06);
+    --sb-ok: #6fd1a6;
+    --sb-ok-bg: rgba(111, 209, 166, 0.1);
+    --sb-ok-border: rgba(111, 209, 166, 0.28);
+  }
+
+  :host([density="compact"]) {
+    --sb-gap: 12px;
+    --sb-pad: 16px;
+    --sb-field-pad: 9px 11px;
+  }
+`, Fe = se`
+  /* ── layout primitives ───────────────────────────────────── */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sb-gap, 16px);
+  }
+
+  .fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sb-gap, 16px);
+  }
+
+  .head {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .two-up {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: var(--sb-gap, 16px);
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .rule {
+    height: 1px;
+    background: var(--sb-border, #e4e6e9);
+  }
+
+  .between {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  /* ── type ────────────────────────────────────────────────── */
+  .logo-dot {
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--sb-muted-ink, #61666c);
+    margin-bottom: 6px;
+  }
+
+  .title {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+    color: var(--sb-ink, #16181a);
+  }
+
+  .sub {
+    margin: 0;
+    font-size: 13.5px;
+    line-height: 1.5;
+    color: var(--sb-muted-ink, #61666c);
+    text-wrap: pretty;
+  }
+
+  .sec-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: var(--sb-ink, #16181a);
+  }
+
+  .hint {
+    margin: 0;
+    font-size: 12.5px;
+    line-height: 1.5;
+    color: var(--sb-muted-ink, #61666c);
+    text-wrap: pretty;
+  }
+
+  .sub-label {
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 11px;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  /* ── fields ──────────────────────────────────────────────── */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .label-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  label,
+  .label {
+    font-size: 12.5px;
+    font-weight: 500;
+    color: var(--sb-muted-ink, #61666c);
+    letter-spacing: 0.01em;
+  }
+
+  input {
+    width: 100%;
+    box-sizing: border-box;
+    font: inherit;
+    font-size: 14px;
+    color: var(--sb-ink, #16181a);
+    background: var(--sb-surface-alt, #fafafa);
+    border: 1px solid var(--sb-border, #e4e6e9);
+    border-radius: var(--sb-radius, 4px);
+    padding: var(--sb-field-pad, 11px 13px);
+    outline: none;
+  }
+
+  input:focus {
+    border-color: var(--sb-accent, #111111);
+  }
+
+  input[aria-invalid="true"] {
+    border-color: var(--sb-danger, #b4231a);
+  }
+
+  /* field-style="underline" — code boxes keep their box, they read as cells */
+  :host([field-style="underline"]) *:not(.code-row):not(.code-row-sm) > input {
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid var(--sb-border-strong, #cdd1d6);
+    border-radius: 0;
+    padding: 9px 2px;
+  }
+
+  p.err {
+    margin: 0;
+    font-size: 12.5px;
+    color: var(--sb-danger, #b4231a);
+  }
+
+  /* ── code entry ──────────────────────────────────────────── */
+  .code-row {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+  }
+
+  .code-row input {
+    text-align: center;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 18px;
+    padding: 12px 0;
+  }
+
+  .code-row-sm {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 6px;
+  }
+
+  .code-row-sm input {
+    text-align: center;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 14px;
+    padding: 8px 0;
+  }
+
+  .resend-row {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+  }
+
+  /* ── buttons ─────────────────────────────────────────────── */
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    font: inherit;
+    font-size: 13.5px;
+    font-weight: 500;
+    border-radius: var(--sb-radius, 4px);
+    cursor: pointer;
+    padding: 9px 14px;
+    border: 1px solid transparent;
+    transition:
+      background 0.15s,
+      border-color 0.15s,
+      filter 0.15s,
+      color 0.15s;
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+  }
+
+  button.primary {
+    background: var(--sb-accent, #111111);
+    color: var(--sb-on-accent, #ffffff);
+    width: 100%;
+  }
+
+  button.primary:hover:not(:disabled) {
+    filter: brightness(0.92);
+  }
+
+  button.primary-sm {
+    background: var(--sb-accent, #111111);
+    color: var(--sb-on-accent, #ffffff);
+    padding: 7px 12px;
+  }
+
+  button.primary-sm:hover:not(:disabled) {
+    filter: brightness(0.92);
+  }
+
+  button.ghost {
+    background: transparent;
+    color: var(--sb-muted-ink, #61666c);
+    border: 1px solid var(--sb-border, #e4e6e9);
+    width: 100%;
+  }
+
+  button.ghost-sm {
+    background: transparent;
+    color: var(--sb-muted-ink, #61666c);
+    border: 1px solid var(--sb-border, #e4e6e9);
+    padding: 7px 12px;
+  }
+
+  button.ghost:hover:not(:disabled),
+  button.ghost-sm:hover:not(:disabled) {
+    background: var(--sb-surface-alt, #fafafa);
+    color: var(--sb-ink, #16181a);
+  }
+
+  button.secondary {
+    background: var(--sb-surface, #ffffff);
+    color: var(--sb-ink, #16181a);
+    border: 1px solid var(--sb-border-strong, #cdd1d6);
+    padding: 7px 12px;
+  }
+
+  button.secondary:hover:not(:disabled) {
+    background: var(--sb-surface-alt, #fafafa);
+  }
+
+  button.link {
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--sb-accent, #111111);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  button.link-sm {
+    font: inherit;
+    font-size: 12.5px;
+    font-weight: 400;
+    color: var(--sb-muted-ink, #61666c);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  /* the mock's editLink: a muted underlined affordance that inks on hover */
+  button.edit-link {
+    align-self: flex-start;
+    font: inherit;
+    font-size: 12.5px;
+    font-weight: 400;
+    color: var(--sb-muted-ink, #61666c);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    transition: color 0.15s;
+  }
+
+  button.edit-link:hover:not(:disabled) {
+    color: var(--sb-ink, #16181a);
+  }
+
+  button.edit-link:disabled {
+    opacity: 0.4;
+  }
+
+  button.danger-link {
+    align-self: flex-start;
+    font: inherit;
+    font-size: 12.5px;
+    font-weight: 400;
+    color: var(--sb-muted-ink, #61666c);
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    transition: color 0.15s;
+  }
+
+  button.danger-link:hover:not(:disabled) {
+    color: var(--sb-danger, #b4231a);
+  }
+
+  button.danger {
+    padding: 7px 12px;
+    background: transparent;
+    color: var(--sb-danger, #b4231a);
+    border: 1px solid var(--sb-danger-outline, #e8c4c0);
+  }
+
+  button.danger:hover:not(:disabled) {
+    background: var(--sb-danger-bg, #fdf1f0);
+  }
+
+  button.danger:disabled {
+    opacity: 0.45;
+  }
+
+  .btn-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .btn-row-end {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  .edit-actions {
+    display: flex;
+    gap: 8px;
+    padding-top: 2px;
+  }
+
+  /* ── feedback ────────────────────────────────────────────── */
+  .banner,
+  .notice {
+    font-size: 13px;
+    line-height: 1.45;
+    border-radius: var(--sb-radius, 4px);
+    padding: 10px 12px;
+  }
+
+  .banner {
+    color: var(--sb-danger, #b4231a);
+    background: var(--sb-danger-bg, #fdf1f0);
+    border: 1px solid var(--sb-danger-border, #f3d6d3);
+  }
+
+  .notice {
+    color: var(--sb-ok, #0f6b4a);
+    background: var(--sb-ok-bg, #f0f7f3);
+    border: 1px solid var(--sb-ok-border, #cfe5da);
+  }
+
+  .saved-note {
+    font-size: 12.5px;
+    font-weight: 500;
+    color: var(--sb-ok, #0f6b4a);
+  }
+
+  .spinner {
+    width: 13px;
+    height: 13px;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    border-top-color: var(--sb-on-accent, #ffffff);
+    border-radius: 50%;
+    animation: sb-spin 0.7s linear infinite;
+  }
+
+  @keyframes sb-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
+
+  /* ── step bar ────────────────────────────────────────────── */
+  .step-bar {
+    height: 3px;
+    background: var(--sb-border, #e4e6e9);
+    border-radius: 99px;
+    overflow: hidden;
+  }
+
+  .step-fill {
+    height: 100%;
+    background: var(--sb-accent, #111111);
+    transition: width 0.3s;
+  }
+
+  /* ── footer link row ─────────────────────────────────────── */
+  .foot {
+    margin: 0;
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+    font-size: 13px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  /* ── oauth ───────────────────────────────────────────────── */
+  .oauth-primary {
+    background: var(--sb-surface, #ffffff);
+    color: var(--sb-ink, #16181a);
+    border: 1px solid var(--sb-border-strong, #cdd1d6);
+    width: 100%;
+  }
+
+  .oauth-primary:hover:not(:disabled) {
+    background: var(--sb-surface-alt, #fafafa);
+  }
+
+  .g-mark {
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-weight: 500;
+    font-size: 13px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .icon-row {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 8px;
+  }
+
+  .icon-btn {
+    padding: 7px 0;
+    background: var(--sb-surface, #ffffff);
+    color: var(--sb-muted-ink, #61666c);
+    border: 1px solid var(--sb-border, #e4e6e9);
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 13px;
+  }
+
+  .icon-btn:hover:not(:disabled) {
+    background: var(--sb-surface-alt, #fafafa);
+    color: var(--sb-ink, #16181a);
+  }
+
+  /* ── accordion (method picker) ───────────────────────────── */
+  .acc-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .acc-item {
+    border: 1px solid var(--sb-border, #e4e6e9);
+    border-radius: var(--sb-radius, 4px);
+    overflow: hidden;
+    background: transparent;
+    transition:
+      border-color 0.2s,
+      background 0.2s;
+  }
+
+  .acc-item.open {
+    border-color: var(--sb-border-strong, #cdd1d6);
+    background: var(--sb-surface, #ffffff);
+  }
+
+  .acc-item.bare {
+    border: none;
+    background: transparent;
+  }
+
+  .acc-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    font: inherit;
+    text-align: left;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 11px 12px;
+    cursor: pointer;
+    color: var(--sb-ink, #16181a);
+    transition: background 0.15s;
+  }
+
+  .acc-head:hover {
+    background: var(--sb-surface-alt, #fafafa);
+  }
+
+  .chev {
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 13px;
+    color: var(--sb-muted-ink, #61666c);
+    line-height: 1;
+    transform: rotate(0deg);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .acc-item.open .chev {
+    transform: rotate(90deg);
+  }
+
+  .acc-title {
+    font-size: 13.5px;
+    font-weight: 500;
+    color: var(--sb-ink, #16181a);
+    letter-spacing: -0.005em;
+  }
+
+  .acc-meta {
+    font-size: 12px;
+    color: var(--sb-muted-ink, #61666c);
+    margin-left: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .acc-body {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition:
+      grid-template-rows 0.28s cubic-bezier(0.32, 0.72, 0, 1),
+      opacity 0.16s ease;
+  }
+
+  .acc-item.open .acc-body {
+    grid-template-rows: 1fr;
+    opacity: 1;
+    transition:
+      grid-template-rows 0.34s cubic-bezier(0.32, 0.72, 0, 1),
+      opacity 0.26s ease 0.06s;
+  }
+
+  .acc-clip {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .acc-inner {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sb-gap, 16px);
+    padding: 2px 12px 14px;
+    transform: translateY(-4px);
+    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .acc-item.open .acc-inner {
+    transform: translateY(0);
+  }
+
+  .acc-item.bare .acc-inner {
+    padding: 0;
+  }
+
+  /* ── invite ──────────────────────────────────────────────── */
+  .invite-box {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 10px 12px;
+    background: var(--sb-surface-alt, #fafafa);
+    border: 1px solid var(--sb-border, #e4e6e9);
+    border-radius: var(--sb-radius, 4px);
+  }
+
+  .invite-label {
+    font-size: 11.5px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .invite-email {
+    font-size: 14px;
+    color: var(--sb-ink, #16181a);
+  }
+
+  /* ── account ─────────────────────────────────────────────── */
+  .acct-root {
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+    width: 100%;
+  }
+
+  .acct-nav {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    padding-bottom: 18px;
+    border-bottom: 1px solid var(--sb-border, #e4e6e9);
+  }
+
+  .acct-who {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .avatar-col {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .avatar {
+    flex: 0 0 auto;
+    width: 42px;
+    height: 42px;
+    border-radius: 50%;
+    background: var(--sb-surface-alt, #fafafa);
+    border: 1px dashed var(--sb-border, #e4e6e9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 13px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .avatar.has-photo {
+    border-style: solid;
+    overflow: hidden;
+  }
+  .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-lg {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    background: var(--sb-surface-alt, #fafafa);
+    border: 1px dashed var(--sb-border-strong, #cdd1d6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 13px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .avatar-row {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+
+  .avatar-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .acct-who-text {
+    min-width: 0;
+  }
+
+  .acct-name {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--sb-ink, #16181a);
+    letter-spacing: -0.01em;
+  }
+
+  .acct-email {
+    font-size: 12.5px;
+    color: var(--sb-muted-ink, #61666c);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .acct-body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+  }
+
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .sum-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sum-row {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 15px 0;
+    border-bottom: 1px solid var(--sb-border, #e4e6e9);
+  }
+
+  .sum-label {
+    flex: 0 0 auto;
+    font-size: 12.5px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .sum-value {
+    min-width: 0;
+    font-size: 13.5px;
+    color: var(--sb-ink, #16181a);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .edit-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sb-gap, 16px);
+    padding: 14px;
+    background: var(--sb-surface-alt, #fafafa);
+    border: 1px solid var(--sb-border, #e4e6e9);
+    border-radius: var(--sb-radius, 4px);
+  }
+
+  /* 2FA switch */
+  .switch {
+    flex: 0 0 auto;
+    width: 42px;
+    height: 24px;
+    border-radius: 99px;
+    border: 1px solid var(--sb-border-strong, #cdd1d6);
+    background: var(--sb-surface-alt, #fafafa);
+    cursor: pointer;
+    padding: 2px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    transition:
+      background 0.15s,
+      border-color 0.15s;
+  }
+
+  .switch[aria-pressed="true"] {
+    border-color: var(--sb-accent, #111111);
+    background: var(--sb-accent, #111111);
+    justify-content: flex-end;
+  }
+
+  .knob {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--sb-muted-ink, #61666c);
+    display: block;
+  }
+
+  .switch[aria-pressed="true"] .knob {
+    background: var(--sb-on-accent, #ffffff);
+  }
+
+  .qr-row {
+    display: flex;
+    gap: 14px;
+    align-items: flex-start;
+  }
+
+  .qr-box {
+    flex: 0 0 auto;
+    width: 74px;
+    height: 74px;
+    border-radius: var(--sb-radius, 4px);
+    background: var(--sb-surface-alt, #fafafa);
+    border: 1px dashed var(--sb-border-strong, #cdd1d6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 12px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .qr-text {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  /* connected accounts */
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .conn-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 12px;
+    border: 1px solid var(--sb-border, #e4e6e9);
+    border-radius: var(--sb-radius, 4px);
+    background: var(--sb-surface-alt, #fafafa);
+  }
+
+  .conn-left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+  }
+
+  .conn-mark {
+    flex: 0 0 auto;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: var(--sb-surface, #ffffff);
+    border: 1px solid var(--sb-border, #e4e6e9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 11px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .conn-name {
+    font-size: 13.5px;
+    font-weight: 500;
+    color: var(--sb-ink, #16181a);
+  }
+
+  .meta-row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .dot {
+    flex: 0 0 auto;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--sb-ok, #0f6b4a);
+  }
+
+  .conn-meta {
+    font-size: 12px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .tile-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
+    gap: 8px;
+  }
+
+  .tile {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font: inherit;
+    text-align: left;
+    padding: 10px 11px;
+    border-radius: var(--sb-radius, 4px);
+    border: 1px dashed var(--sb-border-strong, #cdd1d6);
+    background: transparent;
+    cursor: pointer;
+    transition:
+      background 0.15s,
+      border-color 0.15s,
+      color 0.15s;
+  }
+
+  .tile:hover:not(:disabled) {
+    background: var(--sb-surface-alt, #fafafa);
+    border-color: var(--sb-accent, #111111);
+    border-style: solid;
+  }
+
+  .tile-mark {
+    flex: 0 0 auto;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--sb-surface-alt, #fafafa);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 10.5px;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .tile-name {
+    font-size: 13px;
+    color: var(--sb-ink, #16181a);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tile-plus {
+    margin-left: auto;
+    font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+    font-size: 14px;
+    line-height: 1;
+    color: var(--sb-muted-ink, #61666c);
+  }
+
+  .delete-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 14px;
+    border: 1px solid var(--sb-danger-panel-border, #efd9d6);
+    border-radius: var(--sb-radius, 4px);
+    background: var(--sb-danger-panel-bg, #fdf7f6);
+  }
+
+  .disabled-note {
+    font-size: 12px;
+    color: var(--sb-muted-ink, #61666c);
+    font-style: italic;
+  }
+`;
+function Oe(r, e, t) {
+  if (!r || !e) return null;
+  let o;
+  try {
+    o = new URL(e);
+  } catch {
+    return null;
+  }
+  let n;
+  try {
+    n = new URL(r, o.href);
+  } catch {
+    return t == null || t(`"${r}" is not a valid URL`), null;
+  }
+  return n.protocol !== "http:" && n.protocol !== "https:" ? (t == null || t(`refusing redirect to unsupported scheme "${n.protocol}"`), null) : n.origin !== o.origin ? (t == null || t(`refusing cross-origin redirect to ${n.origin}; same-origin only`), null) : n.href === o.href ? null : n.href;
+}
+const me = {
+  heading: "Upload files",
+  description: "Add one or more files. You can review the list before uploading.",
+  dropTitle: "Drag and drop files here",
+  dropSub: "or browse from your device",
+  hintUpTo: "up to {size} each",
+  chooseFiles: "Choose files",
+  chooseFile: "Choose file",
+  addMore: "+ Add more files",
+  remove: "Remove",
+  rename: "Rename",
+  retry: "Retry",
+  uploadCtaOne: "Upload {n} file",
+  uploadCtaMany: "Upload {n} files",
+  attachments: "Attachments",
+  dropOrChoose: "Drop files or choose",
+  checking: "Checking…",
+  pagesLabel: "{n} pages",
+  countOne: "{n} file of {max}",
+  countMany: "{n} files of {max}",
+  uploading: "Uploading…",
+  uploaded: "Uploaded",
+  failedLabel: "Failed",
+  errTooMany: "You can upload up to {max} files.",
+  errTooLarge: "{name} is larger than {size}.",
+  errTooSmall: "{name} is smaller than {size}.",
+  errDuplicate: "{name} is already in the list.",
+  errType: "{name} isn't an accepted file type.",
+  errNoClient: "No Singlebase client found on this page.",
+  errUpload: "Upload failed.",
+  errProtected: "{name} is password protected.",
+  errTooManyPages: "{name} has {pages} pages; the limit is {max}.",
+  brandingLabel: "Files by Singlebase"
+};
+function De(r) {
+  return r ? { ...me, ...r } : me;
+}
+function v(r, e) {
+  return r.replace(
+    /\{(\w+)\}/g,
+    (t, o) => o in e ? String(e[o]) : t
+  );
+}
+const je = {
+  b: 1,
+  kb: 1024,
+  mb: 1024 * 1024,
+  gb: 1024 * 1024 * 1024
+};
+function ne(r) {
+  if (typeof r == "number") return r > 0 ? r : 0;
+  if (!r) return 0;
+  const e = String(r).trim().toLowerCase().match(/^([\d.]+)\s*(b|kb|mb|gb)?$/);
+  if (!e) return 0;
+  const t = Number.parseFloat(e[1]);
+  return !Number.isFinite(t) || t <= 0 ? 0 : Math.round(t * (je[e[2] ?? "b"] ?? 1));
+}
+function ee(r) {
+  return r < 1024 ? `${r} B` : r < 1024 * 1024 ? `${Math.round(r / 1024)} KB` : r < 1024 * 1024 * 1024 ? `${(r / (1024 * 1024)).toFixed(1)} MB` : `${(r / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function te(r) {
+  const e = r.lastIndexOf(".");
+  return e <= 0 || e === r.length - 1 ? "" : r.slice(e + 1).toLowerCase();
+}
+function Ae(r) {
+  return te(r).toUpperCase().slice(0, 4);
+}
+function Ee(r, e, t) {
+  const o = r.split(",").map((i) => i.trim().toLowerCase()).filter(Boolean);
+  if (!o.length) return !0;
+  const n = e.toLowerCase(), u = (t || "").toLowerCase();
+  return o.some((i) => i.startsWith(".") ? n.endsWith(i) : i.endsWith("/*") ? u.startsWith(i.slice(0, -1)) : u === i);
+}
+function Ne(r) {
+  const e = r.split(",").map((t) => t.trim()).filter(Boolean).map((t) => {
+    if (t.startsWith(".")) return t.slice(1).toUpperCase();
+    if (t.endsWith("/*")) return t.slice(0, -2).toUpperCase();
+    const o = t.indexOf("/");
+    return (o >= 0 ? t.slice(o + 1) : t).toUpperCase();
+  });
+  return [...new Set(e)].join(", ");
+}
+function Be(r) {
+  return `${r.name}:${r.size}:${r.lastModified ?? 0}`;
+}
+function Pe(r, e) {
+  const t = e.trim().replace(/[/\\]/g, "");
+  if (!t) return r;
+  const o = r.lastIndexOf("."), n = o > 0 ? r.slice(o) : "";
+  return n ? t.toLowerCase().endsWith(n.toLowerCase()) ? t : t + n : t;
+}
+const we = { pages: null, encrypted: null }, xe = 16 * 1024 * 1024, Re = 2 * 1024 * 1024, Ie = 40, Ge = 4 * 1024 * 1024, ke = /* @__PURE__ */ new Set(["docx", "pptx", "xlsx"]);
+async function _e(r, e) {
+  try {
+    if (e === "pdf") return await We(r);
+    if (ke.has(e)) return await qe(r, e);
+  } catch {
+  }
+  return we;
+}
+function Ke(r) {
+  return r === "pdf" || ke.has(r);
+}
+async function We(r) {
+  const e = await re(r.slice(0, xe)), t = r.size > xe ? await re(r.slice(Math.max(0, r.size - Re))) : null, o = oe(e) + (t ? oe(t) : ""), n = /\/Encrypt[\s/<>\]]/.test(o);
+  let u = ze(o);
+  return u === null && (u = await Ye(e)), { pages: u, encrypted: n };
+}
+function ze(r) {
+  if (/\/Type\s*\/Pages/.test(r)) {
+    let t = 0;
+    for (const o of r.matchAll(/\/Count\s+(\d+)/g))
+      t = Math.max(t, Number(o[1]));
+    if (t > 0) return t;
+  }
+  const e = r.match(/\/Type\s*\/Page[^s]/g);
+  return e != null && e.length ? e.length : null;
+}
+async function Ye(r) {
+  if (typeof DecompressionStream > "u") return null;
+  const e = oe(r);
+  let t = "", o = 0;
+  for (const n of e.matchAll(/stream\r?\n/g)) {
+    if (o >= Ie || t.length >= Ge) break;
+    const u = n.index + n[0].length;
+    let i = e.indexOf("endstream", u);
+    if (i < 0) break;
+    for (; i > u && (e[i - 1] === `
+` || e[i - 1] === "\r"); ) i -= 1;
+    o += 1;
+    try {
+      const a = await $e(r.subarray(u, i), "deflate");
+      t += oe(a);
+    } catch {
+    }
+  }
+  return t ? ze(t) : null;
+}
+async function qe(r, e) {
+  const t = await re(r.slice(0, 8));
+  if (He(t)) return { pages: null, encrypted: !0 };
+  if (t[0] !== 80 || t[1] !== 75) return we;
+  const o = await Ve(r, "docProps/app.xml");
+  if (!o) return { pages: null, encrypted: !1 };
+  const n = e === "pptx" ? "Slides" : "Pages", u = new TextDecoder().decode(o).match(new RegExp(`<${n}>(\\d+)</${n}>`));
+  return { pages: u ? Number(u[1]) : null, encrypted: !1 };
+}
+function He(r) {
+  return [208, 207, 17, 224, 161, 177, 26, 225].every((t, o) => r[o] === t);
+}
+async function Ve(r, e) {
+  const t = Math.min(r.size, 66e3), o = new DataView(await r.slice(r.size - t).arrayBuffer());
+  let n = -1;
+  for (let h = o.byteLength - 22; h >= 0; h--)
+    if (o.getUint32(h, !0) === 101010256) {
+      n = h;
+      break;
+    }
+  if (n < 0) return null;
+  const u = o.getUint32(n + 12, !0), i = o.getUint32(n + 16, !0);
+  if (!u || i === 4294967295) return null;
+  const a = new DataView(await r.slice(i, i + u).arrayBuffer()), m = new TextDecoder();
+  let b = 0;
+  for (; b + 46 <= a.byteLength && a.getUint32(b, !0) === 33639248; ) {
+    const h = a.getUint16(b + 10, !0), Q = a.getUint32(b + 20, !0), y = a.getUint16(b + 28, !0), ie = a.getUint16(b + 30, !0), Se = a.getUint16(b + 32, !0), ae = a.getUint32(b + 42, !0);
+    if (m.decode(new Uint8Array(a.buffer, a.byteOffset + b + 46, y)) === e) {
+      const ce = new DataView(await r.slice(ae, ae + 30).arrayBuffer()), pe = ae + 30 + ce.getUint16(26, !0) + ce.getUint16(28, !0), fe = await re(r.slice(pe, pe + Q));
+      return h === 0 ? fe : h === 8 && typeof DecompressionStream < "u" ? await $e(fe, "deflate-raw") : null;
+    }
+    b += 46 + y + ie + Se;
+  }
+  return null;
+}
+async function re(r) {
+  return new Uint8Array(await r.arrayBuffer());
+}
+async function $e(r, e) {
+  const t = new Blob([r]).stream().pipeThrough(new DecompressionStream(e));
+  return new Uint8Array(await new Response(t).arrayBuffer());
+}
+function oe(r) {
+  let e = "";
+  for (let o = 0; o < r.length; o += 32768)
+    e += String.fromCharCode(...r.subarray(o, o + 32768));
+  return e;
+}
+var Ue = Object.defineProperty, Je = Object.getOwnPropertyDescriptor, Xe = (r, e, t) => e in r ? Ue(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, p = (r, e, t, o) => {
+  for (var n = o > 1 ? void 0 : o ? Je(e, t) : e, u = r.length - 1, i; u >= 0; u--)
+    (i = r[u]) && (n = (o ? i(e, t, n) : i(n)) || n);
+  return o && n && Ue(e, t, n), n;
+}, Ze = (r, e, t) => Xe(r, e + "", t);
+const de = {
+  fromAttribute: (r) => {
+    if (!r) return {};
+    try {
+      const e = JSON.parse(r);
+      return e && typeof e == "object" ? e : {};
+    } catch {
+      return console.warn("[singlebase-uploader] an attribute holds invalid JSON; ignoring it"), {};
+    }
+  },
+  toAttribute: (r) => JSON.stringify(r ?? {})
+}, le = {
+  fromAttribute: (r) => r === null ? !0 : r !== "false",
+  toAttribute: (r) => r ? null : "false"
+}, ve = [
+  "view",
+  "dropzone",
+  "allowRename",
+  "autoUpload",
+  "branding",
+  "logoUrl",
+  "logoText",
+  "heading",
+  "description",
+  "maxFiles",
+  "maxSize",
+  "minSize",
+  "accept",
+  "rules",
+  "bucket",
+  "publicRead",
+  "redirectUrl",
+  "metadata",
+  "options",
+  "messages",
+  "theme",
+  "density",
+  "onComplete",
+  "onError"
+];
+var k, z, $, U, S, C, M, L, T, F, O, D, j, A, E, N, B, P, R, I, G, _, K, W, Y, q, H, V, J, X, ye;
+let s = (ye = class extends Ce {
+  constructor() {
+    super(...arguments);
+    l(this, k, null);
+    l(this, z, {});
+    l(this, $);
+    l(this, U);
+    l(this, S, "full");
+    l(this, C, !0);
+    l(this, M, !0);
+    l(this, L, !1);
+    l(this, T, !0);
+    l(this, F, "");
+    l(this, O, "");
+    l(this, D, "");
+    l(this, j, "");
+    l(this, A, 10);
+    l(this, E, "25MB");
+    l(this, N, 0);
+    l(this, B, "");
+    l(this, P, {});
+    l(this, R, "default");
+    l(this, I, {});
+    l(this, G, {});
+    l(this, _, !1);
+    l(this, K, "");
+    l(this, W, null);
+    l(this, Y, null);
+    l(this, q, []);
+    l(this, H, "");
+    l(this, V, !1);
+    l(this, J, !1);
+    l(this, X, "");
+  }
+  get client() {
+    return d(this, k);
+  }
+  set client(e) {
+    c(this, k, e);
+  }
+  get messages() {
+    return d(this, z);
+  }
+  set messages(e) {
+    c(this, z, e);
+  }
+  get theme() {
+    return d(this, $);
+  }
+  set theme(e) {
+    c(this, $, e);
+  }
+  get density() {
+    return d(this, U);
+  }
+  set density(e) {
+    c(this, U, e);
+  }
+  get view() {
+    return d(this, S);
+  }
+  set view(e) {
+    c(this, S, e);
+  }
+  get dropzone() {
+    return d(this, C);
+  }
+  set dropzone(e) {
+    c(this, C, e);
+  }
+  get allowRename() {
+    return d(this, M);
+  }
+  set allowRename(e) {
+    c(this, M, e);
+  }
+  get autoUpload() {
+    return d(this, L);
+  }
+  set autoUpload(e) {
+    c(this, L, e);
+  }
+  get branding() {
+    return d(this, T);
+  }
+  set branding(e) {
+    c(this, T, e);
+  }
+  get logoUrl() {
+    return d(this, F);
+  }
+  set logoUrl(e) {
+    c(this, F, e);
+  }
+  get logoText() {
+    return d(this, O);
+  }
+  set logoText(e) {
+    c(this, O, e);
+  }
+  get heading() {
+    return d(this, D);
+  }
+  set heading(e) {
+    c(this, D, e);
+  }
+  get description() {
+    return d(this, j);
+  }
+  set description(e) {
+    c(this, j, e);
+  }
+  get maxFiles() {
+    return d(this, A);
+  }
+  set maxFiles(e) {
+    c(this, A, e);
+  }
+  get maxSize() {
+    return d(this, E);
+  }
+  set maxSize(e) {
+    c(this, E, e);
+  }
+  get minSize() {
+    return d(this, N);
+  }
+  set minSize(e) {
+    c(this, N, e);
+  }
+  get accept() {
+    return d(this, B);
+  }
+  set accept(e) {
+    c(this, B, e);
+  }
+  get rules() {
+    return d(this, P);
+  }
+  set rules(e) {
+    c(this, P, e);
+  }
+  get bucket() {
+    return d(this, R);
+  }
+  set bucket(e) {
+    c(this, R, e);
+  }
+  get metadata() {
+    return d(this, I);
+  }
+  set metadata(e) {
+    c(this, I, e);
+  }
+  get options() {
+    return d(this, G);
+  }
+  set options(e) {
+    c(this, G, e);
+  }
+  get publicRead() {
+    return d(this, _);
+  }
+  set publicRead(e) {
+    c(this, _, e);
+  }
+  get redirectUrl() {
+    return d(this, K);
+  }
+  set redirectUrl(e) {
+    c(this, K, e);
+  }
+  get onComplete() {
+    return d(this, W);
+  }
+  set onComplete(e) {
+    c(this, W, e);
+  }
+  get onError() {
+    return d(this, Y);
+  }
+  set onError(e) {
+    c(this, Y, e);
+  }
+  get items() {
+    return d(this, q);
+  }
+  set items(e) {
+    c(this, q, e);
+  }
+  get notice() {
+    return d(this, H);
+  }
+  set notice(e) {
+    c(this, H, e);
+  }
+  get busy() {
+    return d(this, V);
+  }
+  set busy(e) {
+    c(this, V, e);
+  }
+  get dragging() {
+    return d(this, J);
+  }
+  set dragging(e) {
+    c(this, J, e);
+  }
+  get editing() {
+    return d(this, X);
+  }
+  set editing(e) {
+    c(this, X, e);
+  }
+  get msg() {
+    return De(this.messages);
+  }
+  /** An explicit `.client`, else the page default. */
+  get resolvedClient() {
+    return this.client ?? Le() ?? null;
+  }
+  /** The staging list, for host code that wants to inspect or persist it. */
+  get files() {
+    return this.items;
+  }
+  /** Overall progress across the current batch, 0–100. */
+  get percent() {
+    const e = this.items.filter((t) => t.status !== "ready");
+    return e.length ? Math.round(e.reduce((t, o) => t + o.percent, 0) / e.length) : 0;
+  }
+  // ── public API ────────────────────────────────────────────
+  /** Opens the file picker. */
+  open() {
+    var e;
+    (e = this.renderRoot.querySelector("input[type=file]")) == null || e.click();
+  }
+  /**
+   * Applies several settings at once:
+   *
+   *     document.getElementById("docs").config = { maxFiles: 5, metadata: { folder: "q3" } };
+   *
+   * Unknown keys are ignored. Reading it returns the current settings.
+   */
+  set config(e) {
+    const t = this;
+    for (const o of ve)
+      e && o in e && (t[o] = e[o]);
+  }
+  get config() {
+    const e = this;
+    return Object.fromEntries(ve.map((t) => [t, e[t]]));
+  }
+  /** Drops every staged file and any notice. */
+  clear() {
+    this.items.forEach(w), this.items = [], this.notice = "";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.items.forEach(w);
+  }
+  /** Uploads everything staged. Rows that already succeeded are left alone. */
+  async upload() {
+    var u;
+    if (this.busy) return;
+    const e = this.items.filter((i) => i.status === "ready" || i.status === "error");
+    if (!e.length) return;
+    const t = this.resolvedClient;
+    if (!t) {
+      this.fail(this.msg.errNoClient);
+      return;
+    }
+    this.busy = !0, this.notice = "";
+    for (const i of e)
+      i.status = "uploading", i.percent = 0, i.error = "";
+    this.items = [...this.items];
+    const o = /* @__PURE__ */ new Map(), n = e.map((i) => {
+      const a = { file: i.file, filename: i.file.name };
+      return this.bucket && (a.bucket = this.bucket), this.publicRead && (a.publicRead = !0), i.name !== i.file.name && (a.newName = i.name), Object.keys(this.metadata ?? {}).length && (a.metadata = { ...this.metadata }), Object.keys(this.options ?? {}).length && (a.options = { ...this.options }), o.set(a, i), a;
+    });
+    try {
+      const i = await t.files.upload(n, {
+        onProgress: (b) => {
+          const h = o.get(b.input);
+          h && (h.percent = b.percent, this.items = [...this.items], this.emit("singlebase-upload-progress", { file: h, percent: this.percent }));
+        }
+      });
+      for (const b of i.completed) {
+        const h = o.get(b.input);
+        h && (h.status = "done", h.percent = 100, h.record = b.file);
+      }
+      for (const b of i.failed) {
+        const h = o.get(b.input);
+        h && (h.status = "error", h.error = b.error.message || b.error.code);
+      }
+      this.items = [...this.items];
+      const a = i.completed.map((b) => o.get(b.input)).filter(Boolean), m = i.failed.map((b) => o.get(b.input)).filter(Boolean);
+      this.emit("singlebase-upload-complete", { completed: a, failed: m }), (u = this.onComplete) == null || u.call(this, { completed: a, failed: m }), m.length ? this.notice = this.msg.errUpload : this.redirect();
+    } catch (i) {
+      for (const a of e)
+        a.status = "error", a.error = "";
+      this.items = [...this.items], this.fail(et(i) || this.msg.errUpload);
+    } finally {
+      this.busy = !1;
+    }
+  }
+  // ── staging ───────────────────────────────────────────────
+  /** The rule for this filename's extension, if the host set one. */
+  ruleFor(e) {
+    const t = te(e);
+    if (!t) return null;
+    for (const [o, n] of Object.entries(this.rules ?? {}))
+      if (o.toLowerCase().replace(/^\./, "") === t) return n;
+    return null;
+  }
+  async add(e) {
+    if (this.view === "button") {
+      const a = this.items.filter((m) => m.status === "done" || m.status === "error");
+      a.forEach(w), this.items = this.items.filter((m) => !a.includes(m));
+    }
+    const t = this.maxFiles > 0 ? this.maxFiles : Number.POSITIVE_INFINITY, o = [...this.items], n = o.length, u = [];
+    let i = "";
+    for (const a of Array.from(e)) {
+      if (o.length >= t) {
+        i = v(this.msg.errTooMany, { max: t });
+        break;
+      }
+      if (this.accept && !Ee(this.accept, a.name, a.type)) {
+        i = v(this.msg.errType, { name: a.name });
+        continue;
+      }
+      const m = this.ruleFor(a.name), b = ne((m == null ? void 0 : m.maxSize) ?? this.maxSize), h = ne((m == null ? void 0 : m.minSize) ?? this.minSize);
+      if (b && a.size > b) {
+        i = v(this.msg.errTooLarge, { name: a.name, size: ee(b) });
+        continue;
+      }
+      if (h && a.size < h) {
+        i = v(this.msg.errTooSmall, { name: a.name, size: ee(h) });
+        continue;
+      }
+      const Q = Be(a);
+      if (o.some((ie) => ie.key === Q)) {
+        i = v(this.msg.errDuplicate, { name: a.name });
+        continue;
+      }
+      const y = {
+        key: Q,
+        file: a,
+        name: a.name,
+        // Reading bytes takes a moment, so the row appears immediately as
+        // "checking" rather than the widget freezing on a picked file.
+        status: this.needsInspection(m, a.name) ? "checking" : "ready",
+        percent: 0,
+        error: "",
+        record: null,
+        pages: null,
+        encrypted: null,
+        preview: Qe(a)
+      };
+      o.push(y), u.push(y);
+    }
+    this.notice = i, i && this.emit("singlebase-upload-rejected", { message: i }), o.length !== n && (this.items = o, this.emit("singlebase-upload-selected", { files: this.items }), await Promise.all(
+      u.filter((a) => a.status === "checking").map((a) => this.inspect(a, this.ruleFor(a.file.name)))
+    ), (this.autoUpload || this.view === "button") && this.upload());
+  }
+  needsInspection(e, t) {
+    return !e || !Ke(te(t)) ? !1 : e.maxPages !== void 0 || e.allowProtected === !1;
+  }
+  /**
+   * Reads the file and applies the rule. A fact the reader could not
+   * determine is not grounds for rejection — an unreadable page count means
+   * the page rule simply doesn't apply to that file.
+   */
+  async inspect(e, t) {
+    const o = await _e(e.file, te(e.file.name));
+    e.pages = o.pages, e.encrypted = o.encrypted;
+    let n = "";
+    t.allowProtected === !1 && o.encrypted === !0 ? n = v(this.msg.errProtected, { name: e.name }) : t.maxPages && o.pages !== null && o.pages > t.maxPages && (n = v(this.msg.errTooManyPages, {
+      name: e.name,
+      pages: o.pages,
+      max: t.maxPages
+    })), n ? (w(e), this.items = this.items.filter((u) => u !== e), this.notice = n, this.emit("singlebase-upload-rejected", { message: n })) : (e.status = "ready", this.items = [...this.items]);
+  }
+  /** Drops one staged file. Named for the row action, not Element.remove(). */
+  removeItem(e) {
+    this.items.filter((t) => t.key === e).forEach(w), this.items = this.items.filter((t) => t.key !== e), this.notice = "";
+  }
+  commitRename(e, t) {
+    e.name = Pe(e.file.name, t), this.editing = "", this.items = [...this.items];
+  }
+  fail(e) {
+    var t;
+    this.notice = e, this.emit("singlebase-upload-error", { message: e }), (t = this.onError) == null || t.call(this, { message: e });
+  }
+  emit(e, t) {
+    this.dispatchEvent(new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 }));
+  }
+  redirect() {
+    if (!this.redirectUrl || typeof location > "u") return;
+    const e = Oe(
+      this.redirectUrl,
+      location.href,
+      (t) => console.warn(`[singlebase-uploader] ${t}`)
+    );
+    e && location.assign(e);
+  }
+  // ── events ────────────────────────────────────────────────
+  onPick(e) {
+    var o;
+    const t = e.target;
+    (o = t.files) != null && o.length && this.add(t.files), t.value = "";
+  }
+  onDrop(e) {
+    var o;
+    e.preventDefault(), this.dragging = !1;
+    const t = (o = e.dataTransfer) == null ? void 0 : o.files;
+    t != null && t.length && this.add(t);
+  }
+  onDragOver(e) {
+    e.preventDefault(), this.dragging = !0;
+  }
+  onDragLeave() {
+    this.dragging = !1;
+  }
+  // ── rendering ─────────────────────────────────────────────
+  get canAddMore() {
+    return this.maxFiles <= 0 || this.items.length < this.maxFiles;
+  }
+  /** True while any staged file is still being read. */
+  get checking() {
+    return this.items.some((e) => e.status === "checking");
+  }
+  get pendingCount() {
+    return this.items.filter((e) => e.status === "ready" || e.status === "error").length;
+  }
+  get hint() {
+    const e = Ne(this.accept), t = ne(this.maxSize), o = t ? v(this.msg.hintUpTo, { size: ee(t) }) : "";
+    return [e, o].filter(Boolean).join(" · ");
+  }
+  renderInput() {
+    return f`<input
+      class="sr-only"
+      type="file"
+      ?multiple=${this.maxFiles !== 1}
+      accept=${this.accept || x}
+      @change=${this.onPick}
+    />`;
+  }
+  renderLogo() {
+    return this.logoUrl ? f`<img
+        class="logo-img"
+        src=${this.logoUrl}
+        alt=${this.logoText || "Logo"}
+        part="logo"
+      />` : this.logoText ? f`<div class="brand-mark" part="logo">${this.logoText}</div>` : x;
+  }
+  renderBranding() {
+    return this.branding ? f`<div class="branding" part="branding">
+      <a href="https://singlebase.cloud" target="_blank" rel="noopener noreferrer"
+        >${this.msg.brandingLabel}</a
+      >
+    </div>` : x;
+  }
+  renderNotice() {
+    return this.notice ? f`<div class="banner" role="alert" part="error">${this.notice}</div>` : x;
+  }
+  renderCount() {
+    if (!this.items.length) return x;
+    const e = this.items.length === 1 ? this.msg.countOne : this.msg.countMany;
+    return f`<div class="count" part="count">
+      ${v(e, { n: this.items.length, max: this.maxFiles })}
+    </div>`;
+  }
+  renderStatus(e) {
+    const t = ee(e.file.size);
+    if (e.status === "checking") return `${t} · ${this.msg.checking}`;
+    if (e.status === "uploading") return `${t} · ${this.msg.uploading}`;
+    if (e.status === "done") return `${t} · ${this.msg.uploaded}`;
+    if (e.status === "error")
+      return `${t} · ${e.error || this.msg.failedLabel}`;
+    const o = e.pages ? ` · ${v(this.msg.pagesLabel, { n: e.pages })}` : "";
+    return t + o;
+  }
+  renderRow(e) {
+    const t = this.allowRename && e.status === "ready";
+    return e.status === "uploading" || e.status, f`<div class="row" part="file">
+      <div class="chip" part="file-type">
+        ${e.preview ? f`<img class="thumb" src=${e.preview} alt="" part="preview" />` : Ae(e.name) || "FILE"}
+      </div>
+      <div class="meta">
+        ${this.editing === e.key ? f`<input
+                class="name-input"
+                .value=${e.name}
+                autofocus
+                @keydown=${(o) => {
+      o.key === "Enter" ? this.commitRename(e, o.target.value) : o.key === "Escape" && (this.editing = "");
+    }}
+                @blur=${(o) => this.commitRename(e, o.target.value)}
+              />` : t ? f`<button
+                  class="name"
+                  title=${this.msg.rename}
+                  @click=${() => {
+      this.editing = e.key;
+    }}
+                >
+                  ${e.name}
+                </button>` : f`<div class="name">${e.name}</div>`}
+        <div class="sz" data-state=${e.status}>${this.renderStatus(e)}</div>
+        ${e.status === "uploading" ? f`<div class="bar" part="progress">
+                <div class="bar-fill" style="width:${e.percent}%"></div>
+              </div>` : x}
+      </div>
+      <div class="row-act">
+        ${e.status === "error" ? f`<button class="link-sm" @click=${() => void this.upload()}>
+                ${this.msg.retry}
+              </button>` : x}
+        ${e.status === "uploading" || e.status === "done" ? x : f`<button class="link-sm" @click=${() => this.removeItem(e.key)}>
+                ${this.msg.remove}
+              </button>`}
+      </div>
+    </div>`;
+  }
+  renderRows() {
+    return this.items.length ? f`<div class="rows" part="files">
+      ${this.items.map((e) => this.renderRow(e))}
+    </div>` : x;
+  }
+  renderDropzone() {
+    return f`<div class="drop" part="dropzone" data-drag=${String(this.dragging)}>
+      <div class="arrow" aria-hidden="true">↑</div>
+      <div class="drop-title">${this.msg.dropTitle}</div>
+      <button class="link" @click=${this.open}>${this.msg.dropSub}</button>
+      ${this.hint ? f`<div class="hint">${this.hint}</div>` : x}
+    </div>`;
+  }
+  renderUploadCta() {
+    const e = this.pendingCount;
+    if (this.autoUpload || !e && !this.busy) return x;
+    const t = e === 1 ? this.msg.uploadCtaOne : this.msg.uploadCtaMany;
+    return f`<button
+      class="primary wide"
+      part="submit"
+      ?disabled=${this.busy || this.checking}
+      @click=${() => void this.upload()}
+    >
+      ${this.busy ? this.msg.uploading : v(t, { n: e })}
+    </button>`;
+  }
+  /**
+   * The whole card is the drop surface. Once files are staged the big zone is
+   * replaced by the "add more" control, and a drop should still land.
+   */
+  renderFull() {
+    const e = this.dropzone && !this.items.length && this.canAddMore;
+    return f`<div
+      class="card"
+      part="card"
+      @dragover=${this.onDragOver}
+      @dragleave=${this.onDragLeave}
+      @drop=${this.onDrop}
+    >
+      ${this.logoUrl || this.logoText || this.heading || this.description ? f`<div class="head-block">
+              ${this.renderLogo()}
+              ${this.heading ? f`<div class="title">${this.heading}</div>` : x}
+              ${this.description ? f`<div class="sub">${this.description}</div>` : x}
+            </div>` : x}
+      ${this.renderCount()} ${this.renderNotice()} ${this.renderRows()}
+      ${e ? this.renderDropzone() : x}
+      ${!e && this.canAddMore ? f`<button class="add-more" @click=${this.open}>${this.msg.addMore}</button>` : x}
+      ${this.renderUploadCta()} ${this.renderBranding()}
+    </div>`;
+  }
+  renderCompact() {
+    return f`<div
+      class="card"
+      part="card"
+      @dragover=${this.onDragOver}
+      @dragleave=${this.onDragLeave}
+      @drop=${this.onDrop}
+    >
+      <div class="between">
+        <span class="sec-title">${this.heading || this.msg.attachments}</span>
+        <span class="count">${this.items.length} / ${this.maxFiles}</span>
+      </div>
+      ${this.dropzone ? f`<div class="strip" part="dropzone" data-drag=${String(this.dragging)}>
+              <span class="strip-label">${this.msg.dropOrChoose}</span>
+              <button class="secondary" ?disabled=${!this.canAddMore} @click=${this.open}>
+                ${this.msg.chooseFiles}
+              </button>
+            </div>` : f`<button class="secondary" ?disabled=${!this.canAddMore} @click=${this.open}>
+              ${this.msg.chooseFiles}
+            </button>`}
+      ${this.hint ? f`<div class="hint">${this.hint}</div>` : x} ${this.renderNotice()}
+      ${this.renderRows()} ${this.renderUploadCta()} ${this.renderBranding()}
+    </div>`;
+  }
+  renderButton() {
+    const e = this.items[this.items.length - 1];
+    return f`<div class="button-view">
+      <button class="primary" ?disabled=${this.busy || !this.canAddMore} @click=${this.open}>
+        ${this.busy ? this.msg.uploading : this.msg.chooseFile}
+      </button>
+      ${e && e.status !== "ready" ? f`<div class="sz" data-state=${e.status}>${this.renderStatus(e)}</div>` : x}
+      ${this.renderNotice()}
+    </div>`;
+  }
+  render() {
+    return f`${this.renderInput()}${this.view === "button" ? this.renderButton() : this.view === "compact" ? this.renderCompact() : this.renderFull()}`;
+  }
+}, k = new WeakMap(), z = new WeakMap(), $ = new WeakMap(), U = new WeakMap(), S = new WeakMap(), C = new WeakMap(), M = new WeakMap(), L = new WeakMap(), T = new WeakMap(), F = new WeakMap(), O = new WeakMap(), D = new WeakMap(), j = new WeakMap(), A = new WeakMap(), E = new WeakMap(), N = new WeakMap(), B = new WeakMap(), P = new WeakMap(), R = new WeakMap(), I = new WeakMap(), G = new WeakMap(), _ = new WeakMap(), K = new WeakMap(), W = new WeakMap(), Y = new WeakMap(), q = new WeakMap(), H = new WeakMap(), V = new WeakMap(), J = new WeakMap(), X = new WeakMap(), ye);
+Ze(s, "styles", [
+  Te,
+  Fe,
+  se`
+      .card {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        box-sizing: border-box;
+        padding: var(--sb-pad, 20px);
+        background: var(--sb-surface, #ffffff);
+        color: var(--sb-ink, #16181a);
+        border: 1px solid var(--sb-border, #e4e6e9);
+        border-radius: calc(var(--sb-radius, 4px) + 4px);
+      }
+
+      .logo-img {
+        display: block;
+        align-self: flex-start;
+        height: var(--sb-logo-height, 20px);
+        width: auto;
+        max-width: 100%;
+      }
+
+      .brand-mark {
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 13px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--sb-ink, #16181a);
+      }
+
+      .head-block {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .count {
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 11.5px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--sb-muted-ink, #61666c);
+      }
+
+      /* ── dropzone ─────────────────────────────────────── */
+      .drop {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+        padding: 30px 20px;
+        text-align: center;
+        border: 1px dashed var(--sb-border-strong, #cdd1d6);
+        border-radius: calc(var(--sb-radius, 4px) + 2px);
+        background: var(--sb-surface, #ffffff);
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .drop[data-drag="true"] {
+        border-color: var(--sb-accent, #111111);
+        background: var(--sb-surface-alt, #fafafa);
+      }
+
+      .arrow {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 42px;
+        height: 42px;
+        margin-bottom: 4px;
+        font-size: 18px;
+        line-height: 1;
+        border: 1px solid var(--sb-border, #e4e6e9);
+        border-radius: 50%;
+        color: var(--sb-ink, #16181a);
+      }
+
+      .drop-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--sb-ink, #16181a);
+      }
+
+      /* the compact single-line dropzone */
+      .strip {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 10px 12px;
+        border: 1px solid var(--sb-border, #e4e6e9);
+        border-radius: calc(var(--sb-radius, 4px) + 2px);
+        background: var(--sb-surface-alt, #fafafa);
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .strip[data-drag="true"] {
+        border-color: var(--sb-accent, #111111);
+      }
+
+      .strip-label {
+        font-size: 14px;
+        color: var(--sb-muted-ink, #61666c);
+      }
+
+      /* ── file rows ────────────────────────────────────── */
+      .rows {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 0;
+        border-top: 1px solid var(--sb-border, #e4e6e9);
+      }
+
+      .rows .row:first-child {
+        border-top: none;
+      }
+
+      .chip {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        width: 46px;
+        height: 46px;
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 10.5px;
+        letter-spacing: 0.04em;
+        color: var(--sb-muted-ink, #61666c);
+        background: var(--sb-surface-alt, #fafafa);
+        border: 1px solid var(--sb-border, #e4e6e9);
+        border-radius: var(--sb-radius, 4px);
+        overflow: hidden;
+      }
+
+      .thumb {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .meta {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .name {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--sb-ink, #16181a);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      button.name {
+        align-self: flex-start;
+        max-width: 100%;
+        padding: 0;
+        border: none;
+        background: none;
+        text-align: left;
+        border-radius: 0;
+      }
+
+      button.name:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      .name-input {
+        font-size: 14px;
+        padding: 6px 8px;
+      }
+
+      .sz {
+        font-size: 12px;
+        color: var(--sb-muted-ink, #61666c);
+      }
+
+      .sz[data-state="error"] {
+        color: var(--sb-danger, #b4231a);
+      }
+
+      .sz[data-state="done"] {
+        color: var(--sb-ok, #0f6b4a);
+      }
+
+      .bar {
+        height: 3px;
+        margin-top: 2px;
+        border-radius: 999px;
+        background: var(--sb-border, #e4e6e9);
+        overflow: hidden;
+      }
+
+      .bar-fill {
+        height: 100%;
+        background: var(--sb-accent, #111111);
+        transition: width 0.2s linear;
+      }
+
+      .row-act {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      /* ── the dashed "add more" affordance ─────────────── */
+      button.add-more {
+        width: 100%;
+        padding: 14px;
+        color: var(--sb-ink, #16181a);
+        background: none;
+        border: 1px dashed var(--sb-border-strong, #cdd1d6);
+        border-radius: calc(var(--sb-radius, 4px) + 2px);
+      }
+
+      button.add-more:hover:not(:disabled) {
+        background: var(--sb-surface-alt, #fafafa);
+      }
+
+      button.wide {
+        width: 100%;
+        padding: 13px;
+        font-size: 14px;
+      }
+
+      .branding {
+        text-align: center;
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 10.5px;
+        letter-spacing: 0.06em;
+        color: var(--sb-muted-ink, #61666c);
+      }
+
+      .branding a {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .branding a:hover {
+        color: var(--sb-ink, #16181a);
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      /* the button view is just a control, not a card */
+      :host([view="button"]) {
+        display: inline-block;
+      }
+
+      .button-view {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+    `
+]);
+p([
+  g({ attribute: !1 })
+], s.prototype, "client", 1);
+p([
+  g({ attribute: !1 })
+], s.prototype, "messages", 1);
+p([
+  g({ reflect: !0 })
+], s.prototype, "theme", 1);
+p([
+  g({ reflect: !0 })
+], s.prototype, "density", 1);
+p([
+  g({ reflect: !0 })
+], s.prototype, "view", 1);
+p([
+  g({ converter: le })
+], s.prototype, "dropzone", 1);
+p([
+  g({ converter: le, attribute: "allow-rename" })
+], s.prototype, "allowRename", 1);
+p([
+  g({ type: Boolean, attribute: "auto-upload" })
+], s.prototype, "autoUpload", 1);
+p([
+  g({ converter: le })
+], s.prototype, "branding", 1);
+p([
+  g({ attribute: "logo-url" })
+], s.prototype, "logoUrl", 1);
+p([
+  g({ attribute: "logo-text" })
+], s.prototype, "logoText", 1);
+p([
+  g()
+], s.prototype, "heading", 1);
+p([
+  g()
+], s.prototype, "description", 1);
+p([
+  g({ type: Number, attribute: "max-files" })
+], s.prototype, "maxFiles", 1);
+p([
+  g({ attribute: "max-size" })
+], s.prototype, "maxSize", 1);
+p([
+  g({ attribute: "min-size" })
+], s.prototype, "minSize", 1);
+p([
+  g()
+], s.prototype, "accept", 1);
+p([
+  g({ converter: de })
+], s.prototype, "rules", 1);
+p([
+  g()
+], s.prototype, "bucket", 1);
+p([
+  g({ converter: de })
+], s.prototype, "metadata", 1);
+p([
+  g({ converter: de })
+], s.prototype, "options", 1);
+p([
+  g({ type: Boolean, attribute: "public-read" })
+], s.prototype, "publicRead", 1);
+p([
+  g({ attribute: "redirect-url" })
+], s.prototype, "redirectUrl", 1);
+p([
+  g({ attribute: !1 })
+], s.prototype, "onComplete", 1);
+p([
+  g({ attribute: !1 })
+], s.prototype, "onError", 1);
+p([
+  Z()
+], s.prototype, "items", 1);
+p([
+  Z()
+], s.prototype, "notice", 1);
+p([
+  Z()
+], s.prototype, "busy", 1);
+p([
+  Z()
+], s.prototype, "dragging", 1);
+p([
+  Z()
+], s.prototype, "editing", 1);
+s = p([
+  Me("singlebase-uploader")
+], s);
+function Qe(r) {
+  return !r.type.startsWith("image/") || typeof URL.createObjectURL != "function" ? "" : URL.createObjectURL(r);
+}
+function w(r) {
+  r.preview && URL.revokeObjectURL(r.preview);
+}
+function et(r) {
+  return r instanceof Error ? r.message : "";
+}
+export {
+  s as S,
+  he as T,
+  Ke as a,
+  De as b,
+  me as d,
+  _e as i,
+  Oe as r,
+  Fe as s,
+  Te as t
+};
+//# sourceMappingURL=uploader-D-Da1trc.js.map