@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/asset-workflow.css

@@ -0,0 +1,506 @@
+.vgai-asset-library-panel {
+  container-type: inline-size;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.vgai-asset-library {
+  --asset-hit-target: 28px;
+  --asset-focus-ring: 0 0 0 2px var(--vgai-accent);
+  --asset-pane-gap: 8px;
+  --asset-warning: var(--vgai-accent);
+  --asset-error: var(--vgai-danger);
+  --asset-progress: var(--vgai-accent);
+  --asset-card-width: 168px;
+  --asset-card-height: 214px;
+  display: grid;
+  grid-template-columns: var(--asset-source-width, 210px) minmax(320px, 1fr) var(
+      --asset-details-width,
+      360px
+    );
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+  color: var(--vgai-text-1);
+  background: var(--vgai-bg-1);
+}
+
+.vgai-asset-library button:focus-visible,
+.vgai-asset-editor button:focus-visible,
+.vgai-asset-browser button:focus-visible,
+.vgai-asset-library input:focus-visible,
+.vgai-asset-editor input:focus-visible {
+  outline: 0;
+  box-shadow: var(--asset-focus-ring);
+}
+
+.vgai-asset-library[data-density="compact"] {
+  --asset-card-width: 136px;
+  --asset-card-height: 178px;
+}
+
+.vgai-asset-library[data-density="large"] {
+  --asset-card-width: 208px;
+  --asset-card-height: 254px;
+}
+
+.vgai-asset-library__sources,
+.vgai-asset-library__details {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--vgai-bg-2);
+}
+
+.vgai-asset-library[data-source-collapsed="true"] .vgai-asset-library__sources,
+.vgai-asset-library[data-details-collapsed="true"] .vgai-asset-library__details {
+  visibility: hidden;
+  border: 0;
+  padding: 0;
+}
+
+.vgai-asset-source-size {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  width: min(180px, calc(var(--asset-source-width) - 16px));
+}
+
+.vgai-asset-pane-size {
+  padding: 6px 10px 0;
+  color: var(--vgai-text-3);
+  font-size: 10px;
+}
+
+.vgai-asset-pane-size label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vgai-asset-library__sources {
+  border-right: 1px solid var(--vgai-border-1);
+  padding: 10px;
+}
+
+.vgai-asset-library__details {
+  border-left: 1px solid var(--vgai-border-1);
+}
+
+.vgai-asset-library__results {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.vgai-asset-library__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-height: 44px;
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--vgai-border-1);
+  background: var(--vgai-bg-2);
+}
+
+.vgai-asset-library__grid {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  outline: none;
+}
+
+.vgai-asset-card {
+  position: absolute;
+  box-sizing: border-box;
+  width: var(--asset-card-width);
+  height: calc(var(--asset-card-height) - 8px);
+  padding: 8px;
+  border: 1px solid transparent;
+  border-radius: var(--vgai-radius-md, 5px);
+  background: transparent;
+  color: var(--vgai-text-1);
+  text-align: left;
+  cursor: pointer;
+}
+
+.vgai-asset-card:hover {
+  background: var(--vgai-accent-muted);
+}
+
+.vgai-asset-card[aria-selected="true"] {
+  border-color: var(--vgai-accent);
+  background: var(--vgai-accent-muted);
+}
+
+.vgai-asset-card:focus-visible {
+  outline: 2px solid var(--vgai-focus, var(--vgai-accent));
+  outline-offset: -2px;
+}
+
+.vgai-asset-card__preview {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--vgai-radius-sm, 3px);
+  background: var(--vgai-bg-0);
+}
+
+.vgai-asset-card__fallback {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  padding: 2px 4px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--vgai-bg-0) 88%, transparent);
+  color: var(--vgai-text-2);
+  font-size: 9px;
+}
+
+.vgai-asset-card__preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.vgai-asset-card__name {
+  margin-top: 7px;
+  min-height: 34px;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: 12px;
+  line-height: 17px;
+  font-weight: 550;
+}
+
+.vgai-asset-card__meta,
+.vgai-asset-card__badges {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  margin-top: 4px;
+  color: var(--vgai-text-3);
+  font-size: 10px;
+}
+
+.vgai-asset-badge {
+  padding: 1px 5px;
+  border-radius: 999px;
+  background: var(--vgai-bg-3);
+  color: var(--vgai-text-2);
+  white-space: nowrap;
+}
+
+.vgai-asset-facet-title {
+  margin: 12px 0 5px;
+  color: var(--vgai-text-3);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.vgai-asset-facet-button {
+  width: 100%;
+  min-height: 28px;
+  padding: 4px 7px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--vgai-text-2);
+  text-align: left;
+  cursor: pointer;
+}
+
+.vgai-asset-facet-button:hover,
+.vgai-asset-facet-button[aria-pressed="true"] {
+  background: var(--vgai-accent-muted);
+  color: var(--vgai-text-1);
+}
+
+.vgai-asset-facet-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  color: var(--vgai-text-2);
+  font-size: 11px;
+}
+
+.vgai-asset-facet-check .vgai-select {
+  min-width: 0;
+  flex: 1;
+}
+
+@container (max-width: 1050px) {
+  .vgai-asset-library {
+    grid-template-columns: minmax(300px, 1fr) minmax(280px, 42%);
+  }
+  .vgai-asset-library__sources {
+    display: none;
+  }
+}
+
+@container (max-width: 720px) {
+  .vgai-asset-library {
+    grid-template-columns: 1fr;
+  }
+  .vgai-asset-library__details {
+    display: none;
+  }
+}
+
+@container (max-width: 480px) {
+  .vgai-asset-library {
+    --asset-card-width: 136px;
+    --asset-card-height: 178px;
+  }
+
+  .vgai-asset-library__toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 5px;
+    min-height: 0;
+    padding: 6px;
+  }
+
+  .vgai-asset-library__toolbar .vgai-input {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .vgai-asset-library__filters-toggle,
+  .vgai-asset-library__sort,
+  .vgai-asset-library__density,
+  .vgai-asset-library__save-search,
+  .vgai-asset-library__details-toggle {
+    display: none;
+  }
+
+  .vgai-asset-library__status {
+    padding-inline: 2px;
+  }
+}
+
+.vgai-asset-tree {
+  width: 150px;
+  min-width: 118px;
+  overflow: auto;
+  padding: 6px;
+  border-right: 1px solid var(--vgai-border-1);
+  background: var(--vgai-bg-2);
+}
+
+.vgai-asset-tree-row {
+  width: 100%;
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vgai-text-2);
+  text-align: left;
+}
+
+.vgai-asset-tree-row:hover,
+.vgai-asset-tree-row:has(.vgai-asset-tree-target[aria-current="page"]) {
+  background: var(--vgai-accent-muted);
+  color: var(--vgai-text-1);
+}
+
+.vgai-asset-tree-toggle,
+.vgai-asset-tree-target {
+  min-height: 24px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.vgai-asset-tree-toggle {
+  width: 20px;
+  padding: 0;
+}
+
+.vgai-asset-tree-target {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0;
+  overflow: hidden;
+  text-align: left;
+}
+
+.vgai-asset-context-menu {
+  position: fixed;
+  z-index: 10000;
+  min-width: 190px;
+  padding: 4px;
+  border: 1px solid var(--vgai-border-2);
+  border-radius: 5px;
+  background: var(--vgai-bg-2);
+  box-shadow: 0 8px 28px rgb(0 0 0 / 35%);
+}
+
+.vgai-asset-context-menu button {
+  width: 100%;
+  min-height: 28px;
+  display: flex;
+  justify-content: space-between;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vgai-text-1);
+  text-align: left;
+}
+
+.vgai-asset-context-menu button:hover:not(:disabled) {
+  background: var(--vgai-accent-muted);
+}
+
+.vgai-asset-context-menu kbd {
+  color: var(--vgai-text-3);
+  font: inherit;
+}
+
+@media (max-width: 900px) {
+  .vgai-asset-tree {
+    display: none;
+  }
+}
+
+.vgai-asset-editor {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: var(--asset-editor-structure-width, 240px) minmax(280px, 1fr) var(
+      --asset-editor-details-width,
+      300px
+    );
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  grid-template-areas: "toolbar toolbar toolbar" "structure viewport details" "status status status";
+  background: var(--vgai-bg-1);
+}
+
+.vgai-asset-editor[data-structure-collapsed="true"] {
+  grid-template-columns: 0 minmax(280px, 1fr) var(--asset-editor-details-width, 300px);
+}
+.vgai-asset-editor[data-details-collapsed="true"] {
+  grid-template-columns: var(--asset-editor-structure-width, 240px) minmax(280px, 1fr) 0;
+}
+.vgai-asset-editor[data-structure-collapsed="true"][data-details-collapsed="true"] {
+  grid-template-columns: 0 minmax(280px, 1fr) 0;
+}
+.vgai-asset-editor[data-structure-collapsed="true"] .vgai-asset-editor__structure,
+.vgai-asset-editor[data-details-collapsed="true"] .vgai-asset-editor__details {
+  visibility: hidden;
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+}
+
+.vgai-asset-editor__toolbar {
+  grid-area: toolbar;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--vgai-border-1);
+  background: var(--vgai-bg-2);
+}
+.vgai-asset-editor__toolbar strong {
+  min-width: 100px;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vgai-asset-editor__commands {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+}
+.vgai-asset-editor__toolbar button,
+.vgai-asset-editor__toolbar select {
+  min-height: 26px;
+  border: 1px solid var(--vgai-border-2);
+  border-radius: 3px;
+  background: var(--vgai-bg-3);
+  color: var(--vgai-text-1);
+}
+.vgai-asset-editor__structure {
+  grid-area: structure;
+  border-right: 1px solid var(--vgai-border-1);
+}
+.vgai-asset-editor__details {
+  grid-area: details;
+  border-left: 1px solid var(--vgai-border-1);
+}
+.vgai-asset-editor__structure,
+.vgai-asset-editor__details {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px;
+  background: var(--vgai-bg-2);
+}
+.vgai-asset-editor__viewport {
+  grid-area: viewport;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  position: relative;
+}
+.vgai-asset-editor__status {
+  grid-area: status;
+  min-height: 28px;
+  padding: 5px 10px;
+  border-top: 1px solid;
+  background: var(--vgai-bg-2);
+  font-size: 11px;
+}
+.vgai-asset-editor__resize {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  margin-top: 10px;
+  color: var(--vgai-text-3);
+  font-size: 10px;
+}
+
+@media (max-width: 900px) {
+  .vgai-asset-editor {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(260px, 1fr) auto auto;
+    grid-template-areas: "toolbar" "viewport" "details" "status";
+  }
+  .vgai-asset-editor__structure {
+    display: none;
+  }
+  .vgai-asset-editor__details {
+    max-height: 220px;
+    border-left: 0;
+    border-top: 1px solid var(--vgai-border-1);
+  }
+}