apiskill 0.1.1 → 0.1.3

package/src/styles.css

@@ -30,8 +30,12 @@ button {
 }
 
 .app-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100svh;
   min-height: 100vh;
-  padding: 18px;
+  padding: 18px 18px 0;
+  overflow: hidden;
 }
 
 .topbar {
@@ -411,6 +415,44 @@ p {
   justify-content: flex-end;
 }
 
+.document-toolbar {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+}
+
+.document-source-summary {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.document-source-summary > span {
+  color: #6a7685;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.document-source-summary strong,
+.document-source-summary small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.document-source-summary strong {
+  color: #1d2936;
+  font-size: 13px;
+}
+
+.document-source-summary small {
+  color: #176b4f;
+  font-size: 12px;
+}
+
+.document-toolbar > .version-message {
+  grid-column: 1 / -1;
+}
+
 .source-tabs {
   display: inline-flex;
   width: fit-content;
@@ -447,10 +489,86 @@ p {
   gap: 10px;
 }
 
-.blank-document-dialog-body {
+.document-dialog {
+  width: min(760px, 100%);
+  max-height: calc(100vh - 40px);
+  overflow: auto;
+  border: 1px solid #d7dde4;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 18px 60px rgba(18, 25, 35, 0.22);
+  animation: dialog-enter 160ms ease-out;
+}
+
+.document-dialog-tabs {
+  display: flex;
+  gap: 2px;
+  overflow-x: auto;
+  padding: 10px 20px 0;
+  border-bottom: 1px solid #e5eaf0;
+}
+
+.document-dialog-tabs button {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 38px;
+  padding: 0 12px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  color: #5c6877;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.document-dialog-tabs button.active {
+  border-bottom-color: #1b6b65;
+  color: #155a55;
+}
+
+.document-dialog-body {
+  min-height: 174px;
+  padding: 20px;
+  background: #f7f9fb;
+}
+
+.blank-document-fields {
   display: grid;
-  gap: 10px;
-  padding: 16px 20px 2px;
+  gap: 12px;
+}
+
+.document-source-input {
+  min-height: 46px;
+  background: #fff;
+}
+
+.document-file-picker {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-content: center;
+  min-height: 134px;
+  padding: 22px;
+  background: #fff;
+}
+
+.document-file-picker > svg {
+  grid-row: 1 / span 2;
+}
+
+.document-file-picker small {
+  color: #748091;
+}
+
+.document-dialog-actions {
+  gap: 8px;
+  padding-top: 18px;
+}
+
+.document-dialog-actions .clear-document-source {
+  margin-right: auto;
 }
 
 .source-input,
@@ -572,10 +690,10 @@ p {
 
 .workspace {
   display: grid;
+  flex: 1 1 auto;
   grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
   gap: 16px;
-  min-height: 420px;
-  height: calc(100vh - 270px);
+  min-height: 0;
   margin-top: 16px;
 }
 
@@ -697,6 +815,8 @@ p {
 }
 
 .endpoint-list {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -1399,6 +1519,7 @@ td code {
   place-items: center;
   padding: 20px;
   background: rgba(18, 25, 35, 0.48);
+  animation: backdrop-enter 140ms ease-out;
 }
 
 .import-dialog {
@@ -1930,9 +2051,24 @@ td code {
   }
 }
 
+@keyframes backdrop-enter {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-enter {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
 @media (max-width: 980px) {
   .app-shell {
+    height: auto;
     padding: 12px;
+    overflow: visible;
   }
 
   .topbar {
@@ -1996,6 +2132,10 @@ td code {
     flex-wrap: wrap;
   }
 
+  .document-dialog-tabs {
+    width: 100%;
+  }
+
   .source-form {
     grid-template-columns: 1fr;
   }
@@ -2017,6 +2157,7 @@ td code {
 
   .workspace {
     grid-template-columns: 1fr;
+    flex: none;
     height: auto;
   }
 
@@ -2085,6 +2226,31 @@ td code {
     flex: 1;
   }
 
+  .document-dialog {
+    max-height: calc(100vh - 20px);
+  }
+
+  .document-dialog-tabs {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    overflow: visible;
+    padding-inline: 12px;
+  }
+
+  .document-dialog-tabs button {
+    min-width: 0;
+    padding-inline: 6px;
+  }
+
+  .document-dialog-body {
+    min-height: 210px;
+    padding: 16px;
+  }
+
+  .document-dialog-actions .clear-document-source {
+    margin-right: 0;
+  }
+
   .import-dialog-actions .secondary-button {
     width: 100%;
   }

package/vite.config.ts

@@ -15,9 +15,10 @@ import {
   openApiStats,
 } from './src/manualApiConfig';
 import { startMockServer } from './scripts/lib/mock-server.mjs';
+import { getDefaultCacheDir } from './scripts/lib/cache-paths.mjs';
 
 const appRootDir = process.env.APISKILL_ROOT || process.cwd();
-const cacheDir = process.env.APISKILL_CACHE_DIR || resolve(appRootDir, 'cache');
+const cacheDir = getDefaultCacheDir();
 const versionsDir = resolve(cacheDir, 'versions');
 const latestMetaPath = resolve(cacheDir, 'latest-import.json');
 const legacyCachePath = resolve(cacheDir, 'openapi-cache.json');