Add local provider icons to the Playground

docs/.vitepress/config.ts

@@ -68,6 +68,7 @@ type Labels = {
   introduction: string
   gettingStarted: string
   playground: string
+  providerIcons: string
   language: string
   syntax: string
   nodesAndGroups: string
@@ -98,6 +99,7 @@ function sidebar(prefix: string, labels: Labels): DefaultTheme.SidebarItem[] {
         { text: labels.introduction, link: `${prefix}/guide/what-is-stack` },
         { text: labels.gettingStarted, link: `${prefix}/guide/getting-started` },
         { text: labels.playground, link: `${prefix}/guide/playground` },
+        { text: labels.providerIcons, link: `${prefix}/guide/provider-icons` },
       ],
     },
     {
@@ -155,6 +157,7 @@ const en: Labels = {
   introduction: "What is Stack?",
   gettingStarted: "Getting started",
   playground: "Using the Playground",
+  providerIcons: "Provider icons",
   language: "Language",
   syntax: "Document and syntax",
   nodesAndGroups: "Nodes and groups",
@@ -182,6 +185,7 @@ const ja: Labels = {
   introduction: "Stackとは",
   gettingStarted: "はじめる",
   playground: "Playgroundの使い方",
+  providerIcons: "Provider icon",
   language: "言語",
   syntax: "Documentとsyntax",
   nodesAndGroups: "Nodeとgroup",
@@ -209,6 +213,7 @@ const zh: Labels = {
   introduction: "什么是 Stack？",
   gettingStarted: "快速开始",
   playground: "使用 Playground",
+  providerIcons: "云服务商图标",
   language: "语言",
   syntax: "文档与语法",
   nodesAndGroups: "节点与分组",
@@ -236,6 +241,7 @@ const ko: Labels = {
   introduction: "Stack이란?",
   gettingStarted: "시작하기",
   playground: "Playground 사용법",
+  providerIcons: "클라우드 제공자 아이콘",
   language: "언어",
   syntax: "문서와 문법",
   nodesAndGroups: "노드와 그룹",

docs/guide/provider-icons.md

@@ -0,0 +1,67 @@
+# Provider icons
+
+Stack supports a provider-neutral core icon catalog without setup. AWS, Google Cloud, and Azure artwork is available through user-imported provider packs. The audited catalog below is public, but Stack does not host or redistribute the vendor SVG files.
+
+## Available provider catalog
+
+| Provider     | Audited release                            | Available IDs                                                                                                    | Official source and terms                                                                                                                         |
+| ------------ | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| AWS          | `Icon-package_07312026`                    | `aws:s3`, `aws:sqs`, `aws:lambda`, `aws:ec2`, `aws:rds`, `aws:dynamodb`, `aws:eks`                               | [AWS Architecture Icons](https://aws.amazon.com/architecture/icons/) and [AWS Trademark Guidelines](https://aws.amazon.com/trademark-guidelines/) |
+| Google Cloud | Core product icons from the May 2026 guide | `gcp:cloud-run`, `gcp:cloud-storage`, `gcp:compute-engine`, `gcp:gke`, `gcp:bigquery`, `gcp:cloud-sql`           | [Google Cloud Icon Library](https://cloud.google.com/icons) and [Google Brand Resource Center](https://about.google/brand-resource-center/)       |
+| Azure        | `Azure_Public_Service_Icons_V24`           | `azure:virtual-machines`, `azure:storage-accounts`, `azure:azure-sql-database`, `azure:aks`, `azure:app-service` | [Azure Architecture Icons](https://learn.microsoft.com/azure/architecture/icons/) and the terms included in the official archive                  |
+
+Every imported manifest records the official product name, source release, complete archive hash, terms URL, review date, permitted output categories, and non-endorsement notice. A provider pack adds only artwork; the authored node `kind` still controls its semantic styling and layout.
+
+## Why artwork is not hosted
+
+The reviewed vendor guidance permits particular diagram and documentation uses, but does not clearly grant Stack permission to repackage the SVG bytes in its website, npm package, WebAssembly module, or native binary. Static Documentation therefore shows the catalog, provenance, and exact IDs without copying vendor artwork.
+
+After you load a pack, the Playground shows its actual icons from your selected local files. It creates browser-local image URLs only after Engine validation and does not inject the SVG as page HTML. Review the linked provider terms before using or distributing a generated diagram.
+
+## Create a local pack
+
+Download the official archive yourself, then use the public Stack CLI to process that local file:
+
+```sh
+stack icons import aws ~/Downloads/aws-icons.zip \
+  --accept-terms \
+  -o .stack-icons/aws
+```
+
+Replace `aws` with `gcp` or `azure` for the other audited profiles. The importer makes no network request or upload. It verifies the complete archive, reads only reviewed paths, removes active content, preserves colors and geometry, and creates `manifest.json`, `NOTICE.md`, and `assets/*.svg`.
+
+## Use a pack in Playground
+
+Open **Icons**, choose one pack's `manifest.json` and every declared file in `assets/`, then copy an ID from the local catalog into source:
+
+```stack
+stack 1.0
+
+diagram "Storage" {
+  node files "Amazon S3" {
+    kind storage
+    icon "aws:s3"
+  }
+}
+```
+
+The selected files stay in the current browser tab. The Playground does not upload, fetch, or persist the pack, so reloads require another selection. Use **Notice** beside the SVG download when a rendered diagram embeds provider artwork.
+
+The Playground accepts an already processed pack, not a raw provider ZIP. Raw-archive verification and safe SVG processing remain in the CLI so browser code does not duplicate that security boundary.
+
+## Use a pack offline in CLI
+
+```sh
+stack render architecture.stack \
+  --provider-pack .stack-icons/aws \
+  -o architecture.svg \
+  --notice architecture.NOTICE.md
+```
+
+`--provider-pack` is repeatable. `stack fmt`, `stack check`, `stack render`, and `stack icons import` perform no network request; importing requires only that the official archive already exists locally. The CLI validates bounded pack inputs before rendering and records the exact used icons in the notice sidecar.
+
+## Offline behavior
+
+CLI authoring and SVG generation work fully offline after the CLI and any desired provider archives are on the device. Installing the CLI or obtaining a new official archive may require a connection.
+
+The Web Playground also formats, checks, and renders locally after its JavaScript and WebAssembly have loaded. It has no server rendering dependency and provider files never leave the browser. The current website is not an installed offline app, however, so a cold start without a network connection is not guaranteed.

docs/ja/guide/provider-icons.md

@@ -0,0 +1,67 @@
+# Provider icon
+
+Stackは設定不要でprovider-neutralなcore icon catalogを利用できます。AWS、Google Cloud、Azureのartworkはuser-imported provider packとして利用します。監査済みcatalogは以下で公開しますが、Stackがvendor SVG fileをhost・再配布することはありません。
+
+## 利用可能なprovider catalog
+
+| Provider     | 監査済みrelease                    | 利用可能なID                                                                                                     | 公式sourceとterms                                                                                                                              |
+| ------------ | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| AWS          | `Icon-package_07312026`            | `aws:s3`, `aws:sqs`, `aws:lambda`, `aws:ec2`, `aws:rds`, `aws:dynamodb`, `aws:eks`                               | [AWS Architecture Icons](https://aws.amazon.com/architecture/icons/)と[AWS Trademark Guidelines](https://aws.amazon.com/trademark-guidelines/) |
+| Google Cloud | 2026年5月guideのcore product icons | `gcp:cloud-run`, `gcp:cloud-storage`, `gcp:compute-engine`, `gcp:gke`, `gcp:bigquery`, `gcp:cloud-sql`           | [Google Cloud Icon Library](https://cloud.google.com/icons)と[Google Brand Resource Center](https://about.google/brand-resource-center/)       |
+| Azure        | `Azure_Public_Service_Icons_V24`   | `azure:virtual-machines`, `azure:storage-accounts`, `azure:azure-sql-database`, `azure:aks`, `azure:app-service` | [Azure Architecture Icons](https://learn.microsoft.com/azure/architecture/icons/)と公式archive内のterms                                        |
+
+Import済みmanifestには、公式product name、source release、archive全体のhash、terms URL、review date、許可されたoutput category、non-endorsement noticeが記録されます。Provider packが追加するのはartworkだけで、semantic stylingとlayoutはsourceに書いたnode `kind`が引き続き決めます。
+
+## Artworkをhostしない理由
+
+確認したvendor guidanceは特定のdiagramやdocumentationでの利用を認めていますが、Stackのwebsite、npm package、WebAssembly module、native binaryへSVG byteを再packageする明確な許諾は確認できません。そのため静的Documentationではvendor artworkを複製せず、catalog、provenance、正確なIDを表示します。
+
+Packをloadした後のPlaygroundでは、選択したlocal fileから実際のiconを表示できます。Engine validation後にbrowser-localなimage URLを作り、SVGをpage HTMLとしてinjectしません。生成diagramの利用・配布前に、link先のprovider termsを確認してください。
+
+## Local packを作る
+
+公式archiveを自分でdownloadし、publicなStack CLIでlocal fileを処理します。
+
+```sh
+stack icons import aws ~/Downloads/aws-icons.zip \
+  --accept-terms \
+  -o .stack-icons/aws
+```
+
+他の監査済みprofileでは`aws`を`gcp`または`azure`に置き換えます。Importerはnetwork requestやuploadを行いません。Archive全体を検証し、review済みpathだけを読み、active contentを除去してcolorとgeometryを保持し、`manifest.json`、`NOTICE.md`、`assets/*.svg`を生成します。
+
+## Playgroundでpackを使う
+
+**Icons**を開き、1つのpackにある`manifest.json`と`assets/`内の宣言済みfileをすべて選びます。Local catalogからIDをcopyし、sourceで使います。
+
+```stack
+stack 1.0
+
+diagram "Storage" {
+  node files "Amazon S3" {
+    kind storage
+    icon "aws:s3"
+  }
+}
+```
+
+選択fileは現在のbrowser tab内だけに留まります。Playgroundはpackをupload、fetch、永続化しないため、reload後は再選択が必要です。Provider artworkを埋め込んだSVGでは、SVG download横の**Notice**も保存してください。
+
+Playgroundが受け取るのは処理済みpackで、providerのraw ZIPではありません。Raw archiveの検証と安全なSVG処理はCLIに集約し、browser codeにsecurity boundaryを重複実装しません。
+
+## CLIでpackをoffline利用する
+
+```sh
+stack render architecture.stack \
+  --provider-pack .stack-icons/aws \
+  -o architecture.svg \
+  --notice architecture.NOTICE.md
+```
+
+`--provider-pack`は繰り返し指定できます。`stack fmt`、`stack check`、`stack render`、`stack icons import`はnetwork requestを行いません。Importに必要なのは、公式archiveがlocalに存在することだけです。CLIはbounded pack inputをrender前に検証し、実際に使ったiconをnotice sidecarへ記録します。
+
+## Offline behavior
+
+CLIと必要なprovider archiveがdeviceにあれば、source作成からSVG生成まで完全にofflineで動作します。CLIのinstallや新しい公式archiveの取得にはnetwork接続が必要な場合があります。
+
+Web PlaygroundもJavaScriptとWebAssemblyをloadした後は、format、check、renderをbrowser内で実行します。Server-side renderへの依存はなく、provider fileはbrowser外へ出ません。ただし現在のwebsiteはinstall済みoffline appではないため、networkなしのcold startは保証しません。

docs/ja/language/themes-and-icons.md

@@ -89,7 +89,7 @@ Free core catalogは、次のprovider-neutralな明示iconを`default`、`light`
 | `identity`      | Identity and access               | Authentication / authorization   |
 | `observability` | Observability system              | Metrics / logs / traces          |
 
-下のpreviewをlight / darkへ切り替えると、実際のoutputを比較できます。各imageは公開`@stack-sh/engine@0.3.0`がlocalでrenderし、DocumentationにTheme SVG assetを複製していません。Syntaxの行を選ぶとコピーできます。
+下のpreviewをlight / darkへ切り替えると、実際のoutputを比較できます。各imageは公開`@stack-sh/engine@0.4.0`がlocalでrenderし、DocumentationにTheme SVG assetを複製していません。Syntaxの行を選ぶとコピーできます。
 
 <IconCatalog locale="ja" />
 

docs/ko/guide/provider-icons.md

@@ -0,0 +1,67 @@
+# 클라우드 제공자 아이콘
+
+Stack은 설정 없이 제공자 중립적인 core icon catalog를 사용할 수 있습니다. AWS, Google Cloud, Azure 그림은 사용자가 가져온 provider pack으로 사용합니다. 아래 감사 완료 catalog는 공개하지만 Stack은 vendor SVG 파일을 호스팅하거나 재배포하지 않습니다.
+
+## 사용 가능한 제공자 catalog
+
+| 제공자       | 감사 완료 release                      | 사용 가능한 ID                                                                                                   | 공식 source 및 terms                                                                                                                             |
+| ------------ | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| AWS          | `Icon-package_07312026`                | `aws:s3`, `aws:sqs`, `aws:lambda`, `aws:ec2`, `aws:rds`, `aws:dynamodb`, `aws:eks`                               | [AWS Architecture Icons](https://aws.amazon.com/architecture/icons/) 및 [AWS Trademark Guidelines](https://aws.amazon.com/trademark-guidelines/) |
+| Google Cloud | 2026년 5월 가이드의 core product icons | `gcp:cloud-run`, `gcp:cloud-storage`, `gcp:compute-engine`, `gcp:gke`, `gcp:bigquery`, `gcp:cloud-sql`           | [Google Cloud Icon Library](https://cloud.google.com/icons) 및 [Google Brand Resource Center](https://about.google/brand-resource-center/)       |
+| Azure        | `Azure_Public_Service_Icons_V24`       | `azure:virtual-machines`, `azure:storage-accounts`, `azure:azure-sql-database`, `azure:aks`, `azure:app-service` | [Azure Architecture Icons](https://learn.microsoft.com/azure/architecture/icons/) 및 공식 archive의 terms                                        |
+
+가져온 manifest는 공식 제품명, source release, 전체 archive hash, terms URL, 검토 날짜, 허용된 output category, 비보증 안내를 기록합니다. Provider pack은 그림만 추가하며 source의 node `kind`가 계속 의미적 스타일과 레이아웃을 결정합니다.
+
+## 그림을 호스팅하지 않는 이유
+
+검토한 vendor 지침은 특정 다이어그램과 문서 용도를 허용하지만 Stack website, npm package, WebAssembly module 또는 native binary에 SVG byte를 다시 패키징할 명확한 허가는 제공하지 않습니다. 따라서 정적 문서는 vendor 그림을 복사하지 않고 catalog, provenance 및 정확한 ID를 표시합니다.
+
+Pack을 불러온 뒤에는 Playground가 사용자가 선택한 로컬 파일에서 실제 아이콘을 표시합니다. Engine 검증 후에만 브라우저 로컬 이미지 URL을 만들며 SVG를 페이지 HTML로 주입하지 않습니다. 생성한 다이어그램을 사용하거나 배포하기 전에 연결된 제공자 terms를 확인하세요.
+
+## 로컬 pack 만들기
+
+공식 archive를 직접 다운로드한 뒤 공개 Stack CLI로 로컬 파일을 처리합니다.
+
+```sh
+stack icons import aws ~/Downloads/aws-icons.zip \
+  --accept-terms \
+  -o .stack-icons/aws
+```
+
+다른 감사 완료 profile은 `aws`를 `gcp` 또는 `azure`로 바꿉니다. Importer는 네트워크 요청이나 업로드를 하지 않습니다. 전체 archive를 검증하고 검토된 경로만 읽으며 active content를 제거하고 색상과 기하를 보존한 뒤 `manifest.json`, `NOTICE.md`, `assets/*.svg`를 생성합니다.
+
+## Playground에서 pack 사용하기
+
+**Icons**를 열고 하나의 pack에 있는 `manifest.json`과 `assets/`의 선언된 파일을 모두 선택한 뒤 로컬 catalog에서 ID를 source로 복사합니다.
+
+```stack
+stack 1.0
+
+diagram "Storage" {
+  node files "Amazon S3" {
+    kind storage
+    icon "aws:s3"
+  }
+}
+```
+
+선택한 파일은 현재 브라우저 탭에만 남습니다. Playground는 pack을 업로드, fetch 또는 영구 저장하지 않으므로 새로고침하면 다시 선택해야 합니다. 생성된 SVG에 provider 그림이 포함되면 SVG 다운로드 옆의 **Notice**도 저장하세요.
+
+Playground는 이미 처리된 pack을 받으며 provider의 raw ZIP을 직접 받지 않습니다. Raw archive 검증과 안전한 SVG 처리는 CLI에 유지하여 브라우저 코드가 보안 경계를 중복 구현하지 않습니다.
+
+## CLI에서 pack을 오프라인으로 사용하기
+
+```sh
+stack render architecture.stack \
+  --provider-pack .stack-icons/aws \
+  -o architecture.svg \
+  --notice architecture.NOTICE.md
+```
+
+`--provider-pack`은 반복할 수 있습니다. `stack fmt`, `stack check`, `stack render`, `stack icons import`는 네트워크 요청을 하지 않으며 가져오기에는 공식 archive가 이미 로컬에 있으면 됩니다. CLI는 크기가 제한된 pack input을 렌더링 전에 검증하고 실제 사용 아이콘을 notice sidecar에 기록합니다.
+
+## 오프라인 동작
+
+CLI와 필요한 provider archive가 기기에 있으면 source 작성부터 SVG 생성까지 완전히 오프라인으로 동작합니다. CLI 설치나 새 공식 archive 다운로드에는 네트워크가 필요할 수 있습니다.
+
+Web Playground도 JavaScript와 WebAssembly가 로드된 뒤에는 format, check, render를 브라우저 안에서 실행합니다. 서버 렌더링 의존성이 없고 provider 파일은 브라우저 밖으로 나가지 않습니다. 다만 현재 website는 설치된 offline app이 아니므로 네트워크 없는 cold start를 보장하지 않습니다.

docs/ko/language/themes-and-icons.md

@@ -89,7 +89,7 @@ diagram "Explicit icon" {
 | `identity`      | Identity and access               | 인증 또는 권한 부여            |
 | `observability` | Observability system              | 메트릭, 로그 또는 트레이스     |
 
-아래 미리보기를 라이트와 다크로 전환하여 실제 출력을 비교할 수 있습니다. 각 이미지는 공개된 `@stack-sh/engine@0.3.0`이 로컬에서 렌더링하며 문서에 Theme SVG 에셋을 복제하지 않습니다. 문법 행을 선택하면 복사됩니다.
+아래 미리보기를 라이트와 다크로 전환하여 실제 출력을 비교할 수 있습니다. 각 이미지는 공개된 `@stack-sh/engine@0.4.0`이 로컬에서 렌더링하며 문서에 Theme SVG 에셋을 복제하지 않습니다. 문법 행을 선택하면 복사됩니다.
 
 <IconCatalog locale="ko" />