codeapp-js 0.1.1 → 0.2.2

package/docs-mockups/maker-hub/styles.css

@@ -1,404 +0,0 @@
-:root {
-  --bg: #f5f8fc;
-  --shell: #ffffff;
-  --panel: #ffffff;
-  --panel-soft: #f8fbff;
-  --text: #1c2b3a;
-  --muted: #5b6b80;
-  --line: #dbe4f0;
-  --accent: #0f6cbd;
-  --accent-2: #0078d4;
-  --accent-soft: #dcecff;
-  --shadow: 0 10px 30px rgba(20, 46, 87, 0.08);
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  min-height: 100%;
-}
-
-body {
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'Segoe UI Variable Text', 'Segoe UI', sans-serif;
-}
-
-.appShell {
-  min-height: 100vh;
-}
-
-.suiteBar {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: center;
-  padding: 12px 20px;
-  border-bottom: 1px solid var(--line);
-  background: #ffffff;
-}
-
-.suiteLeft,
-.suiteRight {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-}
-
-.suiteBadge,
-.avatar,
-.iconButton {
-  display: grid;
-  place-items: center;
-}
-
-.iconButton {
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  background: #ffffff;
-  color: var(--text);
-  cursor: pointer;
-}
-
-.suiteBadge {
-  width: 34px;
-  height: 34px;
-  border-radius: 10px;
-  background: linear-gradient(135deg, #0f6cbd, #3f98e0);
-  color: #ffffff;
-  font-weight: 700;
-}
-
-.suiteDivider {
-  width: 1px;
-  height: 24px;
-  background: var(--line);
-}
-
-.suiteLabel {
-  color: var(--muted);
-}
-
-.searchBox {
-  width: min(340px, 42vw);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 10px 12px;
-  background: #f9fbfd;
-  font: inherit;
-}
-
-.avatar {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  background: #e7eef7;
-  font-size: 0.84rem;
-  font-weight: 700;
-}
-
-.workspace {
-  display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
-  min-height: calc(100vh - 61px);
-}
-
-.leftRail {
-  padding: 18px 14px;
-  border-right: 1px solid var(--line);
-  background: #fbfdff;
-}
-
-.railLabel,
-.eyebrow,
-.cardLabel,
-.panelTitle {
-  margin: 0;
-  color: var(--accent);
-  font-size: 0.78rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.railNav {
-  display: grid;
-  gap: 4px;
-  margin-top: 12px;
-}
-
-.railNav a {
-  border-radius: 8px;
-  padding: 10px 12px;
-  color: var(--text);
-  text-decoration: none;
-}
-
-.railNav a.is-active,
-.railNav a:hover {
-  background: var(--accent-soft);
-}
-
-.railPanel {
-  margin-top: 24px;
-  padding: 16px;
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  background: #ffffff;
-}
-
-.railPanel p {
-  margin: 10px 0 6px;
-}
-
-.railPanel span {
-  color: var(--muted);
-}
-
-.contentArea {
-  padding: 20px;
-}
-
-.commandBar {
-  display: flex;
-  justify-content: space-between;
-  gap: 16px;
-  align-items: center;
-  padding: 10px 14px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: #ffffff;
-  box-shadow: var(--shadow);
-}
-
-.commandSet {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.commandPrimary,
-.commandButton,
-.tabButton {
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 10px 14px;
-  background: #ffffff;
-  color: var(--text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.commandPrimary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #ffffff;
-}
-
-.pageHeader {
-  display: grid;
-  grid-template-columns: 1.2fr 0.8fr;
-  gap: 18px;
-  align-items: start;
-  margin-top: 18px;
-}
-
-.pageHeader h1 {
-  margin: 12px 0 0;
-  font-size: clamp(2rem, 4vw, 3.2rem);
-  line-height: 1.1;
-}
-
-.lead {
-  max-width: 760px;
-  margin: 14px 0 0;
-  color: var(--muted);
-  line-height: 1.7;
-}
-
-.summaryCard,
-.infoCard {
-  padding: 18px;
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  background: #ffffff;
-  box-shadow: var(--shadow);
-}
-
-.summaryCard span,
-.summaryCard p {
-  color: var(--muted);
-}
-
-.summaryCard strong {
-  display: block;
-  margin: 8px 0;
-  font-size: 1.2rem;
-}
-
-.tabRow {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-top: 18px;
-}
-
-.tabButton.is-active {
-  background: var(--accent-soft);
-  border-color: #b8d4f5;
-  color: var(--accent);
-}
-
-.panelDeck {
-  margin-top: 16px;
-}
-
-.contentPanel {
-  display: none;
-}
-
-.contentPanel.is-active {
-  display: block;
-}
-
-.cardGrid {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.wideGrid {
-  grid-template-columns: 1.2fr 0.8fr;
-}
-
-.triGrid {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.accentCard {
-  background: linear-gradient(180deg, #eef5ff, #f8fbff);
-}
-
-.infoCard h2 {
-  margin: 10px 0;
-  font-size: 1.9rem;
-  line-height: 1.15;
-}
-
-.infoCard p,
-.infoCard li,
-.infoCard td {
-  color: var(--muted);
-  line-height: 1.7;
-}
-
-.checkList {
-  padding-left: 18px;
-  margin: 12px 0 0;
-}
-
-.compactList {
-  margin-top: 10px;
-}
-
-.metricRow {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-  margin-top: 14px;
-}
-
-.metricRow div {
-  padding: 12px;
-  border-radius: 12px;
-  background: var(--panel-soft);
-}
-
-.metricRow strong,
-.infoCard strong {
-  display: block;
-  color: var(--text);
-}
-
-.metricRow span {
-  color: var(--muted);
-  font-size: 0.88rem;
-}
-
-pre {
-  overflow-x: auto;
-  margin: 12px 0 0;
-  padding: 14px;
-  border-radius: 12px;
-  background: #0f1726;
-  color: #eff4ff;
-}
-
-code {
-  font-family: Consolas, 'Courier New', monospace;
-}
-
-.miniPills {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 14px;
-}
-
-.miniPills span {
-  padding: 8px 10px;
-  border-radius: 999px;
-  background: #eef5ff;
-  color: var(--accent);
-  font-size: 0.88rem;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 12px;
-}
-
-td {
-  padding: 10px 0;
-  border-bottom: 1px solid var(--line);
-}
-
-td:last-child {
-  color: var(--text);
-  text-align: right;
-}
-
-@media (max-width: 1080px) {
-  .workspace,
-  .pageHeader,
-  .wideGrid,
-  .triGrid,
-  .cardGrid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 760px) {
-  .suiteBar,
-  .suiteLeft,
-  .suiteRight,
-  .commandBar {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .searchBox {
-    width: 100%;
-  }
-
-  .contentArea {
-    padding: 14px;
-  }
-}

package/docs-mockups/script.js

@@ -1,26 +0,0 @@
-const aCards = Array.from(document.querySelectorAll('.conceptCard'));
-
-const revealCards = () => {
-  aCards.forEach((eCard, iIndex) => {
-    window.setTimeout(() => {
-      eCard.classList.add('is-visible');
-    }, 90 * iIndex);
-  });
-};
-
-const openConceptByKey = (sKey) => {
-  const oRoutes = {
-    '1': './maker-hub/index.html',
-    '2': './model-workspace/index.html'
-  };
-
-  if (oRoutes[sKey]) {
-    window.location.href = oRoutes[sKey];
-  }
-};
-
-document.addEventListener('keydown', (oEvent) => {
-  openConceptByKey(oEvent.key);
-});
-
-revealCards();

package/docs-mockups/signal/index.html

@@ -1,146 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Signal Console | codeapp-js Docs</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="./styles.css">
-</head>
-<body>
-  <div class="layout">
-    <aside class="sidebar">
-      <a class="brand" href="../index.html">signal.console</a>
-      <p class="versionBadge">v0.1.0</p>
-      <nav>
-        <a href="#mission">Mission</a>
-        <a href="#pipeline">Pipeline</a>
-        <a href="#commands">Commands</a>
-        <a href="#connectors">Connectors</a>
-        <a href="#examples">Examples</a>
-      </nav>
-      <div class="sidebarPanel">
-        <p class="panelLabel">Audience fit</p>
-        <p>For a docs site that should feel fast, technical, and immediately useful to developers who live in terminals and dashboards.</p>
-      </div>
-    </aside>
-
-    <main class="mainPanel">
-      <section class="hero" id="mission">
-        <div>
-          <p class="signalTag">Command-center concept</p>
-          <h1>Operational docs for shipping Power Apps code apps in plain JavaScript.</h1>
-          <p class="heroText">This direction frames codeapp-js as infrastructure. The page is built from dense panels, direct language, and clear system states rather than narrative marketing.</p>
-        </div>
-        <div class="heroMetricGrid">
-          <article>
-            <span>Generated</span>
-            <strong>services + models</strong>
-          </article>
-          <article>
-            <span>Local server</span>
-            <strong>4173</strong>
-          </article>
-          <article>
-            <span>Workflow</span>
-            <strong>npm + pac</strong>
-          </article>
-        </div>
-      </section>
-
-      <section class="pipeline" id="pipeline">
-        <article class="terminalWindow">
-          <div class="windowBar">
-            <span></span><span></span><span></span>
-          </div>
-          <pre><code>> npm install codeapp-js
-> npm start
-> pac auth create
-> pac code push --solutionName MySolution
-
-status: generated services available
-status: examples ready at /examples/*/dist/</code></pre>
-        </article>
-        <article class="eventFeed">
-          <p class="panelLabel">Pipeline states</p>
-          <ul>
-            <li><strong>Install</strong> rebuilds local Power Apps data files from npm.</li>
-            <li><strong>Serve</strong> hosts the repo root so every example stays linkable.</li>
-            <li><strong>Push</strong> updates generated code after config changes.</li>
-          </ul>
-        </article>
-      </section>
-
-      <section class="commandDeck" id="commands">
-        <div class="deckHeader">
-          <p class="panelLabel">Command reference</p>
-          <div class="tabRow" role="tablist" aria-label="Command sets">
-            <button class="tabButton is-active" data-target="installPanel">Bootstrap</button>
-            <button class="tabButton" data-target="configPanel">Configure</button>
-            <button class="tabButton" data-target="pushPanel">Deploy</button>
-          </div>
-        </div>
-        <article class="tabPanel is-active" id="installPanel">
-          <code>npm install
-npm start
-npm run start:codeapp</code>
-        </article>
-        <article class="tabPanel" id="configPanel">
-          <code>pac connection list
-pac code add-data-source -a "Dataverse" -c "connection-id"</code>
-        </article>
-        <article class="tabPanel" id="pushPanel">
-          <code>pac env select --environment "environment-id"
-pac code push --solutionName YourSolutionName</code>
-        </article>
-      </section>
-
-      <section class="connectorMatrix" id="connectors">
-        <article>
-          <p class="panelLabel">Connector matrix</p>
-          <h2>Document each integration like a supported subsystem.</h2>
-        </article>
-        <article class="matrixCard">
-          <strong>Dataverse</strong>
-          <span>Tables via `databaseReferences.default.cds.dataSources`.</span>
-        </article>
-        <article class="matrixCard">
-          <strong>Outlook</strong>
-          <span>`shared_office365` connection reference.</span>
-        </article>
-        <article class="matrixCard">
-          <strong>SharePoint</strong>
-          <span>`shared_sharepointonline` connector path.</span>
-        </article>
-        <article class="matrixCard">
-          <strong>Groups + Users</strong>
-          <span>Generated services aligned to Office 365 connectors.</span>
-        </article>
-      </section>
-
-      <section class="exampleStrip" id="examples">
-        <article>
-          <p class="panelLabel">Example fleet</p>
-          <h2>Starter app, connector demos, todo, kanban, planning poker.</h2>
-        </article>
-        <article class="exampleCard">
-          <span>codeApp/dist/</span>
-          <p>Use this as the canonical quickstart path.</p>
-        </article>
-        <article class="exampleCard">
-          <span>examples/todo/dist/</span>
-          <p>Show generated services in a small app loop.</p>
-        </article>
-        <article class="exampleCard">
-          <span>examples/outlook Demo/dist/</span>
-          <p>Prove connector-specific documentation sections.</p>
-        </article>
-      </section>
-    </main>
-  </div>
-
-  <script src="./script.js"></script>
-</body>
-</html>

package/docs-mockups/signal/script.js

@@ -1,20 +0,0 @@
-const aTabButtons = Array.from(document.querySelectorAll('.tabButton'));
-const aTabPanels = Array.from(document.querySelectorAll('.tabPanel'));
-
-const activateTab = (sTargetId) => {
-  aTabButtons.forEach((eButton) => {
-    const bIsMatch = eButton.dataset.target === sTargetId;
-    eButton.classList.toggle('is-active', bIsMatch);
-  });
-
-  aTabPanels.forEach((ePanel) => {
-    const bIsMatch = ePanel.id === sTargetId;
-    ePanel.classList.toggle('is-active', bIsMatch);
-  });
-};
-
-aTabButtons.forEach((eButton) => {
-  eButton.addEventListener('click', () => {
-    activateTab(eButton.dataset.target);
-  });
-});