@vgai/editor 0.4.0-canary.20260715.0 → 0.4.0

package/src/components/asset-workflow.css

@@ -1,5 +1,4 @@
 .vgai-asset-library-panel {
-  container-type: inline-size;
   width: 100%;
   height: 100%;
   min-width: 0;
@@ -7,142 +6,256 @@
   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
-    );
+.vgai-asset-library-navigator {
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
+  min-width: 0;
   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-navigator__controls {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 6px;
+  border-bottom: 1px solid var(--vgai-border-1);
+  background: var(--vgai-bg-2);
 }
 
-.vgai-asset-library[data-density="compact"] {
-  --asset-card-width: 136px;
-  --asset-card-height: 178px;
+.vgai-asset-library-navigator__search-row {
+  display: flex;
+  gap: 4px;
 }
 
-.vgai-asset-library[data-density="large"] {
-  --asset-card-width: 208px;
-  --asset-card-height: 254px;
+.vgai-asset-library-navigator__search-row > .vgai-input {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+.vgai-asset-library-navigator__filters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
 }
 
-.vgai-asset-library__sources,
-.vgai-asset-library__details {
+.vgai-asset-library-navigator__filters .vgai-select {
+  width: 100%;
   min-width: 0;
+}
+
+.vgai-asset-library-navigator__status {
+  color: var(--vgai-text-3);
+  font-size: 10px;
+}
+
+.vgai-asset-library-navigator__results {
+  flex: 1;
   min-height: 0;
   overflow: auto;
-  background: var(--vgai-bg-2);
+  padding: 4px;
 }
 
-.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-library-navigator__result-space {
+  position: relative;
 }
 
-.vgai-asset-source-size {
-  position: absolute;
-  left: 8px;
-  bottom: 8px;
-  width: min(180px, calc(var(--asset-source-width) - 16px));
+.vgai-asset-library-navigator__filter-drawer {
+  min-height: 0;
+  max-height: 58%;
+  overflow: auto;
+  border-bottom: 1px solid var(--vgai-border-1);
+  background: var(--vgai-bg-2);
 }
 
-.vgai-asset-pane-size {
-  padding: 6px 10px 0;
-  color: var(--vgai-text-3);
+.vgai-asset-library-navigator__filter-heading {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 7px;
+  border-bottom: 1px solid var(--vgai-border-1);
+  background: var(--vgai-bg-2);
+  color: var(--vgai-text-2);
   font-size: 10px;
+  font-weight: 650;
+}
+
+.vgai-asset-library-navigator__source-filters {
+  display: block;
+  overflow: visible;
+  padding: 10px;
+  border: 0;
+  background: var(--vgai-bg-2);
+}
+
+.vgai-asset-library-navigator__save-search {
+  width: calc(100% - 12px);
+  margin: 6px 6px 0;
 }
 
-.vgai-asset-pane-size label {
+.vgai-asset-library-row {
+  position: absolute;
+  right: 0;
+  left: 0;
+  width: 100%;
+  min-width: 0;
+  min-height: 52px;
   display: flex;
   align-items: center;
   gap: 8px;
+  padding: 5px;
+  border: 1px solid transparent;
+  border-radius: var(--vgai-radius-sm, 3px);
+  background: transparent;
+  color: var(--vgai-text-1);
+  text-align: left;
 }
 
-.vgai-asset-library__sources {
-  border-right: 1px solid var(--vgai-border-1);
-  padding: 10px;
+.vgai-asset-library-row:hover,
+.vgai-asset-library-row[aria-selected="true"] {
+  background: var(--vgai-accent-muted);
 }
 
-.vgai-asset-library__details {
-  border-left: 1px solid var(--vgai-border-1);
+.vgai-asset-library-row[aria-selected="true"] {
+  border-color: var(--vgai-accent);
 }
 
-.vgai-asset-library__results {
+.vgai-asset-library-row .vgai-asset-card__preview {
+  width: 44px;
+  height: 40px;
+  flex: 0 0 44px;
+  aspect-ratio: auto;
+}
+
+.vgai-asset-library-row__copy {
   min-width: 0;
-  min-height: 0;
   display: flex;
+  flex: 1;
   flex-direction: column;
+  gap: 2px;
 }
 
-.vgai-asset-library__toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  min-height: 44px;
-  padding: 7px 10px;
+.vgai-asset-library-row__name,
+.vgai-asset-library-row__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vgai-asset-library-row__name {
+  font-size: 11px;
+  font-weight: 550;
+}
+
+.vgai-asset-library-row__meta {
+  color: var(--vgai-text-3);
+  font-size: 10px;
+}
+
+.vgai-asset-library-navigator__loading {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  color: var(--vgai-text-2);
+  font-size: 10px;
+}
+
+.vgai-project-assets-toolbar {
+  flex: 0 0 auto;
   border-bottom: 1px solid var(--vgai-border-1);
   background: var(--vgai-bg-2);
 }
 
-.vgai-asset-library__grid {
+.vgai-project-assets-toolbar__row {
+  width: 100%;
+  min-width: 0;
+  min-height: 28px;
+  box-sizing: border-box;
+  gap: 4px;
+  padding: 2px 4px;
+  border: 0;
+  background: transparent;
+}
+
+.vgai-project-assets-toolbar__row + .vgai-project-assets-toolbar__row {
+  border-top: 1px solid var(--vgai-border-1);
+}
+
+.vgai-project-assets-toolbar__select {
+  min-width: 0;
+  flex: 1 1 64px;
+  width: 64px;
+}
+
+.vgai-project-assets-toolbar__more {
   position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  outline: none;
+  flex: 0 0 auto;
 }
 
-.vgai-asset-card {
+.vgai-project-assets-toolbar__menu {
   position: absolute;
+  z-index: 1000;
+  top: calc(100% + 3px);
+  right: 0;
+  min-width: 170px;
+}
+
+.vgai-project-assets-results {
+  background: var(--vgai-bg-0);
+  box-shadow: inset 0 1px 0 var(--vgai-border-1);
+}
+
+.vgai-project-asset-entry {
   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;
+  border: 1px solid var(--vgai-border-1);
+  background: var(--vgai-bg-1);
+  transition:
+    border-color 90ms ease,
+    background-color 90ms ease;
 }
 
-.vgai-asset-card:hover {
-  background: var(--vgai-accent-muted);
+.vgai-project-asset-entry:hover {
+  border-color: var(--vgai-border-2);
+  background: var(--vgai-bg-2);
 }
 
-.vgai-asset-card[aria-selected="true"] {
+.vgai-project-asset-entry[data-selected="true"] {
   border-color: var(--vgai-accent);
   background: var(--vgai-accent-muted);
+  box-shadow: inset 0 0 0 1px var(--vgai-accent);
 }
 
-.vgai-asset-card:focus-visible {
-  outline: 2px solid var(--vgai-focus, var(--vgai-accent));
-  outline-offset: -2px;
+.vgai-project-asset-entry__preview {
+  box-sizing: border-box;
+  border: 1px solid var(--vgai-border-1);
+  background:
+    linear-gradient(45deg, rgb(255 255 255 / 2%) 25%, transparent 25%) 0 0 / 12px 12px,
+    linear-gradient(-45deg, rgb(255 255 255 / 2%) 25%, transparent 25%) 0 6px / 12px 12px,
+    var(--vgai-bg-inset);
+}
+
+.vgai-project-asset-entry[data-view="list"] {
+  border-color: transparent;
+  background: transparent;
+}
+
+.vgai-project-asset-entry[data-view="list"] .vgai-project-asset-entry__preview {
+  border: 0;
+  background: transparent;
+}
+
+.vgai-asset-editor button:focus-visible,
+.vgai-asset-browser button:focus-visible,
+.vgai-asset-editor input:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px var(--vgai-accent);
 }
 
 .vgai-asset-card__preview {
@@ -245,108 +358,6 @@
   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;
@@ -390,35 +401,12 @@
   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";
+  display: flex;
+  flex-direction: column;
   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;
@@ -427,13 +415,6 @@
   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;
@@ -449,58 +430,10 @@
   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;
+  flex: 1;
   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);
-  }
-}

package/src/editor-api.ts

@@ -906,7 +906,7 @@ export async function getOnlineAssetFiles(source: string, id: string): Promise<A
   return data.files;
 }
 
-/** Resolve a read-only Asset Lab model from the editor's catalog cache. */
+/** Resolve a read-only interactive model preview from the editor's catalog cache. */
 export async function getOnlineAssetPreview(
   source: string,
   id: string,

package/template/vgai.game.json

@@ -6,7 +6,7 @@
   "editorPort": 5173,
   "version": "0.1.0",
   "engine": {
-    "version": "0.4.0-canary.20260715.0"
+    "version": "0.4.0"
   },
   "resolution": {
     "width": 1280,