@objectifthunes/whiteboard 0.1.1 → 0.2.1

package/dist/whiteboard.css

@@ -436,6 +436,752 @@
   to { transform: rotate(360deg); }
 }
 
+/* ── Button ─────────────────────────────────────────── */
+
+.panel-close-btn {
+  align-self: flex-start;
+  color: var(--wb-text-secondary);
+  border-color: var(--wb-border);
+  background: var(--wb-white);
+}
+
+.panel-close-btn:hover:not(:disabled) {
+  background: var(--wb-bg-hover);
+}
+
+.secondary-btn {
+  color: var(--wb-text-secondary);
+  border-color: var(--wb-border);
+  background: var(--wb-white);
+}
+
+.secondary-btn:hover:not(:disabled) {
+  background: var(--wb-bg-hover);
+}
+
+.danger-btn {
+  background: var(--wb-primary);
+}
+
+.danger-btn:hover:not(:disabled) {
+  background: var(--wb-primary-pressed);
+}
+
+.full-width-btn {
+  width: 100%;
+}
+
+.icon-only-btn {
+  min-width: 1.64rem;
+  min-height: 1.64rem;
+  padding: 0.2rem;
+}
+
+/* ── Alert ──────────────────────────────────────────── */
+
+.status-error {
+  border: 1px solid #fecaca;
+  border-radius: var(--wb-radius-sm);
+  padding: 0.42rem 0.54rem;
+  font-size: var(--wb-fs-md);
+  color: #991b1b;
+  background: #fef2f2;
+}
+
+.ui-alert {
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-sm);
+  padding: 0.42rem 0.54rem;
+  font-size: var(--wb-fs-md);
+}
+
+.ui-alert--info {
+  color: #1e3a8a;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.ui-alert--success {
+  color: #166534;
+  background: #ecfdf5;
+  border-color: #bbf7d0;
+}
+
+/* ── Field ──────────────────────────────────────────── */
+
+.field-error {
+  margin: 0;
+  font-size: var(--wb-fs-xs);
+  color: #b91c1c;
+}
+
+/* ── Pill ───────────────────────────────────────────── */
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wb-gap-xs);
+  border-radius: var(--wb-radius-pill);
+  padding: 0.14rem 0.42rem;
+  font-size: var(--wb-fs-2xs);
+  font-weight: 600;
+  color: var(--wb-text-secondary);
+  background: var(--wb-bg-hover);
+}
+
+.pill.success {
+  color: #1d4ed8;
+  background: #eff6ff;
+}
+
+.pill.warning {
+  color: var(--wb-text-tertiary);
+  background: var(--wb-surface-muted);
+}
+
+.pill.danger {
+  color: #991b1b;
+  background: #fef2f2;
+}
+
+/* ── Chip ───────────────────────────────────────────── */
+
+.chip {
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-pill);
+  padding: 0.12rem 0.42rem;
+  font-size: var(--wb-fs-2xs);
+  color: var(--wb-text-tertiary);
+  background: var(--wb-white);
+}
+
+button.chip {
+  cursor: pointer;
+  transition: background-color var(--wb-transition-fast), border-color var(--wb-transition-fast);
+}
+
+button.chip:hover {
+  background: var(--wb-bg-hover);
+}
+
+.chip--active {
+  border-color: #94a3b8;
+  background: var(--wb-surface-muted);
+  color: #1e293b;
+  font-weight: 600;
+}
+
+/* ── GeneratingOverlay ──────────────────────────────── */
+
+.generating-overlay-wrap {
+  position: relative;
+  width: 100%;
+  flex: 1 1 auto;
+}
+
+.generating-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  pointer-events: all;
+  border-radius: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+  backdrop-filter: blur(4px);
+  background: color-mix(in srgb, var(--wb-surface-soft) 75%, transparent);
+  font-size: var(--wb-fs-xs);
+  color: var(--wb-text-muted);
+}
+
+/* ── Layout utilities ───────────────────────────────── */
+
+.page-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 2rem 1rem;
+}
+
+.page-card {
+  width: 100%;
+  max-width: 380px;
+  display: grid;
+  gap: 1.5rem;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-lg);
+  padding: 2rem;
+  background: var(--wb-surface);
+  box-shadow: var(--wb-shadow-soft);
+}
+
+.panel-stack {
+  display: grid;
+  gap: 0.56rem;
+}
+
+.panel-stack-sm {
+  display: grid;
+  gap: 0.38rem;
+}
+
+.panel-scroll {
+  display: block;
+}
+
+.inline-row {
+  display: flex;
+  align-items: center;
+  gap: 0.36rem;
+  flex-wrap: wrap;
+}
+
+.space-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.list-reset {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--wb-gap-md);
+}
+
+.tag-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.24rem;
+}
+
+.button-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wb-gap-sm);
+}
+
+.button-row > button {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.status-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: var(--wb-fs-sm);
+  color: var(--wb-text-muted);
+}
+
+/* ── ChoiceCard / ChoiceGroup ───────────────────────── */
+
+.choice-list {
+  display: grid;
+  gap: 0.36rem;
+}
+
+.choice-card {
+  display: grid;
+  align-items: start;
+  justify-items: start;
+  gap: 0.18rem;
+  width: 100%;
+  border-radius: var(--wb-radius-md);
+  border: 1px solid var(--wb-border);
+  padding: 0.42rem 0.5rem;
+  text-align: left;
+  white-space: normal;
+  line-height: 1.35;
+  color: var(--wb-text-secondary);
+  background: var(--wb-white);
+}
+
+.choice-card:hover:not(:disabled) {
+  background: var(--wb-surface-hover);
+}
+
+.choice-card[data-active='true'] {
+  border-color: var(--wb-border-active);
+  background: var(--wb-surface-active);
+}
+
+.choice-card[data-has-description='false'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.choice-card__row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.42rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.choice-card__label,
+.choice-card__description {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.choice-card__label {
+  flex: 0 0 auto;
+  font-size: var(--wb-fs-md);
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.choice-card__description {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--wb-fs-sm);
+  color: var(--wb-text-muted);
+}
+
+/* ── ItemList / ItemCard ────────────────────────────── */
+
+.item-list {
+  display: grid;
+  gap: var(--wb-gap-lg);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item-card {
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-md);
+  padding: 0.75rem;
+  background: var(--wb-surface-soft);
+}
+
+/* ── SplitLayout ────────────────────────────────────── */
+
+.split-layout {
+  display: grid;
+  gap: 0.46rem;
+  align-items: start;
+}
+
+.split-layout--element {
+  grid-template-columns: 84px minmax(0, 1fr);
+}
+
+.split-layout--character {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.split-layout--user {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--wb-gap-lg);
+}
+
+/* ── CoordGrid ──────────────────────────────────────── */
+
+.coord-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.24rem;
+}
+
+.coord-input {
+  display: grid;
+  gap: 0.14rem;
+  font-size: var(--wb-fs-2xs);
+  color: var(--wb-text-muted);
+}
+
+.coord-input input {
+  min-width: 0;
+}
+
+/* ── PanelSection ───────────────────────────────────── */
+
+.widget-section {
+  display: grid;
+  gap: var(--wb-gap-lg);
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-md);
+  padding: 0.5rem;
+  background: var(--wb-surface-soft);
+}
+
+.widget-section__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wb-gap-sm);
+  min-width: 0;
+  font-size: var(--wb-fs-md);
+  font-weight: 600;
+  color: var(--wb-text-primary);
+}
+
+.widget-section__description {
+  font-size: var(--wb-fs-sm);
+  color: var(--wb-text-muted);
+}
+
+/* ── Label ──────────────────────────────────────────── */
+
+.widget-control {
+  display: grid;
+  gap: 0.16rem;
+}
+
+.widget-label {
+  font-size: var(--wb-fs-2xs);
+  color: var(--wb-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ── Typography ─────────────────────────────────────── */
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.text-muted {
+  color: var(--wb-text-muted);
+}
+
+.text-xs {
+  font-size: var(--wb-fs-xs);
+}
+
+.text-sm {
+  font-size: var(--wb-fs-sm);
+}
+
+.asset-title {
+  font-size: var(--wb-fs-sm);
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.asset-title--clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  min-height: 2.1em;
+}
+
+.story-title {
+  font-size: 0.88rem;
+}
+
+.page-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--wb-text-primary);
+  line-height: 1.3;
+}
+
+/* ── ImageThumb ─────────────────────────────────────── */
+
+.image-thumb {
+  position: relative;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-md);
+  background: var(--wb-surface-hover);
+  width: 100%;
+  aspect-ratio: 1 / 1;
+}
+
+.image-thumb--sm {
+  max-width: 84px;
+}
+
+.image-thumb--md {
+  max-width: none;
+}
+
+.image-thumb--fluid {
+  max-width: none;
+}
+
+.image-thumb__img {
+  width: 100%;
+  height: 100%;
+  object-position: center;
+  box-sizing: border-box;
+}
+
+.image-thumb--fit-contain .image-thumb__img {
+  object-fit: contain;
+  padding: 0;
+}
+
+.image-thumb--fit-cover .image-thumb__img {
+  object-fit: cover;
+  padding: 0;
+}
+
+.image-thumb__placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0.2rem;
+  font-size: var(--wb-fs-xs);
+  color: var(--wb-text-muted);
+}
+
+/* ── PickerGrid / PickerCard ────────────────────────── */
+
+.picker-search {
+  display: grid;
+  gap: var(--wb-gap-lg);
+}
+
+.picker-grid {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.picker-grid--elements {
+  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+}
+
+.picker-grid--characters {
+  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
+}
+
+.picker-grid--library {
+  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
+}
+
+.picker-card {
+  width: 100%;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-md);
+  padding: 0.4rem;
+  overflow: hidden;
+  color: var(--wb-text-secondary);
+  text-align: left;
+  background: var(--wb-white);
+}
+
+.picker-card:hover:not(:disabled) {
+  background: var(--wb-surface-hover);
+}
+
+.picker-card--skeleton {
+  cursor: default;
+}
+
+.picker-card-content {
+  min-width: 0;
+  align-content: start;
+}
+
+.picker-card-thumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+}
+
+/* ── Skeleton ───────────────────────────────────────── */
+
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--wb-radius-sm);
+  background: var(--wb-border);
+}
+
+.skeleton--md {
+  border-radius: var(--wb-radius-md);
+}
+
+.skeleton--pill {
+  border-radius: var(--wb-radius-pill);
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
+  animation: skeleton-shimmer 1.2s ease-in-out infinite;
+}
+
+.skeleton-input {
+  width: 100%;
+  height: 32px;
+}
+
+.skeleton-btn {
+  width: 100%;
+  height: 26px;
+}
+
+.skeleton-icon-btn {
+  width: 1.64rem;
+  height: 1.64rem;
+  border-radius: var(--wb-radius-sm);
+}
+
+.skeleton-btn--short {
+  width: 42%;
+}
+
+.skeleton-btn--back {
+  width: 36%;
+}
+
+.skeleton-btn--header-back {
+  width: 100%;
+}
+
+.skeleton-btn--tiny {
+  width: 78px;
+  height: 22px;
+}
+
+.skeleton-btn--story-action {
+  width: 82px;
+  height: 24px;
+  flex: 0 0 auto;
+}
+
+.skeleton-choice {
+  height: 36px;
+}
+
+.skeleton-chip {
+  width: 58px;
+  height: 16px;
+  border-radius: var(--wb-radius-pill);
+}
+
+.skeleton-title {
+  width: 74%;
+  height: 14px;
+}
+
+.skeleton-title--sm {
+  width: 52%;
+}
+
+.skeleton-choice-label {
+  width: 64%;
+  margin-inline: auto;
+}
+
+.skeleton-header-title {
+  width: 86%;
+}
+
+.skeleton-header-title--short {
+  width: 58%;
+}
+
+.skeleton-line {
+  width: 100%;
+  height: 10px;
+}
+
+.skeleton-line--short {
+  width: 62%;
+}
+
+.skeleton-select {
+  width: 124px;
+  height: 32px;
+}
+
+.skeleton-textarea {
+  width: 100%;
+  min-height: 90px;
+}
+
+.skeleton-thumb {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--wb-radius-md);
+}
+
+.skeleton-avatar {
+  width: 1.9rem;
+  height: 1.9rem;
+}
+
+.skeleton-style-preview {
+  width: 100%;
+  max-width: none;
+  aspect-ratio: 1 / 1;
+}
+
+.skeleton-canvas {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+.skeleton-field {
+  height: 32px;
+}
+
+.skeleton-coord {
+  height: 26px;
+}
+
+.skeleton-meta-line {
+  width: 92%;
+}
+
+.skeleton-meta-item {
+  width: 62px;
+  height: 10px;
+}
+
+.skeleton-meta-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--wb-radius-pill);
+}
+
+.skeleton-meta-item--short {
+  width: 38px;
+  height: 10px;
+}
+
+.skeleton-page-tab-line {
+  width: 74%;
+  margin-inline: auto;
+}
+
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 /* ── Responsive ─────────────────────────────────────── */
 
 @media (max-width: 768px) {
@@ -455,4 +1201,9 @@
     right: 0.44rem;
     bottom: 4.9rem;
   }
+
+  .split-layout--element,
+  .split-layout--user {
+    grid-template-columns: 1fr;
+  }
 }