@alwith/module-editor 0.0.0-stage → 0.1.0-rc.13

package/dist/styles.css

@@ -0,0 +1,726 @@
+.alwith-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  min-width: 0;
+  color: var(--foreground);
+  background: var(--background);
+}
+.alwith-editor button {
+  font: inherit;
+  font-size: 12px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px 8px;
+  background: var(--background);
+  color: inherit;
+  cursor: pointer;
+}
+.alwith-editor button:hover {
+  background: var(--muted);
+}
+.alwith-editor button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.alwith-editor-tabs {
+  display: flex;
+  overflow-x: auto;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+}
+.alwith-editor-tab {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  border-bottom: 2px solid transparent;
+  padding: 4px;
+}
+.alwith-editor-tab[data-active="true"] {
+  border-bottom-color: var(--foreground);
+  background: var(--muted);
+}
+.alwith-editor-tab button {
+  border: 0;
+  background: transparent;
+}
+.alwith-editor-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 36px;
+  flex-shrink: 0;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--border);
+}
+.alwith-editor-toolbar-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+  margin-inline-start: auto;
+}
+.alwith-editor-mode-toggle {
+  display: flex;
+  align-items: center;
+}
+.alwith-editor .alwith-editor-mode-toggle button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.alwith-editor .alwith-editor-mode-toggle button:first-child {
+  border-radius: 6px 0 0 6px;
+}
+.alwith-editor .alwith-editor-mode-toggle button:last-child {
+  border-radius: 0 6px 6px 0;
+}
+.alwith-editor .alwith-editor-mode-toggle button:hover,
+.alwith-editor .alwith-editor-mode-toggle button[aria-pressed="true"] {
+  background: var(--muted);
+}
+.alwith-editor-mode-toggle svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 1.5px;
+}
+.alwith-editor-toolbar > span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  color: var(--muted-foreground);
+}
+.alwith-editor-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  position: relative;
+}
+.alwith-editor-text {
+  display: block;
+  box-sizing: border-box;
+  resize: none;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  outline: none;
+  padding: 20px;
+  background: transparent;
+  color: inherit;
+  font:
+    13px/1.7 ui-monospace,
+    monospace;
+  tab-size: 2;
+}
+.alwith-editor-empty {
+  display: grid;
+  place-content: center;
+  flex: 1;
+  height: 100%;
+  padding: 24px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--muted-foreground);
+}
+.alwith-editor-notice {
+  padding: 8px 12px;
+  font-size: 12px;
+  background: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.alwith-editor-image-preview {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+.alwith-editor-image-controls {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  border-bottom: 1px solid var(--border);
+}
+.alwith-editor-image-viewport {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+.alwith-editor-image-canvas {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 100%;
+  min-height: 100%;
+  width: max-content;
+  padding: 20px;
+}
+.alwith-editor-image {
+  display: block;
+  flex-shrink: 0;
+  object-fit: contain;
+}
+.alwith-editor-breadcrumbs {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+.alwith-editor-breadcrumbs button {
+  border: 0;
+  padding: 2px 4px;
+  background: transparent;
+}
+.alwith-editor-breadcrumb-separator {
+  padding: 0 3px;
+}
+.alwith-editor-tab[data-transient="true"] [role="tab"] {
+  font-style: italic;
+}
+.alwith-editor-tab[draggable] {
+  cursor: grab;
+}
+.alwith-editor :focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+
+.alwith-editor-content,
+.alwith-editor-text {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--foreground) 14%, transparent) transparent;
+}
+.alwith-editor-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.alwith-editor-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+.alwith-editor-content::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--foreground) 14%, transparent);
+  border-radius: 999px;
+}
+.alwith-editor-content::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--foreground) 28%, transparent);
+}
+.alwith-editor-text::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.alwith-editor-text::-webkit-scrollbar-track {
+  background: transparent;
+}
+.alwith-editor-text::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--foreground) 14%, transparent);
+  border-radius: 999px;
+}
+.alwith-editor-text::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--foreground) 28%, transparent);
+}
+
+.alwith-editor-tabs {
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+.alwith-editor-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.alwith-editor-menu {
+  min-width: 160px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--popover);
+  color: var(--popover-foreground);
+  font: 12px system-ui;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+.alwith-editor-menu-item {
+  padding: 6px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.alwith-editor-menu-item[data-highlighted] {
+  background: var(--accent);
+}
+.alwith-editor-menu-item[data-disabled] {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* Desktop tab geometry; the host supplies its semantic theme tokens. */
+.alwith-workspace-tabbar {
+  --tab-bar-bg: var(--workspace-tab-bar, color-mix(in srgb, var(--muted) 60%, transparent));
+  --tab-active-bg: var(--workspace-tab-active, var(--background));
+  --tab-rail-bg: var(--tab-active-bg);
+  --tab-active-fg: var(--workspace-tab-foreground, var(--foreground));
+  --tab-inactive-fg: var(--muted-foreground);
+  --tab-divider: var(--border);
+  --tab-accent: var(--workspace-tab-accent, transparent);
+  display: flex;
+  position: relative;
+  align-items: end;
+  flex-shrink: 0;
+  height: 40px;
+  padding-inline: 4px;
+  background: var(--tab-bar-bg);
+}
+.alwith-workspace-tabbar::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: 2px;
+  background: var(--tab-rail-bg);
+  pointer-events: none;
+}
+.alwith-workspace-tabbar[data-empty="true"] {
+  background: transparent;
+}
+.alwith-workspace-tabbar[data-empty="true"]::after {
+  display: none;
+}
+.alwith-workspace-tabbar > :not(.alwith-workspace-tab-scroll) {
+  align-self: center;
+  flex-shrink: 0;
+}
+.alwith-workspace-tab-scroll {
+  display: flex;
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  align-items: end;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+}
+.alwith-workspace-tab-scroll::-webkit-scrollbar {
+  display: none;
+}
+.alwith-workspace-tablist {
+  display: contents;
+}
+.alwith-workspace-tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 32px;
+  min-width: 88px;
+  max-width: 168px;
+  padding-inline: 12px;
+  margin-inline: 2px;
+  margin-bottom: 1px;
+  color: var(--tab-inactive-fg);
+  border-radius: 8px;
+  touch-action: none;
+  user-select: none;
+}
+.alwith-workspace-tab:first-child {
+  margin-inline-start: 0;
+}
+.alwith-workspace-tab[data-active="true"] {
+  z-index: 1;
+  color: var(--tab-active-fg);
+  background: var(--tab-active-bg);
+  border-radius: 6px 6px 0 0;
+  box-shadow: inset 0 2px 0 var(--tab-accent);
+}
+.alwith-workspace-tab[data-active="true"]::before,
+.alwith-workspace-tab[data-active="true"]::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 18px;
+  width: 18px;
+  pointer-events: none;
+}
+.alwith-workspace-tab[data-active="true"]::before {
+  left: -18px;
+  background: radial-gradient(circle at 0% 0%, transparent 18px, var(--tab-rail-bg) 18.5px);
+}
+.alwith-workspace-tab[data-active="true"]::after {
+  right: -18px;
+  background: radial-gradient(circle at 100% 0%, transparent 18px, var(--tab-rail-bg) 18.5px);
+}
+.alwith-workspace-tab[data-divider="true"] {
+  background-image: linear-gradient(var(--tab-divider), var(--tab-divider));
+  background-position: left center;
+  background-size: 1px 16px;
+  background-repeat: no-repeat;
+}
+.alwith-workspace-tab[data-divider="true"]:hover,
+.alwith-workspace-tab:hover + .alwith-workspace-tab {
+  background-image: none;
+}
+.alwith-workspace-tab[data-dragging="true"] {
+  opacity: 0.4;
+}
+.alwith-workspace-tab[data-drop-before="true"] {
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+}
+.alwith-editor .alwith-workspace-tab button {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  font-size: 12px;
+}
+.alwith-workspace-tab-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 4px;
+  flex: 1;
+  height: 100%;
+  font-size: 12px;
+  border-radius: 0;
+}
+.alwith-workspace-tab-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.alwith-workspace-tab[data-transient="true"] .alwith-workspace-tab-title {
+  font-style: italic;
+}
+.alwith-workspace-tab-icon {
+  display: flex;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+.alwith-workspace-tab-icon > * {
+  width: 100%;
+  height: 100%;
+}
+.alwith-editor .alwith-workspace-tab-close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  z-index: 1;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  justify-content: center;
+  margin-inline-start: 4px;
+  border-radius: 4px;
+  opacity: 0;
+}
+.alwith-workspace-tab-close svg {
+  width: 12px;
+  height: 12px;
+}
+.alwith-editor .alwith-workspace-tab[data-active="true"] .alwith-workspace-tab-close,
+.alwith-workspace-tab:hover .alwith-workspace-tab-close,
+.alwith-workspace-tab:focus-within .alwith-workspace-tab-close {
+  opacity: 0.5;
+}
+.alwith-editor .alwith-workspace-tab-close:hover {
+  opacity: 1;
+  background: var(--muted);
+}
+.alwith-workspace-tab[data-dirty="true"] .alwith-workspace-tab-close {
+  opacity: 0.7;
+}
+.alwith-workspace-tab[data-dirty="true"] .alwith-workspace-tab-close::before {
+  content: "";
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.alwith-workspace-tab[data-dirty="true"] .alwith-workspace-tab-close svg {
+  opacity: 0;
+}
+.alwith-workspace-tab[data-dirty="true"]:hover .alwith-workspace-tab-close::before,
+.alwith-workspace-tab[data-dirty="true"]:focus-within .alwith-workspace-tab-close::before {
+  display: none;
+}
+.alwith-workspace-tab[data-dirty="true"]:hover .alwith-workspace-tab-close svg,
+.alwith-workspace-tab[data-dirty="true"]:focus-within .alwith-workspace-tab-close svg {
+  opacity: 1;
+}
+.alwith-editor .alwith-workspace-new-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin-inline-start: 2px;
+  flex-shrink: 0;
+  border: 0;
+  background: transparent;
+  color: var(--muted-foreground);
+}
+.alwith-editor .alwith-workspace-new-tab:hover {
+  background: var(--accent);
+}
+.alwith-workspace-new-tab svg {
+  width: 16px;
+  height: 16px;
+}
+.alwith-workspace-tab-space {
+  height: 100%;
+  min-width: 32px;
+  flex: 1;
+}
+.alwith-editor-menu-separator {
+  height: 1px;
+  margin: 4px -4px;
+  background: var(--border);
+}
+.alwith-workspace-new-content {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 30px 40px;
+}
+.alwith-editor .alwith-workspace-tutorial {
+  display: block;
+  width: 190px;
+  overflow: hidden;
+  padding: 0;
+  text-align: start;
+  background: var(--card);
+  border: 0.5px solid var(--border);
+  border-radius: 14px;
+}
+.alwith-editor .alwith-workspace-tutorial:hover {
+  background: var(--card);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--foreground) 8%, transparent);
+}
+.alwith-workspace-tutorial-hero {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  border-bottom: 0.5px solid var(--border);
+  background: var(--workspace-tutorial-background, var(--accent));
+}
+.alwith-workspace-tutorial-hero img {
+  width: 100px;
+  height: 100px;
+}
+.alwith-workspace-tutorial-copy {
+  display: block;
+  padding: 12px;
+}
+.alwith-workspace-tutorial-copy strong {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+.alwith-workspace-tutorial-copy > span {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--workspace-tutorial-link, var(--primary));
+}
+.alwith-quick-start {
+  padding: 32px;
+}
+.alwith-quick-start h2,
+.alwith-quick-start-tip h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.3;
+}
+.alwith-quick-start p {
+  margin-top: 8px;
+  color: var(--muted-foreground);
+  font-size: 14px;
+  white-space: pre-line;
+}
+.alwith-quick-start button {
+  font: inherit;
+  cursor: pointer;
+}
+.alwith-quick-start-roles {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 24px;
+}
+.alwith-quick-start-roles button {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding-inline: 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  font-size: 14px;
+  background: transparent;
+}
+.alwith-quick-start-roles button[aria-pressed="true"] {
+  border-color: var(--ring);
+  background: color-mix(in srgb, var(--ring) 8%, transparent);
+}
+.alwith-quick-start-makes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 24px;
+}
+.alwith-quick-start-makes button {
+  padding: 8px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  font-size: 14px;
+  background: transparent;
+}
+.alwith-quick-start-makes button[aria-pressed="true"] {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
+.alwith-quick-start-ready {
+  padding-block: 48px;
+  text-align: center;
+}
+.alwith-quick-start-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 32px;
+}
+.alwith-quick-start-footer button {
+  height: 36px;
+  border: 0;
+  padding-inline: 16px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted-foreground);
+}
+.alwith-quick-start-footer button:last-child {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.alwith-quick-start-tip {
+  position: relative;
+  display: flex;
+  height: 580px;
+  max-height: calc(100dvh - 4rem);
+  overflow: hidden;
+  color: var(--workspace-tip-foreground);
+  background: var(--workspace-tip-purple);
+}
+.alwith-quick-start-tip[data-tip="1"] {
+  background: var(--workspace-tip-blue);
+}
+.alwith-quick-start-tip[data-tip="2"] {
+  background: var(--workspace-tip-orange);
+}
+.alwith-quick-start-tip[data-tip="3"] {
+  background: var(--workspace-tip-pink);
+}
+.alwith-quick-start-tip[data-tip="4"] {
+  background: var(--workspace-tip-yellow);
+}
+.alwith-quick-start-tip[data-tip="5"] {
+  background: var(--workspace-tip-green);
+}
+.alwith-quick-start-decoration {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+.alwith-quick-start-tip-copy {
+  pointer-events: none;
+  position: relative;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: end;
+  gap: 10px;
+  padding: 24px 28px 32px;
+}
+.alwith-quick-start-tip-copy > img {
+  width: 88px;
+  height: 88px;
+  margin-bottom: 12px;
+  filter: brightness(0) invert(1);
+}
+.alwith-quick-start-tip-copy > p {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+.alwith-quick-start-progress {
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
+  top: 14px;
+  inset-inline: 16px;
+  display: flex;
+  gap: 4px;
+}
+.alwith-quick-start-progress span {
+  height: 3px;
+  flex: 1;
+  border-radius: 2px;
+  background: currentColor;
+  opacity: 0.3;
+}
+.alwith-quick-start-progress span[data-complete="true"] {
+  opacity: 0.95;
+}
+.alwith-quick-start-previous,
+.alwith-quick-start-next {
+  position: absolute;
+  top: 30px;
+  bottom: 0;
+  width: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+.alwith-quick-start-previous {
+  inset-inline-start: 0;
+}
+.alwith-quick-start-next {
+  inset-inline-end: 0;
+}
+
+.alwith-quick-start-roles button {
+  gap: 12px;
+}
+.alwith-quick-start-roles svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+}